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

一提到圖表，大家腦海里浮現(xiàn)的，通常是柱狀圖、餅圖、趨勢(shì)圖等等。這是按照?qǐng)D形等維度對(duì)圖表進(jìn)行分類(lèi)，經(jīng)常會(huì)導(dǎo)致圖表的誤用。

圖表的作用，是幫助我們更好地看懂?dāng)?shù)據(jù)。選擇什么圖表，需要回答的首要問(wèn)題是『我有什么數(shù)據(jù)，需要用圖表做什么』，而不是 『圖表長(zhǎng)成什么樣』 。因此我們從數(shù)據(jù)出發(fā)，從功能角度對(duì)圖表進(jìn)行分類(lèi)。

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

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

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

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

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

Led屏幕

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

p3點(diǎn)與點(diǎn)之間的距離是3毫米，p4點(diǎn)與點(diǎn)之間的距離是4毫米。

2、清晰度不同

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

3、最佳可視距離不同

點(diǎn)間距P3（3mm）的顯示屏，它的最佳可視距離是3.5~10米，點(diǎn)間距P4（4mm）的顯示屏，它的最佳可視距離是5~13.5米?？梢愿鶕?jù)自己的實(shí)際情況，選擇最適合的型號(hào)。

拼接屏

拼接的每塊小屏一般是16:9的高清屏，設(shè)計(jì)尺寸可以把上下高度設(shè)定為1080px，長(zhǎng)度按照拼接屏的數(shù)量比例得出長(zhǎng)度的設(shè)計(jì)尺寸。例如3乘5的一塊大屏幕，高度3塊屏設(shè)為1080，每塊高就是360，360除9乘16等640，640就是一塊屏幕的長(zhǎng)度，640乘5塊屏＝3200最后得出設(shè)計(jì)稿尺寸就是：高1080px乘寬3200px（在這里感謝我的數(shù)學(xué)老師）

現(xiàn)在企業(yè)常用的有無(wú)縫隙、1.7mm縫隙、3.5mm縫隙、三種拼接大屏，縫隙越小越貴。

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

控制端

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

四、字體字號(hào)以及畫(huà)面配色631

字體字號(hào)

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

1. 中文字體:蘋(píng)方,思源黑體

2. 英文字體:DIN,DIN-PRO

3. 數(shù)字字體:Exo

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

配色法則以及顏色選用

運(yùn)用配色631法則，將配色定義為主色60%，輔助色30%，對(duì)比色10%去貫穿整套界面文字的顏色通過(guò)重要、普通、次要去分配，是帶有色彩傾向豐富頁(yè)面視覺(jué)。

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

有時(shí)候會(huì)遇到客戶(hù)需要高飽和度的顏色并且多個(gè)顏色的時(shí)候，在選用時(shí)盡量選用飽和度不要太高的顏色，不然畫(huà)面會(huì)很不協(xié)調(diào)，也就是所說(shuō)的晃眼。

在設(shè)計(jì)過(guò)程中盡量選用深色背景作為畫(huà)面主背景，這個(gè)可以解決大屏因?yàn)樯顔?wèn)題，對(duì)整體頁(yè)面的影響，用戶(hù)也比較容易忽略拼縫中的存在的跨屏感。同時(shí)深色背景時(shí)更容易突出主體,畫(huà)面效果更好，更能體現(xiàn)流光、粒子、發(fā)光等酷炫效果。

同時(shí)，大屏由于有色差，盡量不要使用漸變色，如若需要使用需要到達(dá)現(xiàn)場(chǎng)，根據(jù)大屏反饋的色差，現(xiàn)場(chǎng)調(diào)整，但還是推薦盡量使用純色。

五、畫(huà)面飽滿(mǎn)以及頁(yè)面裝飾點(diǎn)線(xiàn)面

畫(huà)面如何飽滿(mǎn)

方式一：字體的飽滿(mǎn)

將字體處理后，空白面積減少，整體更飽滿(mǎn)了些

方式二：文字的飽滿(mǎn)

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

通常數(shù)字會(huì)比漢字小，為使基線(xiàn)對(duì)齊，數(shù)字與漢字需分開(kāi)設(shè)置字號(hào)。

主副標(biāo)題字號(hào)比例過(guò)大過(guò)小會(huì)導(dǎo)致界面不平衡，建議主標(biāo)題是副標(biāo)題的1.5倍。

方式三：關(guān)系的飽滿(mǎn)

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

采用黃金分割0.618值。也就是橫向21個(gè)小方塊，豎向13個(gè)小方塊。此時(shí)，最優(yōu)雅的板式是A＞B的間距，1＞2＞3的間距。

方式四：圖標(biāo)的飽滿(mǎn)

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

我們?cè)谠O(shè)計(jì)的過(guò)程中，經(jīng)常會(huì)因?yàn)楫?huà)面不夠飽滿(mǎn)頁(yè)面太空，收到客戶(hù)的吐槽，下面就講講如何通過(guò)點(diǎn)線(xiàn)面來(lái)豐富畫(huà)面，使畫(huà)面更豐富更有層次感。

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

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

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

在畫(huà)面添加裝飾的情況下需要給畫(huà)面留足位置，數(shù)據(jù)可視化大屏本身面積就比較大，合理運(yùn)用畫(huà)面以及拼接屏縫隙添加裝飾線(xiàn),可以更好的減輕拼縫所帶來(lái)的影響。裝飾線(xiàn)的添加還可以在后期豐富畫(huà)面動(dòng)效，科技感十足，在頁(yè)面中添加裝飾線(xiàn)在我看來(lái)，非常的有意義，既可以豐富畫(huà)面，又可以完善動(dòng)效，一舉兩得。

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

六、畫(huà)面動(dòng)效以及素材靈感收集

動(dòng)效制作

C4D+AE

在很多設(shè)計(jì)項(xiàng)目中會(huì)用到很多酷炫的科技模型，比如汽車(chē)、人物、地球模型等等，我們可以運(yùn)用C4D來(lái)進(jìn)行主視覺(jué)建模，再通過(guò)AE進(jìn)行動(dòng)效輸出。

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

素材靈感收集

Behance

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

pinterest

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

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

Videohive

這是一個(gè)專(zhuān)注視頻模板和素材的網(wǎng)站(收費(fèi))，在此可以搜索出很多的HUD動(dòng)效視頻以及高清圖片。

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

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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