技術文章

當前頁面: 首頁 >技術文章 >淺談可視化設計-數據時代的美味“烹飪師”

淺談可視化設計-數據時代的美味“烹飪師”

供稿:工業物聯網老虎 2020/9/8 11:27:46

0 人氣:5

  • 關鍵詞: 數據可視化 組態軟件 物聯網 可視化
  • 摘要:經研究表明,人類大腦對視覺信息的處理優于對文本的處理。因此,數據可視化是使用圖表、圖形和設計元素把數據進行可視化,把相對復雜、抽象的數據通過可視的方式以人們更易理解的形式展示出來的一系列手段

目錄:

1. 什么是大屏數據可視化

2. 設計流程介紹

3. 結合情感打造二維設計美感

4. 構建空間感&二維與三位的融合

5. 小結

還記得大學學設計的時候學院里流傳了一句話:“有百分之八十的設計師都幻想著成為一名廚師?!?它每道工序添加調料的多少改變精致的味道,設計它的食材搭配,設計它的擺盤方式,甚至我的料理的出場方式,以達到給品嘗料理的人最好的體驗來充分體會到這道菜食材的精華所在。對于設計師而言,這些食材都可以成為設計的對象,來達到一個最好的用戶體驗,來獲得作為一個廚師的滿足感。

在當代的數據時代里,作為可視化設計師的目的就是做到拿到任何的食材—數據,通過對它的設計,把凌亂冰冷的數據賦予它自己的“味道”,讓用戶一眼就可以明白它的含義,它的不同。通過設計的加工,如料理選擇調料與擺盤一樣,幫助用戶對它的理解更深,并且增加對它的喜愛。清晰的闡明數據的含義,避免美味食材的淪陷,直觀呈現大數據背后的意義,數據可視化就是這樣變得有價值。下面,讓我們走入數據可視化設計的方法,來看看我們的獨家菜譜吧。

淺談可視化設計-數據時代的美味“烹飪師”(上)

淺談可視化設計-數據時代的美味“烹飪師”(上)

談論起數據可視化設計,許多人會產生一個疑問:什么是數據可視化?我們由此問題著手,來談論下數據可視化設計。

經研究表明,人類大腦對視覺信息的處理優于對文本的處理。因此,數據可視化是使用圖表、圖形和設計元素把數據進行可視化,把相對復雜、抽象的數據通過可視的方式以人們更易理解的形式展示出來的一系列手段。數據可視化可以使人們更有效率的完成某些任務,我們可以理解為三點優勢:

美觀展示: 用數據展示企業特色,大會展臺,媒體現場展示等

數據驅動:實時查看業務概況、監控預警、驅動內部快速響應

發掘價值:可視化數據呈現后,帶來的視覺感受會幫助人發現新的因素

在 圖撲軟件(Hightopo,以下簡稱 HT )技術支持下,數據可視化除了“可視”,還有可交流、可互動的特點。設計帶來的不僅是瞬息處理海量數據搭配酷炫的可視化樣式所引起的視覺震撼,更應注重為業務需求服務,設計出符合不同行業需求的個性定制可視化,利于企業做出正確的商業決策,以有根據的數據呈現而幫助企業進行更科學的判斷而避免決策的失誤。

淺談可視化設計-數據時代的美味“烹飪師”(上)

淺談可視化設計-數據時代的美味“烹飪師”(上)

圖撲軟件(Hightopo)

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

關鍵指標是一些概括性詞語,是對一組或者一系列數據的統稱。通過規定主,次,輔,三個指標的關鍵詞來概念性的清晰大屏的主要展示內容,例如我們做的一個照明的監測項目,我們可以歸類成這三種:

>主要指標位于屏幕中央,為地圖展現照明區域使用數據。

>次:次要指標位于屏幕兩側以圖表的形式展現。

>輔:主要指標的補充信息鼠標點擊或懸停展示以及交互動效展示。

淺談可視化設計-數據時代的美味“烹飪師”(上)

圖撲軟件(Hightopo)

這樣就可以方便在腦海中確定大屏的整體構架,以便于我們接下來的細化。

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

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

淺談可視化設計-數據時代的美味“烹飪師”(上)

圖撲軟件(Hightopo)

在思考四項維度的時候我們要思考幾個問題:

1.數據之間的相關性?

2.指標里的數據主要集中在什么范圍、表現出怎樣的規律?

3.數據之間存在何種差異、差異主要體現在哪些方面?

4.指標里的數據都由哪幾部分組成、每部分占比如何?

以上的示例圖表的樣式比較傳統,但是思考問題的邏輯性是相通的,值得借鑒使用。

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

確立圖表類型后,下一步要進入到布局具體的信息位置,確立交互稿的步驟。確立交互稿的第一步就是要確定大屏的尺寸??蛻舻拇笃脸叽绮挥脮绊懙秸w的布局和效果,設計的時候也要考慮下是否有拼接大屏接縫的問題,盡量以拼接屏尺寸來確立柵格化布局。

尺寸確立后,接下來要對設計稿進行布局和頁面的劃分。布局這里我們就要參考第一項的業務需求優先級來布局畫面分割面積。核心業務指標安排在中間位置、占較大面積;其余的指標按優先級依次在核心指標周圍展開。一般把有關聯的指標讓其相鄰或靠近,把圖表類型相近的指標放一起,這樣能減少觀者認知上的負擔并提高信息傳遞的效率。視覺上要盡量規避文字羅列或圖表羅列,注意方圓圖表的面積比例問題等,也是布局期間需要注意的事項。

淺談可視化設計-數據時代的美味“烹飪師”(上)

圖撲軟件(Hightopo)

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

設計風格的確定主要以下幾點來確定:

設計風格的選擇切勿追求效果炫酷而不符合業務需求,選擇最合適的而不是選擇最絢爛的尤為重要。因為設計中涉及的范圍比較廣,我們在后兩章節單獨著重講解。下面展示部分我們做的不同行業對應的不同構圖布局與元素的應用案例:

淺談可視化設計-數據時代的美味“烹飪師”(上)

圖撲軟件(Hightopo)

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

淺談可視化設計-數據時代的美味“烹飪師”(上)

圖撲軟件(Hightopo)

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

淺談可視化設計-數據時代的美味“烹飪師”(上)

圖撲軟件(Hightopo)

醫院的可視化設計以冷白色為主,突出醫院給人的干凈,嚴肅的感覺,仿佛能聞到消毒水的氣味。以模型展示為主,按鈕樣式也采用了以面為主的設計配合大面積色塊分布為主的模型設計。

淺談可視化設計-數據時代的美味“烹飪師”(上)

圖撲軟件(Hightopo)

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

淺談可視化設計-數據時代的美味“烹飪師”(上)

圖撲軟件(Hightopo)

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

5.溝通與修改

在做設計中一個很重要的點就是溝通,無論是設計師內部的溝通還是設計師與客戶的溝通都會對大屏最后的修改效果產生一個很大的影響。設計師在內部溝通時要從專業角度吸取知識與建議,并從客戶那里吸取業務需求與客戶心理訴求。這時對于意見的篩選取舍就很重要,設計師可能會被復雜的審核流程和不同外行人士的不同喜好而干擾,這時設計師需要綜合意見,與項目經理一起把控設計的走向,在和客戶溝通中彼此商討相互學習與意見的妥協從而一步步優化設計方案。當然設計沒有標準答案,也沒有完美的面面俱到的設計方案,最理想的標準就是達到客戶的理想訴求但對于自己做的設計一定要過了自己的這一關,能協調好自己的審美與客戶的需求兩贏的狀態才是一個好的設計。

同時在設計時因為使用的設備不同,大屏有它自己獨特的分辨率、屏幕組成、色彩顯示以及運行、展示環境,這里的很多問題只有設計稿投到大屏上才能夠被發現,所以這一步在樣圖溝通確認環節非常重要,有時候需要開發出demo,反復測試多次來修改協調最終上屏效果。在測試時從設計上可以重點注重以下幾點:

  • 之前確立的布局在放入設計內容后是否依然合適

  • 確立的圖表類型帶入數據后是否仍然客觀準確

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

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

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

6.開發與測試

將設計稿交與前端進行制作,與程序溝通交互切換效果,大屏動效等,一起實現把控大屏的最終效果。

審核編輯(王靜)
更多內容請訪問 工業物聯網老虎(http://home.gongkong.com/profile/?uid=S020052013411100001)

手機掃描二維碼分享本頁

工控網APP下載安裝

 

我來評價

評價:
一般
支付宝考试后赚钱 河内5分彩是官方的吗 深圳风采2011009 2011热门股票推荐 青海十一选五开奖图 江西快三最新开奖 沈阳化工股票走势 福利彩票北京28哪里有彩票店 北京赛车开奖直播app 福彩好彩一开奖结果 吉林快3官方