為數不多僅此一篇，讀懂卡片式設計長(cháng)盛不衰的秘密

編者按：可以說(shuō)現如今的移動(dòng)端UI設計中，卡片式設計撐起了半壁江山，它隨性自由又充滿(mǎn)了邏輯和組織性，它不僅流行著(zhù)，而且還正在變得更加流行。它長(cháng)盛不衰的秘密到底何在？讀下去~

個(gè)性化的用戶(hù)體驗是目前網(wǎng)頁(yè)和APP設計的大趨勢。個(gè)性化的新體驗大多建立在單獨內容的聚合體之上，而多類(lèi)型的內容想要聚合起來(lái)，卡片式的界面則是最合適的載體。如今你所看到的UI界面設計，卡片式設計幾乎無(wú)處不在，從新聞類(lèi)站點(diǎn)到游戲界面，從物流APP到社交媒體，等等等等。今天的文章將會(huì )詳細解釋卡片式設計對于設計師的意義，以及常見(jiàn)的卡片式設計的功能與特性。

什么是卡片式設計
我們在各個(gè)APP中常常見(jiàn)到的那些承載著(zhù)圖片、文字等內容的矩形區塊就是我們所說(shuō)的卡片，它們作為不同類(lèi)型內容的入口而存在，當你點(diǎn)擊它的時(shí)候能夠看到看到更多詳細的內容?？ㄆ菍@種內容容器的最形象的稱(chēng)謂，它們和現實(shí)世界中的卡片非常相似。

在卡片正是“入侵”用戶(hù)界面之前，各式各樣的卡片存在于我們周?chē)恒y行卡，身份證，名片，甚至連便利貼都算是卡片。所以，我們對于卡片有著(zhù)極為直觀(guān)的認知，它存在于我們周?chē)?，每天都和我們打交道。當我們面對卡片式界面的時(shí)候，會(huì )下意識地接受它們形同卡片的屬性，自然地與界面進(jìn)行“卡片式”的交互。

棒球卡就是現實(shí)生活中最常見(jiàn)的一種卡片，卡片的一邊是棒球運動(dòng)員的形象和姓名、球隊，翻過(guò)來(lái)之后能夠看到更多更加詳細的內容和信息。
卡片的優(yōu)勢

當卡片從現實(shí)生活走進(jìn)移動(dòng)端界面之后，它開(kāi)始成為真正強大的工具，內容以卡片為載體，化作更容易為用戶(hù)所消化的內容。用戶(hù)可以更為輕松方便地選取并獲得他們想要的內容，下面的幾個(gè)實(shí)例能夠為你揭示卡片適合在UI中使用的原因：

內容塊
    卡片將信息以區塊的形式組織到一起，用戶(hù)也喜歡閱讀成塊的內容，因為它們更為集中更適合閱讀：這種設計讓內容不會(huì )以長(cháng)篇大論的形式出現，避免因為內容太長(cháng)讓用戶(hù)產(chǎn)生畏懼心理，簡(jiǎn)單明快的內容更容易引起用戶(hù)興趣，用戶(hù)也因此能夠選擇是否要繼續閱讀下去?？ㄆ瑢热萏崛?、優(yōu)化為有意義的區塊，而且不同類(lèi)型、屬性的內容可以在卡片上組合稱(chēng)為有機的、連貫的聚合體。
易于挖掘
    卡片也是承載故事的可靠工具，內容在卡片中更容易為用戶(hù)所消化，用戶(hù)可以輕松地訪(fǎng)問(wèn)感興趣的內容，以自己想要的方式參與進(jìn)來(lái)。
用戶(hù)可以快速的掃視、翻看卡片。
視覺(jué)上的愉悅感
    基于卡片的設計通常會(huì )嚴重依賴(lài)于視覺(jué)設計。而事實(shí)上，圖片的使用也確實(shí)是卡片式設計的強項。研究表明，好的圖片能夠極大的提升APP和網(wǎng)站的視覺(jué)，讓用戶(hù)獲得愉悅感?？ㄆ皆O計在圖片素材上的強調使得它更加具有吸引力。
兼容不同尺寸的屏幕
    卡片最突出的特性就是它在可操作性上有著(zhù)近乎無(wú)窮的可能性。這也使得它稱(chēng)為了響應式設計的最好選擇，因為卡片可大可小，是自由可控的內容容器。也正是這一特性，使得卡片成為了跨設備跨屏幕的UI設計的首選元素，它能帶來(lái)一致的體驗。
以人為本的設計
    說(shuō)卡片式設計是以人為本的并不為過(guò)，因為它非常適合移動(dòng)端小屏幕和手指操作，它近乎是為你的手指而定制的存在。簡(jiǎn)單易用，和物理世界的一致性，以及易于理解的交互模式都是它的優(yōu)勢。
最佳案例
    卡片式設計正處于桌面度和移動(dòng)端設計的交叉點(diǎn)，它彌合了兩種界面在可用性和交互性上的溝壑。但是成功的卡片式設計需要具備清爽干凈的美學(xué)特征，并且能讓用戶(hù)直接輕松地交互。
卡片流
    卡片能夠構成信息流，創(chuàng )建事件流和時(shí)間軸。比如Facebook 的 Feed 就用卡片來(lái)承載事件的快速預覽，Facebook 采用的是無(wú)限滾動(dòng)加載的模式，每個(gè)卡片都是單獨的，這使得其中的信息更易于承載，也更容易分享。這種交互模式促使用戶(hù)在平臺上更多地分享信息。
發(fā)現與探索
    卡片式設計允許相關(guān)的信息自然地顯示出來(lái)，讓用戶(hù)能夠更加深入地了解自己感興趣的內容，著(zhù)名的設計創(chuàng )意社區Behance 就是這么做的。
Tinder 則是另外一個(gè)值得學(xué)習的案例。這個(gè)應用借助卡片式設計的這種探索發(fā)現的機制，讓用戶(hù)習慣性探索更多內容，從而推進(jìn)這個(gè)產(chǎn)品成為最流行的移動(dòng)端應用。Tinder 的這種機制并不復雜，喜歡的話(huà)，向左滑，不喜歡則向右滑。這種有趣而簡(jiǎn)單的交互令人上癮，尤其是當這種交互能夠行之有效地幫助用戶(hù)找到更感興趣的內容。
工作流
    卡片式設計能夠幫助用戶(hù)更好地進(jìn)行列表歸類(lèi)。Trello 的任務(wù)列表就采用了卡片式設計，它很好地作用于用戶(hù)，幫助用戶(hù)管理任務(wù)和工作。
對話(huà)框
    卡片不僅是內容的容器，它同樣也是操作和交互的載體，通常它的功能和對話(huà)框類(lèi)似。蘋(píng)果設備上的 AirDrop 服務(wù)就將卡片作為用戶(hù)操作和交互的載體。當有數據傳輸的請求之時(shí)，系統會(huì )彈出一個(gè)卡片，你可以在卡片上選擇接受內容或者拒絕。這種卡片能夠承載各種不同的交互和內容，相當的實(shí)用。
控制面板
    當卡片用來(lái)組織不同來(lái)源的內容的時(shí)候，它有著(zhù)極高的處理精度。使用卡片你能將信息聚合成符合邏輯的分組，甚至可以根據特定的上下文和背景進(jìn)行有效的排序。來(lái)自不同來(lái)源的內容根據規則被整合成不同的分組，這也是卡片式設計的優(yōu)勢。
基于卡片的設計語(yǔ)言
    2010年的時(shí)候，微軟推出了Metro設計語(yǔ)言。這種設計語(yǔ)言的一個(gè)關(guān)鍵原則就是關(guān)注應用的內容，而這通常是通過(guò)扁平化的元素、排版和卡片來(lái)實(shí)現的。一個(gè)Metro 卡片不僅僅是單純的設計元素，它還承載了內容和必要的交互。
    谷歌所提出的Material Design 設計則采用了紙的隱喻，同樣是一種典型的卡片式設計，目前仍然是主流的設計語(yǔ)言。Material Design 和 Metro 有著(zhù)許多共通之處，它也更加接近于扁平化2.0的設計特征。
簡(jiǎn)約
    當你開(kāi)始采用卡片式設計的時(shí)候，簡(jiǎn)約應當是你始終牢記的一個(gè)原則。Carrie Coucins 對此有個(gè)很好的建議：一個(gè)卡片元素能夠包含多個(gè)元素，但是最好每次都專(zhuān)注于其中的一個(gè)內容或者信息。這樣的設計能夠讓用戶(hù)進(jìn)行更加精準的選擇，也使得內容可以更加準確地消費和分享。
響應式設計
    我們都很清楚如今響應式設計的重要性，要讓自己的應用和頁(yè)面能夠在不同尺寸的屏幕上正常的使用。當我們?yōu)椴煌钠聊辉O計的時(shí)候，應當充分了解屏幕特征和所用的卡片與內容的屬性，這樣才能根據屏幕的大小快速、輕松地調整內容?？ㄆ皆O計呈現出了與響應式框架良好的兼容性，它可以輕松適應不同的屏幕尺寸和響應式設計的斷點(diǎn)。
數字化之后的卡片能夠以不同的方式進(jìn)行操控，這也是它的一大優(yōu)勢。橫向或者縱向排列，堆疊，排列等等等等。
卡片與排版
    卡片上的一切內容都應該擁有良好的可讀性：
·選擇簡(jiǎn)單且易于識別的字體，以及擁有良好對比度的配色方案
·嘗試控制字體的數量，對于絕大多數的項目，單個(gè)字體就好
結語(yǔ)：
    對于絕大多數的人而言，很難理解為何卡片式設計為何如此受歡迎，并且人氣還在持續增長(cháng)中。相信我，這種趨勢并不會(huì )那么快結束的，卡片式設計將會(huì )是UI設計的大勢索取，并持續很長(cháng)時(shí)間?？ㄆ皆O計的強大可用性是它的生命力來(lái)源，簡(jiǎn)約的設計和豐富的承載形式將會(huì )讓卡片式設計走的更遠。


文章由: 廈門(mén)網(wǎng)站建設 公司 整理播報