他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

數(shù)據(jù)可視化設(shè)計(jì)淺析與研究(二)

2022-12-20    seo達(dá)人

第一部分: 圖表布局 

圖表的基本構(gòu)成(來源網(wǎng)易 UEDC)

 

圖表標(biāo)題

標(biāo)題一般居中或居左對(duì)齊,但是布局時(shí),需要綜合考慮副標(biāo)題、圖例甚至篩選器控件等元素的位置。

 

坐標(biāo)軸

坐標(biāo)軸包括 X 坐標(biāo)軸和 Y 坐標(biāo)軸,有時(shí)還會(huì)出現(xiàn)次坐標(biāo)軸。

1. X 軸刻度方向的改變,如果維度過多,則橫向刻度的展示范圍會(huì)非常有限,為了展示更多內(nèi)容,通常會(huì)用其他替代圖表(比如橫向柱狀圖),不能替代的情況下,可以考慮將標(biāo)注文案進(jìn)行傾斜(不鼓勵(lì))。

2. 數(shù)據(jù)類刻度值盡量轉(zhuǎn)化為千位分隔符(如 K,M,B),保持簡(jiǎn)潔,以節(jié)省空間。坐標(biāo)軸上的最大值取值要恰當(dāng),保證圖表占據(jù) 2/3 以上,畫面更飽滿。

3. 還需考慮坐標(biāo)軸上的極值。

坐標(biāo)軸

 

圖例

離散型數(shù)據(jù)包括橫向排列和縱向排列,連續(xù)型數(shù)據(jù)包括連續(xù)圖例。

1. 所有圖表類型的排列方式要統(tǒng)一,所以要考慮整體的圖表空間是適合橫向排列,還是縱向排列。

2. 所有形式總長(zhǎng)度超過內(nèi)容區(qū)換行或換列。

3. 雙軸圖包含了 2 種圖表類型,不同類型的圖例樣式要有所區(qū)分。

4. 連續(xù)型數(shù)據(jù)通過漸變色來展示數(shù)據(jù)大小的變化,具體漸變顏色定義在下文中有詳細(xì)介紹。

圖例

 

背景柵格

背景柵格主要用來幫助用戶快速讀取數(shù)據(jù)值,方便參考和對(duì)比。背景柵格一般有網(wǎng)格線、虛線、點(diǎn)陣、斑馬紋等。在設(shè)計(jì)柵格時(shí),應(yīng)該盡可能減少對(duì)數(shù)據(jù)的干擾,在合適的場(chǎng)景下,甚至可以去掉背景柵格。

柵格

 

Hover 態(tài)(或點(diǎn)擊態(tài))

用戶在查看某一項(xiàng)數(shù)據(jù)指標(biāo)時(shí),給出明確的反饋和提示。數(shù)據(jù)詳情多時(shí),還會(huì)通過浮窗的形式展現(xiàn)。此時(shí)該狀態(tài)下數(shù)據(jù)可以突出顯示,可以變化顏色、增加背景元素(線/面)、或者增加動(dòng)態(tài)變化等。

 

字體

數(shù)據(jù)圖表的字體一般采用無襯線體,另外需要考慮字體的辨識(shí)度,防止在顯示上產(chǎn)生歧義。多數(shù)情況下,數(shù)據(jù)圖表會(huì)運(yùn)行在不同分辨率的大小屏中,所以在文字排版上。

做到以上幾條,我們?cè)谠O(shè)計(jì)圖表時(shí)就可以避免掉絕大多數(shù)的坑,不過畢竟圖表類型這么多,在實(shí)際場(chǎng)景中也會(huì)遇到各種情況。總之有這么幾條總的原則

1. 保持?jǐn)?shù)據(jù)圖表簡(jiǎn)潔、清晰、易讀

2. 強(qiáng)調(diào)用戶關(guān)注的數(shù)據(jù),幫助用戶快速聚焦

3. 弱化次要元素,如柵格、圖例等

4. 刪除不必要的元素,陰影效果、酷炫動(dòng)畫

5. 合理布局圖表的間距、留白等

6. 充分考慮頁面的適配效果

7. 最好使用真實(shí)的數(shù)據(jù)進(jìn)行設(shè)計(jì)排版

 

 第二部分: 圖表配色 

考慮到圖表顏色在設(shè)計(jì)中至關(guān)重要,我把它單獨(dú)分出來討論。由于數(shù)據(jù)的復(fù)雜性和趨勢(shì)變化,配色方案需要考慮非常多的因素,比如可辨識(shí)度、舒適性,還需要考慮特殊人群(色盲色弱人士等)對(duì)顏色的可讀性等等。在配色過程中我們需要區(qū)分背景色和圖表配色。

 

背景配色

背景色一般分為深色、淺色、彩色。在很多 LED 大屏上展現(xiàn)數(shù)據(jù)時(shí),多采用深色背景,比如即將到來的天貓雙十一活動(dòng),官方數(shù)據(jù)展示基本上會(huì)用深藍(lán)色作為背景,這樣可以減少屏幕拖尾,觀看時(shí)也不會(huì)過于刺眼。深色背景中的圖表配色一般不會(huì)采用太多的色彩,且圖表也不會(huì)設(shè)計(jì)得過于復(fù)雜。

中小屏幕的背景選擇性更大,中小屏幕背景色選擇范圍就比較廣,淺色、彩色、深色均可以做出很好的設(shè)計(jì)。在 Web 端,大多數(shù)場(chǎng)景下,我們會(huì)采用淺色甚至白色作為背景,淺色背景更適合展示大量的數(shù)據(jù)信息,而且識(shí)別度更高。

 

圖表配色

圖表配色最關(guān)鍵的一點(diǎn),就是要有辨識(shí)度。

我們可以通過明度上的變化增加辨識(shí)度,也可以采用大跨度的不同色相來增加辨識(shí)度,另外這兩者也可以有機(jī)結(jié)合,常用于色彩較多的圖表中。

 

明度變化

當(dāng)我們需要使用單一色相配色時(shí),勢(shì)必要用明度差來進(jìn)行設(shè)計(jì),明度的跨度也要盡可能大才能更清晰。我們可以通過在灰度模式下配色的辨識(shí)度來判斷明度差是或否合適。

(Google Material Colors 中的 Light Blue 色卡)

需要注意的是,采用單一色相的配色種類不宜太多,建議不超過 6 種。一旦種類過多,色彩之間的明度差異勢(shì)必會(huì)變小,因而影響辨識(shí)度。

 

色相跨度變化

通過色相跨度來增加顏色辨識(shí)度也是我們常用的方式。

色環(huán)

需要的顏色較少時(shí),我們盡量避免使用相近的色相,比如同類色和相近色。盡量選擇對(duì)比色或互補(bǔ)色,這樣可以使不同屬性數(shù)據(jù)在圖表中展示更加清晰。

 

 

美國(guó)大選圖

 

所需顏色較多時(shí),建議最多不超過 12 種色相。

通常情況下人在不連續(xù)的區(qū)域內(nèi)可以分辨 6?12 種不同色相。過多的顏色對(duì)傳達(dá)數(shù)據(jù)是沒有作用的,反而會(huì)讓人產(chǎn)生迷惑。

 

三種常用的取色方法

01. 色環(huán)提取

可以采用色環(huán)中同一明度下的不同色調(diào)作為圖表顏色。前面提到的單色相內(nèi)取色,也可以在這個(gè)色環(huán)中進(jìn)行采集,此外 Google Material Colors 是一個(gè)不錯(cuò)的色板,可以結(jié)合使用。

 

02. 借鑒自然界中的色彩

自然界中有非常豐富的漸變色彩,而且被大家所熟知,這些色彩更容易給人們帶來愉悅感。

自然界中的色彩

 

在借鑒過程中,我們需要注意,比如天空經(jīng)常會(huì)出現(xiàn)紅、藍(lán)、紫的漸變色,但這顏色的明度會(huì)有其規(guī)律,通常是淺黃到深紫,但絕對(duì)不會(huì)出現(xiàn)淺紫到深黃色。還有一些自然界其他的經(jīng)驗(yàn)配色,比如淺綠色到紫藍(lán)色,淺黃色到深綠色,橙棕色到冷灰色。

 

03. 漸變與明度疊加取色

在正常漸變色的基礎(chǔ)上疊加一層只有明度變化的灰色漸變,形成既有明度差異也有色相跨度變化的配色。

 

漸變與明度疊加取色

 

漸變色應(yīng)用案例

好了,配色部分就探討到這里。除了以上關(guān)鍵內(nèi)容以外,我們平時(shí)還需要注意數(shù)據(jù)圖表的適配效果、交互細(xì)節(jié)、以及動(dòng)畫設(shè)計(jì)方面的問題,由于篇幅的關(guān)系暫不展開,以后有機(jī)會(huì)進(jìn)一步探討。

 

說在最后

我們?cè)趨⑴c此類項(xiàng)目設(shè)計(jì)時(shí),通常會(huì)通過以下的流程去思考:

1. 為誰設(shè)計(jì),用戶想要什么

2. 明確設(shè)計(jì)目標(biāo)和價(jià)值

3. 明確數(shù)據(jù)指標(biāo)

4. 選擇最合適的數(shù)據(jù)圖表

5. 規(guī)劃設(shè)計(jì),輸出方案

前三步更多會(huì)由產(chǎn)品經(jīng)理、運(yùn)營(yíng)人員去思考并輸出結(jié)果,最后兩步則由我們?cè)O(shè)計(jì)師來完成,這兩步也正是這兩篇系列文章的主題所在。

在學(xué)習(xí)過程中,我們每個(gè)人可有不同的思考方式和側(cè)重點(diǎn),以我個(gè)人的角度出發(fā):能夠讀懂常見的數(shù)據(jù)可視化圖表,并從圖表中能獲取到關(guān)鍵信息。當(dāng)有一堆數(shù)據(jù)擺在面前,能根據(jù)業(yè)務(wù)目標(biāo)選擇合適的數(shù)據(jù)展示類型,并運(yùn)用設(shè)計(jì)手段完整的表達(dá)給用戶。有了這些沉淀,我就能更好的和產(chǎn)品、運(yùn)營(yíng)打交道,更多的關(guān)注鏈路上游的信息,從而進(jìn)一步提升設(shè)計(jì)的產(chǎn)出質(zhì)量。

歡迎交流、批評(píng)和指正。


作者:又彬

轉(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ì)ssll180.com )是一家專注而深入的界面設(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ì)公司



日歷

鏈接

個(gè)人資料

存檔