常使用數(shù)據(jù)可視化的APP大致分為這幾類：「天氣類」「生理健康類」「財務(wù)記賬類」「數(shù)據(jù)分析類」「運動健身類」等。下面為大家介紹一些代表性的APP。

「天氣類」

「墨跡天氣」和「天氣通」根據(jù)城市實景和當(dāng)下天氣對實時景觀圖進行模糊處理，增強產(chǎn)品的關(guān)聯(lián)性和代入感。

「生理健康類」

Clue會根據(jù)不同階段的心情做可視化，比如易孕期會用一些生理圖形提醒用戶你的狀態(tài)。這或許會給我們做自己的產(chǎn)品帶來一些思考。

你今天真好看是一款人工智能測膚美妝的應(yīng)用，會使用各圖表闡明你的膚質(zhì)水平。

「財務(wù)記賬類」

記賬類APP和理財類APP幾乎囊括了所有圖表樣式，折線圖、餅狀圖、條形圖都不在話下。

「專業(yè)數(shù)據(jù)分析類」

移動端設(shè)備的高速發(fā)展，使專業(yè)的數(shù)據(jù)分析平臺不再局限于PC端展示，于是移動端的數(shù)據(jù)分析軟件也應(yīng)運而生。以下為友盟和神策商店圖。

「運動健身類」

移動設(shè)備在消費市場得到很大的變化——從手機到可穿戴設(shè)備。移動設(shè)備越來越實惠，實現(xiàn)了前所未有的大面積普及。

大家對步數(shù)、飲食、體重等數(shù)據(jù)也更加看重。市面上做的比較好的APP有：keep、薄荷健康、小米運動等。

同事給我推薦了一個應(yīng)用—garmin connect(佳明)，它的界面繽紛、數(shù)據(jù)豐富、但是卻不會讓人感受到焦躁，這里面包含了一些設(shè)計原理。

介紹這么多數(shù)據(jù)可視化為主的APP，相信大家對數(shù)據(jù)可視化已經(jīng)有了初步的感受。想要做好數(shù)據(jù)可視化應(yīng)該怎么著手呢？以下結(jié)合實際案例進行說明。

2.可視化數(shù)據(jù)圖的配色

在上篇文章我們了解到，顏色是有溫度和進退性的，不同的配色帶來不同的體驗。因此，可視化設(shè)計也需要考慮到配色對數(shù)據(jù)的影響。

「深色底」

深色底圖表通常為了營造一種氛圍和感覺，展示出的數(shù)據(jù)信息一般不會特別繁雜，數(shù)據(jù)選用亮度較高的色彩，這樣數(shù)據(jù)信息容易從深色中跳出來。

「淺色底」

如果需要清晰展示大量的數(shù)據(jù)，建議選用淺色底，淺色底上識別度相對較高。但需要注意的是：如果數(shù)據(jù)信息量太小，淺色底上會顯得頁面太空，這會讓用戶覺得你的平臺沒有內(nèi)容或者熱度。當(dāng)然，有經(jīng)驗的設(shè)計師可以通過圖形質(zhì)感、顏色等優(yōu)化。

下面就以小米運動為例：我們對2個頁面的閱讀效率進行比較。在以數(shù)據(jù)分析為主、有大量數(shù)據(jù)的頁面中，淺色底的頁面可讀性更高，閱讀效率也更高。

「彩色底」

有時為了讓頁面更加生動，我們將數(shù)據(jù)信息展示在大面積色塊上。商務(wù)金融類APP可采用用藍色、綠色系作為底色。運動類APP可選用的色彩自由度更高，偏活力的色彩，如橙色、黃色、橘色等都可以。

「圖片底」

圖片底：為了讓數(shù)據(jù)更有可信度和關(guān)聯(lián)度，在一些天氣類APP中經(jīng)常會使用這種方式，圖片內(nèi)容與數(shù)據(jù)信息產(chǎn)生關(guān)聯(lián)，提升可讀性。

3.各類圖表的使用場景

每種圖表都會對應(yīng)它適合的數(shù)據(jù)類型。作為設(shè)計師一定要了解它們之間的對應(yīng)關(guān)系，使得設(shè)計有理有據(jù)。

「折線圖」

顯示為一組由單個線條連接的點；用于表示在一段連續(xù)時間內(nèi)發(fā)生的大量數(shù)據(jù)波動，有單折線圖和多折線圖之分。

「曲線圖」

顯示為光滑的曲線；如果數(shù)據(jù)是連貫的，且點與點之間的數(shù)據(jù)具有分析價值，用曲線圖比用折線圖合適。

「餅圖&環(huán)形圖」

環(huán)形圖可以理解為空心的餅狀圖。常用于顯示部分相對總體的百分比。還可用來顯示進度加載等。

「條形圖&柱狀圖」

條形圖可以理解為橫著的柱狀圖。常用于展示同屬性的數(shù)據(jù)、可以對比其數(shù)值。

「熱度圖 / 熱力圖」

常用于地理位置分布統(tǒng)計，進而可以分析景區(qū)、站點、高速等的人流分布狀況。另外APP界面的點擊熱力圖可以清晰展示哪個功能被點擊的次數(shù)最多，給我們帶來體驗優(yōu)化的依據(jù)。

「雷達圖」

在比較多個類別程度和查看整體情況很適合，既可以查看自身整體情況，也可以對比多個方面的數(shù)據(jù)。這是一種展示效果不錯的數(shù)據(jù)表達方式，在展示整體綜合信息上很直觀。

「儀表盤」

儀表盤設(shè)計最初來源于工業(yè)設(shè)計的車輛控制臺，由于其專業(yè)、科技感的內(nèi)核，現(xiàn)在多被一些強調(diào)科技、專業(yè)的產(chǎn)品所借鑒、例如網(wǎng)絡(luò)監(jiān)控、金融信用等。

4.圖表運用到界面中去

了解基本的圖表類型后，接下來的重點是圖表的界面設(shè)計。移動設(shè)備的屏幕較之PC端小，用戶每次可接收的數(shù)據(jù)信息量小，所以如何有效運用圖表的設(shè)計是我們需要掌握的一項很重要的部分。

「單個數(shù)據(jù)」

頁面中就展示一個比較重要的數(shù)據(jù)，如何設(shè)計？圓形是一個不錯的選擇，因為它可以在頁面中形成視覺中心。不管是餅狀圖，還是環(huán)形圖，或是擁有視覺中心的雷達圖，都會讓頁面上呈現(xiàn)一個視覺重點。

上圖的案例，為了讓頁面更加豐富，采用重色將界面撐滿，求得視覺上的飽滿。

「多組數(shù)據(jù)」

手機屏幕空間有限，多組數(shù)據(jù)在展示的時候一定要盡量讓主次數(shù)據(jù)的圖表類型不一致。曲線圖、餅圖、環(huán)形圖、柱狀圖等基礎(chǔ)圖表，交替使用，這樣使得整個頁面層次清晰，內(nèi)容豐富。最常見的錯誤就是設(shè)計師沒有對信息區(qū)分層級，所有的內(nèi)容看起來都一樣重要。

當(dāng)設(shè)計師面對幾大模塊展示大量的數(shù)據(jù)信息時，建議每個模塊單獨采用一種圖表類型，各個模塊的圖表類型均不同，這樣會減輕用戶對數(shù)據(jù)展示的疲勞度。

5.可視化數(shù)據(jù)的動效

動效可以提升產(chǎn)品趣味性，尤其在展示大量數(shù)據(jù)信息時，使用動效能緩解閱讀壓力。數(shù)據(jù)圖表中常見的動效有以下幾種：

「動態(tài)呈現(xiàn)數(shù)據(jù)」

「導(dǎo)航切換」

「功能動態(tài)切換（點擊按鈕切換形態(tài)）」

「屏幕橫縱向切換數(shù)據(jù)」

寫在最后：希望我們都能好好把握數(shù)據(jù)可視化，把握數(shù)據(jù)時代，真正讓數(shù)據(jù)驅(qū)動業(yè)務(wù)，驅(qū)動發(fā)展。不過我們也不要為了使自己的設(shè)計看起來炫酷而加上各種發(fā)光漸變，過分的動效導(dǎo)致加載無能，因為完美的方案不是沒什么可以加，而是沒什么可以減。

作者：一個辛普森

 轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》用戶體驗大小事—數(shù)據(jù)可視化設(shè)計五點論

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

圖表的定義：可直觀展示統(tǒng)計信息的屬性，對知識挖掘和信息直觀生動感受起關(guān)鍵作用的圖形結(jié)構(gòu)，是一種很好的將對象屬性數(shù)據(jù)直觀、形象地可視化的手段。

英文叫法：Chart。

用戶對圖形的敏感程度遠遠大于文字，所以產(chǎn)品就需要把數(shù)據(jù)信息可視化，用簡單的圖形表示出更多的信息量，而圖表是數(shù)據(jù)可視化中最常用的表現(xiàn)形式。

接下來我們來介紹圖表的具體構(gòu)成及元素解析。

二  圖表的構(gòu)成

圖表是由：標題、圖例、刻度軸、數(shù)據(jù)展示、網(wǎng)格線、提示信息、水位線、時間軸組成，每一個元素都有他存在的意義。在實際使用中不一定非得把元素全部展示出來，精簡化顯示想要展示的內(nèi)容即可。

三  圖表元素解析

3.1  標題

顧名思義，標題就是圖表的名字，標題是必不可少的元素。標題的內(nèi)容一定要言簡意賅，不要太長，能兩個字寫清楚絕對不用三個字。

標題的常用位置有 3 個：左上角、頂部居中、底部居中。

一般情況下，標題字號 / 色值要突出一些，用戶第一眼看到 chart 的時候，要清晰的看到這個圖表是做什么的。

特殊情況下，如果需要對標題有額外解釋的話，兩種展現(xiàn)形式：

• 增加提示圖標；
• 增加提示語。

3.2  圖例

3.2.1  圖例的組成

顏色、名稱、數(shù)值、單位。

3.2.2  圖例的展現(xiàn)形式

圓形、開關(guān)、矩形、鼓包線、實線、虛線。

3.2.3 圖例的位置

從左至右、從上至下。

3.2.4  圖例的作用

• 標識出每個顏色所代表的的類別；
• 開啟 / 隱藏數(shù)據(jù)顯示；
• 圖例顯示的數(shù)值一般為當(dāng)前值。

3.2.5  圖例的顏色選擇

同一組圖例中，不要出現(xiàn)相近的顏色，否則在圖表顯示中分不清彼此。

產(chǎn)品使用中，要規(guī)范圖例顏色使用，一般分為兩種：

• 常用的圖例顏色（顏色本身代表著行業(yè)中的某種含義），此類顏色需要是固定色值，無論哪個 chart 中，都是這個顏色；
• 無特殊含義的圖例，可以規(guī)范出一個圖例顏色的使用順序表。那些無特殊含義的 chart 可以按順序使用圖例顏色，圖例整齊劃一。

3.2.6  圖例過多時如何展示

• 如果圖例可整合前提下，展示主要圖例 / top n 圖例，其他的圖例做整合，增加個詳情頁來展示完整的；
• 如果圖例不可整合/省略，則需要給出足夠的展示空間。

3.2.7  共用圖例

如果多個 chart 的圖例一樣，可進行合并，減少冗余圖例。

3.2.8  圖例省略

如果 chart 中只有一個圖例的話，可省略。

3.2.9  圖例名稱限制

根據(jù)不同使用場景，為了更好的展示效果，要給圖例名稱設(shè)置一個最大值，超過最大值后省略展示。

3.3  坐標軸

坐標軸分為 X 軸和 Y 軸，常規(guī)情況下為 1 個 X 軸+1 個 Y 軸。不過特殊情況下也會用到2X+Y 或 X+2Y。

3.3.1  刻度值代表的意義

• 時間點：12:00；
• 時間段：周一、周二。

3.3.2  坐標軸使用規(guī)則

是否帶單位：

• 如果刻度值的含義明確的情況下，可以不用帶單位，比如：2018、2019、2020…；
• 如果刻度值含義有歧義的情況下，必須加上單位（具體是統(tǒng)一一個位置加單位，還是每個刻度值上加單位，則需要根據(jù)場景來判斷）。

對齊方式（常用，但非必須）：

• X 軸：居中對齊；
• Y 軸：右對齊。

刻度值過多時如何顯示：

• 可選擇規(guī)律性省略刻度名稱；
• 傾斜文字以顯示更多的文案。

刻度值的選用一定要是同一個規(guī)律，禁止同距離的刻度值代表不同數(shù)據(jù)。

刻度點的樣式使用規(guī)則：刻度的線朝外。

3.4  數(shù)據(jù)展示

數(shù)據(jù)的展示是 chart 中最為明顯的地方，可以說如果只顯示一個元素的話，就是他了。

數(shù)據(jù)展示的使用規(guī)則：

• 邊界要清晰，不可虛化；
• 多個數(shù)據(jù)同時顯示的時候，要保證每個數(shù)據(jù)都能清晰的看到，可以采用透明度來保證所有數(shù)據(jù)的顯示。

3.5  網(wǎng)格線

3.5.1  網(wǎng)格線的作用

呼應(yīng)坐標軸，美觀度。

3.5.2  網(wǎng)格線的使用規(guī)則

• 線的顏色要弱化，不要喧賓奪主；

• 網(wǎng)格線使用實線居多，盡量不用虛線。

3.5.3  使用場景

橫、縱、橫縱結(jié)合、無網(wǎng)格線。

3.6  提示信息

通常情況下，提示信息用來標識出 chart 中重要點的數(shù)據(jù)信息，需要注意的是：重要信息盡量簡化，信息量不要太大，言簡意賅就好。

3.7  水位線

根據(jù)不同產(chǎn)品的使用場景，有的時候會用到閾值，當(dāng)達到某個閾值后，就會觸發(fā)某種聯(lián)動。這個時候就需要有個水位線了，它起到警示的作用。

形式有兩種，實線和虛線，顏色的選取則取決于產(chǎn)品的警告級別。

水位線可以是一個，也可以是多個，視情況而定。

3.8  時間軸

時間軸可以靈活地調(diào)節(jié)刻度值的上下限，從而更精確的看到自己想看的數(shù)據(jù)。

時間軸的功能及限制不是很復(fù)雜，所以就不過多解釋了，需要用的話就用。

四  圖表使用建議

4.1  折線圖 line

4.1.1  定義

折線圖可以顯示隨時間（根據(jù)常用比例設(shè)置）而變化的連續(xù)數(shù)據(jù)，因此非常適用于顯示在相等時間間隔下數(shù)據(jù)的趨勢。

折線圖是通過線條的波動來表示數(shù)據(jù)的波動，主要體現(xiàn)的是數(shù)據(jù)隨著時間的推移而變動的圖表。

4.1.2  使用場景

常用于觀察一段時間內(nèi)數(shù)據(jù)波動的浮動變化，比如：一天內(nèi)內(nèi)存的使用情況。

4.1.3  使用建議

• Y 軸刻度值選擇要合理，當(dāng)前顯示的數(shù)據(jù)波動要最大化的顯示；

• 重要節(jié)點可以單獨做重點標注；

• 數(shù)據(jù)拐點要平滑，不要太鋒利。

4.2  面積圖 area

4.2.1  定義

面積圖和折線圖比較類似，區(qū)別在于面積圖把數(shù)據(jù)區(qū)域做了個面積劃分，讓數(shù)據(jù)的顯示更加清晰。

4.2.2  使用場景

面積圖展示盡量不要超過 3 個圖例，否則數(shù)據(jù)多的情況下，數(shù)據(jù)的展示會特別亂，影響觀看。

4.2.3  使用建議

• 面積區(qū)域要和折線的顏色用統(tǒng)一色系，不要換色系；

• 面積區(qū)域一般要比折線顏色淺一些，這樣視覺上更加讓人舒適；

• 如果多條數(shù)據(jù)情況下也用面積圖的話，面積區(qū)域盡量使用透明度，否則有的數(shù)據(jù)會被遮擋看不到。

4.3  柱狀圖 bar

4.3.1  定義

柱形圖，又稱長條圖、柱狀統(tǒng)計圖。用來比較兩個或以上的價值（不同時間或者不同條件），只有一個變量，通常用于較小的數(shù)據(jù)集分析。

4.3.2  使用場景

• 柱狀圖分為橫向和縱向兩種展現(xiàn)形式。
• 用于在同一維度下不同數(shù)據(jù)的對比，用柱狀圖更能清晰的對比出數(shù)據(jù)的差異化。

4.3.3  使用建議

• 柱狀圖的厚度不要是固定值，要做成自適應(yīng)來應(yīng)對不同尺寸的分辨率顯示；

• 厚度與間距的對比要合理設(shè)計；

• 可使用小圓角，千萬不要用大圓角，太丑了……

• 如果想要強調(diào)某個柱子的話，可以進行顏色區(qū)分，但是柱子顏色不要超過 2 個（同一維度下）；

• 如果想要在柱子上顯示數(shù)值的話，使用建議（下面的順序為推薦順序）：
  • hover 的時候出現(xiàn)數(shù)值；
  • 數(shù)值默認在柱子上顯示；
  • 數(shù)值在柱子頂部 / 右側(cè)顯示。

4.4  餅圖 pie

4.4.1  定義

餅圖僅排列在工作表的一列或一行中的數(shù)據(jù)，它是有一個總和數(shù)據(jù)，方面查看每個類別分別占總數(shù)據(jù)的百分比的一種圖表。

4.4.2  使用場景

• 常用于做總結(jié)、年度匯報等；
• 所有數(shù)據(jù)相加必須是 100% 才可用。

4.4.3  使用建議

• 每個數(shù)據(jù)要使用單獨的顏色來表示，不要有相同顏色；
• 餅圖中不能有負值；
• 圖例數(shù)量沒有限制，但是如果遇到可以合并的圖例，可以進行合并；
• 餅圖的開始點為 0/12 點位置。

4.5  環(huán)形圖

4.5.1  定義

環(huán)形圖是由兩個不同大小的圓疊在一起，切割中心部分得到的一種圖形。

4.5.2  使用場景

• 環(huán)形圖有一個獨有的特點，就是可以在中心圓的位置突出某一項指標的數(shù)值。
• 它常用于做數(shù)據(jù)的監(jiān)控，監(jiān)控某一類指標是否正常。

4.5.3  使用建議

• 環(huán)形圖的開始點為 0/12 點位置；
• 環(huán)的粗細要合理，不要太粗和太細；

• 環(huán)形圖的兩個圓要從中心對齊。

4.6  堆疊面積圖

4.6.1  定義

堆疊面積圖是把數(shù)據(jù)面積按順序逐步堆疊起來的一種圖形。

4.6.2  使用場景

常用于不同資源中流量 / 容量的使用。

4.6.3  使用建議

• 不要有重復(fù)的顏色；
• 盡可能的把數(shù)據(jù)量按大小的順序，由下至上的堆疊。

4.7  堆疊柱狀圖

4.7.1  定義

堆疊柱狀圖是把數(shù)據(jù)柱狀圖按順序逐步堆疊起來的一種圖形。

4.7.2  使用場景

常用于不同維度下相同幾個指標的展示。

4.7.3  使用建議

• 不要有重復(fù)的顏色；
• 按重要等級由下至上排序。

4.8  非常用圖表

上面介紹了常用的圖表的使用建議，但是圖表類型遠遠不止于此，還有很多非常用的圖表類型，這次我先給大家列出來，如果大家感興趣的話，我后面再寫一期冷門圖表的使用建議：

雷達圖，散點圖，K線圖，盒須圖，熱力圖，旭日圖，?；鶊D，樹圖，漏斗圖，儀表盤。

五  常用的圖表開源網(wǎng)站

5.1  echartsecharts

https://echarts.apache.org/zh/index.html

5.2  highcharts

https://www.highcharts.com.cn/

5.3  antv

https://antv-g2.gitee.io/zh/examples/gallery

總結(jié)

Chart 是數(shù)據(jù)可視化必修課中最重要的模塊之一，不可忽略。只有了解每個 chart 的定義及使用場景，才能在產(chǎn)品中用到最合適的那一個。

作者：Luckgg

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》數(shù)據(jù)可視化必修課 – 圖表篇

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

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

二  表格的設(shè)計原則

2.1  易讀性

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

2.2  可尋性

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

2.3  高效性

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

2.4  靈活性

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

三  表格的構(gòu)成

外部區(qū)域：標題、操作區(qū)、篩選區(qū)；

內(nèi)部區(qū)域：表頭、表體、表尾。

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

四  表格元素解析

4.1  標題

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

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

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

4.2  操作區(qū)

對表格內(nèi)容的增刪改等操作的區(qū)域。

使用建議：

4.2.1  有且只有一個主操作

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

4.2.2  樣式統(tǒng)一

同一個產(chǎn)品中，操作區(qū)樣式規(guī)范要保持一致。

4.2.3  操作的優(yōu)先級

根據(jù)使用的優(yōu)先級，把常用的操作放到一級展示，不常用的收到二級展示。

4.2.4  不同操作狀態(tài)區(qū)分要明確

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

4.2.5  刷新按鈕

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

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

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

4.2.6  導(dǎo)出功能

此功能可以把列表內(nèi)容導(dǎo)出為你想要的格式（一般為 word / pdf）。

數(shù)據(jù)量較大的列表中，導(dǎo)出功能可以很方便的把自己過濾的內(nèi)容下載到本地進行其他需求的查看。

導(dǎo)出內(nèi)容的范圍是哪些一定要事先想好，一般下載內(nèi)容的范圍以下幾種：

• 當(dāng)前頁所有列表內(nèi)容（常用，而且實現(xiàn)難度很低）；
• 經(jīng)過二次過濾后，導(dǎo)出所有頁上的列表內(nèi)容；
• 所有頁的列表內(nèi)容（不常用，而且實現(xiàn)及數(shù)據(jù)處理難度會非常大，慎重選擇）。

4.2.7  導(dǎo)入功能

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

4.2.8  自定義內(nèi)容

自定義分兩種：

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

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

那怎么區(qū)分內(nèi)容的多與少呢？

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

4.3  Tab（標簽切換）

可以快速切換不同維度下的表格內(nèi)容。

使用建議：

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

4.4  篩選區(qū)

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

4.4.1  搜索功能：

4.4.1.1  模糊搜索 or 精準搜索

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

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

4.4.1.2  單字段搜索

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

4.4.1.3  多字段組合搜索

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

4.4.1.4  切換類別搜索

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

4.4.1.5  多類別組合搜索

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

4.4.2  篩選的樣式

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

4.5  表頭

每一列列表的小標題，是對整列內(nèi)容的描述。

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

4.6  表體

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

使用建議：

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

4.7  表尾

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

五  列表詳情交互展現(xiàn)

5.1  彈窗

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

5.2  抽屜

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

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

5.3  跳轉(zhuǎn)頁面

直接跳轉(zhuǎn)個新頁面作為詳情，好處就是可以展示更多的內(nèi)容信息以及可以讓用戶更聚焦于當(dāng)前內(nèi)容。

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

5.4  嵌套

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

在最后

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

作者：Luckgg

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》數(shù)據(jù)可視化必修課 – 表格篇

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

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

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

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

設(shè)計要點：

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

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

2.數(shù)據(jù)太多

在設(shè)計中，很多人總想在一張圖表中盡可能多地展現(xiàn)內(nèi)容，把各種數(shù)據(jù)信息聚合在一起。

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

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

設(shè)計要點：

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

3.省略基線

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

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

設(shè)計要點：

圖表的美感再怎么重要，也要服務(wù)于精準的數(shù)據(jù)表現(xiàn)；

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

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

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

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

設(shè)計要點：

5.混淆關(guān)聯(lián)

數(shù)據(jù)可視化更高的價值在于探索和發(fā)現(xiàn)不同數(shù)據(jù)間的相關(guān)性，通過比較幾組不同的數(shù)據(jù)關(guān)系，找出其中的關(guān)聯(lián)性，從而得到一個更有根據(jù)的驗證結(jié)果。

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

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

設(shè)計要點：

透過數(shù)據(jù)間的關(guān)聯(lián)性發(fā)現(xiàn)事物本質(zhì)是有意義的，但要考慮數(shù)據(jù)間的關(guān)聯(lián)是否有依據(jù)、是否合理；

6.放大有利數(shù)據(jù)

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

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

設(shè)計要點：

避免放大的可視化效果與數(shù)據(jù)整體不一致；

7.避開常見的視覺聯(lián)想

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

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

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

設(shè)計要點：

8.過分糾結(jié)于數(shù)據(jù)可視化

數(shù)據(jù)可視化將難以表現(xiàn)的數(shù)字關(guān)系賦予了易于理解的形式。最理想的方式是可以通過可視化清晰、簡潔地傳達數(shù)據(jù)關(guān)系。

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

設(shè)計要點：

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

為回饋一直以來關(guān)注和支持Clip設(shè)計夾的讀者，將免費贈送3本《寫給UI設(shè)計師看的數(shù)據(jù)可視化設(shè)計》書籍給大家，幫助大家更好地學(xué)習(xí)數(shù)據(jù)可視化設(shè)計。

參與方式：詳見原文。

作者：Clippp

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》數(shù)據(jù)可視化設(shè)計常出現(xiàn)的錯誤，你一定要避免！

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》數(shù)據(jù)之美：地理空間數(shù)據(jù)可視化II

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

標準圓環(huán)圖

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

布爾圓環(huán)圖

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

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

圓環(huán)中心部分用來顯示相關(guān)數(shù)值的百分比和標簽。此外布爾圓環(huán)圖不需要額外添加圖例。

標簽圓環(huán)圖

圓環(huán)圖交互狀態(tài)分析 

懸停狀態(tài)

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

點選狀態(tài)

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

焦點狀態(tài)

焦點狀態(tài)和上面提到的懸停狀態(tài)類似，唯一的區(qū)別在于，焦點狀態(tài)選中分段后有一個放大+描邊的圓環(huán)效果，突出展示數(shù)據(jù)。

空狀態(tài)

當(dāng)沒有可用的數(shù)據(jù)時，應(yīng)該在圖表上表明這一點，并給出提示引導(dǎo)用戶去點擊。

錯誤狀態(tài)

圓環(huán)圖使用指南 

使用分類顏色

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

最多使用五個分段

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

保證數(shù)據(jù)準確

圓環(huán)圖的所有分段加起來的數(shù)值應(yīng)該始終為 100%，沒有有多段數(shù)據(jù)占比過小，可以一起匯總到“其他”分段中。

按順序排列數(shù)據(jù)

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

不要將時間分段

最后 

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

如果大家想看更多「數(shù)據(jù)可視化圖表」系列內(nèi)容，記得及時關(guān)注接下來的文章~

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

領(lǐng)取方式：關(guān)注公眾號，后臺回復(fù)【13樣機】獲取源文件

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

作者：Clippp

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》數(shù)據(jù)可視化圖表設(shè)計指南：圓環(huán)圖

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

展示二：

展示三：

展示四：

展示五：

業(yè)務(wù)背景

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

1、業(yè)務(wù)多：30多個產(chǎn)品應(yīng)用

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

3、體驗復(fù)雜：設(shè)計師需兼顧用戶和客戶兩個視角。

從組織上，85% 設(shè)計師縱向支撐業(yè)務(wù)，15% 設(shè)計師橫向做標準化，反哺業(yè)務(wù)設(shè)計師。標準化實質(zhì)解決的問題是保障基礎(chǔ)體驗一致性。

標準化怎么做

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

案例實戰(zhàn)

以數(shù)據(jù)可視化場景為例，講述如何做標準化。

1、業(yè)務(wù)現(xiàn)狀

共有11個應(yīng)用，涉及89個頁面。

2、問題

體驗不一致：各個工作臺頁面架構(gòu)、組件、樣式野蠻生長，缺少規(guī)范導(dǎo)致體驗不統(tǒng)一。

低效：部分場景缺失，組件重復(fù)建設(shè)，大量定制；溝通協(xié)同內(nèi)耗大，成本高。

3、策略

體驗統(tǒng)一：框架、組件、樣式。

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

4、體驗統(tǒng)一

包括框架、組件、樣式。

框架

(1) 現(xiàn)有頁面收集

(2) 用戶場景分析

(3) 頁面歸類

結(jié)合用戶看數(shù)內(nèi)容（例：概覽、分析、詳情）和交互形態(tài)（例：平鋪、下鉆），對頁面進行歸類。

(4) 確定典型布局

通過統(tǒng)計高頻復(fù)用形態(tài)，確定典型布局。

組件

(1) 頁面結(jié)構(gòu)分析

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

(2) 模塊層分類

橫向收集全部業(yè)務(wù)，將模塊層分類。細分模塊擴展形態(tài)，放到對應(yīng)的簍子里。

(3) 模塊專項治理

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

樣式

(1) 確定優(yōu)化內(nèi)容

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

(2) 確定組件范圍

通過統(tǒng)計高頻復(fù)用組件，確定需要梳理的組件范圍。

(3) 布局

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

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

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

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

(4) 色板

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

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

(5) 字體

結(jié)合自身業(yè)務(wù)場景問題，從場景、版權(quán)、風(fēng)格、識別、極值共5個維度選擇字體。

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

舉例場景二，在核心數(shù)據(jù)呈現(xiàn)中，helvetica 品牌風(fēng)格弱，普惠在1億以上極值過寬。

最終我們根據(jù)自身業(yè)務(wù)場景特征，用普惠和普惠102，運用在對應(yīng)場景里。并同前端提煉規(guī)則。

(6) 動效

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

通過動效場景鏈路分析，確定優(yōu)化范圍。

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

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

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

沉淀速度參數(shù)：將優(yōu)化動效場景的速度參數(shù)，同前端約定規(guī)則沉淀組件庫。

5、提效

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

整體思路

從設(shè)計組內(nèi)到技術(shù)產(chǎn)研的提效過程。

提效面向用戶依次是：組件設(shè)計師、業(yè)務(wù)設(shè)計師、前端、產(chǎn)品。

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

交付內(nèi)容

1、業(yè)務(wù)設(shè)計師：sketch/figma物料 (樣式、組件、區(qū)塊、模板、規(guī)則 )

2、業(yè)務(wù)設(shè)計師：kitchen工具（樣式、組件、區(qū)塊、模板）

3、組件工程師：組件規(guī)范/組件官網(wǎng)

交付機制

新需求：通過評估復(fù)用性、抽象、內(nèi)審、沉淀物料。

現(xiàn)有業(yè)務(wù)：通過頁面梳理歸類、抽象、內(nèi)審、沉淀物料。

6、衡量

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

總結(jié)

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

總結(jié)：B端體驗標準化包括物料的產(chǎn)出、交付以及衡量標準。

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

交付：面向2類用戶群體，業(yè)務(wù)設(shè)計，需交付物料和工具。組件工程師，代碼化需提供組件規(guī)范，組件線上化需助力組件官網(wǎng)的建設(shè)。

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

作者：CCO 設(shè)計

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》如何做B端體驗標準化：以數(shù)據(jù)可視化場景為例

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

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

關(guān)于時間戳

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

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

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

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

作者：黑馬青年

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》時間戳 【APP UI/UX 設(shè)計總結(jié)】

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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