思考數(shù)據(jù)可視化應(yīng)用設(shè)計(jì)規(guī)范

今天為大家?guī)淼氖菙?shù)據(jù)可視化應(yīng)用設(shè)計(jì)規(guī)范,談?wù)勎以谠O(shè)計(jì)過程中的一些經(jīng)驗(yàn)以及分享~ 部分圖片來源于網(wǎng)絡(luò),侵刪~

一奥裸、圖表的分類介紹以及應(yīng)用范圍

一提到圖表,大家腦海里浮現(xiàn)的沪袭,通常是柱狀圖湾宙、餅圖、趨勢圖等等冈绊。這是按照圖形等維度對圖表進(jìn)行分類侠鳄,經(jīng)常會導(dǎo)致圖表的誤用。

圖表的作用死宣,是幫助我們更好地看懂?dāng)?shù)據(jù)伟恶。選擇什么圖表,需要回答的首要問題是『我有什么數(shù)據(jù)毅该,需要用圖表做什么』博秫,而不是 『圖表長成什么樣』 。因此我們從數(shù)據(jù)出發(fā)鹃骂,從功能角度對圖表進(jìn)行分類台盯。

二、畫面布局在實(shí)戰(zhàn)中的應(yīng)用

在畫面中我們經(jīng)常會遇到各式各樣的屏幕分辨率畏线,有大屏的LED屏静盅,有平面顯示屏,數(shù)字拼接屏等等寝殴。那么具體的項(xiàng)目中我們?nèi)绾稳ザx這些不同尺寸的屏幕來進(jìn)行畫面布局呢蒿叠?

16:9是指顯示器的寬高比,根據(jù)人體工程學(xué)研究蚣常,發(fā)現(xiàn)人的兩只眼睛的視野范圍是一個(gè)長寬比例為16:9的長方形市咽,所以電視顯示器行業(yè)根據(jù)這個(gè)的黃金比例尺寸來設(shè)計(jì)產(chǎn)品。

如若有其他分辨率下的屏幕抵蚊,按照這個(gè)規(guī)律的基本布局施绎,盡量使組件呈現(xiàn)16:9比例排布是最好的溯革;超長分辨率下的大屏設(shè)計(jì)或者拼接很多塊顯示器的大屏可以通過具體業(yè)務(wù)內(nèi)容來展示,按模塊去劃分谷醉,功能點(diǎn)明確即可致稀。

此處布局只是我個(gè)人覺得比較合適的展示方式,并不代表一定是需要這么排布俱尼,還可以有很多的形式去布局抖单。也可能因?yàn)闃I(yè)務(wù)不同,版式也會有調(diào)整遇八,不過萬變不離其中矛绘,掌握基礎(chǔ)要素,其他分辨率下照樣可以有很多編排形式刃永!


三货矮、硬件常用尺寸以及設(shè)備

Led屏幕

1、點(diǎn)間距不同

p3點(diǎn)與點(diǎn)之間的距離是3毫米揽碘,p4點(diǎn)與點(diǎn)之間的距離是4毫米次屠。

2、清晰度不同

P后面那個(gè)數(shù)字越小雳刺,代表兩個(gè)燈珠之間的距離越小,清晰度越高裸违,相對應(yīng)掖桦,價(jià)格也會高,因?yàn)槊科椒降南袼攸c(diǎn)P3比P4多很多供汛,成像效果好枪汪。

3、最佳可視距離不同

點(diǎn)間距P3(3mm)的顯示屏怔昨,它的最佳可視距離是3.5~10米雀久,點(diǎn)間距P4(4mm)的顯示屏,它的最佳可視距離是5~13.5米趁舀±蛋疲可以根據(jù)自己的實(shí)際情況,選擇最適合的型號矮烹。

拼接屏

拼接的每塊小屏一般是16:9的高清屏越庇,設(shè)計(jì)尺寸可以把上下高度設(shè)定為1080px,長度按照拼接屏的數(shù)量比例得出長度的設(shè)計(jì)尺寸奉狈。例如3乘5的一塊大屏幕卤唉,高度3塊屏設(shè)為1080,每塊高就是360仁期,360除9乘16等640桑驱,640就是一塊屏幕的長度竭恬,640乘5塊屏=3200最后得出設(shè)計(jì)稿尺寸就是:高1080px乘寬3200px(在這里感謝我的數(shù)學(xué)老師)

現(xiàn)在企業(yè)常用的有無縫隙、1.7mm縫隙熬的、3.5mm縫隙痊硕、三種拼接大屏,縫隙越小越貴悦析。

另外大屏設(shè)計(jì)還有一個(gè)比較重要的問題就是注意拼接屏之間的縫隙寿桨,設(shè)計(jì)時(shí)千萬不能跨屏設(shè)計(jì),不然很影響美觀强戴。

控制端

目前企業(yè)用的最多的控制端為ipad控制亭螟,需要在ipad上制作出控制端頁面,一般尺寸為2048*1536骑歹,控制端大多數(shù)為按鈕操作预烙,頁面盡量簡單明了。

四道媚、字體字號以及畫面配色631

字體字號

在數(shù)據(jù)可視化設(shè)計(jì)中,一般選中的字體有如下幾種:

中文字體:蘋方,思源黑體

英文字體:DIN,DIN-PRO

數(shù)字字體:Exo

正常1080P情況下扁掸,由于甲方大多數(shù)為政府機(jī)構(gòu),文字要求會比一般的要求大一點(diǎn)最域,一般都是選擇最小16px谴分。字號不是固定的,人是活的镀脂,規(guī)范是由人制定的牺蹄,切勿迷信規(guī)范。

配色法則以及顏色選用

運(yùn)用配色631法則薄翅,將配色定義為主色60%沙兰,輔助色30%,對比色10%去貫穿整套界面文字的顏色通過重要翘魄、普通鼎天、次要去分配,是帶有色彩傾向豐富頁面視覺暑竟。

在數(shù)據(jù)可視化設(shè)計(jì)中斋射,由于大屏是偏暗的,所以需要選擇高飽和度的色彩光羞,并且需要選擇統(tǒng)一的顏色绩鸣,保持畫面協(xié)調(diào)。

有時(shí)候會遇到客戶需要高飽和度的顏色并且多個(gè)顏色的時(shí)候纱兑,在選用時(shí)盡量選用飽和度不要太高的顏色呀闻,不然畫面會很不協(xié)調(diào),也就是所說的晃眼潜慎。

在設(shè)計(jì)過程中盡量選用深色背景作為畫面主背景捡多,這個(gè)可以解決大屏因?yàn)樯顔栴}蓖康,對整體頁面的影響,用戶也比較容易忽略拼縫中的存在的跨屏感垒手。同時(shí)深色背景時(shí)更容易突出主體,畫面效果更好蒜焊,更能體現(xiàn)流光、粒子科贬、發(fā)光等酷炫效果泳梆。

同時(shí),大屏由于有色差榜掌,盡量不要使用漸變色优妙,如若需要使用需要到達(dá)現(xiàn)場,根據(jù)大屏反饋的色差憎账,現(xiàn)場調(diào)整套硼,但還是推薦盡量使用純色。

五胞皱、畫面飽滿以及頁面裝飾點(diǎn)線面

方式一:字體的飽滿

將字體處理后邪意,空白面積減少,整體更飽滿了些

方式二:文字的飽滿

正常情況下為使閱讀更方便反砌,標(biāo)題間距給-10%~20%為佳雾鬼。

通常數(shù)字會比漢字小,為使基線對齊宴树,數(shù)字與漢字需分開設(shè)置字號呆贿。

主副標(biāo)題字號比例過大過小會導(dǎo)致界面不平衡,建議主標(biāo)題是副標(biāo)題的1.5倍森渐。

方式三:關(guān)系的飽滿

當(dāng)A=B時(shí),圖標(biāo)和文字的關(guān)系會混淆冒晰,這種情況下要滿足B>A同衣,用間距分層次

采用黃金分割0.618值。也就是橫向21個(gè)小方塊壶运,豎向13個(gè)小方塊耐齐。此時(shí),最優(yōu)雅的板式是A>B的間距蒋情,1>2>3的間距埠况。

方式四:圖標(biāo)的飽滿

頁面如何裝飾會更豐富(如何運(yùn)用點(diǎn)線面三大構(gòu)成)

我們在設(shè)計(jì)的過程中,經(jīng)常會因?yàn)楫嬅娌粔蝻枬M頁面太空棵癣,收到客戶的吐槽辕翰,下面就講講如何通過點(diǎn)線面來豐富畫面,使畫面更豐富更有層次感狈谊。

1.原畫面設(shè)計(jì)完成

2.添加裝飾線(點(diǎn)線面構(gòu)成)

3.調(diào)整位置,豐富畫面

在畫面添加裝飾的情況下需要給畫面留足位置喜命,數(shù)據(jù)可視化大屏本身面積就比較大沟沙,合理運(yùn)用畫面以及拼接屏縫隙添加裝飾線,可以更好的減輕拼縫所帶來的影響。裝飾線的添加還可以在后期豐富畫面動效壁榕,科技感十足矛紫,在頁面中添加裝飾線在我看來,非常的有意義牌里,既可以豐富畫面颊咬,又可以完善動效,一舉兩得牡辽。

在裝飾線添加這一塊喳篇,推薦大家多去看看國外的可視化設(shè)計(jì),那些幾乎將點(diǎn)線面構(gòu)成發(fā)揮到了極致催享。

六杭隙、畫面動效以及素材靈感收集

動效制作

C4D+AE

在很多設(shè)計(jì)項(xiàng)目中會用到很多酷炫的科技模型,比如汽車因妙、人物痰憎、地球模型等等,我們可以運(yùn)用C4D來進(jìn)行主視覺建模攀涵,再通過AE進(jìn)行動效輸出倒谷。

有的人可能會問在導(dǎo)入數(shù)據(jù)之后可能由于數(shù)據(jù)量不大的原因蔓罚,動態(tài)效果不是很明顯,在這種情況下,咱們可以把不變的數(shù)據(jù)量关贵,做成AE動效,可以把動效導(dǎo)成json文件直接發(fā)給前端疗绣,能很大程度上保障畫面動態(tài)效果烙懦。

素材靈感收集

Behance

在behance上有很多國外的設(shè)計(jì)師,他們的數(shù)據(jù)可視化設(shè)計(jì)做的都非常漂亮昆烁,極具代表性風(fēng)格吊骤,我們可以通過behance搜索HUD 即可搜出來一大堆精美的高清原尺寸設(shè)計(jì)圖,同時(shí)可以把這些作品保存到自己情緒版中静尼,非常的方便白粉。

Pinterest

從“書簽”這個(gè)角度出發(fā),我們可以發(fā)現(xiàn)其實(shí)Pinterest的本質(zhì)就是一張張精美絕倫的圖片書簽鼠渺。每一個(gè)在Pinterest上的圖片其實(shí)都是一個(gè)個(gè)網(wǎng)頁上所提取濃縮而成的書簽鸭巴。pinterest對圖片的關(guān)注是最用心的,去除了其他的各種干擾拦盹,Pinterest只注重圖片的呈現(xiàn)鹃祖。

而且Pinterest有個(gè)非常獨(dú)特的功能,就是他能夠自動篩選同類型圖片,并且精準(zhǔn)度非常高掌敬。

素材網(wǎng)站

圖撲軟件

http://www.hightopo.com/demos/index.html

ThingJS

https://store.thingjs.com/projects

百度地圖個(gè)人編輯器

http://lbsyun.baidu.com/apiconsole/custommap

像素圖生成器

https://pixelmap.amcharts.com/? ?

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末惯豆,一起剝皮案震驚了整個(gè)濱河市池磁,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌楷兽,老刑警劉巖地熄,帶你破解...
    沈念sama閱讀 216,651評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異芯杀,居然都是意外死亡端考,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評論 3 392
  • 文/潘曉璐 我一進(jìn)店門揭厚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來却特,“玉大人,你說我怎么就攤上這事筛圆×衙鳎” “怎么了?”我有些...
    開封第一講書人閱讀 162,931評論 0 353
  • 文/不壞的土叔 我叫張陵太援,是天一觀的道長闽晦。 經(jīng)常有香客問我,道長提岔,這世上最難降的妖魔是什么仙蛉? 我笑而不...
    開封第一講書人閱讀 58,218評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮碱蒙,結(jié)果婚禮上荠瘪,老公的妹妹穿的比我還像新娘。我一直安慰自己赛惩,他們只是感情好哀墓,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,234評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著喷兼,像睡著了一般麸祷。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上褒搔,一...
    開封第一講書人閱讀 51,198評論 1 299
  • 那天,我揣著相機(jī)與錄音喷面,去河邊找鬼星瘾。 笑死,一個(gè)胖子當(dāng)著我的面吹牛惧辈,可吹牛的內(nèi)容都是我干的琳状。 我是一名探鬼主播,決...
    沈念sama閱讀 40,084評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼盒齿,長吁一口氣:“原來是場噩夢啊……” “哼念逞!你這毒婦竟也來了困食?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,926評論 0 274
  • 序言:老撾萬榮一對情侶失蹤翎承,失蹤者是張志新(化名)和其女友劉穎硕盹,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體叨咖,經(jīng)...
    沈念sama閱讀 45,341評論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡瘩例,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,563評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了甸各。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片垛贤。...
    茶點(diǎn)故事閱讀 39,731評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖趣倾,靈堂內(nèi)的尸體忽然破棺而出聘惦,到底是詐尸還是另有隱情,我是刑警寧澤儒恋,帶...
    沈念sama閱讀 35,430評論 5 343
  • 正文 年R本政府宣布善绎,位于F島的核電站,受9級特大地震影響碧浊,放射性物質(zhì)發(fā)生泄漏涂邀。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,036評論 3 326
  • 文/蒙蒙 一箱锐、第九天 我趴在偏房一處隱蔽的房頂上張望比勉。 院中可真熱鬧,春花似錦驹止、人聲如沸浩聋。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽衣洁。三九已至,卻和暖如春抖仅,著一層夾襖步出監(jiān)牢的瞬間坊夫,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評論 1 269
  • 我被黑心中介騙來泰國打工撤卢, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留环凿,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,743評論 2 368
  • 正文 我出身青樓放吩,卻偏偏與公主長得像智听,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,629評論 2 354