HMI車載設(shè)計人機交互系統(tǒng)課
4月29日打卡@郝小七的HMI設(shè)計圈
移動端卡片式設(shè)計全攻略
1、卡片式設(shè)計誕生背景
擬物化→Metro風(fēng)格→扁平化→卡片式
①擬物化 ：擬現(xiàn)實物品的造型和質(zhì)感，通過疊加高光、紋理、材質(zhì)、陰影等效果對實物進行再現(xiàn)。 加強計算機界面和現(xiàn)實物品的聯(lián)系，降低用戶使用的學(xué)習(xí)成本。
②Metro風(fēng)格：強調(diào)的是信息本身，而不是冗余的界面元素。顯示下一個界面的部分元素的功能上的作用主要是提示用戶“這兒有更多信息”。
③扁平化： 注重視覺的極簡主義，拋棄了漸變、陰影、紋理、高光等擬真視覺效果， 直接了當(dāng)?shù)叵蛴脩魝鬟f信息，讓用戶更加專注于當(dāng)前的信息。
④卡片式：矩形 信息，卡片就是交互信息的承載體 ，區(qū)分和整合信息、提升用戶的可操作性、增加界面空間的利用 。

2、如何設(shè)計卡片
01卡片框架：
卡片形態(tài)（常規(guī)-矩形框/異型-優(yōu)惠券，斜切）
圓角（大圓角-柔和/小圓角-硬朗）
投影深度（將卡片與環(huán)境進行區(qū)分）
背景（保證對比度和協(xié)調(diào)性）
手勢（滑動-卡片為單位移動、選取并拖動-拖動的卡片應(yīng)在所有元素的前面，不干擾到其他元素、滾動-卡片滾動，但卡片內(nèi)部無法滾動）
02內(nèi)容元素:
分割線（用來分割卡片中各內(nèi)容區(qū)域）
字號和字重（幫助劃分信息層級，引導(dǎo)科學(xué)閱讀和理解）
行動點（補充操作-圖標(biāo)、文本、控件/溢出菜單-大于兩個行動點時）-卡片作為更詳細信息的入口，行動點數(shù)量應(yīng)控制
03卡片間關(guān)系
信息組織方式（通欄式-僅在框架層面將信息分層/非通欄式-常規(guī)意義上說的卡片式設(shè)計）
柵格（基準(zhǔn)網(wǎng)格是8dp，卡片間隙和邊距可以調(diào)整）
間距和留白（內(nèi)容多-邊距變窄/內(nèi)容少-邊距變寬）
布局-符合視覺瀏覽模型（固定容器布局-卡片大小固定/適配內(nèi)容布局-根據(jù)具體內(nèi)容適配卡片高度/不規(guī)則排列布局-突顯每張卡片的個性化，使用不對稱的網(wǎng)格）

3、為何要用卡片式設(shè)計
01設(shè)計效率的提升
設(shè)計一致性（最小成本替換內(nèi)容，易于迭代）
適應(yīng)不同尺寸設(shè)備（簡化排布，方便處理多端設(shè)備界面的一致性問題）
靈活布局（自適應(yīng)圖片比例，減少設(shè)計開發(fā)成本）
02信息呈現(xiàn)的優(yōu)化
更適合圖文混排（將不同大小、媒介的內(nèi)容進行統(tǒng)一呈現(xiàn)）
聚焦關(guān)鍵信息（每張卡片是獨立單元）
提升閱讀效率（作為入口，引導(dǎo)點擊獲取更多詳細內(nèi)容）
提升空間利用率（縱向空間上使其折疊-卡片展開收起/利用橫向空間增加區(qū)域-banner）
03人性化設(shè)計
降低認知負荷（用戶具備卡片的閱讀和使用習(xí)慣-銀行卡）
提升可交互性（卡片可以被堆疊、覆蓋、移動和劃去，符合用戶的操作預(yù)期，增強了設(shè)計體驗感知）
方便共享（天然具有社交屬性，如名片）

4、何時使用卡片式設(shè)計

01內(nèi)容布局形式

Feed流（承載用戶主動訂閱或系統(tǒng)推薦內(nèi)容的容器，便于用戶長時間瀏覽時更專注地閱讀與篩選有效信息）

瀑布流（承載連續(xù)性內(nèi)容的容器，卡片上下左右靈活組合）

左右結(jié)構(gòu)布局（具有很強的動態(tài)可操作性，縱向、橫向空間上均可延伸，幫助用戶快速閱讀）

02功能類型

提醒與引導(dǎo)（區(qū)分內(nèi)容層級，強調(diào)信息權(quán)重，展示位置也更加靈活）

集合型功能入口（承載多入口的容器，入口樣式差異較大，通過卡片組合打包作區(qū)分，使頁面更有秩序感）

03情景模擬

模擬物理行為（映射現(xiàn)實世界中切換、分發(fā)、選擇等動作）

模擬物件（映射現(xiàn)實世界的方形物件-優(yōu)惠券、會員卡）

5、何時不使用卡片式設(shè)計

01長文咨詢類頁

資訊類應(yīng)用，用戶多以瀏覽為主，不會過多操作。列表展示能讓用戶瀏覽時，視覺動線始終聚焦標(biāo)題等核心信息，不會被過多的留白所中斷。

02消息聯(lián)系人等頁

消息列表頁、聯(lián)系人頁更適合用列表，這類界面每個模塊的信息布局相對統(tǒng)一，無需劃分區(qū)域。使用卡片不僅浪費空間，而且降低查找效率。

03圖片陳列頁

典型的圖片陳列頁如相冊，因圖片自帶卡片屬性，區(qū)塊感強，無需再刻意設(shè)計成卡片樣式。

04簡單入口引導(dǎo)頁

類似設(shè)置頁，聚合了不同功能入口，在信息權(quán)重和樣式上無很強的優(yōu)先級區(qū)分，建議采用列表。