當(dāng)前位置：首頁(yè) >UI設(shè)計(jì) >可視化UI設(shè)計(jì)中要注意的這幾點(diǎn)

可視化UI設(shè)計(jì)中要注意的這幾點(diǎn)

發(fā)布時(shí)間：2024-03-09 16:06:09 瀏覽量：249次

數(shù)據(jù)可視化主要旨在借助于圖形化手段，然而隨著需求和期待的不斷提高，在大屏數(shù)據(jù)可視化的實(shí)現(xiàn)上，出現(xiàn)了某種趨勢(shì)，即為了使其看上去絢麗多彩而顯得極端復(fù)雜，反而不能有效傳遞出數(shù)據(jù)信息。所以，究竟什么才是真正的大屏數(shù)據(jù)可視化？要設(shè)計(jì)這樣一款可視化大屏需要注意哪些問(wèn)題呢？本篇文章將從專業(yè)的UI角度來(lái)探討該問(wèn)題。

什么是大屏數(shù)據(jù)可視化？

在談?wù)撨@個(gè)問(wèn)題之前，我們首先要再?gòu)?qiáng)調(diào)一下“數(shù)據(jù)可視化”的概念。數(shù)據(jù)可視化其實(shí)就是通過(guò)信息圖對(duì)數(shù)據(jù)進(jìn)行描述而設(shè)計(jì)，以讓人們更易理解的形式展示出來(lái)的一系列手段。其目的在于更形象地表達(dá)數(shù)據(jù)內(nèi)在的信息和規(guī)律，促進(jìn)數(shù)據(jù)信息的傳播和應(yīng)用。

而大屏數(shù)據(jù)可視化是以大屏為主要展示載體的數(shù)據(jù)可視化設(shè)計(jì)。也就是通過(guò)整個(gè)超大尺寸的LED屏幕來(lái)展示關(guān)鍵數(shù)據(jù)內(nèi)容。其特點(diǎn)在于“大面積”、“動(dòng)效炫酷”、“色彩豐富”，大屏易在觀感上給人留下震撼印象，便于營(yíng)造某些獨(dú)特氛圍、打造儀式感。利用其面積大、可展示信息多的特點(diǎn)，通過(guò)關(guān)鍵信息大屏共享的方式可方便團(tuán)隊(duì)討論和決策，所以大屏也常用來(lái)做數(shù)據(jù)分析監(jiān)測(cè)使用。

有一點(diǎn)需要明確，即大屏數(shù)據(jù)可視化的主要目的在于分析和傳達(dá)數(shù)據(jù)信息，并希望通過(guò)設(shè)計(jì)增加美感的同時(shí)能有效地縮短信息傳達(dá)的路徑。也就是說(shuō)，它并不是簡(jiǎn)單的把數(shù)據(jù)變成視覺(jué)設(shè)計(jì)圖，而是以數(shù)據(jù)為視角來(lái)看待世界。通俗的說(shuō)，數(shù)據(jù)可視化就是“讓數(shù)據(jù)好好說(shuō)話”，用信息圖去講述數(shù)據(jù)的故事?？梢暬且环N表達(dá)數(shù)據(jù)的方式，是現(xiàn)實(shí)世界的抽象表達(dá)。

數(shù)字化敘事設(shè)計(jì)的關(guān)鍵項(xiàng)

所以要設(shè)計(jì)出一個(gè)好的大屏，必須找到數(shù)據(jù)和它所代表事物之間的關(guān)系，按照“數(shù)字化敘事”去做設(shè)計(jì)，是全面分析數(shù)據(jù)的關(guān)鍵，同樣也是深層次理解數(shù)據(jù)的關(guān)鍵。那么在大屏UI設(shè)計(jì)中，如果想要美學(xué)形式與功能齊頭并進(jìn)，平衡好設(shè)計(jì)與功能之間，就必須注意以下事項(xiàng)：

1、字體使用

字體優(yōu)先使用系統(tǒng)默認(rèn)字體，需要嵌入字體時(shí)考慮字體的可識(shí)別性、與當(dāng)前設(shè)計(jì)風(fēng)格是否融合、是否可免費(fèi)商用。

2、字體選擇

字體方面，應(yīng)選擇字母容易辨識(shí)不會(huì)產(chǎn)生歧義的字體。

1、要有辨識(shí)度，即字母容易辨識(shí)不會(huì)產(chǎn)生奇異的字體；

2、在字體大小上，字號(hào)跟網(wǎng)頁(yè)設(shè)計(jì)一樣不小于12號(hào)字，可以用于圖表的標(biāo)注，數(shù)據(jù)信息類建議14號(hào)字以上，大屏字體可以適當(dāng)?shù)母笠恍?/p>

3、字母之間的間距應(yīng)小于字偶間距，中文字之間的間距應(yīng)該選擇寬松合適的；

4、在中西文混排時(shí)，要注意中文和西文間的間隔，一般排版的情況都是中文中混排有西文，所以需要在中西文間留有間隔，幫助用戶更快速的掃視文字內(nèi)容。

3、背景色的使用

顏色是出色的工具，使用不當(dāng)會(huì)讓讀者分心。背景色的選擇與可視化展示的設(shè)備相關(guān)，分為深色、淺色、彩色。

小屏幕背景色選擇范圍比較廣，淺色、彩色、深色均可以做出很好的設(shè)計(jì)。相比之下，淺色背景更適合展示大量的數(shù)據(jù)信息，因?yàn)樵跍\色底上數(shù)據(jù)圖表的識(shí)別度比較高。而深色、彩色背景更適合渲染簡(jiǎn)單的數(shù)據(jù)，用于烘托氣氛。

在大屏設(shè)備中普遍用深色作為背景色，以減少屏幕拖尾，觀眾在視覺(jué)上也不會(huì)覺(jué)得刺眼。所有圖表的配色需要以深色背景為基礎(chǔ)。保證可視化圖的清晰辨識(shí)度，色調(diào)與明度變化需要有跨度。

這是因?yàn)樯钌瞪尘翱蓽p少拼縫帶來(lái)的不適感。由于背景面積大，使用暗色背景還能夠減少屏幕色差對(duì)整體表現(xiàn)的影響，同時(shí)暗色背景更能聚焦視覺(jué)，也方便突出內(nèi)容，做出一些流光、粒子等酷炫的效果。

4、顏色搭配

應(yīng)使用色彩明度與飽和度差異顯著、對(duì)比鮮明的配色，盡量避免使用鄰近色配色。當(dāng)然如果顏色過(guò)于相似（例如淺灰與更淺的灰）也要避免，因?yàn)槿藗冸y以發(fā)現(xiàn)兩者間的區(qū)別。相反，也要避免強(qiáng)烈的對(duì)比色，例如紅配綠或藍(lán)配黃。

5、用一種顏色去表達(dá)相同類型的數(shù)據(jù)

在圖表中一般使用自然增量（0、5、10、15），而非不均勻的增量（0、3、5、16）排序則要尋求均勻，不能在視覺(jué)上造成無(wú)序感。

6、對(duì)比

可視化讓數(shù)據(jù)對(duì)比更直觀，但是僅僅把兩組圖表緊挨著放在一起并不能達(dá)成這個(gè)目標(biāo)，甚至更令人費(fèi)解。試想將32個(gè)不同的餅狀圖放在一起對(duì)比系不系很闊怕?

7、選擇最高效的可視化圖形

想要保持視覺(jué)的一致性，讓讀者可以一眼辨別出，這意味著你可能要使用堆疊型柱狀圖、分組條形圖或者折線圖了。但無(wú)論選擇哪種圖形，不要讓讀者費(fèi)力去對(duì)比太多東西。

好了，理論說(shuō)了這么多，是不是覺(jué)得有點(diǎn)抽象？別著急，上一波通過(guò)億信BI酷屏做出來(lái)的優(yōu)秀案例，或者你會(huì)有更直觀的了解。

注意這些可視化UI設(shè)計(jì)注意事項(xiàng)，一定能讓你的作品用戶體驗(yàn)更佳！

上一篇北師大未來(lái)設(shè)計(jì)學(xué)院在第六屆中國(guó)教博會(huì)發(fā)布五項(xiàng)PBL大挑戰(zhàn)項(xiàng)目

下一篇工業(yè)物聯(lián)網(wǎng)可視化數(shù)據(jù)大屏的UI設(shè)計(jì)

激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

可視化UI設(shè)計(jì)中要注意的這幾點(diǎn)

請(qǐng)綁定手機(jī)號(hào)