您當前位置: 南順網絡>> 官方資訊>> 建站知識

為什么你愛用的 App,都用卡片式設計?

一、什么是卡片

卡片是含有圖片和文字在內的小矩形模塊,它是用戶了解更多細節信息的「入口」。要平衡界面的美學和可用性,卡片基本是一個默認選擇。因為卡片用起來非常方便,還可以展示包含不同元素的內容。


1. 完美的擬物

在用戶界面加入卡片設計可謂完美的擬物,因為它們看起來就像日常生活中真實存在的卡片。其實早在手機設備出現之前,卡片就已經存在了,比如名片、棒球卡、撲克卡等等。當今,卡片可謂是目前使用較廣泛的一種交互模型。因此,對用戶而言,其更能憑直覺認識到,這些卡片就代表真實生活中的某物。

此外,就小故事推廣而言,卡片也是非常棒的選擇,棒球卡就是一個典例。你所需要了解的某運動員基本信息都顯示在小卡片的正反面。


2. 內容架構

卡片將內容劃分成多個有意義的部分,這樣還節省了一定的屏幕空間。類似于「字詞句段篇」的組成形式,卡片也是由最小信息單元組成,并匯總形成連貫的整體內容。


像 Facebook 這類大企業,其采用卡片驅動型的界面用于臺式桌面、手機網頁及 app 客戶端時,卡片布局就被認作設計環節中的核心了。Facebook 充分利用了盒子風格的設計(即卡片——譯者注),將信息歸類,哪怕是在怎么也滑動不到底端的頁面上。

3. 視覺享受

基于卡片的設計通常主要依靠視覺設計,而使用大量圖片就是卡片設計的一大亮點。研究發現已證實,圖片可以提升網頁或 app 的整體設計,因為圖片可以快速有效地吸引用戶的注意力。所以,加入圖片也使得基于卡片的設計更加引人入勝。

比如 Dribble,一個面向設計師等創意類作品的人群,提供作品在線服務,供網友查看的交流類網站。要展示這類內容,基于卡片的設計是再合適不過的選擇了。


二、如何設計卡片

在同一頁面布局中,卡片寬度應保持不變,但高度可以相應調整??ㄆ畲蟾叨认抻谠撈脚_可用空間的高度,但也可以臨時延伸。例如,在顯示評論框的時候。


從設計角度來看,卡片各角最好是圓角,并且最好稍有一點陰影。圓角使卡片看起來更像一個內容塊,陰影則可以反映出深度。


這些元素在沒有分散用戶注意力的前提下,能給設計帶來一些視覺亮點。另外,還能給人一種卡片像是要從頁面中跳出來的感覺。

除此之外,還可以加入動畫和動效。


三、卡片的優勢

設計恰當的話,卡片可以提升 app 的用戶體驗感。因為其功能性以及外形的原因,它們成了用戶界面的一個增值元素,對用戶來說,也更能憑直覺交互。

1. 易于理解的形式

之前 AppSo(微信號 appsolution)靈感早讀欄目分享 過「內容至上原則」??ㄆ且粋€可以裝入任何內容的設計盒子。將不同內容置于卡片之中,可以方便用戶理解。

這樣一來,用戶可以輕松了解其最關注的內容。這也使用戶可以通過各種方式來交互。

2. 響應式設計以及移動界面設計

關于卡片,最重要的是它們基本上極度容易被掌控。不管在臺式桌面還是手機客戶端,加入卡片設計的效果都非常好,因為內容可以通過更易理解的卡片呈現給用戶。就響應式設計而言,它是不錯的選擇,因為以內容盒子呈現的卡片可以方便地擴展或收縮。

最后,加入卡片,在跨平臺設備上設計出統一的美感也就不會步步維艱了。這也是為什么通過卡片可以在不同設備上輕松設計出相同的用戶體驗感。





編輯:--ns868