已然成熟的卡片式設計，遵循著怎樣的設計規(guī)則？

當一種設計技巧或者設計手法趨近于成熟的時候，我們常?？梢钥偨Y出充足完備的最佳實踐了。在這個移動端漸漸占有主導而桌面端設備仍然主導生產力的時代，強調同時兼顧兩大平臺的設計，是天然而然的事情。對于很多人而言，在桌面端和移動端上往返切換是一件特別很是尋常的事情，設計師必要讓設計兼容不同屏幕，而卡片式設計，正是這種語境下誕生，并且蓬勃發(fā)展到了今天。

無論主推卡片式設計的Android，照舊卡片化元素越來越多的iOS，又或者是將卡片元素玩的得爐火純青的 Facebook、Twitter 等巨頭，我們可以清晰地看到卡片式設計的普及和偉大的能量。它充足整齊，有著優(yōu)秀的參與感，能夠更好地組織內容，易于擴展且特別很是天真。

同時，諸多的上風和可能性也意味著，你想要設計出體驗充足好的卡片元素，必要有充足好的策略和審慎的構思，否則，你的設計很可能是個失敗的產物。

先說說卡片式設計自己

在真正開始探究卡片式設計的最佳實踐之前，我們照舊必要梳理一下卡片式設計的基本概念和它的上風。

UI中的卡片借用了實際世界中的卡片的特性和概念。通常UI中的卡片是矩形的，其中承載圖像、文本、鏈接、按鈕等不同元素?？ㄆ侨萜鳎峭ǔＲ粋€卡片中會集中承載一種或以一種元素為核心的一小組元素。不同的元素在不同的卡片中各司其職，不同的卡片組合到一路，構成功能性的網頁，或者組合。

典型的卡片結構

例如在一個電商網站中，設計師會使用卡片來承載類目列表，在設計媒體中，卡片被用來承載用戶發(fā)出的一條條內容，在消息類網站中，卡片則常常拿來承載不同的消息。

卡片的上風也很顯明：

承載著不同元素的卡片有著千變萬化的玩法，適合用來展示尺寸不同，屬性不同的各種元素。

• 相應性：卡片移動端屏幕當中表現(xiàn)結果頗為優(yōu)美，移動端必要流暢而天真的布局，這一點卡片特別很是合適。卡片使得布局更為天真，三個卡片在桌面上可以表現(xiàn)為并排的3列，在移動端上可以縱向拍成1列，這兩種布局都能貼合用戶的閱讀風俗。

• 組織性：卡片可以將不同類型的元素有用地組織到一路，無論是圖片、視頻、文本照舊CTA按鈕，因為卡片自己的天真性，設計師可以天真地、有針對性地調整每一個元素而不用憂慮影響其他的的元素?？ㄆ瑯嫿ǔ鐾坏挠脩裟Ｊ?，使得用戶可以更好地、快速地完成義務。

• 極簡：極簡主義的設計是目前主流，也是流行的設計風格。極簡主義風格下用戶更容易理解內容，表面上也更為優(yōu)雅?？ㄆ皆O計在精神上和極簡主義雷同。

卡片式設計最佳實踐

·有目的地使用卡片

雖然卡片在UI設計中功能壯大，但是不要僅僅為了用而用。絕大多數設計師是為了行使卡片自己的壯大組織性才采用這一設計元素。

當你的UI中有大量不同類型的元素，諸如圖片、文本、列表、CTA按鈕等，你必要借助卡片來整合。

• 所承載的元素展示的長度可變

• 用戶不用考慮各種元素之間的尺寸差別

• 必要承載某些交互，比如輸入框、按鈕和鏈接等

·保持簡約

每個卡片承載一種元素，實行一個義務。各種不同的元素通常不應該混雜在一路，不同的卡片將它們分散開來，讓它們互補干擾。假如同時必要不同屬性的內容共同完成一個義務，那么要讓它們靠在一路，多卡片協(xié)同。限定卡片中文本的數量，盡量不要添加段落。

·指導用戶關注最緊張的信息或操作

善用卡片的條理結構，凸起關鍵內容和信息。例如將承載管家信息的卡片放在頂部，還可以使用排版來凸起關鍵的信息和交互。

·精心選圖

圖片是UI當中視覺化元素的代表，它能讓界面吸引人，也能讓卡片脫穎而出。但是不是圖片素質越好，對于UI就越好，圖片必須要傳達精確的信息，這是第一要務。圖片在卡片內的位置，通常取決于它是重要內容照舊支撐性的內容。

·支撐微交互

卡片自己是交互式元素，卡片上的鏈接和按鈕可以指向更為細致的信息，卡片內天然也可以承載更為多樣的微交互。比如，將光標懸停于卡片之上的時候，可以觸發(fā)表現(xiàn)其他的內容。

·支持手勢

移動端設計當中，手勢是重要的交互。手勢不僅具備可用性，而且風趣的手勢和交互能夠創(chuàng)造風趣和愉悅的體驗。通過滑動來移動卡片，以及使用點擊、長按來組織卡片，通過上下滑動來關閉卡片，早在 webOS時代就已經有了。不過，要讓整個手勢交互的邏輯順滑自恰，如許才能讓體驗自作掩飾。

·精心打磨

有創(chuàng)意的設計會讓人面前目今一亮。尺寸合理、大小合適的高清圖片讓人心曠神怡。精心打磨的細節(jié)令人看著就恬逸。你應該盡量讓卡片給人快樂和愉悅的體驗。

結語

卡片式設計假如能夠好好運用，對于整個體驗的結果是顯明而偉大的?，F(xiàn)現(xiàn)在的設計師已經在卡片式設計上有了充足深入的探究，多鉆研實例能夠讓你更好地掌握這一設計技巧。