手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

實戰(zhàn)經(jīng)驗!可視化大屏設計案例全方位復盤!

2020-3-27    資深UI設計者

隨著大數(shù)據(jù)產(chǎn)業(yè)的蓬勃發(fā)展,很多企業(yè)都開始應用數(shù)據(jù)可視化。所以數(shù)據(jù)可視化設計,絕對是熱門的設計之一。很多 UI 設計師突然會接到公司數(shù)據(jù)可視化設計的需求,如果不了解數(shù)據(jù)可視化設計,肯定是一頭霧水,不知從何入手。本文結(jié)合最近設計案例,分享大屏可視化設計過程中遇到的一些問題以及設計思路,供大家一起交流與學習。

>

△ 最終動態(tài)效果圖

案例分解

首先放的是項目改版前的頁面:

1. 需求介紹

某某應用云,分為五大云平臺模塊:云端綜合調(diào)度、數(shù)據(jù)查詢通道、數(shù)據(jù)應用處理、數(shù)據(jù)存儲管理、管理運行維護。每個大模塊下?有若干個子系統(tǒng)。

可視化?屏首頁需要展示的內(nèi)容包括:

  • 全局數(shù)據(jù):云平臺的數(shù)據(jù)總量,以及 4 個重要關(guān)注數(shù)據(jù)項,2 個次要關(guān)注數(shù)據(jù)項;
  • 云平臺的五?大模塊:云端綜合調(diào)度、數(shù)據(jù)查詢通道、數(shù)據(jù)應用處理理、數(shù)據(jù)存儲管理、管理運行維護(只有兩個 tab 切換鏈接);
  • 搜索功能:搜索類型分為 6 個,默認選中「綜合」類型進行搜索;
  • 重點關(guān)注數(shù)據(jù)信息按指標分多維度展示:原始圖上的維度包括指標、地圖、地域排名、部?排名、類別;
  • 云導航:展示場景在公司展廳,材質(zhì)為 Led 拼接屏,設計尺寸為 1920×1080。

2. 需求分析

分析大屏可視化的一些共性:

  • 屏幕大:大屏一般都是多屏拼接,整體屏幕面積大。
  • 觀距遠:用戶需要遠處觀看屏幕,要保證數(shù)據(jù)文字清晰可見。
  • 交互弱:通過電腦已經(jīng)無法滿足大屏交互需求,現(xiàn)在也有部分開始采用 ipad、手機、激光筆等方式。
  • 視覺強:背景色多采用重色,襯托凸顯數(shù)據(jù),更好地為觀者傳達數(shù)據(jù)信息。
  • 一屏一內(nèi)容:一屏內(nèi)容,說明一件主要事情,統(tǒng)計好它的相關(guān)數(shù)據(jù),避免其他的干擾。

結(jié)合大屏的一些共性特點針對看到的線上舊版本設計,分析存在的問題。

  • 布局混亂,導致視覺不平衡,看不出頁面層次。
  • 藍色為主色調(diào),黃色點綴顏色顯得比較單一沒有規(guī)則。
  • 圖表比較單一,不能有效傳達數(shù)據(jù)信息。

3. 布局

整合數(shù)據(jù),分析出主要數(shù)據(jù)、次要數(shù)據(jù)、總量數(shù)據(jù)、細分數(shù)據(jù)、各數(shù)據(jù)的維度等等。首先優(yōu)化頁面布局,可以先在紙上畫一畫,然后腦子里有大概思路以后再用電腦繪制,如下圖:

采用柵格化對稱布局,讓整體視覺左右平衡。

4. 風格

一提到數(shù)據(jù)可視化大家往往能想到科技、數(shù)據(jù)、藍色等一些普遍關(guān)鍵詞。

了解到客戶是想做一個科技感強、炫酷的視覺效果??梢栽诰W(wǎng)上找一些效果圖或是自己曾經(jīng)做過的案例供客戶選擇,確定一個大致的風格,然后結(jié)合具體的業(yè)務場景進行設計。

5. 顏色

顏色上結(jié)合產(chǎn)品使用場景,以及整個產(chǎn)品調(diào)性還是以藍色為主,背景選用深色調(diào),讓視覺更好聚焦,內(nèi)容部分采用比較透亮的藍色系,保證內(nèi)容與背景有一定的對比關(guān)系,便于業(yè)務信息傳達。

6. 主體地圖

地圖為大屏的主要展示內(nèi)容,首先分析展示的目的是為了看清各個城市間的不同分布情況,和城市數(shù)據(jù)的匯集效果。

如圖:

改版前:地圖過于單薄,沒有立體感,太平缺乏層次,顏色黃色不符合產(chǎn)品調(diào)性。

改版后:主色調(diào)改為科技藍,在原有地圖上增加外發(fā)光和多層陰影疊加,增加地圖的立體感,地圖上增加科技線條上升的效果代表每個城市數(shù)據(jù)變化的提升,地圖背景采用比較弱化的轉(zhuǎn)動線條圓形,襯托地圖主體,使得畫面更加豐富。

7. 地圖效果的實現(xiàn)方法

首先用 ps 拉框助手新建一個山東的地圖(拉框助手的使用獲取方法可以參照上篇文章)。

完成后會得到一個叫 map 文件夾的地圖分層文件,如圖所示。這里需要對每個城市的顏色進行調(diào)整,為了區(qū)分每個城市之間的數(shù)據(jù)不同關(guān)系。

調(diào)整完塊之間的顏色后,就需要給地圖整體增加立體效果。

首先,是整體給地圖加了一個描邊和外發(fā)光。描邊是為了強化地圖邊緣,外發(fā)光是為了地圖與背景有一個區(qū)分。

其次為了增加地圖立體感,需要給地圖增加多層陰影疊加的效果。復制現(xiàn)有形狀層,拼合成一個山東省的地圖,如下圖:

最后,把拼合好的圖層移動到 map 文件夾下面,陰影可以添加多層,這里針對每一層進行不同顏色大小的調(diào)整,就是下面的這種效果了,地圖的體積厚度感也就出來了。這里只是提供一個大概的思路,大家可以多去嘗試。

整體地圖效果調(diào)整完成后,就是給地圖增加些紋理,和上升線條這些細節(jié)上的效果了。紋理可以用圖案疊加,或者找一張紋理圖剪切蒙版實現(xiàn),最后再添加上升線條的效果,地圖的效果就完成了。

最后加上線條上升的動態(tài)效果:

8. 數(shù)據(jù)圖表拆分

在選定數(shù)據(jù)圖表之前,首先要確定圖表之間的關(guān)系,可以從以下四個維度進行思考分析:

  • 聯(lián)系:數(shù)據(jù)之間的相關(guān)性;
  • 分布:指標里的數(shù)據(jù)主要集中在什么范圍、表現(xiàn)出怎樣的規(guī)律;
  • 比較:數(shù)據(jù)之間存在何種差異、差異主要體現(xiàn)在哪些方面;
  • 構(gòu)成:指標里的數(shù)據(jù)都由哪幾部分組成、每部分占比如何。

可以參照下面這個圖:

△ 圖片來自于網(wǎng)絡,侵刪

當確定好分析維度后,事實上我們所能選用的圖表類型也就基本確定了。接下來我們只需要從少數(shù)幾個圖表里篩選出最能體現(xiàn)我們設計意圖的那個就好了。

傳統(tǒng)的圖表比如 echarts 圖表在視覺上展示可能不是很美觀好看,可根據(jù)選擇的圖表在其基礎之上進行美化設計,總之選定圖表最重要的兩個點就是:易理解、可實現(xiàn)。

易理解:就是要考慮最終用戶,可視化結(jié)果應該是一看就懂,不需要思考和過度理解,因而選定圖表時要理性,避免為了視覺上的效果而選擇一些對用戶不太友好的圖形及元素。

可實現(xiàn):主要是跟開發(fā)前期溝通好實現(xiàn)方式,一般都采用開源組件庫的居多,比如 echarts 組件庫,我們設計的圖形圖表,要開發(fā)能夠?qū)崿F(xiàn)。實際工作中,一些可視化效果開發(fā)用代碼寫很容易實現(xiàn),效果也不錯,但這些效果設計師用 Ps/Ai/Ae 這些工具模擬時會發(fā)現(xiàn)比較困難。同樣的,某些效果設計師用設計工具可以輕易實現(xiàn),但開發(fā)要用代碼落地卻非常困難,所以大屏設計中跟開發(fā)常溝通非常重要,我們需要明確哪些地方設計師可以盡情發(fā)揮,哪些地方需要謹慎設計。一個項目總有周期與預算限制,不會無限期的修改迭代,所以設計師在這里需要抓住重點,有取舍,不鉆牛角尖、死磕不放。

案例中在圖表選擇上,強化科技感元素,條形圖打破傳統(tǒng)條形圖的展示形式,采用電池晶格的展示形式,在保持圖表功能的同時更加凸顯科技感。

從頁面的整體看,已經(jīng)有兩處用到了條形圖、柱狀圖,如果這里還是條形圖,那么頁面看起來會很單調(diào),圖表也沒有表現(xiàn)出多樣性,所以現(xiàn)在設計要體現(xiàn)圖表的多樣性也能夠有排名的直觀呈現(xiàn)。以下圖表采用科技圓盤的形式,運用科技線條的上升狀態(tài)代表排名的先后順序,所有圖表都采用數(shù)據(jù)降序來展示排名更加直觀。

改版前的圖標樣式比較單一,改版后針對每組數(shù)據(jù)不同的對比形式,采用比較貼合的圖表進行展示,篇幅原因就不一一做展示了。

附上最終視覺效果圖:

總結(jié)

大屏設計需要注意的點:

  • 需求分析:對需求進行梳理,分清數(shù)據(jù)間的主次關(guān)系以及對比指標,跟客戶溝通清楚細節(jié)。
  • 確認布局:布局上根據(jù)數(shù)據(jù)主次關(guān)系,采用柵格化布局(可以在紙上畫一下理清思路)。
  • 情緒板定義設計關(guān)鍵詞,確定風格。找參考圖給客戶確認大致的設計方向。
  • 顏色貼合業(yè)務。
  • 圖表易理解可實現(xiàn)。

以上是我對數(shù)據(jù)可視化大屏的案例總結(jié),希望能幫助到你。除此之外還有很多地方?jīng)]有涉及到,包括具體設計的操作方式、選取圖形元素的具體方法,以及在各種大屏中所需要的相對應的組件等,在龐大的可視化大屏設計系統(tǒng)中,還有很多值得學習參考和優(yōu)化的知識,歡迎溝通交流,大家一起努力。

文章來源:優(yōu)設   

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://www.88yangsc.com

存檔