表格是一種數據可視化的一種形式，可以查看和處理大量數據，它主要承載了數據的收集、整理、組織、展示、對比和歸納。

二  表格的設計原則

2.1  易讀性

表格的層級一定要劃分的非常清晰，層級分明。你要讓用戶更關注的是數據本身，而不是花里胡哨的樣式。

2.2  可尋性

列表以易于瀏覽的邏輯排序，提供合適的搜尋組件幫助用戶快速查找信息。

2.3  高效性

表格要用最短的時間告訴用戶想要得到的信息。

2.4  靈活性

可以讓用戶根據自己的習慣及興趣自定義自己的表格展示，比如排序、篩選、調整表頭順序等功能。

三  表格的構成

外部區域：標題、操作區、篩選區；

內部區域：表頭、表體、表尾。

介紹完表格的構成，我們再來把每一個元素拆解出來詳細介紹。

四  表格元素解析

4.1  標題

標題是整個表格內容概述的名稱，此名稱盡量簡潔明了，不要太長，能兩個字寫清楚絕對不用三個字。

如果標題名稱難以理解的話，可以加二級提示，有兩種常用樣式：tooltips（常用）、二級提示語。

標題的位置一般在左上角。

4.2  操作區

對表格內容的增刪改等操作的區域。

使用建議：

4.2.1  有且只有一個主操作

特殊情況下可以沒有主操作，但不能有兩個主操作。

4.2.2  樣式統一

同一個產品中，操作區樣式規范要保持一致。

4.2.3  操作的優先級

根據使用的優先級，把常用的操作放到一級展示，不常用的收到二級展示。

4.2.4  不同操作狀態區分要明確

不是所有的操作都是可以直接用的，比如有的操作在沒有選擇內容的時候是 Disable 狀態，那這時候就要和其他可操作的有明顯的樣式區別，否則容易讓用戶分不清可不可以操作。

4.2.5  刷新按鈕

有很多同學對這個操作是不是有些疑惑？有人覺得瀏覽器都有刷新功能啊，干嘛還要多此一舉再加個刷新。其實這個刷新功能還是很有必要的，這個刷新只針對于列表內的內容。

在有的后臺管理界面中，因為數據量很大，如果每次刷新都用瀏覽器自帶刷新的話，他會重新加載整個頁面的內容，很不好用。很多情況下，用戶只想重新加載一下列表的內容，那這個刷新就很好用啦。

同時刷新后要有即時反饋，告訴用你他點完操作后目前處于哪個階段中。

4.2.6  導出功能

此功能可以把列表內容導出為你想要的格式（一般為 word / pdf）。

數據量較大的列表中，導出功能可以很方便的把自己過濾的內容下載到本地進行其他需求的查看。

導出內容的范圍是哪些一定要事先想好，一般下載內容的范圍以下幾種：

• 當前頁所有列表內容（常用，而且實現難度很低）；
• 經過二次過濾后，導出所有頁上的列表內容；
• 所有頁的列表內容（不常用，而且實現及數據處理難度會非常大，慎重選擇）。

4.2.7  導入功能

既然可以導出，就有導入。導入報表對文檔會有要求，一般都是固定格式的文檔，而且文檔與列表中的字段都可以一一對應上，才可以完美導入。導入功能中 word 和 excel 是最常用的格式。需要注意的是，導入文檔后最好有二次確認提示，告訴用戶上傳了哪些內容，同時該內容是否與現有的列表字段有沖突。

4.2.8  自定義內容

自定義分兩種：

• 可以設置某列內容是否展示（需要注意的是：列內容展示數量可以不設置上限，但必須設置下限）；
• 可以設置每一列內容的左右排序。

如果表格內容比較多的情況下，這兩個功能是很有必要的，如果內容少，則可忽略這兩個功能。

那怎么區分內容的多與少呢？

我的理解：常用分辨率下，一屏可顯示完整內容的話為內容少；反之則內容多。

4.3  Tab（標簽切換）

可以快速切換不同維度下的表格內容。

使用建議：

• 不同狀態區分要明顯；
• Tab 數量不宜過多，如果不可避免的數量過多的話，一般有兩種方案：
  • 最多顯示出 5 個 Tab，超過 5 個 Tab 放在“更多里面”；
  • 交互上支持左右滑動 / 切換 Tab。
• Tab 只放文本，最多可以放個 icon，盡量避免其他干擾信息；
• Tab 信息要精簡。

4.4  篩選區

篩選區是對表格數據的主觀再處理，用戶根據篩選功能可以得到更精準的信息。

4.4.1  搜索功能：

4.4.1.1  模糊搜索 or 精準搜索

搜索首先要確定哪幾個字段可以被搜索到，名稱？編號？等等…

模糊搜索使用的頻率居多，畢竟有時候用戶不一定可以精準的記住想要搜索的準確信息。不過也不是絕對的，兩者皆可選擇，根據產品選擇即可。

4.4.1.2  單字段搜索

輸入單字段進行搜索，比較常用的方式之一。

4.4.1.3  多字段組合搜索

可以輸入多個字段進行組合搜索（取并集），一般交互方式為回車完成書寫。此方式比單字段搜索更加精準，數據量過大的時候優勢就很明顯了。

4.4.1.4  切換類別搜索

可以設置幾個常用的類別來快速切換搜索的維度，方便用戶使用。

4.4.1.5  多類別組合搜索

多類別組合搜索適合更加復雜的列表內容，并且類別名稱會展示出來，可以比較清晰的看到用戶用的哪種類別名進行搜索的。

4.4.2  篩選的樣式

輸入框、下拉選擇、日期選擇器、單選、多選。

4.5  表頭

每一列列表的小標題，是對整列內容的描述。

表頭區域比較常用的幾個功能：排序、過濾、進一步解釋/說明、拖拽排序、拖拽增加 / 縮小列寬。

4.6  表體

表體承載了表格的主要內容，它的內容形式有很多：文本、icon、進度條、標簽等等。表體樣式分為兩種：斑馬線和線條分割。

使用建議：

• 內容決定表格的高度，一般設置 2~3 種行高就可以滿足大部分場景了；
• 把全局唯一且最重要的字段放在第一列，比如：名稱。同時可以把名稱固定在列表左側，就算列表橫向內容過多的時候，也可以第一時間看出區別；
• 要設置最大寬度和最大高度，避免特殊情況下的內容展示；
• 對齊方式：普通文本左對齊，數字類右對齊（記住就行，這是規范）；
• 最多支持二級列表，不可再多；
• 可以把一些常用的操作放出來，放在列表最后一列。

4.7  表尾

表尾主要是展示表格的統計信息、分頁、跳轉頁面等。每頁顯示條數常規情況下默認為 10/頁，最多 200/頁，再多的話加載速度會變慢，影響使用體驗。

五  列表詳情交互展現

5.1  彈窗

• 模態對話框：用戶在當前頁面彈出一個彈窗，除此彈窗內容外不可操作其他區域內容，產品的主觀意識較強。
• 非模態對話框：也是彈出個彈窗，但是與模態對話框不同的是它不打擾其他用戶操作，此彈窗存在的時候，用戶同時也可以操作其他區域，產品的主觀意識較弱。

5.2  抽屜

抽屜現在使用的頻率也是蠻高的，它的好處很明顯：在當前頁面彈出個抽屜，可展示的內容區域比彈窗多了很多，同時如果區域不夠用的話，還可以增加 Tab 來展示更多信息。而且不同資源的抽屜切換也比較方便。

缺點就是：并不能完全讓用戶的聚焦于某個信息的詳情，存在一定程度的信息干擾。

5.3  跳轉頁面

直接跳轉個新頁面作為詳情，好處就是可以展示更多的內容信息以及可以讓用戶更聚焦于當前內容。

缺點就是：新開頁面這種操作本身就比較重，如果在當前頁面可解決的事情，切記不要讓用戶新開頁面。

5.4  嵌套

嵌套就是上面提到的二級列表，它一般用于一級列表的內容補充，并且內容不宜過多。

在最后

在數據可視化中，表格是最常見的一種，它的知識點有很多，本篇文章只是到目前為止我的一些認知，如果有漏掉的知識點歡迎指教，我們都是學生，都要學習。

作者：Luckgg

轉載請注明：學UI網》數據可視化必修課 – 表格篇

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

雖然三維圖形帶來的立體感很強，但用在可視化設計中，很容易出現問題。

一方面，三維圖形具有X、Y和Z坐標，容易造成圖表間的遮擋關系，遮擋會掩蓋一部分的數據，讓精準比較數據信息變得困難。

另外，透視使對象看起來像是位于三維空間中，但在數據可視化中，它會造成錯誤的層次結構：前景圖形看起來很大，背景圖形很小，數據關系被不必要地扭曲。

設計要點：

三維圖形很有吸引力但可能會遮擋重要的數據信息，并扭曲數據間的比例關系；

如果沒有絕對需要盡可能使用二維圖形樣式。

2.數據太多

在設計中，很多人總想在一張圖表中盡可能多地展現內容，把各種數據信息聚合在一起。

這樣的想法本身沒什么錯誤，但重要的前提是要有清晰的認知，明確知道到底要展示哪些數據。

如果可視化中包含太多數據，信息的展現會變得不堪重負甚至難以理解，這樣的話包含的數據再多也沒有任何意義。

設計要點：

避免數據可視化的信息過載，如果一張圖表中包含的信息過多，反而會讓用戶混亂；

3.省略基線

一組數據往往各不相同，數據差值的大小也不確定。為了使可視化效果看著更舒服，有的設計師通過改變坐標軸比例來展示數據關系。

最常見的例子就是讓Y軸代表的數據不是從0開始，借此夸大數據之間的差異，讓數據的變化更加明顯。

設計要點：

圖表的美感再怎么重要，也要服務于精準的數據表現；

4.選擇錯誤的可視化方法

每個數據可視化方法都有自己的特點。例如餅圖適合用來比較一個整體中的不同部分，但不適合用來比較幾組不同的數據。

通過餅圖的比例劃分，雖然可以直觀地顯示三家企業的收益，但使用條形圖會讓這三家企業之間的差異更加明顯。

如果目的是為了顯示一段時間內的收入，那么折線圖會是比條形圖更好的選擇。

設計要點：

5.混淆關聯

數據可視化更高的價值在于探索和發現不同數據間的相關性，通過比較幾組不同的數據關系，找出其中的關聯性，從而得到一個更有根據的驗證結果。

顯示相關性最常用的方法是將幾組不同的數據疊加在同一個圖表上，但當疊加的數據數量過多時，圖表會變得難以識別。

另外一旦強行關聯幾種相似的數據，有可能造成結果的混亂。一個有意思的例子是冰激凌銷量的增加與暴力犯罪的激增有關，因為這兩者都是因為氣候變化造成的結果。

設計要點：

透過數據間的關聯性發現事物本質是有意義的，但要考慮數據間的關聯是否有依據、是否合理；

6.放大有利數據

數據的增長或下降和時間是不可分割的。放大時間范圍是很多公司經營中投機取巧的方法。

比如只在圖表上向用戶展示業績增長的4-6月份(上圖)，這樣看起來公司業績增長幅度特別大，但如果將X軸的時間縮小到一整年(下圖)，才會發現公司真實的經營狀況，4-6月份的業績增長僅僅代表了公司業績持續下跌中的小幅上漲。

設計要點：

避免放大的可視化效果與數據整體不一致；

7.避開常見的視覺聯想

視覺元素影響用戶的心理，圖標、色彩和字體都具有影響觀者感知的作用。

下圖的可視化描述了美國各個地區宗教信徒占所有居民的百分比，但使用的顏色與地圖的設計元素(藍色的水、綠色的植被和棕色的土地)太過相似。

▲ 分析數據可視化很耗費精力。在看到這樣的圖表時，我們第一時間聯想到的應該是國家的地形情況，可能很難在這個熟悉的認知下去重新理解這個圖表代表的其他含義。

設計要點：

8.過分糾結于數據可視化

數據可視化將難以表現的數字關系賦予了易于理解的形式。最理想的方式是可以通過可視化清晰、簡潔地傳達數據關系。

但是并不是所有的數據都需要使用可視化來表現，有時候一個簡單的數據搭配一個流行的顏色就足以說明問題。

設計要點：

數據可視化是一種交流工具。像其他所有工具一樣，有時它是合適的，有時可能另一種工具更適合。

為回饋一直以來關注和支持Clip設計夾的讀者，將免費贈送3本《寫給UI設計師看的數據可視化設計》書籍給大家，幫助大家更好地學習數據可視化設計。

參與方式：詳見原文。

作者：Clippp

轉載請注明：學UI網》數據可視化設計常出現的錯誤，你一定要避免！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

轉載請注明：學UI網》數據之美：地理空間數據可視化II

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

標準圓環圖

圖表中間空心的部分用來展示數據的總數，用圓環的弧長和顏色表示不同數據的占比，圖表旁邊有圖例用來解釋說明。

布爾圓環圖

布爾圓環圖就像是給圓環圖做了布爾運算，只表示正負兩個值。

比如想重點突出完成率，就使用綠色圓環來表示68%的完成率，圓環其他部分為灰色，同理想重點突出反彈率，就使用紅色圓環來表示83%的反彈率，圓環其他部分為灰色。

圓環中心部分用來顯示相關數值的百分比和標簽。此外布爾圓環圖不需要額外添加圖例。

標簽圓環圖

圓環圖交互狀態分析 

懸停狀態

在標準圓環圖中，鼠標懸停在圓環圖上時，跳出分段名稱+百分比+數量值的彈窗。在標簽圓環圖中，懸停的圓環部分突出顯示，其余部分淡出處理。

點選狀態

圖表段可以是交互式的，點擊對應的分段時，右側的圖例也會同步高亮顯示。

焦點狀態

焦點狀態和上面提到的懸停狀態類似，唯一的區別在于，焦點狀態選中分段后有一個放大+描邊的圓環效果，突出展示數據。

空狀態

當沒有可用的數據時，應該在圖表上表明這一點，并給出提示引導用戶去點擊。

錯誤狀態

圓環圖使用指南 

使用分類顏色

保持圓環圖每部分顏色都使用醒目的顏色且具有對比性。在圓環圖中不建議使用同色系顏色來顯示數據，同色系顏色常用在直方圖中。

最多使用五個分段

當圓環圖包含多個數據分段時，圖標會變得難以理解，為保證圖標的清晰，盡可能將分段控制在 2-3 段，不要超過5段。如果數據過多，可以考慮使用柱狀圖、條形圖等其他形式的圖表。

保證數據準確

圓環圖的所有分段加起來的數值應該始終為 100%，沒有有多段數據占比過小，可以一起匯總到“其他”分段中。

按順序排列數據

圓環圖的份分段應從12點位置開始按最大值排序，然后按順時針方向依次按大小排列每個數值。右側的圖例頁應該從上到下保持一致的排序。

不要將時間分段

最后 

以上就是圓環圖的基本介紹，在之后的分享中，會為大家介紹折線圖、面積圖、條形圖、直方圖等一系列數據可視化圖表文章~

如果大家想看更多「數據可視化圖表」系列內容，記得及時關注接下來的文章~

最后給大家分享一份最新的iPhone13樣機模型源文件，有PSD、Figma和Sketch三種格式可以選擇，特別適合用來包裝作品集。

領取方式：關注公眾號，后臺回復【13樣機】獲取源文件

慢慢來比較快，希望對你有幫助！

作者：Clippp

轉載請注明：學UI網》數據可視化圖表設計指南：圓環圖

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

展示二：

展示三：

展示四：

展示五：

業務背景

以我們 CCO 體驗設計團隊為例，主要服務阿里體系的消費者、商家、經濟體等業務領域。隨著業務不斷擴大、用戶角色多、體驗復雜、設計師人力有限、定制化需求不斷增加，設計面臨嚴峻挑戰。

1、業務多：30多個產品應用

2、角色多：覆蓋消費者、客服小二、服務管理、業務運營、中臺管理、客戶  6大類用戶群體。

3、體驗復雜：設計師需兼顧用戶和客戶兩個視角。

從組織上，85% 設計師縱向支撐業務，15% 設計師橫向做標準化，反哺業務設計師。標準化實質解決的問題是保障基礎體驗一致性。

標準化怎么做

核心通過頁面梳理、抽象、分發、衡量，保障基礎體驗一致性。

案例實戰

以數據可視化場景為例，講述如何做標準化。

1、業務現狀

共有11個應用，涉及89個頁面。

2、問題

體驗不一致：各個工作臺頁面架構、組件、樣式野蠻生長，缺少規范導致體驗不統一。

低效：部分場景缺失，組件重復建設，大量定制；溝通協同內耗大，成本高。

3、策略

體驗統一：框架、組件、樣式。

提效：代碼化、工具、交付機制。

4、體驗統一

包括框架、組件、樣式。

框架

(1) 現有頁面收集

(2) 用戶場景分析

(3) 頁面歸類

結合用戶看數內容（例：概覽、分析、詳情）和交互形態（例：平鋪、下鉆），對頁面進行歸類。

(4) 確定典型布局

通過統計高頻復用形態，確定典型布局。

組件

(1) 頁面結構分析

組件的收斂，需要先對頁面分析，確定模塊層內容。例：模塊包含頁頭、篩選、圖表、表格。

(2) 模塊層分類

橫向收集全部業務，將模塊層分類。細分模塊擴展形態，放到對應的簍子里。

(3) 模塊專項治理

接下來，需要對每一個模塊進行專項治理。比如圖表模塊，再拆再抽象成指標、圖表、單選、多選 4類場景。場景里再對主體和變體（也就是擴展形態）分類。

樣式

(1) 確定優化內容

圍繞視覺凌亂，要做的便是完善設計語言。設計師需要結合自身技術底層，補充缺失規范。例如布局、色板、字體、動效。

(2) 確定組件范圍

通過統計高頻復用組件，確定需要梳理的組件范圍。

(3) 布局

圖例位置：線上有9種，通過從業務場景按閱讀順序劃分，最終收斂成2種。

組件高度：真實線上情況，只能看2個指標，高度規范缺失。

需要根據用戶分辨率調研，提煉典型分辨率。比如用戶是win系統，包含菜單欄、任務欄等默認高度，再減去本身頁面頁頭等默認高度，得到 3 檔。確定組件建議默認行高 240px。

軸標簽旋轉角度：現狀有順/逆時針兩種，通過分析標簽類型，結合閱讀順序、軸與標簽親密度，確定默認角度為順時針。

(4) 色板

通過場景梳理，確定不同組件使用的色板類型及缺失色板。

補充語義色板：從業務里抽象2類場景，指標和柱/餅/環場景，定義顏色。例如帶正面語義，用綠色，比如升、已到崗、正常。帶負面語義，用紅色，比如降、曠工、失敗。

(5) 字體

結合自身業務場景問題，從場景、版權、風格、識別、極值共5個維度選擇字體。

舉例場景一，縱向數據場景里，將市面上數據競品用到的字體都橫向鋪開嘗試，做排除法。比如din沒版權，蘋方非等寬字體，普惠102識別性弱。

舉例場景二，在核心數據呈現中，helvetica 品牌風格弱，普惠在1億以上極值過寬。

最終我們根據自身業務場景特征，用普惠和普惠102，運用在對應場景里。并同前端提煉規則。

(6) 動效

首先，需要確定動效價值，明確動效需要解決的問題。這里圍繞舒適度、活力、層級、反饋來講。

通過動效場景鏈路分析，確定優化范圍。

加載動效：圍繞讓用戶認知過程更為自然。通過組件橫向梳理、抽象圖形、組合樣式的思路，輸出方案。比如這里共梳理17種組件類型，抽象成9類，包括點、線、面、餅、環、柱、文本、圖標、詞云，再進行組合產出方案。

出場動效：通過業務分析、提煉場景、優化效果。比如這里共提煉 3類場景，有通用、監控、輿情。圍繞過渡不自然、卡頓、缺少情感化表達來優化效果。

瀏覽動效：通過提煉場景，來強化元素之間的層級與空間關系。比如單個組件、聯動、下鉆場景下，圍繞點擊感知弱、重點不突出、缺少懸停態來優化效果。

沉淀速度參數：將優化動效場景的速度參數，同前端約定規則沉淀組件庫。

5、提效

包含代碼化提效、工具提效、機制提效。

整體思路

從設計組內到技術產研的提效過程。

提效面向用戶依次是：組件設計師、業務設計師、前端、產品。

搭建目前還在進行中，這里主要從交付-工具-代碼化來分析。

交付內容

1、業務設計師：sketch/figma物料 (樣式、組件、區塊、模板、規則 )

2、業務設計師：kitchen工具（樣式、組件、區塊、模板）

3、組件工程師：組件規范/組件官網

交付機制

新需求：通過評估復用性、抽象、內審、沉淀物料。

現有業務：通過頁面梳理歸類、抽象、內審、沉淀物料。

6、衡量

從物理到行為層，包括樣式、組件、框架、組件交互 共4個維度。通過一致性評分衡量標準化覆蓋的好壞。

總結

回歸課程，在B類業務里，服務多個產品、多用戶角色、體驗復雜的場景下，在定制化+標準化團隊陣型里，標準化實質解決的問題是保障60分基礎體驗一致性。

總結：B端體驗標準化包括物料的產出、交付以及衡量標準。

產出：包括框架、組件、樣式的收斂來梳理、抽象頁面。

交付：面向2類用戶群體，業務設計，需交付物料和工具。組件工程師，代碼化需提供組件規范，組件線上化需助力組件官網的建設。

衡量：一致性評分包括樣式、組件、框架及組件交互。

作者：CCO 設計

轉載請注明：學UI網》如何做B端體驗標準化：以數據可視化場景為例

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

對于設計師來說作品是最有效的話語權，不局限于工作項目的輸出才能沉淀更多作品，日常的磨練對于專業提升來說也是至關重要的。從 0-1 去梳理全案設計，是對自己專業基礎進行體檢的有效方式，通過查漏補缺去不斷地完善自己的專業技能。

關于時間戳

時間是最會騙人的，總是無私的贈送給你，不提醒剩余庫存，消磨殆盡之時也不會給個提示。

上學的時候我們希望趕緊放學，進入大學我們希望早點畢業，邁入職場我們希望多幾年工作經驗。一晃十年職場經歷時，又在嘆息時間過得真快，還是剛入行的時候輕松呀！我們總是這么自相矛盾。我們需要的是成長的過程，不是一步到位的終點，沒有過程中的積累和反思，是無法達到專業的頂端的。

時間戳便是以時間為引導線，為大家抓住時間、管理時間和更好地駕馭時間，讓你的時間有跡可循。在這里你可以更好的記錄自己的思考和尋求幫助，也可以管理自己的資源形成時間軌跡，還可以創建私有化的靈感資源庫。只有不負光陰，光陰才不會辜負你我。

以下作品單個界面設計和最終的作品包裝使用軟件 Sketch，作品僅展示了部分功能和業務，不代表全部業務邏輯。

作者：黑馬青年

轉載請注明：學UI網》時間戳 【APP UI/UX 設計總結】

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

據埃森哲2021年中國“獨角獸”研究顯示，45%的獨角獸企業認為海外拓展至關重要，其中82%的企業計劃24個月內進軍海外市場，從游戲、開發者服務和SaaS（軟件即服務），到硬件設備、電商等行業，越來越多的初創企業從萌芽期就瞄準了全球化；網經社電子商務研究中心發布的《2021年度中國跨境電商市場數據報告》指出，2021年全年中國跨境電商市場規模達14.2萬億元，相比2020年增長了13.6%，其中出口占比達77.46%。除此之外，IT桔子《2022年中國資本海外投資并購報告》統計，2021年由中國資本參與的海外投資事件數達454起，創下自2004年以來的新高，而2022年僅前2個月，中國資本對海外已有40多起、約50億元規模的投資。中國貿促會研究院今年3月的報告顯示，中國對外直接投資流量和存量連續四年穩居全球前三，近八成中國企業將維持和擴大對外投資意向，看好對外投資前景。
中國經營報 2022.5

不難看出，即時是在疫情肆虐全球的今天，“出?！比允鞘侵袊髽I發展的重要方向，包括京東在內，越來越多的中國企業開始重視海外市場，在跨境電商、游戲及其他獨立應用開發、投資等方面全面開花，從出海扎營，逐漸成長為全球化企業。

中國出海領先品牌50強

中國企業出海成功與否，離不開一個關鍵點——本土化設計。作為設計師，面對新鮮未知的市場，如何找到適合海外產品的設計方向？ 在服務京東東南亞業務的這幾年中，我們也逐步累積了一些本土化設計的方法，這里就給大家分享幾個小心得。

京東的國際化布局也已歷時多年，2015年開始正式進軍海外電商市場，上線了多個國家館，并同時開始在海外成立獨立站點。2015年底，京東成立了印尼站 JD.ID，后又于2018年成立了泰國站 JD CENTRAL，兩大站點立足東南亞市場，逐步形成了全球化的布局，也繼續擴張到荷蘭等歐美國家。國際化已經成為了京東一個重要的戰場。

當一個產品需要進入一個新的國家市場，在初創和快速發展的時期，作為設計師，首先要對這個國家有一些基本認知和了解。

一千個讀者眼中就會有一千個哈姆雷特，人和人的差異尚且如此，國家之間的差異就更大了。由于文化背景、歷史淵源、自然條件等多方面的影響，來自不同國家的人會對同一個事物產生不同的感受和反應。面對一個陌生的國家，我們需要打破固有印象，拋棄對用戶的先天認知，盡量用客觀的眼光去看待他們。

我們可以通過一些通用性的行研，來認識市場，從而規避風險，并得到體驗設計的大方向。這里可以引用一些經典的分析模型，來協助我們做全方位的行研分析。

PEST是一個非常常用的分析模型，一個行業或者公司能夠發展得如何，靠的不僅僅是自身實力，外部環境也很重要，PEST是一個有效判斷行業或者公司發展前景的方法。我們可以通過搜集公開資料，來明確目標市場的政治、經濟、技術和社會環境。但是這些對設計來說還不夠，另一個模型NESC則在這個基礎上增加了自然環境和人文環境的研究內容，其中包含了對于東南亞國家很重要的宗教習俗等基礎信息。

這兩個模型里其實包含了一個以國家為單位的群體大部分的特征，可以極大限度的勾勒出一個國家的基本情況，通過這兩個維度的分析，我們可以初步推導出一些本土化基本原則。

舉個例子，京東的吉祥物JOY原本是一只小狗，但在伊斯蘭教中不允許狗與人有密切接觸，為了規避宗教習俗的禁忌，所以印尼站使用了小馬的形象作為吉祥物。在很多重視宗教的國家，充分表達對當地文化的尊重，是非常重要的。

這里介紹一個人文研究的理論工具，霍夫斯泰德（Hofstede）文化維度理論，這套理論問世距今已經有40多年歷史了，它把文化特征分為6個維度，在研究跨文化差異時被廣為引用。

荷蘭學者Hofstede（1997）的研究認為，文化對于人就如同計算機程序對于計算機一樣；程序限制了我們的思維方式，我們的感知，我們的行動等等，他試圖利用主要來自跨國公司IBM的數據來建立各種民族文化的特征類型，這些數據來自對50多個國家的10萬人所進行的調查。后續，這套理論被后來者不斷完善改進，并逐漸擴張為在全球各個國家定期做大規模調研和信息收集，匯總成國家維度的數值，為文化分析提供了理論支撐。理論中的六個文化維度如下圖：

有了這些數據，我們可以更直觀的看到各個國家的文化特征和差異點，也可以推導出很多有價值的結論。下圖是中國文化和印尼、泰國文化在各個維度的對比：

關于霍夫斯泰德理論的分析和應用，我的另一篇文章里有更詳細的解析，感興趣的同學可以移步觀看：跨國文化的設計研究方法

第二個部分就是用戶研究。

騰訊有一門經典的課程《像蘑菇一樣思考》，其中描述了一個小故事：

有一個精神病人，他每天什么事都不做，打著一把傘躲在角落里，所有醫生都覺得這個病人沒救了。有一天，一個心理專家站在他的身邊，什么都不說，拿著一把傘跟他一樣蹲在那里。就這樣堅持了一個星期后，他終于向專家身邊湊了湊，說了句：“難道你也是蘑菇？”

這個故事告訴我們，用用戶的方式去思考，才能發現問題的根源所在。需求來源于對用戶的了解——對用戶的了解，需要感同身受，變成用戶，“我，就是用戶”。洞察人性，以己推人，并不是一件容易的事。我們需要了解用戶，了解市場，從而尋找機會點，那就需要和用戶“對話”。

用研是一個很大的課題，去了解用戶，光靠空想是不行的，得真刀真槍的去接近他們，深度訪談、問卷調研、意見反饋、走進場景、觀察用戶行為等。我們和海外用戶的距離很遠，但也要了解用戶的想法，明白他們的關注點、購物傾向、訴求等，當我們需要做一個用戶問卷調研，或者訪談座談會，最佳方案就是和海外的本土團隊協作來完成。

印尼用戶問卷調研題干 初稿

上圖是我們在做印尼站的用戶調研時，和印尼本土的CX團隊共同合作完成的一個調研題干。我們把對用戶的疑問和好奇，落實在問卷中，通過cx團隊的發放、收集和分析，反饋回來，從而獲得用戶的真實想法。

除了定向調研，周期性的用戶反饋跟蹤也很重要。

常用的兩個指標就是客戶滿意度和凈推薦值，客戶滿意度更重視用戶的主管感受和態度，凈推薦值則傾向于忠誠度和推薦意愿，兩個指標通常會用在不同的場景中，我們定期追蹤的指標是以NPS為主，隨時跟蹤用戶的反饋和數據變化，并定期匯總落實在優化中。

此外，調研一定是顆粒度可細化的，當我們對于一些關鍵流程節點，已經有了非常明確的調研目的，可以在系統流程中設定一些觸發條件，去觸發用戶對當前操作的反饋，真實的環境場景可以幫助調研者更貼近用戶，理解各種用戶群的使用場景和需求。

比如搜索列表也的點擊低于預期，較多用戶長時間瀏覽搜索列表，翻了幾屏的商品，卻遲遲沒有進入商詳頁，這是就可以觸發對應的問卷提示，詢問客戶，是否遇到了問題，從而去更精準的找到用戶痛點。

搜索列表頁瀏覽到一定深度時，觸發的反饋問卷

新業務、新產品的開拓，離不開宏觀層面的競品分析，簡單來說就是：知己知彼，百戰不殆。

當我們進入一個海外市場的時候，當地往往已經有了一些成熟的本土同行業產品，或其他國際化公司的本土產品，它們很可能已經給本土用戶培養了一定的認知基礎和使用習慣。我們對當地市場的理解或許還不那么深入，這時我們如果借助類似的競品，通過橫向對比這些競品以及它們的上下游，可以觸類旁通，可以從更宏觀的層面來理解這個市場。通過競品分析，我們可以更好的了解市場和用戶，明確我們與競品的差異點、優劣勢，從而達到知己知彼，并可以進一步尋找創新機會。

舉個例子，我們在做泰國站的O2O項目時，通過對直接和間接競品的比較分析，可以明確我們自身產品的能力優勢和市場定位。也了解了用戶對于這種商業模式的基礎認知。

我們提取用戶已經形成良性認知的元素和色彩，適度與競品做差異化，進一步推導得出了instant joy的品牌logo、品牌色和吉祥物。

雖然我們的O2O業務在泰國市場還是一個新模式，但是對打車、便利店、外賣等間接競品的分析，我們還是可以獲得很多有價值的信息，也可以勾勒出用戶對于不同業務模式、設計風格、元素的接受程度。

所以，做分析不要拘泥于本行業的直接競品，從其他行業中選擇和我們的產品有類似、相通點的產品，更能帶來突破性的啟發。我們或許都曾遇到過這樣的困境，我們在思考一個新業務如何去突破，或者思考某一個功能如何設計的時候，想遍了各種思路、翻遍了已知的競品，卻仍然想不到突破的方式，也就是遇到了瓶頸。這時候就應該去看一些不同行業的競品，獲取更多的思路。

在做產品的過程中，當我們有明確的目標時，比如需要對一個關鍵模塊做分析推導，就可以通過數據分析去推導策略。

成熟的設計師往往會把自己的設計經驗逐漸內化為一種設計直覺，用直覺去做設計，有利有弊，這里不多評判，但是對于一個未知的海外市場來說，直覺就不一定可靠了。

我們來看一組數

這是泰國站單日UV的來源占比，其實和我們直覺的認知是很不一樣的，國內的APP流量是絕對王者，PC和M端可能非常少，但在泰國，M端的流量是最高的。很多人會疑惑，為什么？我們接著看數據：

進一步提取各端的數據來源，可以看到APP端的UV來源最多的是高清屏手機，也就是蘋果的PLUS和安卓的1080屏幕（進一步看數據就會發現，大部分是安卓手機）。

為什么小屏手機占比這么少？看一下M端流量占比，我們的疑惑就解開了。訪問M端的流量占比最高的是小屏和超小屏手機，這部分手機，可能是比較老的機型，或者中國已經淘汰的型號，他們的系統可能不支持安裝APP，所以只能訪問M端頁面。

我們再進一步看PC端，很意外的是，小型平板和超小屏設備占比達到了35%。我們把pc和M做一個縱向對比，可以看到，有一部分小屏設備的分辨率是重合的，其實很多山寨平板電腦，因為設備識別的問題，只能瀏覽PC版頁面，體驗是很差的。

不同分析方法是有相互呼應的，我們再去看之前行研的分析就會更有體會。泰國用戶的手機占有率極高，移動互聯網接受率很強，但他們平均收入并不高，很多人使用的就是小牌低價手機，甚至中國出口的二手手機。

這部分占比極高的用戶，他們使用互聯網的訴求很強烈，但礙于設備的限制，只能享受縮水版、閹割版的產品。了解了這一客觀情況，產品和設計的迭代策略也需要做相應的調整，比如說對于泰國站，我們需要進一步優化小屏的體驗，推進響應式頁面的落地，以及優化技術層面對端的識別等。

數據從用戶中來，通過一系列的數據沉淀、處理和分析找出機會點做決策再回到用戶中去，提升用戶體驗，帶動業務增長，驅動業務。

這里分享幾個數據分析的常用概念和方法：

這五個概念，串聯起了一個數據分析思維的基礎框架，也為業務和產品搭建了一個全面的分析體系。

數據分析能力的核心不在方法理論和工具模型，更多的是建立一種數據意識，要能夠敏銳的發現應該去關注的數據、并且能夠從這些數據中找出潛在的規律，推理出數據背后的導致原因。

最后一部分更偏向于表現層的沉淀，通過設計資產和經驗的積累和匯總，優化統一產品前臺的設計表現。

設計原則就像英語中的語法，只要遵循語法的框架，隨意的搭配都可以組成準確的語言。統一的設計語言能夠保證平臺的一致性，減少溝通的成本，效率也會得到提升，能夠使設計師將更多的時間專注于項目上。

京東的東南亞站點從2015年開始布局，目前有印尼和泰國兩個站點，接下來可能還會拓展更多國家，國家之間的差異也會越來越復雜。舉個例子，不同國家的文字文本長度差異是很大的，中文排版中比較容易的左右對齊，對于西文就不太適合，所以西文排版更適合上下排列，需要更靈活，并且預留更多的文本空間。

文字本身的結構，也會導致行高的差異，也會一定程度影響排版。

對于圖標的設計，國內產品（例如京東主站）使用的圖標，相對比較精簡，對于國內用戶來說可以理解，但對于海外用戶，這種設計語義是不夠明確的，考慮到多國家理解的通用性，我們還是需要采用更明確語義的設計。

結合各國設計的差異性和統一性，求同存異，我們也在逐步沉淀東南亞站的設計資產庫，幫助視覺設計師建立清晰的設計理念認知，在整體的產品設計風格上保持產品線的一致性。資產庫不僅用于優化現有站點的體驗，也可以助力未來的新站點快速搭建。

因為篇幅的關系，本文重點介紹了本土化設計的五個方向，其實每個方向每個章節都是可以進一步去研究和分析的。

本文中的工具和方法不單適用于海外市場的本土化設計，對于其他業務模式也是很有價值的。很多內容都來自日常的工作總結，也許會有謬誤，歡迎大家指正和補充，希望后續繼續和大家一起交流學習。謝謝大家～

轉載請注明：學UI網》乘風出?！虻刂埔说脑O計心得

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

在互聯網產品設計中，標簽雖然不是很起眼，但是絕對不能忽視它，只要使用得當，尤其是在電商類產品中堪稱神助攻的存在，其功能的強大不是筆者幾段文字能介紹清楚的，了解過產品運營、用戶行為及心理學的設計師就知道為什么會“愛”上標簽了。很多時候，看似簡單的組件/元素，背后都蘊藏著不簡單的運作方式，其方式的不同，給產品帶來的結果也截然不同。

UI設計中的標簽可用于傳達信息、建立可預知操作等，能幫助或促進用戶更快速完成任務、協助產品達成業務目標，深受產品經理、運營者的喜愛，但作為設計師的我們真的能聽之任之嗎？標簽該不該用、怎么用、如何更好的使用都有一定的原則，即便同一個產品，被不同的設計師設計出來也可能是千變萬化。本文筆者將根據標簽的定義、屬性特征及使用場景作出一些思考和探索，幫助大家對標簽有一個更清晰的認識。

分享目錄

一、標簽基本介紹

二、標簽在設計中的作用

三、不同場景下的使用方式

四、標簽的設計（主產品列表）

五、結語

一、標簽基本介紹

1、什么是標簽

標簽是結合產品內容及屬性特征經提煉后產出的關鍵詞，是信息的一種集合方式，便于用戶查找、定位以及系統識別。好的標簽設計會根據業務需求場景、服務理念形成獨特的視覺標記，依托產品、用戶目標需求，引導或促進用戶進入下一步操作，用以提高商品、信息的轉化。

2、標簽色彩

標簽主要幫助用戶快速識別信息、提升信息轉化效率，色彩是一個很重要的因素，好的配色能高效、精準的傳達信息。在標簽的配色中，主要針對以下兩種場景：

一種是白色背景，這種沒有任何沖突的背景給標簽配色創造了極佳的條件，主體色、輔助色、點綴色均可使用，在面對同一組信息多標簽的情況下，還能多種色彩混合，以便對標簽更好的分類；另一種是圖片背景，更多用在封面、頭圖、商品詳情等位置，相比白色背景會受到很多局限，一般使用白色/黑色+不透明度、或者主體色作為標簽容器，文字使用黑色或反白處理。

3、標簽形狀

形狀是標簽信息傳遞中的視覺輪廓表現，它是用于承載信息的容器，對文字元素的包容性極強，能使標簽信息更加聚焦，讓用戶在獲取內容、信息歸類時更加專注。常用的標簽形狀有圓形、矩形（半圓角、全圓角）、三角形（角標）、氣泡或異形，真實情況還得受界面使用場景、品牌調性以及設計規范等因素的控制。

二、標簽在設計中的作用

為了對信息進行歸類，標簽可能出現在任何一個頁面，通過精、簡的表達方式，希望能引起用戶的關注以及激發用戶想要進一步了解的欲望。例如雙11快到了，手機里的各大應用圖標都貼上了雙11標簽，預示優惠活動已經啟動，以激發用戶點擊的欲望；打開外賣應用，看到琳瑯滿目的滿減、特色標簽，也能讓我們快速的擇優處理?？傊谑裁磿r間、需要使用什么樣的標簽，主要看產品想達到一個什么樣的目的。

1、突出產品特色（營銷）

標簽的首要任務就是為滿足用戶的隱性需求而傳達特色信息，通過讓用戶對產品產生聯想并增加需求欲望，促進用戶完成下一步操作。對于產品而言，標簽能傳遞出折扣、優惠、賣點、特色等與用戶利益相關的各種信息，而對于用戶來說又能讓其快速獲取關鍵信息，降低內容的理解難度等。

例如：美團、餓了么店鋪的優惠，如滿x減x、免費配送、店鋪紅包、首次優惠…等標簽讓用戶潛意識的認為能降低經濟成本，即便事實并非如此；通過產品特色信息，如品牌、服務、復購率、售出累計、排名…等標簽體現出專業、高質量以及熱情的服務態度，無時不刻都在擊潰用戶最后的心理防線，以提高產品的轉化率。

2.建立用戶操作預知

通過建立用戶操作預知，讓其在操作之前就能清楚點擊后會發生什么。例如：登錄騰訊動漫時，會用小標簽提示上次的的登錄方式，降低多賬號的記憶成本；騰訊視頻的封面會有VIP（需開通會員）、付費（需額外付費）、等標簽，讓用戶在操作之前就能根據當前賬號情況來判斷操作之后可能會發生的事情，提前有一定的心理預期。

3、個性化內容推薦

用戶在接觸一個新產品或新功能時，一開始總會有些不知所措，這時系統會提供一些用戶可能感興趣的、產品希望用戶選擇的標簽，并引導用戶操作來獲取想要的內容，以滿足用戶的潛在需求。

4.操作前/后的內容引流

標簽既能突出產品特色信息、又不會占用太多空間，所以通過對用戶建立好感、吸引其注意力進行引流也是一個很不錯的方式。

常見的有兩種引流方式，一種是在用戶操作之前沒有目標，系統通過標簽對用戶進行方向性的指引，例如淘寶搜索中的歷史、熱搜、興趣推薦等。另一種則是用戶在完成某個任務之后，產品通過相似或相關聯的標簽吸引用戶繼續瀏覽其他相關內容的潛在需求，以增加用戶在應用中的停留時長，例如小紅書文章詳情頁的結尾，會提供與當前內容相關的標簽，點擊之后可快速查看其他相似的內容。

5、信息分類

通過標簽建立有效的信息分類，能幫助用戶快速篩選出自己想要的內容，避免用戶因浪費大量時間瀏覽了非需求內的信息而失去耐心。例如淘票票電影評論區，用戶可選擇自己感興趣的標簽去查找自己想要的信息，提高瀏覽效率，節約時間成本。

6、從眾心理推動轉化

當用戶對某個商品猶豫不決、無法快速做出決定時，正處在轉化的邊緣，這時只需要一個“催化劑”，可利用從眾心理推動用戶轉化。例如商品的銷售量、收藏量、有多少用戶正在下單…等，都會對當前用戶的心理產生極大影響，很多時候，用戶的想法和行為受到周圍人的影響程度，往往超過理性的認知。

三、不同場景下的使用方式

在用戶層面，標簽提供的是內容的核心或特色關鍵詞，能提升用戶瀏覽效率，幫助其快速做出決策。站在設計角度，標簽不僅能多樣化的展示各種關鍵信息、提高視覺表現力，最主要的是能通過設計手段為業務賦能，促進產品、信息的轉化。

直白一點，產品經理說“需要重點突出功能的特色、賣點”、運營說“目前我們在做活動，要特別突出折扣優惠”、業務說“有很多用戶不知道xxx，需要設計的最明顯”……最后一致決定都很重要。相信絕大多數設計師都遇到過這種問題，怎么辦？是直接拒絕還是等著各部門撕逼后給出一個確定的結果？

其實面對上述情況，設計師的角色不要只停留在畫界面上，應該站在用戶的角度去分析，提這些需求的人到底想表達什么（表面上用視覺突出），能給用戶帶來什么，需要經過討論，深度分析產品的真實需求、用戶的痛點及訴求，從中找到一個最佳的平衡點，然后通過結論來確定設計的可行性、易用性以及視覺表現方式，不要忘了，設計的本質就是解決問題。

最后你會發現，如有必要，將眾多信息同時展示出來、而且還不可以影響其他信息的傳達并非不可能，使用標簽就是一個很不錯的解決方式，下面讓我們來一起來看看，不同類型的類產品標簽在不同的場景下都有什么關聯以及不同的使用特點。

1、超鏈接標簽

這種類型的標簽以#+文字形式的超鏈接為主，大多出現在文字內容較多的列表頁面、詳情頁的開頭或結尾，也可以理解大家常說的話題，它能讓用戶通過標簽就能了解到這些內容的主題及核心，幫用戶快速鏈接到與該內容相關聯的信息。

相信有一些設計師應該經歷過這種情況，看新聞越看越感興趣、刷抖音刷到停不下來、看旅游攻略根本不想睡覺…等，這都是源于系統背后的算法與自動推薦機制，產品的背后總有一雙無形的大手在幫我們自動匹配。而＃+文字標簽的出現只不過是將關聯、或想推薦給我們的內容擺在的明面上（系統、用戶推薦均可），把選擇權交給了用戶，即便用戶沒有點擊標簽，劃走后或許還是逃不脫系統的算法推薦，可用戶一旦主動點擊，產品內容會更加匹配，用戶的滿意度就會更高。這樣通過明（用戶主動點擊標簽）、暗（系統算法推薦機制）的雙刃劍，不僅能滿足用戶想瀏覽其他內容的潛在需求，也達到了產品相關聯屬性內容的引流。

例如抖音將標簽放在了標題后面，用戶隨時能知曉當前短視頻的類型、屬性等信息；小紅書的文章詳情頁結尾也會有相關聯的標簽，用戶可通過該標簽快速跳到其他相似的內容列表，以便獲取更多對自己有價值的信息。

2、圖片封面標簽

常用在帶有封面圖片的內容列表中，例如視頻、音樂、電商類型的應用，在產品封面配上圖標或文字小標簽后，不僅讓用戶對信息有更快速的理解，還能豐富圖片內容、讓視覺表現更加生動。需要說明的是，因圖片本身的色彩比較復雜，一定要注意標簽的配色，標簽既然作為輔助說明來傳遞信息，就需要有一定程度的突出，不然，一旦與圖片該區域的色彩融合或嚴重沖突，就會給整個界面的美觀度帶來負面效果。這種類型的標簽大多數只用于信息傳遞，并無對應的交互操作，分為動態和靜態兩種類型。

騰訊視頻列表封面的標簽屬于動態，也就是通過后臺管理系統隨時對內容進行調整，可能今天是A標簽、明天就變成了B標簽、或者什么都沒有，標簽的類型數量及樣式會有一定的控制，針對分類、功能、權限類的標記非常實用。

京東的商品封面則是靜態標簽，為了體現出其質量、折扣、品牌等信息，在處理圖片之初就將標簽融合，讓其成為圖片本身的一部分，不過會增加相應的制作成本。相比前者，靜態標簽的使用方式非常靈活且不受系統的控制，對用戶的吸引力更強，對產品促銷、提高轉化率能起到很大的作用。

3、商品列表標簽（多元化）

電商應用的產品列表主要為突出特色、賣點來進行促銷，類型及樣式比較多元化，且單個產品可能多達4~5個標簽，以此來吸引用戶購買。

以下圖淘寶、美團外賣列表為例，使用了線框、淺色底、深色底容器標簽以及銷量、費用類型的純文字標簽，樣式可單用、可混搭，形形色色的展示出了商品的各標簽信息層級，無時不刻都在吸引著用戶的注意力。

四、標簽的設計（主產品列表）

1、精煉

標簽作為輔助補充信息的存在，不宜展示大段的內容，所以大家看到過的標簽基本都很短。簡短的標簽是在信息表達清晰、用戶能足夠理解的前提下提煉出來的，我們這里所說的精煉并非一味的求短，雖然“短”是標簽必備的因素，但有時候，過于簡短的標簽根本沒辦法給用戶傳達足夠的信息，甚至會導致用戶更加疑惑，這也失去了添加標簽的初衷。

例如美團外賣列表，標簽都很簡短，但在用一句話形容、或用戶高質量的評價來表達店鋪特色時，這個標簽占了整整一行的位置，并沒有進行特別的簡化。

下面是某購票平臺，標簽也很簡短，大部分能一看就懂，但有幾個就不一定了，“兌”是什么意思？可兌換火車票、還是購票后可以兌換其他禮品呢；“靜”又是代表什么呢？乘車環境安靜、人員相對安靜還是需要乘客制造安靜？雖然我們花點時間也能猜出個七七八八，但這無疑增加了用戶的理解難度和時間成本。

2、視覺突出

因為標簽本身比較小的原因，一般我們會通過配色來吸引用戶的注意，但面對不同的產品屬性，其色彩的表現形式也有很大的區別。

在騰訊視頻中，采用的固定底色的容器標簽，旨在強調產品的特權屬性，視覺非常突出；而酷狗音樂采用的是黑色帶透明底、文字反白的標簽，僅僅作為輔助提示，對封面的干擾比較小、但依然能保持信息的有效傳遞。

3、一致性

同類型、同視覺權重的標簽應盡量保持一致，即便應對多元化，盡量只在色彩上作出調整，其容器的外觀形狀、字體字號仍需保持相同的屬性特征，要讓用戶一看就知道這幾個標簽屬于同一種類別。

4、差異性

上面說到了一致性，現在又說差異性，乍一看似乎是有沖突，其實不然。這里的差異性是針對不同類型、不同視覺權重的標簽，需要通過不同的視覺樣式及色彩體現出信息的層級關系。

例如：用戶在購買這個商品之前最想知道、且對用戶最有吸引力的標簽一定是最突出的，用戶掃一眼就能看到，根據視覺權重依次類推，最后是對用戶來說不是很重要、甚至沒有看到也不會有什么影響的這類標簽弱化顯示。

結語

文中主要總結了標簽的作用、不同場景下的使用方式以及設計中的注意事項，不難看出，UI設計中的標簽跟我們日常生活中的標簽很相似，它不僅能對產品作分類、特色標記，還能在用戶猶豫不決的時候起到一定的推動作用，是平臺內部信息導流和滿足用戶潛在需求過程中至關重要的一環。

標簽設計不應該是簡單的色塊+文字的堆疊，它應該與產品之間存在著某種潛在的關聯，需要針對不同的使用場景為產品量身定做，形成一套具備專業化的標簽體系。好的標簽不僅能滿足上述提到的基本需求，還能在無形之中給予用戶經驗的感覺，一度超出用戶的預期，最終滿足產品的商業價值。

作者：大漠飛鷹CYSJ

轉載請注明：學UI網》標簽篇 | 打造獨特視覺標記、精準傳達信息

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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