目前網(wǎng)站中信息整合最常見(jiàn)的方式就是卡片式設(shè)計(jì)和列表式設(shè)計(jì)。列表式在UI設(shè)計(jì)中算是一枚"元老級(jí)"的大將了，而卡片式設(shè)計(jì)則是一匹"黑馬"，近年來(lái)異軍突起，越來(lái)越受到大眾的喜愛(ài)。兩種設(shè)計(jì)在實(shí)現(xiàn)良好的用戶體驗(yàn)上各有千秋，卡片式設(shè)計(jì)實(shí)現(xiàn)了圖文的完美結(jié)合，能給用戶呈現(xiàn)良好的視覺(jué)效果，同時(shí)具有直觀的可操作性(卡片的移動(dòng)、翻轉(zhuǎn)等)，而列表式設(shè)計(jì)結(jié)構(gòu)清晰，在有限的空間中展示更緊湊的內(nèi)容，有助于用戶快速瀏覽內(nèi)容，在信息查找獲取方面更具優(yōu)勢(shì)。不過(guò)這兩種設(shè)計(jì)方式給網(wǎng)站帶來(lái)的正面影響都是基于某種的適用情境的，離開(kāi)了特定的適用情境，它們反而可能會(huì)帶來(lái)"災(zāi)難"。因此，為了給用戶提供更好的用戶體驗(yàn)，和小飛一起探究探究這兩種網(wǎng)站內(nèi)容組織方式最佳的適用情境吧!

　　卡片式設(shè)計(jì)和列表式設(shè)計(jì)

　　為了更好理解卡片式設(shè)計(jì)和列表式設(shè)計(jì)的適用情境，我們首先需要了解一下這兩種設(shè)計(jì)方式。

　　卡片式設(shè)計(jì) ，相信不用小飛多說(shuō)了，前面在《解密網(wǎng)站設(shè)計(jì)潮流：為什么卡片式設(shè)計(jì)這么火?》已經(jīng)進(jìn)行過(guò)系統(tǒng)的介紹了。卡片式設(shè)計(jì)是將網(wǎng)站中的各種信息組織成卡片，一張卡片就是一個(gè)信息容器，提供給用戶進(jìn)入某個(gè)功能或內(nèi)容的入口。它具備適合響應(yīng)式、排版整齊、簡(jiǎn)單易讀、直觀可操作等多個(gè)優(yōu)點(diǎn)。盡管卡片式設(shè)計(jì)是由扁平化設(shè)計(jì)衍生而來(lái)的，是內(nèi)容扁平化的一種形式，但在不斷的發(fā)展之中，它已逐漸與扁平化設(shè)計(jì)區(qū)別開(kāi)來(lái)，自成體系，這是因?yàn)榭ㄆ皆O(shè)計(jì)中開(kāi)始使用微妙的3D效果比如用陰影效果強(qiáng)調(diào)行為引導(dǎo)按鈕，以獲取用戶更多的注意力。如果你一定要將其同扁平化聯(lián)系起來(lái)，那不妨稱它為扁平化設(shè)計(jì)2.0吧!很多社交媒體比如Pinterest、Twitter等都非常偏愛(ài)卡片式設(shè)計(jì)。

　　列表式設(shè)計(jì) 通常結(jié)構(gòu)比較簡(jiǎn)單，以縱向列表展示許多類似的信息欄，信息欄中一般是簡(jiǎn)單的圖文組合(標(biāo)題+小圖)或純文本信息(比如知乎等閱讀類產(chǎn)品，見(jiàn)下圖)。在這樣的界面上，用戶可以快速滑動(dòng)查找自己想要的信息。另外，列表式設(shè)計(jì)之中還經(jīng)常設(shè)有搜索欄，這樣用戶可以基于自己的搜索條件進(jìn)行查找。列表式設(shè)計(jì)在網(wǎng)站中由來(lái)已久，列表也是隨處可見(jiàn)：導(dǎo)航列表、選項(xiàng)列表、消息列表等。由于列表垂直排列每一行內(nèi)容，相對(duì)卡片式設(shè)計(jì)，在同樣大的視窗中可以放置更多的內(nèi)容，可供用戶閱讀的文章數(shù)量更多，不少新聞?lì)惡蛿?shù)據(jù)類網(wǎng)站更青睞于這種設(shè)計(jì)。

　　在簡(jiǎn)要了解卡片式和列表式設(shè)計(jì)后，相信大家在理解這兩種方式的適用情境上也會(huì)更容易。下面小飛將分別介紹這兩種設(shè)計(jì)的適用情境。

　　卡片式設(shè)計(jì)的適用情境：

　　適合信息瀏覽(而不是信息查找)

　　卡片式設(shè)計(jì)使用抓人眼球的圖片，整齊一致的柵欄格，各種形式的元素，致力于給用戶提供良好的視覺(jué)效果，從而吸引他們?yōu)g覽全文。這種卡片式的滾動(dòng)很有趣味性，能在一定程度上吸引用戶，很適合用戶瀏覽信息，但不適合信息查找。這是因?yàn)椋环矫妫ㄆ皆O(shè)計(jì)更加注重不同卡片之間的排版契合，很少考慮它們之間的先后次序或重要程度。另一方面，卡片式設(shè)計(jì)也很難滿足用戶"F"型的瀏覽習(xí)慣(眼球追蹤研究表明用戶會(huì)更容易注意到網(wǎng)頁(yè)上方和左側(cè)的內(nèi)容)，在重點(diǎn)突出某項(xiàng)內(nèi)容或方便用戶查找方面比較遜色。相對(duì)而言，列表式可以更好的迎合用戶這一瀏覽特點(diǎn)，可對(duì)內(nèi)容作重點(diǎn)突出。不過(guò)卡片式設(shè)計(jì)提供的視覺(jué)盛宴是列表式無(wú)法匹敵的，不少社交媒體也正是看中了它的這一優(yōu)點(diǎn)，紛紛在自己網(wǎng)頁(yè)中適用卡片式設(shè)計(jì)。

　　適合多種元素的分類

　　在《解密網(wǎng)站設(shè)計(jì)潮流：為什么卡片式設(shè)計(jì)這么火?》中，我們也講到卡片式設(shè)計(jì)可以輕松容納多種形式的元素，不管是圖片、文本、視頻、鏈接或是按鈕等。這是因?yàn)榭ㄆ妮喞阌谝曈X(jué)分界線的建立，可以讓各種形式的元素保持整齊有序，不顯得雜亂無(wú)章。如果你的網(wǎng)站上涉及元素的種類比較多，展示的內(nèi)容很是豐富，卡片式設(shè)計(jì)是很好的一個(gè)選擇。

　　列表式設(shè)計(jì)的適用情境：

　　適合信息快速查找

　　列表從某種程度上來(lái)說(shuō)要比卡片更加直白一點(diǎn)。這一點(diǎn)從它的構(gòu)成中就可以看出，列表式設(shè)計(jì)常常使用標(biāo)題加正文的格式，用戶無(wú)需點(diǎn)擊進(jìn)入就能盡可能多的了解全文，還可以隨意滑動(dòng)頁(yè)面找尋自己感興趣的內(nèi)容或是在搜索欄輸入關(guān)鍵詞迅速獲得結(jié)果頁(yè)面。而且，列表式設(shè)計(jì)是以固定的縱向列表的方式展示內(nèi)容的，一行一項(xiàng)特定的內(nèi)容，這比卡片式設(shè)計(jì)中隨意組合的卡片更容易查找。另外，在一些網(wǎng)站中，文本的影響力要遠(yuǎn)勝于圖片，很多讀者會(huì)直接跳過(guò)大圖，閱讀文字，新聞?lì)惖木W(wǎng)站就是一個(gè)范例，吸引人的標(biāo)題往往更能收獲忠實(shí)的訪客，這時(shí)列表式設(shè)計(jì)就是不二之選了。不過(guò)千萬(wàn)要記住，不能讓全文內(nèi)容顯示過(guò)多，太多的文字只會(huì)讓用戶覺(jué)得壓力山大，降低用戶點(diǎn)擊瀏覽全文的興趣，從而影響用戶的轉(zhuǎn)化率。

　　適合移動(dòng)小屏幕

　　通常來(lái)說(shuō)，與卡片式相比，列表式設(shè)計(jì)在服務(wù)器中占據(jù)的空間更小，這一點(diǎn)應(yīng)該已經(jīng)很明顯了吧。卡片式設(shè)計(jì)包含多種元素(大圖、視頻等)，而列表式設(shè)計(jì)使用元素種類較少(小圖或純文本)。這決定了列表式設(shè)計(jì)更加適合小屏幕。當(dāng)它在手機(jī)或平板等小設(shè)備上進(jìn)行顯示，網(wǎng)頁(yè)相應(yīng)縮小時(shí)不會(huì)出現(xiàn)排版錯(cuò)亂、圖片顯示不全或視頻無(wú)法播放的情況。而且列表式設(shè)計(jì)的頁(yè)面加載速度也會(huì)更快，滿足了用戶的瀏覽需求。

　　卡片式設(shè)計(jì)在吸引用戶注意力，展示眾多不同形式的內(nèi)容上很有效果，但在提供文字信息上不太理想，而列表式設(shè)計(jì)通過(guò)搜索結(jié)果頁(yè)面讓用戶可以快速找到自己想要的信息，同時(shí)更能適應(yīng)小屏幕上，但卻容易讓用戶覺(jué)得乏味無(wú)趣。兩種方式都有自己的優(yōu)點(diǎn)和不足，在您自助建站的過(guò)程中，結(jié)合自身的實(shí)際情況，合理分析兩種方式的利弊，選擇最適合自己的。