花瓣不在的第三天，想它...想它...想它...

卡片式設計（Card Design）作為2018年UI設計的大趨勢之一，已經(jīng)深深植根于互聯(lián)網(wǎng)世界當中。

作為承載信息的“容器”，卡片式設計能夠包含文本、媒體和按鈕等元素，而且能夠適應不同設備、屏幕尺寸，平衡用戶(hù)界面和用戶(hù)體驗之間的關(guān)系。

什么是卡片式設計？

就像是名片一樣，一個(gè)小小的矩形，里面有圖片和文字，卡片式設計能夠作為用戶(hù)獲取信息的切入點(diǎn)，既美觀(guān)又不失可用性。由于卡片式設計能夠顯示包含不同的元素內容，也易于使用，所以現在不少界面默認選擇用卡片式設計。

卡片式設計的優(yōu)點(diǎn)？

增加空間利用率

傳統的列表樣式，需要我們不斷往下滾動(dòng)才能看到更多內容，而且顯示的內容有限。但用卡片式布局，即使是瀑布流，通過(guò)水平滑動(dòng)也能顯示更多內容。

提高可操作性

卡片不僅僅是能夠展示信息，同時(shí)卡片式設計還具有可以被覆蓋、折疊、移動(dòng)和滑動(dòng)的特點(diǎn)。如此一來(lái)，更有利于擴展內容的視覺(jué)深度和可操作性了。

像是iPhone的通知中心，就是使用堆疊的卡片式設計，同類(lèi)型的消息會(huì )被折疊起來(lái)，可以幫助用戶(hù)迅速找到自己想要的東西，只需要點(diǎn)擊就能打開(kāi)，或者通過(guò)滑動(dòng)刪除。

方便信息集成

卡片式設計，除了能盡可能展現信息以外，其實(shí)還具有“邏輯”，即使我們超快速瀏覽頁(yè)面，也不會(huì )因信息多而感到混亂?？ㄆ皆O計將界面用塊狀分割開(kāi)來(lái)，讓頁(yè)面更加整潔、賞心悅目。一個(gè)頁(yè)面中各種卡片大小不一，信息的層次結構立馬就被區分開(kāi)來(lái)了。

個(gè)性化的用戶(hù)體驗

比起傳統的UI設計，卡片式UI相對簡(jiǎn)單直觀(guān)，最大的優(yōu)勢是它讓整個(gè)界面更加清晰、平衡和簡(jiǎn)潔，同時(shí)又沒(méi)有影響App的功能。

優(yōu)秀的卡片式設計

Google Play

Google Play是一個(gè)很好的例子，整個(gè)網(wǎng)站的色調都遵循著(zhù)Google的風(fēng)格?？ㄆ皆O計在網(wǎng)站里隨處可見(jiàn)，模塊化讓整個(gè)網(wǎng)站看起來(lái)井井有條。

Quora

作為一個(gè)內容網(wǎng)站，Quora用卡片式設計解決了如何在有限的布局內平衡顯示內容和用戶(hù)體驗。用卡片將信息組合成每個(gè)小模塊，便于用戶(hù)閱讀。

Linkedin

點(diǎn)擊目標越大，用戶(hù)的操作越快，Linkedin展示內容的格式就是文本、圖片、鏈接，當一張卡片都具備這些元素的時(shí)候，中心的圖片就成為了整個(gè)卡片上最大的可點(diǎn)擊區域。

Pinterest

作為卡片式設計的先驅?zhuān)琍interest的瀑布流頁(yè)面設計為用戶(hù)提供了一種流暢無(wú)縫的瀏覽體驗。盡可能減少點(diǎn)擊次數，很大程度上留住了用戶(hù)。跟Linkedin，Pinterest的每個(gè)圖片都是可以點(diǎn)擊的，在鼠標停留在頁(yè)面圖片的時(shí)候，圖片就會(huì )有微妙的陰影、顏色變化，引導用戶(hù)點(diǎn)擊。

Dribbble

經(jīng)驗表明，圖片能夠快速吸引用戶(hù)的注意力。由于每天都有很多設計師上傳自己的創(chuàng )意，Dribbble選擇了使用卡片式設計來(lái)展現每個(gè)作品。

Instagram

Instagram里面所有圖像都是以正方形發(fā)布的，這樣可以將瀑布流布局中的圖像寬度標準化。

Trello

Trello運用卡片式UI將內容分類(lèi)，優(yōu)化了用戶(hù)管理任務(wù)和工作的方式。

Airbnb

Airbnb一直專(zhuān)注于用視覺(jué)效果來(lái)吸引用戶(hù)，卡片式設計簡(jiǎn)單直觀(guān)，有利于改善用戶(hù)體驗和區分每個(gè)內容。Airbnb還采用無(wú)框設計，將統一和重復的信息相結合，內容顯示有一個(gè)標準的模式展現。

除了這些例子，Dribbble上還有很多優(yōu)秀的卡片式UI供我們參考學(xué)習。

卡片式的UI設計，不僅僅是頁(yè)面上的控件，它還是創(chuàng )建高質(zhì)量?jì)热莺吞峁┖玫挠脩?hù)體驗的重要布局元素。上面的例子展示了卡片式設計的最佳實(shí)踐，最為當下UI設計的常態(tài)風(fēng)格，再不掌握連跳槽的資格都沒(méi)有啊( ′▽?zhuān)?

匯包裝，一站解決產(chǎn)品包裝定制需求，18年經(jīng)驗/包裝盒定制廠(chǎng)家，一分鐘就給到您產(chǎn)品的包裝預算，萬(wàn)款案例讓您快速做出決策，最快看到樣品及量產(chǎn)所需時(shí)間，讓您產(chǎn)品銷(xiāo)量開(kāi)始暴增！