淺談可視化設計-數據時代的美味「烹飪師」（上篇）

目錄：

1. 什麼是大屏數據可視化
2. 設計流程介紹

1. 結合情感打造二維設計美感
2. 構建空間感&二維與三位的融合
3. 小結

還記得大學學設計的時候學院裏流傳了一句話：「有百分之八十的設計師都幻想着成爲一名廚師。」

我以前從未細品過這句話的原因，只以爲是同窗們之間的玩笑。在我大二的時候有幸與一位懂烹飪的學姐一塊兒租房。從那個時候開始，我受她的影響也開始對烹飪着迷。我漸漸的發現，烹飪其實與設計是很是類似的：食材的選擇，調味料的選擇，切菜炒菜的技法，烹煮的方式，擺盤的方式，菜品的顏色控制，甚至是碗盤形狀顏色的挑選等等......經過這些小點略微的改變，導致每一個人烹飪的料理味道都徹底不一樣。

當我懂得這些，並開始思考如何烹飪屬於本身味道的美味料理時，我發現我開始了「設計料理」的過程。設計它每道工序添加調料的多少改變精緻的味道，設計它的食材搭配，設計它的擺盤方式，甚至個人料理的出場方式，以達到給品嚐料理的人最好的體驗來充分體會到這道菜食材的精華所在。我想這就是設計師會癡迷於成爲廚師的緣由所在吧。對於設計師而言，這些食材均可以成爲設計的對象，來達到一個最好的用戶體驗，來得到做爲一個廚師的知足感。

在當代的數據時代裏，做爲可視化設計師的目的就是作到拿到任何的食材—數據，經過對它的設計，把凌亂冰冷的數據賦予它本身的「味道」，讓用戶一眼就能夠明白它的含義，它的不一樣。經過設計的加工，如料理選擇調料與擺盤同樣，幫助用戶對它的理解更深，而且增長對它的喜好。清晰的闡明數據的含義，避免美味食材的淪陷，直觀呈現大數據背後的意義，數據可視化就是這樣變得有價值。下面，讓咱們走入數據可視化設計的方法，來看看咱們的獨家菜譜吧。

談論起數據可視化設計，許多人會產生一個疑問：什麼是數據可視化？咱們由此問題着手，來談論下數據可視化設計。

經研究代表，人類大腦對視覺信息的處理優於對文本的處理。所以，數據可視化是使用圖表、圖形和設計元素把數據進行可視化，把相對複雜、抽象的數據經過可視的方式以人們更易理解的形式展現出來的一系列手段。數據可視化可使人們更有效率的完成某些任務，咱們能夠理解爲三點優點：

• 美觀展現: 用數據展現企業特點，大會展臺，媒體現場展現等
• 數據驅動：實時查看業務概況、監控預警、驅動內部快速響應
• 發掘價值：可視化數據呈現後，帶來的視覺感覺會幫助人發現新的因素

在 HT 技術支持下，數據可視化除了「可視」，還可有可交流、可互動的特色。設計帶來的不只是瞬息處理海量數據搭配酷炫的可視化樣式所引發的視覺震撼，更應注重爲業務需求服務，設計出符合不一樣行業需求的個性定製可視化，利於企業作出正確的商業決策，以有根據的數據呈現而幫助企業進行更科學的判斷而避免決策的失誤。

1. 從業務需求分定優先級

關鍵指標是一些歸納性詞語，是對一組或者一系列數據的統稱。經過規定主，次，輔，三個指標的關鍵詞來概念性的清晰大屏的主要展現內容，例如咱們作的一個照明的監測項目，咱們能夠歸類成這三種：

• 主：主要指標位於屏幕中央，爲地圖展示照明區域使用數據。
• 次：次要指標位於屏幕兩側以圖表的形式展示。
• 輔：主要指標的補充信息鼠標點擊或懸停展現以及交互動效展現。

這樣就能夠方便在腦海中肯定大屏的總體構架，以便於咱們接下來的細化。

2. 經過指標分析維度確立可視化圖表類型

同一個指標的數據，從不一樣維度分析就有不一樣結果。若是分析的維度沒有找準或定義的比較混亂，就會使可視化圖表沒法清晰的看清楚含義，令人困惑。這裏咱們引用Stephen Few 的文章 《Visual Business Intelligence》的四項維度-比較，聯繫，分佈，構成，來分析數據的邏輯性。

在思考四項維度的時候咱們要思考幾個問題：
1.數據之間的相關性？
2.指標裏的數據主要集中在什麼範圍、表現出怎樣的規律？
3.數據之間存在何種差別、差別主要體如今哪些方面？
4.指標裏的數據都由哪幾部分組成、每部分佔好比何？ 以上的示例圖表的樣式比較傳統，可是思考問題的邏輯性是相通的，值得借鑑使用。

3.根據大屏尺寸，規劃頁面佈局，確立交互稿

確立圖表類型後，下一步要進入到佈局具體的信息位置，確立交互稿的步驟。確立交互稿的第一步就是要肯定大屏的尺寸。客戶的大屏尺寸不用會影響到總體的佈局和效果，設計的時候也要考慮下是否有拼接大屏接縫的問題，儘可能以拼接屏尺寸來確立柵格化佈局。

尺寸確立後，接下來要對設計稿進行佈局和頁面的劃分。佈局這裏咱們就要參考第一項的業務需求優先級來佈局畫面分割面積。核心業務指標安排在中間位置、佔較大面積；其他的指標按優先級依次在覈心指標周圍展開。通常把有關聯的指標讓其相鄰或靠近，把圖表類型相近的指標放一塊兒，這樣能減小觀者認知上的負擔並提升信息傳遞的效率。視覺上要儘可能規避文字羅列或圖表羅列，注意方圓圖表的面積比例問題等，也是佈局期間須要注意的事項。

4.肯定設計風格與設計進行

設計風格的肯定主要以如下幾點來肯定： 設計風格的選擇切勿追求效果炫酷而不符合業務需求，選擇最合適的而不是選擇最絢爛的尤其重要。由於設計中涉及的範圍比較廣，咱們在後兩章節單獨着重講解。下面展現部分咱們作的不一樣行業對應的不一樣構圖佈局與元素的應用案例：

發動機的可視化以突出發電機產品爲主，周圍UI以大圓角形式設計，使視覺由四周向中間包圍，集中於中心。

挖掘機的可視化採用了大地色進行設計，採用了色彩共情的原理，結合簡潔的線性UI，使大屏在接地氣的同時不失高端雅緻的效果。

醫院的可視化設計以冷白色爲主，突出醫院給人的乾淨，嚴肅的感受，彷彿能聞到消毒水的氣味。以模型展現爲主，按鈕樣式也採用了以面爲主的設計配合大面積色塊分佈爲主的模型設計。

地鐵站的可視化以寫實風格爲主，再現了真實地鐵站的樣貌，以及身臨其境的動畫交互體驗。

農業可視化案例嘗試了 low poly 風格，以簡潔插畫風與略抽象畫的模型濃縮了農業的運做場景，色調以貼近植物的綠色爲主，設計出可愛的動畫風格可視化效果。

5.溝通與修改

在作設計中一個很重要的點就是溝通，不管是設計師內部的溝通仍是設計師與客戶的溝通都會對大屏最後的修改效果產生一個很大的影響。設計師在內部溝通時要從專業角度吸收知識與建議，並從客戶那裏吸收業務需求與客戶心理訴求。這時對於意見的篩選取捨就很重要，設計師可能會被複雜的審覈流程和不一樣外行人士的不一樣喜愛而干擾，這時設計師須要綜合意見，與項目經理一塊兒把控設計的走向，在和客戶溝通中彼此商討相互學習與意見的妥協從而一步步優化設計方案。固然設計沒有標準答案，也沒有完美的面面俱到的設計方案，最理想的標準就是達到客戶的理想訴求但對於本身作的設計必定要過了本身的這一關，能協調好本身的審美與客戶的需求兩贏的狀態纔是一個好的設計。

同時在設計時由於使用的設備不一樣，大屏有它本身獨特的分辨率、屏幕組成、色彩顯示以及運行、展現環境，這裏的不少問題只有設計稿投到大屏上纔可以被發現，因此這一步在樣圖溝通確認環節很是重要，有時候須要開發出demo，反覆測試屢次來修改協調最終上屏效果。在測試時從設計上能夠重點注重如下幾點：

一、以前確立的佈局在放入設計內容後是否依然合適

二、確立的圖表類型帶入數據後是否仍然客觀準確

三、根據關鍵元素、色彩、結構、質感打造出的頁面風格是否基本傳達出了預期的氛圍和感覺

四、已有的樣式、數據內容、動效等在開發實現方面是否存在問題

五、大屏是否存在色差、文字內容是否清晰可見、頁面是否存在變形拉伸等現象

6.開發與測試

將設計稿交與前端進行製做，與程序溝通交互切換效果，大屏動效等，一塊兒實現把控大屏的最終效果。

上篇咱們瞭解了大屏數據可視化的概念與設計流程，下篇將帶領你們進入數據藝術世界，發散設計思惟，體驗設計樂趣，《可視化設計-數據時代的美味製造者（下篇）》，歡迎各位看官評論關注！