Web和移動 App 正從單純的以頁面為基礎向更加個性化的體驗轉變。這種體驗建立在許多獨立元素的聚合上,卡片是其中頗具創造性的新概念。
不管你怎么看待這一概念,它都在那兒。
什么是卡片?
卡片指那些容納了圖片和文本信息作為入口以傳達更豐富信息的矩形元素,由于卡片能夠方便地展示由不同元素構成的內容,它幾乎成為了平衡UI美觀和產品實用性的默認選項。
極佳的隱喻
在UI中使用卡片是一種很好的隱喻,因為這些卡片看起來與物理世界中實際的卡片類似。在移動設備普及前,這些真實的卡片就已經存在了,比如名片,棒球卡片,撲克牌等等。事實上,卡片是一種擴散相當廣泛的交互模型。這些卡片就像現實生活中的一部分,因此,它們能夠更直觀地被用戶感知。
就快速傳達信息來講,卡片無疑是一種優秀的工具。現實世界中的棒球卡片就是一個很好的案例,你想了解的球員的基本信息都在那張小卡片的正反兩面上。
內容組織
卡片將內容進行有意義的劃分以占用更小的屏幕空間,就像文本通過段落來劃分成不同部分一樣,卡片能夠聚合各種不同的信息以形成一組連貫清晰的內容。
賞心悅目的界面
卡片設計十分依賴視覺效果。重視圖像是卡片設計的優點。研究表明,圖像能夠迅速有效地吸引用戶注意力,進而提升網站與 App 的設計質量,強調重視圖像令卡片設計對用戶更具吸引力。
如何設計一個卡片?
采用相同布局的卡片應當有一致的寬度,但高度可以不同。卡片的最大高度應當受其所處平臺的可用空間的高度限制,但可以暫時性地擴展放大(例如需要顯示一些注釋字段時)。
從設計的角度來看,卡片應當帶有圓角和短陰影。圓角使卡片在視覺上更像一個內容塊,而陰影則起強調作用。這些元素能夠讓你在不分散視覺焦點的情況下為設計增添些趣味。這也使卡片看起來像是被彈出的頁面。
此外,我們還可以充分利用動畫和移動效果。
卡片的優勢
正確地運用卡片可以提升 App 的用戶體驗。基于其功能性和形狀,卡片為我們提供了一種有趣且直觀易用的 UI 元素。
易理解的形式
眾所周知,內容為王。卡片是幾乎可以容納一切的容器。置于卡片中的內容更易于用戶理解。從這點來看,用戶能夠輕易訪問到他們所感興趣的內容。這也使用戶能夠以他們所期望的方式參與交互。
響應式和移動端設計
對于卡片設計來說最重要的一點莫過于其近乎無窮無盡的變化形式。卡片式設計在桌面端和移動端設備上均表現良好,卡片通過更易理解的內容塊來呈現內容信息,同時卡片作為容器可以輕易擴展或收縮,因此卡片可以說是響應式設計的極佳選擇。
最后但同樣重要的是,使用卡片更容易建立跨設備的統一美學形式。這也是為什么它能夠創造跨設備的一致體驗。
設計時考慮手勢操作
卡片是為手勢操作而生的。卡片設計看起來似乎是針對 App 的一種風格,這也是卡片在移動 App 設計中受到青睞的關鍵。數字卡片的表現形式與現實中的物理卡片一致,這使其能夠為用戶提供良好的體驗。用戶無需思考使用方式,他們喜歡卡片設計中那些簡單直觀易于理解的操作,例如翻轉卡片以了解更多信息或滑動以查看下一個信息塊。
我希望你能夠從本文中了解到卡片式設計越來越流行的原因。我相信這樣的趨勢還會保持相當一段時間。卡片不僅僅在視覺上易于接受,它也是一種能夠創造一致體驗的最靈活的布局方式,今天,人們快速尋找信息,而卡片在各種設備上也很好地滿足了這一需求。總之,優秀的用戶體驗一定是以人為本的。
,