卡比。列表，它們?nèi)绾斡绊懢W(wǎng)站用戶體驗

如今，組織網(wǎng)站內(nèi)容的兩種最常用的方法是使用卡片和列表。每個人都有其優(yōu)點和缺點。自從網(wǎng)絡誕生之初就出現(xiàn)了清單，而基于卡的設計直到最近才成為一種不可忽視的力量，并且越來越成為內(nèi)容組織的一種流行選擇。

卡和清單是顯示內(nèi)容的獨特方式，這意味著它們在特定情況下分別是好是壞。當然，對于Web設計人員來說，關(guān)鍵是要了解何時正確使用每臺設備可以為用戶帶來更好的用戶體驗。答案可能會讓您感到驚訝，并使您對設計原理的看法有所不同。

在這里，我們探討了在網(wǎng)頁設計中何時使用卡片而非列表，反之亦然。

什么是卡？什么是清單？

為了幫助我們理解何時使用卡或列表更適合用于UX，它可以極大地幫助我們首先了解每個對象是什么以及每個對象（或應該）做什么。

卡是顯示各種相關(guān)信息的容器，用戶可以從中獲得更多信息。盡管它仍然是平面設計的產(chǎn)品，但由于它通常具有淺3D效果（如陰影以指示可點擊性），因此更適合歸類為Flat Design 2.0。諸如視覺深度之類的3D效果是用戶的指示符，告訴他們可以單擊以獲取更多信息。

有趣的是，紙牌存在二分法，因為它通常在形狀和大小上都類似于實際的紙牌。這暗示了過時的擬態(tài)，其中圖形元素類似于實際項目。

列表是一個頁面，用戶的搜索條件或瀏覽習慣會將其作為頁面。列表頁面實質(zhì)上具有許多各種候選項目或條目。因此，列表必須有助于對適當?shù)腢X進行高效且快速的眼睛掃描。這是一個重要的區(qū)別，有助于在可用性方面區(qū)分列表比卡片更合適。

何時使用卡

既然我們知道了卡片和列表之間的關(guān)鍵區(qū)別，那么當在網(wǎng)頁設計中適當使用每種卡片時，我們就更容易自信地知道它們。

用于信息瀏覽（而不是搜索）

卡片使用戶很難甚至根本無法輕易辨別內(nèi)容的排名重要性。例如，由于卡片的輪廓/邊界看起來都相似，因此卡片沒有提供有關(guān)頁面上內(nèi)容查看順序的明顯信息。當然，基本的眼動研究總是建議用戶首先從頁面頂部和左側(cè)的內(nèi)容開始，但是列表使用戶可以更直觀地跟隨這種吸收在線內(nèi)容的基本方式。

這就是為什么使用卡片瀏覽龐大的收藏集（例如Pinterest上的收藏集）是理想的原因。當您僅在Pinterest上瀏覽搜索結(jié)果時，而不是確定以什么順序查看它，基于卡的結(jié)果的無限滾動使瀏覽變得有吸引力，有趣和容易。每當您看到有趣的東西時，都可以立即單擊該卡以獲取更多信息。即時滿足。

用于不同項目的分組

根據(jù)所使用的應用程序或程序，最終會遇到一個儀表盤，該儀表盤使用基于卡片的設計來輕松區(qū)分各種類型的內(nèi)容。這是卡的優(yōu)勢之一，它可以使用戶快速識別他們要管理的不同類型的內(nèi)容。

由于卡片使用邊界來建立視覺邊界，因此在將不同元素進行分組時，它們是理想的選擇。

何時使用清單

列表比卡片要簡單一些，也許是因為它們在網(wǎng)頁設計中的使用時間已經(jīng)更長了。結(jié)果，往往易于確定何時正確使用它們。

進行高效的眼睛掃描

當用戶需要在網(wǎng)站上快速搜索他們想要的內(nèi)容時，例如在輸入搜索詞后仔細閱讀搜索結(jié)果頁面時，首選列表。垂直的列表和一個元素位于下一個元素之上的一行上的列表比卡片更能吸引用戶的視線，因為列表是固定的，而卡片卻不在行中的固定位置。

對于較小的屏幕

簡而言之，卡片在屏幕上占據(jù)了更多空間。這使得它們在移動設備和某些平板電腦上的使用成為問題，因為它迫使用戶向下滾動頁面以比使用列表時更快地查看更多選擇。由于列表的元素僅位于頁面長度的短行中，因此用戶可以看到更多選擇，而不必依賴短期存儲（那些看基于卡的設計的人在向下滾動到查看更多元素）。

當您的設計要求用戶在屏幕上進一步記住選擇時，他們將開始遇到認知負擔，這會損害UX。認知負荷意味著您的大腦在仍在處理其他新信息時必須更加努力地記住某件事。反過來，這會減慢任務的速度，并有可能完全放棄用戶任務。

在我的智能手機的App Store應用程序上，應用程序類別被組織成一個整潔的垂直列表，在一個頁面上顯示八個項目，而我不必擔心向下滾動以查看更多內(nèi)容并記住先前的選擇。如果這是在具有更大卡的布局中完成的，那么我最多只能看到一些選擇，這會妨礙我的用戶體驗。

卡與列表

網(wǎng)站設計制作只是一個組織系統(tǒng)，用于顯示一些相關(guān)信息，這些信息鏈接到站點導航的更深層。它們非常適合讓用戶瀏覽大量信息以及對項目進行分組。

列表是顯示搜索結(jié)果的頁面以及作為與搜索查詢匹配的候選項目的條目。它們是將相似內(nèi)容組織為垂直對齊的理想選擇。

記住這兩個重要的區(qū)別，您將以出色的設計精巧地組織內(nèi)容。