<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          數據可視化在移動端的應用

          seo達人

          1.應用場景

          數據可視化在移動端的主要體現是“數據圖表”,我們最常用的數據設計組件就是:柱狀圖、折線圖、環形圖等,它們簡單易懂,容易被用戶接受。它們常常出現在與我們生活息息相關的產品當中,例如健身 app 中使用圖表記錄我們體重的變化;效率工具型的 app 記錄分析你在某一件事情的花費的時間;金融理財展示股市中某一支股票的價格走勢等等。

           

          2.數據可視化的特點

          數據可視化屬于一種理性思維,產品通過圖表可以向用戶清晰的反應用戶在每一個項目中所花費的時間和精力,用戶可以通過數據可視化的圖表形式快速了解到其中的信息?,F在iOS 和 Android 平臺暫時沒有推出在數據可視化的設計規范,但是大家只要按照平臺的基本規范設計,相信都能設計出美觀、大方數據圖表。如果大家對數據可視化有興趣,這里向大家推薦 ANtv(https://antv.alipay.com/zh-cn/index.html)螞蟻數據可視化團隊,ANtv 是國內在數據可視化發展最完善的團隊之一。 

           

          3.使用原則

          在數據可視化設計的時候我們首先要注意的是盡量避免使用“復雜”的數據表現形式,針對于普通用戶我們要始終堅持 – 簡單易懂的原則。其次在選擇數據表現形式的時候一定要考慮到是否適用于目標數據,如果不能清晰的向用戶清晰的傳遞出數據背后的信息,那么建議你重新進行分析,更換數據表現形式。在我們經常使用的數據圖表中,柱狀圖擅長數值比較;折線圖擅長做數據趨勢展示;餅圖和環形圖適用于各類數據比例比較。這里我們需要注意的是折線適用于具有連貫關系數據緯度進行比較,而柱狀圖則不需要。我們以不同蔬菜的價格比較和單個蔬菜價格趨勢為例,例如當我們在比較各種蔬菜的價格的時候,由于各品類蔬菜沒有任何連貫性的邏輯關系,所以折線圖不合適,而柱狀圖則能清晰的表達蔬菜之間價格比對。
          蔬菜品種之間沒有任何連續性,所以不適合用折線圖來表示;而單個蔬菜的價格走勢是通過具有連續性的“時間”緯度進行比較的,所以趨勢圖選擇折線圖更加合適。
          餅圖不適用于分類過多的數據展示,隨著數據種類的增加切片的數量也隨之增加,每個切片的大小過于相似,無法達到數據對比的目的。
          相對PC,手機屏幕展示的區域有限,不適宜展現數據緯度過多的數據。假設我們遇到數據緯度眾多的數據,我們可以通過橫軸交互來增加數據展示區域。
          我們還可以對數據進行梳理清洗,通過增加交互步驟減少用戶的記憶負擔,分段查看數據。例如燈塔專業版中的行業數據將電影行業中涵蓋的信息分成票房、影片數、影院數、銀幕數等維度進行分析。

           

          4.場景分析

          柱狀圖

          柱狀圖擅長對不同類型的數據進行數值比較,柱狀圖之間的條目相對獨立,數據之間不需要有邏輯的關聯性。我們常用的柱狀圖分為橫向柱狀圖和縱向柱狀圖,如下圖:
          兩者的區別在于縱向柱狀圖帶有一定的邏輯關系,可用于 TOP 排名,數值越大的位置越靠上。例如 iOS 系統中會記錄你最常使用的 App 形成縱向柱狀圖,并按照使用 App 的時長大小進行一次排列。

           

          橫向柱狀圖

          橫向柱狀圖只需在以 X 軸為基線通過對比柱形圖的長短就可以進行數據比較,因其簡潔、直白的設計形式深受用戶們的喜愛,應用領域極廣,是我們最常見到的圖表形式之一。例如在支付寶中會顯示用戶每月的消費,并能通過橫軸交互查看更多數據。

           

          縱向柱狀圖

          縱向柱狀圖以 Y 軸為基線通過對比柱形圖的長短就可以進行數據比較,縱向柱狀圖區別于橫向柱狀圖的地方在于:在具有一定關聯性的數據種類進行比較的時候,可以通過數值的大小依次排列顯示明確數據等級關系。例如網易有錢中會按照你消費的品類數值的大小進行排布,讓用戶明確知道自己在那一方面消費最多,并且依靠 Y 軸交互我們可以向下滑動查看更多數據信息。

           

          折線圖

          折線圖通過線鏈接橫向相鄰數據的數據表現形式,通常相鄰數據之間都有一定的邏輯關系,一般以時間屬性為主,表達一定周期之內的趨勢走向。
          折線圖在金融領域的產品應用極其廣泛,“折線圖+漲幅數據”無疑是吸引用戶理財的利器。這時折線圖不單單代表數據,在用戶心中已經成為一種標志。
          當然折線圖最重要還是記錄段時間之內的趨勢變化,例如微信運動中記錄用戶每天的運動量,用戶可以根據折線圖反饋的信息來調整自己的運動計劃。

           

          餅狀圖

          餅狀圖是通過將一個圓餅按照分類的占比劃分成多個區塊,整個圓餅代表數據的總量,每個區塊(圓?。┍硎驹摲诸愓伎傮w的比例大小,所有區塊(圓?。┑募雍偷扔?100%。
          現在 App 較少用到餅狀圖而更多的采用環形圖,因為餅狀圖和環形圖兩者有異曲同工之妙,都是應用于表示不同分類的占比情況,通過弧度(角度)大小來對比各種分類。但相對于餅狀圖,環形圖的空間利用率更高。

           

          環形圖

          由兩個及兩個以上大小不一的餅圖疊在一起,挖去中間的部分所構成的圖形。通過弧長來比較各類數據的占比大小。
          在燈塔專業版中通過環形圖能夠準確的表達出各個電影所占總場次的比例。

           

          5.畫重點

          1.在數據可視化的設計當中我們要是始終堅持“簡單易懂”的原則,選擇最合適的數據表達形式
          2.柱狀圖擅長數值比較;折線圖擅長做數據趨勢展示;餅圖和環形圖適用于各類數據比例比較。
          3.在有限的移動端的顯示區域,我們可以借助于 XY 軸交互手段和對數據進行梳理增加交互步驟分段查看更多數據。 

           


          作者:姜正

          轉載請注明:學UI網》數據可視化在移動端的應用

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司





          數據可視化大屏設計經驗分享【高級篇】

          seo達人

          案例解析

          下圖是我們優秀的技術人員利用模版直接布局出來的頁面,也可以理解為需求頁面,接下里就需要我根據頁面的內容重新定義風格設計。

          原圖

           

          當我看到這個頁面,首先要知道他是干什么的?功能是什么?是純數據展示還是監測預警?通過這些了解基本就能知道有沒有交互行為,有交互和沒交互在數據可視化的設計思路上會有很多不同,還有功能不一樣設計方向也會不一樣。

          其次要分析出主次數據總分數據,還要剖析目前圖表運用的合理性和大屏的設計比例尺寸等等,最終可以通過分析對頁面有個合理的布局展示。

          通過分析對頁面重新布局,如下圖:

          重新布局圖

           

          最終設計稿

           

          數據可視化頁面設計,如果頁面中有一個非常搶眼的主視覺圖,那么一般對其他的元素不會過度的設計,如果都是搶視覺的元素整個頁面太“花枝招展”了。

          上圖左右兩邊的圖表只是簡單的呈現出來,這樣整體視覺上更有呼吸感,有張力,如果每個圖表都加上邊框,頁面就會顯得局促,常見的3D地理城市,主視覺為3D模型,輔助元素一般都不過度修飾。

           

          1、關于板式風格元素

          主題風格構思階段:

          既然是“首都國際機場”那么用3D地球來展示最佳不過了,3D地球無疑是一個重磅視覺元素,飛機圍繞地球往返飛行形成光線,這樣看上去頁面會有很多線條。

          設計講究“你中有我,我中有你”所以這個頁面可以設定為以“線條”主題,盡可能的用纖細的效果設計其他元素,例如頁面中纖細的條形圖、柱狀圖、環形圖這樣的設計就能體現出元素間的關聯性,整體能達到一種視覺平衡和諧

          在思考用3D地球來設計時,我是提前跟開發溝通過,知道可以落地實現,然后才著手開始設計,所以工作中有拿不準的設計,要即時跟開發溝通。

           

          元素設計階段:

          標題設計

           

          左邊的標題中規中矩看起來比較死板,不太符合這個產品頁面整體調性,右邊的標題用了斜體和輕微的漸變色,能夠渲染頁面飛機動感的氛圍,所以右邊的設計形式更合適。

          但不是說所有產品標題都應該用斜體漸變色,要根據產品而定,例如政府類產品更多是要體現莊嚴的氛圍,中規中矩的形式就更為合適。

          天氣、空氣質量、時間元素

           

          天氣溫度、空氣質量、時間是一定要加上的,原因是飛機在戶外飛行肯定會關注天氣,而對于北京機場來說關注空氣質量也尤為重要,再說說時間,既然是機場實時數據,那么當下的時間對比實時數據就非常有意義,所以時間要體現出來。

           

          2、關于圖表設計

          圖表一改版:

          總航班量圖表截圖

           

          上面圖表雖然可以表達清楚全部數據,但圖表包含航班總數量,這樣的展現方式視覺上表現弱,同時不能夠直觀表達總量里面包含延誤航班和取消航班。

          改版后

           

          改版后從“出港量”“進港量”兩個維度出發,合并同類項:

          出港量包含:出港延誤航班、出港取消航班

          進港量包含:進港延誤航班、進港取消航班

          用大字號重點突出進出總航班量,然后在下面分別羅列延誤航班數量、取消航班數量,這樣數據之間的關系表達就很清晰,一看就明白,同時兩個維度各個數據也可以互相比較。

           

          用色說明:

          延誤航班用黃色,黃色情緒映射為等待,延誤即等待;

          取消航班用紅色,紅色情緒映射為停止,取消即停止。

           

          圖表二改版:

          問題圖表

           

          上圖環形圖其實用的并不恰當,環形圖更適合總量的各個百分比呈現,標題“今日前五延誤進港機場”其實想表現前五名城市的延誤進港排名,排名用條形圖最為直觀。

          但從頁面的整體看一下,已經有兩處用到了條形圖,柱狀圖,如果這里還是條形圖,那么頁面看起來會很單調,圖表也沒有表現的多樣性,所以現在設計要體現圖表的多樣性也能夠有排名的直觀呈現。

          改版后圖表

           

          修改后依舊采用環形圖,把排名由高到低用注釋的形式呈現,倆者都能兼顧,這樣的設計思考方式就是設計思維,設計師既要考慮視覺,也要考慮功能目的,善于在兩者之間找到平衡。

           

          3、標題和文案優化

          第一處修改:

          問題標題

          上圖左右兩個標題唯一的區別就是一個是“進”字,一個是“出”字,這兩個字如果不仔細看很難一眼出左右的區別,所以我們在設計標題的時候,一定要提煉關鍵詞,把可以作為明顯區別的關鍵詞置前。

          調整后標題

           

          調整后的標題把重點區別的關鍵詞置前,觀者能夠快速識別。

           

          第二處修改:

          問題標題和數據格式問題

           

          此圖表數據體現是延誤航班數據,所以標題的關鍵詞應該是“延誤”,延誤放在標題中間沒能起到快速識別數據類型作用。

          再者就是圖表上的數據格式錯誤,航班數量不該有小數點,因為航班數都是整數呈現。

          調整后

           

          調整后關鍵詞置前“延誤進出港機場-今日前五”用橫杠隔開“今日前五”能夠過度信息,更直觀。

           

          4、3D效果技法

          3D地球效果:

          原圖上進出港途中詳情是上下分開的:

          開始想用進出港切換的方式呈現,就是一個大地球,一個小的縮略圖,可以點擊切換,也可以自動輪播大小切。

          初稿

           

          后考慮到此產品是沒有任何交互操作的,這里設計交互行為是不合理的,所以要換一種形式。

          定稿(數據15分鐘刷新一次)

           

          調整后讓兩個數據都呈現在地球上,用兩種不同光線顏色表示進出港班次。

          青色:北京擴散的方向代表出港

          藍色:聚焦北京的方向代表進港

          如果細心查看頁面會發現,所有關于進港的都是青色,例如進港總航班量、進港人數、即將進港航班;同樣關于出港的都是藍色,目的就是要建立觀者顏色對數據類型的認知。

           

          3D地球技法教程:

          3D地球動畫效果,純用C4D軟件完成:

          • 1、地球用一個世界地圖貼圖
          • 2、地球的凹凸效果用了材質的置換和凹凸
          • 3、小飛機動畫用的是對齊曲線動畫
          • 4、國家之間樣條生成用的是插件 LON—LAT Connection
          • 5、光線粒子用的是插件 X-Particles

          下面我們一一介紹:

          首先找一張世界地圖,這里稱為“球皮”,ps調整色調,滿意為止。

          調色球皮

           

          把球皮放入材質,表面的凹凸效果用置換和凹凸。

          材質設置

           

          小飛機動畫用的是對齊曲線動畫,打關鍵幀轉一圈,記得勾選切線,不然飛機會橫的飛。

          飛機繞地球動畫

           

          國家之間樣條生成用的是插件 LON—LAT Connection,這一步很關鍵,插件使用很簡單就是選擇:洲-國家-城市~洲-國家-城市,tab切換有設置可以設置樣條曲線的高度弧度等。

          城市鏈接樣條設置

           

          最后就是用插件 X-Particles 渲染光線粒子效果,光線效果利用毛發渲染,第一條光線走完凍結,后面小光線依次循環發射。
          光線渲染

           

          上面教程說的很籠統,有基礎的同學肯定會明白,接下來我們來看如何開發落地。

           

          3D地球效果開發落地:

          首先我們要知道一個網站Echartsj 里面有個3D路徑圖,看下圖:

          Echartsj網站截圖

           

          上圖兩個地球路徑圖組件,都可以實現我們的效果,只需要我們把色調調整好的“球皮”給到開發人員,替換組件里面的圖片即可,組件生成的地球原理是一樣的,也是由一張圖包裹成球,地球數據光線顏色可更改,把色值給開發人員即可。

           

          案例總結:

          1、數據可視化設計,首先了解功能,分析數據之間的關系

          2、構思主題,圍繞主題設計其他元素,特殊效果跟開發溝通

          3、分析數據,合理選用圖表,對圖表能靈活運用

          4、不要忽視文案的設計,提取關鍵詞

          5、加強技法,了解數據可視化設計網站

           

          最后

          數據可視化大屏設計,對視覺表現、數據的合理呈現有一定的要求,這兩點都是由設計師為主導,所以設計前根據產品定義風格,了解數據之間的關系非常重要,切記不要太依賴原型圖。


          作者:吳星辰

          轉載請注明:學UI網》數據可視化大屏設計經驗分享【高級篇】

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          后臺數據可視化界面設計的10條經驗法則

          seo達人

          寫在前面:本文的英文原標題是“10 Rules of Dashboard Design”,其中Dashboard如果翻譯成儀表盤的話,總覺得不大容易理解,所以我在這里把它翻譯為數據可視化。數據展示方面的設計,相信大家會經常用到,這篇文章有很多簡單直接,立馬就能用上的干貨,一起來學習吧!

           

          為什么數據可視化設計非常重要?

          數據可視化的目的是以一種用戶更容易理解的形式呈現復雜信息。
          一個優秀的數據可視化界面包含以下幾個關鍵要素:
          清晰: 一個好的數據可視化界面一定是能夠清晰的展現用戶所需要的信息。當用戶看到界面內容時,應該能在5秒內了解到它的用途,而不是花費至少幾分鐘才能理解各個數據的含義。
          有意義: 一個有用的數據可視化界面上的每一條信息都應該是有意義的。這些有意義的信息能準確傳達設計師想要表達的內容。每一條數據的背后,用戶應該都是可以讀懂的。
          一致性:優秀的數據可視化界面,會有一套非常嚴謹一致的版面。這里的一致性需要考慮到布局,結構和內容。
          簡單: 復雜的界面違背了數據可視化設計的初衷。如果一個信息呈現不夠簡單直接,那么肯定是在設計上出現了問題。

           

          如何設計一個數據可視化界面?

          數據可視化界面設計最重要的步驟是需要了解目標用戶是誰,能為他們提供什么價值。了解目標受眾的知識背景和理解水平能幫助你做出對他們有價值的設計。
          在了解目標用戶時,有必要了解受眾感興趣的數據類型。
          “專注于用戶的需求,更容易產生他們喜歡使用的結果?!?/section>
          目標用戶級別可能會在一級和另一級之間變化,這是一個挑戰性的點。與其他任何設計項目一樣,可以細分受眾并將信息相應地分為基本內容和高級內容。
          在界面中表示一組信息有多種方法,選擇正確的數據指標是設計數據可視化的另一個關鍵元素。這也與目標用戶的偏好有關,即他們希望看到什么樣的信息。
          “根據需要設計數據可視化界面,為不同的業務使用不同類型的展示方式?!?/section>
          下面是為目標用戶設計數據可視化界面時需要考慮的一些重要規則。

           

          1. 區分層級

          一個非常常見的錯誤就是設計師沒有對信息區分層級,所有的內容看起來都一樣重要。
          可以嘗試使用組件的大小和位置來區分數據的層次結構。
          • 通過定義信息層級,讓用戶清楚什么是最重要的
          • 在左上角顯示更重要的信息,沿著對角線方向,信息的重要程度應該依次減弱,右下角的信息重要性最弱
          • 還可以將信息劃分為不同類別,并在不同的視圖中顯示它們

           

          2.簡單易懂

          數據可視化的真正目的是用一種更方便理解,更簡單的形式來傳達復雜信息。
          • 不要放一些大多數用戶都難以理解的信息
          • 使用更少的列來顯示信息
          • 刪除冗余內容來減少混亂

           

          3. 一致性

          使用一致性布局設計的數據可視化界面看起來更好。
          • 為了使界面更容易閱讀,可以在信息組之間使用類似的可視化效果。
          • 把相關的信息放的更近一些
          • 對相關內容進行可視化分組

           

          4. 臨近原則

          在界面中把相近的信息放在一起可以幫助用戶快速理解。
          • 把相關的信息放的更近一些
          • 不要將相關信息分散在界面上
          • 對相關內容進行可視化分組

           

          5. 對齊

          可視化組件元素需要在視覺上對齊,并保持視覺平衡。
          • 將可視化組件元素在視覺上進行對齊,可以將界面組織的更好
          • 嘗試將組件元素進行網格布局設計
          • 不對齊的界面會給用戶帶來糟糕的體驗

           

          6. 留白

          留白是為了讓界面有呼吸感,它使得用戶在使用你的界面時能夠有出喘息的空間。
          • 當用戶查看需要的信息時,界面中的留白能夠吸引用戶的目光,提升用戶體驗。
          • 減少留白會使用戶的界面變得混亂
          • 使用留白能對信息進行可視化分組
          留白太少簡直就是在鼓勵你的用戶盡快離開

           

          7. 顏色

          使用有效的配色方案來吸引用戶的注意力,幫助他們輕松地瀏覽信息。
          • 仔細選擇顏色,目標是使內容易于閱讀。
          • 使用大對比度來顯示背景上的視覺元素。
          避免使用低對比度和低效的漸變

           

          8. 字體

          標準字體是可視化界面中的最佳字體,除非有特別的理由,一般不要用其他字體。
          • 使用標準字體,因為它們更容易閱讀和掃描。
          • 特別和美術字體可能看起來不錯,但很難理解
          • 避免所有的大寫字母文字,因為它很難閱讀,人類的大腦需要時間來消化它。
          • 使用合適的字體大小和風格,有效地傳達信息。
          不要使用影響可讀性的字體

           

          9. 數字排版

          顯示精度超過要求的數字使它們難以閱讀和理解。
          • 必要時使用整數,因為長數字會使用戶混淆
          • 省去不必要的信息
          • 讓用戶能夠容易地比較簡單的差異細節

           

          10. 標簽

          使用能夠快速有效地向用戶傳達所需信息的標簽。
          • 避免使用帶旋轉的標簽,因為很難閱讀
          • 盡可能的使用標準的縮寫
          避免旋轉標簽

           

          總結

          數據可視化旨在節省時間和精力,將復雜和抽象的數據以更簡單的形式表示,目的是以用戶能夠理解的方式將關鍵信息傳達給他們,確保自己理解用戶所需,并給他們需要的信息。

           


          作者:Saadia Minhas

          譯者:彩云sky

          轉載請注明:學UI網》后臺數據可視化界面設計的10條經驗法則

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司




          數據可視化設計 – 3D粒子模型科技感動效【進階教程】

          seo達人


          調研給大家看的效果圖
          上圖是調研給大家看的效果圖,這種效果常常在科幻大片中看到,是FUI風格較常見的設計元素,實際上可視化設計也常用真實的形象和三維場景,助力數據解釋。
          如下圖,之前設計的產品“軍人心理指標采集系統”,功能上是呈現人的生理指標數據,界面中人的形象,就能直觀的把人體,如腦電、心率等各部位對應的數據展示清楚。
          3D動畫使用場景
          不多說了開干!
          接下來我們用兩種方式實現這種效果

           

          方法一: 

          用到的軟件為:C4D+AE
          首先得有模型,C4D自帶了一些模型,網上也可以找到很多模型,我常在“CG模型網”找模型,模型最好找C4D格式或者通用obj格式,其他軟件格式需要轉格式,當然如果有建模能力可以自己建模,下面用一個帥氣的跑車為例講解。
          第一步:找到需要的模型在C4D軟件中打開;

           

          第二步:使用晶格,把模型置入晶格下面,調整晶格對象屬性中的數值,使模型看起來是線框展示,調整的半徑尺寸需要呈現細絲狀,太粗略顯笨重;

           

           

          第三步:打關鍵幀制作動畫讓跑車原地打轉一圈360度,需要注意的是坐標點位置的調整,例如模型旋轉一圈,坐標最好在模型中心位置;

           

          第四步:設置緩動曲線,我們要實現的效果勻速運動循環播放更為貫通,默認會有緩入緩出,所以需要調整,右擊指定的關鍵幀區域,找到顯示函數曲線,彈窗里點擊“線性”直角圖標;

           

           

          第五步:設置輸出參數尺寸、幀頻、幀范圍,幀頻設置需要在不影響流暢度的情況下,可以稍小一些,這樣后面落地的文件也就不會太大,然后設置保存參數,選擇PNG勾選Alpha通道,抗鋸齒選項中可以為“最佳”;

           

           

          第六步:渲染序列幀;

           

           

          最后一步:把序列幀倒入AE,在AE中設置顏色、時間、加特效等;

           

           
           

          方法二: 

          用到的軟件為:AE粒子插件 Trapcode-Form
           
          新建合成-新建純色圖層-找到Form拖給純色圖層,選擇模型-開啟3D圖層-打關鍵幀;

           

           

           

          AE通過改變粒子屬性(頂點、邊、面、體積)可以變化不同樣式,下圖切換為“頂點”后呈現的跑車樣式。

           

           

          如果覺得這樣旋轉很單調,還找一些HUD添加效果,如下圖所示:

           

          兩種方法的優缺點總結:
          C4D導出序列幀方式雖然步驟多,但在模型的特殊要求上更為靈活,可隨時修改模型,可局部晶格化。
          AE的優勢是有不同的樣式可挑選,步驟簡單,但如果設備不給力稍大的模型會很消耗設備資源,導致卡頓。
          下面再分享幾個其他模型效果,槍的效果是Form模型設置中“面”的效果。

           

           

          如何落地?在之前的《B端新零售產品》文章詳細講解過,文末有文章鏈接,文章中出現的模型送給大家,供大家練習,公號后臺回復“模型”即可獲取。
           
           

          最后  

          數據可視化設計的核心還是數據的有效呈現,視覺上的美觀炫酷要與數據呈現契合,做到美觀性與實用性相輔相成,3D效果固然炫酷,但不能為了加而加,影響數據呈現,有的產品并非適合,讓炫酷的視覺效果助力數據可視化,才是設計師應該追求的。


          作者:吳星辰

          轉載請注明:學UI網》數據可視化設計 – 3D粒子模型科技感動效【進階教程】

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          電商大屏 – 數據可視化設計經驗分享!

          seo達人

          案例解析-業務指標分析

          本期的大屏案例為“北京市電商消費大數據”,主要呈現某電商平臺618購物節的信息數據。

          如銷售總金額、區域銷售排行、男女比例、年齡分布、品牌銷售排行、歷史銷售趨勢等等。

          先看圖,下圖為最終的設計稿:

          設計任何產品首先要做的就是了解業務和需求分析,本次的案例需求非常簡單明了,只需做各指標數據的展示。

          從需求上可以分析得出,大屏是純數據展示類,所以不需要有交互行為。

           

          無交互的圖表設計要點

          無交互的大屏展示,在圖表設計上,需要按沒有交互的形式設計。

          例如不能因為數據過多,而隱藏一些通過交互才能看到的數據。

          對于一組無法展示全的數據,可以只提煉最重要的指標數據進行展示,也可以通過動畫形式,播放展示等等。

           

          實時數據和事后數據的區別

          本案例提供的是618購物節事后的數據,所以在大屏的設計上可以根據真實的數據來設計呈現。

          事后數據呈現,在設計上可以根據真實的數據來定義圖表,例如可以根據數據大小長度,精準的定義設計空間。

          實時數據顧名思義指的就是數據在實時傳輸,產生了數據就要立即展示出來,從業務角度上可能要做其他的設計預案。

          例如異常數據的處理,有突破性的數據是否設計動畫營造一種儀式感,就像天貓雙11的千億彩蛋。

           

          案例解析-風格與用色

          定義視覺風格

          定義大屏設計風格,首先要分析行業的屬性特征,然后通過情緒板等方法定義視覺調性。

          例如公安系統通常運用嚴謹冷靜的藍色調;能源、教育、醫療行業的主色調,一般使用能代表環保、未來、健康的綠色調。

           

          電商、新零售行業需要烘托購物熱鬧的場景,所以靚麗的暖色調更為合適。

          過于冰冷理性的色調,并不是電商產品所追求的調性,更不符合觀者對購物場景的心理認知。

          但是由于可視化大屏的面積過大,主色調不論什么顏色,背景色通常要用暗色系,以減少對觀者視覺上的沖擊。

          深色背景能夠有效烘托暖色調的可視化元素,起到對比、聚焦視覺的作用。

          暖色調元素可以烘托購物特征的氛圍,如紅色、橙色、紫色、都是有效的色調,但如果都是暖色元素較容易視覺疲勞。

          所以暖色中搭配一定比例的冷色,能夠緩解視覺上的不適感。

          冷暖色在大屏設計中的搭配有很多技法,下面我們來解析色彩搭配。

           

          色彩解析

          首先分析色環圖,了解一下色彩知識,30度為同類色、60度為鄰近色、120度對比色、180度互補色。

          電商大屏冷色元素通常選用藍色系色調,通過上圖對色環的認識,來看下藍色與色環圖上的暖色都呈現什么關系。

          • 同類色:在色環上成30度,特點是色相比較接近,如紅色類的朱紅、大紅、玫瑰紅都屬同類色關系。
          • 鄰近色:在色環上成60度,鄰近色的搭配會使畫面和諧統一,呈現一種你中有我,我中有你的感覺。
          • 對比色:在色環上成120度,是構成明顯色彩效果的色組,視覺上會有一種藍的更藍,紅的更紅。
          • 互補色:在色環上成180度,是對比最強的色組,兩個顏色放在一起會引起強烈的對比,會給人強烈的排斥感。

           

          大面積用色技法

          從以上的色彩分析來看,電商大屏若呈現大面積的暖色調,再搭配大面積藍色調會呈現對比色或互補色,形成強烈對比。

          所以本期案例選擇藍色的鄰近色,紫紅色進行搭配,這樣不僅能夠烘托電商的屬性特征。

          還能在大面積使用紫紅色的同時保持畫面和諧統一,因為紫紅色同時包含藍色和紅色兩種色調。

          藍色搭配紫紅色其實就是,實現了你中有我,我中有你的感覺。

          下面我們對比一下,如果把本期分享的大屏案例,換成正紅色體會一下感覺。

          不難發現強烈對比效果會有一種不適感,所以大面積的暖色,一定要使用跟其他元素能夠融入的鄰近色。

           

          小面積使用對比色的技法

          如果是小面積的使用,就會有很多的可能性,例如下圖阿里DataV電商類數據可視化產品的模版。

          都只是在標題處使用紅色烘托電商大屏的調性, 內容區并沒有過多的使用紅色,所以各種元素間,并沒有形成強烈的對比。

          但從兩張圖的對比來看,第二張處理的比第一張要高級一些,仔細看會發現,第二張背景色偏紫色。

          紅紫為鄰近色,這樣標題的紅色和背景就形成了較為和諧的過渡,而第一張暗藍色的背景跟標題對比強烈,略顯生硬。

           

          反面案例解析

          舉個反面案例,看下圖最大的問題就是過度烘托了主題主題氛圍,導致整個畫面太過艷麗,沒有細節。

          更不用說數據的清晰展示了,這已經違背了大屏可視化設計,以數據信息展示為核心的設計理念。

          圖片來源網絡(反面案例)

          想象一下大屏的使用場景,這樣一個艷麗的大屏掛在墻上,看多了心情會變得焦躁,同樣的道理,沒有人會把家里的墻大面積刷成紅色一樣。

          大屏設計用色調烘托主題本身很好,但對于艷麗的暖色調,要適當搭配一定比例的鄰近色和對比色。

          這樣能大大緩解觀者的視覺疲勞,展示出細節,大屏看起來色彩也會更豐富有觀賞性。

           

          案例中標題和總數據為什么使用黃色?

          因為黃色和藍色、紫紅色對比性更強烈,黃色跟藍色在色環上成180度是互補色,有最強烈的對比性。

          黃色與紫紅色在色環上成120度是對比色,同樣有強烈的對比性,同時黃色也跟暗色調的背景形成了鮮明的對比。

          所以對于關鍵指標數據和標題,需要重點突出的元素,可以用對比強烈的色調做突出效果。

           

          案例解析-設計要點 

          打造儀式感

          設計要點要從需求出發,例如需求中有一項關鍵的業務指標要突出,朝陽區消費占全市75%。

          所有區中朝陽的消費是No1,所以從這點考慮可以使用全區地圖來展示,并且打造朝陽區第一名的儀式感。

           

          打造驚喜感

          產品設計中給觀者驚喜感,無疑是好的體驗,本次案例通過增加了兩道光線動畫,打造微妙的驚喜感。

          這樣的設計給大屏增添了動感,看起來更富有生機,兩道光線滑向總數據指標,會有一種數據傳輸的感覺。

          同時也像滿天繁星的夜空中,劃過的流星一樣,給人帶來一種悸動的體驗。

           

          3D圖表的設計要點

          3D圖表有很強的視覺表現力,是突出重要指標的重要手段之一,但3D圖表在數據可視化設計中,一直是有爭議的存在。

          有人認為由于3D的透視關系,會導致數據呈現的不客觀。

          其實從設計角度可以解決不客觀問題,比如我們案例中的3D柱狀圖,由于柱形的厚度。

          導致出現兩條頂端線,視覺上很難分清頂端在哪里,對指向Y軸刻度數值的體現的就不明確。

          這種情況就需要在柱狀圖上標記出數據值,這樣畫面不僅有了3D圖表的視覺表現,同時也不影響數據的展示。

           

          增強觀者認知

          增強觀者對元素的認知,可以大大提高閱讀效率,比如圖文形式通常比文字視覺上更突出。

          案例中“最受歡迎品牌”就可以加上品牌logo增強對類別的認知。

          條形圖通常按序排列,從大到小,或從小到大,但如果有“其他”這項分類一般都要放到最后。

          因為“其他”通常是所有分類中最不關注的數據,關注的數據都會直接展示出來。

          如果“其他”分類也按有序排列,就會有格格不入的感覺。

           

          后語 

          電商大屏通常要烘托一種熱鬧的場景,對配色的準確把握,大面積色調的使用需要和諧過渡,同時要善于運用對比色,突出元素。

          多思考設計與業務的表現關系,善于從設計思維出發打造儀式感、驚喜感,增加產品價值。

           

          作者:吳星辰

          轉載請注明:學UI網》電商大屏 – 數據可視化設計經驗分享!

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          數據之美:地理空間數據可視化

          seo達人

          本文利用C4D軟件和three.js開發方式制作地理空間數據可視化項目。地理空間數據可視化是基于我們實際生存的空間,對信息的載體、對象映射到載體的方式進行可視化展示,從而將地理空間中的數據以一種直觀、容易理解和曹總的方式呈現給用戶。

          使用軟件:c4d
          飛線制作原理:樣條約束功能
          地球上的起伏:置換材質
          中國地圖上的飛線:在ae中做好的視頻材質
          地圖模型:高德那邊拿到的,但只針對阿里內部
          開發方式:three.js

          地理空間數據可視化 (Geo Spatial Data Visualization) 是近年來興起的一個熱門領域,越來越多的政府、企業青睞于通過這種強視覺的形式來展示政績與實力。市場需求的增長也吸引了越來越多的設計師投身于這個領域。而在這樣一個細分領域,也對設計師的能力提出了全新的要求。在該領域,我們團隊沉淀出一套固定且可復用的設計模式。在這篇文章中,我將會詳細講述一套完整的地理空間數據可視化設計流程。希望你能通過它形成一套屬于自己的可視化設計方法。

          文章分為兩部分,上半部分展示視覺,下半部分聊聊視覺背后的理論與流程。

          請點擊——》》視頻1
          請點擊——》》視頻2

           


          作者:三魚先生

          轉載請注明:學UI網》數據之美:地理空間數據可視化

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司





          數據可視化大屏該這樣設計

          seo達人

          什么是數據可視化大屏

          每年的雙十一,天貓都會在剁手狂歡節中直播戰績。除了可怕的數字之外,不知道大家有沒有留意到這些同樣可怕的數據可視化大屏;

          所謂大屏,顧名思義就是一個

          很大的屏 !!!

          可視化應用非常廣如ToC、ToB、ToG等都會存在。一般應用在交易大廳,展覽中心,管控中心,老板辦公室等等場景,把一些關鍵數據集中展示在一塊巨大的LED屏幕上,其實就是巨大化的Dashboard,是當今數一數二的裝逼方式。

          數據可視化的本質是視覺對話,數據可視化將數據分析技術與圖形技術結合,清晰有效地將分析結果信息進行解讀和傳達。

           

          設計前的準備

          基礎大屏制作準備:

          1、確認需求:確認展示的主題,具體展示的內容,各部分內容數據用到的圖表類型。

          2、使用場景:確認大屏的使用場,設計尺寸與大屏的拼接方式(拼接屏像素超大可等比例縮放)

          3、開發實現:具體設計要根據項目確定實現的工具,現在應用比較多的:web、u3d、ue4等 不同工具實現出來的效果也是大有不同,根據項目實際需求以及開發成本,這塊設計前需要跟開發充分溝通。

          4、設計素材:設計整體的背景圖、包括布局、配色等,以及大屏中用到的小圖標元素。

          大屏制作一般只需四步:

          1、整體:設置背景色、插入背景圖、頁面設置等。

          2、部分:主標題、各圖形標題、動態KPI指標、圖表制作等。

          3、細節:對標題、圖表細節的調整。

          4、動態:添加動態效果,提升大屏展示效果。

          (以上只是寫的一個大概的思路,具體操作流程肯定是根據實際情況做調整,要復雜的多,最重要的是多溝通、多思考)

           

          設計思路案例實操

          需求分析

          設計要求:

          分辨率1920*1080,在世界地圖上顯示一個黑客組織攻擊多個目標,頁面要顯示黑客組織的信息和被攻擊目標的信息。

          黑客組織信息舉例:

          名稱;摩訶草  位置:巴基斯坦 活躍度:80

          攻擊目標:韓國 中國 朝鮮 德國

          展示信息僅作為參考,可以自由發揮

          風格要求:科技感 FUI

          拿到需求,確定好展示場景、設計尺寸以及跟開發溝通好實現方法,大致的設計思路就有了,直接開擼。

           

          布局

          個人習慣,根據需求以及數據大概整理一個布局,可以在紙上大概畫一下,然后在軟件里具體細化布局。

          根據梳理的需求:就是要在世界地圖上展示黑客攻擊各個國家的形態的大屏,要求很寬泛,可自我發揮的空間挺大。

          直接附上最終效果圖。這里布局上考慮到地圖上有許多浮層的情況,把數據整體放左側和地圖下方進行展示,避免圖表的面積過大,喧賓奪主,影響整體地圖的視覺效果。

           

          風格

          根據需求定義幾個設計關鍵詞,方便自己找參考直接打開花瓣站酷一陣搜(在這里個人推薦去Pinterest、behance 里面有很多炫酷的fui效果可以參考)。

          風格上,地圖參考了下圖的展示形式,采用多層疊加陰影加描邊的形式使地圖整體有立體感、厚重感,不會顯得那么單薄。

          圖片來自網絡,如侵權刪

           

          顏色

          相比較網頁版設計展示,大屏更傾向于選用深色調背景,不僅為了讓視覺更好聚焦,而且長時間觀看之后眼睛也不會出現視覺刺痛感。內容部分采用亮色系,保證內容與背景有一定的對比關系,便于業務信息傳達。同時背景深色系內容亮色系遠距離觀看也會比較直觀清晰。

           

          字體

          字體上采用瀏覽器默認微軟雅黑,數字采用特殊字體DS-Digital

           

          數據圖表

          圖表是表達數據的常用方式,因為圖表可以描述了不同的數據種類,同時讓數據之間可以比較。主要就是要考慮最終用戶,圖表結果應該是一看就懂,不需要思考和過度理解,因而選定圖表時要理性,避免為了視覺上的效果而選擇一些對用戶不太友好的圖形及元素。

          常用的圖表有以下幾大類別:

          1、一個或者多個類別不同時間的的對比比較。

          典型的圖表有折線圖、條形圖、堆疊條形圖、蠟燭圖、區域圖、時間線等。

          2、不同類別數據的對比

          典型的圖表有柱狀圖、分組條形圖、氣泡圖、平行坐標圖、多折線圖、子彈圖等。

          3、排名 主要展示項目數據的一個排名情況。

          典型的圖表有有序條形圖、有序柱狀圖、平行坐標圖等。

          4、不同數據對于整體的占比情況

          典型的圖表有堆疊條形圖、餅狀圖、環形圖、堆疊區域圖、樹形圖、玫瑰圖等。

          以上是一些比較常見的一些分類當然還有許多不常用的圖表沒做統計區分,比如散點圖、氣泡圖、熱力圖、網絡圖等等這里就不一一列舉了(推薦大家可以看下網上的開源組件庫Echarts、Antv等等 好多)這塊也有螞蟻金服官方的分類非常詳細

          https://antv.vision/zh 附上地址,需要的自取。

          圖片來自網絡,如侵權刪

          這里推薦一快速生成圖表的ps插件-ps拉框助手如圖所示,該插件整合了折線圖、柱狀圖、橫向柱狀圖、餅圖、雷達圖、地圖(該功能太贊了)還有系統UI等等。非常方便,用選區工具拉取選區框點擊參數一鍵生成。

          實操下如何快速一鍵生成地圖的效果,省去了做可視化來回地圖的煩惱,下面開始實操:

          1.新建畫布,打開拉框助手選中地圖如圖:

          選中之后會有好多參數標簽寫的很清楚,第一塊是區塊、邊線寬度顏色和文字的顏色可以在這里設置,第二塊內容就是地圖這里插件里有全國各個省市的還有全球和美國的地圖 基本夠用了,根據需求大家可以自定義選擇,選擇完成之后點擊去下載對應數據,會彈出網頁出來一個新的頁面,如下圖:

          這里是我選擇一個全國的地圖,大家可以根據截圖上紅框內的說明進行操作,非常簡單。往下滑,直接點擊復制json數據到剪切板。點擊后網頁會有一個復制成功的提示,證明你已經復制成功了,接下來我們就回到ps里面去粘貼就好了。

          粘貼到這里,這里切記不要粘貼多次會很卡導致數據錯誤,插件里也有提示。粘貼完之后,記得用選區工具畫一個選區之后再點擊自動繪制如圖:

          點擊自動繪制之后,可能會等待一會,插件需要花時間去運算生成地圖,等待一會之后就到了見證奇跡的時刻,如圖:

          一份中國地圖就生成啦,就問你它香不香,而且生成的文件都是分層的矢量形狀層,可以繼續編輯。是不是功能非常強大,其他模塊的功能就不一一展示了,插件官方生怕童鞋們不會用,在插件的最后一個模塊貼心的準備了學習手冊,點擊可以查看相關的視頻教程,非常的詳細,感興趣的童鞋可以去試試哦。

          插件源文件小六也給大家備好了,公眾號回復“ps插件”有需要的童鞋自行領取喲。

           

          總結

          1、設計前:一定要對用戶需求有著充分分析和理解,然后要知道大屏的展示場景及設計分辨率,大屏的拼接方法都要有一定的了解,最后是跟開發溝通下實現的工具與方法

          2、設計中構思布局,可以在紙上簡單畫一下。根據需求定義設計關鍵詞進行設計的提煉與分析,方便自己找參考。顏色上背景深色為主,為了更好的聚焦,數據可以采用亮色,有一定的對比關系,便于業務信息傳達。字體上可以采用系統默認字體 數字采用特殊字體包的形式(這塊根據實際需求,切記不要照搬)。圖表分析好數據,選擇恰當的展示形式,同時保證視覺上的統一(分清頁面的主次關系,圖表的展示切莫設計過度,容易造成搶主體)

          3、設計后:再次校驗信息層級、文字大小、圖表等各層級間的對比關系是否傳達準確,與技術同步溝通下技術的實現性。最后開發完成后,要拿演示demo去現場測試,看下整體展示效果,測試輸出是否有問題,有無拉伸問題,拼接縫與內容有無穿插,及時與開發進行頁面的校驗工作,最終才算是設計完成。


          作者:小六

          轉載請注明:學UI網》數據可視化大屏該這樣設計

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          初學者如何快速上手數據可視化設計

          seo達人

          01.什么是數據可視化

          數據可視化是數據內在價值的最終呈現手段,它利用各類圖表及圖形化的設計手段將復雜不直觀的數據有邏輯的展現出來,使用戶找到內在規律,發現問題,從而指導經營決策,挖掘數據背后的商業價值。

            

          02.數據可視化的使用場景

          首先介紹下使用場景:

          可視化應用非常廣如ToC、ToB、ToG等都會存在,之前所看到的各種圖表僅以為是單純的數據統計,其不然它也是一種可視化的展示方式。現階段更多的理解數據可視化是大屏展示。多屏幕拼接,展示諸多數據和圖表,效果一定是酷炫各種特效視覺于一身的才稱之為數據可視化,其實這只是其中一種可視化的表現方式。下面基于應用場景的不同,對可視化區分介紹。

          第一類使用場景:

          此類以使用為主,主要在電腦上操作的pc端可視化,用戶對它需長時間使用,例如企業數據報表分析,各類BI等。在此類場景下,簡潔簡單高效的傳達數據內容是非常必要的,更多的是數據分析師及業務部門在使用,他們需要長時間停留在屏幕及數據上做分析統計比對等工作,精準的傳達數據的同時也減少對眼睛的過度疲勞,利于用戶長時間舒適閱讀,所以這類場景下以簡潔為主。

          (圖片來源于網絡)

           

          第二類使用場景:

          這類是以觀看為主,并以快速傳達核心數據信息的應用場景。此類場景多應用于指揮大廳、科技展館、數字展廳等,他的特點是多屏幕拼接,展示面積大、數據類型多,展現形式多元化,業內也稱之為數據可視化大屏??傊渲饕褪呛诵臄祿ㄟ^視覺及動畫的表現手法直觀的輸出給用戶,增加用戶的記憶達到過目不忘的效果,同時這對于數據信息的視覺傳達要求比較高。此應用場景也是問題疑問比較多的,會關系到效果定位、數據信息傳達、表現方式、軟硬件結合等諸多情況。針對此應用場景展開分析,其他可視化設計也是相通的。

          (圖片來源于網絡)

           

            03.大屏數據可視化該這樣設計

          1、精準把握業務需求

          設計終歸是助力業務的,準確的理解業務需求是至關重要的,它將貫穿整個設計的始終,也是可視化設計開始的必要前提。如何解決用戶的問題,完成既定目標,都需要設計師對需求有一個比較準確的理解。直接有效的方法就是“不懂就問”。

          2、數據圖形化的選擇方法

          需求及數據確立后,接下來是數據圖形化的選擇,不同的目標不同的數據對于圖表展示的選擇也是有講究的,如:部分占總體的比例(占比)更適合選用餅圖、用來反映時間變化趨勢的圖形化更適合曲線圖等等,總之不同的數據展示維度,選擇的圖表是有差異的。同樣一組數據,存在多個圖表同可展示,怎樣選擇最恰當的圖表是至關重要的,合適有效的圖表有助于信息有效的傳達。遇到具體的數據要根據數據的維度,和要表達的業務目標,選擇一種最佳的圖表呈現。

          (圖片來源于網絡)

           

          這是可視化圖表選擇比較確切的一個方法,可以作為數據可視化圖表的選擇依據,有助于準確快速的把數據圖形化。

          首先根據業務目標結合數據維度確定大的關系(比較、分部、構成、聯系),隨后選擇合適的圖表,填充數據設計排版即可。到這一步圖表基本成型,但是比較基礎,為了視覺效果和數據的傳達,也會在此基礎上進行優化設計。

           

          優化設計之前要注意幾點:

          1. 切忌設計時不要過度裝飾圖表,喧賓奪主造成數據不直觀,對觀者獲取數據產生障礙。
          2. 圖形化要友好,不能一味的追求視覺效果,造成圖形識別度降低、友好度下降。
          3. 圖形化后一定要利于理解。所有的設計一定是為業務服務的,數據圖形化后更不利于業務信息傳達,那就失去了圖形化設計的意義
          4. 開發可實現,設計師常遇到,酷炸炫的效果讓開發落地非常困難,務必要多溝通,懂取舍。設計之初就要考慮全面。

           

           04.設計尺寸與大屏的拼接方式

          可視化大屏一般都是多屏拼接或者LED\LCD等材質屏幕。不同的屏幕像素是不相同的,顯示像素、物理像素都不同,包括硬件設備的不同導致輸出像素也不相同,例如同樣是3X2的拼接屏,輸出像素可以是X1*Y1也可以是X2*Y2,這就造成了很多潛在問題,設計之初屏幕硬件及拼接方式需要提前確定?;居袃蓚€方法,簡單的說,方法一、拼接屏可以按照拼接后的橫縱像素總和設計(拼接屏像素超大可等比例縮放)。LED/LCD屏幕設計也是同樣的原理。方法二、按照硬件輸出像素設計,硬件設備的輸出像素一定是和整個拼接屏成比例或者是吻合的。所以按照輸出像素設計是可以的。

          (圖片來源于網絡)

           

           05.頁面設計及布局思路

          屏幕的拼接方式及屏幕材質確定后,就可以進行頁面的設計及數據的布局,頁面的布局主要是依據業務及數據的重要程度來布局,可視化中會把核心的數據或業務的要點放中間,一方面中間是視覺的中心,二來也是數據和業務最容易傳達給觀眾的核心位置。其他的數據放兩側排列,排列數據一定要考慮數據的關聯性及聯動性,應該有意識的把他們放一起或就近,讓他們有關聯系,當一組數據變化時聯動效果更凸顯,容易傳達數據的價值。

          最后插播一句,如果是拼接屏記得把數據避開拼接縫,頁面布局時就要考慮屏幕拼接方式,盡量把數據有序的展示在屏幕內,合理避開拼接縫減少對用戶觀感的影響。

          具體設計要根據項目確定使用的工具做調整,如web、u3d、ue4等等。項目用什么開發工具很大程度決定了設計方法方式,各種工具自有不同的優劣勢,像web輕量化圖表控件多,效果相比u3d會弱很多。u3d對三維支持好,粒子等效果有優勢。了解這些大致可知道設計思路。

           

          字體:

          選擇識別性高的,字體不要太細,同時要注意版權,不要選擇太圓潤的字體。

          顏色:

          顏色明度飽和度要高些,遠距離觀更利于信息清晰傳達。顏色不要過于相近,大屏顏色相近更不易于數據間的區分,降低閱讀舒適感。大屏背景選擇深色系,內容選擇亮色系。保持內容與背景有一定的對比關系,便于業務信息傳達。(同時深色系也省電)

          布局示例(以1920*1080尺寸,布局示例)

           

           

           06.設計風格的確定

          風格的確定也是至關重要的,首先要確定應用場景是怎樣的(室內、室外、光照如何、燈光照射如何、硬件如何等等),要充分考慮,以及目標用戶是誰,給誰用等等。都會對風格有不小的影響,設計是相通的,可用UI的方式來定義可視化設計風格,AB測試、情緒版等等。差異比較大的一點是應用場景的環境。

          通過對數據圖表的選擇,屏幕布局及風格設計,一張初步作品已經完成。

          此時最好結合業務目標及數據,設計內部先自檢:

          1、現在的設計布局是否合理

          2、配色是否合理并能通過色彩傳達數據的意義

          3、整體設計是否符合之初的業務目標

          4、是否存在其他問題等等

          接下來就是各個相關人員及領導確認階段。

           

            07.現場硬件設備校對

          當風格頁確定后先別急于后面的頁面設計,如果有可能的話,此時最好拿設計圖去現場實地測試(補充一句,設計開始前最好是能到現場測試硬件顯示,顏色等,應最大程度的減少隱藏問題)。確定現場硬件是否存在偏色問題、文字大小在合適的觀看距離是否清晰可見、現場燈光光照等是否對設計有影響、拼接縫和數據是否有穿插、硬件設備輸出是否和設計匹配等等。確認無誤后在開展后面的頁面設計工作。

          (圖片來源于網絡)

           

           08.開發落地及再次現場校對(含性能)

          開發工具不同(如web、u3d、ue4等等),對接方式也會有差異。相同相似之處有如標注規范,顏色,字體字號等等。對于一些三維場景需要提供三維文件,如obj、FBX等。

          主要提供:設計規范(標注)、切圖、三維文件(示項目需求并不一定設計提供),特殊動效可提供范例。

          補充一點,拼接屏到8K左右甚至更高,輸出像素不必達到8K,稍微加點效果,會卡到懷疑人生。一般會降低到4k左右,對硬件要求下降的同時也能保證整體效果和流暢度。

          開發結束后,要拿到演示文件去現場測試,測試輸出是否有問題,有無拉伸問題,測試有無卡頓現象,拼接縫與內容有無穿插,如有控制端(控制屏)需聯調測試。確定整體無誤后,才是設計的最后交接棒。


          作者:聶永真

          轉載請注明:學UI網》初學者如何快速上手數據可視化設計

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          Material Design Data Visualization 數據可視化

          seo達人

          原則

          數據可視化是一種用圖形形式來描述密集和復雜信息的通訊方式。由此產生的視覺視覺效果使得數據比較和用數據講來故事都變得更加容易——這兩種方法都有助于用戶做出決策。

          數據可視化可以表示不同類型和大小的數據:從少量數據點到大型多元數據集都可以表示。

           

          類型

          數據可視化可以用不同的形式來傳達。圖表是一種常用的數據傳達方法,因為它們不僅描述了不同的數據類型,還能進行數據比較。

          圖表類型的使用主要取決于兩個方面:想要傳達的數據,以及想要傳達的數據有關的內容。以下指南提供并描述了各種不同類型的圖表及其用例。

           

          圖表類型

          隨時間變化

          隨時間變化的圖表顯示一段時間內的數據,如多個類別的變化趨勢及其對比。

          使用情況包括:

          1. 股票價格表現
          2. 健康統計
          3. 年度報表

           

          隨時間變化的圖表包括

          1. 折線圖
          2. 柱狀圖
          3. 堆積柱狀圖
          4. 燭臺圖
          5. 面積圖
          6. 時間軸
          7. 地平線圖
          8. 瀑布流圖

           

          類別比較

          類別比較圖比較多個不同類別之間的數據。

          使用情況包括:

          1. 不同國家間的收入對比
          2. 熱門場次對比
          3. 團隊分配

           

          類別比較圖包括:

          1. 柱狀圖
          2. 分組柱狀圖
          3. 氣泡圖
          4. 平行線圖
          5. 多條折線圖
          6. 子彈圖

           

          排序

          排序圖表示一個項目在有序列表中的位置。

          使用情況包括:

          1. 選舉結果
          2. 表現統計

           

          排序圖包括:

          1. 排序條形圖
          2. 排序柱狀圖
          3. 平行線圖

           

          部分-整體

          部分-整體圖表示部分元素是如何加總為整體的。

          使用情況包括:

          1. 產品類別綜合收益
          2. 預算

           

          部分-整體圖包括:

          1. 堆積柱狀圖
          2. 餅狀圖
          3. 堆積面積圖
          4. 矩陣樹圖
          5. 太陽輻射圖

           

          相關

          相關圖展示兩個或多個變量之間的相關性。

          使用情況包括:

          1. 收入和預期壽命

           

          相關圖包括:

          1. 散點圖
          2. 氣泡圖
          3. 柱狀和折線圖
          4. 熱力圖

           

          分布

          分布圖展示每個值在數據集中出現的頻率。

          使用情況有:

          1. 人口分布
          2. 收入分布

           

          分布圖包括:

          1. 直方圖
          2. 線箱圖
          3. 小提琴圖
          4. 密度圖

           

          流圖顯示數據在多種狀態之間的流動。

          使用情況包括:

          1. 資金轉移
          2. 投票統計和選舉結果

           

          流圖包括:

          1. ?;鶊D
          2. 甘特圖
          3. 和弦圖
          4. 網狀圖

           

          關系

          關系圖顯示多個項目之間是如何彼此關聯的。

          使用情況有:

          1. 社交網絡
          2. 文字圖

           

          關系圖包括:

          1. 網狀圖
          2. 維恩圖(或譯Venn圖、文氏圖、韋恩圖、范氏圖)
          3. 和弦圖
          4. 太陽輻射圖

           

          選擇圖表

          許多類型的圖表都可以用于描述數據。下面的指導方針提供了如何選擇圖表的見解。

           

          顯示隨時間產生的變化

          隨時間產生的變化可以用時間序列圖來表示,這是一種按照時間順序來表示數據點的圖表。

          可以表示隨時間變化的圖表包括:折線圖、條形圖和面積圖。

          圖表類型 用法 基線值 時間系列的數量 數據類型
          線性圖 傳達數據中的細微變化 任何值 任何時間序列(適用于8個及以上的時間列) 連續型
          條形圖 傳達數據中較大的差異,單個數據點如何與整體數據關聯、比較和排序 0 4個或以下 離散型或類別數據
          面積圖 總結數據集之間的關系,單個數據點是如何與整體數據關聯的 0(當有多個時間列時) 8個或更少 連續型

          *基線值是指y軸上的起始值。

           

          條形圖和餅狀圖

          條形圖和餅狀圖都可以用于顯示比例,表示部分值與整體值之間的比較。

          1. 條形圖使用一條共同的基線,通過條柱的長度表達數量
          2. 餅狀圖使用圓內的圓弧或圓角表示整體的一部分

          條形圖、折線圖和堆積面積圖比餅狀圖更能夠表達隨時間產生的變化。因為這三種類型的圖表中,可能的值共享同一條基線,所以比基于條柱長度的條形圖更容易比較值之間的差異。

           

          面積圖

          面積圖有多種類型,包括堆積面積圖和重疊面積圖:

          1. 堆積面積圖表示(在同一時間段內)多個時間序列堆積在一起
          2. 重疊面積圖表示(在同一時間段內)多個時間序列重疊在一起

          重疊面積圖中不建議包含兩個以上的時間序列,以免模糊數據。相反,可以使用堆積面積圖在一個時間間隔內比較多個值(橫軸表示時間)。

           

          樣式

          數據可視化使用自定義的樣式和形狀,以適應用戶需求和上下文的方式使得數據一目了然。

          下列有益于圖表自定義:

          1. 圖形元素
          2. 排版
          3. 圖標
          4. 軸和標簽
          5. 說明和注釋

           

          設置不同類型數據的樣式

          視覺編碼是將數據轉換成視覺形式的過程。獨特的圖形屬性可以應用于定量數據(如溫度,價格或速度)和定性數據(如類別,風味和表達式)。

          這些圖形屬性包括:

          1. 形狀
          2. 顏色
          3. 尺寸
          4. 面積
          5. 體積(容積/量)
          6. 長度
          7. 角度
          8. 位置
          9. 方向
          10. 密度

           

          表達不同屬性

          多種視覺處理方式可以應用于數據點的多個方面。例如,條柱的色彩可以表示一個類別,與此同時條柱的長度可以表示一個值(如人口大?。?。

          形狀可以用來表示定性數據。在該圖表中,每個類別由一種特定形狀代替(圓形,方形和三角形),這使得比較特定范圍內的數據或與其他類別數據進行比較都很容易。

           

          形狀

          圖表可以通過形狀來以多種不同的方式表達數據。形狀可以被設計為一條有趣的曲線,或一個精確的高保真圖形,以及介于二者之間的其他方式。

           

          形狀的精確程度

          圖表可以以不同的精度來表示數據。用于深入研究的數據應該(根據觸摸目標的尺寸和相關可視化要求)使用適合交互的形狀來表示。而用于表達大致想法或趨勢的數據可以使用細節較少的形狀。

           

          顏色

          顏色有四種主要的區分數據的方式:

          1. 區分不同的類別
          2. 表示數量
          3. 突出特定數據
          4. 表達意義

           

          顏色區分類別

          在環形圖中顏色被用于定義類別。

           

          顏色表示數量

          在地圖中顏色被用于表示數據值。

           

          顏色突出數據

          在散點圖中顏色被用于突出特殊數據。

           

          焦點區域

          當顏色被少量使用時,它可以突出焦點區域。不建議使用大量的高光顏色,因為它們會分散用戶的注意力。

           

          顏色表示意義

           

          無障礙

          為了適應無法區別色彩差異的用戶,可以使用其他的方法來強調數據,例如高對比度著色、形狀或紋理。

          將文本標簽應用于數據也有助于澄清其含義,同時消除了對說明的需要。

           

          線條

          圖表中的線條可以傳達數據的質量,例如層次結構、突出強調和對比。線條的樣式可以采用不同方式,如使用虛線或不同的不透明度。

           

          線條可以應用于特定的元素中,包括:

          1. 注釋
          2. 預測元素
          3. 比較工具
          4. 置信區間
          5. 異常

           

          排版

          文本可以用于標記不同的圖表元素,包括:

          1. 圖表標題
          2. 數據標簽
          3. 軸標簽
          4. 說明

          層次結構中級別最高的文本通常是圖表標題,最低的是軸標簽和說明。

          范圍類型 字體 字型 大小
          1.圖表標題 Roboto 常規 18pt
          圖表副標題 Roboto 常規 14pt
          2.數據標簽 Roboto 常規 22pt
          子標簽 Roboto 常規 14pt
          3.軸標簽 Roboto 常規 12pt
          4.說明標簽 Roboto 常規 12pt

           

          文本粗細

          標題和不同的字體粗細在層次結構中可以傳達哪些內容比另一些更重要(或更不重要)。然而這種處理方式應該有節制地使用,即采用數量有限的字體樣式。

          圖標

          圖標可以表示圖表中不同類型的數據,以提高圖表的整體可用性。

           

          圖標可以被用于:

          1. 分類數據,以區分組或類別
          2. UI控件及操作,如篩選,縮放,保存和下載
          3. 狀態,例如錯誤狀態,無數據狀態,完成狀態和危險狀態

          當在圖表中使用圖標時,建議使用普遍可識別的圖標,尤其是在表示操作或狀態時,例如:保存,下載,完成,錯誤和危險。

           

          在傳達意義時圖標補充了顏色的意義。

           

          有標記的軸

          有標記的軸或多個軸能夠指示數據所展示的規?;蚍秶@?,折線圖展示的是沿水平和豎直方向標記的軸的范圍內的值。

           

          條形圖基線

          條形圖應該從基線(y軸上的起始值)上的0開始。從不為0的基線開始可能會導致數據被錯誤地感知。

           

          軸標簽

          標簽的使用應該反映圖表中最重要的數據細節。軸的標簽應該根據需要,并在用戶界面中以一致的方式使用。它們的存在不應該妨礙圖表的閱讀。

           

          文本方向

          在圖表中文本標簽應該按水平方向放置,以保證其易于閱讀。

          文本標簽不應該:

          1. 被旋轉
          2. 垂直堆疊

           

          說明和注釋

          說明和注釋描述圖表的信息。注釋應該突出顯示數據點、數據異常值和任何值得注意的內容。

          1. 注釋
          2. 說明

           

          在桌面設備上,建議在圖表下方放置說明。而在移動設備中,建議將說明放置在圖表上方,以便在交互過程中保持說明可見。

           

          標簽和說明

          在簡單的圖表中,圖表元素可以被直接標記。但是,密集的圖表(或較大圖表組中的部分)可以在說明中顯示標簽。

           

          小型顯示器

          在可穿戴設備(或其他小型顯示屏)上顯示的圖表應該是桌面端或移動端圖表的簡化版。

          行為

          圖表為用戶提供了可以控制所展示數據的交互模式。這些模式讓用戶關注圖表中的特定值或特定范圍。

          以下推薦的交互模式、樣式和效果(如觸覺反饋)可以提高用戶對圖表數據的理解:

          1. 逐級展開 提供了一種清晰的途徑來揭示細節,可按需展示。
          2. 直接操作允許用戶直接對UI元素進行操作,以減少屏幕上所需的操作步數,直接操作包括:縮放和平移,分頁,數據控件。
          3. 改變透視圖可以使一項設計服務于不同的用戶和數據類型,例如數據控件和移動。

           

          逐級展開

          使用逐級展開的方式顯示圖表細節,能夠允許用戶根據需要查看特定的數據點。

           

          縮放和平移

          縮放和平移是圖表中流行的交互方式,它們影響用戶研究數據和探索圖表UI的密切程度。

           

          縮放

          縮放改變了UI顯示的距離。而設備類型則決定縮放的執行方式。

          1. 在桌面端,通過點擊并拖動或滾動的方式實現縮放
          2. 在移動端,使用雙指捏放的手勢來實現縮放

          當縮放不是主要操作時,(在桌面端)可以通過單擊并拖動或(在移動端)通過雙擊來實現相同效果。

           

          平移

          平移能夠讓用戶探索超出屏幕之外的UI。應該以對顯示數據有意義的方式對其進行約束。例如,如果一張圖表的一個維度比另一個維度更重要,那么平移的方向可以僅限于更重要的維度方向上。

          平移操作通常與縮放配合使用。

          在移動端,通常通過手勢進行平移,例如單指滑動。

           

          分頁

          在移動端上,分頁是一種常見的模式,允許用戶通過左右滑動查看上一張或下一張圖表。

          視頻播放器
          00:00
          00:09

          在移動端,用戶可以向右滑動查看前一天的內容。

           

          數據控件

          可以使用切換控件、選項卡和下拉列表篩選或更改數據。

          當用戶調整控件時,這些控件也可以顯示度量。

          視頻播放器
          00:00
          00:05

          切換控件、選項卡和下拉列表意味著可以篩選或更改數據。

           

          動效

          動效可以加強并鞏固數據間的關系以及用戶和數據的交互方式。動效應該有目的地(而不是裝飾性地)被使用,以表達不同狀態和空間之間的關系。

          動效應該合乎邏輯,平穩且能夠快速響應,不妨礙用戶的體驗旅程。

           

          視頻播放器
          00:00
          00:06

          在這一案例中,數據的動效設置在切換按天顯示和按周顯示的時候。在切換的過程中不顯示所選日期范圍之外的數據,從而降低了圖表復雜性。

          視頻播放器
          00:00
          00:06

          此處的動效顯示了兩張不同圖表之間的聯系。

           

          空狀態

          空白的圖片和表格可以顯示一些表明在數據可用時期望發生的內容。

          在適用的情況下,角色動畫能夠帶來愉悅感和激勵。

           

          視頻播放器
          00:00
          00:17

          角色動畫豐富了空白圖片。

           

          儀表盤

          數據可視化可以在一系列的多個圖表中展現,這在UI中被稱為儀表盤。多個單獨的圖表有時比一個復雜的圖表能夠更好地傳達一個故事。

           

          儀表盤設計

          儀表盤的目的應反映在其布局、樣式和交互模式中。儀表盤的設計應該適應它的使用方式,無論它是一個演示工具還是一個深入研究數據的工具。

          一個儀表盤應該:

          1. (通過布局)優先考慮最重要的信息
          2. 顯示根據層次結構(使用顏色、位置、大小和視覺權重)排序的信息焦點

           

          應該根據數據提出的問題對信息進行優先級排序。在本案例所示的操作儀表盤中,考慮了以下的用戶問題:

          1. 需要被注意的問題
          2. 問題發生的時間
          3. 問題發生的位置
          4. 受問題影響的其他變量

           

          分析型儀表盤

          分析型儀表盤能夠讓用戶探索多個數據集并發現趨勢。通常這些儀表盤包括復雜的圖表,這些圖表能夠發現數據細節。

          使用情況包括:

          1. 強調隨時間變化的趨勢
          2. 回答“為什么”和“如果……怎樣”的問題
          3. 預測
          4. 創建深入的報告

           

          分析型儀表盤的案例有:

          1. 跟蹤隨時間變化的廣告活動表現
          2. 跟蹤產品在整個生命周期中的銷售和收益
          3. 顯示城市人口隨時間改變的趨勢
          4. 跟蹤隨時間變化的氣候數據

           

          操作型儀表盤

          操作型儀表板旨在回答一組預定義的問題。它們通常用于完成與監視相關的任務。

          在大多數情況下,這種類型的儀表盤會把當前信息安排在一組簡單的圖表中。

          使用情況包括:

          1. 根據目標跟蹤當前進度
          2. 實時跟蹤系統表現

           

          操作型儀表盤的案例有:

          1. 跟蹤呼叫中心活動,如呼叫量、等待時間、呼叫長度或呼叫類型
          2. 監視云端應用程序的運行情況
          3. 顯示股票市場表現
          4. 監視賽車的遙測數據

           

          演示型儀表盤

          演示型儀表板提供了關于感興趣主題的詳細快照。

          這些儀表板通常包括一些小圖表或記分卡,通過動態標題來解釋每個支持圖表中提供的趨勢和見解。

          使用情況包括:

          1. 提供關鍵績效的指標概述
          2. 創建高級執行摘要

           

          展示型儀表盤的案例有:

          1. 提供投資帳戶表現的概述
          2. 提供產品銷售和市場份額數據摘要


          譯者:杜雅黎

           

          轉載請注明:學UI網》Material Design Data Visualization 數據可視化

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          數據可視化設計師如何建立靈感庫?

          seo達人


           

          一、前言

          與其他相對成熟的設計領域(UI、插畫等)相比,數據可視化尚顯小眾,在一個細分、小眾、不成熟的領域里做設計,“怎么去找靈感”確實是一些小伙伴經常遇到的問題。本文以本人工作經驗為基礎,系統性分析了該問題及對應的解決方法,并將其整理成文與大家分享,這在數據可視化行業內尚屬首次。當然了,本文雖面向數據可視化設計師群體,但其中的方法是通用的,運用在其他設計領域也完全事半功倍。

           

          二、本文結構概覽

          本文圍繞“搜什么——去哪兒搜——怎么搜——素材的整理——靈感的迭代與更新” 五大塊展開。下圖向展示了這篇文章的知識結構,大家可根據思維導圖,選擇自己感興趣的部分閱讀,也可把這張圖作為知識卡片收藏,幫助自己梳理建立靈感庫的思路和方法。

           

          三、靈感庫建立的基礎

          靈感庫的建立大體上分主動與被動兩種。主動,是我們有意識的收集、整理相關作品素材形成靈感庫的過程;被動,指通過朋友圈好友分享、同行推薦等獲取靈感的方法。因為后者更不可控,影響因素較多,比如你所處的圈子、社交網絡使用習慣等都會影響被動獲取的質量。所以今天,我跟大家分享的主要是第一種主動建立靈感庫的方法,而這個方法的核心我把它歸納為兩個字 :搜索。

          搜索是現在這個時代我們主動獲取信息的最主要手段,每天我們通過各類關鍵詞在各類APP上獲取各樣的服務、產品和資源。靈感的主動收集就是一個通過關鍵詞搜索,然后分類、整理、研究、再利用的過程。所以影響靈感收集的主要因素其實就是我們能不能用好搜索。不同的搜索方法、渠道、關鍵詞極大的影響著我們獲取到的信息的質量,這也是本篇文章為何一搜索核心展開的原因。

          如下圖所示,同樣的關鍵詞在不同的搜索渠道,得到的內容質量是不一樣的。

           

          四、靈感庫建立的第一步:搜什么?

          互聯網很大,如果沒有明確的目標,找靈感的過程就跟刷抖音一樣,恍恍惚惚幾個小時,好像點了不少贊,收藏了不少干貨,回頭看其實并沒有什么特別有價值的東西,所以找靈感要有目標,有KPI才行,有目標就有標準,有標準才有方向和效率。

          如上圖所示,我對數據可視化這個行業術語做了分析和拆解,這樣做的目的是為之后搜索關鍵詞的提取做思路的拓展。很多小伙伴在搜索可視化相關內容時,思路總是局限在“可視化”這個關鍵詞上,但是直接使用這個關鍵詞搜索,大多數時候并不能找到我們心里預期的結果,或者搜索多次后,看到的都是之前見過的作品,很難突破邊界,獲取更多新的靈感。造成的這個結果的原因顯而易見,就是關鍵詞的匱乏,不知道搜什么。而對“大屏數據可視化”進行解析之發現,以往的搜索,我們只使用了四個方向里的其中一個,其它三個方向并沒有很好的利用?,F在,我們以每個方向上的核心關鍵詞為基礎,去豐富它的下一級關鍵詞,這樣就會像枝椏新生一樣,在各個節點延伸出豐富的詞匯。

           

          媒介

          媒介就是數據可視化設計最終落地在什么平臺,一般來講,大屏數據可視化設計落地的媒介當然就是大屏了,以它為核心做關鍵詞的發散,可以產生其它幾個二級關鍵詞

           

          數據類型

          數據類型是主要數據的特征或來源,不同的數據類型,在可視化設計時有不同的視覺特征。比如地理信息的數據可視化,一般會與道路、河流、人造建筑、某區域內地標等一起出現,會有豐富的3D場景、動效,而圖表信息相對較少;報表類信息的數據可視化,則主要以更好的展示報表內大量數據為主,所以強調信息的層級、主次,設計的目標是要減少用戶認知負擔、引起用戶閱讀興趣,促進數據內容的有效傳達,因而會較少使用動畫,其次,因數據較多,也很難對應到某個具體的物理場景,故3D模型等也較少使用。

          所以以數據類型為核心,拓展的二級關鍵詞會讓搜索結果更精準,更有針對性。

           

          設計風格

          設計風格就是視覺設計整體上給人的想象和感受,好的設計就跟一個人一樣,一定是有自己鮮明的個性和氣質,能夠引起人的共鳴和向往的,唯有如此,設計才能吸引人,從而影響人,并最終傳遞自己的觀點給觀者。所以設計風格的定義是視覺設計中最重要的一環,也是最需要靈感和創造力的部分。

          作為數據可視化設計師,我們想要找到的參考是那些具有數據可視化風格的作品,但這些作品本身并不一定是在講數據可視化的內容,只要作品某部分的設計有我們想要的那種“感覺”,就可以了,而這個作品可能是某段影片、某個動效、某種圖形、某個元素或聲音?;谶@樣的思路,我歸納了一些具有數據可視化風格但不一定都是數據可視化作品的關鍵詞。這就是一個特別有意思的點,我門想要找到某個內容,但當我們用最貼切它的那個名字去找時,卻不一定能找到最能代表它風格的作品。所以當我們跳出數據可視化這樣一個具體的點,而從更抽象的設計風格這個層面去看待它的時候,就能更好的的發散思維、拿到了更多好的關鍵詞,找到更多的刺激點。

          以設計風格為例,我們從它的節點上找到任意一個關鍵詞:SCI-FI,然后搜索這個關鍵詞,我們看看搜索到的結果。

           

          業務場景

          業務場景簡單理解就是在什么情況下要解決什么問題,它是數據可視化的落腳點,也是數據可視化的商業價值所在。每個公司或團隊,都會有自己專注的業務方向,所以在工作中找這方面的靈感,從業務場景入手效果最好。

          簡單回顧下,通過上部分文章的分析,我們從媒介、數據類型、設計風格、業務場景四個方面形成了一個數據可視化的關鍵詞的矩陣。這個矩陣是建立靈感庫的基礎,之后我們每當我們有新的關鍵詞要加入,或者有效果不好的關鍵詞需要剔除,只需修改、迭代這個關鍵詞矩陣即可。有了這個關鍵詞矩陣后,我們如何利用它完成一次基于實際需求的靈感搜集?下面給大家舉個小栗子來看一下怎么用。

           

          一句話描述業務需求

          首先用盡可能簡短的一句話描述業務方訴求。

          一句話描述業務訴求后,我們把業務需求帶到關鍵詞矩陣中,就會獲得如下圖的結果:

          可以看到,帶入需求后,按樹狀結構去匹配與需求相吻合的關鍵詞,就可拿到明確的搜索指引目錄,然后我們按搜索指引,開始靈感收集即可。

          這里有個小小的點,就是為什么要盡可能用簡短的一句話來描述業務方訴求,

          • 1、這樣做可以把那些優先級低的干擾因素都過濾掉,留下真正核心的訴求,越是能簡短的概括,越能真正把握需求的核心。我個人一直以來與業務方溝通需求后,都會嘗試用一句話概括,若需求方認可,開始設計工作;不認可,則繼續溝通。
          • 2、對于數據可視化設計師來講,明確自己在工作流中的角色、承擔的責任、要解決的問題以及最終交付怎樣的產出尤為重要,因為只有清楚了這些,這樣我們才能有效分配自己的時間、確定跟上下游的協作策略,避免盲目的沒有KPI的設計。

           

          五、靈感庫建立的第二步:去哪兒搜?

          合適的關鍵詞是第一步,它保證了我們搜索結果的有效性,而去哪兒搜決定了我們搜索結果的質量。如下圖,針對數據可視化設計師,我對“去哪兒搜”這個問題按我自己的從業經驗做了梳理。

          從我的歸納里大家可以發現,我把數據可視化設計師的靈感來源分為了四大塊(其它行業的設計也大體上就這四塊),分別是:設計網站、產品或服務提供方、獨立設計師或工作室、視頻網站。

           

          第一部分:設計網站

          設計網站部分列出的都是設計師們都熟悉的幾個站點,在之前,大多數靈感的收集都可在花瓣完成,但花瓣最近幾次改版之后,已經沒有以前那么好用了。對數據可視化方面的素材搜索,個人經驗下,強烈推薦大家去behance,雖然behance訪問方面也面臨一些困難,但是,但凡你想真的了解一些好的設計,這個網站,是你一定要想辦法去經常逛逛的。至于為啥不推薦其它幾個網站,倒并不是說其它網站不能用,只是搜索的結果相對局限。針對這塊的具體分析,我會在文末的Q&A里進行。

           

          第二部分:產品或服務提供方

          我們知道,任何商業設計,一定是有一個業務或應用場景來支撐的,一定程度上設計就是在圍繞業務場景提供視覺、交互、用戶體驗、品牌等方面的解決方案,也就是說設計是服務于業務場景的,反過來講,服務于這個業務場景的就只有設計師么?當然不是。在市場條件下,服務的提供方除了像設計師這樣的個體外,更多的是我們熟悉的另一個機構(組織),這個組織的名字叫“公司”。公司把大量專業的人員組織在一起,通過優勢互補、強力協作,提供服務、解決需求方問題。對于數據可視化設計來講,企業當然也參與其中。所以我們找靈感去服務提供方也是一個高效的方法。企業要證明自己的實力、要讓潛在客戶了解自己,必然會花大量的資源做營銷做推廣,而最常見的推廣的落腳點就是企業官網。很多做數據可視化的公司,會在官網展示一些能體現自己業務特點、業務實力的案例,而這些案例就是這些企業最好的數據可視化設計作品了,沒有人會在自己的臉上放垃圾上去,對不? 所以但凡有案例展示的官網,案列基本都是最典型最好的設計,所以從這些案例中找靈感,也是一個有意思且有效的方法和途徑。

           

          阿里DataV

           

          Hightopo

           

          Tob.Design

           

          第三部分:獨立設計師或工作室

          獨立設計師一般給人的感覺是什么呢?就是在自己垂直的領域內極致牛逼,近乎神一樣的存在。獨立設計師要能順利“獨立”,當然是在設計能力、個人品牌建設、客戶維護、運營管理等方面都有比較硬核的水準,所以這部分設計師作品一般不會差。而工作室一般都是一個或者幾個知名設計師組成的團隊,在管理方面更“公司化”一些,這樣的工作產出也會比較穩定,水平較高。就可視化(包括類可視化)領域來講,個人比較認可和喜歡的工作室有以下幾個(歡迎大家評論里補充,或參與文末問卷調查),Ta們的作品風格鮮明,找靈感也是不錯的參考。

           

          dennisschafer

           

          huds+guis

          以上對于“去哪兒搜”的分析,我相信可以給大家很好的啟發:我們設計師尋找好的作品并不一定要通過設計相關網站進行,你看大家都能看到的東西,即使有突破,那也是大家所熟悉的樣子,你只有從圈子里跳出去,看80%的人看不到的東西,你的靈感才有機會與眾不同,標新立異。

           

          六、靈感庫建立的第三步:怎么搜?

          前面兩部分,我們介紹了搜什么(關鍵詞的定義),去哪兒搜(合適的素材來源),接下來以behance為例跟大家聊聊怎么搜,介紹一些具體的方法。我們的目標是盡可能少的點擊搜索按鈕,且盡可能多的找到符合自己預期的有質量的作品。要做到這點,首先我改掉自己以往的不好的搜索習慣。

          我知道我很多小伙伴都是輸入一個關鍵詞,然后看結果頁,沒有滿意的就換一個關鍵詞繼續,這樣做很低效,容易漏掉結果頁中符合你預期的好作品,并且也容易造成關鍵詞的浪費,通過第一部分關鍵詞矩陣的介紹,大家都知道,關鍵詞是被精確定位推導而來的,若不停的換關鍵詞,很快就會出現關鍵詞用完了但是依然沒有找到好靈感的囧局,所以榨干每一個關鍵詞是高效搜索的重要手段,具體怎么做到這一點,我個人有以下思路給大家參考:

           

          1、直搜關鍵詞:快速瀏覽、標記自己感興趣的項目,稍后再做整理

          通過這個結果頁面我們看到,搜索結果包含“所有結果、項目、人物、情緒板”四個選項,默認顯示所有結果,但這個意義不大,重點在項目跟情緒板。

           

          項目

          切換到項目標簽,項目標簽下展示的都是完整的項目作品,這是可以快速瀏覽,看到感興趣的內容就把它標記到新的頁面,等所有瀏覽查看結束后再細看每個項目,并對項目做進一步的分類和整理。

          項目標簽下提供的篩選項很實用,分類依據推薦“好評最多+本月”的組合,以月為單位既可選到大家都比較認可的新作品也避免了因數據波動造成部分作品質量差的情況?!耙巡哒埂鳖愃普究峄騏I中國的首頁推薦,是被官方編輯認可和推薦的作品,一般都會有很高的質量,但時間上可能會比較舊。

          在篩選器里面,有另一個比較實用的功能叫做“按色彩篩選”,如果客戶或者業務方對主色調有要求,就可以通過色彩的篩選,找到更符合我們業務需求的相關作品借鑒,或者設計師自己對某類顏色的搭配總是調整不好,也可以通過篩選,看看其它同行是如何處理這類色彩的,這也是一個有針對性訓練和學習的方法。

           

          情緒版

          情緒版就是花瓣里的畫板,它是其Ta設計師采集的同類主題的作品合集,用法也跟花瓣一模一樣,唯一的不同是花瓣可以采集站外的內容到畫板,而behance只能采集站內的內容,其余兩者完全一致。

          情緒版默認是按時間的先后順序排列的,所以可以通過篩選項,將排列順序調整為“關注人數最多”,正常來講,關注人數越多的情緒版收集的作品質量也越高。

           

          2、利用作品標簽聚合同一主題作品,并集中瀏覽

          我們知道,像站酷、UI中國等平臺,用戶上傳作品時,都需要給作品添加一些標簽,這些標簽的作用就是幫助網站做人工的作品分類,我們點擊某一標簽就能看到使用了同一標簽的所有作品,可以說標簽是比搜索關鍵詞高效的內容檢索手段。每一個作品下,都顯示了作者上傳作品時填寫的標簽,通過點擊這些標簽我們將搜索結果引入到了另一個更純粹有效的內容領域。

          更有趣的是,標簽同樣支持項目、情緒版這兩個層面的進一步分類,同時也支持之前介紹過得分類篩選功能。也就是說,在最開始搜索時找準一個關鍵詞,之后通過情緒板、作品標簽等方式就能關聯起來海量的內容。

           

          3、按圖索驥:Ta推薦的作品

          通過前兩步,我們已找到了一些比較不錯的作品,而優秀作品的背后當然是優秀的設計師或團隊。所以點進作者的主頁看,一般都會有驚喜的。除了能看到作者自己的作品外,我想說的是另一個標簽“好評”,好評這個標簽其實體現了作者的審美和職業方向,如果作者本人在領域內已經足夠專業,那么能被Ta欣賞和點贊的作品大概率也不會差,所以好評這個按鈕,是借助行業大咖的手幫我們做了一次作品的篩選和收集,點這個標簽進去大多數時候是不會讓你失望的,一般都驚喜滿滿。

           

          4、Ta關注的設計師:順藤摸瓜,串起一個行業的大咖

          在今天,每個設計師離自己領域里最頂尖的大咖,只隔著3.75個人,通過點擊作者的“正在關注”,你可以看到設計師本人還關注了行業里的哪些設計師,通過這樣的操作3到4次,你會發現總有那么幾個人,會在這個略顯復雜的網絡中被不同的大咖同時關注,那么Ta就是這個行業里比較頂尖的人才了。

          在“正在關注”下面會顯示作者所在團隊,因為好多項目其實一個人是很難完成的,大都是好幾個設計師協作的結果,所以如果你找到的這個設計師作品足夠牛逼,那說明他的團隊也是很不錯的,順便關注一波就好。

          當你習慣這樣摸瓜,一段時間后這個行業里幾乎頂級的大咖就都在你的關注列表里了,做到這一步后你就會有一個新的收獲,這點我們后面再聊。

           

          七、搜索結果的整理與優化

          利用前面的搜索方式,我們已經找到了不少較為滿意的作品,接下來我們需要再對這些作品做簡單的篩選整理,把真正符合我們需求的作品整理出來。

          我習慣用網站自帶的收藏功能及部分精品資源本地收藏的方式來整理自己的靈感庫。網站的情緒板我把它看作是一個各個終端通用的網盤。behance提供了兩個收藏作品的功能:點贊與保存到情緒版。站酷跟ui中國也有同樣的功能。

          點贊的作品,會統一收集到個人主頁“點贊”標簽下,所有作品按時間排列,比較亂,所以推薦把喜歡的作品收集到情緒板。建立情緒板可以按類別將作品整理到不同畫板,由于情緒板是可以分享和被搜索的,所以使用情緒板整理靈感,不僅方便了自己,也益于同行。目前來看,情緒板在behance這個產品中已經跟花瓣中的畫板非常像了,不僅可以采集一個完整的作品到情緒板,也可以采集作品中某個單獨的圖片或視頻到情緒板,這樣的靈活性跟花瓣完全一致,且behance將情緒板被放到了用戶非常容易觸達的位置,所以在大家的共同努力下,各類情緒板會越來越豐富,這個功能也會更有價值。

           

          八、資源的自我更新與迭代

          資源的自我更新

          經常玩抖音的小伙伴都知道,抖音會根據你的點贊、瀏覽等行為,為你推薦符合個人口味的視頻,而這樣的推薦功能在behance也有,behance會根據你點贊收藏的作品、你關注的人,給你推薦相應作品,并且推薦作品是直接顯示在首頁的,每次打開behance,你都會在網站最直觀的位置看到behance為你推薦的內容,這里的內容大體上分為兩類,一類是你關注的設計師的作品更新,另一部分基于已經關注的作者推薦相似的作品給你,就我個人使用體驗來講,推薦還是相當準確的。

          behance的推薦功能是資源自我更新的一個重要手段,你關注的同一領域作者越多,收藏的作品越多,它的推薦就越準確,這樣就節省了一些資源搜索的時間成本。要想獲得好的推薦結果,我建議你的behance上只關注一個領域的作者和作品,以我自己為例,我只關注數據可視化方向的作者和作品,雖然我也喜歡攝影、插畫等,但我主業是數據可視化,所以為了提高首頁推薦作品質量,其它兩類我會去500px等更垂直的網站瀏覽,而不會在behance上關注。當然,網站只是個工具,你也可以有自己的用法,與我而言,我關注的核心是效率。

           

          資源的迭代

          如果把我們收藏的內容比作是云盤里的資源,那么資源并不是越多越好,無論哪種類型的內容,當內容很多的時候找起來都會比較麻煩的。我們需要堅持做一些工作來不斷減少資源的數量提高資源的質量,少而精是最好的狀態,如此我們就不需要花很多時間去找某個內容,而已有的內容又都能很好的滿足需求。要做到這點,我們需要給資源做迭代,所謂迭代就是去掉舊的過時的內容,添加新的更好的。每隔一段時間,回來翻一翻自己之前收藏的作品,會發現有些作品自己已經看不上了,因為在做靈感收集的過程中,我們的審美會自然有所提高,當輸入的作品樣本越來越多,我們對作品評價的維度也會更多,之前那些覺得好的作品,現在看來也就會有缺陷和不滿,這是一個很正向的結果,成長就是一個不斷剔除的過程。刪掉那些自己覺得不滿意的作品,添加更符合自己當前審美的作品到各個情緒版。

          迭代還意味著我們需要對那些情緒版的標簽做維護,對那些命名跟內容不大匹配的情緒板,要及時更新更恰當的命名。同時,也要對情緒板內容的類別做維護,比如動畫、視頻類素材最好不要跟圖片類素材放一起,因為列表的封面圖并不能體現作品詳情里是否包含視頻等內容,所以作品很多時找起來就比較麻煩,按內容的不同類型把內容分別收納進不同的情緒版可以給我們后續的應用節省不少時間。

           

          九、Q&A

          1、behance在國內訪問受限,為何要以它為例做靈感收集的方法介紹?

          首先,Behance國內訪問不暢,并不影響它是世界范圍最優秀的設計師聚集平臺的事實。對于數據可視化而言,并不是一個新興的領域,在國外早已有之,并且相對成熟,而國內相關作品、經驗尚少,所以從獲取知識的角度來看,behance上你能獲取到的數據可視化相關作品或內容,不管是數量還是質量上,都要比國內的好。

          其次,正如文章剛開始我說的那樣,文中介紹的方法對國內的大部分設計網站同樣適用,尤其是關鍵詞的定義、標簽的使用、收藏及情緒板(畫板)的使用技巧。綜上,我當然是要介紹“更好”的靈感獲取網站給大家,而不是揪著大家熟悉的聊。

           

          2、我自己也收集研究了不少優秀作品,為何做的時候還是不知道如何下手?

          毋庸置疑,優秀的作品建立在良好的審美基礎之上,好的作品看多了審美自然會有提升,但審美有了為啥還是做不出符合自己期望的作品來。這塊有兩個問題,一個是刻意練習的度沒到,另一個是不會分析別人好的作品??桃饩毩暵犆志椭朗鞘裁匆馑迹髌贩治鼍褪俏覀円酪粋€作品之所以讓人眼前一亮,它“亮”在什么地方,就是要具體到細節,我們越是能夠細致的指出那些讓你覺得好的點,就越能模仿和借鑒,之后再輔以大量的刻意練習,才會有效果明顯的提升。那么到底如何去拆解、分析一個數據可視化作品?有幾步?有哪些方面?怎么做?如何應用?這一系列問題留待下篇文章繼續聊。

          當然了,下篇文章能否順利發出,還是看大家是否喜歡和支持!


          作者:BYMD

           轉載請注明:學UI網》數據可視化設計師如何建立靈感庫?

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合