目前網站中信息整合最常見的方式就是卡片式設計和列表式設計。列表式在UI設計中算是一枚"元老級"的大將了,而卡片式設計則是一匹"黑馬",近年來異軍突起,越來越受到大眾的喜愛。兩種設計在實現良好的用戶體驗上各有千秋,卡片式設計實現了圖文的完美結合,能給用戶呈現良好的視覺效果,同時具有直觀的可操作性(卡片的移動、翻轉等),而列表式設計結構清晰,在有限的空間中展示更緊湊的內容,有助于用戶快速瀏覽內容,在信息查找獲取方面更具優(yōu)勢。不過這兩種設計方式給網站帶來的正面影響都是基于某種的適用情境的,離開了特定的適用情境,它們反而可能會帶來"災難"。因此,為了給用戶提供更好的用戶體驗,和小飛一起探究探究這兩種網站內容組織方式最佳的適用情境吧!
卡片式設計和列表式設計
為了更好理解卡片式設計和列表式設計的適用情境,我們首先需要了解一下這兩種設計方式。
卡片式設計 ,相信不用小飛多說了,前面在《解密網站設計潮流:為什么卡片式設計這么火?》已經進行過系統(tǒng)的介紹了??ㄆ皆O計是將網站中的各種信息組織成卡片,一張卡片就是一個信息容器,提供給用戶進入某個功能或內容的入口。它具備適合響應式、排版整齊、簡單易讀、直觀可操作等多個優(yōu)點。盡管卡片式設計是由扁平化設計衍生而來的,是內容扁平化的一種形式,但在不斷的發(fā)展之中,它已逐漸與扁平化設計區(qū)別開來,自成體系,這是因為卡片式設計中開始使用微妙的3D效果比如用陰影效果強調行為引導按鈕,以獲取用戶更多的注意力。如果你一定要將其同扁平化聯(lián)系起來,那不妨稱它為扁平化設計2.0吧!很多社交媒體比如Pinterest、Twitter等都非常偏愛卡片式設計。
列表式設計 通常結構比較簡單,以縱向列表展示許多類似的信息欄,信息欄中一般是簡單的圖文組合(標題+小圖)或純文本信息(比如知乎等閱讀類產品,見下圖)。在這樣的界面上,用戶可以快速滑動查找自己想要的信息。另外,列表式設計之中還經常設有搜索欄,這樣用戶可以基于自己的搜索條件進行查找。列表式設計在網站中由來已久,列表也是隨處可見:導航列表、選項列表、消息列表等。由于列表垂直排列每一行內容,相對卡片式設計,在同樣大的視窗中可以放置更多的內容,可供用戶閱讀的文章數量更多,不少新聞類和數據類網站更青睞于這種設計。
在簡要了解卡片式和列表式設計后,相信大家在理解這兩種方式的適用情境上也會更容易。下面小飛將分別介紹這兩種設計的適用情境。
卡片式設計的適用情境:
適合信息瀏覽(而不是信息查找)
卡片式設計使用抓人眼球的圖片,整齊一致的柵欄格,各種形式的元素,致力于給用戶提供良好的視覺效果,從而吸引他們?yōu)g覽全文。這種卡片式的滾動很有趣味性,能在一定程度上吸引用戶,很適合用戶瀏覽信息,但不適合信息查找。這是因為,一方面,卡片式設計更加注重不同卡片之間的排版契合,很少考慮它們之間的先后次序或重要程度。另一方面,卡片式設計也很難滿足用戶"F"型的瀏覽習慣(眼球追蹤研究表明用戶會更容易注意到網頁上方和左側的內容),在重點突出某項內容或方便用戶查找方面比較遜色。相對而言,列表式可以更好的迎合用戶這一瀏覽特點,可對內容作重點突出。不過卡片式設計提供的視覺盛宴是列表式無法匹敵的,不少社交媒體也正是看中了它的這一優(yōu)點,紛紛在自己網頁中適用卡片式設計。
適合多種元素的分類
在《解密網站設計潮流:為什么卡片式設計這么火?》中,我們也講到卡片式設計可以輕松容納多種形式的元素,不管是圖片、文本、視頻、鏈接或是按鈕等。這是因為卡片的輪廓便于視覺分界線的建立,可以讓各種形式的元素保持整齊有序,不顯得雜亂無章。如果你的網站上涉及元素的種類比較多,展示的內容很是豐富,卡片式設計是很好的一個選擇。
列表式設計的適用情境:
適合信息快速查找
列表從某種程度上來說要比卡片更加直白一點。這一點從它的構成中就可以看出,列表式設計常常使用標題加正文的格式,用戶無需點擊進入就能盡可能多的了解全文,還可以隨意滑動頁面找尋自己感興趣的內容或是在搜索欄輸入關鍵詞迅速獲得結果頁面。而且,列表式設計是以固定的縱向列表的方式展示內容的,一行一項特定的內容,這比卡片式設計中隨意組合的卡片更容易查找。另外,在一些網站中,文本的影響力要遠勝于圖片,很多讀者會直接跳過大圖,閱讀文字,新聞類的網站就是一個范例,吸引人的標題往往更能收獲忠實的訪客,這時列表式設計就是不二之選了。不過千萬要記住,不能讓全文內容顯示過多,太多的文字只會讓用戶覺得壓力山大,降低用戶點擊瀏覽全文的興趣,從而影響用戶的轉化率。
適合移動小屏幕
通常來說,與卡片式相比,列表式設計在服務器中占據的空間更小,這一點應該已經很明顯了吧??ㄆ皆O計包含多種元素(大圖、視頻等),而列表式設計使用元素種類較少(小圖或純文本)。這決定了列表式設計更加適合小屏幕。當它在手機或平板等小設備上進行顯示,網頁相應縮小時不會出現排版錯亂、圖片顯示不全或視頻無法播放的情況。而且列表式設計的頁面加載速度也會更快,滿足了用戶的瀏覽需求。
卡片式設計在吸引用戶注意力,展示眾多不同形式的內容上很有效果,但在提供文字信息上不太理想,而列表式設計通過搜索結果頁面讓用戶可以快速找到自己想要的信息,同時更能適應小屏幕上,但卻容易讓用戶覺得乏味無趣。兩種方式都有自己的優(yōu)點和不足,在您自助建站的過程中,結合自身的實際情況,合理分析兩種方式的利弊,選擇最適合自己的。
評論(0人參與,0條評論)
發(fā)布評論
最新評論