卡片式UI的設計最佳賞析，有沒有驚艷了你？

在ui設計中，除了扁平化設計之外，還有沒有其他流行的設計方式呢？

當然有啦，今天我們分享的主題，就是一種可以改善應用程序的用戶體驗設計。讓我們一起來聊聊目前UI設計的熱門卡片式設計。

卡片設計大多數運用在產品的包裝，用於劃分產品的內在的不同，以其明快卻又不失創意的視覺設計，將簡單的界面劃分提高了產品內容的識別，通過色彩的合理搭配，流行趨勢，及炫酷的動畫效果，讓整個APP更加簡潔，讓用戶體驗更順暢。將產品提升到不一樣的視覺盛宴。快來先睹為快吧~

卡片這種UI元素一直是以小巧整齊的內容容器的形式而存在著。當我們探討清晰平衡、富有美感、簡約時尚而又具備良好可用性的設計方案的時候，卡片式設計幾乎是不二之選。

卡片式ui也有幾種設計規則，和大家盤點一下。

每一個卡片應當承載一種概念，其中內容不應當混搭而複雜。卡片式設計當中，卡片可以橙子啊多種多樣的信息和元素，但是單個卡片應當保持其中內容屬性的純粹性和直觀性。這樣用戶會更輕鬆的選取他們想要的內容，或者分享他們眼中最合適的內容。

根據費茨定律（Fitts』s Law），用戶應當可以點擊卡片的任何一個部分來觸發其中的內容，而不只是圖片和文本鏈接。更大的觸摸和觸發範疇是卡片本身的優勢所在，不論是在移動端的觸摸屏上，還是以鍵盤滑鼠為主桌面端上，讓整個卡片都可被點擊明顯擁有更強的可用性。

小貼士：Material Design 中常常會讓卡片擁有微妙的陰影，這種設計是非常有道理的，陰影和深度會給予用戶以視覺感知力，強化它的可見性，以及知覺上的「可點擊性」。

3、讓卡片具有視覺愉悅感

好的視覺設計和良好的可用性是卡片式設計的拿手好戲。卡片本身的良好承載性，使得它稍加打磨就可以擁有不錯的美學特徵，好用和漂亮結合到一起，會讓用戶對卡片式設計著迷的。

當你在設計實戰當中使用卡片的時候，你應當特別注意下面的幾個部分：

卡片是圖片的「重度用戶」，甚至可以說卡片「特別擅長」展示圖片。研究證明，圖片本身能夠提升設計的質感，而圖片和卡片式設計的結合無疑能夠讓卡片本身對於用戶的吸引力，再往上提升一個高度（前提是圖得找對）。

陰影和漸變是最能讓用戶將UI中的卡片和現實中的卡片聯繫到一起的元素。在設計的時候，你應當仔細觀察一下卡片在現實世界中的質感，光影的分布和走向，否則陰影和漸變太假就不好了。

當然，你還可以藉助文本來吸引用戶的注意力。卡片中的文本內容應該易於閱讀，容易理解，所以，你應當確保它具有最大的可讀性：

選擇簡單的字體和易於閱讀的配色方案（文本內容應該是清晰可見的，放置在純色背景下，擁有足夠的對比度）；嘗試控制字體的數量，對於絕大多數的情況，單個字體足以應付。

小貼士：卡片中的正文部分只需要一個Normal 字重的非襯線體就行了。

卡片通常不大，並且大多是作為詳細信息的入口而存在的，所以它本身不應當承載太多細節。當你試圖向一張卡片中加入太多的內容的時候，會讓其變得過於臃腫，不論是太長還是太寬都非常難看，而且會失去它作為一個「卡片」的隱喻。

下面就是一個採用卡片式設計的案例。注意中間的卡片，它的問題在於其中填充了太多的內容，這些內容太難以查看了。

如果動效用的好，用戶體驗會有極大的提升。動效能夠幫助用戶在基於卡片的UI當中更好的定位，並且建立不同卡片狀態之間的視覺關聯。

案例：

以上都掌握了嗎？ui界面大多講究簡約，清晰。希望本文對大家有所幫助。