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

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

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

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

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

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

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

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

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

　　適合多種元素的分類

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

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

　　適合信息快速查找

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

　　適合移動小屏幕

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

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