[ 平面理論教程 ] 幫你梳理卡片式UI的設計最佳實踐分享- 設計教程 - 骨子愛創意

教學主題: 幫你梳理卡片式UI的設計最佳實踐分享

大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

今天的這個教學主題是: 幫你梳理卡片式UI的設計最佳實踐分享

這教學的重點為這幾點 [ 實踐,分享,最佳,設計,卡片,用戶,內容,UI,視覺,應當, ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

卡片式設計依然是目前UI設計的熱門，雖然我們在前幾天的文章卡片式設計並不能支撐所有的設計需求當中探討了卡片式設計為數不多的“局限”。今天我們從基本的規則入手，為你展示卡片式設計的最佳實踐。

卡片式設計依然是目前UI設計的熱門，雖然我們在前幾天的文章卡片式設計並不能支撐所有的設計需求當中探討了卡片式設計為數不多的“局限”。今天我們從基本的規則入手，為你展示卡片式設計的最佳實踐。

卡片這種UI元素一直是以小巧整齊的內容容器的形式而存在着。當我們探討清晰平衡、富有美感、簡約時尚而又具備良好可用性的設計方案的時候，卡片式設計幾乎是不二之選。早年間的Pinterest 和Facebook 是卡片式設計的先驅者，隨後Google 通過 Material Design 幾乎標準化了卡片式設計，現在你會發現卡片式設計，幾乎已經深入到各個行業、領域的UI設計當中。

最佳實踐(best practice)，是一個管理學概念，認為存在某種技術或者方法使生產管理實踐的結果達到最優，並減少出錯的可能性。也就是我們常說的“最佳解決方案”。

最初是 Pinterest 採取了這種使用卡片作為信息組織的基本元素的思路，使得網頁中多類型信息組織有了更好的用戶體驗設計方案，並隨後引發了“瀑布流”設計風潮。之後多年的積累和探究，卡片式設計有了長足的進步和相對系統的設計思路，今天的文章，我們將探討最常見也是最實用的5種卡片式設計的最佳實踐。

1、遵循“一卡一概念”的規則

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

2、讓整個卡片都可被點擊

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

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

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

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

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

圖片

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

陰影和漸變

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

排版

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

·選擇簡單的字體和易於閱讀的配色方案(文本內容應該是清晰可見的，放置在純色背景下，擁有足夠的對比度)

·嘗試控制字體的數量，對於絕大多數的情況，單個字體足以應付。

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

4、限制卡片中的內容

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

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

5、充分利用動效

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

視覺提示

視覺提示能夠幫助用戶更好的了解如何同界面進行交互。當需要為用戶展示具體的某個功能如何操作的時候，它就顯得頗為有用了。

視覺反饋

在UI設計當中，視覺反饋是極為重要的組成部分。視覺反饋的工作原理很簡單，視覺反饋幫助用戶確認他們的交互已經完成。在現實生活中，物品通常會對我們的操作給予回應，比如點擊開關會有力量的回饋，以及“喀噠”一聲響。在桌面端UI中，鼠標光標懸停在可交互的控件上之時，箭頭會變成按鈕，這也是UI 元素給予的反饋。懸停動畫增加了功能的可發現性，同時使得體驗更加有意思。在移動端和卡片式設計當中更是如此。

使用懸停動效觸發更多的選項。比如在下面的案例當中，光標懸停之後，用戶可以標記、回復、轉發或者刪除當前信息。

放大

這個放大的動效連接了預覽和詳情視圖：用戶選中卡片就可以看到對應的詳細信息。這個動效確保了用戶能夠聯繫上下文。

貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit／Undo )命令使
用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

結語

卡片是UI設計師發揮創意的畫板，它不僅僅是一個形似卡片的UI控件，它還是創建優質內容，營造優質用戶體驗的重要布局手段。

看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

希望我們所介紹的 幫你梳理卡片式UI的設計最佳實踐分享 這教學會喜歡

文章標題: 骨子愛創意- 幫你梳理卡片式UI的設計最佳實踐分享–轉載請註明來源處

本教學分類為平面理論教程中的 設計教程相關教學

文章相關關鍵字為: 實踐,分享,最佳,設計,卡片,用戶,內容,UI,視覺,應當,

本文永久連結 :幫你梳理卡片式UI的設計最佳實踐分享

本文轉載自 :VIA