圖表是數據可視化的常用表現形式，是對數據的二次加工，可以幫助我們理解數據、洞悉數據背后的真相，讓我們更好地適應這個數據驅動的世界。無論在工作匯報、產品設計、后臺設計以及數據大屏中都能看到它的身影。然而，在實際工作中我發現很多初入行的設計師對于圖表設計并不是很了解，同時市面上對于這方面的資料相對零散，不成體系。所以我結合了平時工作中的理解，梳理了這篇文章，希望能幫助到大家。
當我們把圖表的結構進行拆解后，就會發現一個圖表是由很多個細小構件組成的，這些構件有自己的名字和用途，分別是標題、軸、圖形、圖例、標簽、提示信息。在平常使用的過程中，會根據場景去修飾刪減一些構件元素，以此來減少冗余信息，用最適量的數據墨水比（Data-ink Ratio），幫助用戶快速達成目標，在最少的時間內獲取更多的信息。
標題 - 描述圖表的主題（包含主標題和副標題）
標簽 - 對當前這一組數據進行的內容標注
軸 - 用來定義坐標系中數據在方向和值的映射關系
圖例 - 對圖形本身的概括
提示信息 - 當tap或者hover的時候，以交互提示信息的形式展示該點的數據詳情
圖形 - 統計圖表的視覺通道在形狀上映射的視覺展現
接下來，我會一點一點地為大家講解它們，方便大家合理的使用它們。但在此之前，我們先來了解一個知識點 - 數據墨水比，以便更好的理解接下來的內容。
數據墨水比——"data-ink ratio"，是1983年視覺大師愛德華·塔夫特（Edward Tufte）在《The Visual Display of Quantitative Information》中提出的一個概念：一幅圖表的絕大部分筆墨應該用于展示數據信息，數據變化則筆墨也變化。他將數據油墨比定義為圖表中用于數據的墨水量除以總油墨量。其中數據墨水指的是圖表中不可刪除的核心內容。比如，我可以刪除圖例、刪除坐標軸、刪除網格線，這可能不會影響你從圖表中讀取相關的信息。但如果我刪除柱形圖、餅圖這些圖表的主體元素，那么圖表就失去所要表達的內容了。
我個人更喜歡用“信噪比”= 信號/(信號+噪音) 這個概念去理解，因為通過可視化傳達的信息不僅僅是數據，還有業務洞察，像觀點、結論性的信息往往需要用文字來呈現的也是至關重要。不過無論使用哪個詞，最終的目的都是突出傳達“信息”部分，去除那些干擾的“噪音”。
因此，圖表中的數據墨水占比越多，那么該圖表的冗余信息就越少，信息傳遞效果就越好。所以，在創建圖表和圖形時，我們的目標應該是在合理范圍內最大化數據墨水比。
一個明確、相符的標題可以迅速讓讀者理解圖表要表達的內容。通常圖表的標題是根據圖表所需要表達的內容決定的，大多數小伙伴可能認為命名沒有太多問題。但當這個圖表的結論是單一且唯一的時候，建議在概括圖表內容的標題中加入結論性的信息點。這樣能減少讀者誤解你的意圖的可能，而且能夠確保他們將注意力集中于你想著重強調的數據上 。
軸是能夠使每個數組在維度空間內找到映射關系的定位系統，更偏向數學/物理概念。換句話說，軸的功能像是把可視化對象置于共同的基準上，再以標尺進行數值量測。在數據可視化中，一般存在于笛卡爾坐標系（直角坐標系）和極坐標系中。對軸進行「原子」要素的拆分，我們可以得到以下幾種元素，分別為：軸線、軸刻度線、軸標簽、軸標題（單位）以及網格線。
根據對應變量是連續數據還是離散數據，軸可以分為：分類軸，時間軸，連續軸。
軸線一般只考慮是否顯示，結合上面所講的數據墨水比，在有網格線的情況下，柱狀圖/折線圖會隱藏 y 軸線，條形圖則是隱藏 x 軸線，以達到信息降噪，突出視覺重點的目的。
軸刻度線是軸線上的小線段， 可以提供數值標簽在坐標軸上的明確位置。軸刻度線有3種類型，分別為：置內、置中（即交叉方式）、置外。但刻度應置于數值坐標軸外側， 不建議刻度采用置中或置內方式顯示。
軸刻度線的使用就是加強映射關系，快速的對應到數據點。分類軸較多出現在柱狀、條形中，對于映射有天然的對應關系，故在分類軸中習慣隱藏軸上的刻度線。
網格線是用來輔助圖表優化映射關系的。使用網格線可以增加數據的可閱讀性，網格線提供了兩種功能：一是延伸數值刻度至可視化對象中，以便觀察數據值之大小；二是增加可視化對象之間的比較基礎 ，利于比較。
網格線一般跟隨值域軸的位置單向顯示，柱狀圖采用水平網格，條形圖采用垂直網格。在使用網格線時，應該注意遵從主次原則，以軸線為主，網格線為輔，樣式上可采用實線或者虛線。避免顏色過重，不要使用純黑或者純白，在視覺層級上不能搶了圖表中的信息。
軸標題（單位）主要用于說明定義域軸、值域軸的數據含義。當可視化圖表的其他部分內容（標題、圖例、軸標簽等）已經能充分表達數據含義，根據奧卡姆剃刀定律，可以略去軸標題，近一步增大數據油墨比，精簡畫面元素。
軸標簽的設計較為復雜，涉及到的細節點比較多。這里將圍繞直角坐標系的X軸和Y軸這兩個方向進行討論。
x 軸標簽的設計重點在顯示規則上，在可視化圖表設計中，我們常常會碰到軸標簽內容過長的情況，當空間有限時，軸標簽會重疊在一起。如何處理此類問題，這里根據軸的不同類型給了對應的解決方案 。
在連續軸和時間軸中，我們可以利用抽樣顯示的手段來優化軸標簽重疊的問題。這里不推薦使用旋轉來縮減寬度。一方面從美觀度上，旋轉可能會破壞界面整體協調。另一方面，連續/時間軸并不需要顯示所有的軸標簽，參考格式塔中的[連續性原理]，盡管軸標簽未能完全展示，但用戶會在腦海中把缺失的部分補齊，軸標簽仍然會像連續著的一樣。
在分類軸中，由于標簽與標簽之間并沒有緊密的邏輯關聯關系。若采用抽樣規則，隱藏了一些標簽，則加大了用戶對圖表信息的提取難度，這是我們不想看到的。對于分類軸，這里建議通過標簽旋轉或轉換成其他圖表（條形圖）來縮減寬度。
y 軸標簽的設計重點在標簽數量、取值范圍和數據格式上。標簽顯示區域一般根據最長標簽寬度自適應縮放。如果數組是固定的，就寫成固定寬度，節省圖表計算量，提高渲染速度。
軸標簽的數量不建議過多，太多的標簽必定導致橫向網格線變多，造成元素冗余，干擾圖形信息表達。根據 7±2 法則，Y軸標簽數量應盡量控制在這個范圍內。
一般來說，y 軸標簽的取值應從 0 基線開始，以恰當反映數值。展示被截斷的數據可能會誤導用戶做出錯誤的判斷。比如數據本身沒有那么起伏變化，處理上下限的顆粒度，把刻度拉長，一樣能顯得“長勢喜人”。
從上面就能明白，在看圖表的時候千萬不要被表面給欺騙，僅僅觀看柱狀圖的高低趨勢往往不能得出正確結論，需要注意坐標軸起始位置有沒有被人做過虛假處理。
但存在是有根源的，對于此類的取值方式不做過多評價。這里主要想講一下我常用的取值方式：對于Y軸的上限即最大值根據實際數據進行動態計算。比如一排數字中最大的為1190，那么軸標簽最高位為1200；一排數字中最大的是1210，那么軸標簽最高位為1400。其中的1400和2100是根據軸上的分段數決定的。
但有些人對Y軸標簽的取值給出了如下建議：在折線圖中，取值一般保證圖形約占繪圖區域的2/3，或者將柱狀的高度控制在圖表高度的85%左右。
但我認為這種方式太刻意了，并且規則定制的比較細。但是得承認這樣子確認會顯的好看，做案例可以，做真實數據不行。因為考慮到實際數據有的時候會出現極限情況，比如有些特別大有些特別小，為了保證用戶能從圖表中準確地獲取信息，不應該為了美感而破壞了它的真實性。因此并不推薦用這種方式來取值。
關于Y軸標簽的數據格式，這里重點講一些比較容易忽視的設計細節。第一，標簽保留的小數位數保持統一，不要因為某些軸標簽是整數值，就略去小數點。
第二，正負向的 y 軸標簽，由于負值帶“-”符號，整個 y 軸看起來會有視覺偏差，特別是雙軸圖的右 y 軸更明顯。這里建議正負向 y 軸給正值標簽帶上“+”，以達到視覺平衡的效果。
圖例是對圖形本身的概括，在圖表元素中屬于輔助內容。它提供讀者以對照的方式來理解可視化對象的項目歸類。由映射圖形形狀和文本組成。
根據數據類型不同，分為連續型圖例和分類型圖例；根據狀態不同，圖例可以被設置為靜態或可交互態。
正如，倫斯勒理工學院的行為經濟學家高拉夫杰恩(Gaurav Jain)所說：“數字有一種語言的力量，能給予人一種特殊的感覺。當我們使用具體的整數數字時，人的衡量會減少。這種行為沒有明顯的原因。”
當人們的大腦在處理不以零結尾的不規則數字時，需要更多的腦力來處理，加大了獲取信息的難度。因此在使用數字時，應該考慮這種偏好，傾向于一些取整的數字。同樣的，這不僅僅適用于圖例中的數字，同樣適用于坐標軸上下限的數字。
帶有連續性的傾向于使用水平圖例，因為更符合人們的閱讀習慣；帶有分類屬性的傾向于使用豎直圖例，圖例的右邊可放置更長的文本。
默認把圖例放在左上角去做一個通用的方案看起來沒毛病。但考慮到人的視覺動線是從上至下，從左到右。這里有一個更好的做法：縮短用戶對照圖例看圖形的本能路徑，可以提升對信息的獲取效率。如下圖所示：
當我們在制作多折線圖時，經常會出現個數據系列之間相互交錯的情形，并使得各種數據標記與之前的出現順序不一致，即與圖例排列順序不同。因此用戶的眼睛必須在圖例與折線之間進行連連看，最佳的做法是采用跟隨圖例形式，去標識出折線所屬于的維值信息，這樣會更直觀有效。
在圖表中，標簽是對當前的一組數據進行的內容標注。包括數據點、拉線、文本數值等元素，根據不同的圖表類型選擇使用。
在繪制的圖表的時候，我們傾向將標簽直接打在圖形外，但在「堆疊類」圖表中，標簽會顯示在圖形內。這樣做會有個后果，標簽的文本和圖形經常需要交疊展示，所以可讀性需要足夠良好，所以通過對 HS 值的判斷，決定文字的顏色是否需要反思。這樣對比度就在可控范圍內，不會出現可讀性的問題。有時，還需要增加描邊，讓標簽更清晰。
當數據特別多并且密的時候會造成全部標簽擠在一起的情況。在標簽重疊時，采用動態計算的抽樣顯示方式，自動隱藏其中一個，同時當 Hover 圖表時，顯示被隱藏的對應的數據。這樣保證了圖表的清晰度，也保證了信息的完整性。
提示信息一般是tap或者hover的時候，圖表以交互的方式吐出該位置的數據，幫助用戶更深入的了解數據。一般由視覺標記圖形，文本標簽，數值標記這3中元素構成。
提示信息的展現形式由4種。按不同的圖表類型，分為懸浮、固定位置、固定在軸上、固定在圖形上。
人類從圖形中獲取信息的效率遠高于文本，可以說如今人類早已進入了讀圖時代。圖形是統計圖表的視覺通道在形狀上映射的視覺展現，是圖表的必備元素，承載著數據背后蘊含的信息。按照組件原子化的思路來定義現在千奇百怪的圖表，大致可以分為六種基礎樣式：折線，面積，散點，氣泡，餅/環，柱形，條形。
這里主要想重點講一下，如何通過設計來強化圖表信息的表達，以便簡化用戶獲取信息的成本。關于具體某個圖表的制作規范和運用場景，會在之后的文章中提及。
通過明暗對比、顏色對比以及色彩對比等手段可以有效的區分信息，在視覺層級上也是明顯的處理了視覺噪音，便于用戶區分信息。
通過添加標注，人為去干預信息的表達，多用于一前一后的標識，便于用戶識別信息。
我們做數據分析的有句話叫“一圖勝千言”，圖表是展現數據的一種重要展現形式，選對了圖表就能幫助我們更加快速、直觀的傳達數據信息。
那如何挑選合適的圖表呢？在我看來大致分為三步：
1. 確定核心內容：明確要用圖表傳達的核心信息；
2.判斷比較關系：判斷數據之間的比較類型（如占比、數量、趨勢等）；
3.選擇圖表類型：選擇對應含義的圖表（如餅圖、柱狀圖、折線圖等）。
很多朋友在判定和選擇圖表類型時會不知所措，但其實你只需要記住一句話：決定圖表形式的不是數據，而是你要傳達的信息。
同一組數據用不同的角度看，有不同的主題，比如下面這組數據：
從另一個角度看同樣是5月份的數據，你還可能會將側重點放在每個產品占銷售額的百分比上。那你的圖表主題應該是“5月份，產品 A 占公司產品總銷售額的比例位居首位”。
綜上所述，選擇合適圖表的關鍵，最初也是最重要的，就是明確要用圖表傳達的核心信息。
在實際工作中需要用圖表反映數據的場景五花八門，但按數據關系分類無非以下幾種情況，給大家簡單舉幾個例子：
“預計在今后 10 年多的時間里，銷售額將增長 ”對應的關系為時間趨勢；
“雇員的最高工資額在 30000 到 35000 美元之間 ”對應的關系為頻率分布；
“汽油并不是牌子越響價格越高其性能就越好”對應的關系為相關性；
“9 月份里，6 個區域的營業額大致相同”對應的關系為排名對比；
“銷售部經理在他的領域內只花費了他 15% 的時間”對應的關系為占比。
國外專家Andrew Abela曾整理了一份圖表類型選擇指南圖示，但其實結合我自己的經驗，考慮到日常企業的數據分析場景，圖中有些圖表使用頻率是非常低的。
所以我在此基礎上結合自己多年的經驗，總結出了常用商務圖表的選擇指南，總體我認為這是會更適合商務圖表展示，而且會更接地氣，適合大家參考使用。
折線圖是通過線條的波動（上升或下降）來顯示連續數據隨時間或有序類別變化的圖表，常用于反映數據隨著時間推移而產生的變化趨勢。
橫軸為連續類別（如時間）且注重變化趨勢、預測，適用于折線圖。
舉個例子：比如想看2020年上半年商品的營業額情況，并對走勢做一個分析。由于每個月份的商品營業額相關的，它們代表一種數據在不同時間下的數據值，因此我們可以用折線圖將它們連接起來。
但如果想看2020年上半年北京、上海、廣州、深圳四個省份的營業額情況，由于每個省份的營業額是不相關的，所以我們不能隨便用折線圖來替代柱狀圖。
如果折線圖上下浮動過于劇烈，那么可以嘗試拉長時間間隔，比如不每天采樣而以周為單位來采樣。用戶不太原因去閱讀鋸齒狀的線條，或者說他們不會喜歡這樣的圖表。
但是如果有強需求說是一定要在某個范圍，這條略過。
當有些特定的數值特別重要時，我們可以在線條上標注出他們，但全部標清數據點在大多數情況下標記出來的意義不大，從視覺上來看會顯得非常瑣碎。
若對比數據較多，為了避免信息繁雜。可采用實線的強弱和色彩的對比來區分主次內容，讓用戶更關注在主折線，獲取主數據的波動感知。
折線圖：更關注于點的數據，相對短的一段時間數據隨時間變化的趨勢；
曲線圖：更關注點構成的線點數據，一段時間內整體數據隨時間變化的趨勢。
曲線圖是折線圖中的一種，當圖表數據點過于密集時，使用曲線圖更能表達數據隨時間變化的趨勢、周期性。
面積圖又叫區域圖，是一種隨有序變量的變化，反映數值變化的統計圖表，原理與折線圖相似。它在折線圖的基礎上多了一個面積概念，填充的區域可以表示“累積”的含義（當X軸為連續的數值時）。
當注重隨時間的趨勢變化和累計的值時，適用于面積圖。
例如：想要查看今年10月和去年10月每日的商品營業額走勢，并對整月營業額進行比較，這時就可以采用面積圖。但當自變量不是順序性的變量，則不適合用面積圖。
透明度可以很好的幫助使用者觀察不同序列之間的重疊關系，沒有透明度的面積會導致不同序列之間相互遮蓋減少可以被觀察到的信息。
當數據值相距很遠時，區域是模糊不清的，此時不太適合使用面積圖展示。
如下方示例雖然仔細分析能確定只展示了兩個類別，乍一看，很可能會誤以為圖表上顯示三種不同的顏色，但使用分組柱狀圖就可以很好解決這個問題。
面積圖只適合展現少量的數據，最多建議不要超過四個類別，否則就會導致非常難以識別。因此在多個類別下，要盡量避免使用面積圖，采用相似圖表來表示，比如折線圖。
堆疊面積圖與面積圖類似，都是在折線圖的基礎上，將折線與自變量坐標軸之間區域填充起來的統計圖表。
唯一的區別是堆疊面積圖有多個數據系列，它們一層層的堆疊起來，每個數據系列的起始點是上一個數據系列的結束點。
適用于觀察多變量隨時間的變化情況，且既能看到整體趨勢又能看到各變量的構成情況。
為了保證數據傳遞的準確性，在適用堆疊面積圖時，盡量不要對Y軸進行裁剪。
當數據系列過多時，往往造成難以觀察，所以建議使用堆疊面積圖時數據系列最好不要超過7個。
建議堆疊面積圖中把變化量較大的數據放在上方，變化量較小的數據放在下方會獲得更加的展示效果。
堆積面積圖要展示部分和整體之間的關系，所以不能用于包含負值的數據的展示。
柱狀圖，是一種使用矩形條，對不同類別進行數值比較的統計圖表。使用垂直或水平的柱子的長短對比數值大小，其中一個軸表示需要對比的分類維度；另一個軸代表相應的數值。
在柱狀圖上，分類變量的每個實體都被表示為一個矩形（通俗講即為“柱子”），而數值則決定了柱子的高度?？v向柱狀圖的柱是垂直方向的，如圖：
橫向柱狀圖的柱是水平方向的，又稱條形圖，如圖：
柱狀圖最適合對分類的數據進行比較，尤其是當數值比較接近時，由于人眼對于高度的感知優于其他視覺元素（如面積、角度等），因此使用柱狀圖更加合適。
如下圖所示，5組數據的數值很接近，若采用餅圖，這無法直觀的進行比較，右邊的柱狀圖則能更好地傳遞圖表信息。
當柱子太窄時，用戶的視覺可能會集中在兩個柱中間的負空間，而這里是不承載任何數據的。寬度推薦使用在1/2 柱寬到 1 柱寬之間，但也要視情況而定。
保證柱形圖有的圓角，以確保柱形頂部測量柱形的長度；全圓角則有可能歪曲可視化圖表的表達。
柱形圖一般比較一組分類數據，柱子的高低已經傳遞了相關信息，不必通過顏色來區分，所以建議使用相同的顏色或同一顏色的不同色調，過多的顏色會增加理解成本。
如果需要強調某個數據時，可以使用對比色或者變化色調來突出顯示有意義的數據點。
對多個數據系列排序時，如果不涉及到日期等特定數據，最好能符合一定的邏輯用直觀的方式引導用戶更好的查看數據。
可以通過升序或降序排布，例如按照數量從多到少來對數據進行排序，也可以按照字母順序等來排布?？傊?，按照邏輯排序可以一定程度上引導人們更好地閱讀數據。
條形圖還可以通過省略橫軸和縱軸，并直接在柱子上表明數值，來降低數據墨水比，進一步提高信息的獲取效率。
堆疊柱狀圖（Stacked Column Chart），又稱堆疊柱形圖，是一種用來分解整體、比較各部分的圖表。
它是柱狀圖的擴展，不同的是，柱狀圖的數據值為并行排列，堆疊柱圖則是一個個疊加起來的。它可以展示每一個分類的總量，以及該分類包含的每個小分類的大小及占比，并且這些子類別一般用不同的顏色來指代。
對比不同類別數據的數值大小，同時對比每一類別數據中，子類別的構成及大小。
例如下圖顯示的是每種化妝品在各個產品的銷售情況，通過堆疊柱狀圖，我們可以很清晰低對比同一種化妝品到底在哪個城市銷量更好。
堆疊柱狀圖最好的展示效果是每個組只包含兩到三個類別，最多不要超過6個，因為太多的數據系列會很容易讓人眼花繚亂， 如下圖：
堆疊條狀圖的數值建議在圖形之間，居中對齊，在圖形左側容易產生誤解。
由于要分析部分數據在整體中的占比，避免用堆疊柱狀圖展示包含負數的數據。因為柱子的高度必須為正數，有負數則無法直觀顯示在圖上。
大多數的堆疊柱狀圖都是垂直繪制的，但是如果你的數據標簽特別長時，考慮更好地展示效果，可以選擇使用水平堆疊的方式。
分組柱狀圖，又叫聚集柱狀圖。跟柱狀圖類似，使用柱子的長短來映射和對比數據值。每個分組中的柱子使用不同的顏色或者相同顏色不同透明的方式區別各個分類，各個分組之間需要保持間隔。
對比不同分組內相同分類的大小，對比相同分組內不同分類的大小。其中，分組個數不要超過 12 個，每個分組下的分類不要超過 6 個。
分組柱狀圖適合比較多組數值差異不大的數據，比如，對于要同時查看一個數值和百分比的時間趨勢，雙軸圖就派上大用場了。
為了瀏覽起來更直觀，建議用柱圖來表示數值類數據，用線圖來表示百分比。
分組柱狀圖強調組的概念，組是一個個重復單元。按照格式塔原理，每兩個分組之間的間距要大于組內不同系列之間的間距，以免造成視覺上錯誤的歸類和區分。
雙向柱狀圖是使用正向和反向的柱子顯示類別之間的數值比較，其中分類軸表示需要對比的分類維度，連續軸代表相應的數值，分為兩種情況，一種是正向刻度值與反向刻度值完全對稱；另一種是正向刻度值與反向刻度值反向對稱，即互為相反數。
同樣的，可分為垂直方和水平兩個方向，其中水平雙向柱狀圖又叫正負條形圖。
雙向柱狀圖一般用于正負兩份相反數據的對比，例如一周內個人收入和支出的統計，其中收入為正數，支出為負數。
使用雙向柱狀圖可以很明確的對收入和支出做出對比，并能從單個系列中分析收入和支出的數值及波動。
雙向柱狀圖多用于展示含相反含義的數據，因此要避免不具有正負含義的數據使用而造成的誤解。
如下圖人口統計圖表中使用雙向柱狀圖一邊繪制男性一邊繪制女性，只是單純的兩類不同數據的對比，并不存在負數。這種情況將兩個數據序列繪制成一個分組柱狀圖是更合適的。
向柱狀圖正向和負向的數據具有對比性，因此一般選用差值較大的具有對比性的顏色，保證的獲取有效的信息。
餅圖，或稱餅狀圖，是一個劃分為幾個扇形的圓形統計圖表。在餅圖中，每個扇形的弧長（以及圓心角和面積）大小，表示該種類占總體的比例，且這些扇形合在一起剛好是一個完全的圓形。
餅圖主要用于展現不同類別數值相對于總數的占比情況，尤其是想要突出表示某個部分在整體中所占比例，且該部分所占比例達到總體的25%或50%時，很適合用餅圖。
餅圖不適用于多分類的數據，因為隨著分類的增多，每個切片的面積變小，視覺區分度隨之降低。
當數據類別較多時，我們可以把較小或不重要的數據合并成第五個模塊命名為”其它”。如果一定要保證數據的完整性和準確性，此時選擇柱狀圖或堆積柱狀圖或許更合適。
由于人類對“角度”的感知力并不如“長度”，在需要準確的表達數值（尤其是當數值接近、或數值很多）時，餅圖常常不能勝任，因此當各類別數據占比較接近時（如下左圖），我們很難對比出每個類別占比的大小。
此時建議選用柱狀圖或南丁格爾玫瑰圖（如下右圖）來獲取更好的展示效果。
大多數人視覺習慣是按照順時針和自上而下的順序去觀察。因此在繪制餅圖時，建議從12點鐘開始沿順時針右邊第一個分塊繪制餅圖最大的數據分塊，有效的強調其重要性。
其余的數據分塊有兩種建議：一種是按照數據大小依次順時針排列；另一種在12點鐘的左邊繪制第二大的分塊，其余的分塊按照逆時針排列，最小的分塊放在底部。
讓用戶的視線焦點集中在上半部分，增強獲取信息的速度。
環形圖，又叫做甜甜圈圖，是由兩個及兩個以上大小不一的餅圖疊在一起，挖去中間的部分所構成的圖形。
適用于展示分類的占比情況，與餅圖用法相似，但環圖相對于餅圖空間的利用率更高，比如我們可以使用它的空心區域顯示文本信息，比如標題等。
關于環圖不適用分類過多的場景，否則閱讀會將很差（如下圖）。
可行的辦法：一是將一些不重要的變量合并為“其他”，避免扇區超過5個；二是改用條形圖或者表格。尤其是，如果你想讓讀者清楚的閱讀到每一條數據，選用表格會更加直截了當。
下圖中游戲公司的不同種類的游戲的銷售量相近，所以不太適合使用環圖，此時可以使用柱狀圖。
南丁格爾玫瑰圖又名雞冠花圖、極坐標區域圖，盡管外形很像餅圖，但它是用半徑來反映數值大小的（而餅圖是以扇形的弧度來表示數據的）。
對比不同分類的大小，且各分類值差異不是太大時。由于半徑和面積之間是平方的關系，視覺上，南丁格爾玫瑰圖會將數據的比例夸大。
如下圖展示一個班級男女同學的個數，這種場景下，使用餅圖或者環形圖比用南丁格爾玫瑰圖更合適。
南丁格爾玫瑰圖是將數值映射到半徑上，而扇形的面積和半徑是平方關系，因此視覺上看，數值的差異會被擴大。
因此，當數值差異較大、或者希望的比較數值大小時，推薦使用柱狀圖。
下面使用南丁格爾玫瑰圖展示各個省份的人口數據，這種場景下使用玫瑰圖不合適，原因是在玫瑰圖中數值過小的分類會非常難以觀察，推薦使用條形圖（橫向柱狀圖）。
散點圖，又名點圖、散布圖、X-Y圖，它是將所有的數據以點的形式展現在平面直角坐標系上的統計圖表。它至少需要兩個不同變量，一個沿x軸繪制，另一個沿y軸繪制，每個點在X、Y軸上都有一個確定的位置。
散點圖適用于分析變量之間是否存在某種關系或相關性。其中，相關性包含正相關（兩個變量值同時增加）、負相關（一個變量值增加另一個變量值下降）、不相關、線性相關、指數相關、U形相關等。
在觀察兩個變量之間的關系時，趨勢線是非常有用的，趨勢線的形狀走向解釋了兩個變量之間的關系類型，還可以用來預測未來的值。但需要注意的是趨勢線最可只能使用兩條，以免干擾正常的數據的閱讀。
散點圖只有有足夠多的數據點，并且數據之間有相關性時才能呈現很好的結果。如果一份數據只有極少的信息或者數據間沒有相關性，那么繪制一個很空的散點圖和不相關的散點圖都是沒有意義的。
如果數據包含不同系列，可以給不同系列使用不同的顏色，例如藍色代表男性，紅色代表女性，并增加圖例標注出藍色代表的含義。
幫助用戶快速獲取相關信息。但要注意，要避免數據分類過多的情況，過多的數據分類，會導致無法快速識別，失去可視化的意義和價值。
氣泡圖是顯示變量之間相關性的一種圖表，由笛卡爾坐標系（直角坐標系）和大小不一的圓組成，可以看作是散點圖的變形。
與散點圖不同的是，氣泡圖是一個多變量圖，它增加了第三個數值即氣泡大小的變量，在氣泡圖中，較大的氣泡表示較大的值。可以通過氣泡的位置分布和大小比例，來分析數據的規律。
一般而言，氣泡圖需要3個變量，其中2個決定了氣泡在笛卡爾坐標系中的位置（即x，y軸上的值），另外一個則通過氣泡的大小來表示。
當然，氣泡圖也可以容納更多維的數據，例如用第4個變量決定氣泡的顏色、透明度等。
特殊地，氣泡圖也可以用于二維數據，即y軸和氣泡大小使用同一維度的數據（y軸和氣泡大小的雙視覺編碼）。
這種情況下，相比于柱狀圖它能達到更美觀的目的。例如，下圖表示了2014年每個季度的銷售額。x軸代表時間，y軸和氣泡大小代表了銷售業績。
繪制氣泡圖時，需注意氣泡的大小是映射到面積而不是半徑或者直徑繪制的。
以下圖為例，如果兩個數值是1：2的關系，如果按照半徑1：2來繪制，那么實際的圓面積，將會是1：4的比例，這就夸大了數據之間的差異。
雷達又叫戴布拉圖、蜘蛛網圖。它是一種顯示多變量數據的圖形方法。通常從同一中心點開始等角度間隔地射出三個以上的軸，每個軸代表一個定量變量，各軸上的點依次連接成線或幾何圖形。
每個變量都有一個從中心向外發射的軸線，所有的軸之間的夾角相等，同時每個軸有相同的刻度，將軸到軸的刻度用網格線鏈接作為輔助元素，連接每個變量在其各自的軸線的數據點成一條多邊形。
雷達圖對于查看哪些變量具有相似的值、變量之間是否有異常值都很有用。雷達圖表也可用于查看哪些變量在數據集內得分較高或較低，因此非常適合顯示性能（見下圖）。
同樣，雷達圖也常用于排名、評估、評論等數據的展示。
一個雷達圖包含的多邊形數量是有限的，如果有五個以上要評估的事物，無論是輪廓還是填充區域，都會產生覆蓋和混亂，使得數據難以閱讀。
如果變量過多，也會造成可讀性下降，因為一個變量對應一個坐標軸，這樣會使坐標軸過于密集，使圖表給人感覺很復雜，所以最佳實踐就是盡可能控制變量的數量使雷達圖保持簡單清晰。
漏斗圖，形如“漏斗”，在開始和結束之間由N個流程環節組成。
漏斗圖總是起始于100%的數量，并在各個環節依次減少，每個環節用一個梯形來表示，整體形如漏斗。與餅圖一樣，漏斗圖呈現的也不是具體的數據，而是該數據相對于總數的占比、漏斗圖不需要使用任何數據軸。
漏斗圖適用于業務流程比較規范、周期長、環節多的單流程單向分析，通過漏斗各環節業務數據的比較能夠直觀地發現和說明問題所在的環節，進而做出決策。
其中，數據是要有序的，彼此之間有邏輯上的順序關系，階段最好大于3個。
漏斗圖不適合沒有邏輯關系的數據，換句話說，如果數據不構成“流程”，那么不能使用漏斗圖。例如，想要展示不同游戲類型的銷量對比，用漏斗圖就是不合適的。
漏斗圖作為一種統計圖表，漏斗圖的“長相”，本質上是由數據決定的。在傳達數據時，漏斗圖是通過“面積”表示的，對于人眼來說，面積的識別本來就不太容易。
如果我們在制作漏斗圖時，再人為的改變漏斗中每一個梯形的高度，那么識別起來就十分困難。以下圖為例，抹掉數字后，你幾乎不可能知道第一層是第二層的三倍。
以上就是本篇文章的全部內容，關于可視化相關的知識還有很多沒有涉及到，例如可視化圖表的配色、商務儀表盤、以及其他的圖表運用場景等等都還未講到。以后有時間慢慢整理分享給大家，謝謝閱讀！
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
本文將針對酷家樂旗下云端建模工具——酷大師所做的可用性測試，說明工具型產品如何去做可用性測試。
打造一款產品的過程中，我們需要時刻保持警惕：功能是否滿足用戶核心需求？交互流程能否做到簡單流暢？是否還有未知領域可以由用戶帶來啟發？進行一次準備充分的可用性測試，無疑是解答上述問題快捷有效的方式。
下面我將結合本次針對酷家樂旗下云端建模工具——酷大師所做的可用性測試，說明工具型產品如何去做可用性測試。
測試目的不同，安排的測試任務就不同，進而就會影響最終得到的結果。所以測試之初需要考慮清楚測試目的。國際標準化組織在人體工程學設計的人機交互部分（ ISO9241） 把b2可用性c 規定為 3 個指標：
結合這3個指標，我將本次測試目的設定為：
測試時間：
測試環境：
Nielsen在理論中認為5-8位用戶可以測試出85%的可用性問題，實踐下來確實如此，樣本數量建議控制在這個范圍。
在同一個產品的用戶中，新手用戶、永久的的中間用戶、專家用戶這三類角色通常是共存的。我們需要讓新手用戶快速和無痛苦地成為中間用戶；避免為那些想成為專家的用戶設置障礙；最為重要的是，讓永久的中間用戶感到愉快，因為他們的技能將穩定地處于中間層。
本次測試中，我盡量使樣本中包含這3類用戶，比例為2：3：3。測試之后，就可以大概知道對于不同類型用戶來說，產品可用性和
易用性情況，也可以得到多維度差異化的反饋。
測試中需要使用一些管理用戶信息或記錄用戶反饋的表格，在準備階段就要做好表格設計和打印工作。下面是具體的表格，可根據具體需求做相應調整。
《用戶信息&排期表》
在這張表中管理測試用戶信息b2姓名、職業c 、測試安排「時間、地點」、測試工作人員「主持人、觀察員」。一場測試盡量安排一位主持人和一位觀察員作為工作人員相互配合。
主持人負責與用戶溝通互動，推進測試進程；觀察員負責設備和資料保障，以及測試過程中的行為觀察和記錄。一個人獨自承擔主持人+觀察員角色的話，在用戶反饋密集而現場又出現臨時狀況時就會手忙腳亂，所以建議兩個角色分工協作。
《用戶基本信息問卷》
在這張問卷中可以設計與產品相關的用戶基本信息問題，問卷設計原則為：
這張問卷使用在線工具呈現，比如騰訊問卷；也可現場打印紙質問卷進行詢問填寫。大多數用戶比較喜歡現場填寫。
《單任務滿意度問卷》
測試過程中，我們需要讓用戶完成一個完整任務，該任務需要拆解成若干單任務。在每個單任務結束后，立刻對用戶進行該單任務的滿意度詢問。
《SUS系統可用性量表》
用戶結束完整任務后，填寫該量表。該量表由10個題目組成，包括奇數項的正面陳述和偶數項的反面陳述。在結果整理階段，我們再對該量表進行分值計算。
從開始到結束，需要主持人將整場測試的各個環節串聯起來，引導用戶操作，推動測試進程向前發展。為防止意外狀況出現，可以預設測試腳本，規劃情境和話術，并在預測試環節驗證及優化該話術。
比如可以這樣開場：“首先非常感謝您今天能來參加我們的可用性測試，我是主持人XXX，這位是觀察員XXX。我們這次是對酷大師建模工具進行可用性測試，想了解您使用時的體驗和感受。
在這里需要強調的是：我們測試的對象是工具，而不是您，所以您不必感到緊張……當您使用工具時，我們會觀察和記錄。今天的測試大概需要一個小時，測試過程中會有休息時間。測試過程中，請您將手機保持靜音狀態……“
比如可以這樣進行兩個單任務環節串場：“好的，我們已經完成了第一個單任務。現在有一份簡單的問卷，填完后可以稍微休息一下。
「出示問卷，并作簡要填寫說明」「問卷完成后進行簡單訪談，用戶也稍稍休息后繼續」現在，我們開始進行第二個單任務「要清晰且大聲地說出這句話，以“鼓勵”測試參加者和提示記錄人員」……”
具體話術依據需要測試的內容和情境展開，盡量做到專業、友好。
可用性測試往往帶有一定目的性，而這些目的能不能達成，取決于任務與目的的關聯性以及用戶是否能夠給到對應反饋。通常，測試用戶是愿意給予反饋的，那么測試任務的設計就成為整個準備階段最重要的環節。
做好測試任務的設計和拆解：需要具備從全局高度理解產品的能力；需要知道產品全鏈路的過去起源、現狀細節、未來走向；需要把控重點，拎出骨架；需要去繁就簡，以較少的任務成本測出最有價值的信息。
本次測試中，我設計的主流程是：模型創建——材質鋪貼——模型渲染——模型發布——模型分享，并且我還希望測到拉伸、陣列、組編輯、移動、旋轉這樣的主功能。所以我將這兩塊有機結合，給到用戶創建一個「樓梯踏步模型」的任務。
我將任務按照主流程拆解為5個單任務，主功能分布到其中幾個單任務中，且盡量做到兩個單任務中不重復使用同一個主功能。
大多數產品都存在一些限制因素導致的尚未解決的已知問題。這些問題在測試中出現的話，會轉移用戶注意力，削弱本次測試的價值，偏移本次測試的目的。
另外，我們準備階段進行的種種規劃也需要得到驗證。結合這兩個原因，正式測試之前建議進行內部的用戶預測試。找出并修復測試環節中的漏洞，準備好各類突發狀況下的planB，以及修復影響正式測試的已知問題，提高正式測試的執行效率。
第一步.測試開場，填寫《用戶基本信息問卷》
本次測試是在工作日穿插進行8場一對一用戶測試。這樣可以放緩測試節奏，在兩場測試間隙有充足時間簡單整理上一場收集的信息，與下一場用戶確認測試安排，以及對突發狀況及時處理。
正式開始前半小時，觀察員需確認設備都已調試妥當，資料都已打印完成。主持人可與用戶進行聯系，帶領用戶進入測試場所。主持人可以通過填寫《用戶基本信息問卷》了解用戶基本信息，幫助用戶消除在陌生環境下的溝通障礙。也可以使用戶以放松狀態完成測試任務，以開放心態為后續拓展性話題的展開做好準備。
無論是填寫《用戶基本信息問卷》還是后續的問卷，建議采用主持人提問、用戶回答的方式收集信息。用戶的注意力集中于思考和溝通，就能夠提供更多有價值的信息，而不是忙于撰寫問卷。
第二步.完成單任務，填寫《單任務滿意度問卷》
主持人按照順序分步解說單任務。單任務測試過程中，工作人員不要去打擾用戶，也不要給用戶任何提示，所有的問題都等到測試結束再進行解答。
觀察員需仔細觀察用戶操作，記錄用戶是否很容易判斷出如何操作，完成某個重要功能點時是否順暢；需隨時關注用戶表情，記錄下明顯表情相關聯的流程或功能點等等細節。
一個單任務完成后，提示用戶稍事休息，然后提問《單任務滿意度問卷》中的問題。此時可以回答用戶操作過程中的疑問，也可以藉由操作中的細節做延展發散，詢問用戶操作感受。通?？梢垣@得很多針對該單任務的意見和建議。這些意見和建議后續就需要記錄整理，作為優化任務幫助提升產品可用性和易用性。
第三步.填寫《SUS系統可用性量表》，了解整體評估
整個任務完成后，可以藉由填寫《SUS系統可用性量表》，了解用戶對整體的評估。由于量表的10個題目中，包括奇數項的正面陳述和偶數項的反面陳述，所以在提問過程中一定要陳述清楚題目。如果用戶認為有些問題無法回答，則視為其選擇中間值。在后續的結果整理階段，再對量表總分進行計算。
在問題詢問過程中，可以有針對性地詢問原因。比如針對第2個問題“我認為酷大師建模工具的操作較為復雜，其實沒必要這么復雜”。
如果用戶認為不復雜，則可以詢問哪些點非常簡單易用；如果用戶覺得復雜，則可以詢問哪些點覺得復雜。用戶告知原因的同時，常常會說出他認為比較簡單的解決方案。這些解決方案或者來自于競品，或者來自于實踐，或者來自于創新，常?？梢詭椭覀冮_拓思路，走出認知盲區。
第四步.拓展性訪談，測試收尾
在這個環節可以不必拘泥于原定的測試任務。建議預留一定時間，大到行業發展，小到產品細節，與用戶進行一番深度探討。這些來自于一線的用戶常常會帶來一些新鮮的靈感，為產品未來的拓展提供一些線索，解決產品當下的一些困惑。
由于我們一開始就對測試樣本進行了分類，所以也可以結合前面幾個環節的信息，對各分類下的用戶訴求和行為習慣進一步驗證、區分、歸納。
第一步.SUS量表分值計算
首先，我們需要計算SUS量表總分。奇數項計分采用“原始得分-1”，偶數項計分采用“5-原始得分”。由于是5點量表，每個題目的得分范圍記為0~4（最大值為40），而SUS的范圍在0~100，故需要把所有項的轉換分相加，最終再乘以2.5，即可獲得SUS分數。
其次，我們可以獲得分量表得分。SUS量表中，第4和第10項構成的子量表為“易學性”（Learnability），其他8項構成的子量表為“可用性”（Usability）。
為了使易學性和可用性分數能夠與整體SUS分數兼容，范圍也是0~100，需要對原始分數進行轉換：易學性量表轉換分數的總和乘以12.5，可用性量表乘以3.125。
最后，我們可以將SUS量表分數換算成百分等級來解釋，找到對應評級。百分等級的意思是指測量的產品或系統相對于總數據庫里其他產品或系統的可用性程度。比如SUS得分是73分，其百分等級大約為67，意味著比大約66%的產品可用性更好。
第二步.整理問題列表，推進迭代優化
做完所有用戶的測試之后，我們一定會收集到很多涉及具體功能點的反饋。對于正向反饋，我們可以謙虛地接受，并且思考這些打動用戶的點如何復用；對于非正向反饋，我們應該冷靜地思考，它們將是本次可用性測試中最直接而有效的收獲！
對這些反饋可以進行分類歸納，將其中能夠立即應用于產品的內容整理出來，按照優先級，放入產品迭代優化任務中。這些任務將提高產品可用性，在數據層面能夠幫助提升留存率。我們這次可用性測試中總共獲取97個有效反饋，其中62個整理進產品迭代任務，并且取得了用戶使用數據上的相應提升。
第三步.撰寫測試報告
整個測試環節通常只有2-3位工作人員，如果希望能和團隊一起分享測試的收獲，建議整理一份總結報告?？梢允褂脀ord或者ppt形式，說明測試背景、測試用戶信息、主要結論、發現的問題、以及解決問題的行動項。
經過幾場頗具收獲的工具型產品的可用性測試之后，我做了一些總結，希望能夠形成適應于工具型產品的可用性測試體系：
1. 目的性
工具型產品的可用性測試目的比較統一：幫助團隊優化體驗路徑；幫助團隊明確用戶使用產品時的體驗感受；幫助設計師驗證設計指標。
2. 專業性
完整的可用性測試全程都需要專業支撐，從籌備到進行，從任務到結果，每一個細節都需要考慮到位。在這過程中我們要盡量保證：流程規劃清晰；文檔整理完整；分工明確到位。
3. 參與性
大多數可用性測試是用戶體驗相關崗位人員發起，但是用戶對于產品的反饋與團隊每位成員息息相關，所以建議團隊共同參與。比如在這次可用性測試中，就邀請了產品經理和研發人員擔當觀察員或主持人；邀請用研人員給予專業指導培訓；在對測試反饋的問題進行優化過程中，也是團隊通力合作，推進迭代快速進行。
4. 周期性
可用性測試不是進行一次就結束的一場表演。而是結合產品進展情況，可持續實施的一種有效的快速驗證方式。
可以在新產品上線后進行，可以在重要功能上線前進行，也可以在迭代優化后進行。建議周期性進行可用性測試，取得一些結果后立即應用于產品，隔段時間再次驗證，形成良性循環。亦趨近于精益用戶體驗中倡導的基本MVP理念。
當然，每次可用性測試都需要工作人員投入大量時間和精力，所以專業賦能可以成為很好的解決方案。即團隊成員可以學習使用該方法，輪流進行周期性操作。
我們日常其實接觸并積累了大量專業方法，可用性測試只是其中一種。在不斷實踐的過程中才能真正體會到這些方法的魅力之處，在不斷落地的過程中才能打磨自身的方法論體系，形成屬于自己的一套打法，給產品設計帶來新穎的專業思路。
文章來源：優設 作者：酷家樂UED
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
通過閱讀“地圖基礎知識及通用設計原則”，相信大家已經對地圖及其設計有了一定認知，本篇我們來了解下如何實踐。
Part 1. 上篇要點回顧
- 核心設計原則
符合制圖學和公眾認知
保證識別度
清晰有層次
細分地圖模式
具有品牌特性
- 元素分類
點元素：地名、POI等
線元素：道路、地鐵線、水系線、鐵路線、航線、邊界線等
面元素：陸地、草地、湖泊海洋、AOI等
*名詞解釋：POI, Point of Information的縮寫，即“信息點”。一個POI可以是一棟房子、一個商鋪
*名詞解釋：AOI, Area of Interest的縮寫，即“信息面”。指的是區域狀的地理實體，如醫院、小區等
Part 2. 設計背景
為了實現“讓出行更美好”的使命，今年乘客端新增了自駕導航。地圖貫穿了該產品的全流程，且首頁、路線規劃頁、導航中等場景用戶需求都不相同。然而已有的模式，從配色到信息展現，都不符合首頁地圖的場景需求，于是需要重新設計。
以下詳解設計過程。
Part 3. 設計落地
- 設計關鍵詞推導
根據自駕導航的目標，拆解出了首頁地圖的設計目標：
構建適合自駕場景的瀏覽地圖
提升地圖體驗與設計品質，提高用戶滿意度和好感度
打造具有滴滴品牌調性的地圖
用戶需求及習慣表明：在首頁主要是明確自身定位、查看其他位置信息，且視距基本是手持距離。那么“構建適合自駕場景的瀏覽地圖”關鍵點就在于識別度，更好的展示重點信息，保證用戶讀圖效率。
“提升地圖體驗與設計品質，打造具有滴滴品牌調性的地圖”的目標，可以通過視覺手段實現。在瀏覽場景，用戶使用地圖的時間不固定，為避免長時間瀏覽產生疲憊感，地圖配色需要更舒適，對比度也要適中。這點也與自駕導航整體的設計關鍵詞“輕量”不謀而合，于是推導出了關鍵詞輕量化、品牌感。
- 設計地圖方案
明確設計關鍵詞后，開始著手設計。關鍵詞中的輕量化、品牌感基本上決定了這款地圖的調性，識別度則重點影響信息展現。上篇提到，設計時可以把地圖元素拆分成點、線、面三類，按照由大到小的順序設計，即先確定配色，再設計文字圖標等信息，以免元素過多互相干擾。
1、設計整體配色
輕量化：傳達輕量化的感受需要控制取色范圍，于是我們制定了顏色使用規則（下圖）。
色相：以冷色為主，醫院（紅色系）等具有公眾認知的顏色可除外；顏色從品牌色系中選取
明度：限定顏色的明度范圍，選取中間-略高的部分，平衡顏色對比度
飽和度：避免使用高飽和度的顏色，保證配色的舒適感
通過分析顏色，我們對傳達輕量化的感受有了大致的把握。那么品牌感如何體現呢？
品牌感：具有品牌調性的地圖能更好的融入產品設計風格，也能夠區別于競品，這在滴滴全流程的設計中都十分重要。在地圖上我們主要用顏色及圖標繪制表達品牌調性。
顏色：結合輕量化的用色規則，從品牌色系中選取，使地圖配色與其他組件更加融合
圖標繪制：沿用滴滴設計規范中的圖標繪制語言，如圓角、簡單形狀等，拉齊視覺感受
最終根據“輕量化”和“品牌感”這兩個關鍵詞，設計出了地圖配色的效果圖。
2、設計地圖信息
配色確定后，即可開啟POI圖標+文字、AOI文字、道路文字、以及各類行政區劃文字的設計。
識別度：設計地圖信息時，保證基本識別度的方式，可通過文字顏色、字號大小、圖標繪制等實現。但是要做到清晰有重點，就要關注信息間的層次感。
以POI信息為例?；仡櫹麓藭r的用戶需求：了解自身定位、查看其他位置信息。從這點可以鎖定第一展示優先級應為POI——地圖上定位最精準的信息種類。而已有的圖標識別度較弱，無法滿足需求，于是我們進行了重繪。通過用色表達圖標類型、首選有公眾認知的載體作為表意、增強顏色飽和度及對比度，搭配文字顏色，從視覺上把POI信息提升至第一順位。
用同樣的方法，根據重要程度，通過設計拉開了信息的視覺層級：POI>道路名稱>AOI名稱>行政區劃信息。
3、整體調整
在完成了配色和信息設計后，我們需要整合所有元素統一調整。此時，通常會出現元素互相干擾的問題，我們可以回歸到場景需求中解決此類問題，按照信息的重要程度調整，最終形成完整方案。
Part 4. 設計驗證
地圖方案落地后，我們會關注設計品質的驗證。由于地圖的工具屬性，驗證其設計品質及用戶滿意度一直是行業內較困難的事情。地圖既是一種圖形語言，又承載了大量的信息，且需符合場景需求，要驗證的內容非常多。因此我們建立了地圖評測模型，從美觀度、識別度、讀圖效率等多維度進行評測，量化地圖設計品質。
通過對自駕導航首頁地圖的兩輪調研，我們回收了大量有效結論，如用戶對道路等級的關注程度、如何使用AOI信息等等。新版地圖在美觀度、識別度等方面均得到了用戶的認可。
了解用戶的聲音，能更好的幫助我們深耕地圖設計領域、全力推動地圖體驗優化。
Part 5. 未來形態暢想
當前科技發展迅速，近些年出現的HUD、AR等導航，用現實世界的畫面代替了地圖，不需要轉換思維、記憶地圖語言，讓人與世界的連接更輕松便捷。我們不妨順著這個趨勢大膽的暢想一番，在未來的某天，世界的數據會植入我們腦中，不再有陌生的地方，現有的地圖形態也許會消失，因為它就在我們腳下。
文章來源：站酷 作者：CDX創意設計中心
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
目前基于用戶畫像的標簽體系在各行各業開始得到應用，對于涉及范圍廣，專業知識深的互聯網招聘領域來說，建立標簽體系的難點是什么呢？應該如何建立標簽體系？怎么驗證標簽體系的準確性？文章對這三個問題展開了分析探討，與大家分享。
電商行業客觀來說屬于比較簡單的toC領域，知識網絡是比較容易理解的通用知識，可通過用戶的購買習慣、偏好、商品品類等建立標簽體系。醫療行業屬于專業性強的領域，建立標簽體系必須要懂醫療技術的專家團隊才可以，但是易于操作的是，只需要醫療一個領域專家就可以完成專業的標簽體系建設。
但對于招聘行業來說，行業、職位涉及范圍廣，且專業性強，因為各行各業的公司和求職者都會通過招聘平臺建立聯系，而且有很多高精專的職位和候選人，怎么評估B/C端之間專業技能、工種、行業之間的匹配度，確是一大難點，而且理論上來說需要集齊各個行業、各種職位的專家人員才能建立起招聘行業的標簽體系，但這在現實中要怎么操作呢？
那么機器是否可以自動完成招聘領域的標簽體系建設呢？用NLP抽取職位JD中的描述并將其聚類，比如抽取Java、spring、Unix、Visio、Excel等工具技能，原型設計、交互設計、需求分析等工作內容技能，用戶運營、產品運營、數據運營等工作方向技能，這是互聯網從業者最熟悉的開發、產品、運營的工作內容和技能，如果機器可以識別這些類別標簽就很完美了。
但現實卻是看似的完美與和諧，萬一Java是出現在了招聘專員的職位描述中呢？用戶寫的是“負責招聘Java工程師”，假如Visio出現在Java工程師的描述中呢？假如Excel出現在運營專員的職位描述中呢？這些技能還是不是這個崗位的核心能力？
首先，Java出現在招聘專員出其實是可以用硬規則過濾掉的，比如限制職位和技能的關系，也就是說不是所有技能都滿足所有職位，有的技能只適用于某些職位，在其他職位內就是無效信息。
其次，需求分析是不是產品經理的技能標簽呢？有的人說肯定是了，這個回答可以說對也可以說不對，對是因為需求分析確實是產品的必備能力和工作內容，不對是因為所有的產品經理都需要需求分析，那這個能力還是該產品經理區別于其他產品經理的能力嗎？
最后Excel會出現在運營專員內、也會出現在招聘專員內，也會出現在統計專員內，那么它還是個核心的技能標簽嗎？
通過以上分析可得到以下歸納性的總結：
所以通過以上分析可知，純NLP機器識別的方式不能完成招聘領域的標簽體系建設，因為機器沒辦法在一個崗位的眾多技能中篩選出哪些是重要的知識技能，哪些是不重要的知識技能。
招聘領域的標簽大家首先可以想到的就是學歷、工作年限、薪資范圍等比較通用的職位/簡歷端匹配維度，當然這些顯性通用的標簽早已被各招聘平臺做成了結構化的篩選項。
其次還有一些比較小眾的維度要求，比如有的職位要求海外經歷、黨員、國企工作經歷、籍貫、年齡等，有些平臺也把其中的某些維度做成了平臺上的結構化標簽。
不過這些不是我們研究的重點，我們主要研究的是每個職位專業的知識方向的技能。
建立專業知識標簽體系的重點就是建立專業的崗位研究專家團隊，想要做某個崗位的專業知識標簽研究，肯定需要熟悉該崗位的人員，是選擇從事該崗位工作的人員呢，還是對這類崗位有所了解的HR人員呢？
因此就這兩類人員進行了調研與分析，最終發現從事該崗位的人雖然對所從事的崗位了解比較深入，但對其他相關的崗位未必了解，也不太了解招聘過程中用戶的感知與思維；
HR人員雖然在專業深度上對崗位的了解不是很深入，但所了解的崗位范圍廣，只要從事過某個行業的HR工作，基本都熟悉該行業所有的崗位與關注的重點技能，且HR經常使用招聘平臺，有用戶感知，對用戶行為與邏輯都非常了解，所以HR更適合做崗位專業知識研究，而且該專家團隊最好是來自各個不同行業的HR人員。
團隊建好了，大概的研究思路也有了，接下來就可以好好研究標簽體系具體的生產流程與規則了，對此進行了如下圖的總結：
體系建立的目的肯定是運用在算法的推薦與搜索中，初期可以通過離線的漏斗數據轉化對比（命中標簽與未命中標簽的轉化對比）來驗證該標簽體系的離線匹配效果，再者可通過灰度實驗，小流量上線實驗來驗證實際線上的匹配效果。
專業知識標簽關注的只是匹配度的準，最終線上使用肯定還要考慮用戶是否活躍，B端HR是否著急要人，C端求職者是否在找工作，如何平衡專業知識的準與用戶行為的活之間的權重也一大難點，要找到那個準與活平衡的比例區間，在這個區間內線上能實現最大的用戶達成，這方面在此不多做分析，需要算法同學多次調整模型才能達成。
基于用戶行為的用戶畫像標簽體系在電商領域中運用廣泛，在招聘領域此類標簽體系同樣適用，只不過電商領域中的“查看-聯系賣家-購買”行為在招聘領域變成了“查看-開聊-達成約面”行為。
電商平臺中的協同過濾理論在招聘平臺也同樣適用，只是變成了基于相似職位的過濾和基于相似候選人的過濾。有的企業以往達成的多數是名校候選人，那么我們就知道該企業偏好有名校教育經歷的；有的企業招聘銷售崗更傾向于在專業知識體系中的有軟件銷售經驗的候選人，那么我們就知道該企業偏好軟件行業的銷售候選人。
通過用戶畫像體系我們可以評估用戶的偏好，以期在該用戶以后的推薦中使用其偏好，達到更好的效果。
靜態通用標簽是所有職類共用的標簽特征，屬于大批量標準化的生產與運營，通用標簽生產完善了，可以實現粗礦式大步快跑節奏的匹配達成；
而專業知識標簽是每類職位專業的標簽特征，是小批量精細化的生產與運營，在前面大步快跑達到一定匹配度之后，再結合精細化的小步快跑方式，逐步將每個職類的顆粒度劃分為更精細化的顆粒度，達到更高匹配程度；
在前面標準化、精細化兩輪分類之后數據已經被分成了一個個小類，但卻沒有衡量單個用戶偏好的特征標簽，而動態的用戶行為標簽就是單個用戶個性化的偏好特征標簽，用戶的偏好有可能是通用的學歷、年限特征，也可能是專業知識中某個技術框架、某種產品品類特征。
最終，靜態標準化通用標簽、專業知識精細化標簽、動態行為個性化偏好標簽，三者相互作用、相輔相成，提升招聘領域線上效果的匹配準確度。
文章來源：人人都是產品經理 作者：艷杰
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在如今大數據的時代，一些軟件會根據我們的地理位置、性別、喜好等等進行算法推薦；能夠對一定規范的輸入，在有限時間內獲得所要求的輸出；比如TikTok，以用戶為中心進行推薦，度很高；本文作者分析了TikTok 的真正優勢，我們一起來看一下。
字節跳動往往被說成是一家算法公司，很多人認為， TikTok是靠算法的黑科技才取得成功的。
事實真的是這樣嗎？
eugenewei認為不是：TikTok的算法跟其他公司使用的并沒有太大的不同；TikTok最大的優勢是它采取了對算法友好的設計模式，在自己內部建立了一個飛輪，幫助其機器學習算法看到了優化自己所需要看到的東西。
原文發表在其個人博客上，標題是：Seeing Like an Algorithm；篇幅關系，我們分兩部分刊出，此為上半部分。
劃重點：
在我上一篇關于TikTok的文章中，我討論了為什么它的For You Page算法是讓TikTok發揮作用的結締組織；它就是主板的總線，用來連接和關閉所有的反饋回路。
但是，在急于了解為什么各家公司都想收購TikTok的情況下，如果字節跳動把這款熱門的短視頻app拆分出來的話，圍繞著它的算法的炒作已經有點被異化成那種往往被歸納為最近西方對中國科技分析的套路了。
在這篇文章中，我想討論一下TikTok的設計究竟是如何幫助它的算法表現得跟它一樣好的。
上次我討論了為什么FYP（For You Page）算法是TikTok飛輪的核心，但是如果這一算法不夠有效的話，那整個反饋回路就會崩潰；哪怕你對TikTok或短視頻領域不感興趣，了解一下這個算法是如何實現性也很重要，因為各行各業的公司都日益面臨著核心優勢是機器學習算法的競爭對手的競爭。
我想討論的是TikTok的設計是如何幫助它的算法“看”東西的。
James C. Scott的《國家的視角》（Seeing Like a State）是那種很獨特的書，看過之后你會意識到硅谷就有那種使用（濫用）清晰性這個術語的類型。
我是在看到Venkatesh Rao的書摘之后第一次聽說這本書的，如果你不打算看原著的話，那篇書摘仍然是很好的tldr入門讀物（Scott Alexander的書評也不錯，只不過他的書評也已經長到可以做自己的tldr ）；不過，我建議你還是要好好看看原著。
Scott那本書的副標題是“那些試圖改善人類狀況的項目是如何失敗的”。
這本書可以提高你對日常生活當中的各種意外后果的意識，當我們也有著偉人一般的傲慢時，不妨保持更謙卑的態度；這個世界比我們想象的要更豐富、更復雜。
比方說，Scott的討論有很多都跟我們的現代社交網絡巨頭的某種傲慢感有關；這些占主導地位的應用的目的就是要提高自身用戶群的清晰性，其中包括促進互動、防止用戶流失并最終提供定向廣告；反過來，這又導致他們的母公司陷入到錯綜復雜的問題之中，至今都未能擺脫困境。
不過這是需要另行討論的話題了；Scott關注的是民族國家如何用簡化的抽象在概要的層面 “看清”自己的公民，而我想討論的是TikTok的app設計是如何讓它的算法“看到”有效地執行匹配工作所需的所有細節的——這篇文章討論的則是是應用和服務在設計時最大限度利用機器學習新模式。（我知道，這種討論有點諷刺意味，因為這種“看法”有可能被塑造為另一種決定用戶看法的看法，一種美國的科技公司只能作壁上觀的看法。）
近年來，至少在像我這樣的門外漢看來，我們意識到，只需要通過把訓練的數據量增加幾個數量級，機器學習就可以取得很大程度的進步；也就是說，就算算法本身跟幾年前沒有太大的不同，僅通過在更大的數據集上對其進行訓練，人工智能研究人員就能取得像GPT-3這樣的突破（GPT-3暫時給科技Twitter們帶來了高潮） 。
當大家說TikTok的算法是取得成功的關鍵時，很多人會把某些神奇的代碼段看作是公該司的秘密武器。
俄羅斯當代后現代主義作家Viktor Pelevin說，所有的現代電影都是同一個主角：一個裝滿錢的公文包；從《死吻》的放射性物質公文包，到《低俗小說》里面的那個類似的里面金光閃閃的、不知道裝著什么的公文包；從《魔頭對捕頭》（The Formula）的創世紀方程，到大衛·馬梅特（David Mamet）的《西班牙囚犯》（The Spanish Prisoner）里面的秘密的金融處理，我們長期以來一直對有魔力的麥格芬（McGuffin，推動情節發展的對象或事件）感到癡迷。
最近幾周，對TikTok算法的討論已經把它提升成了類似的東西，這個算法就好像是《奪寶奇兵》系列電影（如《法柜奇兵》、《圣戰奇兵》…）里面那些神秘的考古文物一樣。
但是這個領域大多數的專家的態度不會是這樣，他們不相信TikTok在機器學習推薦算法方面取得了迄今為止我們所不知道的進步；實際上，大多數人會說，TikTok的做法大概跟別人的解決問題方法無異。
但是要記住的是，機器學習算法的有效性不僅僅取決于算法，還要取決于利用某些數據集訓練過后的算法；GPT-3也許并沒有什么新鮮，但是通過接受大規模的數據訓練，以及設置大量的參數，其輸出往往令人驚訝。
同樣地，基于自身數據集訓練過的TikTok FYP算法，在將視頻與認為該視頻有趣的人進行匹配方面非常準確有效（而且，同樣重要的是，在不向那些不認為視頻有趣的人推送方面也很有效） 。
有些領域，比方說文本，可以輕松獲得大量訓練得很好的數據；比方說，要想訓練出像GPT-3這樣的AI模型，你可以到互聯網、書籍等上面找到大量可用的文本集；如果你想訓練視覺AI，可以在網上和各種數據庫里面找到大量照片；訓練仍然很費錢，但是至少你手頭有足夠的訓練數據。
但對于TikTok （或者抖音）來說，它那擅長推薦短視頻給受眾的算法可就沒有公開可用的這么大規模的訓練數據集了。
去哪里可以找到模因、小孩跳舞、對口型、可愛的寵物、推銷品牌的網紅、士兵越障訓練、小孩模仿品牌等內容的短視頻呢？就算你有這樣的視頻，又該去哪里找到關于大眾對此類視頻感受的可比數據呢？除了Musical.ly的數據集以外（主要是美國喜歡玩對口型的青少年），這樣的數據并不存在。
這是一個獨特的雞生蛋還是蛋生雞的問題，如果沒有這款app的的攝像頭工具和濾鏡，以及拿到版權的音樂剪輯的話，TikTok的算法需要訓練的那種視頻就很難創建。
那么，這就是TikTok設計的魔力所在：app會激發和促進視頻的創作與瀏覽，算法然后用這些視頻進行訓練，再反過來激發和促進視頻的創作與瀏覽，形成反饋回環。
為了讓自己的算法發揮最大的效用，TikTok成為了自己的訓練數據源。
要了解TikTok是如何做出這么強大的學習飛輪，我們需要對它的設計進行深入研究。
關于科技的UI設計，主導的思想流派（至少是我成長的過去二十年里）關注的重點是消除用戶所做事情的摩擦，并讓他們在此過程中感到愉悅；其設計目標是優雅，什么是優雅：優雅就是直觀、巧妙，甚至時尚。
也許沒有一家公司比蘋果把這種設計風格體現得更加淋漓盡致，巔峰狀態下的蘋果總能把自己的軟硬件做出優雅的感覺——“就是這么好用（it just works）”，但同時又很迷人，讓用戶覺得很雅致。
（蘋果控制風格的名聲就沒那么光彩了——手機、筆記本電腦不可替換的電池，目前有關應用商店規則的爭論）在發布新品的主旨演講時，展示一塊硬邦邦的鋁塊是如何變成嶄新的MacBook Pro機身的視頻的理由是什么？
因為聽到工業激光把那塊鋁雕刻成一體化機身時發生的聲音很性感？然后，當你在咖啡店用那臺筆記本電腦敲擊一封電子郵件時，在你的潛意識里，有關那段視頻的一點殘留的記憶里面會不會讓你的多巴胺受到一點點的觸動？
這種以用戶為中心的設計模式在這么長時間以來一直占據著主導地位是有原因的，尤其是在消費類技術里面。
首先，這的確有用——蘋果的市值最終超過了2萬億美元（還記得假冒的Sean Parker說過十億美元很酷嗎？那還是十年前，現在十億美元不再是金牛了，財富的量級在飛速發展。）
此外，我們生活在大規模網絡效應時代，應用了Ben Thompson的聚合理論并獲得大量用戶群的科技巨頭，可以在他們所參與的市場當中發揮出不可思議的杠桿作用——要先做到這一點，最佳的辦法之一就是設計出能比競爭對手更好地滿足用戶需求的產品和服務。
長期以來，這種設計流派一直占據著主導地位，以至于我幾乎忘記了過去時代慣常采用過的一些蠻不講理的軟件設計了。（不要把它跟野獸派設計混為一談，后者其實就像它在建筑方面的表親一樣，在設計上是相當美的。）
但是，如果要想最大限度地服務好用戶的關鍵要取決于對機器學習算法的訓練呢？如果這個ML算法需要龐大的訓練數據集該怎么辦？在機器學習方興未艾的時代，這日益成為關鍵的設計目標。
在考慮如何設計app時，你日益必須考慮怎么才能最好地幫助算法去“看”——為了最大限度地服務好用戶，請先服務好你的算法。
TikTok讓我著迷，因為不管是意外還是有意而為之，這都是一個為了盡可能多地給自己的算法提供有用信號的現代app的典范——這就是我所謂的算法友好型設計的范本。（我曾經想過把它叫做以算法為中心的設計，但覺得這種說法有點過頭了；一個幫助算法看見東西的設計到頭來仍然是為了給用戶提供盡可能好的體驗。）
我們仍然可以認為這只是以用戶為中心的設計的一種變體，但是對于那些大量采用機器學習算法組件進行產品開發的團隊來說，明確地承認這一點也許有用；畢竟，當產品經理，設計師和工程師開會討論app設計時，算法是不會出席的；但是，對算法的訓練需求必須得到體現。
James Scott在談到《國家的視角》，談到了城市設計等領域的巨大變化，比如讓土地面積和業主數量對征稅者“清晰可見”；TikTok的設計使得它的視頻、用戶和用戶首選項對For You Page算法清晰可見；這種app設計履行了它的主要職責之一：“像算法一樣看東西”。
我們不妨仔細看看，TikTok打開后就是“For You Page”頁面，然后直接進入視頻。這就是它的樣子。
這個是到目前為止有史以來最熱門的TikTok視頻，截止到我發布這篇文章時，它的34.1M個點贊可能已經不止了；你可以看看有關這條TikTok是如何誕生的故事，看過之后你仍然會覺得這是一個充滿悖論的文化難題，但是你看過后會喜歡的。
我把這個給我侄女看了，然后我們一起循環播放了好幾十次，然后我們一起開始大喊“從M到B，從M到B”，然后一起笑了起來，這是我在這場疫情當中真正的感受不是絕望的少數幾次之一。
整個屏幕被一個視頻填滿。只有一個視頻，視頻用豎屏全屏顯示；注意，這是不能滾動的，而是分頁。視頻幾乎是立即自動播放（接下來的幾個視頻被加載到后臺，所以輪到的時候可以很快播放出來）。
這種設計讓用戶要面對一個緊迫的問題：你對這個短視頻的感覺如何？就這個短視頻。
從視頻開始播放到現在，你所做的一切都是你對該視頻的感受的信號；你是不是在它還沒播放完就滑向了下一個視頻？是的話就隱含（盡管邊界是顯性的）表示你對它不感興趣。
你是不是看了不止一次，讓它循環播放了好幾次？似乎不知怎的它就吸引了你。你有沒有通過內置的分享面板分享了這段視頻？這是正面情緒的另一個有力指標。
如果你點擊右下角旋轉的LP圖標，看了更多有著同樣背景音樂的視頻的話，就是該視頻對你胃口的進一步信號；音樂線索往往是模因的代名詞，現在TikTok又有了一條為你推薦視頻的軸線了。
還有，你是不是跑去看了看視頻創作者的個人資料頁面？你是不是看過她其他的視頻，然后還關注了對方？是的話說明你除了欣賞視頻以外，也許你還特別欣賞對方這個人。
但是，我們不妨再退后一步，看看這你還沒有看到這個視頻之前，TikTok的算法自己是怎么“看見”這個視頻的；在這個視頻通過FYP算法發送到你的手機之前，TikTok的運營團隊有人已經看了這個視頻，并添加了大量相關標簽或標記。
這個視頻是跟跳舞有關的嗎？是對口型？還是視頻游戲？有小貓嗎？還是花栗鼠？是搞笑的嗎？主體是男的還是女的？大概幾歲？是群視頻嗎？背景在哪里？用的是什么濾鏡或視覺效果？如果里面包括有食物，是什么食物？等等，所有這些標簽都成為了算法現在可以看到的功能。
視頻還要在視覺AI這里處理一下，并為自己能看到的東西做出貢獻；TikTok有些攝像頭濾鏡能夠跟蹤人臉、手或者手勢，所以視覺AI往往在視頻被創建出來之前就被調用過了。
這個算法還可以看到TikTok所了解到的有關你的信息，你過去喜歡什么類型的視頻？有關你的人口統計學信息或心理學信息有哪些？你是在哪里看這個視頻的？你用的是什么類型的設備？等等，除此之外，還有哪些其他用戶跟你相似？
一、《國家的視角》 Vs 算法的視角
二、TikTok把自己變成算法的訓練源
三、以用戶中心 Vs 對算法友好
文章來源：人人都是產品經理 作者：紙盒小卡車
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
新的十年，新技術也悄然到來。人工智能潤物無聲，5G 應用也漸漸嶄露頭角。新時代帶來了新的技術，新的場景，新的用戶。用戶體驗從未像今天如此豐富多彩又復雜細致，給設計師帶來了全新的機遇與挑戰。
而在疫情的大背景下，對演出行業而言，需要加速傳統演出產業的線上化變革適應疫情背景的同時，也要利用新技術嘗試增強線下的演出觀演體驗。這對演出形式的發展提出了更高的要求。
貓眼演出設計團隊搜集近年來優秀的用戶體驗案例，并嘗試預測未來一段時間用戶體驗發展的趨勢與方向。希望對大家有所啟發。
相較于演唱會、音樂節等演出，展覽內容向線上遷移的成本較低。2020 年的畢業展覽，各大高校采用了不同形式的線上展覽，為青春畫上圓滿句號。
央美的線上畢業展中，幾乎 1:1 還原了學校展廳原貌，觀眾可以在展廳內走動來觀察展品。讓觀眾身臨其境感受藝術氛圍。
清華美院的展覽中采用視差風格，用戶可以將手機橫向滑動，感受內容在指尖流動。是更適合移動端瀏覽內容的形式。
說起類似「傳統直播」的線上演唱會嘗試，缺少演出者與觀眾的互動成為較大的遺憾。在釘釘 Live 與 Beyond 中，觀演者可以通過攝像頭參與到演出的背景中，并與演出者同屏互動，帶來打破空間阻隔的互動試聽體驗。
熒光棒當然是演唱會不可缺少的一環。而能夠與演出互動的熒光棒則能夠大大提升參與感。
Beyond Live 推出的互動應援棒，可以跟隨演出實時互動，大大增強了演出的臨場感。
對演出行業而言，疫情的到來是不小的打擊。但也激勵著從業者往新的方向去探索，尋找為觀眾呈現演出的新形式。
人工智能的發展到今天，逐步開始為產品體驗添磚加瓦。我們越來越能感受到產品更懂用戶了，在合適的時機做正確的事情。而其中讓產品更懂我們的，正是 AI 為產品添加的感官。
無論是視覺還是聽覺，AI 賦予產品更細致的觀察，從而創造更加人性化的體驗。
語音類產品可以進行連續對話，并根據上下文進行整體語境的理解。不僅讓日常生活更加便利，同時也照顧到聽障人士，在打電話這件事情上實現了「文字 - 語音跨感官」的交流。
Google Assistant 可以根據用戶的要求，打電話與商戶老板預約訂餐。
在小愛同學的幫助下，現在可以用打字聊天的方式接聽電話。不僅讓不方便接電話的場景得到解脫，也解決了聽障人士打電話的難題。
借助 AI 對周圍環境的分析，可以感知到更細致的用戶場景。華為 Mate 30 Pro 借助 AI 判斷人臉與設備之間的角度，來決定屏幕內容是否需要旋轉。相比較陀螺儀對重力的感知，這樣的方式可以更準確判斷使用場景。
在呈現復雜內容時，AI 智能判斷畫面主體，從而優化給用戶呈現的畫面。
在 Bilibili 實現的防擋彈幕利用 AI 去分析視頻中的人物、動物等「畫面主體」，給彈幕添加遮罩層。從而實現畫面主體與彈幕的和諧共存。
當機器可以看懂人的手勢，我們就可以隔空來發號施令了。
在 DJay Pro AI 中，一臺 iPad 放在桌面上，DJ 就可以隔空打碟。在難以觸控屏幕的場景中，手勢也有著其不可忽略的痛點。
在 Mate 30 系列中，用戶也可以通過手勢來進行截圖、上下翻動等常用操作。
AI 賦予了產品感官，對現實有了更深入的理解。同時也使得 AR 的內容不僅局限于「好看」的展示，而能更好地與周圍環境結合起來。
Google Lens 可以根據定位和識別內容判斷用戶所在餐館，并在菜單中標注推薦的菜肴。
Rekugaki AR 可以識別畫面中的卡通形象，并創建一個紙片人與用戶互動。
更新 iOS 14 之后，AirPods Pro 擁有了「空間音頻」。結合播放設備與耳機的位置，通過陀螺儀等設備共同模擬一個虛擬聲場，讓用戶有身臨其境的空間音頻感受。增強了 AR 在音頻領域的體現。
在 2020 年，內容為王的時代，UI 所扮演的角色也漸漸變化。從過去，想盡辦法吸引用戶的點擊和關注，到如今，會更多思考如何包裝和凸顯內容。
或許潤物無形，讓用戶覺得理所當然的沉浸感，才是 UI 最好的歸宿。
相比較 UI 設計早期對于彈窗的頻繁使用，近些年在產品設計中越來越克制對于用戶的打擾。從而讓用戶盡可能沉浸在當前的體驗流程中。
在 iOS 14 中，如果用戶正在使用手機，來電則以通知的形式呈現，在玩游戲的場景可能尤為有用。Siri 也不再占據全屏幕的內容，而是以底部的小圓球出現。這樣假如我們把手機呈現的內容視為沉浸的世界，Siri 更像是一個身邊的小助手，而不是專門要跑一趟的柜臺了。
在很多專注內容的產品中，會更注重沉浸式的設計。減少線框和切割，弱化 UI 和導航元素，在全局視野里都填充內容。
Apple Music 的歌詞界面中，隨著歌聲響起，歌詞也隨之滾動。與此同時，背景也呈現極光的流動感。使人沉浸在優美的歌曲中。
在很多專注于呈現內容的網站中，則更多采用了扁平化、去分割化的設計。讓用戶更專注于內容本身。Dribbble 的改版中，將導航欄改為白色，背景也變為純白。讓用戶不去思考功能模塊，而專注于內容本身。
近幾年隨著屏幕技術的不斷更新，逐步在硬件上呈現出穩定的產品形態。相較于傳統的屏幕，手機屏幕的更新出現以下的關鍵詞：
而這些新的硬件形態也對 UI 設計提出了新的要求。我們可以看到針對于這些硬件特性，UI 設計也有了新的變化：
相較于傳統的直角屏幕，全面屏為了貼合手機的硬件形態。呈現一個圓角矩形的視野。在 UI 設計中，呈現大圓角風格的卡片設計，能更好貼合這樣的屏幕，實現軟硬件合一的觀感。
如今主流的手機屏幕已經到了 6 寸，于是這對單手操作帶來了很大的挑戰。各大廠商在不斷優化交互細節的同時，也有廠商帶來了新的思路。
在三星推出的 One UI 中，將上半屏主要用于內容展示，而下半屏幕放置操作內容。在高德地圖上我們也看到了類似的思路。
OLED 屏幕可以顯示非常純凈的黑色，而深色模式可以很好利用這一點。深色模式可以突出內容，也可以因為大部分區域不發光更省電。而用戶過去很多年都看慣了白色的背景，突然“眼前一黑”也許眼前一亮。
有了更大的屏幕，就要做更多的事情。越來越多的廠商支持系統級浮窗。甚至在 Galaxy Fold 2 中，可以同時顯示 4 個分屏，還能再添加浮窗。
新出現的折疊屏形態，則要求產品在布局上更加靈活，在大屏幕上呈現更多內容。在華為 Mate Xs 的「平行視界」功能中，用戶可以在左右分屏中展現前后兩級頁面，購物比價更方便。利用折疊屏的特性，實現了 1 + 1 > 2 的效果。
信息時代，數碼世界已經承載了我們太多的回憶與財富。頻繁的身份驗證保證了我們的財產與隱私安全，但也帶來了諸多的不便。忘掉的密碼，濕掉的指紋，忍不住讓人大喊「我就是我啊，你怎么不明白」。如何讓身份驗證變得快速且無感，讓生活變得方便且簡單。
在演出行業中，特別是需要快速準確驗證身份的檢票場景中，使用 AI + 人臉識別技術也大大提升了檢票效率。
人臉總是最好的密碼。不論是 Face ID 還是刷臉支付，快速、低錯誤率的特性，總是讓人印象深刻。
Amazon 推出的無感支付超市 Amazon GO，用戶不需要進行任何形式的身份驗證，拿了商品，走出超市，購物就完成了。
iOS 14 中，你可以用手機來解鎖車輛，甚至可以通過信息，將車鑰匙分享給他人并設置可用時間。
如今每個人都擁有更多的智能設備，如果設備只能獨立使用，顯然不能發揮最大的價值。好在如今設備之間的連接更快更強大，最終組成快速無縫的優質體驗。
超寬帶（Ultra Wide Band，UWB）技術是一種無線載波通信技術，能賦予設備空間感知的能力。當設備之間了解了彼此的方位，能在很多場景尤其是家居場景中提供便利。
iPhone 11 搭載的 U1 芯片賦予設備之間的空間感知能力。用戶可以將手機對準想要分享的設備，在界面中就會優先展示。
小米發布的「一指連」技術，用戶可以將手機對準想要控制的智能設備，在手機中就會自動彈出對應的控制面板。
iOS 14 更新后，用戶無需對 AirPods 進行斷開或重新連接的操作。耳機會在用戶在新設備播放聲音時，自動連接到新設備。對于設備感知的弱化，就是對體驗感知的提升。
在 macOS 10.15 后，用戶可以將 iPad 作為拓展屏幕使用。并且無線、低延遲、高畫質。甚至可以利用 Apple Pencil 在 Mac 的 Photoshop 中進行繪畫，作為 Mac 生產力內容的補充。
使用華為手機與 MateBook 時，用手機輕觸觸摸板即可實現無線投屏。并且在電腦端可以打開手機文件進行編輯、保存，同時支持手機、電腦文件之間的拖拽操作。實現了手機與電腦的快速無縫協同。
數字世界如今已經承載著很多人的第二生活，而隱私的權利也在信息時代有了更廣的延伸。在產品利用我們的個人信息創造便利的同時，也帶來了很多隱私泄露的隱患。越來越多的人開始期待，能夠享受大數據帶來的便利，而不必擔心自己的信息被用在不正當的途徑。
iOS 14 之后的 App Store 中，用戶可以看到應用所請求的數據權限。在應用訪問剪貼板時，也會在頂部彈出提示。
安卓生態中的反復喚醒是困擾用戶的一大問題。MIUI 12 中可以查看應用之間的喚醒、定位、使用媒體的記錄，誰是流氓軟件一目了然。
MIUI 12 中可以開啟虛擬身份或使用空白通行證進行應用授權，這樣既可以使用對身份有要求的 APP，也可以避免隱私的泄露。
iOS 相冊權限細分為「全部照片」「部分照片」「不允許訪問照片」，這樣當用戶僅希望分享幾張照片時，不需要讓應用可以訪問所有照片了。
iOS 14 之后，用戶可以關閉「允許 App 請求跟蹤」開關，以此減少 App 對個人信息的獲取。
2020 年，90 后三十而立，將要面對更多的挑戰，承擔著更多的精神與情感壓力。
00 后也跨入了 20 歲的年紀，這些 Z 時代的年輕人成為了網絡主流。他們追求個性，情緒上更加敏感，表達情感的欲望也更加強烈。
面對著 996、內卷與房價，似乎大多數人都在感受著不同程度的壓力。
在網易云這樣一個主打聽歌評論的社區中，出現了大量帶有「抑郁情緒」的評論。網易云也被大家戲稱為「網抑云」。在發現相關情況后，網易云推出了「關懷計劃」，在 App 中接入專業心理咨詢的同時，也設計了一些治愈的小功能，幫助大家紓解情緒。在評論中用雙指捏合，可以給評論者一個抱抱。在疫情背景的今天，或許是難得的安慰。
年輕人的個性化需求和表達欲望總是更強烈，在產品中滿足年輕人的想法，就能抓住年輕人的心。
在騰訊漫畫 App 中，切換性別會讓首頁呈現完全不同的內容推薦。
在 QQ 里，連續 7 天和同一個人聊天可以有一個小火苗，30 天則可以變成大火苗。而針對新朋友和聊得最多的朋友還有四葉草和小船等標識。這些個性化、游戲化的展示，滿足了年輕人的展示欲望，和對趣味的追求。
2020 年，疫情讓很多人分隔兩地，很多親密關系很難在線上維系。于是很多產品推出了「一起」功能，在線上可以一起聽歌看電影，滿足疫情時代，人們的社交需求。
在網易云中，可以分享歌曲給朋友一起聽歌。雙方都可以控制歌曲的切換與暫停，還能通過麥克風與對方聊天說話。
在 QQ 中可以選擇「一起看」，分享給好友之后可以同進度觀看視頻，還能在下方聊天互動發送表情等。
在本文寫完的 2020 年 10 月，我們能看見對疫情的控制程度在全社會的努力下漸漸往好的方向發展，線下的演出在漸漸復蘇，行業對線上演出展覽的探索也初見成效。
黃明昊 Just 18 Teen 新歌首唱會剛剛結束，貓眼演出 · 超級現場所實現的線上演出直播 + 線下影院觀演，與偶像同屏的互動方式得到了粉絲的一致好評。
我們也即將迎來英雄聯盟世界賽這樣首個大型線下演出項目。相信 AI 人臉識別的技術在閘機入場的應用，能為召喚師們帶來更好的觀賽體驗。
用戶體驗在 2020 年的發展，已經不局限于新技術的應用，也更考驗用戶體驗設計師對于場景的細致洞察，對于用戶情感的細微把控。
文章來源：站酷 作者：貓眼演出設計Team
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近國外的設計平臺頻繁出現一類內容，大概類似于「產品設計中的倫理道德與用戶體驗」，里面的內容有引起我的一些思考。
我先給大家舉個例子，來解釋一下上面這句話的意思。
以前，我們聊界面的設計，說界面當中如果有兩個按鈕，就要引導用戶走向主要操作，弱化次要的。類似于下圖：
這時候一定會有一些設計師告訴你說，這類界面，要以左邊這種形式去設計，因為無論從視覺角度、優先級角度還是企業利益角度來說，左邊這種都更符合用戶操作的邏輯。
或者，如 PayPal 上底部的「移除卡」功能，故意在層級上做的很弱，顏色的處理讓按鈕看起來甚至是不可點擊的。
雖然「移除」對于產品來說是一個危險操作，產品不希望用戶進行這一操作。但是對于用戶來說，當他們想要這個功能的時候，說明意愿強烈，這時候這種設計會讓用戶產生糟糕的體驗。
于是就有人提出說：
為什么，用戶登錄注冊就這么簡單，但是有些用戶想要注銷賬號卻如此麻煩？難道對于這些想要注銷賬號的用戶來說，用戶體驗就不重要了么？
其實，我覺得這個問題，可以從兩個角度來說明，分別是「目的」和「義務」。
作為產品團隊的一員，我們的價值在于給公司創造利益，想方設法得到用戶的支持與廣告商的青睞。所以我們設計的產品都會有特定的目的。
比如，引導用戶去購買產品或平臺中的商品，以讓企業能夠存活，持續運營下去。
但這并不是說，企業把一些對用戶無用的商品賣給了用戶，用戶買的這份商品，對他們來說一定是有價值的。產品并不是在欺騙用戶購買無意義商品。
比如平臺支付了音樂或視頻的巨額版權費，方便用戶在線上收聽與觀看，那么用戶為這些內容付費是否應當？
企業做這些事，從用戶與廣告商身上獲取利益，本質就是為了賺錢，這一點無可厚非。
所以在產品界面的設計中，如文章開頭的示例，采用左圖的形式，突出辦理會員的按鈕，引導用戶付費成為會員，似乎也沒什么問題。
它不過是利用了「信息優先級」的概念。我們需要幫助用戶去理解界面上所呈現的信息，目的是為了讓用戶更好的操作。如果所有信息的權重是一樣的，反而會影響用戶的使用，甚至造成體驗障礙。
而逆向的，比如不辦理、跳過類似的出口也有給到用戶，雖然從視覺上相對弱化了，但絕不應該阻礙用戶去點擊。
從這點來說，上圖示例的問題不是在弱化了按鈕的視覺效果上，而是按鈕太小，可能會導致用戶誤觸「去辦理」，讓不想辦理的用戶頻繁點錯；或者過分弱化界面上的重要元素，明明在眼皮底下，卻給用戶找不到的錯覺，這才是根本性的問題。
比如一些引導頁，在屏幕上設置了三個類似「跳過」的按鈕，結果只有一個是有效的，產品為了讓用戶點擊廣告給企業創造收益，利用這樣的方式達到目的，這才是所謂倫理道德的缺失。
我再舉個例子。
連續包月，相比普通包月，策略大多都是第一個月有優惠價，以引導用戶辦理連續包月服務。好處是，大多數用戶辦理了連續包月，就會長期使用，它弱化了用戶的決策意識。
除了部分辦理完第一個月就取消服務的用戶，只是為了這個月用，利用這樣的漏洞省點錢，不過這也僅限于第一次辦理了。
那么我們作為設計師，就應該從為公司盈利的角度去設計界面，引導用戶辦理連續包月服務，而不是普通包月，在界面上做出差別。
同樣的，當每個月用戶需要自動扣費時，就應該告訴用戶，過兩天又要一次扣費了，做一個提醒。而不單單是成功辦理后，就再也不通知了，這是不對的，畢竟用戶每個月都在為產品付費，這樣的通知是產品的義務。
如果用戶辦理的是年會員，已經單次就付清年費，那就沒必要反復提醒（也沒什么可提醒的）。
在這個例子中，用戶體驗與倫理道德的界限很清晰，所以我并不覺得它們是相互矛盾的。
我們還可以舉很多例子來說明這個問題。
比如 Windows 系統下卸載軟件頻繁的下一步，甚至還會有錯誤引導的設計。
再比如，在一些產品里關注了某個人，但是有一天想取關的時候，總是找不到取關按鈕?；蛘撸恍┊a品里并不重要的信息，總是閃著紅點引導用戶去點擊等等。
我們常常會去分析按鈕的各種樣式，比如是否有圓角，是否有投影，是否要漸變等等；也會去梳理按鈕與文案的關系，比如按鈕中的文案與邊框的間距，文案的大小要適配載體的比例等等；甚至，還會去分析按鈕的位置，比如取消按鈕應該在左邊還是右邊，取消按鈕與關閉按鈕的區別等等。
但似乎，我們很少會去探討按鈕背后的這些事件，我們都知道按鈕是用戶與某個事物間接的交互控件，但我們從來都只注意于按鈕的外形與按鈕位置所應有的邏輯，而沒有真正去探討按鈕所承載的這些問題。
比如用戶點擊了「會員辦理」的按鈕，會發生什么事情？我們是否應該在下個月用戶扣款之前提醒他們？或者，頻繁的在產品里濫用并不重要紅點提示，會不會影響用戶對于該產品的使用頻率？
這才是我們需要延伸出來思考的事情，而不單單是按鈕或者某個控件本身。我們思考的遠不止目的，還有義務。
所以。
我并不覺得在產品界面上引導用戶執行操作有什么問題，相反，問題在于在引導的同時，不能阻礙用戶進行其他的操作，給予用戶合理的控制權，才是最重要的。
產品設計的目的在于正向邏輯的用戶操作體驗，而產品設計的義務在于給予用戶拒絕的權利。
文章來源：優設 作者：和出此嚴
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
隨著生活品質的提高，我們越來越注重“儀式感”，過年、過節、生日等，我們都想有一些儀式感來慶祝，設計產品也不例外，這些小小的儀式感可以給人帶來好感；本文作者分享了關于儀式感的設計，我們一起來看一下。
在我們日常生活中，存在著各種各樣的儀式感：婚慶、過節，升國旗奏國歌，它可以使我們的生活充滿各種趣味性，是人們表達內心最直接的方式。
而在互聯網產品中，為了使用戶的產品體驗更貼近于真實生活、有情感共鳴，不少產品在儀式感這塊也下不了不少功夫；不管是出于競爭需要，還是日常用戶運營。
所以這次寫下這方面的內容，以便給自己的設計提供更好的切入點和靈感參考，避免毫無頭緒。
先來看看一些大廠的、有意思的儀式感設計：
網易云音樂：收聽特定的歌曲時，會有右上角會有’LTL’入口。
點擊會聯動觸發手機閃光燈，對歌曲賦予濃濃的演唱氛圍（黑夜中效果更絕，親測~）。
愛奇藝：中秋國慶期間，點擊視頻時會有“煙花”效果，讓用戶看視頻也能過節。
QQ音樂：用戶生日時 直接將歌單封面設置成祝福語，一進入應用就能感受到滿滿的祝福。
財付通：實名首次進入后，以“vip客戶卡”的形式歡迎用戶。
看了以上例子，相信你對儀式感的作用也有一定的了解，它可以：
除了以上作（廢）用（話）之外，個人覺得最好的一點，就是可以加強設計師的創意表現，讓設計方案更加有創新點。
看了這么多例子，相信你自己有的判斷；在筆者個人看來，互聯網產品的儀式感設計無非由兩部分組成：特定的場景支持+貼近現實的表現。
舉例說明：微信讀書的電子簽名。
只有在微信讀書里購買書籍后（場景觸發），才會模擬現實生活進行簽名（現實表現）。
任何形式的設計都是需要場景支持的，否則無從談起。
筆者覺得，以下3個切入點足以覆蓋絕大多數場景，幫助挖掘出可設計儀式感的點。
1）時間
一天中某個時間點、時間段，引發該時刻里對用戶的情緒與感知；可應用的時效性較長，可以用于每天中的某個時刻。
舉例：
下班點打卡，釘釘都會對辛勤工作的員工進行暖心慰問，用儀式感來減少工作一天的負面情緒。
之前企業微信的啟動頁，針對深夜時間段會進行員工關懷。
而除了上訴之外，是不是還有更細分的時間維度等著我們去挖掘與設計呢？
像清晨與黃昏、早上/下午/晚上、早茶/下午茶/宵夜/時間點？是不是可以挖掘出更多儀式感場景？
2）日期
可以是各種節日、特定事件日期、天數、季度等等；這種應用的時效性不是很強，只能滿足于特定的日期，一般作為運營事件使用。
如百度搜索“愚人節”時，出現的結果會倒轉過來，愚你一下很開心。
抖音會記錄用戶的使用日期，針對性進行信息提示。
遇到喜慶或沉痛節日時，不也得針對其氛圍進行儀式感設計。
文章開頭的QQ音樂對用戶生日的祝福、愛奇藝國慶期間的煙花點擊效果。
這個不像前面都是產品/系統主動觸發儀式感，而是只有當用戶滿足一定的條件才會觸發。
是一種較為被動的反饋設計。如操作結果、等級階梯。
1）操作結果
當用戶執行對應的任務后，根據任務的狀態、屬性等關鍵詞提煉出合適的儀式感。
愛奇藝在直播預約成功后，針對預約成功以“入場券”的形式設計。
和平精英在吃雞（游戲結束）后，不也有一個舉杯勝利的表現。
文章開頭的微信讀書也是一個例子，在用戶購買完成后觸發。
繼續舉一反三的話，除了操作成功、結束之外，像無法操作、操作失敗、操作中斷等狀態，是不是也可以挖掘出對應的儀式感呢？
2）等級階梯：
當用戶的操作/任務累積到一定的門檻、等級或階梯后，所賦予的一種榮譽、獎勵設計。
鼓勵用戶執行更多的操作/任務，以獲取更珍貴、稀有的目標。最常見的就是各種勛章、會員、積分設計。
這種應該是被運用得最廣的方式，常見于首次進入/對新用戶的歡迎、新功能的介紹、新內容的推薦。
1）首次使用的歡迎：
如有道精品課，首次進入時以“入學通知書”的方式歡迎用戶，打造符合產品調性的儀式感。
再如健康160的歡迎新老用戶回歸。
還有文章開頭的財付通vip卡歡迎動畫。
2）新內容的推薦：
如UC瀏覽器，對首次進入的用戶都會引導選擇感興趣的內容類型，以便推送更符合興趣的資訊信息。
暫時以這些場景舉例說明，其他的你是不是也能舉一反三呢？歡迎底部留言一起討論。
有了相應的場景支持后，具體的儀式感設計才能順利成章。
而儀式感在表現上由2個因素構成：主體與環境。
組成儀式感的核心部分，是傳達感知、引起情緒的重要體現。
而主體的設計，往往模擬現實生活中某事物元素，將其特征點進行圖形化，是最直接的靈感來源。
雖然主體的設計已完成了儀式感的大部分工作，但是鮮花也需要綠葉的襯托呢。
擁有環境的襯托，可以讓主體的整體氛圍更上一層樓，文章開頭的網易云音樂就是一個例子。
還有58同城的勛章設計，有環境光的襯托顯得更加閃亮。
說了這么多，儀式感的設計更多也只是 在基礎內容/功能上做體驗優化，屬于一種“錦上添花”的作用。
應該先滿足基礎內容/功能的“好用易懂”的情況下，再來設計儀式感上的“好看好玩”，不要本末倒置。
???還有，???不同的儀式感存在著不同的用戶心理，因此需要特別注意該場景下的用戶心理或情緒。
文章來源：人人都是產品經理 作者：和出此嚴
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天為大家帶來的文章是「地圖標簽」設計。很多App會內嵌地圖功能，這些地圖的功能相對簡單，更多是起到查看和引導的作用，但在產品中又不可或缺～
除了常見的地圖類App，還有其他很多產品會根據使用需求嵌入地圖功能，通過在地圖頁中添加引導性的交互標簽，讓用戶了解所處的位置或者導航路線。
如何保持地圖頁面與產品風格統一，同時又方便用戶使用呢？通過系統化的方法可以快速實現地圖組件的選擇和歸類。
1. 圖標
地圖上只標記圖標，這種呈現方式能地顯示地圖上的信息，減少內容遮擋，也是在設計中首先要考慮的類型。
2. 文本
如果地圖上標記的內容沒有合適的圖標能展示出來，可以直接利用文本來描述。
3. 圖標和文本
隨著地圖的放大縮小，氣泡信息的詳細程度也會發生變化。地圖放大時將圖標和文本相結合可以顯示更多的信息，而縮小時只顯示圖標。
4. 圖標、文本和注釋
圖標，文本和注釋相結合的形式雖然能顯示更多的信息但是需要謹慎使用，因為氣泡的尺寸太大會遮擋地圖的內容，反而影響使用。
只有當氣泡內容能顯著提升用戶體驗時，才使用這種類型。
大多數場景中，地圖組件的底部會有一個突出的箭頭，用來標記確切的信息或地址。
考慮到后期開發的難度，箭頭的位置應始終位于組件的中間。另外如果一個頁面中有多個地圖組件，可以將箭頭調整到頂部，防止發生重疊。
1. 顏色
組件的顏色比較靈活，默認情況下是白色，但可以通過改變背景色來匹配品牌色。
顏色通常出現在圖標后面用來強調信息，如果沒有圖標可以把整個氣泡組件都填充上顏色。
根據背景色的不同，文本和圖標盡可能使用黑色或白色，減少對內容的干擾。
2. 狀態
地圖氣泡尺寸的大小根據點擊需求確定。白色輪廓加上膠囊形狀讓用戶能夠快速識別出可點擊的對象，選定后氣泡顏色會反轉。
3. 內容縮放
組件基于地圖縮放級別和縮放速度展示不一樣的動畫效果。
如何判斷設計出來的組件是否適合用戶使用？組件需要怎樣設計才能適用于不同的使用場景中，有沒有統一的規范？
1. 組件狀態
面對不同場景中的組件，提供多種狀態：重疊、可見、收縮、聚類、分離。
2. 密度
地圖中至少要保持40%的內容是始終可見的，這樣用戶可以明確位置信息，防止產生誤操作行為。
利用聚類功能將相鄰的氣泡組件合并在一起，通過數字顯示包含的內容，這種形式利于用戶理解和操作。
3. 易讀性
易讀性在地圖中很重要，例如用戶手持使用手機時組件中的字體為15pt，當用戶駕駛導航時組件的字體會變為24pt。
另外還要考慮語言的選擇對組件的影響，最好避免在氣泡組件中使用長串字符，以防止地圖中的信息被遮擋。
如果必須要顯示長串字符，需要把氣泡組件的尺寸水平拉長至地圖尺寸的75%，然后換行且最多只能顯示兩行文本。
在開始設計地圖UI界面之前，有必要花費時間了解地圖組件的樣式、類型和可用性指南。
通過這些信息可以幫助設計師更快地確定方向，從而設計出清晰美觀的地圖界面。
文章來源：優設 作者：Clip設計夾
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
地圖作為記錄地形傳遞路線信息的載體，在人類文明中一直扮演著重要的角色。其承載形式一直緊跟著時代技術的發展而變化，從石板、動物皮革，到絲綢、紙張。當互聯網走進千家萬戶，地圖也步入電子化時代。
相較于紙質地圖，電子地圖優勢顯著：更新速度快、獲取信息效率高、更清晰、可交互等。電子地圖（后文簡稱地圖）的出現也影響著人們的出行方式，尤其當智能手機普及，我們可以隨時查詢地點、發起導航，再也不需要提前記下高速出口和轉向路口了。
滴滴擁有網約車、代駕、騎行、公交、自駕導航等眾多業務，是一站式出行平臺。而地圖作為承載出行服務的重要載體，橫向支撐著各業務線的發展。以網約車業務為例，調研結果顯示絕大部分乘客都會關注并使用地圖。
隨著各業務線對體驗的要求不斷提升，單一的地圖模式已經不能滿足業務訴求及用戶需求，需要進一步細分場景、精細刻畫地圖樣式，于是地圖的設計也變得愈發重要。
地圖承載的信息種類復雜、數量巨大，初期可能會找不到設計切入點。我們可以先了解下它的定義和實現方式，或許就能從中找到答案。
定義：地圖是依據一定的數學法則，采用地圖語言，經過制圖綜合來表示地球表面的圖形。
實現流程：
結合“從雛形到完整地圖”這一步流程的實現方式，進而可將地圖拆分為基礎層、策略層和感官層。幫助各職能角色找到對應切入點。
解構地圖后，我們不難看出，感官層是設計側需要關注的重點層級。
面對如此復雜的地圖信息，為了梳理出清晰的思路，我們會對地圖元素進行分類：根據數據的類別和呈現狀態，可拆分為點、線、面三類元素。
名詞解釋：POI, Point of Information的縮寫，即“信息點”。一個POI可以是一棟房子、一個商鋪。
名詞解釋：AOI, Area of Interest的縮寫，即“信息面”。指的是區域狀的地理實體，如醫院、小區等。
從定義可以看出，地圖是一種特殊的圖形語言，是以上所有元素的集合體。相比我們所了解的UI設計、運營設計，地圖有屬于自己的設計原則。以下為大家總結了一些核心的原則：
符合制圖學和公眾認知
地圖發展到現在已經成為了一門學科，我們會發現即使語言不通，拿到一張地圖時也能看懂，這是因為有制圖學和公眾認知在規范著地圖設計。如地圖默認北向上、草地水系基本遵循物理世界的顏色、省界線是實線、停車場圖標大多用P來代表等等。符合制圖學和公眾認知，大大降低了用戶的學習成本和記憶負擔，使地圖可以作為一種世界通用語言流通起來。
保證識別度
地圖屬于信息類工具，其上出現的元素均需清晰可識別，保證可讀性是最基本的設計原則。所以在設計時會限制顏色對比度、最小字號等，而具體規則會根據場景確定。
清晰有層次
地圖的層次清晰包含了兩個方面：信息主次清晰，視覺具有整體性。
信息主次清晰，地圖信息龐雜，沒有主次關系會影響用戶的讀圖效率。在設計時需要考慮元素本身的特點、重要性，可通過顏色、icon/文字大小、線形寬窄等表達。做到同類元素有關聯性，不同元素有差異性。同時，信息主次也會根據比例尺的變化有所調整。
視覺具有整體性，在滴滴的業務場景中，地圖通常作為最底層組件出現，上層還會有很多業務組件。因此在設計時需克制用色，既要保證地圖中各元素之間的區隔度，又要保證地圖整體與其他業務組件拉開視覺層級。這樣才能更好的突出當前業務模塊的重點，提升整體的使用效率和體驗。
細分地圖模式
地圖在各業務模塊中應用廣泛，用戶需求也不盡相同，設計時需要根據使用場景區分不同模式。以網約車場景為例，業務信息始終處于上層，地圖用來幫助用戶定位、快速發單。因此，網約車場景的地圖整體性強、色調偏冷、視覺層級后退，能更好的搭配網約車模塊的整體設計，保證用戶的操作效率。
具有品牌特性
品牌調性一直是滴滴設計層面非常關注的原則，品牌基因貫穿了所有產品，始終具有獨特的視覺風格。遵循品牌的視覺語言，使地圖可以更好的融合到產品中，保證了設計的統一性。
文章來源：優設 作者：CDX創意設計中心
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn