如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

文章從項目流程的各階段來講解UI設計師應該做些什么，如何做才能把自己的價值在項目中體現出最大化！

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

寫在前面

2019年6月18日Material Design更新了設計指南中數據可視化部分，這是谷歌數據可視化團隊形成的一套全面的數據可視化指南， 涵蓋了設計原則、圖表分類、圖表的選用、樣式設計、交互設計、儀表板設計等方面。個人閱讀后進行了翻譯，希望能夠分享給更多對數據可視化有興趣的設計同學！

全文章節目錄：

原則

類型

選擇圖表

樣式

行為

儀表板

數據可視化

數據可視化就是用圖形描繪信息。

原則

數據可視化是一種以圖形描繪密集和復雜信息的表現形式。數據可視化的視覺效果旨在使數據容易對比，并用它來講故事，以此來幫助用戶做出決策。

數據可視化可以表達不同類型和規模的數據，包括從幾個數據點到有大量變量的數據集。

類型

數據可視化可以以不同的形式表達。圖表是表達數據的常用方式，因為它們能夠展示和對比多種不同的數據。

圖表類型的選擇主要取決于兩點：要表現的數據和表現該數據的用意。該指南描述各種類型的圖表及其用例。

圖表類型

1. 隨時間變化

隨時間變化的圖表顯示一段時間的數據，例如多個類別之間的趨勢或比較。

常見用例包括：

股價表現、衛生統計、年表

2. 類別比較

類別比較圖表是多個不同類別數據之間的比較。

常見用例包括：

不同國家的收入、熱門場地時間、團隊分配

3. 排名

排名圖表顯示項目在有序列表中的位置。

常見用例包括：

選舉結果、性能統計

4. 占比

占比類圖表顯示了局部與整體的關系。

常見用例包括：

產品類別的綜合收入、預算

5. 關聯

關聯類圖表顯示兩個或以上變量之間的關系。

常見用例包括：

收入和預期壽命

6. 分布

分布類圖表顯示每個值在數據集中出現的頻率。

常見用例包括：

人口分布、收入分布

7. 流程

流程類圖表顯示了多個狀態之間的數據移動。

常見用例包括：

資金轉移、投票計數和選舉結果

8. 關系

關系圖表顯示多個項目之間的關系。

常見用例包括：

社交網絡、詞圖

選擇圖表

面對多種類型的圖表，以下指南提供了關于如何選擇合適的圖表見解。

顯示隨時間的變化

可以使用時間序列圖表來表示隨時間的變化，就是按時間順序表示數據點的圖表。表示隨時間變化的圖表包括：折線圖，柱狀圖（條形圖）和面積圖。

*基線值是y軸上的起始值。

柱狀圖（條形圖）和餅圖

柱狀圖（條形圖）和餅圖都可用于顯示比例，表示部分與總體的對比。

· 柱狀圖（條形圖）使用共同的基線，通過條形長度表示數量

· 餅圖使用圓的圓弧或角度表示整體的一部分

柱狀圖（條形圖），折線圖和堆疊面積圖在顯示隨時間的變化方面比餅圖更有效地。由于這三個圖表都是使用相同的基線，因此可以更輕松地根據條形長度比較值的差異。

面積圖

面積圖有多種類型，包括堆疊面積圖和層疊面積圖：

· 堆疊面積圖顯示多個時間序列（在同一時間段內）堆疊在一起

· 層疊面積圖顯示多個時間序列（在同一時間段內）重疊在一起

層疊面積圖建議不要使用超過兩個時間序列，因為這樣做會使數據模糊不清。取而代之，應當使用堆疊面積圖來比較一個時間間隔內的多個值（橫軸表示時間）。

樣式

數據可視化使用自定義樣式和形狀，使數據更容易理解，以適合用戶需求。

圖表可以從以下方面進行優化：

· 圖形元素

· 文字排版

· 圖標

· 軸和標簽

· 圖例和注釋

不同類型數據的樣式設計

可視化編碼是將數據轉換為可視形式的過程。獨特的圖形屬性可應用于定量數據（如溫度，價格或速度）和定性數據（如類別，風味或表達式）。

這些圖形屬性包括：

· 形狀

· 顏色

· 大小

· 面積

· 體積

· 長度

· 角度

· 位置

· 方向

· 密度

不同屬性的表現

多個視覺處理方法可以綜合應用于數據點的多個方面。例如，在條形圖中，條形顏色可以表示類別，而條形長度可以表示值（如人口數量）。

形狀可用于表示定性數據。在此圖表中，每個類別由特定形狀（圓形，正方形和三角形）表示，這樣可以在一張圖表中輕松實現特定范圍的比較，同時也可以進行類別之間比較。

1. 形狀

圖表可以運用形狀，以多種方式展示數據。形狀的設計可以是有趣的、曲線的，或者和高保真的等等。

形狀程度

圖表可以展示不同精度程度的數據。用于細致研究的數據應該用適合交互的形狀（在觸摸大小和功能可見性方面）展示。而旨在表達一般概念或趨勢的數據可以使用細節較少的形狀。

2. 顏色

顏色可用于以四種主要方式區分圖表數據：

· 區分類別

· 表示數量

· 突出特定數據

· 表示含義

顏色區分類別

例：圓環圖中，顏色用于表示類別。

顏色表示數量

例：地圖中，顏色用于表示數據值。

顏色突出數據

例：散點圖中，顏色用于突出特定數據。

重點區域

在不濫用的情況下，顏色可以突出焦點區域。不建議大量使用高亮顏色，因為它們會分散用戶注意力，影響用戶的專注力。

顏色表示含義

無障礙

為了適應看不到顏色差異的用戶，您可以使用其他方法來強調數據，例如高對比度著色，形狀或紋理。

將文本標簽應用于數據還有助于說明其含義，同時消除對圖例的需求。

3. 線

圖表中的線可以表示數據的特性，例如層次結構，突出和比較。線條可以有多種不同的樣式，例如點劃線或不同的不透明度。

線可以應用于特定元素，包括：

· 注釋

· 預測元素

· 比較工具

· 可靠區間

· 異常

4. 文字排版

文本可用于不同的圖表元素，包括：

· 圖表標題

· 數據標簽

· 軸標簽

· 圖例

圖表標題通常是具有最高層次結構的文本，軸標簽和圖例具有級別的層次結構。

字重

標題和字重的變化可以表達內容在層次結構中的重要程度。但是應該保持克制，使用有限的字體樣式。

5. 圖標

圖標可以表示圖表中不同類型的數據，并提高圖表的整體可用性。

圖標可用于：

· 分類數據：用于區分組或類別

· UI控件和操作：例如篩選，縮放，保存和下載

· 狀態：例如錯誤，空狀態，完成狀態和危險

在圖表中使用圖標時，建議使用通用可識別符號，尤其是在表示操作或狀態時，例如：保存，下載，完成，錯誤和危險。

6. 坐標軸

一個或多個坐標軸顯示數據的比例和范圍。例如，折線圖沿水平和垂直坐標軸顯示一系列值。

柱狀圖（條形圖）基線

柱狀圖（條形圖）應從為零的基線（y軸上的起始值）開始。從不為零的基線開始可能導致數據被錯誤地理解。

坐標軸標簽

標簽的設計應體現圖表中最重要的數據。應根據需要使用標簽，并在UI中保持一致性。他們的出現不應該妨礙查看圖表。

文字方向

為便于閱讀，文本標簽應水平放置在圖表上。

文字標簽不應該：

· 旋轉

· 垂直堆疊

7. 圖例和注釋

圖例和注釋描述了圖表的信息。注釋應突出顯示數據點，數據異常值和任何值得注意的內容。

1. 注釋

2. 圖例

在PC端，建議在圖表下方放置圖例。在移動端，將圖例放在圖表上方，以便在交互過程中保持可見。

標簽和圖例

在簡單圖表中，可以使用直接標簽。在密集的圖表（或更大的圖表組的一部分）中，可以用圖例。

8. 小顯示屏

可穿戴設備（或其他小屏幕）上顯示的圖表應該是移動端或PC端圖表的簡化版本。

行為

圖表具有交互模式，使用戶可以控制圖表數據。這些模式可以使用戶專注于圖表的特定值或范圍。

以下推薦的交互模式，樣式和效果（如觸覺反饋）可以提高用戶對圖表數據的理解：

漸進式披露

提供了按需求逐步展示詳細信息的明確途徑。

直接操作

允許用戶直接對UI元素進行操作，最大限度地減少屏幕上所需的操作數量，包括：縮放和平移，分頁和數據控件。

改變視角

使一種設計可以適用于不同的用戶和數據類型，例如數據控件和動效。

1. 漸進式披露

使用漸進式披露顯示圖表詳細信息，允許用戶根據需要查看特定數據點。

2. 縮放和平移

縮放和平移是常用的圖表交互，會影響用戶對圖表數據深入的研究和探索。

縮放

縮放改變界面顯示的遠近。設備類型決定了如何執行縮放。

· 在PC端，通過單擊、拖動或滾動進行縮放

· 在移動端，通過捏合進行縮放

當縮放不是主要操作時，可以通過單擊和拖動（在PC端）或雙擊（在移動端）來實現。

平移

平移讓用戶能夠看到屏幕之外的界面。它應該合理的展示數據的價值。例如，如果圖表的一個維度比另一個維度更重要，則平移的方向可以僅限于該維度。

· 平移通常與縮放功能同時使用。

· 在移動端，平移通常通過手勢實現，例如單指滑動。

3. 分頁

在移動端，分頁是一種常見模式，讓用戶通過向右或向左滑動來查看上一個或下一個圖表。

在移動端，用戶可以向右滑動以查看前一天。

4. 數據控制

可以使用切換控件，選項卡和下拉菜單篩選或改變數據。

用戶調節控件時，這些控件還可以顯示指標。

切換控件，選項卡和下拉菜單可以更改或篩選數據。

5. 動效

動效可以強化數據之間的聯系，提升交互體驗。應該有目的地使用運動（不是裝飾性地），表達不同狀態和空間之間的聯系。

運動應該是合理，平穩，反應靈敏，不會妨礙用戶的使用。

在此示例中，圖表數據從按天顯示動態切換到按周顯示。轉換期間不會顯示所選日期范圍之外的數據，從而降低了復雜性。

動畫能夠體現兩個不同圖表的相關性。

6. 空狀態

圖表數據為空的情況下，可以提供相關數據的預期。

在合適的情況下，可以展示角色動畫創造愉悅和鼓勵。

有特色的動畫提升了空狀態的效果。

儀表板

在稱為儀表板的UI界面中，數據可視化通過一系列圖表實現。多個獨立的圖表有時可以比一個復雜的圖表更好地表達故事。

儀表板設計

儀表板的目的應在其布局，樣式和交互模式中體現。無論是用來制作演示文稿還是深入研究數據，它的設計應該適合它的使用方式。

儀表板應該：

· 突出最重要信息（使用布局）

· 根據信息層級確定信息的焦點（使用顏色，位置，大小和視覺權重）

應根據對數據的需求確定信息的優先級并進行安排。在此示例中設計儀表板，考慮了以下用戶問題：

1. 需要注意的問題
2. 發生問題的時間

3.發生問題的位置

4.受問題影響的其他變量

1. 分析類儀表板

分析儀類表板讓用戶能夠研究多組數據并發現趨勢。通常，這些儀表板包含能夠深入洞察數據的復雜圖表。

用例包括：

· 隨時間變化的突出趨勢

· 回答“為什么”和“假設”的問題

· 預測

· 創建有深度的報告

分析類儀表板示例：

· 跟蹤廣告活動的收效

· 跟蹤產品在其整個生命周期中的銷售額和收入

· 隨時間變化的城市人口趨勢

· 跟蹤隨時間變化氣候數據

分析類儀表板顯示氣候數據

2. 操作類儀表板

操作類儀表板旨在回答一組預設的問題。它們通常用于完成與監控相關的任務。

在大多數情況下，這些類型的儀表板具有一系列關于當前信息的簡單圖表。

用例包括：

· 跟蹤目標的當前進度

· 實時跟蹤系統性能

操作類儀表板示例：

· 跟蹤呼叫中心的活動，例如呼叫音量，等待時間，呼叫長度或呼叫類型

· 監控在云端應用程序的運行狀況

· 顯示股市情況

· 監控賽車上的遙測數據

操作類儀表板顯示設備存儲指標

3. 演示類儀表板

演示類儀表板是為感興趣的主題提供的展示視圖。

這些儀表板通常包括一些小圖表或數據卡片，用動態標題描述每個圖表的趨勢和見解。

用例包括：

· 提供關鍵績效指標的總覽

· 創建高級執行情況的概要

演示類儀表板示例：

· 提供投資賬戶績效的總覽

· 提供產品銷售和市場份額數據的概要

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

「元辰」數據概念控制中心，基于真實的使用場景和概念的表現手法，打造的企業及個人后臺數據管理系統。

主要分為首頁概覽、作品編輯、信息收集、數據統計和常規配置等，簡單的動效使操作回饋有了更好的交互體驗，且真實可依。

-

「元辰」注重真實的數據體驗，致力把數據信息通過大屏實時簡潔、有效的傳達給使用者。針對精準用戶“迅速獲取信息、簡化操作流程、減少學習成本”，我們將這些問題作為傳達的核心要素，一直貫穿始終。

-

歡迎溝通探討、合作交流。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

讓設計更有說服力

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

自從上一篇發文得到一些發表方向，以后決定以個人獨特的總結以及符合商業的思維邏輯來寫作設計拆解的相關文章教程，前期我還是按大類去詮釋我的整個想法，看看大家的反饋，如果理解門檻還是有很大障礙，我在后期的文章中會再將文章細化出來。

拆解分類

拆解1、視覺面積的影響

拆解2、明度對比的影響

拆解3、色彩的影響

拆解4、視覺位置的影響

拆解5、豐富層度的影響

拆解6、其他（浮層、常用點、角標、動效）

拆解1、視覺面積的影響

視覺面積越大層級越高，而且與比較層的面積倍數有關，參考層如果為1級，那比較層的等級是由和參考層的倍數有關，大一倍那就為2級，大兩倍那就是3級，依次類推。這是美術基礎中的近遠的關系，越靠近的視覺點越大，越靠遠的視覺點越遠，這樣也很容易知道，越近獲得關注越高，越遠越低。

界面舉例我們告一段落，這里再說一下比較常遇到的文字視覺面積，這塊很容易被忽略，其實文字也是具有視覺面積的，而且有不同的視覺大小。接下來我會將所有可能性都拆解出來。

同字號大小，不同粗細層度的影響/文字的邊寬形成的格式塔大小就是文字面積，但不一樣的是，文字是線性結構，所以他不是實面，而是虛面，所以它相對于實面來說還是低一個等級，再說回到粗細的層級比較，越粗的文字他是越靠近實面的，所以這就能判斷越粗的文字層級越高這個道理。

同粗細，同字號大小，一個是有文字底塊，一個沒有，這樣有文字底塊的視覺層級會比沒有文字底塊的視覺層級要高，因為有底塊相當于為實面，這樣就比沒有文字底塊的層級要高了

同粗細，不同字號大小，這個不難理解，這個不存在實面虛面的概念了，因為都是一樣的粗細，但是這個格式塔大小不一樣，也就是說，格式塔越大的層級越高，字號越大的層級越高。

拆解2、明度對比的影響

明度對比越高的視覺點會比明度對比低的視覺點視覺層級要高，這里其實也是美術基礎中的空間的視覺差，越遠的物體越模糊（對比?。浇奈矬w越清晰（對比大）。所以對比大的層級會比對比小的層級會高。（這里插一句，色相也是有明度的，不同的色相也是有不同明度解析，這個可以運用到電商banner的配色上）

下面來看看文字和背景不同對比度對視覺層級的影響。我們將統一文字大小和粗細，背景為白色。

拆解3、色彩的影響 

有色的視覺點總會比無色的視覺點更吸引人，因為色彩也是美術的一類，給沒有色彩的視覺上色是提升視覺體驗的一步。

文字為例：同等大小同等粗細同等明度的字，有顏色的字體會有更大的關注點。

拆解4、視覺位置的影響

給界面一個橫軸和縱軸，從橫軸的左邊到右邊起視覺層級逐漸減弱，從縱軸的上到下邊視覺層級逐漸減弱。這是因為用戶閱讀習慣的問題，人們習慣從左上方開始往右邊閱讀，然后慢慢的往下讀取信息。

拆解5、豐富層度的影響

豐富層度越高的視覺層級越高，豐富層度越高的點信息量越大，越需要花時間停留。

文字為例：設計過的字體豐富層度會比默認字體高，所以有些需要強調的標題或者banner上的字體都是有精心設計過，為了拉開于界面的層級。

界面為例：界面首頁中的banner是豐富層度最高，其次是金剛區，再是標簽欄。

拆解6、其他

除了上訴的主要層級影響，還有其他一些特殊的影響，我這就說兩三個子吧。一個呢是給模塊直接加投影，硬生生的造成前后層級。還有角標的影響，在干凈的頁面中突然來個提示角標，例如微信有消息時的小角標。還一個就是用戶常用關鍵點，那個視覺層級整個產品中的最高層級，這個需要打破所有規則，這個是由用戶主動選擇的視覺層級點，例如電商軟件的搜索框，不管這個搜索框大小如何，層級怎么低都行，但對于用戶進來，第一個渴望的點就是這里，最后是動效的影響，每個動效就是一個互動，動的東西永遠比靜止的東西有活力更加吸引人。

圖片來源UIGREAT的作者JGM

總結

視覺層級的梳理可以很大幅度的提升視覺規范和用戶體驗，通過視覺層級的分析，可以從不同方面去詮釋復雜的頁面，也可以更好的去處理文本關系。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

虎牙直播是以游戲直播為主的彈幕式互動直播平臺，累計注冊用戶2億，提供熱門游戲直播、電競賽事直播與游戲賽事直播，手游直播等。

最近虎牙在上市一周年之際，發布了全新的公司級LOGO，也就是為虎牙母公司設計的全新企業品牌形象系統。

新logo的造型結合大寫英文字母“H”和小寫英文“hy”，將其演化為平行空間的兩個45度對稱且平行的立面圖像。

文字logo上由“虎牙”和拼音“huya”兩部分組成，中文“虎”字也進行了筆畫的調整，將虎”與“h”筆畫末端進行了切斜收尾的處理，從而來呼應新logo的平行表現形式。

不同形式組合的新logo效果

在新logo的顏色方面，選用了比較青春具有活力，且明亮的“陽光黃”與“星云紫”。

圖形部分的延展也極具靈活性，靈活的視覺變化使品牌更具多樣性，也同時表現虎牙在數字時代的不同場景中，所呈現的多元化和創新。

圖形延展效果

再來看看，虎牙新logo應用在各種衍生產品的效果。

 藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

正確認識卡片式設計，什么是卡片、總結卡片優勢、卡片正確設計知識通過設兩個案例進行講解，卡片在運用時的技法，望能幫助大家。

今天順叔和大家一起聊一聊卡片式設計，無論是WEB還是APP卡片式設計運用的比較多，很多UI設計師比較偏愛這樣的表現，卡片式設計會給人一種視覺上的享受，也能對于界面具有層次感。但往往在卡片設計中有一些技法還是需要了解，不能因為卡片式設計而卡片式設計，要能更好的應用到界面場景中。希望在這次分享中一些知識點能幫助到大家，之后的幾篇系列文章中，順叔會從界面中比較趨勢的設計技法進行分析，希望能幫助到一些設計的小伙伴。

引言

卡片式設計這幾年比較流行，同樣這樣的設計表達也是個趨勢，應用在APP PC界面中至今還流行著，從事UI設計的都會知道卡片式設計，具有把內容整合模塊化，從視覺，個性化體驗上進行呈現，是設計師在設計時常用的一種表現，同樣也具有獨特的創新概念。

在一些項目中，一些客戶會說這個設計的APP界面有點太白，沒有層次感怎么辦，那這時你應該和客戶說在APP設計中運用了現在比較流行的一個表現手法，卡片式設計，可以解決在畫面中有個性化、變化、層次感的設計。那客戶又問什么是卡片式設計呢？

一、什么是卡片

無處不在的卡片設計具有個性的美感和很好的易用性，是以文字標題，小標題，圖形或圖片組成的模塊化，以塊狀形式規整的整合內容，讓內容更規整化，視覺上更個性化，也是操作上快捷的內容信息入口。更直觀的表達內容信息和快捷跳轉操作。成為當今在設計中一個比較流行趨勢，而卡片在設計中也占用一定的優勢，讓整體更加的有層次感，在運用起來也比較方便，從視覺、體驗、交互都具有不錯的優點

設計效果圖展示

二、卡片設計優勢

1.趨勢

無論是大平臺還是小平臺的產品都會運用這樣的卡片式，跟風式設計趨勢，也讓卡片式設計成為了一個現在常用的優勢，不過卡片式設計的確有很好的效果

2. 層次感

具有一定的層次感，能在頁面版式中起到設計上的不同，個性化變化，頁面層次感區分強烈，能更好的體現提煉出內容

3. 規整化

卡片式設計以圖片、圖標 、LOGO、標題、整合到一起以塊狀的形式在界面中展示，更規整的排版呈現。雖然內容多會導致頁面亂，一個模塊包含內容之后就會規整不少，也給頁面設計上帶來了更好的視覺

4. 視覺體驗

卡片式給整個頁面會增加視覺上的體驗，特別那種大圖片卡片式更具有視覺上的沖擊力，背景襯托出前景卡片式設計。同樣對卡片式也感覺到舒適感?？ㄆ皆O計還是需要根據整個布局、產品需求 、功能進行設計。以達到最好的用戶體驗、視覺體驗。

不要為了卡片設計而卡片設計。

5. 易用性

卡片式設計在易用性和靈活性上比較高，在響應式設計中同樣應用的也比較多一些。能更好的有序排列。

6.簡約設計

簡約設計會更顯得品質，不需要過多的進行裝飾，哪怕就是一個白色的色塊，上面點綴有色彩的圖標和標題副標的變化，也會覺得顯得高大上，就算是一個帶有顏色的色塊卡片，也無須過多的設計內容上的標題 、圖標、按鈕就足以支撐起卡片

7. 交互效果

在卡片式的設計中會有一些動效交互，比如整體卡片放大、縮小 、左滑、右滑，可以整模塊化滑動縮放。整體效果增加了不錯的視覺交互體驗。

三、卡片正確設計知識

一般在界面設計中卡片的存在的意義和表現手法都是什么樣的呢，下面為大家舉例了幾種常用的正確的設計表達姿勢。希望小伙伴在設計的同時有所靈感和參考，把一些表現手法加入到自己的設計中，適合才最重要?？ㄆ皆O計還是要根據整個風格和整個布局而進行展示，在做進一步的對比和布局中以最好的效果為最終展示方式，總結分析幾個常見代表例子，如有不全請討論補充，下面就是一些例子

1.卡片式形式一

以色塊為主體并用現在比較流行的漸變色組成，其中四邊為圓角，同樣色塊下邊陰影襯托出主題，這個是在卡片中設計比較常見的運用手法，卡片的長高在設計中也是根據結構，內容功能而進行設定。正方形，長方形都是一個表現得手法，在色塊上面標題文字，圖標，圖形是整個卡片的布局的形式，無非就是左右布局和上下布局

應用場景：卡包、天氣、類別、入口、優惠劵，卡劵

此圖片來自于網絡

2. 卡片式形式二

這種形式共同點都是在頭部C位出現的卡片式設計，其中承載著標題，副標題，以及圖文版式，不難發現，如果圖片有顏色，那么下面是白色底，這樣在白底上面色塊的出現還是比較簡約凸顯卡片，如果背景有顏色，卡片也有顏色那么卡片的凸顯程度就不會那么強，圖二很多在會員卡設計中常用的比較多，也比較簡約，另外兩個共同特點背景有顏色，一般底部背景顏色就是整個界面的主色調，背景有色塊，上面就用白色卡片，卡片上方標題、文字、圖片呈現。只不過排版的方式有所不同而已，在很多APP設計中，這樣的表達也很多，通過主色調可以很融合的把上面的狀態欄，導航欄融為一體視覺上統一性，底部背景顏色延續下來，上面凸顯白色卡片，這樣更具有視覺感和層次感。白色的卡片不需要過多的修飾，更能體現的上面的文字和圖片。

應用場景：會員卡，滑動卡片，圖文標題，入口

此圖片來自于網絡

3. 卡片式形式三

這種形式上圖下文字，或者是上標題，下圖片的形式，這種形式特別在圖片素材的選擇上尤為重要，有視覺效果好的圖片通過剪切，處理，合成，攝影，插畫等等方式，出現的圖片質量上好的話可以帶動整個設計的逼格，通過有效的圖片傳達，文字傳達，讓用戶更清晰的了解。這樣的形似一般在入口或者列表的形式出現的比較多，同樣也能體現出整體化和視覺化

應用場景：滑動卡片，圖文標題，入口，列表

此圖片來自于網絡

4. 卡片式形式四

大圖卡片式，一般以攝影圖片，插畫形式，文字壓與圖片之上，這樣的效果更具有沖擊力，也能顯得出比較潮流。體驗也很不錯，放大視覺，展示內容，圖片相結合，讓瀏覽者更愿意多看一會。表達的圖片與文字內容相符，做到圖文交融的程度。一般這樣對于圖片的選擇上還是比較要求嚴格的。沒有質量的圖效果會降低。

應用場景：列表，說明，入口，天氣

5.卡片式形式五

列表卡片設計，這種形式一般白色的卡片，上面標題，頭像，按鈕，扁平插畫形式體現，更多應用在一級頁面的下方內容，以及二級頁面的列表頁或者集合頁，整體弱化背景以白色為主，給予圓角及陰影承托出層次感同時，體現上面內容部分。每個模塊的單元體具有統一的視覺。

應用場景：列表，集合頁，入口

6. 卡片式形式六

大卡片式設計，表現為一塊特大的卡片式，上面會有標題，按鈕等信息，同樣表現出突出層次感，個性化設計的特質。體現出內容，一般背景有顏色上面卡片為白色，如下面背景為白色，那么卡片的形式也可色塊，在對比上有個反差，才能突出卡片的作用性。

應用場景：提示，說明，優惠劵，劵，入口

以上總結的幾種卡片的形式，在設計中可以根據情況而設計，卡片多樣化，布局多樣化，適合自己產品的才最重要，雖然在界面設計中常用的設計，但不要盲目的為了卡片而卡片套用設計，這樣起不到作用反而效果達不到理想程度。希望幾個卡片形式總結能給大家帶來一些靈感和啟發。

同樣在這些卡片中會有一些基本的共同的特點

共同的特點是

1. 四個角都是圓角

2. 根據潮流漸變色或白卡片

3. 色塊下的陰影，色塊下的陰影更能體現出層次

4. 卡片上面組成部分，標題，副標題，圖形，按鈕，圖片，頭像

5. 字體大小，字體顏色的變化

6. 一般卡片應用在會員，列表，說明，優惠劵，分類，類別，集合頁，歡迎頁等場景常見

三、卡片正確設計知識

為了講解一下，順叔隨便構思一個產品原型，而快速進行了簡單的設計，一個第一版，一個優化版，主要為了講解一下這個卡片設計一些問題，

以下此圖為構思的原型圖

經過分析原型圖之后開始進行設計，首先設計一個版本的，如果這樣卡片布局設計，這樣色彩搭配的情況下，會怎么樣呢，整體設計用了藍紫色為主色調，首先鋪藍紫色的色塊作為背景，然后上面放白色卡片，以至于卡片上詳細的內容，比如數字，圖形能更好的豐富支撐卡片。同樣數據流也是比較重要的C位。也是比較重要的位置。接著根據原型圖下面有兩個卡片，通過扁平化設計，以色塊為主設計一個藍色，一個橙色的卡片，上面并有圖標，頭像，以及標題，兩個顏色的對比，更讓視覺有沖擊力，整體看這個設計并沒有什么，但有個問題在于單個模塊拿出來效果的確都不錯，但組成之后上面的卡片C位讓下面的兩個帶顏色的卡片搶了視覺，當打開這個界面的時候視覺落點在彩色卡片上，那么這個整體設計上就出現了問題，上面的數據，白色卡片其實是比較重要的，而且整個畫面都是卡片毫無設計上的變化，那么只能在這個基礎上在進行優化，其實大家在做設計的同時也這樣，在考慮功能模塊前提下，用戶體驗，也要考慮視覺體驗，那么視覺從哪方面來，色彩、層次、版式等等方面。那么能不能在進行一下優化呢，其實還是有空間在進行優化。（以下圖為第一版）

設計第一版

根據上面的設計在進行優化，同樣保留白色卡片部分元素，在卡片與卡片之間放一些顏色的圖標，這樣更好的給功能上快捷入口，也能給卡片設計增添了變化。使得整個畫面更靈活

雖然白色卡片，但有一些色彩的點綴，也讓白色卡片活躍起來，把顏色的卡片改成白色卡片，從上到下的版式舒服多了，也沒有那么跳。整個風格更簡約，同時功能也更全面。

調整后

從原型圖，在到設計第一版，在到優化調整之后，證明一點，卡片不要因為卡片而套設計，反而會失去效果，考慮功能模塊，用戶體驗，視覺體驗也一定讓整體舒服。一直都說，繪畫中需要有主有次，設計中也一定要有主，有次的進行設計。這樣層級關系才能更清晰。

但這些條件一定是從，體驗、色彩、布局、版式等方面進行對比和研究的。設計不要先著急做設計，前期的進行思考，邏輯清楚了，在進行設計的時候會更加的順暢?？ㄆ皆O計，大家都在應用，希望這個文章能給大家帶來一點點知識點，那就不枉費我在熬夜寫這篇文章。

不為別的，只是一個喜歡分享的肉團子。這篇文章就寫到這里，如果喜歡請給個贊吧。如內容有沒說到的地方，各位可以進行補充，以上兩個圖你稀罕哪個呢？

 藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。