如上圖，顧名思義：把包含圖片或文本聲氣嘅方塊矩形作爲可交互聲氣入口（如點擊之後進入詳情頁或進入某個功能模塊），UI 呈現形式類似卡片嘅設計形態。
喺傳統嘅聲氣集合設計中，人們往往先劃定一個內容區域框架，再往框架內填充內容；而卡片設計則系以內容爲核心，框架向內容妥協。喺卡片式設計中，往往系先定好界面上應顯示乜嘢內容，言之後再按照內容嘅呈現優先級進行排序，怕者交由用戶進行排序，比如windows phone 手機
貳.卡片設計有乜嘢好處
（1）卡片具有良好嘅隱喻效果
現實生活中有各種各樣嘅卡片形態唔斷教育著我哋對卡片嘅認知（公仔面中嘅水浒人物卡片、商業名片、撲克牌、指示牌等）呢啲卡片系聲氣嘅集合。當卡片被應用于成電子産品嘅交互模型中時，卡片也代表著某一類嘅聲氣，兼且可以點，有實行嘅交互預期。卡片系直情、言簡意赅嘅聲氣表達。
（2）卡片設計有利于自適應布局設計
對于多平台，多分辨率設備兼容，卡片式設計有唔得比擬嘅優勢。它將網站/App徹底嘅分解，將它們模塊化，分解成一個個無法再解耦嘅部分。呢啲唔得解耦嘅部分爲元內容，比如微信嘅圖文聲氣，文章嘅標題、縮略圖和摘要出現時都系一個整體，唔得分割。再次說明 卡片設計系以內容爲核心，框架向內容妥協 嘅設計。
卡片作爲一個內容容器，能好易啫嘅放大或縮小，所以對于響應式嘅設計來說，卡片系一個好鬼合適嘅選擇。
對響應式設計嘅一個實踐就系柵格系統，將網頁容器分爲若幹個柵格，用百分比來表示寬度而非用像素，但柵格嘅寬度仍系可變嘅。如下圖：頁面分爲5個柵格，各部分嘅內容可以根據唔同設備嘅寬度按照比例進行卡片大小嘅調整。
（3）美
四正劃一嘅幾何之美，望住就讓人覺得賞心悅目。
肆.卡片設計嘅一些應用場合
（1）工作流界面
人們成習慣于知道邊界，而卡片可以好易啫將某個時間過界或事件 進行歸類劃分，喺工作流中有明確順序、狀態、邊界嘅聲氣表達中，系一種有效嘅應用花臣。如下圖tapd中嘅實現，將任務和需求阿頭定義爲元數據，打開叠代打理，可以睇到需求嘅流轉狀態與相關阿頭，一目了然。
（2）用戶浏覽探索嘅界面
用戶喺浏覽尋揾靈感時，言簡意赅嘅聲氣表達系對用戶時間大曬尊重。卡片式設計以內容爲核心，展示框架向內容妥協嘅設計湊啱好冧了用戶喺浏覽、發現時嘅聲氣快速獲取、理解、消化嘅訴求。
（3）聲氣模塊化界面
對于分組集合，合理利用唔同類型嘅卡片比起傳統列表項 + 分割線 + 標題嘅視覺效率要高太多，用戶可以喺區域內快速定位到對應嘅功能集合，減少聲氣唔明確或空間唔明確給用戶帶來嘅幹擾，減少用戶思考嘅時間。
伍.避免使用卡片設計嘅場合
（1）寬屏幕，多柵格系統（列數好鬼多）界面
卡片式嘅聲氣展現形式喺App上嘅展示效果好鬼唔錯，喺PC 大屏上嘅話單就其視覺效果來講也還可以，比如一度很流行嘅寬屏瀑布流，但一旦列數到了實行到程度時，用戶嘅浏覽系需要大過界掃視、接收大量相關性嘅聲氣言之後再隔阻篩選時，強行使用卡片式設計會讓用戶嘅使用效率降低，給用戶帶來聲氣獲取障礙。
（2）卡片內容過大（過長）嘅界面
喺移動終端，卡片式設計對頁面空間嘅消耗好鬼大，元內容之間嘅界限好鬼明顯。如果卡片內容多長則容易導致一屏呈現嘅聲氣量很小。喺咁樣嘅頁面中強行使用卡片式設計，也就違背了卡片式設計聲氣集中、極簡設計嘅原則了。
總而言之，需要對唔同嘅聲氣進行整合，提高用戶聲氣獲取速度，減少用戶思考時間時，卡片式設計系一個唔錯嘅選擇。
但設計系爲了解決問題，如果因爲設計而設計，強行使用卡片式，可能會得到相反嘅效果。
留言列表
