<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>

          首頁

          大數據可視化界面設計之六:想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          博博

          數據可視化的目的,是要對數據進行可視化處理,以能夠明確地、有效地傳遞信息。” ——Vitaly Friedman

          如何讓人們在海量的數據中,發現數據的規律,或者清晰的發現特異的數據,那數據可視化是一個有效的表達方式。

          數據可視化主要旨在借助于圖形化手段,清晰有效地傳達與溝通信息。如圖

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          馬克·吐溫有一句名言“世界上有三種謊言:謊言,該死的謊言和統計數字。”人們經常曲解數字,謊言并不是源于數字本身,而是錯誤或不負責任的使用數字的人,向他人展示數字的時候,你有責任展示出真相?!稊祿馈?

          數據真相的展示離不開數據圖表的合理選用,那么如何正確的選用呢?就來聊一聊基礎數據圖表類型的選用及辨析。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          常用的基礎圖表類型


          第一部分:選用合適的圖表類型


          在數據可視化設計工作中,折柱餅圖表是最常用的,同時也是最容易混淆的。一組數據既可選用折線圖,又可選用柱狀圖的時候,設計師的內心往往會產生“我該選用哪種圖表能更好地將數據傳達給用戶呢”的疑惑中。

          基于上述疑問,下面給大家一些設計指引供參考。

          1. 柱狀圖 VS 折線圖

          折線圖主要表示一段時間內數據變化趨勢,柱狀圖用于描述分類數據之間的對比。如果不需要展示數據的變化趨勢,建議不要使用折線圖,而選擇柱狀圖。

          相較于折線圖,柱狀圖更多的關注數據之間的對比而非趨勢。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          2. 柱狀圖 VS 條形圖

          在大多數情況下,折線圖和柱形圖是可以互相替換的。

          1)用戶針對橫向長短的敏感性高過豎向,涉及到排行時最好使用條形圖。

          2)標簽較長時,使用條形圖。例如:城市人口流入量的數據展示,由于城市名稱文本比較長,建議使用條形圖。

          3)當圖表畫布高度大于寬度時使用條形圖,利用高度空間的富余,展現更多的條形。

          反之,建議使用柱狀圖。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          3. 柱狀圖 VS 餅環圖

          基于人的認知特征,人對面積、角度的敏感性沒有對長短的敏感性強。當類別的值接近時,不建議使用餅環圖,除非是強調單個數據在總體中的占比,突出數據在群體中的特點。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          4. 折線圖 VS 面積圖

          通常情況下,面積圖是折線圖的一種衍生。在面積圖里,數軸和線之間的區域通常用顏色或陰影來增加易讀性。面積圖數據集之間差異化部分在視覺上得到突顯。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          5. 餅圖 VS 環圖

          從本質上來看,餅圖與環圖屬于同一類圖表類型。但二者在數據可視化的表現上各有側重。從圖形映射角度來說,弧長比面積、角度更易被識別、更有效。因此,相對餅圖,環圖讓數據更具可讀性,同時,可以將強調數據放置在環圖中部,引起用戶關注。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          6. 堆疊柱狀圖 VS 餅圖

          如果在餅圖或環圖的基礎上增加一個多數據的對比,就需要引入堆疊柱狀圖。相較于餅圖,每一個單個堆疊柱狀圖就是一個餅圖的變形,可滿足用戶的單一數據的部分之間的對比關系。將堆疊柱狀圖橫向排布,就實現了整體數據之間的對比,而餅圖是不能進行整體數據的對比。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          7. 堆疊面積圖 VS 堆疊柱狀圖

          堆疊面積圖強調數量追隨一個數據變化而變化的程度,同時強調部分和整體的變化趨勢。

          堆疊柱狀圖強調的是整體的對比,也可以直觀的看出每個系列的值,尤其是當需要看某一單位的綜合以及各系列值的比重時,最適合。

          當日期數據點較多時,比如展示近50年某一組數據趨勢的變化時,建議使用堆疊面積圖,可動態交互,如X軸放大縮小可較為直觀的展示數據。當日期跨度較小,如近7天、近3天某一組數據的的變化關系時,建議使用堆疊柱狀圖。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節


          第二部分:應用中需要注意的細節


          1. 折線圖

          1)為了可讀性,折線圖線的數量建議不要超過5條。當折線數量超過5條時,可在圖表默認狀態中高亮最重要的部分。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          2)為了數據的易讀性,建議折線視覺效果使用實線

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          3)慎用曲線。單折線圖中線條是唯一的主題,線條的每一個點都真實的反應數據的起伏,一般建議使用折線。

          若線條趨勢不需要非常精確呈現,且需要消除個別差一點和整體的趨勢,可以用平滑曲線

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          4)折線圖可以處理大量數據,非常適合給用戶一些具有參考價值的數值,建議添加比較數據

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          2. 面積圖

          面積圖作為折線圖的一種衍生,可用來展示連續性數據,可很好地表示趨勢、累積、減少以及變化。堆疊面積圖更擅于展示部分和整體之間的關系或趨勢,而不是傳達特定的值。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          3. 柱狀圖

          1)柱子之間的間距不要過大,增加數據易讀性。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          2)使用合理的數據油墨比,降低用戶獲取數據的認知成本

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          4. 堆疊柱狀圖

          堆疊柱狀圖的數值必須能相加,相加無意義的數據不建議使用堆疊柱狀圖。如圖,同一區域的人員年齡相加,是沒有數據意義的,如果將年齡改為人員數量,就可以橫向對比不同區域的人員數量,是具有實際意義的。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          5. 條形圖

          分類數目是固定的,空數據也要展示。如果省略部分空數據節點,會造成不必要的誤解,同時,數據的整體分布狀況也不能完全表達出來。同理,柱狀圖也是一樣。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          6. 餅環圖

          1)若計算百分比,每個切片的數值不能為負,餅圖切片的大小與其相應的值成比例,所有切片相加必須為100%。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          2)通過扇形區塊的面積,弧度和顏色等視覺標記,展現部分與部分之間以及部分與整體的占比關系。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          3)餅環圖各切片有序排列

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節


          寫在最后


          雖然,數據可視化通常會讓人聯想到商業的分析師,但它通常比想象的更具創意并且豐富多彩。從業務儀表板、公共健康可視化到流行文化趨勢分析,數據可視化涵蓋了廣泛多樣的應用情景。

          隨著數據可視化的發展,數據表現形式也越來越豐富、多樣,如在Echarts中有近40個大類的圖標樣式介紹。如桑基圖、雷達圖、地圖等等。一些之前比較少見的圖表類型,也越來越常見,如玫瑰圖(南丁格爾玫瑰圖),通過人民網在疫情期間的應用,也為大眾所熟知。

          一般來說,相較于基礎圖表,目前發展的數據可視化圖表,應用場景相對來說比較局限,同時制作方式也較為復雜,不同于基礎圖表,通過Excel就可以實現,復雜圖表的制作需要比較專業的工具,或專業人員來實現,如需要專業的數據分析師通過Tableau、Qlikview、FineBI等數據分析工具來實現,有較高的學習與應用成本。

          好的可視化設計一定集易讀、突出數據價值、易于分析、美觀為一體的,最終讓數據變得更加簡單,方便交流,反之,不僅讓數據變得更復雜,而且還會帶來錯誤誘導。因此,如何讓數據分析變得輕松、流暢并且易讀,從而提高用戶的工作效率,降低用戶的工作負擔,則成為設計師的重要責任。

          本文只是介紹了部分基礎圖表的應用經驗,后續有機會將繼續完善可視化圖表應用經驗的沉淀及分享。

          作者:弘毅

          轉載請注明:優設網

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

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          更多精彩文章:

          大數據可視化界面設計之一:可視化大屏設計快速入門指南

          大數據可視化界面設計之九:超全面的數據可視化設計指南:設備篇

          大數據可視化界面設計之十:數據可視化必修課:表格篇













          大數據可視化界面設計之五:超全面的數據可視化設計指南:字體篇

          博博


          前言


          讀者朋友們大家好呀?。暶鳎骸蹲煮w篇》文章中所有的字體規范都只針對可視化大屏設計,后臺可視化以及 B 端可視化的字體規范與其不同)

          最近產出了很多東西,但都是以零碎的知識為主,主要是在社群進行分享,因此有需要的小伙伴歡迎加我交流。


          整體架構


          今天就帶大家好好聊一聊可視化大屏設計中的字體、字號、字重、字體優化等一系列注意事項。字體篇主要分為四大模塊:字體選擇與字重、字號規范與應用、字體優化與交接、常用字體與推薦。

          超全面的數據可視化設計指南:字體篇


          字體選擇與字重


          文字是界面中最核心的元素,是產品傳達給用戶的主要內容,它的承載體即是字體。從字體的最基本屬性(字族、字類、字重、字號等)說起,熟悉字體的那些特征,了解字體在界面中的作用。

          超全面的數據可視化設計指南:字體篇

          1. 襯線體與無襯線體

          襯線體

          襯線又被稱為“字腳”,襯線體就是有邊角裝飾的字體。我們常用的西文字體 Times New Roman 等;中文比較常見的比如宋體、明體等。

          超全面的數據可視化設計指南:字體篇

          無襯線體

          無襯線體則與襯線體相反,通常是機械和統一粗細的線條,沒有邊角的裝飾。最具代表性的 Arial、Helvetica 的西文字體,中文比較常見的比如黑體,微軟雅黑等。

          超全面的數據可視化設計指南:字體篇

          總結

          無襯線字體所具備的技術感和理性氣質,更受科技型企業或品牌青睞,騰訊谷歌等互聯網企業都是選用的無襯線體;襯線字體的優雅與復古,則常用于藝術性文字,時尚品牌等。

          因此在具有濃厚技術的可視化氛圍中,體現科技感和數字感,結合我們的觀測體驗,展示形式等,我們統一選用的字體是無襯線體。

          超全面的數據可視化設計指南:字體篇

          2. 中文字體

          字體選擇

          在使用數字屏幕閱讀時,字體的選擇要選用無襯線體(比如黑體,微軟雅黑)厚重一點,不可選用襯線體(比如宋體,書法體)比較單薄。

          注意事項

          標題可以用 Bold,更厚重,更加醒目,且不需要長時間觀看;正文由于需要長時間觀看,因此采用 Regular 字重,觀感以及體驗更佳;

          超全面的數據可視化設計指南:字體篇

          3. 英文字體

          字體選擇

          英文字體類型的使用,英文選擇更明顯的粗體,因為要展示數據,使得數據展示更加直觀,依舊是選用無襯線體,比較推薦:D-DIN 字體。

          注意事項

          字重用 Regular,更加纖細精致,英文字體分為大小寫,一般推薦使用純大寫模式,因為大寫可以保證字體本身整齊,并且寬高都是一致的,對于排版以及展示會更加友好。

          超全面的數據可視化設計指南:字體篇

          4. 數字字體

          字體選擇

          數字字體類型的使用,考慮畫面的字體的種類不超過三種,并考慮到字體的統一性,數字的字體與英文字體保持統一,比較推薦:D-DIN 字體。

          注意事項

          數字字體的字重盡量使用 Bold,因為展示更加明顯,數字的展示一般都為數據展示,在界面的展示中,一般數字字體會比同字號下中文小 4-6px,因此展示是保證數據清晰顯示,數字的字體大一點數據才能更清晰,更符合數據可視化展示。

          超全面的數據可視化設計指南:字體篇

          數字字體盡量選用等距字體,比如數字“1”和“0”,有些字體的間距會相應的縮小,我們要選用的就是等距字體,這樣在做一些列表數據對齊的時候,數據展示更加友好。

          超全面的數據可視化設計指南:字體篇


          字號規范與應用


          政府類客戶對于文字大小粗細的追求可以說是非常的偏激,字體加大加粗幾乎成了標配,這種需求下,我們能做的就是在原有規范的基礎上盡量去提升字號和字重。

          1. 常規 16:9 屏

          常規 16:9 指的是 1920*1080 的分辨率

          在字體大小的選擇上,參考了頁面上常規大小,定義了一套關于不同尺寸下的標準字號,正常 1080P 頁面,最小字號不小于 16px。

          此處字號并不是絕對,因為考慮到目標群體適老化的原因,我們主動提高了字體的大小,一切都是為了提高客戶的觀測體驗,具體字號大小還需要參考設備清晰度,環境燈光,視距,人為原因等因素。

          超全面的數據可視化設計指南:字體篇

          2. 常規 32:9 屏

          常規 32:9 指的是 3840*1080 的分辨率

          在字體大小的選擇上,其實是兩塊 1080P 的屏幕進行拼接,因此如果畫面內容較多時,定義最小字號不小于 16px。

          如果畫面內容較少時,具體字號大小還需要參考設備清晰度,環境燈光,視距等因素,對字體進行相應的放大,比例合適即可。

          此處字號并不是絕對,因為考慮到目標群體適老化的原因,我們主動提高了字體的大小,一切都是為了提高客戶的觀測體驗。

          超全面的數據可視化設計指南:字體篇

          3. 特殊尺寸屏

          特殊尺寸指的是非主流的分辨率,比如 2880*1920 的分辨率

          這塊的字號大小比較難定義,因為需要考慮的因素很多,總體來說字號大小如果高度在 1080px 左右,那么就按 16:9 的字號規范來算。

          如果高度高于 1080 且很多,則需要等比計算或者放大,具體實踐出的準確數值還得需要根據大屏的實際情況來綜合考慮,這里只是提供一些基礎計算方式。

          超全面的數據可視化設計指南:字體篇

          4. 字號影響因素

          字號的大小受到屏幕大小的影響;字號的大小受到界面內容的影響;字號的大小受到觀測距離的影響;字號的大小受到設備性能的影響;字號的大小受到主觀人為的影響;

          超全面的數據可視化設計指南:字體篇


          字體優化與交接


          給開發的字體太大怎么辦?如何優化?開發采用默認字體去開發怎么辦?開發用部署電腦沒有這個字體去打發你又該怎么辦?

          1. 優化字體

          給開發的字體太大,占用內存該怎么辦?

          其實我們可以用一些特殊的方法對原有的字體包進行優化,比如英文字體,我們可以刪除非必要的中文字體和數字,符號,只保留一些必要的英文字母。具體方法如下,我們可以用 FontCreator 軟件去進行字體的優化與刪減,并修改字體細節,重新命名發布。

          同時如果有意向的同學,也可以用自己設計的字體去應用到開發,這樣的操作不是一舉兩得嗎?

          優化字體教程: https://www.bilibili.com/video/av82311138

          超全面的數據可視化設計指南:字體篇

          2. 開發交接問題解析

          開發采用默認字體去開發怎么辦?

          默認字體開發可能有時候會出現文字換行,或者文字放不下的情況,因為不同字體的字間距以及大小可能是不同的,因此在初期就需要跟開發協調好,跟設計效果圖的字體保持同步,這樣才能保證設計效果的還原。

          超全面的數據可視化設計指南:字體篇

          本地部署電腦沒有字體該怎么辦?

          字體的存放一般是有兩種,一種是放到單獨的服務器然后每次加載去服務器訪問字體,另一種是跟代碼放到一起。對于字體大小的要求。本地存儲不需要考慮字體包的大小,云存儲需要考慮字體包大小。

          云存儲一般字體包大小的話可以限制在 2、3M 左右,5、6M 的字體包就已經非常大了,太大會影響我們字體的讀取,畫面加載很慢。

          超全面的數據可視化設計指南:字體篇

          最優解就是在部署本地的電腦上安裝你需要的字體,這樣的話程序就自動讀取,可以識別本地部署的字體;如果不支持本地化部署的,字體是存放在服務器或者是跟代碼打包放一起的,可以要求開發在全局代碼中多寫幾個備用的字體。

          比如你是 Windows 系統,那么自帶的就是微軟雅黑,iOS 系統自帶的就是蘋方平臺,會自動根據寫出的代碼按順序篩選自帶的系統字體。

          超全面的數據可視化設計指南:字體篇


          常用字體與推薦


          一些特別好用的字體,會在設計過程中提升畫面視覺,因此給大家推薦并分享了一些可以做可視化大屏的商用中英文字體。附件下載。

          1. 可視化常用中文字體

          中文字體包含了一些可以做標題的一些造型比較好看的字體,比如優設標題黑,站酷高端黑體,盧帥正銳黑體,胡曉波男神體等等??勺稣淖煮w的比如,蘋方簡體,思源黑體等等。

          超全面的數據可視化設計指南:字體篇

          2. 可視化常用英文/數字字體

          英文字體和數字字體主要是分享了一些數據展示比較奇特的造型字體,比如:DS-digital、Furore、以及正常數據展示的 D-DIN 字體家族等。

          超全面的數據可視化設計指南:字體篇


          全篇總結


          字體的最基本屬性:字族、字類、字重、字號,通過四種基本屬性為切入點,精準的去講述大屏可視化的字體規范和樣式。

          在可視化大屏設計中,字體更加偏向于無襯線體,無襯線字體所具備的技術感和理性氣質,更受科技型企業或品牌青睞;

          在可視化大屏中,展示數據的重要性不言而喻,因此要注意中文、英文、數字字體的選擇以及注意事項,一切以數據展示更加明顯為前提;

          在不同屏幕中,可視化大屏的字號大小規范是有區別的,并且需要結合影響字號的五大因素:屏幕大小、界面內容、觀測距離、設備性能、主觀人為去制定字體規范;

          通過 FontCreator 軟件去對字體進行優化,掌握字體的刪減發布以及交付開發的方法;

          了解開發存儲字體的兩種形式,一種是本地化部署,一種是與代碼打包服務器云存儲,以及了解兩種方式的優缺點;

          了解可視化開發關于字體交接時的注意事項,可以通過自己的理解去解決工作中的關于字體的問題;

          推薦了常用的可視化大屏的字體:中文字體、英文字體;

          如果畫面內容較少時,可以適當提高字號,反之亦然,比例合適即可;

          可視化大屏設計字體規范不存在絕對字體規范。

          作者:生活因你而火熱

          轉載請注明:優設網

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

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          更多精彩文章:

          大數據可視化界面設計之一:可視化大屏設計快速入門指南

          大數據可視化界面設計之九:超全面的數據可視化設計指南:設備篇

          大數據可視化界面設計之十:數據可視化必修課:表格篇














          大數據可視化界面設計之一:超全面的數據可視化設計指南:風格篇

          博博

          各位數據可視化設計師們大家好,鑒于平時有很多同學對我們的可視化大屏的設計知識點有很多不理解的地方,阿勇決定花一些時間去詳細剖析一下關于這方面的知識,全部都是多年工作經驗所得,絕對有料。

          整個合輯一共有 10 篇文章,分別涉及到設備篇、風格篇、字體篇、色彩篇、組件篇、布局篇、版式篇、視覺篇、團隊篇、技能篇十篇文章,詳細的講一講可視化大屏設計的知識點。


          風格篇主要包含:常用風格 > 風格解析 > 風格選擇 > 風格應用。

          本篇文章將會從風格分類入手,進行風格解析,總結可視化設計的風格,選擇風格并應用到場景,教大家如何選擇合適的風格應用到商業可視化項目中。

          畫面中的動效 GIF 圖會比較大,請大家耐心等候加載~

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          總結了商業項目中遇到的一些可視化案例以及科幻可視化風格,大體的將其分為三個大類:傳統風格、HUD 風格、FUI 風格。


          傳統酷炫風格


          傳統狹義上的數據可視化, 更多是純圖形去代表數據,通過圖形去展示數據,直觀的展示所需要表現的指標。數據可視化也有很多分類, 不過也許你也懶得了解了。

          比如,網站后臺分析,可以說是可視化分析報表類的,例如百度統計,谷歌統計等等;比如,面對 B 端后臺的數據可視化,國內做的最好的無非就是 antdesign,element;我們此處說的是基于 G 端的數據可視化大屏,G 端數據可視化從本質上來說是注重直接解決問題,通過直觀的展示數據圖表去了解各個指標的詳細數值;

          也有甚者比較注重視覺效果,要酷炫,心理學家說, 人腦 70%的神經信號來自視覺, 我們的視覺系統最完善, 而不同的感官之間, 多少是可以轉化的, 而且是每個人的天性。國內傳統可視化對于此處的接受程度確實不一樣。B 端和 G 端的用戶,對于可視化風格的接受程度確實是不太一樣的,B 端對于前沿技術以及可視化表現會有一定的接受能力,但是 G 端更多注重于界面酷炫,功能反而不是很重要了,這多少有點本末倒置的感覺。

          超全面的數據可視化設計指南:風格篇

          在傳統可視化面前,頁面的雜糅程度較強,彷佛是由一塊塊圖表堆砌而成,比較注重色彩的運用,多色搭配,色彩一般具有特質。一般大多數可視化可以看到共同的點就是:配色/布局/構圖,機械而又重復,彷佛一個流水線生產出來的。當然,現如今新基建乃是主流,人群對可視化大屏的認知和審美也在逐漸提升,設計師在以后的工作中還需要取長補短,多吸收一些好的東西去豐富我們具有中國特色的數據可視化大屏設計。


          HUD 風格


          平視顯示器(Head Up Display),以下簡稱 HUD,是運用在航空器的飛行輔助儀器。平視的意思是指飛行員不需要低頭就能夠看到他需要要的重要資訊。平視顯示器最早出現在軍用飛機上,降低飛行員需要低頭查看儀表的頻率,避免注意力中斷以及喪失對狀態意識(Situation Awareness)的掌握。

          因為 HUD 的方便性以及能夠提高飛行安全,民航機也紛紛跟進安裝,汽車也開始安裝,在一些游戲用戶界面,很多地方都會采用 HUD 的風格,比如射擊類,格斗類,動作類游戲等等(賽博朋克,堡壘之夜,絕地求生)。

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          在設計的細節當中使用大量的圖形元素,并輔以一定的裝飾元素,主要以點線為主裝飾,排版版式參考價值較強。HUD 相比較于傳統和 FUI 來說,更貼合我們的日常設計,對于圖形的展示也更加的有意義,所以透析 HUD 風格,對于提升可視化設計水平有很大的幫助。


          FUI 風格


          相對于當前流行的扁平化設計,FUI 可謂是在 Ul 設計中獨樹一幟,設計風格十分鮮明,極具未來感和科技感。

          FUI 是一個非常有趣的 Ul 設計領域,是我們在日常現實生活之中天法探索的用戶界面設計方式。在我們的日常工作中,通常日常設計很難有機會為宇宙飛船、時間旅行設備,或者感知型人工智能和外星人使用的用戶界面做設計。FUI 使設計師有機會去突破現有的用戶體驗和用戶界面的限制,探索一個新的領域。通過虛幻界面設計我們可以大膽的設想以及尋找新的解決方案。例如我們可以大膽的設想 AR 技術的應用,地圖可以采用全息投影技術、人與智能硬件的環境交互等等。

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          虛幻界面設計甚至可以是新的發明,它們可以作為一種概念的驗證它們可以啟發我們,提出問題,探索什么可行,什么不可行。正如科幻小說可以激勵人們登上月球或建造自動駕駛汽車一樣,虛幻用戶界面可以激勵人們為未來創造技術。

          FUI 的圖形裝飾元素可以說是極其豐富,形式感很強。在設計的細節當中使用大量的“異形”的圖形元素,并輔以一定的裝飾元素,但是一定程度上對于設計中繁瑣的需求,需求層次上尋找設計靈感沒有太多幫助。常用在科幻電影以及概念游戲等領域,落地較難。


          升華:如何培養出自己的可視化設計風格


          如何培養和完善自己的可視化設計風格呢?其實這個問題有點狹隘,不同客戶不同使用場景我們可能風格都會不太一樣,但是唯一我們不會變的是我們對于組件圖表的理解,圖表圖形的展示形式。

          • 傳統風格:多種色彩
          • FUI 風格:科技圖形
          • HUD 風格:版式排版

          超全面的數據可視化設計指南:風格篇

          一個合格的可視化設計師,對于任何可以參考的頁面,都可以迅速領略到可以應用的部分頁面和展示形式,多吸收知識,提升自己,這就是取其精華,去其糟粕的正確解答吧!所以要將現有風格結合,完善設計理念,提升視覺技法,這才是當下比較重要的。

          超全面的數據可視化設計指南:風格篇

          最近由于工作中的一個項目,對自己充滿了懷疑,究竟什么叫科技感?不同的應用場景,科技感是否還依舊有效?同展示條件下不同應用場景,又會有什么樣的差異?究竟是什么樣子的設計,才能被“甲方爸爸”認定為科技感十足,并且很酷炫呢?從酷炫科技感出發,總結了以下四個方面去解析科技感風格。

          • 科技感的界面有哪些特征?
          • 同展示條件下不同應用場景,又會有什么樣的差異?
          • 三維的表現形式,是否真的跟科技感成正比?
          • 面對段落文本需求,列表需求等如何把頁面做出科技感?

          超全面的數據可視化設計指南:風格篇

          1. 科技感的界面有哪些特征?

          相信很多可視化設計師聽到最多的一句話:要酷炫,要科技感!每每聽到這句話我都會變得非常暴躁。究竟是酷炫科技感代表可視化?還是數據可視才是可視化的內核?每每遇到這種令人糟心的問題,我想的是如何通過自己的專業知識去解釋,可是我發現根本解釋不清楚,也無法令甲方客戶信服,甚至和同為乙方的總包也無法達成統一戰線。那么我們應該如何去做呢,又應該如何去解釋科技感這個抽象的概念呢?

          超全面的數據可視化設計指南:風格篇

          配色

          提到科技感色系一般我們想到的就是藍色系(科技藍),但是很多人可能走進了一個誤區,科技感的專屬色彩并不是只有藍色,而且一些藍色確實讓我們有審美疲勞的感覺。如圖,就是我們比較常見的傳統可視化設計,一眼看去滿屏都是藍色,具有中國特色的藍色科技感。正如所有人都公認的黨建題材為紅色加黃色,那么科技感真的只有藍色專屬嗎?黨建題材都是紅色專屬嗎?

          超全面的數據可視化設計指南:風格篇

          由此可見,紅色并不是黨建題材的專屬色彩,存在即合理,也并沒有說黨建可視化一定要做成紅色的。制約的因素有很多:項目背景,項目需求,設計提案,專業認知等等,可視化大屏歸根結底還是做的是服務設計,因此服務好客戶,得到客戶的認可,就能體現設計的價值。但是在設計稿中可以發現,界面運用到了一些黨建色彩的元素,也是通過這種方式去展示,這也是設計師需要注意的一點。

          • 傳統科技藍風格可視化

          超全面的數據可視化設計指南:風格篇

          • 其他科技藍風格可視化

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          • 橘色科技感風格可視化

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          由此我們可以推斷,配色是塑造科技感界面的一個比較重要的因素。色彩的選擇需要根據實際所運用到的場景,比如安全行業,藍綠色會比較好一點;比如公安行業,傳統藍色就比較合適;比如衛星地圖,用藍色就不合適;根據不同的業務范疇以及不同的應用場景去確定配色,這才是我們要做的。

          藍色并不是科技感的專有屬性,任何一種顏色都是可以塑造科技感的感覺的。比如適合用綠色的場景做的界面,沒有做好看,那只能怪自己學藝不精,跟配色無關。不排斥藍色,但是討厭到處都是用藍色,上來就是用藍色。

          背景

          說到背景這是一個影響科技感非常重要的因素,一張超神比比皆是,一張超鬼也是隨處可見,究竟什么樣的背景才是一個優秀的可視化界面所具備的?不是畫面發光,有閃光點,宇宙或者銀河那種圖;也不是科技點線,帶漸變的線條(混合工具做出來的那種)看起來就特別復雜;也不是那種亮度超過畫面任何一個元素的圖。

          超全面的數據可視化設計指南:風格篇

          科技感的背景所起到的作用應該是襯托畫面,而不是在畫面中比較跳,搶視覺,一大坨發光或者復雜的圖形,只會起到反作用。

          一個好的背景一定是不影響視覺的同時,襯托畫面和主視覺,如果整個頁面分黑白灰三層,那么背景一定是黑的那一層,這樣的畫面效果才會好。

          圖形

          圖形應該是以上指標中,最令人可以接受對科技感風格詮釋的一種,科技感的圖形到底有哪些特征,我們又該如何去做呢?

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          通過以上案例我們可以發現,所謂圖形表現科技感,最大的特征就是點線面應用的多元化,通過一種或者多種規律將點線面組合起來,線條粗細長短不一,點大小不等。在使用圖形進行點綴搭配時,切不可過于花哨,從而搶了主要內容的風頭。

          不規則圖形,點線裝飾,色彩,外發光,都是圖形詮釋科技感的方式。

          此處可能會出現一些三維樣式的圖形,特殊的視角以及不常見的設計都會增加科技感的元素,但是也不是所有的三維都可以比二維更有科技感的。我最近做的就是甲方客戶一直覺得:三維元素太少了,科技感不夠。我就納悶了,到底什么才是科技感?難道科技感只能用三維的來表示了?只能說一定條件下,三維是優于二維展示的,但這也不是絕對的。如果你的場景主視覺本身就是二維范疇的,何必要要求組件三維展示。

          下圖的二維科技感表現上肯定是超過三維地球的,至少我是這么認為的。

          超全面的數據可視化設計指南:風格篇

          動效

          動效應該是最能體現科技感的方式了,通過動態演示組件,通過動效展示界面,遠遠比靜態頁面要合理的多。動效主要是通過:位移、旋轉、透明度(閃爍)、縮放等方式去制作,形成獨特的動畫節奏。

          最常用的科技動畫:粒子動畫,線條動畫,輝光,剪切路徑,偏移字符等等。

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          可以發現科技感動效一般都伴隨著極快的閃爍動畫,動畫的節奏也是比較偏快,再通過出現動畫,字符偏移,剪切路徑等演示組件的形成過程。

          2. 同展示條件下不同應用場景,會有怎樣的差異?

          可能大家沒有遇到過這種情況,比如在三維建筑可視化中,科技感本身就依賴于場景的表現,但是不知道大家有沒有試過,將三維建筑可視化換成二維 GIS 之后,我們如何去使畫面表現的更具科技感呢?

          圖一,圖二,圖三分別就是替換不同的場景,那么我們來看看這些場景為什么不適合原本的之前的科技感風格呢,我們一起思考一下~

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          以上三張圖可以看出,圖一的飛機可視化是畫面的原稿,后兩張是在同一種設計面板,替換了不用的主視覺場景,由此可以看出不同主視覺場景可能對應不同的風格 UI 組件,沒有通用的組件,如果想完美表達一些面板組件,那么需要取設計不同風格的主視覺場景才可以。

          大家可能會覺得科技感只針對于一些特殊的場景,或者說是深色場景,比如一些實景地圖和衛星地圖又該如何去表現科技感的元素呢?那么如果是淺色可視化我們又該如何去做科技感呢?

          科技感風格應用于不同的場景,那么表現科技感的方式也是有很大的不同的。

          超全面的數據可視化設計指南:風格篇

          3. 三維的表現形式,是否真的跟科技感提升成正比?

          其實這本身就是一個偽命題,三維表現對畫面的沖擊力是非常強的,對于畫面視覺效果的提升有很大的幫助。不過是否所有的三維就是最合適的呢,這個也確實有待商榷。不過能肯定的是,一定程度上,三維一定會比二維更加具有沖擊,更加具有科技感。

          首先必須要確定的是,此處三維一定是科技感點線組成或者說是線描類型的三維主體,而不是實景以及仿真的主體,當然并不是絕對的,此處針對大多數場景下。

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          可以通過以上圖片看出,科技感一定伴隨的是大量的點線裝飾,畫面主體一定是最突出的地方。而不是有時候遇到的是:GIS 地圖就是很普通的樣式,可編輯性不是很強,樣式也比較老舊,對設計就會造成大量的困擾。在主視覺沒有完美表現的時候,就不要強求說把兩邊去做好看,主視覺不好看,那么圖表做的特別華麗也只是讓主視覺更掉分。

          其實最正確的表現就是二維表現加上三維場景展示,兩者相輔相成,對于畫面的展示才是最好的。通過下面這組案例可以發現,二維表現加上三維場景才是最優解。

          超全面的數據可視化設計指南:風格篇

          4. 面對段落文本列表需求時如何把頁面做出科技感?

          很多同學對于文字需求如何制作科技感有很多的疑問,通過最近的作圖,總結出四種關于文字排版科技感的展示,總結起來其實就那么幾點:裝飾,圖形,字體,版式,表現形式…

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          超全面的數據可視化設計指南:風格篇

          其實對于數據可視化設計科技感的研究,不僅需要了解表現層,更需要上升到業務層。一些特定的圖形或者裝飾,對于畫面的豐富程度一定是有幫助的。

          講了這么多,不知道對大家理解科技感是否有幫助,如何提升畫面科技感,是我們做為數據可視化設計必定會面臨的一大難題。希望大家在以后的工作或者項目中,多多酷炫,多多科技感!??!

          超全面的數據可視化設計指南:風格篇

          1. 根據場景-了解展示需求

          場景是什么?是人物、時間、地點三要素所組成的特定關系。在某某時間(when),某某地點(where),特定類型的用戶(who),干了某某事情(what)。

          因此我們要確定的是,根據這四個“W”去確定整體業務框架的基礎構成,這對于設計風格的初步意向確認有著很積極的意義。

          超全面的數據可視化設計指南:風格篇

          • who:王局長
          • when:領導人會議時
          • where:公安局
          • what:新基建建設 數字化轉型事項

          在領導人會試上,公安局王局長提議通過了關于新基建,數字化轉型的各種措施。面對這一場景,有以下幾個問題。受眾是誰?需要干什么事情?誰去干?數字化轉型怎么做?怎么實現?需要用到的技術?展示風格?重功能?還是重展示?

          在有了這些的前提下,對于我們設計風格的選擇就有了很強的指導意義,比如王局長比較喜歡多色搭配,科技感強的風格,主要為了配合展示匯報,那么就可以通過這一些需求,初步制定風格為效果酷炫的展示類大屏,但是主視覺的展示形式還是要根據其他的具體情況去進一步確認。

          2. 根據含義-確立設計方向

          在面對一些特有的項目時,一般客戶會給出一些參考術語:“3 個一帶”,“2 個方針”,“八大成果”“三山,兩水,百林,千田”……

          面對這種問題,能做的就是理解其包含的真實意義,究竟需要展示哪方面的,了解清楚項目的背景需求,結合客戶所說的一些關鍵字段,剖析以上的內容可以發現,客戶通過一些方針和方法,對“山水林田”進行治理,取得了一些階段性成果。

          超全面的數據可視化設計指南:風格篇

          因此展示的內容可以確定為智慧治理,或者智慧生態方向的,然后就可以根據項目背景的內容去選擇可以應用的具體的一些方案了。

          3. 根據需求-明確設計內容

          因在到了需求分析的階段,可以根據客戶提供的大量的資料和業務需求,去明確的設計方向,究竟是需要展示哪些內容?可以提供的數據有哪些?展示條件(硬件設施)是否具備?想要的效果有哪些?

          超全面的數據可視化設計指南:風格篇

          比如客戶需要查看到山水林田的各個改進措施的效果,以及改進前后的效果對比。說到這單純的二維 GIS 和影像已經不太好滿足了,那么可以將場景風格定位到三維展示,需要實際 1:1 建模,至于是通過 WEBGL,UE,UNITY 就看各自的團隊擅長的方向了。

          場景大體風格確定,那么展示面板需求根據場景去搭建就可以了,這樣一個完整的風格選擇過程就算初步走通了,具體的驗證環節,可以在一次次會議中再去進行交流和修改即可。

          超全面的數據可視化設計指南:風格篇

          二維 GIS(深淺)、衛星影像

          • 優點

          展示容易,風格切換皮膚多,可編輯性高,開發難度低,地圖資源較多,適合快速搭建可視化大屏模版,開 源內容較多,前端開發直接調用樣式即可。

          • 缺點

          展示形式較普通,地圖風格樣式不出彩,設計效果也會打很多折扣,很難與同行拉開差距。

          • 難點

          開發過程中可能需要基于高德 API 以及一些平臺,對封裝地圖進行二次開發,沒有 GIS 開發經驗的前端,會比較困難。

          • 網址

          https://lbs.amap.com/product/mapstyle#/ Mapbox,高德 API,百度 API,超圖,天地圖等等。

          以高德 API 為例

          超全面的數據可視化設計指南:風格篇

          矢量地圖、省市區塊

          • 優點

          展示靈活,可下載 svg 矢量區塊,并可下載 json 文件直接交付開發,可下鉆到縣級,可編輯性高,一般會結合二維 GIS 來展示,有插件可以直接繪制全國地圖。

          • 缺點

          不夠立體,可選樣式比較少,畫面主視覺容易空洞導致畫面效果不強。

          • 難點

          開發對于設計圖的一些效果還原比較困難,例如發光,漸變等等。只能做一些比較基礎屬性的修改,對于效果還原可能達不到 80%以上。

          • 網址

          http://datav.aliyun.com/tools/atlas/

          以 DATAV 地圖下載器為例

          超全面的數據可視化設計指南:風格篇

          矢量地圖模型、省市區塊

          • 優點

          展示效果好,三維場景,有立體效果,材質貼圖不同效果會完全不一樣,可編輯性較強,相比較二維更推薦這種表現形式。

          • 缺點

          三維范疇,不會三維知識的小伙伴會比較難,此處會涉及到三維軟件合并擠壓,展 UV,漫射貼圖,QGIS 制作高度貼圖,PS 制作法線貼圖等等知識點。

          • 難點

          對于不懂三維的小伙伴比較困難,涉及知識點較多,容易一知半解。

          • 教程

          https://mp.weixin.qq.com/s/zjR_pJyU1jpeLJMXZ-4FyA (原作者已授權)

          3D 地圖建模及貼圖的制作獲取方法

          超全面的數據可視化設計指南:風格篇

          三維模型、城市建模

          • 優點

          展示形式新穎,展示效果非常好,三維表現往往讓人耳目一新,對于可視化的展示可以說是所見即所得,深得客戶喜愛。

          • 缺點

          開發難度高,專業性人才比較少,懂三維的設計也是非常的少,對于三維知識以及引擎開發知識需要比較熟悉才行。

          • 難點

          人才稀缺,入門難,做好更難,教程自學難度有點大,例如 cityengine 程序化建模,houdini 程序化建模等等。

          • 教程

          https://space.bilibili.com/21247145?from=search&seid=10582171815506234319

          cityengine 程序化建模

          超全面的數據可視化設計指南:風格篇

          知識圖譜、數據中臺等

          • 優點

          主視覺效果強,特殊場景的處理能夠很完美的講清邏輯,對于圖形化的理解有很強的意義。

          • 缺點

          邏輯復雜,難懂,比較抽象,專業難度高,對業務理解能力需要很強。

          • 難點

          邏輯處理比較難,設計效果比較難以想象,設計容易偏離主題,比如數據中臺,是一個非常虛幻的東西,很難講清楚處理邏輯和過程。

          • 網址

          https://www.zcool.com.cn/work/ZMzg4OTQ5ODQ=.html

          以知識圖譜為例

          超全面的數據可視化設計指南:風格篇


          知識點總結


          可視化風格三大分類以及對于圖形的應用(傳統、HUD、FUI);

          如何培養自己的數據可視化設計風格(色彩+圖形+板式);

          影響科技感風格的四大影響因素(配色,圖形,背景,動效);

          設計風格的選擇以及確定思路(根據場景、含義、需求);

          可視化風格的應用以及拓展(各種主視覺的應用優缺難點)。

          超全面的數據可視化設計指南:風格篇

          講了這么多,不知道對大家理解科技感是否有幫助,如何提升畫面科技感,是我們做為數據可視化設計必定會面臨的一大難題。希望大家在以后的工作或者項目中,多多酷炫,多多科技感?。?!不知道大家有沒有一種錯覺,突然有一段時間,某個時候發現自己突然不會做設計了,啥也想不明白了,莫名的有點浮躁,做什么都不能專心。其實很簡單,總的來說就是,你即將突破現有的設計水準,如果能想明白,解決掉問題,你的審美以及設計水平都會有很大的進步。這就是別人口中的,突然就會了,知道怎么做了,其實無非就是積累夠了,需要升入下一個等級了~

          作者:生活因你而火熱

          轉載請注明:優設網

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

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設

          ui設計,界

          計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          更多精彩文章:

          大數據可視化界面設計之一:可視化大屏設計快速入門指南

          大數據可視化界面設計之九:超全面的數據可視化設計指南:設備篇

          大數據可視化界面設計之十:數據可視化必修課:表格篇












          大數據可視化界面設計之二:可能是最詳細的大屏數據可視化設計指南!

          博博

          @UX-BOY :可能是大屏數據可視化設計介紹最詳盡的一篇文章,幫你盡量躲開大屏數據可視化路上那些坑。

          1.jpg

           

          文章目錄

           
          1. 基礎概念
          2. 大屏數據可視化設計原則
          3. 大屏可視化設計流程
          4. 大屏設計的注意事項
          5. Q&A
          6. 總結

           

          基礎概念


          1. 什么是數據可視化

          把相對復雜、抽象的數據通過可視的方式以人們更易理解的形式展示出來的一系列手段叫做數據可視化,數據可視化是為了更形象地表達數據內在的信息和規律,促進數據信息的傳播和應用。

          在當前新技術支持下,數據可視化除了「可視」,還有可交流、可互動的特點。數據可視化的本質是數據空間到圖形空間的映射,是抽象數據的具象表達。

          2.jpg

          3.gif

          △ 數據可視化作品《 launchit 》,作者:Shane Mielke

          作者寫了本書,地圖上顯示了世界各地讀者的分布情況及對應人數。

          4.jpg

          △ 數據可視化作品《 world-drawn-by-travelers 》,作者:TripHappy

          國家之間相互連通的旅游路線,顏色越相近的國家,表明兩個國家的人們互動越頻繁。

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

          大屏數據可視化是以大屏為主要展示載體的數據可視化設計。

          「大面積、炫酷動效、豐富色彩」,大屏易在觀感上給人留下震撼印象,便于營造某些獨特氛圍、打造儀式感。電商雙11時大屏利用此特點打造了熱烈、狂歡的節日氛圍,原本看不見的數據可視化后,便能調動人的情緒、引發人的共鳴,傳遞企業文化和價值。

          5.gif

          利用面積大、可展示信息多的特點,通過關鍵信息大屏共享的方式可方便團隊討論和決策,故大屏也常用來做數據分析監測使用。大屏數據可視化目前主要有信息展示、數據分析及監控預警三大類。

          數據分析類:

          6.jpg

          △ 圖片來源:必應,圖片作者:帆軟軟件有限公司

           

          大屏數據可視化設計原則


          大屏數據可視化設計原則:設計服務需求、先總覽后細節。

          1. 設計服務需求

          大屏設計要避免為了展示而展示,排版布局、圖表選用等應服務于業務,所以大屏設計是在充分了解業務需求的基礎上進行的。那什么是業務需求呢?業務需求就是要解決的問題或達成的目標。設計師通過設計的手段幫助相關人員達成這個目標,是大屏數據可視化的價值所在。

          2. 先總覽后細節

          大屏因為大,承載數據多,為了避免觀者迷失,大屏信息呈現要有焦點、有主次??梢酝ㄟ^對比,先把核心數據拋給用戶,待用戶理解大屏主要內容與展示邏輯后,再逐級瀏覽二三級內容。部分細節數據可暫時隱藏,用戶需要時可通過鼠標點擊等交互方式喚起。

           

          大屏可視化設計流程


          規范的流程是好結果的保證。找到一個可參考的流程,然后步步為營,就能避免很多不必要的返工,保證設計質量和項目進度。

          7.jpg

          1. 根據業務場景抽取關鍵指標

          關鍵指標是一些概括性詞語,是對一組或者一系列數據的統稱。一般情況下,一個指標在大屏上獨占一塊區域,所以通過關鍵指標定義,我們就知道大屏上大概會顯示哪些內容以及大屏會被分為幾塊。以共享單車電子圍欄監控系統為例,這里的關鍵指標有:企業停車時長、企業違停量、熱點違停區域、車輛入欄率等。

          確定關鍵指標后,根據業務需求擬定各個指標展示的優先級(主、次、輔)。

          8.jpg

          2. 確立指標分析維度

          「橫看成嶺側成峰」。同一個指標的數據,從不同維度分析就有不同結果。很多小伙伴做完可視化設計,發現可視化圖形并沒有準確表達自己的意圖,也沒能向觀者傳達出應有的信息,可視化圖形讓人困惑或看不懂。出現這種情況很大程度就是因為分析的維度沒有找準或定義的比較混亂。

          9.jpg

          上圖向大家展示了數據分析常用的4個維度,我們在選定指標后,就需要跟項目組其他小伙伴討論:我們的各個指標主要想給大家展示什么,更進一步的講,是我們想通過可視化表達什么樣的規律和信息。而上圖,可以引導我們從「聯系、分布、比較、構成」四個維度更有邏輯的思考這個問題。

          • 聯系:數據之間的相關性。
          • 分布:指標里的數據主要集中在什么范圍、表現出怎樣的規律。
          • 比較:數據之間存在何種差異、差異主要體現在哪些方面。
          • 構成:指標里的數據都由哪幾部分組成、每部分占比如何。

          當然,上圖例舉的示例圖表都比較傳統,在大屏數據可視化中常還有另一類地理信息(常以2/3D地圖、地球呈現)出現。上圖雖未包含這類圖形,但它提供給我們的確定數據分析維度的思路和方法是相通的,可借鑒。

          3. 選定可視化圖表類型

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

          選定圖表注意事項:易理解、可實現。

          易理解

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

          10.jpg

          可實現

          我們需要了解現有數據的信息、規模、特征、聯系等,然后評估數據是否能夠支撐相應的可視化表現。

          我們設計的圖形圖表,要開發能夠實現。實際工作中,一些可視化效果開發用代碼寫很容易實現,效果也不錯,但這些效果設計師用 Ps / Ai / Ae 這些工具模擬時會發現比較困難;同樣的,某些效果設計師用設計工具可以輕易實現,但開發要用代碼落地卻非常困難,所以大屏設計中跟開發常溝通非常重要,我們需要明確哪些地方設計師可以盡情發揮,哪些地方需要謹慎設計。一個項目總有周期與預算限制,不會無限期的修改迭代,所以設計師在這里需要抓住重點,有取舍,不鉆牛角尖、不死磕不放。

          11.jpg

          4. 了解物理大屏,確定設計稿尺寸

          多數情況下設計稿分辨率即被投大屏的信號源電腦屏幕的分辨率。有多個信號源時,就會有多個設計稿,此時每個設計稿的尺寸即對應信號源電腦屏幕的分辨率。

          12.jpg

          一般情況下設計稿的分辨率就是電腦的分辨率,當有多個信號源時,有時會通過顯卡自定義電腦屏幕分辨率,從而使電腦顯示分辨率不等于其物理分辨率,此時,對應設計稿的分辨率也就變成了設置后的分辨率。此外,當被投電腦分辨率長寬比與大屏物理長寬比不一致時(單信號源),也會對被投電腦屏幕分辨率做自定義調整,這種情況設計稿分辨率也會發生變化。所以設計開始前了解物理大屏長寬比很重要。

          5. 頁面布局、劃分

          尺寸確立后,接下來要對設計稿進行布局和頁面的劃分。這里的劃分,主要根據我們之前定好的業務指標進行,核心業務指標安排在中間位置、占較大面積;其余的指標按優先級依次在核心指標周圍展開。一般把有關聯的指標讓其相鄰或靠近,把圖表類型相近的指標放一起,這樣能減少觀者認知上的負擔并提高信息傳遞的效率。

          13.jpg

          6. 定義設計風格

          很多小伙伴也許沒接觸過大屏設計工作,但大多數人都應該有 APP 或者 Web 風格定義的經驗。我們在定義一款 APP 或者 Web 頁面設計風格時常用的方法是什么呢?情緒板。

          大屏雖酷炫,但實際上也是運行在瀏覽器里的 Web 頁面,所以大屏設計風格定義方法也同樣可以用情緒板來做,這種方法也是目前比較科學高效的風格定義手段。

          14.jpg

          上圖提供了情緒板應用的腦圖,具體操作細節不做介紹,不太了解的小伙伴可以自己找找資料。

          編者按:一篇好文幫你掃盲,運用情緒板搞定設計→《該怎么運用情緒板,才能讓設計作品更有說服力?》

          情緒板的一套流程下來,我們定義的風格基本是科學準確的,可以指導我們執行設計。如果是給甲方做大屏,這個流程也可以讓我們提出的方案更有說服力。

          7. 可視化設計

          根據定義好的設計風格與選定的圖表類型進行合理的可視化設計。目前來說大屏可視化主要有指標類信息點和地理類信息點兩大可視化數據。指標類信息點可視化效果相對簡單易實現,而地理類信息點一般可視化效果酷炫,但是開發相對困難,需要設計師跟開發多溝通。地理類信息一般具有很強的空間感、豐富的粒子、流光等動效、高精度的模型和材質以及可交互實時演算等特點,所以對于被投電腦、大屏拼接器等硬件設備的性能會有要求,硬件配置不夠的情況下可能出現卡頓甚至崩潰的情況,所以這點也是需要提前溝通評估的。

          15.gif

          8. 樣圖溝通確認

          這里的溝通分三個層面:設計師對內溝通、設計師對外溝通、設計師與大屏的「溝通」。

          16.jpg

          樣圖溝通環節,最初的樣圖不需要十分精致,我們可以把它理解為一個「低保真」原型,然后通過不斷溝通修改,讓它逐步完善精致起來,也就是小步快跑,避免那種一下子走到終點,然后又大修大改的情況。

          因為我們在前幾步已經分別確定了頁面布局、圖表類型、頁面風格特點,所以這一步我們需要用盡可能簡單的方法 ,把之前幾步的成果在頁面上快速體現出來,然后根據樣圖效果嘗試確定五方面內容:

          • 之前確立的布局在放入設計內容后是否依然合適;
          • 確立的圖表類型帶入數據后是否仍然客觀準確;
          • 根據關鍵元素、色彩、結構、質感打造出的頁面風格是否基本傳達出了預期的氛圍和感受;
          • 已有的樣式、數據內容、動效等在開發實現方面是否存在問題;
          • 大屏是否存在色差、文字內容是否清晰可見、頁面是否存在變形拉伸等現象。

          跟大屏「溝通」是比較重要也是個特殊的環節,這也是我覺得大屏設計跟其它設計不一樣的地方,大屏有它自己獨特的分辨率、屏幕組成、色彩顯示以及運行、展示環境,這里的很多問題只有設計稿投到大屏上才能夠被發現,所以這一步在樣圖溝通確認環節非常重要,有時候需要開發出 demo,反復測試多次。

          9. 頁面定稿、開發

          事實上頁面開發階段并不是到了這一步才進行,這里說的頁面開發僅指前端樣式的實現,實際上后臺數據準備工作在定義好分析指標后就已經開始進行了,而我們當前的工作是把數據接入到前端,然后用設計的樣式呈現出來。

          17.jpg

          切圖與標注

          由于大屏實際就是一個 web 頁面,所以開發階段的切圖與標注是少不了的。

          切圖:哪些元素需要切圖,怎么切?

          一般開發用代碼寫不出的樣式或動效,都需要設計師切圖作支持:比如數據容器的邊框、小的動效、頁面整體大背景、部分圖標等。切圖按正常網頁設計標準切就可以了。

          標注:Web頁面用什么插件做標注這個大家都很熟悉,我就不多說了。需要注意的是,如果大屏頁面需要在不同比例的終端展示,那么此時的標注與開發可以使用 rem 作為基本單位來實現,這樣實現的大屏頁面在后期會有更好的擴展性與適應性。

          10. 整體細節調優與測試

          這部分是指頁面開發完成后,將真實頁面投放到大屏進行的測試與優化。這里主要有兩部分工作。

          視覺方面的測試(有點像 APP 的 UI走查):關鍵視覺元素、字體字號、頁面動效、圖形圖表等是否按預期顯示、有無變形、錯位等情況。

          性能與數據方面的測試:圖形圖表動畫是否流暢、數據加載、刷新有無異常;頁面長時間展示是否存在崩潰、卡死等情況;后臺控制系統能否正常切換前端頁面顯示。

           

          大屏設計的注意事項


          1. 字體使用

          字體優先使用系統默認字體,需要嵌入字體時考慮字體的可識別性、與當前設計風格是否融合、是否可免費商用。

          18.jpg

          如果頁面是云端部署,需要嵌入字體包時,我們可以使用 FontCreator 這類的軟件把那些用不到的字符從字體包中刪掉,然后重新打包上傳,減小字體包大小,可以優化頁面加載體驗,避免在替換默認字體的過程中出現頁面文字跳動等現象。(一般來講一套字體文件包含了阿拉伯文、符號、拉丁文、日文、西里爾文、希臘文、拼音、注音符號等多種字符,對于大屏這個明確的場景,我們可以刪掉其它使用不到的字符,僅保留中文、拼音和數字)

          19.jpg

          2. 顏色搭配

          色彩明度與飽和度差異顯著、對比鮮明, 盡量避免使用鄰近色配色。

          20.jpg

          使用深色暗色背景:深色暗色背景可減少拼縫帶來的不適感。由于背景面積大,使用暗色背景還能夠減少屏幕色差對整體表現的影響;同時暗色背景更能聚焦視覺,也方便突出內容,做出一些流光、粒子等酷炫的效果。

          漸變色慎重使用:大屏普遍色域有偏差,顯示偏色,因而使用漸變色需要根據大屏反饋確定是否調整,純色最佳。

          3. 頁面布局

          主次分明、條理清晰、注意留白,合理利用大屏上各個小的顯示單元,并盡量避免關鍵數據被拼縫分割。

          21.jpg

           

          Q&A


          1. 設計稿投到大屏上顯示效果不佳怎么辦?

          大屏的分辨率、比例、使用環境、投射方式等均會對設計造成影響。理想情況下,我們應該在設計開始前,就能打開大屏系統做一些簡單測試。我們可以從網上收集不同設計師不同風格的大屏設計作品,然后投上去查看實際效果。因為大多數時候大屏都會存在色彩偏差,這時通過測試我們就能發現漸變色、鄰近色等不同類型的色彩搭配是否可以在目標大屏上良好呈現,如果不可以,那我們設計進行時就不要使用顯示效果不佳的色彩搭配。另一方面,樣圖溝通環節及時測試也很重要。

          2. 大屏設計定稿后,切圖切幾倍圖?

          由于是將我們電腦屏幕投射到了大屏,大屏上的內容是運行在我們電腦瀏覽器上的頁面。所以切圖根據我們電腦的分辨率,正常切1倍圖就可以了。

          3. 1920*1080的設計稿,投到9000*4320的屏幕上,文字圖片會虛么?

          看情況,視大屏系統硬件規格與觀看距離來定。這塊有四個概念需要跟大家交流一下。

          大屏邏輯分辨率(設計稿尺寸)、顯卡輸出分辨率、視頻矩陣切換器( DVI )支持分辨率、大屏實際物理分辨率。

          一般后兩個是沒問題的,大屏跟矩陣切換器是由大屏廠商提供,一般剛好配套大屏。容易出問題的是顯卡輸出分辨率,我們電腦屏幕分辨率并不是最終顯卡傳遞到 DVI 接口的分辨率,傳遞到 DVI 接口的分辨率是電腦顯卡所能輸出的最大分辨率(部分電腦可設置或自定義輸出分辨率)。輸出分辨率等于 DVI 支持分辨率時顯示效果最佳。輸出分辨率低于 DVI 支持分辨率,DVI 會將信號放大后傳遞到大屏,放大的過程中就有圖像信息丟失,雖然此過程中有各種算法支持去保證圖像盡可能清晰,但算法再好,跟真實圖形還是有差距的。此外,多信號源投射效果優于單個信號源投射。對于現場直播數據大屏,一般至少有兩個信號源,一個投屏,另一個也投屏但是處于備用狀態。

          離大屏的距離也影響觀感,一般離得近,顆粒感明顯,距離稍遠,會顯的較為清晰。

          4. 設計稿完成開發后,發現在大屏上頁面有被拉伸或者壓縮的情況,怎么補救?

          一般來講,開發只需要對設計圖做還原即可。但特殊情況下,比如顯示器擴展不正確導致頁面被拉伸或壓縮,這時就需做處理:我們可以先得到被拉伸/壓縮的比例,然后對整體視圖做壓縮/拉伸處理,再由其拉伸/壓縮,這樣被拉伸/壓縮的瑕疵就可以得到一定程度上的矯正。另外,了解被投電腦硬件特點,有的電腦可以通過自定義分辨率解決這部分問題。

          5. 除自行開發可視化大屏外,還可以通過哪些第三方服務來快速實現?

          阿里云 DataV、騰訊云圖、百度 Sugar 等。

          6. 數據可視化的圖表樣式可以在哪些地方找到參考?

          圖表部分的二個庫是我們設計師可以打開瀏覽查看的,這里面所有的圖表樣式都是基于代碼實現的,可以作為我們設計圖表的參考,也可以讓開發拿代碼去用,或者在這些圖表的基礎上修改。

          工具類的需要有一定的代碼基礎,里面同樣有豐富的圖表,所以跟開發的溝通也很重要,因為他們可能會了解多一些更新的前沿的圖表形式,是我們設計師不知道的,所以彼此多溝通交流實在太重要了。

          22.jpg

           

          總結


          數據可視化是一門龐大系統的科學,本文所有討論僅針對大屏數據可視化這一特定領域,管中窺豹,如有遺漏或不足之處歡迎大家討論交流。

          作者:UXBoy

          轉載請注明:優設網

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

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          更多精彩文章:

          大數據可視化界面設計之一:可視化大屏設計快速入門指南

          大數據可視化界面設計之九:超全面的數據可視化設計指南:設備篇

           

          大數據可視化界面設計之十:數據可視化必修課:表格篇

           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           
           

           

           

          大數據可視化界面設計之三:可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          博博

          可視化大屏 UI


          上文說到可視化設計是一個綜合類交叉學科,同樣在大屏 UI 設計中也是一個相對復雜的流程,我們需要對大屏的布局、風格、主視覺、信息圖表、字體、規范、動效等方面綜合考慮,推導設計方案。

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

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

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

          下面針對可視化設計中布局、風格、主視覺、信息圖表、字體、規范、動效等 7 個方向細節點的拆解。

          1. 布局

          通過硬件設備信息可以得到可視化的設計尺寸,基于尺寸新建設計畫布后,第一件事就需考慮頁面的整體布局??梢暬笃猎O計從信息布局到數據表達,都需要設計師對業務深入了解后才能用數據助力業務決策。

          常見的大屏布局:居中結構、左右結構兩種常見的布局形式以常規的 16:9 模板為例,下面列舉的一些常見的布局形式,供大家參考。

          居中結構

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          異形超寬拼接屏幕。

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          左右結構

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          布局的原則一定要主次分明,根據業務需求抽取關鍵性的指標,提取主要信息??梢栽诩埳洗蟾女嬕幌?,然后在軟件里具體細化布局。避免次要信息的面積過大,喧賓奪主,影響整體的視覺效果。

          2. 風格

          提起可視化大屏,大家都會聯想到:科技感、FUI、HUD 這些關鍵詞,可以說可視化大屏跟科技、數據這兩詞是強關聯的,風格上也基本是這一類方向。

          定義設計風格:一般會基于業務需求場景去定義幾個設計關鍵詞,根據關鍵詞去找一些參考圖,推導出貼合業務的設計風格。

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          我們可以通過調整顏色、裝飾細節、主視覺、字體等一些細節點控制區分不同的設計風。下面拿圖表舉例,我們在做設計的時候,只需調整卡片和標題的裝飾,就能夠展現出不同的設計風格。

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          3. 主視覺

          主視覺部分大致分為:地球、地圖、智慧城市、行業類業務展示等。目前比較容易出效果的都會采用三維模型的處理方式。

          地球:粒子地球、地圖貼圖、地球模型。

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          地圖:第三方在線地圖(百度、高德、騰訊、谷歌)基于地圖開放平臺進行個性化配置?;蛘咄ㄟ^地理位置數據建模:如全國和各個省份的輪廓模型。

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          智慧城市:GIS 參數化生成簡模和重點樓宇定制化建模。

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          行業類:多數為定制化建模。如工業類、醫療類、能源類、園區、學校、港口、工廠、倉儲庫房、零售、工程、安防、國防軍工等。

          以下圖片源于 DATAV

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          主視覺是可視化設計中的一大難點,不光是設計落地的時候也會有需要注意的點,這里建議大家在做之前一定要充分跟開發溝通,確認好技術選型,方便后期輸出跟開發更加高效的對接。

          4. 信息圖表

          圖表的設計原則是易理解、可實現,能夠準確表達數據意圖,給用戶傳達明確信息。


          以下圖片源于網絡,如侵刪

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          上圖通過使用場景可分為比較、聯系、構成、分布四個維度解釋圖表的不同屬性類別。在做可視化大屏設計的時候可以參照上圖,選擇對應的數據圖表。

          比較

          兩個及以上變量數據,一是基于分類不同的對比,二是基于時間維度的對比。常見的圖表:條形圖、柱狀圖、雷達圖、玫瑰圖、?;鶊D等

          聯系

          兩個及以上數據之間的相關性,隨時間變化比較關聯。常見的圖表:散點圖、氣泡圖、多級餅圖、熱力圖、力導向圖等。

          構成

          指標里的數據都由哪幾部分組成、每部分占比如何。常見的圖表:餅圖、環形圖、堆積面積圖、堆積柱狀圖、瀑布圖等。

          分布

          指標里的數據主要集中在什么范圍、表現出怎樣的規律,想表達兩個數據點之間數量的演變過程。常見的圖表:階梯折線圖、面積圖、直方圖等。

          基于圖表的類型可分為:餅圖、線形圖、柱狀圖、混合圖、面積圖、散點圖、極坐標圖、關系圖、樹圖、?;鶊D、漏斗圖、熱力圖、還有其他圖表類型等。

          餅圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          適合展示分類的占比情況,不適合展示分類過多(超過 9 條數據)或者差別不明顯的場景。

          線形圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          折線圖用于顯示數據在一個連續的時間間隔或者時間跨度上的變化,它的特點是反映事物隨時間或有序類別而變化的趨勢。

          當水平軸的數據類型為無序的分類或者垂直軸的數據類型為連續時間時,不適合使用折線圖。同樣,當折線的條數過多時不建議將多條線繪制在一張圖上。

          柱狀圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          柱狀圖提供了分類數據的可視化展示,基于不同的數據類型有以上幾種不同的形式。分類數據是將數據分組成離散的組,例如月份、年齡組、鞋碼和動物。這些類別通常是定性的。圖表上的條形圖可以按任何順序排列。

          混合圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          折線圖和堆疊柱狀圖的組合圖表。同時顯示兩個坐標軸,用于展示兩種不同類型的數據。

          適用于帶有細分分類的累計數據大小以及與之相關的趨勢數據,例如在過去十年全國三大產業的具體產值,以及 GDP 增長率。

          面積圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          面積圖強調數量隨時間而變化的程度,也可用于引起人們對總值趨勢的注意。適合于比較多個變量隨時間間隔變化趨勢。

          散點圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          散點圖是一種使用直角坐標來顯示一組數據的兩個變量值的圖表。數據顯示為一個點的集合,每個點都有一個變量的值決定水平軸上的位置,另一個變量的值決定垂直軸上的位置。

          通常用于顯示和比較數值,不光可以顯示趨勢,還能顯示數據集群的形狀,以及在數據云團中各數據點的關系。

          極坐標圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          基于直角坐標系的徑向變形(相當于把直角坐標卷起來)。適用于顯示三個或更多的維度的變量對比或者部分與整體的趨勢。

          關系圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          可以展示數據的占比情況,還能厘清多級數據之間的關系。 通常用于可視化大量元素之間的復雜關系。

          樹圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          樹圖是一種流行的利用包含關系表達層次化數據的可視化方法,是研究多元目標問題的一般工具。 適合展示數據之間的層級關系,適合 6 條以上數據。

          桑基圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          一種特定類型的流程圖,用于描述一組值到另一組值的流向,圖中延伸的分支的寬度對應數據流量的大小。用以展示數據的層級關系。常用于可視化能源或成本轉移,也幫助我們確定各部分流量在總體中的大概占比情況。

          漏斗圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          一種直觀表現業務流程中轉化情況的分析工具,總是開始于一個 100%的數量,結束于一個較小的數量。通過漏斗各環節業務數據的比較能夠直觀地發現和說明問題所在的環節,進而做出決策。 適用于業務流程比較規范、周期長、環節多的流程分析,比如流程流量分析、轉化率分析。

          熱力圖

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          將數值大小通過色塊有序且緊湊地在坐標系中呈現。 適合呈現多組數據連續的數值分布,適合做數據的預測統計,可以在圖片上直接展示熱度。例如展示城市在不同時間段打車熱度情況。

          其他圖表

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          詞云圖適用于對比大量文本或繪制特定形狀的詞云。水球圖適用于多個百分百數據呈現。子彈圖用于表達多項同類數據的對比,可以表達一項數據與不同目標的校對結果。 維諾圖適用于層級數據比較大小,同時能看到各層級之間的情況。金字塔圖適合展示分類的占比情況,不適合展示分類過多或者差別不明顯的場景。

          5. 字體

          文字是可視化展示中最重要的構成要素之一,可視化大屏設計中字體的運用其實原理跟網頁 app 的邏輯基本一致。在字體選擇上會基于業務需求選擇對應的字體,與設計風格相結合。這里要注意的是字體有無襯線、字重、字距等。

          大屏設計中,中文字體一般會采用瀏覽器默認字體(微軟雅黑、思源黑體、蘋方等)頁面中標題會采用特殊字體處理,常用的字體有:優設標題黑、時尚中黑簡體、方正正中黑體等。英文數字字體推薦:Din、Ds-Digtal、Bebas、Acens、DS-DIGIB、Roboto 等。


          6. 規范

          建立規范的主要目的是:保證設計的一致性、提高開發效率和還原度、方便迭代 ,輔助設計和開發更好地完成設計的協作。

          可視化設計中規范一般會分為:色彩、文字、圖表、標題控件等,跟網頁端規范同理,這里就不一一贅述了。

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          7. 動效

          數據可視化大屏設計少不了動效,動效是可視化重要的組成部分,動效能增加觀感體驗,凸顯關鍵產品內容、強調功能信息關聯,幫助用戶理解產品、情感化互動。但過分的動效極其容易喧賓奪主,影響用戶閱讀,反而弱化了數據的展示。

          動效的設計原則

          可視化大屏不會做?這篇 UI 設計指南總結了7個重要知識點!

          動效應優先滿足核心內容、故事線。常見的大屏動效 – 展示類,用于突出產品核心功能和特點。界面信息按照一定的規律呈現,引導用戶的視覺流向。

          好的大屏設計應該是數據展示模塊最好動效不宜過多,要有一定的主次關系變化,例如一個動畫表現的視覺強,另一個就表現稍弱化,有強有弱、有主有次節奏才會舒服,同時動效要結合數據變化,考慮極端情況的展示效果,最終輸出一套完整的動效方案。


          結語


          以上通過布局、風格、主視覺、信息圖表、字體、規范、動效等 7 個方向總結的基本知識和事項,能幫助我們快速進入大屏設計及避免一些坑。由于篇幅原因字體、規范、動效沒有詳細拆解說明,后面會陸續更新相關文章,感謝大家支持。可視化體驗遠遠不止這些。歡迎大家提出更多意見和建議,我們一起前行。

          作者:Mr.小六

          轉載請注明:優設網

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

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          更多精彩文章:

          大數據可視化界面設計之一:可視化大屏設計快速入門指南

          大數據可視化界面設計之九:超全面的數據可視化設計指南:設備篇

          大數據可視化界面設計之十:數據可視化必修課:表格篇













          大數據可視化界面設計之四:可視化大屏設計快速入門指南,看這篇就夠了!

          博博


          前言


          隨著大數據產業的蓬勃發展,很多企業都開始應用數據可視化。智慧城市、智慧交通、智慧醫療等等越來越多的行業都有了可視化的需求,可視化行業也迎來了迅速發展的成長期。

          可視化大屏設計快速入門指南,看這篇就夠了!


          數據可視化釋義


          數據可視化就是把一些相對復雜、抽象的、我們看不懂的數據通過“可視化”的方式,運用圖形化的手段清晰有效地將數據信息進行解讀和傳達,幫助我們發現其中的規律和特征,挖掘數據背后的價值。


          可視化大屏


          可視化大屏
          是以大屏為主要展示載體的數據可視化設計。它的應用場景非廣泛如 ToC、ToB、ToG 等都會存在。一般應用在會議展廳、園區管理、城市交通調度中心、公安指揮中心、企業生產監控等重要場所。

          可視化用戶群體相對比較明確,主要是單位領導及一些一線人員。通過交互式實時數據監測,洞悉運營增長,助力智能高效決策。

          可視化大屏設計快速入門指南,看這篇就夠了!

          伴隨行業的發展,行業內也對可視化進行了一些行業細分。常見的一些類別:行業可視化(如交通、醫療、金融、軍警部隊、農業、工廠、化工等)、智能終端系統類(定制化終端產品)、演示 demo(數據演示、展覽展示、數據看板 )、可視化分析系統(通過對數據的分析監控輔助決策,如交通預警平臺、天氣監控平臺等)。


          市場現狀


          平臺化

          由于近幾年可視化的需求越來越大,一般的公司都會有一些可視化的需求,各大廠商也逐漸整合可視化資源,實現平臺化、低代碼化。滿足了大多數公司的可視化需求。國內比較知名的可視化廠商:光啟元(Ray design)、Data V、優諾科技(森工廠)、袋鼠云(Easy V)、數字冰雹、圖撲、等等。他們將一些可視化效果組件化集成在平臺,拖拖拽拽就能實現一些不錯的效果,滿足了一些公司的展示需求。

          可視化大屏設計快速入門指南,看這篇就夠了!

          實現方式

          目前可視化框架是大多數都是基于 Web 端的(基于 web 開發或者 web 封裝)而非 PC 端。常見的可視化實現方式是二維加三維相結合,比如大屏兩側的可視化圖表可以用 Echarts 這種第三方的輕量化圖表控件或者 Vue 去實現。

          主視覺部分會基于 Unity3D、虛幻引擎(UE4)、Ventuz、threejs 等工具去實現。滿足三維炫酷的效果需求。使整個可視化大屏效果有了質的提升。這些三維工具的優勢是三維粒子效果能很好的支持,且效果非常炫酷。多平臺支持,可通過 webgl 封裝在瀏覽器里打開使用。缺點就是維護成本較高,需要相關的專業人員去開發維護,有一定的使用門檻。一般公司如果不是專門做可視化相關業務不會配備相關專業人員。

          可視化大屏設計快速入門指南,看這篇就夠了!

          說下幾種工具的優缺點:

          Ventuz 國內用的相對較少,相關專業人員也較少。虛幻引擎效果上是比較好的,但是對 WebGL 參數支持的較少。Threejs 雖然支持三維但是沒有 Unity 那么強大的編輯器,一些復雜的效果實現不了。相對于前者 Unity 來說成熟一些,也是目前市場上用的比較多的,不過 three 對于前端開發同學更友好一些,容易上手,學習成本相對低一些。


          可視化設計師應了解的知識


          可視化設計是相對新興的行業,就目前市場來看也是當今比較火的行業。作為一名設計師,不僅僅是只做完效果圖就能行的,他是一個結合硬件設備、UI 設計、三維建模、三維渲染、動態設計、數據可視化、圖形技術、GIS 數據、渲染引擎、交互技術等等綜合類的交叉學科。

          可視化大屏設計快速入門指南,看這篇就夠了!

          1. 硬件設備

          硬件設備信息是做大屏一切的開始,我們首先要了解它的尺寸、比例、屏幕種類(拼接屏、LED 屏)投影方式等等 一系列的信息,方便后續的設計工作。

          可視化大屏設計快速入門指南,看這篇就夠了!

          上圖為一些常見的屏幕拼接方式,確認好屏幕的拼接方式就可以計算出整個大屏的物理分辨率。舉個例子:上圖中最后一個的拼接方式為橫向3塊屏,豎向2塊屏幕。他們每塊的屏幕分辨率為寬1920px 高1080px,那么這塊2×3的拼接屏幕的尺寸就應該是:寬度 1920乘以3(橫向3塊屏)高度1080乘以2(豎向2塊屏)得出整個屏幕的物理分辨率為:5760×2160。

          可視化大屏設計快速入門指南,看這篇就夠了!

          物理分辨率 VS 輸出分辨率

          可視化大屏設計快速入門指南,看這篇就夠了!

          大屏的投射方式大致分為三種:1、電腦屏幕 1 比 1 等比例投屏。2、通過主機直接輸出給拼接屏(這種大多都是一些自定義比例屏幕和分辨率超大的情況會應用到)。3、投影儀投射。

          一般大屏的物理屏幕分辨率大小都有不同,有的是極大的,幾萬像素,如果我們按照物理分辨率來去做設計的話會很卡,所以這里設計尺寸建議按照輸出分辨率設計。輸出分辨率會受到硬件的限制(超大情況下需等比縮放),我們一般會采用輸出分辨率作為最終的設計尺寸。針對硬件設備設計時要關注以下幾點:屏幕拼接方式、單屏幕像素及拼接后像素、輸出像素等這些決定了設計尺寸、內容排布、拼接縫的規避等問題。

          2. GIS 數據

          通常應用于參數化建模,之前寫的 0-1 帶你制作智慧城市地圖(二)就屬于參數化建模的一種,主要是通過一些地理位置高程數據進行模型的生成。屬于智慧城市可視化設計的基礎設施。

          常見的一些格式:Openstreetmap(多用于生成模型)、Shapefile(多用于生成模型)、Geojson(主要用于基于 Web 的映射)、TIFF(多用于貼圖處理)。

          一些常用的工具:Qgis、Arcgis、Google mapper

          3. 三維建模

          在可視化設計中,一般我們會結合生成參數化模型加定制化手工模型的方式處理整體效果。這么處理的目的:一是設計上能突出主體,增加畫面的層次感。二是在性能上能很好地優化,提高整體性能。

          下圖為設計側到開發側對接流程:

          可視化大屏設計快速入門指南,看這篇就夠了!

          4. 動效設計

          常見的一些動效對接格式:GIF、MP4、APNG、Lottie、序列幀。


          可視化大屏設計快速入門指南,看這篇就夠了!

          5. 圖形技術

          了解圖形成像原理,是由一個個的粒子點生成的畫面。

          可視化大屏設計快速入門指南,看這篇就夠了!

          下圖是由一個 50×100 的粒子組成的平面,每個粒子都會對應他的 xy 軸的坐標位置,我們通過控制的粒子透明度、大小、顏色、位置、旋轉等參數呈現不同的視覺效果。

          可視化大屏設計快速入門指南,看這篇就夠了!

          世界地圖的是通過一個一個粒子成像形成的畫面,其中黑色=0、白色=1。比如粒子大小是 1,它對應的位置是黑色,黑色是 0,1×0 就=0 顯示為黑色。

          可視化大屏設計快速入門指南,看這篇就夠了!

          我們常做的粒子世界地圖就是通過控制粒子黑白 x 粒子大小疊加出來的。

          可視化大屏設計快速入門指南,看這篇就夠了!

          比如我們做粒子地球的時候是通過一張貼圖來去控制黑白度,海洋是黑色所以就不顯示粒子,陸地為白色顯示為白色粒子,最終呈現了一個粒子地球的效果。

          可視化大屏設計快速入門指南,看這篇就夠了!

          6. 渲染引擎的技術架構

          前面實現方式里講到市面上可視化落地基本都是基于于 Unity3D、虛幻引擎(UE4)、Ventuz、threejs 等工具實現的。

          它們的底層是由 BS(Browser-Server)架構和 CS(Client-Server)架構兩大架構組成的。

          BS 架構與 CS 架構特點

          • BS:(Browser-Server,)瀏覽器/服務器模式,web 應用可以實現跨平臺,客戶端零維護,但是個性化能力低,響應速度較慢。
          • WebGL 就屬于 BS 架構的一種。優點就是使用便捷、數據實時更新、跨平臺。缺點是渲染效果較差,大場景支持差。
          • CS:(Client Server,客戶端/服務器模式),桌面級應用響應速度快,安全性強,個性化能力強,響應數據較快。
          • Unreal Engine、Unity3D、Ventuz 屬于 CS 框架。優勢就是整體渲染視覺效果棒,大場景支持好,缺點是必須安裝客戶端、電腦性能要求高、不同平臺需要不同文件。


          最后


          本期給主要是給大家普及可視化設計的一些流程以及相關的專業知識,歡迎后臺添加小六微信溝通交流。

          作者:Mr.小六

          轉載請注明:優設網

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

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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








          更多精彩文章:

          大數據可視化界面設計之一:可視化大屏設計快速入門指南

          大數據可視化界面設計之九:超全面的數據可視化設計指南:設備篇

          大數據可視化界面設計之十:數據可視化必修課:表格篇




          數據可視化大屏設計工具整理(下)

          純純

          上次整理了一些大廠的可視化服務平臺,平臺的優勢顯而易見,組件化的操作,快速搭建的方式節省了很多的開發和時間成本。有興趣的戳這里:數據可視化大屏設計工具整理(上)。


          對于上期的一些更正:8月28日百度Suger更新了收費標準,也就是說現在百度Suger也收費了!目前是分版本收費,但是對新老用戶還是提供了30天的全功能試用的。


          本次整理的是下半部分的內容:

          一、數據大屏與數據可視化

          二、大廠的可視化服務

          三、技術開源庫

          四、設計輔助工具



          - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -



          三、技術開源庫


          了解一些技術開源庫,一方面可以參照其圖表案例,了解各類不同圖表的展示方式;另一方面是為了保證自己設計的可實現度,不然再炫酷的設計效果最終如果因為技術開發能力無法實現也是徒勞的。



          Echarts -百度開源可視化庫

          https://echarts.baidu.com/

          這是一個使用JavaScript 實現的開源可視化庫,可以流暢的運行在 PC 和移動設備上,兼容當前絕大部分瀏覽器。4.0版本還提供了對微信小程序的適配。DataV中的一些組件也是依賴Echarts生成的。


          Echarts提供的圖表很多樣化,幾乎包含常用的、不常用的各類圖表樣式。且提供有可交互組件,可以對數據進行多維度數據篩取、視圖縮放、展示細節等交互操作。


          △來源Echarts實例



          Mapv - 百度地理信息可視化開源庫

          https://mapv.baidu.com/

          用以展示大量地理信息點、線、面的數據。創建需先上傳地理信息數據,再設置地圖樣式后,即可下載保存。目前僅開放Beta版本。


          △來源Mapv官網



          螞蟻AntV

          https://antv.alipay.com/zh-cn/index.html

          螞蟻金服的Ant Design作為設計師應該都是較為熟悉的。AntV是螞蟻Ant系列下的一個數據可視化解決方案。分為G2、G6、F2、L7不同產品,分別對應不同的特性需求。

          △來源AntV官網



          Amcharts - 矢量地圖定制下載

          http://pixelmap.amcharts.com/#

          這個網站可以用來繪制地圖。有些特殊情況下,開發可能需要自己繪制地圖。如果開發自己使用canvas繪制,難度較大。這個網址提供了地圖svg、HTML以及image的下載。

          △來源Amchats官網


          D3.js - 數據驅動的文檔

          https://d3js.org/

          D3js 是一個基于數據來操作文檔的JavaScript 庫,適宜用來建造各類可視化圖表。支持大型數據集和交互與動畫的動態行為。

          △來源D3js官網



          billboard.js - 簡易界面的可交互圖表庫

          https://naver.github.io/billboard.js/

          這是一個基于D3 V4+的JavaScript的圖表庫。可以對數據進行視圖縮放、展示細節等交互操作。

          △來源billboard官網



          FusionCharts

          https://www.fusioncharts.com/

          FusionCharts提供了100多個交互式圖表和2,000多個數據驅動的地圖,對不同平臺都可兼容。同時提供了前端和后端各類框架及代碼語言的插件來方便開發快速入門。不過這款是收費的,根據不同的使用環境定價不同。

          △來源FusionCharts官網






          四、設計輔助工具

          Kitchen - 螞蟻金服官方插件

          http://kitchen.alipay.com/

          這是一個sketch的插件工具。主要功能如下圖。

          △來源Kitchen官網


          Iconfont 圖標庫我比較常用,可以直接在sketch中搜索拖拽,不用再去打開網頁查找了。其次數據填充也比較常用,自動填充時間地址城市等挺方便的。sketch也有自帶的功能,但畢竟自帶的填充都是英文,想要中文的需要自己編寫填充文檔,相對還是比較麻煩。其他是像智能排版、色板等功能,我用的不多,還是以sketch自帶功能為主。


          另外,與可視化設計相關的就是里面的圖表生成器了。不過Kitchen當前只有一些常規的圖表,不過勝在簡潔明了,很適合在此基礎上進行二次設計。該插件還是螞蟻Ant系列的官方插件,可以自動配置符合Ant Design 規范的組件,配合公司采用的Ant系列的框架,會方便不少。

          △來源Kitchen插件界面



          FusionCool - 阿里Fusion Design開源中后臺UI解決方案輔助工具

          https://fusion.design/tool

          這也是一個sketch的插件工具。分為圖標、圖表、組件、模塊和模板五大功能區。


          Fusion Design作為一個開源中后臺解決方案,和Ant Design有一定類似,但也有所差別。Ant Design 是一套組件庫, Fusion Design 更像是一個組件庫生成工廠。


          直接下載安裝FusionCool的話,打開sketch看到的將是一個默認組件庫,圖表部分的種類樣式比Kitchen多了不少。而更厲害的是,你可以在Fusion Design上基于官方庫編輯改造成屬于你自己的設計系統,發布主題后獲得新的主題包,此時你在FusionCool中就可以看到專屬于你的主題包了,在sketch中完成設計后,開發使用Iceworks安裝你的主題庫就可以直接編碼實現你的設計。

          △來源FusionCool插件界面



          Map Generator - 快速地圖生成填充

          https://github.com/eddiesigner/sketch-map-generator

          這是一款基于谷歌地圖的自動填充的Sketch插件,輸入地址后就可以自動生成不同風格樣式的地圖,個人比較喜歡第三款灰色的。

          △圖為Map Gnerator生成效果



          Amcharts - 矢量地圖定制下載

          http://pixelmap.amcharts.com/#

          這個網站上面提過,但其實設計師用來獲取矢量地圖也很好用,選擇地圖樣式和地區之后,右下方即可以下載SVG、HTML、Image格式的圖,十分方便。點擊“Generate Ppxel Map”還可以轉化為像素圓點形式的地圖。


          如果需要省份的地圖,網站上無法直接下載,但可以要先下載中國svg地圖,然后再打開svg選擇自己需要的省份模塊就可以了。


          另外,在使用地圖的時候,要注意正確用圖,規范用圖。要有國家版圖意識,符合測繪法。

          標準地圖可以參考國家自然資源局提供的標準地圖服務,服務網址:http://bzdt.ch.mnr.gov.cn/index.html



          Chart - 圖表插件

          https://github.com/pavelkuligin/chart

          這個插件是收費的,每年10美元,但是你可以去找那啥啥的(我知道你懂)。優勢在于可以在Sketch中創建包含隨機、表格或者JSON數據的圖表。圖表樣式也是非常的豐富了。

          △來源Chart官網



          -END--

          原文地址:站酷
          作者:楓凝紫夜

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

          截屏2021-05-13 上午11.41.03.png

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          數據可視化大屏設計工具整理(上)

          純純

          這是目錄:

          一、數據大屏與數據可視化

          二、大廠的可視化服務

          三、技術開源庫

          四、設計輔助工具





          一、數據大屏與數據可視化



          數據可視化是目前對數據展示最常用的方式。數據的可視化設計有助于將復雜的數據用最易理解的方式展示在用戶的面前。


          數據可視化在中后臺的設計中很常見,通常主要用于分析和決策,對實時性要求不高,從一部分功能上講,其實也有著報告數據的作用。設計以2D平面展示為主,幾乎不會有3D設計出現,視覺設計重點更注重簡單直接,一目了然。


          △來源 dribbble  作者wuze,侵刪



          數據大屏在上面的基礎上,對實時性要求較高,會更強調數據展示的效果,這也是會流行FUI未來主義科幻風格設計的原因,追求視覺上的酷炫效果。設計上2D、3D皆有,還可以伴隨著動效搭配一些可交互的設計,來展示數據之間聯動。 

          △來源 dribbble  作者William Chen,侵刪 



          關于制作數據大屏的一點小建議


          數據大屏的制作可能會包含一些動效交互及3D建模渲染,一般中小型公司通常技術能力有限。如果接到設計制作數據大屏的任務,不妨先和產品技術等一起就表現方式和技術實現等方面先做個探討,不要直接進行設計工作,貿然追求超燃的特效,避免最后因為無法實現導致無謂的返工。 



          二、大廠的可視化服務



          百度 Suger


          https://cloud.baidu.com/product/sugar.html
          Sugar是百度云推出的數據可視化服務平臺,目標是解決報表和大屏的數據可視化問題,解放數據可視化系統的開發人力。 


          △來源Suger官網  



          上圖是官網提供的案例,界面風格是常規的FUI風格。 

          Sugar提供了組件編輯平臺,進入平臺后設計師可以直接進行組件的拖拽編輯,打造自己所需要的大屏界面。在設計師完成后就可以直接交接給開發進行各類數據源的接入。這種形式無疑節約了很多的開發時間,設計師也不用再擔心前端開發的效果與自己的差之千里。對于時間緊迫或者自身技術能力不足的項目很適合。 

          在組件的提供上,Suger提供了很多的2D和3D組件,在一定程度上也可以自定義組件。還可以設置數據下鉆和圖表聯動,增強動效交互效果。 





          △來源Suger編輯平臺



          平臺的編輯界面總體來說還是很方便設計師適應的,與一般的設計軟件界面差不多。上方是一些工具,左側是圖層的排布,右側則是一些組件的屬性。設計師可以很快的適應并應用,沒有了學習成本也不會有太高的操作難度。但是Suger在3D方面尚有不足,個人感覺沒有阿里云DataV、騰訊RayData的3D效果突出。 

          最后一點,Suger目前處于推廣期,推廣期間是 免費使用的。 




          阿里云DataV


          https://data.aliyun.com/visual/datav?spm=a2c4g.11174283.2.1.46b66b79vzB03d
          DataV最著名的一個應用項目應該就是天貓雙11的數據大屏了。每一年都驚艷了無數聚焦于雙11活動的人們。2018年的雙11數據大屏設計更是被稱為數據經濟時代的全球清明上河圖。 

          △2018天貓雙11大屏 




          同樣的,DataV也提供了一個編輯平臺,連該平臺本身的界面設計也充滿了未來科技感,可以根據模板新建,也可以新建空白頁面?;静僮髂J脚cSuger類似,設計師先建立畫面,后開發進行數據源的接入。編輯界面的操作難度也不高,稍微了解一下,就可以快速入手。 

          undefined

          △DataV平臺創建編輯界面



          與Suger相比,個人更為喜歡DataV。DataV的設計風格與動效交互都會略好一點。一般企業進行數據大屏的設計項目,其目的更趨向于對外展示。DataV在效果的酷炫程度上會更符合領導的要求。只是DataV目前分為基礎版、企業版和專業版 收費服務。個人申請有30天的基礎版試用期。具體選擇需要看公司自身內部需求而定。 




          騰訊RayData


          https://cloud.tencent.com/product/raydata
          RayData是我跟隨我們領導去參觀騰訊在寧波的分公司進行了解。當時展示的項目是深圳的城市大腦。將城市管理集為一體,包含交通、醫療、警務等等。與其在官網展示的內容一致,只不過官網是截圖,而當時參觀時是有個小姐姐拿著pad一邊交互一邊跟我們講解。交互與數據聯動的效果很好,當時我們領導很喜歡這種效果。 

          △智慧城市大數據可視化 




          整體來說,RayData的數據展示效果也是相當不錯的。但是RayData目前處于內側階段,也沒有平臺提供編輯功能,當前主要的模式是 付費定制。 

          原文地址:站酷
          作者:楓凝紫夜

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

          截屏2021-05-13 上午11.41.03.png

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          可視化設計十要素-風格篇

          ui設計分享達人

          致數據可視化設計師-風格篇詳解


          本片文章共8000字,閱讀大概需要25分鐘。


          各位數據可視化設計師們大家好,鑒于平時有很多同學對我們的可視化大屏的設計知識點有很多不理解的地方,阿勇決定花一些時間去詳細剖析一下關于這方面的知識,全部都是多年工作經驗所得,絕對有料。


          整個合輯一共有10篇文章,分別涉及到設備篇、風格篇、字體篇、色彩篇、組件篇、布局篇、版式篇、視覺篇、團隊篇、技能篇十篇文章,詳細的講一講可視化大屏設計的知識點。


          風格篇主要包含:常用風格 > 風格解析 > 風格選擇 > 風格應用。


          本篇文章將會從風格分類入手,進行風格解析,總結可視化設計的風格,選擇風格并應用到場景,教大家如何選擇合適的風格應用到商業可視化項目中。


          畫面中的動效GIF圖會比較大,請大家耐心等候加載~



          總結了商業項目中遇到的一些可視化案例以及科幻可視化風格,大體的將其分為三個大類:傳統風格、HUD風格、FUI風格。



          • 傳統酷炫風格


          傳統狹義上的數據可視化, 更多是純圖形去代表數據,通過圖形去展示數據,直觀的展示所需要表現的指標。數據可視化也有很多分類, 不過也許你也懶得了解了。


          比如,網站后臺分析,可以說是可視化分析報表類的,例如百度統計,谷歌統計等等;比如,面對B端后臺的數據可視化,國內做的最好的無非就是antdesign,element;我們此處說的是基于G端的數據可視化大屏,G端數據可視化從本質上來說是注重直接解決問題,通過直觀的展示數據圖表去了解各個指標的詳細數值;


          也有甚者比較注重視覺效果,要酷炫,心理學家說, 人腦70%的神經信號來自視覺, 我們的視覺系統最完善, 而不同的感官之間, 多少是可以轉化的, 而且是每個人的天性。國內傳統可視化對于此處的接受程度確實不一樣。B端和G端的用戶,對于可視化風格的接受程度確實是不太一樣的,B端對于前沿技術以及可視化表現會有一定的接受能力,但是G端更多注重于界面酷炫,功能反而不是很重要了,這多少有點本末倒置的感覺。

          undefined


          在傳統可視化面前,頁面的雜糅程度較強,彷佛是由一塊塊圖表堆砌而成,比較注重色彩的運用,多色搭配,色彩一般具有特質。一般大多數可視化可以看到共同的點就是:配色/布局/構圖,機械而又重復,彷佛一個流水線生產出來的。當然,現如今新基建乃是主流,人群對可視化大屏的認知和審美也在逐漸提升,設計師在以后的工作中還需要取長補短,多吸收一些好的東西去豐富我們具有中國特色的數據可視化大屏設計。



          • HUD風格


          平視顯示器(Head Up Display),以下簡稱HUD,是運用在航空器的飛行輔助儀器。平視的意思是指飛行員不需要低頭就能夠看到他需要要的重要資訊。平視顯示器最早出現在軍用飛機上,降低飛行員需要低頭查看儀表的頻率,避免注意力中斷以及喪失對狀態意識(Situation Awareness)的掌握。


          因為HUD的方便性以及能夠提高飛行安全,民航機也紛紛跟進安裝,汽車也開始安裝,在一些游戲用戶界面,很多地方都會采用HUD的風格,比如射擊類,格斗類,動作類游戲等等(賽博朋克,堡壘之夜,絕地求生)。


          在設計的細節當中使用大量的圖形元素,并輔以一定的裝飾元素,主要以點線為主裝飾,排版版式參考價值較強。HUD相比較于傳統和FUI來說,更貼合我們的日常設計,對于圖形的展示也更加的有意義,所以透析HUD風格,對于提升可視化設計水平有很大的幫助。



          • FUI風格


          相對于當前流行的扁平化設計,FUI可謂是在Ul設計中獨樹一幟,設計風格十分鮮明,極具未來感和科技感。


          FUI是一個非常有趣的Ul設計領域,是我們在日?,F實生活之中天法探索的用戶界面設計方式。在我們的日常工作中,通常日常設計很難有機會為宇宙飛船、時間旅行設備,或者感知型人工智能和外星人使用的用戶界面做設計。FUI使設計師有機會去突破現有的用戶體驗和用戶界面的限制,探索一個新的領域。通過虛幻界面設計我們可以大膽的設想以及尋找新的解決方案。例如我們可以大膽的設想AR技術的應用,地圖可以采用全息投影技術、人與智能硬件的環境交互等等。


          虛幻界面設計甚至可以是新的發明,它們可以作為一種概念的驗證它們可以啟發我們,提出問題,探索什么可行,什么不可行。正如科幻小說可以激勵人們登上月球或建造自動駕駛汽車一樣,虛幻用戶界面可以激勵人們為未來創造技術。


          FUI的圖形裝飾元素可以說是極其豐富,形式感很強。在設計的細節當中使用大量的“異形”的圖形元素,并輔以一定的裝飾元素,但是一定程度上對于設計中繁瑣的需求,需求層次上尋找設計靈感沒有太多幫助。常用在科幻電影以及概念游戲等領域,落地較難。



          • 升華:如何培養出自己的可視化設計風格


          如何培養和完善自己的可視化設計風格呢?其實這個問題有點狹隘,不同客戶不同使用場景我們可能風格都會不太一樣,但是唯一我們不會變的是我們對于組件圖表的理解,圖表圖形的展示形式。


          傳統風格:多種色彩

          FUI  風格:科技圖形

          HUD風格:版式排版


          一個合格的可視化設計師,對于任何可以參考的頁面,都可以迅速領略到可以應用的部分頁面和展示形式,多吸收知識,提升自己,這就是取其精華,去其糟粕的正確解答吧!所以要將現有風格結合,完善設計理念,提升視覺技法,這才是當下比較重要的。 



          最近由于工作中的一個項目,對自己充滿了懷疑,究竟什么叫科技感?不同的應用場景,科技感是否還依舊有效?同展示條件下不同應用場景,又會有什么樣的差異?究竟是什么樣子的設計,才能被“甲方爸爸"認定為科技感十足,并且很酷炫呢?從酷炫科技感出發,總結了以下四個方面去解析科技感風格。


          • 科技感的界面有哪些特征?

          • 同展示條件下不同應用場景,又會有什么樣的差異?

          • 三維的表現形式,是否真的跟科技感成正比?

          • 面對段落文本需求,列表需求等如何把頁面做出科技感?



          01 科技感的界面有哪些特征?


          相信很多可視化設計師聽到最多的一句話:要酷炫,要科技感!每每聽到這句話我都會變得非常暴躁。究竟是酷炫科技感代表可視化?還是數據可視才是可視化的內核?每每遇到這種令人糟心的問題,我想的是如何通過自己的專業知識去解釋,可是我發現根本解釋不清楚,也無法令甲方客戶信服,甚至和同為乙方的總包也無法達成統一戰線。那么我們應該如何去做呢,又應該如何去解釋科技感這個抽象的概念呢?



          • 1.1 配色 


          提到科技感色系一般我們想到的就是藍色系(科技藍),但是很多人可能走進了一個誤區,科技感的專屬色彩并不是只有藍色,而且一些藍色確實讓我們有審美疲勞的感覺。如圖,就是我們比較常見的傳統可視化設計,一眼看去滿屏都是藍色,具有中國特色的藍色科技感。正如所有人都公認的黨建題材為紅色加黃色,那么科技感真的只有藍色專屬嗎?黨建題材都是紅色專屬嗎?


          由此可見,紅色并不是黨建題材的專屬色彩,存在即合理,也并沒有說黨建可視化一定要做成紅色的。制約的因素有很多:項目背景,項目需求,設計提案,專業認知等等,可視化大屏歸根結底還是做的是服務設計,因此服務好客戶,得到客戶的認可,就能體現設計的價值。但是在設計稿中可以發現,界面運用到了一些黨建色彩的元素,也是通過這種方式去展示,這也是設計師需要注意的一點。


          • 傳統科技藍風格可視化


          • 其他科技藍風格可視化


          • 橘色科技感風格可視化

          undefined


          由此我們可以推斷,配色是塑造科技感界面的一個比較重要的因素。色彩的選擇需要根據實際所運用到的場景,比如安全行業,藍綠色會比較好一點;比如公安行業,傳統藍色就比較合適;比如衛星地圖,用藍色就不合適;根據不同的業務范疇以及不同的應用場景去確定配色,這才是我們要做的。


          藍色并不是科技感的專有屬性,任何一種顏色都是可以塑造科技感的感覺的。比如適合用綠色的場景做的界面,沒有做好看,那只能怪自己學藝不精,跟配色無關。不排斥藍色,但是討厭到處都是用藍色,上來就是用藍色。



          1.2 背景 


          說到背景這是一個影響科技感非常重要的因素,一張超神比比皆是,一張超鬼也是隨處可見,究竟什么樣的背景才是一個優秀的可視化界面所具備的?不是畫面發光,有閃光點,宇宙或者銀河那種圖;也不是科技點線,帶漸變的線條(混合工具做出來的那種)看起來就特別復雜;也不是那種亮度超過畫面任何一個元素的圖。


          科技感的背景所起到的作用應該是襯托畫面,而不是在畫面中比較跳,搶視覺,一大坨發光或者復雜的圖形,只會起到反作用。


          一個好的背景一定是不影響視覺的同時,襯托畫面和主視覺,如果整個頁面分黑白灰三層,那么背景一定是黑的那一層,這樣的畫面效果才會好。



          1.3 圖形 


          圖形應該是以上指標中,最令人可以接受對科技感風格詮釋的一種,科技感的圖形到底有哪些特征,我們又該如何去做呢?


          通過以上案例我們可以發現,所謂圖形表現科技感,最大的特征就是點線面應用的多元化,通過一種或者多種規律將點線面組合起來,線條粗細長短不一,點大小不等。在使用圖形進行點綴搭配時,切不可過于花哨,從而搶了主要內容的風頭。


          不規則圖形,點線裝飾,色彩,外發光,都是圖形詮釋科技感的方式。


          此處可能會出現一些三維樣式的圖形,特殊的視角以及不常見的設計都會增加科技感的元素,但是也不是所有的三維都可以比二維更有科技感的。我最近做的就是甲方客戶一直覺得:三維元素太少了,科技感不夠。我就納悶了,到底什么才是科技感?難道科技感只能用三維的來表示了?只能說一定條件下,三維是優于二維展示的,但這也不是絕對的。如果你的場景主視覺本身就是二維范疇的,何必要要求組件三維展示。


          下圖的二維科技感表現上肯定是超過三維地球的,至少我是這么認為的。



          1.4 動效 


          動效應該是最能體現科技感的方式了,通過動態演示組件,通過動效展示界面,遠遠比靜態頁面要合理的多。動效主要是通過:位移、旋轉、透明度(閃爍)、縮放等方式去制作,形成獨特的動畫節奏。


          最常用的科技動畫:粒子動畫,線條動畫,輝光,剪切路徑,偏移字符等等。


          可以發現科技感動效一般都伴隨著極快的閃爍動畫,動畫的節奏也是比較偏快,再通過出現動畫,字符偏移,剪切路徑等演示組件的形成過程。



          02 同展示條件下不同應用場景,會有怎樣的差異?


          可能大家沒有遇到過這種情況,比如在三維建筑可視化中,科技感本身就依賴于場景的表現,但是不知道大家有沒有試過,將三維建筑可視化換成二維GIS之后,我們如何去使畫面表現的更具科技感呢?


          圖一,圖二,圖三分別就是替換不同的場景,那么我們來看看這些場景為什么不適合原本的之前的科技感風格呢,我們一起思考一下~


          以上三張圖可以看出,圖一的飛機可視化是畫面的原稿,后兩張是在同一種設計面板,替換了不用的主視覺場景,由此可以看出不同主視覺場景可能對應不同的風格UI組件,沒有通用的組件,如果想完美表達一些面板組件,那么需要取設計不同風格的主視覺場景才可以。


          大家可能會覺得科技感只針對于一些特殊的場景,或者說是深色場景,比如一些實景地圖和衛星地圖又該如何去表現科技感的元素呢?那么如果是淺色可視化我們又該如何去做科技感呢?


          科技感風格應用于不同的場景,那么表現科技感的方式也是有很大的不同的。



          03 三維的表現形式,是否真的跟科技感提升成正比?


          其實這本身就是一個偽命題,三維表現對畫面的沖擊力是非常強的,對于畫面視覺效果的提升有很大的幫助。不過是否所有的三維就是最合適的呢,這個也確實有待商榷。不過能肯定的是,一定程度上,三維一定會比二維更加具有沖擊,更加具有科技感。


          首先必須要確定的是,此處三維一定是科技感點線組成或者說是線描類型的三維主體,而不是實景以及仿真的主體,當然并不是絕對的,此處針對大多數場景下。


          可以通過以上圖片看出,科技感一定伴隨的是大量的點線裝飾,畫面主體一定是最突出的地方。而不是有時候遇到的是:GIS地圖就是很普通的樣式,可編輯性不是很強,樣式也比較老舊,對設計就會造成大量的困擾。在主視覺沒有完美表現的時候,就不要強求說把兩邊去做好看,主視覺不好看,那么圖表做的特別華麗也只是讓主視覺更掉分。


          其實最正確的表現就是二維表現加上三維場景展示,兩者相輔相成,對于畫面的展示才是最好的。通過下面這組案例可以發現,二維表現加上三維場景才是最優解。



          04 面對段落文本列表需求時如何把頁面做出科技感?


          很多同學對于文字需求如何制作科技感有很多的疑問,通過最近的作圖,總結出四種關于文字排版科技感的展示,總結起來其實就那么幾點:裝飾,圖形,字體,版式,表現形式...


          其實對于數據可視化設計科技感的研究,不僅需要了解表現層,更需要上升到業務層。一些特定的圖形或者裝飾,對于畫面的豐富程度一定是有幫助的。


          講了這么多,不知道對大家理解科技感是否有幫助,如何提升畫面科技感,是我們做為數據可視化設計必定會面臨的一大難題。希望大家在以后的工作或者項目中,多多酷炫,多多科技感?。?!



          1、根據場景-了解展示需求


          場景是什么?是人物、時間、地點三要素所組成的特定關系。在某某時間(when),某某地點(where),特定類型的用戶(who),干了某某事情(what)。


          因此我們要確定的是,根據這四個“W”去確定整體業務框架的基礎構成,這對于設計風格的初步意向確認有著很積極的意義。


          who:王局長

          when:領導人會議時

          where:公安局

          what:新基建建設 數字化轉型事項


          在領導人會試上,公安局王局長提議通過了關于新基建,數字化轉型的各種措施。面對這一場景,有以下幾個問題。受眾是誰?需要干什么事情?誰去干?數字化轉型怎么做?怎么實現?需要用到的技術?展示風格?重功能?還是重展示?


          在有了這些的前提下,對于我們設計風格的選擇就有了很強的指導意義,比如王局長比較喜歡多色搭配,科技感強的風格,主要為了配合展示匯報,那么就可以通過這一些需求,初步制定風格為效果酷炫的展示類大屏,但是主視覺的展示形式還是要根據其他的具體情況去進一步確認。



          2、根據含義-確立設計方向


          在面對一些特有的項目時,一般客戶會給出一些參考術語:“3個一帶”,“2個方針”,“八大成果”“三山,兩水,百林,千田”......


          面對這種問題,能做的就是理解其包含的真實意義,究竟需要展示哪方面的,了解清楚項目的背景需求,結合客戶所說的一些關鍵字段,剖析以上的內容可以發現,客戶通過一些方針和方法,對“山水林田”進行治理,取得了一些階段性成果。


          因此展示的內容可以確定為智慧治理,或者智慧生態方向的,然后就可以根據項目背景的內容去選擇可以應用的具體的一些方案了。



          3、根據需求-明確設計內容


          因在到了需求分析的階段,可以根據客戶提供的大量的資料和業務需求,去明確的設計方向,究竟是需要展示哪些內容?可以提供的數據有哪些?展示條件(硬件設施)是否具備?想要的效果有哪些?


          比如客戶需要查看到山水林田的各個改進措施的效果,以及改進前后的效果對比。說到這單純的二維GIS和影像已經不太好滿足了,那么可以將場景風格定位到三維展示,需要實際1:1建模,至于是通過WEBGL,UE,UNITY就看各自的團隊擅長的方向了。


          場景大體風格確定,那么展示面板需求根據場景去搭建就可以了,這樣一個完整的風格選擇過程就算初步走通了,具體的驗證環節,可以在一次次會議中再去進行交流和修改即可。




          • 二維GIS(深淺)、衛星影像


          優點

          展示容易,風格切換皮膚多,可編輯性高,開發難度低,地圖資源較多,適合快速搭建可視化大屏模版,開 源內容較多,前端開發直接調用樣式即可。


          缺點

          展示形式較普通,地圖風格樣式不出彩,設計效果也會打很多折扣,很難與同行拉開差距。


          難點

          開發過程中可能需要基于高德API以及一些平臺,對封裝地圖進行二次開發,沒有GIS開發經驗的前端,會比較困難。


          網址

          https://lbs.amap.com/product/mapstyle#/  Mapbox,高德API,百度API,超圖,天地圖等等。


          以高德API為例



          • 矢量地圖、省市區塊


          優點

          展示靈活,可下載svg矢量區塊,并可下載json文件直接交付開發,可下鉆到縣級,可編輯性高,一般會結合二維GIS來展示,有插件可以直接繪制全國地圖。


          缺點

          不夠立體,可選樣式比較少,畫面主視覺容易空洞導致畫面效果不強。


          難點

          開發對于設計圖的一些效果還原比較困難,例如發光,漸變等等。只能做一些比較基礎屬性的修改,對于效果還原可能達不到80%以上。


          網址

          http://datav.aliyun.com/tools/atlas/index.html#&lat=33.50475906922609&lng=104.2822265625&zoom=4


          以DATAV地圖下載器為例



          • 矢量地圖模型、省市區塊


          優點

          展示效果好,三維場景,有立體效果,材質貼圖不同效果會完全不一樣,可編輯性較強,相比較二維更推薦這種表現形式。


          缺點

          三維范疇,不會三維知識的小伙伴會比較難,此處會涉及到三維軟件合并擠壓,展UV,漫射貼圖,QGIS制作高度貼圖,PS制作法線貼圖等等知識點。


          難點

          對于不懂三維的小伙伴比較困難,涉及知識點較多,容易一知半解。


          教程

          https://mp.weixin.qq.com/s/zjR_pJyU1jpeLJMXZ-4FyA(原作者已授權)


          3D地圖建模及貼圖的制作獲取方法



          • 三維模型、城市建模


          優點

          展示形式新穎,展示效果非常好,三維表現往往讓人耳目一新,對于可視化的展示可以說是所見即所得,深得客戶喜愛。


          缺點

          開發難度高,專業性人才比較少,懂三維的設計也是非常的少,對于三維知識以及引擎開發知識需要比較熟悉才行。


          難點

          人才稀缺,入門難,做好更難,教程自學難度有點大,例如cityengine程序化建模,houdini程序化建模等等。


          教程

          https://space.bilibili.com/21247145?from=search&seid=10582171815506234319


          cityengine程序化建模



          • 知識圖譜、數據中臺等


          優點

          主視覺效果強,特殊場景的處理能夠很完美的講清邏輯,對于圖形化的理解有很強的意義。


          缺點

          邏輯復雜,難懂,比較抽象,專業難度高,對業務理解能力需要很強。


          難點

          邏輯處理比較難,設計效果比較難以想象,設計容易偏離主題,比如數據中臺,是一個非常虛幻的東西,很難講清楚處理邏輯和過程。


          網址

          https://www.zcool.com.cn/work/ZMzg4OTQ5ODQ=.html


          以知識圖譜為例



          知識點總結


          可視化風格三大分類以及對于圖形的應用(傳統、HUD、FUI);

          如何培養自己的數據可視化設計風格(色彩+圖形+板式);

          影響科技感風格的四大影響因素(配色,圖形,背景,動效);

          設計風格的選擇以及確定思路(根據場景、含義、需求);

          可視化風格的應用以及拓展(各種主視覺的應用優缺難點)。


          講了這么多,不知道對大家理解科技感是否有幫助,如何提升畫面科技感,是我們做為數據可視化設計必定會面臨的一大難題。希望大家在以后的工作或者項目中,多多酷炫,多多科技感?。?!不知道大家有沒有一種錯覺,突然有一段時間,某個時候發現自己突然不會做設計了,啥也想不明白了,莫名的有點浮躁,做什么都不能專心。其實很簡單,總的來說就是,你即將突破現有的設計水準,如果能想明白,解決掉問題,你的審美以及設計水平都會有很大的進步。這就是別人口中的,突然就會了,知道怎么做了,其實無非就是積累夠了,需要升入下一個等級了~


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

          文章來源:站酷 作者:AYANG_BDR
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          可視化設計十要素-設備篇

          ui設計分享達人

          致數據可視化設計師-設備篇詳解


          各位數據可視化設計師們大家好,鑒于平時有很多同學對我們的可視化大屏的設計知識點有很多不理解的地方,阿勇決定花一些時間去詳細剖析一下關于這方面的知識,全部都是多年工作經驗所得,絕對有料。


          整個合輯一共有10篇文章,分別涉及到設備篇、風格篇、字體篇、色彩篇、組件篇、布局篇、版式篇、視覺篇、團隊篇、技能篇十篇文章,具體的詳細的展開來講一講可視化大屏設計的知識點。(我命名為可視化設計十要素)


          同時也會包含一些工作中的同學們問我的一些問題以及我搜集的一些問題,將會以問答的形式去給大家講一講,如有不對的地方,還請大家指出,我們一起探討進步!


          文章較長,請廣大讀者仔細閱讀,基本涵蓋:設備信息,分辨率尺寸,大屏適配,投屏事項,掌握本文可應對日常可視化設計設備方面的知識。



          LED屏幕

          政府大屏主要以點間距去區分屏幕的精細度,點間距越小,造價約昂貴;面積越大越整體,造價越高。離屏幕越近顆粒感越強,設計效果也就越不清晰,LED顯示屏表面不平整是導致LED顯示屏圖像失真的主要原因。LED顯示屏表面粗糙度的好壞主要取決于生產工藝。

          屏幕介紹:按照不同點間距進行分類,P1.25、P2.5、P3、P4、P5、P6、P8、P10、P12、P20(間距越小,圖像越清晰,價格也越高,一般政府led屏基本都在P1.25-P6之間)。

          最佳視距=像素間距/(0.3~0.8),這是一個近似范圍。如LED顯示屏P16mm,最佳視距為20~54米。


          液晶拼接屏

          拼接屏相比于點間距比較小的LED屏,價格方面會更便宜一點,拼接屏設計時最主要就是拼縫的處理,注意拼縫,設計時非必要情況下,都要跳過拼縫,尤其是“圓”這個造型。

          拼接屏:46寸,55寸  物理分辨率:1920*N 1080*N(n代表屏幕數量),1.7mm、3.5mm 、0.88mm、0.44mm、無縫隙;企業常用(1.7mm 和3.5mm)

          大屏拼接縫隙:設計時應盡量不要跨屏去設計,會使畫面交叉,不重疊,尤其是圓形。


          大屏拼接處理器

          大屏拼接處理器主要功能是將一個完整的圖像信號劃分成N塊后分配給N個視頻顯示單元,完成用多個普通視頻單元組成一個超大屏幕動態圖像顯示屏。大屏拼接處理器輸入信號數量和類型取決于用戶需要,輸出信號數量等于顯示單元數量。


          視頻矩陣處理器

          矩陣是將多路輸入信號切換輸出到多個顯示設備,一般來說輸入信號數量要大于輸出信號數量。(我們想在9塊顯示器上同時監控100個攝像頭傳來的信號,就用矩陣來實現即可)


          視頻矩陣是指通過陣列切換的方法將m路視頻信號任意輸出至n路監控設備上的電子裝置,一般情況下矩陣的輸入大于輸出即m>n。有一些視頻矩陣也帶有音頻切換功能,能將視頻和音頻信號進行同步切換,這種矩陣也叫做視音頻矩陣。


          模擬視頻矩陣的輸入設備:監控攝像機、高速球、畫面處理器等很多個設備,顯示終端一般監視器,電視墻,拼接屏等(通常視頻矩陣輸入很多,一般幾十路到幾千路視頻,輸出比較少一般2-128個顯示器;例如64進8出,128進16出,512進32出,1024進48出等)。


          總結:矩陣只能負責信號的切換,不能處理,不能做效果。大屏拼接處理器功能十分強大,具備矩陣功能的同時,還可以實現任意開窗、漫游、疊加、場景保存與輪換。


          液晶拼接屏的優勢 - 拼接處理器預設場景

          4*2大屏展示端,我們通過控制端,借由拼接處理器可以對大屏進行隨意開窗,漫游,疊加,畫中畫等效果。在控制端拖動布局,大屏會隨之改變布局,非常方便。下面我就借由我以前做過的一個項目幫助大家理解一下拼接處理器的優勢以及如何設定不同場景。


          如果你們企業還在因為屏幕適配以及尺寸問題而糾結,或者想展示:開窗,漫游,疊加,畫中畫等效果,毫無疑問你們應該選擇拼接處理器,這比傳統投屏方式更合適,更沒有比例不對的困擾。


          預設場景一

          把控制端的分屏進行編號,接下來移動控制端對應的編號區塊,就可以對大屏進行重新布局,圖中展示的正是我們的預設正常場景。場景為居中布局,左右兩側為圖表展示。


          預設場景二:任意窗口布局

          對控制端進行隨機布局,將主視覺模塊移動到左側四塊屏幕,圖表都集中在右側,由此我們就由預設場景的居中布局變成了左右布局,左側為主視覺。


          預設場景三:任意窗口漫游

          可以隨意的關閉大屏某個模塊的漫游,通過控制端進行屏幕的顯示以及不顯示。


          預設場景四:任意窗口平移

          畫面的任何一個模塊都是可以進行平移操作的,我們將模塊一和模塊五可以平移拖拽到任何一個位置。


          預設場景五:任意窗口疊加

          畫面的任何一個模塊都是可以進行疊加到屏幕任何一處,還可以控制模塊置頂和置底,非常靈活。


          WEB端大屏

          基于web網頁端的展示方式,通過在web開發,有需要時會投屏到大屏上去展示。設備比例一定不能差距過大,比如16:9的投屏到32:9的大屏就不是合適,解決方案可以是外接一塊1920的顯示器即可。


          此處要注意web端演示時,記得全屏顯示,瀏覽器邊框滑動條等可以不考慮,前端會做相應的瀏覽器細節考慮,設計按正常分辨率走即可。


          觸摸屏

          觸摸屏(Touch Panel)又稱為“觸控屏”、“觸控面板”、“觸控臺“,是一種可接收觸頭等輸入訊號的感應式液晶顯示裝置。


          當接觸了屏幕上的圖形按鈕時,屏幕上的觸覺反饋系統可根據預先編程的程式驅動各種連結裝置可用作控制端操作大屏,原理等同于ipad控制,只是載體不同。


          設計規范以及按鍵反饋等交互體驗與ipad類似。



          滑軌屏

          滑軌互動屏系統——又稱為滑軌電視、滑軌播放等,通過特殊設計的機械滑軌控制裝置,結合高清液晶拼接幕墻,實現對屏幕內容的互動控制。滑動到不同位置屏幕展示相關信息,包括圖片、文字、視頻等,是一種全新的互動展示形式,可與觸摸同時使用。


          虛擬沙盤

          虛擬沙盤/數字沙盤就是用計算機通過投影儀或者LED大屏顯示屏動態/靜態三維顯示:智慧交通、智慧市政、智慧農業、智慧物流、智慧停車、智慧公交、智慧公安、智慧交運等模型,這是一種高科技的模型操作員通過程序,可以隨意調整沙盤的尺寸、規劃區域、區域布置,快速展示多種全新的創意。


          具有三維顯示效果,并可以從不同角度觀察創意模型,篩選創意方案。注意虛擬沙盤和實體沙盤的聯動效果,實體沙盤為底,虛擬沙盤做效果疊加。


          分辨率:物理實際分辨率



          Q:原本設計尺寸是1920*1080,使用場景是PC端,同時在大屏中展示,尺寸為3840*1080,該如何適配?

          A:首先我們需要了解適配最主要的痛點就是:靈活,復用性高,可延展。

          圍繞這幾個點我們可以通過模塊化開發去做,將每個模塊單獨開發。我們設計師做這種需求之前,就需要提前去構思,在設計各模塊時,盡量使用可擴展和可自適應的圖形,這樣面對適配的時候我們可以通過移動,縮放這些模塊,來完成適配。盡量避免二次設計以及開發,提升時間成本。


          圖形放大適配


          圖形位移適配


          Q:如果是16:9適配非32:9是否也是這么去適配的?如果是特殊的形狀或比例該怎么適配?

          A:我們適配一定要記住靈活,減少工作量這些原則,如果不遵循這些原則,那么我們做適配的初衷就錯誤了。這樣我們還不如直接就重新開發一套了。就好比我們通過控制端去控制大屏,如何用開發一套的時間去適配兩個甚至是多個終端,這是我們需要注意的。當然考慮到一些實際情況,會有一定程度上的修改,但是一定是要從節省工作量去出發的。



          場景一:拼接屏分辨率計算,已知某項目設備分辨率為寬高4*2拼接屏,設計稿我們該如何去定義分辨率?分辨率又是多大?

          從命題我們可以看到4*2的拼接屏,我們可以通過一塊屏幕為1920*1080去計算,那么通過計算分辨率應該是1920*4 &1080*2,也就是7680*2160,這樣就計算出我們的分辨率了。


          場景二:LED屏分辨率計算,已知某項目LED屏幕物理尺寸為寬15米,高4米,設備分辨率未知(可以支持4K或者2K輸出),那么如何去制定分辨率?

          工作中相信不少同學都遇到過這種只知物理尺寸而不知道分辨率的項目,那么我們只能通過計算大概的設計分辨率來出初期的設計稿件。

          可能一:屏幕支持4K輸出,既然支持4K輸出,保證畫面輸出的清晰我們可以將設備的高度設定為2160

          此場景下公式為:15/4=X/2160     X=8100    那么可以大概得出寬度大概為8100像素(只是我們通過計算大概得出來的)

          可能二:屏幕支持2K輸出

          此場景下公式為:15/4=X/1080     X=4050  


          重點來了,不要以為這樣就結束了,我一直強調的可視化設計師為什么一定要在現場,為的就是方便各種測試。剛才我們只是通過計算得出的大概數值,此時我們可以在紙上畫一個正方形,并投到設備上,如圖。


          • 結果一:如果正方形比例不變,設計尺寸無限接近于大屏實際比例;

          • 結果二:如果正方形比例被拉伸,設計尺寸小于大屏實際尺寸;

          • 結果三:如果正方形比例被壓縮,設計尺寸大于大屏實際尺寸。


          此處圖片上主要是為了測試計算出來的分辨率究竟是拉伸還是被壓縮了,通過這樣的方式去測試設備大概的分辨率的大小比例,在我們產出效果圖之后,也可以投射設計圖的方式看看屏幕是否是完美適配,這種方法可以在未開發之前,盡可能確定屏幕對設計圖的影響,從而避免對開發造成大規模修改。

          注意:這樣做也只是在不知道設備分辨率的情況下,去大概計算設備分辨率,僅供參考!



          電腦直接投屏

          使用場景:會議室,展廳等

          等比例投屏,投屏電腦投到2*2大屏(4K)

          投屏電腦支持輸出4K分辨率,投屏電腦分辨率以3840*2160作為設計,投到4K拼接屏上,大屏會完美展示,并且畫面非常清晰。


          投屏電腦支持輸出2K分辨率,投屏電腦分辨率以1920*1080作為設計,投到4K拼接屏上,只會以1920*1080進行輸出,因為輸出像素只能支持2K,也只是1920*1080的放大。


          此處需要了解兩個概念:輸出像素和顯示像素,輸出像素指的的是投屏電腦的最大支持分辨率,顯示像素就是我們大屏的支持的最大分辨率。

          我們實際項目中最好以顯示像素的尺寸進行設計(就是以大屏尺寸為主),但是也要看輸出設備的像素大小。


          硬件投屏本地運行

          使用場景:科技展廳,以及一些帶主機的設備。


          此種情況,一般我們的大屏會自帶主機,大屏本身就可以看成一個顯示器非常大的電腦。我們如果需要進行可視化演示,那么我們直接就可以通過顯示器的尺寸去做設計,這樣就是大屏的設計尺寸。


          一般這種靠硬件的投射,都是在拼接處理器的處理下,將多個屏幕拼合成一個大的顯示器,再通過拼控系統(硬件投屏)進行輸出。


          一般我們可以將我們大屏的(UE4或者U3D開發)應用程序打包,打包成一個后綴為.exe的應用程序,在大屏電腦上直接點擊,程序就可以在大屏上完美的跑起來,也不需要去進行電腦投射大屏。


          控制端操控大屏

          如果通過控制端去控制大屏,那么投射設備就可以通過多種方式去展示了,可以是手機,平板,觸摸屏,手勢控制,體感控制等等。


          這種情況下投射設備的尺寸就按照本身設備的規范去設計就可以了(比如750*1334,2048*1536),設計尺寸就是我們大屏本身的分辨率就可以了。


          多主機多信號投屏

          此種情況主要使用場景:屏幕寬度非常高,并且內容可以分很多模塊展示,模塊彼此之間不受影響獨立展示,這種情況下我們就可以通過此種方式去投屏。


          通過多個主機分別去投射大屏的同等大小區域,比如圖中的場景模塊被我分成了四等份,我們就可以通過四臺主機去分別投射四個模塊,形成一個完整的大屏。


          此種大屏設計尺寸我們以輸出設備的尺寸為主要參考,四臺主機那么整體寬度就是1920*4=7680,高度就是1080(如果設備支持4k輸出,那么提升相應的設備尺寸*2就可以了)。


          不同比例投屏及解決方案

          Q:如果遇到一個設備是16:9,投屏到一個20:3比例的大屏幕, 那我設計尺寸以16:9,還是20:3?

          A:我們要記住,如果面對的是正常比例投屏到非等比的大屏,我們需要遵守的規范一定是:一切以大屏展示為主。所以我們設計尺寸一定是按照20:3來設計的,大屏展示正常才是我們的唯一標準,投屏電腦可能會出現的問題,我們只能妥協(投屏電腦可能只能展示很小的一部分,但也是沒有辦法的)


          那么我們遇到這種是否就沒有辦法了呢?在這阿勇給大家提供了三種解決辦法,在實際工作中,我也遇到過這種問題,所以在這給大家分享一下。


          方案一:外接顯示器(外接多個顯示器,一般主機可以另外外接四個顯示器,這樣就可以解決投屏電腦顯示不全的問題了)


          方案二:采用拼控系統,而不是用純粹的設備投屏(拼控系統完美解決了尺寸不一致的難點)


          方案三:設計兩稿,16:9,20:3我們都去做設計(做兩套系統,相當于做的適配)


          Q:請教大家一個問題,電腦的分辨率是3840*2160,單個大屏的分辨率是1920*1080,拼9*6的大屏,設計尺寸該設置多少啊?這樣設計尺寸會不會太大了,如何優化這個設計稿尺寸?

          A:前面的文章我們已經介紹過拼接屏的尺寸的問題,這個問題的解答:1920*9/1080*6 ,這個就是設計分辨率,通過計算得出,最終設計稿尺寸為17280*6480。可以看出設計分辨率確實太大了,設計的時候如何去優化設計尺寸呢?


          通過命題我們可以看出電腦分辨率是支持4K的,就是說輸出分辨率和顯示分辨率我們都是可以上4K的,而4K的分辨率一般會做3840*2160,再結合設計稿尺寸17280*6480,可以將整個效果圖尺寸縮小三倍,也就5760*2160。設計可以按照這個分辨率去出圖,最終交付給開發的就是切三倍圖,并提示開發是縮小三倍做的。


          總結:不管在面對什么尺寸的設計,都要記住,萬變不離其中,一切以大屏完美展示為準則,所有的一切都是要在大屏上觀看,為了完美展示,投屏電腦,設備控制等頁面可以適當的讓步。


          全篇知識點

          通過以上的知識點總結,不知道大家對于數據可視化大屏設計是否有了新的認識,數據可視化對于設備的尺寸,設備的信息,以及投屏注意事項,都要有更多的了解才可以。下圖就是總結本篇文章的知識點。


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

          文章來源:站酷 作者:AYANG_BDR
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          日歷

          鏈接

          個人資料

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

          存檔

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