每個(gè)產(chǎn)品都希望展示更多用戶感興趣的內(nèi)容，但受限于屏幕大小和人類(lèi)的認(rèn)知能力，我們不可能一次性獲取產(chǎn)品中的所有信息。因此，需要采用逐層展開(kāi)的結(jié)構(gòu)來(lái)平衡信息密度與操作效率。這就催生了界面設(shè)計(jì)中最經(jīng)典的「列表到詳情」界面設(shè)計(jì)模式。這種模式在列表呈現(xiàn)內(nèi)容摘要降低認(rèn)知負(fù)荷，同時(shí)為深度探索提供入口，完美契合人類(lèi)「先大概再具體」的認(rèn)知路徑。

1. 豐富列表內(nèi)容展現(xiàn)形式：豆瓣電影榜單的豎橫圖搭配

豆瓣的電影榜單設(shè)計(jì)非常巧妙：豎幅圖片完美展示電影海報(bào)，橫幅區(qū)域則用于劇照輪播。這種豎橫搭配不僅視覺(jué)和諧，還能比單圖展示更高效地利用空間。這個(gè)設(shè)計(jì)模式同樣適用于圖書(shū)榜單，橫幅區(qū)域可以展示書(shū)評(píng)。通過(guò)呈現(xiàn)豐富的信息，用戶能在列表頁(yè)就對(duì)內(nèi)容有更全面的了解，從而提高查看詳情頁(yè)的意愿。

雖然電影可以通過(guò)封面和劇照輪播來(lái)展示重點(diǎn)信息，但對(duì)于動(dòng)輒幾十甚至上百集的劇集來(lái)說(shuō)，經(jīng)典劇情實(shí)在太多，單靠幾張圖片很難吸引用戶。尤其是在當(dāng)今信息過(guò)載的時(shí)代，用戶往往只會(huì)關(guān)注那些能夠立即引起他們興趣的內(nèi)容。

幸運(yùn)的是，現(xiàn)代列表已經(jīng)進(jìn)化成動(dòng)態(tài)信息流，每次刷新都能呈現(xiàn)全新內(nèi)容，甚至能**巧妙地從不同角度重新包裝和推廣舊的信息。

2. 精選片段：B 站讓視頻亮點(diǎn)成為入口

嗶哩嗶哩從視頻中精選出精彩的橋段作為封面和標(biāo)題。即使是同一部劇，每次刷新看到的精彩橋段都不一樣。用戶點(diǎn)擊這些入口時(shí)，可以直接跳轉(zhuǎn)到視頻的精彩片段，快速進(jìn)入高潮部分，從而增強(qiáng)了互動(dòng)性和吸引力。

從 B 站的案例可以看出，列表?xiàng)l目的主題不一定要局限于劇集名稱(chēng)和海報(bào)。我們可以將精彩橋段作為主題，把劇集名稱(chēng)和海報(bào)作為輔助信息來(lái)展示。

3. 凸顯主題：騰訊視頻封面與視頻的動(dòng)態(tài)切換設(shè)計(jì)

在騰訊視頻的首頁(yè)，信息流的劇集卡片由視頻短片、劇集封面、文字和按鈕組成，巧妙地結(jié)合了視覺(jué)吸引力和功能性。當(dāng)短片播放前，封面圖片會(huì)遮蓋部分視頻畫(huà)面，以突出劇集的獨(dú)特性，幫助用戶快速區(qū)分不同內(nèi)容。 隨著短片播放幾秒后，封面會(huì)縮小，不遮擋視頻畫(huà)面，確保用戶能夠?qū)Ｗ⒂谝曨l本身。

4. 動(dòng)態(tài)替換主題：美團(tuán)外賣(mài)用菜品圖片替代店鋪 Logo

面對(duì)陌生品牌，只能依靠店名和 Logo，常常難以判斷菜品的質(zhì)量。而對(duì)于那些非知名品牌的餐廳，Logo 的參考價(jià)值幾乎為零。 美團(tuán)外賣(mài)將首頁(yè)非知名店鋪 Logo 圖片替換為銷(xiāo)量冠軍菜品的誘人圖片。讓你一眼就能看到最受歡迎的菜品，幫助你更快做出選擇。

我們還可以更進(jìn)一步：為了增加曝光，我們可以用不同維度的主題，在列表中多次展示同一家店鋪的內(nèi)容。

5. 多維度主題：餓了么用同店雙條目增加曝光

你有沒(méi)有在使用餓了么時(shí)碰到過(guò)這種事？在首頁(yè)信息流里，點(diǎn)開(kāi)兩個(gè)不同的條目，結(jié)果卻跳到同一家店鋪?lái)?yè)面。是不是覺(jué)得有點(diǎn)像 BUG？其實(shí)這不是出錯(cuò)，而是餓了么在用戶體驗(yàn)上玩了個(gè)小聰明。很多人點(diǎn)外賣(mài)，要么是饞某道菜，要么是認(rèn)準(zhǔn)某個(gè)店鋪，這設(shè)計(jì)剛好抓住了這兩種心思。 有的條目主打菜品，配上好看的美食照片和介紹，饞得你直流口水；有的條目主打店鋪，突出品牌和特色，讓你一眼認(rèn)出老熟人。雖然點(diǎn)進(jìn)去可能是同一家店，但這招挺妙。想吃某道菜的用戶一下就被菜品吸引，想找靠譜店鋪的用戶也能放心點(diǎn)店鋪條目。兩種方式一起上，增加你進(jìn)店逛逛的機(jī)會(huì)。店鋪曝光多了，點(diǎn)擊率高了，訂單自然也多。

列表中可以包含不同類(lèi)型的內(nèi)容。在傳統(tǒng)的圖文和視頻信息流中，如果有需要推廣的功能，我們可以通過(guò)特殊的設(shè)計(jì)元素將其自然地插入列表中。

6. 為列表添加交互式元素：懂車(chē)帝智能 3D 模型

如今各大 APP 的信息流千篇一律，都是圖文、視頻、廣告的組合，用戶在不斷滑動(dòng)中逐漸失去了新鮮感。懂車(chē)帝巧妙地為了推廣自家的在線 3D 看車(chē)功能，為信息流帶來(lái)了全新玩法！他們?cè)谑醉?yè)信息流中嵌入了可交互的 3D 汽車(chē)模型，這種既能觀看又能操作的創(chuàng)新形式，與傳統(tǒng)的圖文視頻形式形成鮮明對(duì)比，立即吸引了用戶的注意力，讓人忍不住想要嘗試。

7. 返回列表后動(dòng)態(tài)替換：拼多多返回后展示同款

當(dāng)你在拼多多百億補(bǔ)貼商品列表里，點(diǎn)進(jìn)一個(gè)商品詳情頁(yè)，看了半天沒(méi)下手，再返回列表，之前點(diǎn)過(guò)的商品居然被替換成了一堆類(lèi)似商品，并且新推薦的商品左上角還有會(huì)標(biāo)簽突出商品的特點(diǎn)。這感覺(jué)就像拼多多在說(shuō)：“親，那個(gè)商品不合適？沒(méi)關(guān)系，我們給你換一批，總有一款你會(huì)喜歡！”

 

蘭亭妙微(www.alimai.net )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan