作者：BYMD

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》基于地理位置的美食數(shù)據(jù)可視化設(shè)計(jì)

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

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

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

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

「天氣類」

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

「生理健康類」

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

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

「財(cái)務(wù)記賬類」

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

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

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

「運(yùn)動(dòng)健身類」

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

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

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

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

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

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

「深色底」

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

「淺色底」

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

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

「彩色底」

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

「圖片底」

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

3.各類圖表的使用場(chǎng)景

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

「折線圖」

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

「曲線圖」

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

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

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

「條形圖&柱狀圖」

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

「熱度圖 / 熱力圖」

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

「雷達(dá)圖」

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

「儀表盤」

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

4.圖表運(yùn)用到界面中去

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

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

頁面中就展示一個(gè)比較重要的數(shù)據(jù)，如何設(shè)計(jì)？圓形是一個(gè)不錯(cuò)的選擇，因?yàn)樗梢栽陧撁嬷行纬梢曈X中心。不管是餅狀圖，還是環(huán)形圖，或是擁有視覺中心的雷達(dá)圖，都會(huì)讓頁面上呈現(xiàn)一個(gè)視覺重點(diǎn)。

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

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

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

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

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

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

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

「導(dǎo)航切換」

「功能動(dòng)態(tài)切換（點(diǎn)擊按鈕切換形態(tài)）」

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

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

作者：一個(gè)辛普森

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

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

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

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

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

英文叫法：Chart。

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

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

二  圖表的構(gòu)成

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

三  圖表元素解析

3.1  標(biāo)題

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

標(biāo)題的常用位置有 3 個(gè)：左上角、頂部居中、底部居中。

一般情況下，標(biāo)題字號(hào) / 色值要突出一些，用戶第一眼看到 chart 的時(shí)候，要清晰的看到這個(gè)圖表是做什么的。

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

• 增加提示圖標(biāo)；
• 增加提示語。

3.2  圖例

3.2.1  圖例的組成

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

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

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

3.2.3 圖例的位置

從左至右、從上至下。

3.2.4  圖例的作用

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

3.2.5  圖例的顏色選擇

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

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

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

3.2.6  圖例過多時(shí)如何展示

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

3.2.7  共用圖例

如果多個(gè) chart 的圖例一樣，可進(jìn)行合并，減少冗余圖例。

3.2.8  圖例省略

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

3.2.9  圖例名稱限制

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

3.3  坐標(biāo)軸

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

3.3.1  刻度值代表的意義

• 時(shí)間點(diǎn)：12:00；
• 時(shí)間段：周一、周二。

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

是否帶單位：

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

對(duì)齊方式（常用，但非必須）：

• X 軸：居中對(duì)齊；
• Y 軸：右對(duì)齊。

刻度值過多時(shí)如何顯示：

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

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

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

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

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

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

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

3.5  網(wǎng)格線

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

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

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

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

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

3.5.3  使用場(chǎng)景

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

3.6  提示信息

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

3.7  水位線

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

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

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

3.8  時(shí)間軸

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

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

四  圖表使用建議

4.1  折線圖 line

4.1.1  定義

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

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

4.1.2  使用場(chǎng)景

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

4.1.3  使用建議

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

• 重要節(jié)點(diǎn)可以單獨(dú)做重點(diǎn)標(biāo)注；

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

4.2  面積圖 area

4.2.1  定義

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

4.2.2  使用場(chǎng)景

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

4.2.3  使用建議

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

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

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

4.3  柱狀圖 bar

4.3.1  定義

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

4.3.2  使用場(chǎng)景

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

4.3.3  使用建議

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

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

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

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

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

4.4  餅圖 pie

4.4.1  定義

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

4.4.2  使用場(chǎng)景

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

4.4.3  使用建議

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

4.5  環(huán)形圖

4.5.1  定義

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

4.5.2  使用場(chǎng)景

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

4.5.3  使用建議

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

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

4.6  堆疊面積圖

4.6.1  定義

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

4.6.2  使用場(chǎng)景

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

4.6.3  使用建議

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

4.7  堆疊柱狀圖

4.7.1  定義

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

4.7.2  使用場(chǎng)景

常用于不同維度下相同幾個(gè)指標(biāo)的展示。

4.7.3  使用建議

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

4.8  非常用圖表

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

雷達(dá)圖，散點(diǎn)圖，K線圖，盒須圖，熱力圖，旭日?qǐng)D，?；鶊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ù)可視化必修課中最重要的模塊之一，不可忽略。只有了解每個(gè) chart 的定義及使用場(chǎng)景，才能在產(chǎn)品中用到最合適的那一個(gè)。

作者：Luckgg

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

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

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

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

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

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

2.1  易讀性

表格的層級(jí)一定要?jiǎng)澐值姆浅Ｇ逦?，層?jí)分明。你要讓用戶更關(guān)注的是數(shù)據(jù)本身，而不是花里胡哨的樣式。

2.2  可尋性

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

2.3  高效性

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

2.4  靈活性

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

三  表格的構(gòu)成

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

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

介紹完表格的構(gòu)成，我們?cè)賮戆衙恳粋€(gè)元素拆解出來詳細(xì)介紹。

四  表格元素解析

4.1  標(biāo)題

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

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

標(biāo)題的位置一般在左上角。

4.2  操作區(qū)

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

使用建議：

4.2.1  有且只有一個(gè)主操作

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

4.2.2  樣式統(tǒng)一

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

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

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

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

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

4.2.5  刷新按鈕

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

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

同時(shí)刷新后要有即時(shí)反饋，告訴用你他點(diǎn)完操作后目前處于哪個(gè)階段中。

4.2.6  導(dǎo)出功能

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

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

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

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

4.2.7  導(dǎo)入功能

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

4.2.8  自定義內(nèi)容

自定義分兩種：

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

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

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

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

4.3  Tab（標(biāo)簽切換）

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

使用建議：

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

4.4  篩選區(qū)

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

4.4.1  搜索功能：

4.4.1.1  模糊搜索 or 精準(zhǔn)搜索

搜索首先要確定哪幾個(gè)字段可以被搜索到，名稱？編號(hào)？等等…

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

4.4.1.2  單字段搜索

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

4.4.1.3  多字段組合搜索

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

4.4.1.4  切換類別搜索

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

4.4.1.5  多類別組合搜索

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

4.4.2  篩選的樣式

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

4.5  表頭

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

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

4.6  表體

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

使用建議：

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

4.7  表尾

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

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

5.1  彈窗

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

5.2  抽屜

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

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

5.3  跳轉(zhuǎn)頁面

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

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

5.4  嵌套

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

在最后

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

作者：Luckgg

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

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

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

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

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

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

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

設(shè)計(jì)要點(diǎn)：

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

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

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

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

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

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

設(shè)計(jì)要點(diǎn)：

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

3.省略基線

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

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

設(shè)計(jì)要點(diǎn)：

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

4.選擇錯(cuò)誤的可視化方法

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

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

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

設(shè)計(jì)要點(diǎn)：

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

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

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

另外一旦強(qiáng)行關(guān)聯(lián)幾種相似的數(shù)據(jù)，有可能造成結(jié)果的混亂。一個(gè)有意思的例子是冰激凌銷量的增加與暴力犯罪的激增有關(guān)，因?yàn)檫@兩者都是因?yàn)闅夂蜃兓斐傻慕Y(jié)果。

設(shè)計(jì)要點(diǎn)：

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

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

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

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

設(shè)計(jì)要點(diǎn)：

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

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

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

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

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

設(shè)計(jì)要點(diǎn)：

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

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

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

設(shè)計(jì)要點(diǎn)：

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

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

參與方式：詳見原文。

作者：Clippp

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

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

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

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

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

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

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

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

標(biāo)準(zhǔn)圓環(huán)圖

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

布爾圓環(huán)圖

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

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

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

標(biāo)簽圓環(huán)圖

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

懸停狀態(tài)

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

點(diǎn)選狀態(tài)

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

焦點(diǎn)狀態(tài)

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

空狀態(tài)

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

錯(cuò)誤狀態(tài)

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

使用分類顏色

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

最多使用五個(gè)分段

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

保證數(shù)據(jù)準(zhǔn)確

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

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

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

不要將時(shí)間分段

最后 

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

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

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

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

慢慢來比較快，希望對(duì)你有幫助！

作者：Clippp

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

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

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

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

展示二：

展示三：

展示四：

展示五：

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

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

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

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

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

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

標(biāo)準(zhǔn)化怎么做

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

案例實(shí)戰(zhàn)

以數(shù)據(jù)可視化場(chǎng)景為例，講述如何做標(biāo)準(zhǔn)化。

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

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

2、問題

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

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

3、策略

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

提效：代碼化、工具、交付機(jī)制。

4、體驗(yàn)統(tǒng)一

包括框架、組件、樣式。

框架

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

(2) 用戶場(chǎng)景分析

(3) 頁面歸類

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

(4) 確定典型布局

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

組件

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

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

(2) 模塊層分類

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

(3) 模塊專項(xiàng)治理

接下來，需要對(duì)每一個(gè)模塊進(jìn)行專項(xiàng)治理。比如圖表模塊，再拆再抽象成指標(biāo)、圖表、單選、多選 4類場(chǎng)景。場(chǎng)景里再對(duì)主體和變體（也就是擴(kuò)展形態(tài)）分類。

樣式

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

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

(2) 確定組件范圍

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

(3) 布局

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

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

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

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

(4) 色板

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

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

(5) 字體

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

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

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

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

(6) 動(dòng)效

首先，需要確定動(dòng)效價(jià)值，明確動(dòng)效需要解決的問題。這里圍繞舒適度、活力、層級(jí)、反饋來講。

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

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

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

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

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

5、提效

包含代碼化提效、工具提效、機(jī)制提效。

整體思路

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

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

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

交付內(nèi)容

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

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

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

交付機(jī)制

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

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

6、衡量

從物理到行為層，包括樣式、組件、框架、組件交互 共4個(gè)維度。通過一致性評(píng)分衡量標(biāo)準(zhǔn)化覆蓋的好壞。

總結(jié)

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

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

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

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

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

作者：CCO 設(shè)計(jì)

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

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

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

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