南順網絡

為(wèi)什麽你愛用的(de) App，都用卡片式設計？

一(yī)、什麽是卡片

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

1. 完美的(de)拟物

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

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

2. 內(nèi)容架構

卡片将內(nèi)容劃分成多個有意義的(de)部分，這樣還節省了一(yī)定的(de)屏幕空間。類似于「字詞句段篇」的(de)組成形式，卡片也是由最小信息單元組成，并彙總形成連貫的(de)整體內(nèi)容。

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

3. 視(shì)覺享受

基于卡片的(de)設計通常主要依靠視(shì)覺設計，而使用大量圖片就是卡片設計的(de)一(yī)大亮(liàng)點。研究發現已證實，圖片可(kě)以提升網頁或 app 的(de)整體設計，因為(wèi)圖片可(kě)以快速有效地(dì)吸引用戶的(de)注意力。所以，加入圖片也使得基于卡片的(de)設計更加引人入勝。

比如(rú) Dribble，一(yī)個面向設計師等創意類作品的(de)人群，提供作品在線服務，供網友查看的(de)交流類網站。要展示這類內(nèi)容，基于卡片的(de)設計是再合适不過的(de)選擇了。

二、如(rú)何設計卡片

在同一(yī)頁面布局中，卡片寬度應保持不變，但高(gāo)度可(kě)以相應調整。卡片最大高(gāo)度限于該平台可(kě)用空間的(de)高(gāo)度，但也可(kě)以臨時延伸。例如(rú)，在顯示評論框的(de)時候。

從設計角度來看，卡片各角最好是圓角，并且最好稍有一(yī)點陰影。圓角使卡片看起來更像一(yī)個內(nèi)容塊，陰影則可(kě)以反映出深度。

這些元素在沒有分散用戶注意力的(de)前提下，能給設計帶來一(yī)些視(shì)覺亮(liàng)點。另外，還能給人一(yī)種卡片像是要從頁面中跳出來的(de)感覺。

除此之外，還可(kě)以加入動畫和(hé)動效。

三、卡片的(de)優勢

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

1. 易于理(lǐ)解的(de)形式

之前 AppSo(微信号 appsolution)靈感早讀欄目分享 過「內(nèi)容至上原則」。卡片是一(yī)個可(kě)以裝入任何內(nèi)容的(de)設計盒子(zǐ)。将不同內(nèi)容置于卡片之中，可(kě)以方便用戶理(lǐ)解。

這樣一(yī)來，用戶可(kě)以輕松了解其最關注的(de)內(nèi)容。這也使用戶可(kě)以通過各種方式來交互。

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

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

最後，加入卡片，在跨平台設備上設計出統一(yī)的(de)美感也就不會步步維艱了。這也是為(wèi)什麽通過卡片可(kě)以在不同設備上輕松設計出相同的(de)用戶體驗感。

編輯:--ns868