探探和 Linkedin 都在用的卡片設計,怎樣才給你好的體驗?

2017-03-14 08:58 稿源:愛范兒  0條評論

 君導讀:最近,越來越多 app 開始使用「卡片式設計」,例如我們所熟知的高端職場社區 Linkedin 領英和 Facebook。

到底這種卡片式設計怎么用,才能給我們良好的體驗?AppSo(微信號 appsolution)為你帶來了 5 個實踐原則和案例。

卡片是簡潔小巧的信息盒子。在界面設計中,要平衡界面的審美和可用性,卡片基本是一個通用選擇。卡片這一設計概念最先被 Pinterest 和 Facebook 使用,而如今卡片的使用已經滲入了各行各業。

Pinterest 引入卡片這一概念,基本可以將某主題相關的所有信息納入一個信息盒子。

如果運用恰當的話,卡片可以提升 app 的用戶體驗。這篇文章介紹了 5 種卡片運用的最佳實踐,并提供相關的實用案例。

1. 遵循「一卡一概念」原則

卡片的所有內容只能和一個主題相關。一個卡片可以包含多種元素,但應該主要體現同類信息或內容。這樣用戶才能更輕松地選擇他們所喜愛或愿意分享的內容。

一個模塊(或卡片)「包含」一次用戶交互。

2. 保證整個卡片都可點擊

遵循菲茲定律(Fitts’s Law),要讓用戶可以點擊或觸擊卡片的任何部分,而不只是文字鏈接或圖片。無論在移動端的觸擊屏幕,還是需要鼠標操作的主桌面端,有相對大面積的觸擊區都可大大提高卡片的可用性。

AppSo(微信號 appsolution)注:

菲茲定律是人機交互領域一個非常重要的法則。其基本觀點是,當一個人用鼠標來移動鼠標指針時,屏幕上的目標其某些特征會使得點擊變得輕松或困難。目標離得越遠,到達就越費勁;目標越小,就越難點中。

小提示:推薦使用一點陰影來呈現深度,讓大家知道卡片是可點擊的。

圖片來源:nngroup

3. 保證卡片的視覺享受感

要說什么樣的卡片才是成功的,那必然是有良好設計和可用性的卡片了。對卡片稍加打磨,加入少許美學特征,卡片會讓人感覺熟悉,同時創意十足。

圖片來源:Piper Lawson

有好的文章希望站長之家幫助分享推廣,猛戳這里我要投稿

相關文章

相關熱點

查看更多
?
3d彩票平台下载