中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)讀：在B端可視化中，往往會(huì)涉及到圖表設(shè)計(jì)，它能夠更直觀地展現(xiàn)數(shù)據(jù)，洞悉數(shù)據(jù)背后的真相。但是，很多人在工作中對(duì)圖表的設(shè)計(jì)并不了解。本文作者基于自身工作經(jīng)驗(yàn)，梳理了一些圖表設(shè)計(jì)的知識(shí)點(diǎn)，希望對(duì)你有幫助。

隨著大數(shù)據(jù)的興起，數(shù)據(jù)價(jià)值的不斷挖掘，圖表作為數(shù)據(jù)呈現(xiàn)與分析的有效手段，正扮演著越來(lái)越重要的角色。我們?cè)谶M(jìn)行B端平臺(tái)設(shè)計(jì)時(shí)也在思考：如何讓圖表清晰的傳達(dá)信息，同時(shí)帶來(lái)美觀的視覺(jué)感受。

為了達(dá)到清晰傳達(dá)和視覺(jué)美觀的目標(biāo)，我們結(jié)合實(shí)際項(xiàng)目，進(jìn)行大量探索及思考，梳理總結(jié)了一套適用于B端后臺(tái)類產(chǎn)品的圖表設(shè)計(jì)思路及方法，涵蓋了曲線圖、柱狀圖、餅圖、雷達(dá)圖、漏斗圖等各類常用圖表類型。

01 圖表視覺(jué)層級(jí)

圖表能夠承載大量數(shù)據(jù)信息，同時(shí)視覺(jué)元素較多，如果只是憑借設(shè)計(jì)師的審美喜好進(jìn)行視覺(jué)設(shè)計(jì)，沒(méi)有整體信息讀取考量，可能會(huì)導(dǎo)致重要信息未能凸顯，降低用戶讀取效率。

為清晰傳達(dá)信息，進(jìn)一步提升讀取效率，我們采用元素重要程度與視覺(jué)強(qiáng)度相綁定的方法。依據(jù)元素重要程度，將圖表元素分為三類，分別為“底層元素”、“中層元素”和“頂層元素”，并依據(jù)不同視覺(jué)強(qiáng)度分別設(shè)計(jì)三類元素。底層元素最弱，頂層元素最強(qiáng)。通過(guò)這種方法，梳理圖表元素的前后關(guān)系，能夠清晰把握元素視覺(jué)層次，保證信息傳遞效率。

1. 底層元素設(shè)計(jì)

在各類圖表中，我們把輔助說(shuō)明數(shù)據(jù)的軸線、刻度等定義為底層元素。為了減少視覺(jué)干擾，最大程度突出主圖形，底層元素全部使用淺灰色進(jìn)行設(shè)計(jì)。

我們發(fā)現(xiàn)，當(dāng)元素與背景顏色的明度對(duì)比在1.2:1時(shí)，人眼較難看到元素；當(dāng)對(duì)比度在2.0:1時(shí)，視覺(jué)強(qiáng)度過(guò)強(qiáng)，易吸引用戶注意力。

通過(guò)元素視覺(jué)強(qiáng)度的調(diào)研及視覺(jué)嘗試，最終確定元素與背景對(duì)比度在1.6:1左右，視覺(jué)強(qiáng)度偏弱但人眼能夠看清的程度。以保證元素視覺(jué)不突兀，只在需要查看時(shí)可以被發(fā)現(xiàn)。

2. 中層元素設(shè)計(jì)

中層元素的內(nèi)容包括數(shù)據(jù)圖形、數(shù)據(jù)線段等承載主要數(shù)據(jù)信息的元素，是圖表中表達(dá)數(shù)據(jù)的關(guān)鍵元素。

與底層元素相比，中層元素采用更低明度與更高飽和度的數(shù)據(jù)色來(lái)表現(xiàn)，使元素從頁(yè)面中凸顯出來(lái)，保證可讀性。同時(shí)在樣式上適當(dāng)加入漸變、描邊等樣式，豐富視覺(jué)層次，帶來(lái)美觀的視覺(jué)感受。

3. 頂層元素設(shè)計(jì)

我們把頂層元素定義為圖表高亮信息，內(nèi)容包括懸停樣式、懸停后的詳細(xì)數(shù)據(jù)說(shuō)明等。在設(shè)計(jì)上為保證視覺(jué)樣式突出，使用深灰色、強(qiáng)調(diào)色等強(qiáng)對(duì)比度樣式，并輔以動(dòng)畫、投影等手法保證明顯的視覺(jué)強(qiáng)調(diào)效果，保證頂層信息最有效的傳達(dá)給用戶。

4. 最終效果

通過(guò)層級(jí)梳理，并綁定元素重要程度和視覺(jué)強(qiáng)度的方法，設(shè)計(jì)后圖表主次信息均按重要程度進(jìn)行對(duì)應(yīng)視覺(jué)強(qiáng)度的展示，讓用戶能夠在第一時(shí)間接收到最重要的信息，提升信息讀取效率。

02 圖表排版設(shè)計(jì)

圖表排版是指各元素在圖表中的尺寸及布局等，對(duì)于B端后臺(tái)類產(chǎn)品來(lái)說(shuō)，不同排版對(duì)用戶使用體驗(yàn)造成較大影響。

如何建立一套合理的規(guī)范保證用戶的使用體驗(yàn)？

我們經(jīng)過(guò)大量討論推敲，梳理出一套針對(duì)B端后臺(tái)類產(chǎn)品的排版規(guī)則，力求保證用戶圖表的使用體驗(yàn)。

1. 圖表尺寸

圖表尺寸指圖表整體長(zhǎng)寬高。在項(xiàng)目中我們發(fā)現(xiàn)不同尺寸的圖表對(duì)數(shù)據(jù)展現(xiàn)效果影響巨大，例如巨量數(shù)據(jù)的圖表擠在名片大小的區(qū)域例顯示，這使得信息讀取的效率大打折扣。為此我們收集并提取出“全貌概覽”、“多角度環(huán)視”、“詳情分析”三類典型場(chǎng)景，并制定了“迷你圖”、“中號(hào)圖表”、“大號(hào)圖表”三類尺寸，針對(duì)不同尺寸優(yōu)化圖表的信息展示密度，以達(dá)到高效讀取信息的目的。

• “迷你圖”尺寸最小，舍棄了Y軸等不必要信息，利用小面積展示最關(guān)鍵的圖表信息，并控制數(shù)據(jù)密度，保證信息高效讀取。
• “中號(hào)圖表”尺寸受限，限制坐標(biāo)軸刻度數(shù)量和數(shù)據(jù)的密度，例如曲線圖數(shù)據(jù)點(diǎn)不高于每4像素1個(gè)數(shù)據(jù)點(diǎn)，Y軸坐標(biāo)刻度不超過(guò)5個(gè)，以確保信息密度不過(guò)載，這類圖表尺寸通常用在針對(duì)某大類內(nèi)容進(jìn)行多方面檢視時(shí)。
• “大號(hào)圖表”尺寸最大，不限制數(shù)據(jù)信息密度，給予最全最詳細(xì)的展示，這類尺寸通常用在數(shù)據(jù)詳情頁(yè)等詳細(xì)分析場(chǎng)景中。

最后考慮到多圖表混合排列時(shí)，餅圖、地圖等大面積填色圖表，相較折線圖等描邊型圖表，視覺(jué)感受更加膨脹。我們縮小了填色類圖表的實(shí)際高度，保證多種圖表混合排列時(shí)，視覺(jué)感受的均衡。

2. 坐標(biāo)軸

坐標(biāo)軸在圖表中出現(xiàn)的頻率較高，那么坐標(biāo)軸常見(jiàn)的設(shè)計(jì)問(wèn)題有哪些呢？

第一是橫縱坐標(biāo)軸的刻度出現(xiàn)過(guò)密情況。

如果坐標(biāo)軸所承載的是連續(xù)數(shù)據(jù)（連續(xù)數(shù)據(jù)指可量化的，連續(xù)不斷的，在區(qū)間內(nèi)可任意取值的數(shù)據(jù)，如時(shí)間、金額、人數(shù)等），設(shè)計(jì)師可自行增減刻度數(shù)量以保證視覺(jué)舒適度。如果承載是離散數(shù)據(jù)（離散數(shù)據(jù)指不可量化的，無(wú)關(guān)聯(lián)的，不可在區(qū)間內(nèi)任意取值的數(shù)據(jù)，如分類、軟件版本、省份等），可采取增加坐標(biāo)軸縮放功能以解決.

第二個(gè)常見(jiàn)問(wèn)題是刻度的說(shuō)明文字過(guò)長(zhǎng)。

如果是X軸（橫軸）文字過(guò)長(zhǎng)，除了在可控范圍內(nèi)減少刻度，還可采取文字傾斜45°~90°的辦法(如文字全部為中文，可用豎排代替傾斜90°)，緩解信息過(guò)密看不清的情況。

如果是Y軸（縱軸）文字過(guò)長(zhǎng)，需聯(lián)合研發(fā)一起調(diào)整數(shù)據(jù)的單位，比如把“元”調(diào)整為“百萬(wàn)元”。

如果不能調(diào)整，那就要根據(jù)所使用的圖表庫(kù)有針對(duì)性調(diào)整。例如常用的Echarts圖表、D3圖表等開(kāi)源圖表庫(kù)，需要提前預(yù)估刻度文字長(zhǎng)度并預(yù)留出來(lái)，否則刻度文字可能會(huì)被頁(yè)面裁掉而不能完全顯示。如你是用的是AntV等可自適應(yīng)的圖表庫(kù)，則不必提前處理，圖表庫(kù)會(huì)自動(dòng)按刻度長(zhǎng)度進(jìn)行整體調(diào)整。

3. 圖例

圖例作為圖表中不可或缺的部分，在各類圖表庫(kù)中位置不盡相同，由于不同圖表樣式差異很大，圖例的位置需整體考慮并適當(dāng)布局?jǐn)[放，但在同一產(chǎn)品或頁(yè)面內(nèi)，過(guò)于隨意的擺放圖例，會(huì)導(dǎo)致頁(yè)面統(tǒng)一性較差，同時(shí)增加用戶的瀏覽成本。

我們團(tuán)隊(duì)所負(fù)責(zé)的B端商業(yè)產(chǎn)品矩陣，作為面向用戶的產(chǎn)品集合，產(chǎn)品間聯(lián)系非常緊密。過(guò)于靈活隨意的圖例擺放不利于用戶對(duì)于圖表的瀏覽。為解決此問(wèn)題，我們基于業(yè)務(wù)特點(diǎn)，針對(duì)B端商業(yè)產(chǎn)品矩陣制定了圖例布局指導(dǎo)原則。

我們以提升屏幕信息密度為目標(biāo)，分析不同場(chǎng)景的頁(yè)面排布，制定了頂部和右側(cè)兩種較為寬松的指導(dǎo)原則，供設(shè)計(jì)師在沒(méi)有明確的更優(yōu)方案時(shí)選用。

當(dāng)圖表是左右兩端對(duì)齊的類型，例如折線圖、柱狀圖時(shí)，建議將圖例放置在圖表頂部。這樣能結(jié)合標(biāo)題等其他元素進(jìn)行統(tǒng)一排布，減少占用空間。當(dāng)圖表本身左右都有空余空間時(shí)，例如餅圖，建議將圖例放置于圖表的右側(cè)。也能夠節(jié)省頁(yè)面的空間。

03 數(shù)據(jù)色板設(shè)計(jì)

色板作為常見(jiàn)的數(shù)據(jù)表達(dá)手段，能夠利用不同顏色明確體現(xiàn)分類信息、數(shù)值高度、狀態(tài)信息等。但目前市面上鮮有專業(yè)用途圖表的配色工具。我們經(jīng)過(guò)大量探索嘗試，梳理總結(jié)出圖表色彩的兩個(gè)關(guān)鍵維度：辨識(shí)度與統(tǒng)一性。既需要顏色間突出強(qiáng)烈可清晰辨別，又需要顏色整體能形成統(tǒng)一風(fēng)格，以達(dá)到清晰傳遞和美觀的目標(biāo)。如何平衡辨識(shí)度與統(tǒng)一性，是我們遇到的難題。

1. 辨識(shí)度

辨識(shí)度在圖表中有兩方面：顏色與頁(yè)面底色的辨識(shí)度，各顏色之間的辨識(shí)度。對(duì)于第一種，我們采用控制顏色的明亮程度來(lái)確保色彩辨識(shí)度，尤其對(duì)于黃色、青色等本身較亮的顏色，降低顏色的明度，確保在淺色背景下顏色可辨識(shí)。

對(duì)于第二種也就是各顏色之間的辨識(shí)度，通過(guò)實(shí)驗(yàn)發(fā)現(xiàn)單純的顏色色相變化，例如紅色與橙色的區(qū)分，人眼不容易分辨。所以采用了色相變化+明度變化的方法，既深紅色與亮橙色，深藍(lán)色與亮紫色等，這樣用戶能在第一眼就明確分辨，保證顏色間的辨識(shí)度。

最終把顏色映射到色彩空間的三維坐標(biāo)中，運(yùn)用歐幾里得距離公式測(cè)算顏色間的距離長(zhǎng)短，來(lái)衡量各顏色間色差數(shù)值。顏色間距離越遠(yuǎn)代表色差越大，利用數(shù)據(jù)輔助衡量辨識(shí)效果。

2. 統(tǒng)一性

色彩統(tǒng)一性的作用在于確保圖表整體風(fēng)格一致，色彩搭配舒適，從而帶來(lái)美觀、統(tǒng)一的視覺(jué)感受。為達(dá)目的，我們首先提煉商業(yè)產(chǎn)品設(shè)計(jì)風(fēng)格為明亮、強(qiáng)對(duì)比，其次把設(shè)計(jì)風(fēng)格轉(zhuǎn)化為色彩數(shù)值。

經(jīng)過(guò)實(shí)驗(yàn)，把顏色明度限制在50%-70%，把飽和度限制在75%-85%，并在區(qū)間內(nèi)不斷波動(dòng)。這樣既保證了色彩視覺(jué)感受的統(tǒng)一，各顏色間又能夠有清晰的辨識(shí)度。

3. 顏色量化與工具

量化顏色，將色彩轉(zhuǎn)化為數(shù)值，利用數(shù)值來(lái)驗(yàn)證設(shè)計(jì)師的「感覺(jué)」，能夠保證方案合理性，保證設(shè)計(jì)質(zhì)量。但通過(guò)嘗試，我們常用的色彩模式均不能科學(xué)合理的量化顏色。

通過(guò)查閱大量資料，我們最終決定以小眾的HCL色彩模式來(lái)衡量色彩。其中H表示色相、C表示飽和度、L表示明度。HCL區(qū)別于傳統(tǒng)的RGB或HSB模式，它能夠?qū)⑷搜蹖?duì)顏色的感知精確的量化為數(shù)值，例如黃色相比藍(lán)色明度更高，都能如實(shí)的反饋到數(shù)值上。也由于此特性，HCL模式在誕生距今不到20年間，已被一些先鋒設(shè)計(jì)師用于數(shù)據(jù)可視化的呈現(xiàn)中。

但是HCL作為小眾色彩模式，目前設(shè)計(jì)軟件鮮有支持，造成了HCL色彩不直觀、不方便調(diào)色等的問(wèn)題。為解決此問(wèn)題，我們已初步完成智能配色程序，只需輸入品牌色，就能自動(dòng)生成圖表色版，并在風(fēng)格上與品牌色匹配，達(dá)到整體色彩的統(tǒng)一。我們也將一套調(diào)配好的色板及HCL實(shí)用小工具附在文末，幫助大家直觀的查看和使用HCL模式顏色。

04 結(jié)語(yǔ)

數(shù)據(jù)價(jià)值就像不為人知的寶藏，隱藏在一條條枯燥晦澀的數(shù)據(jù)背后。而圖表則是開(kāi)啟寶藏的鑰匙，是發(fā)掘數(shù)據(jù)價(jià)值的強(qiáng)有力武器。

通過(guò)對(duì)圖表的不斷探索優(yōu)化，我們希望能夠最大化數(shù)據(jù)的價(jià)值。通過(guò)圖表，讓數(shù)據(jù)最直觀的展現(xiàn)；通過(guò)圖表，讓其背后的規(guī)律浮出水面被人探知；通過(guò)圖表，讓B端不再有難懂的數(shù)據(jù)。

附：色板及HCL工具

• HCL調(diào)色Sketch插件：https://github.com/petterheterjag/chromatic-sketch
• HCL顏色生成器：http://medialab.github.io/iwanthue/
• 色彩可用性檢查工具：https://color.review/

作者：百度MEUX，百度移動(dòng)生態(tài)用戶體驗(yàn)設(shè)計(jì)中心，負(fù)責(zé)百度移動(dòng)生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗(yàn)設(shè)計(jì)。

本文由@百度MEUX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自pexels，基于CC0協(xié)議