• <tbody id="9brb1"><pre id="9brb1"></pre></tbody>

    <em id="9brb1"></em>

  • <th id="9brb1"></th>

  • <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
  • <button id="9brb1"><acronym id="9brb1"><input id="9brb1"></input></acronym></button>
      <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
        更多課程 選擇中心


        UI培訓

        400-111-8989

        平面設計培訓教程之數據信息可視化界面設計總結

        • 發布:UI培訓
        • 來源:UI教程
        • 時間:2019-07-15 09:59

        信息可視化界面設計側重點

        就在我準備這篇稿子的時候,在5月15日的早上看到昨天“川航航班備降成都”的新聞,機長在遇到擋風玻璃破碎的突發狀況時沉著的應對,向離他最近的機場發出7700緊急代碼,成功備降雙流國際機場二跑道,川航和地面的指示也密不可分,能夠備降到本不屬于它的機場,雙流國際機場應急處置地面情況,給川航開出綠色通道,配合川航成功著陸。


        空中的情況我不敢猜測,但對于地面上的情況,應該是有類似大屏幕數據分析的參與吧,這種地面設備的使用情況,要通過數據收集進行分析顯示,所以當有緊急情況出現時,我們的大數據就會發揮出作用來,供決策者參考指揮。這種信息傳遞是建立在通訊暢通的情況下,即便是空中的航班信號不良,但地面的指揮還是通暢的。所以地面設備的使用率及調度也是需要有大數據支撐才能做分析決策的,類似雙流國際機場應急突發狀況時,機場自行配合空中航班備降的準備工作,從大數據的參與中,給備降機最大力度的地面支持。雙流國際機場地面上的一些設備使用的數據展示,對數據信息轉換為可視化設計的興趣也日漸濃厚。

        一、信息可視化的范圍

        百度詞條對信息可視化的解釋為:旨在研究大規模非數值型信息資源的視覺呈現,通過利用圖形圖像方面的技術與方法,幫助人們理解和分析數據。

        信息可視化設計常見的有兩種形式:信息解讀型、大數據分析決策型。

        信息解讀型:即圖文解讀,把大篇幅文字型信息,配合圖畫閱讀文字內容,便于人們理解傳播。好的圖文解讀生動形象,一般的圖文解讀就是排個版式,沒有真正理解文字想說的內容。


        大數據分析決策型:數據量大、類型多,通過對大量數據分析挖掘出更多商業價值,降低成本提升效率,供使用者做出更明智的業務決策來。


        二、大數據分析決策的大屏設計

        “大數據”時代已經降臨,在商業、經濟及其他領域中,決策將日益基于數據和分析而作出,而并非基于經驗和直覺。---《紐約時報》2012年2月的一篇專欄

        大數據是如此重要,以至于其獲取、儲存、搜索、共享、分析,乃至可視化地呈現及大屏幕的應用,都成為了當前重要的研究課題。

        對大數據的理論性知識,太多了只做了解,大數據重要的是數據和其將產生的結果,不管數據類型怎樣復雜繁多,通過設計后讓數據變得更直觀易理解,并產生其該有的價值,是設計的重要研究課題。


        網上有關于大數據設計的文章,大多是把種類繁多的數據,以哪種圖表展示更合理化進行分析,對于數據來說圖表固然是基礎的表現形式,可這些圖表有時并不適合一些特殊數據類型,當遇到無法用圖表展示的數據類型時,設計應該怎樣表現該數據呢?

        帶著這個問題,也借助最近做的一個項目,把我對數據信息可視化的理解,做了一份梳理,分享給大家參考,并一定正確,只是提供一種設計思路,也請各位輕拍或加以斧正。

        三、數據大屏界面設計工作的開展順序

        從設計層面來看,數據信息可視化以傳遞信息為主,把各類數據信息做可視化處理,傳遞給決策者直觀準確的信息,決策者有時不需要有執行類操作行為,只閱讀各方數據顯示情況,來做出有益于公司的決策,由此設計者則需要讀懂數據,并改變數據的表現形態,合理的傳遞清晰有效信息給決策者。

        由此可見,界面中涉及到的交互效果不多,關鍵在于對數據信息的理解和排版。以“智慧機場”為例,設計分三個階段:


        1.需求確認

        需求整理,如下:

        1.界面尺寸:1920*1080

        2.應用場景:PC端、投影大屏

        3.設計風格:科技感、大氣

        制作思考點:尺寸是已知條件,結合第二和第三點思考,因有大屏幕的成份,用淺色系容易造成刺眼現象;而科技感也是冷色系居多,最后決定采用深藍色系為主要色調制作。(參考圖)



        2.版式設計

        版式的設計是在原型的內容上制定的,來兩張原型圖看看:

        原型圖



        原型分析:從原型上看,信息內容分為三大塊,版式就制定為三欄式布局(上圖);其中每欄內又有多個信息模塊,分為大模塊和小模塊(下圖)


        內容劃分清晰后,進行版式的分割,第一步,整體大版塊與邊距的分割,預留標題位置,頂邊距為90px,左、右、下邊距為40px(下圖):


        第二步:三欄式布局的分割,分割原則為版塊間的間距30px,各自版塊的大小視頁面內容而定,例圖中的尺寸是按首頁的內容分割的(下圖)。


        寬=40+540+30+700+30+540+40=1920px

        高=90+950+40=1080px

        版塊間的間距要小于頁面外邊距的間距,即30px<40px,要維系版塊內的親密關系。且每一像素都是精確計算才得出來的,精確利用有限空間展示有效信息給使用者,是設計的基本規則。< p="">

        第三步:內容間距的規范


        ① 標題和內容的間距為10px;

        ② 版塊1和版塊2的間距為36px;

        ③ 內容塊間距為16px;

        規范基本制定完成,其它間距可視排版時的情況而定,此規范約束80%的版式,可自行調整,不做過多約束,留出自由發揮的空間。


        3.元素表現

        信息的可視化設計是為了更好的閱讀、傳遞有效信息,做為設計者要善于把文字型、數值型信息加工成可視化圖形或示意圖,幫助決策者理解信息內容,提供決策者嚴謹、清晰的傳遞速度,這就要求設計者首先要理解信息內容。

        ① 數值型信息加工設計:


        可視化設計分析:“開箱檢查數量”和“開箱率”是對應的信息,“隨身行李數量”為總量,從而得出它們的關系為“隨身行李數量”包含“開箱檢查數量”,既然有個“開箱率”,那可以采用百分比的環形圖做可視化設計。


        從環形圖上可以看出,15%的行李都開箱檢查過,從總量上看,開箱率的范圍很小,信息呈現出理性而嚴謹的感覺,數據直觀又清晰。

        ② 信息組加工設計:


        可視化設計分析:數據間的關系:門禁的總數=已處理+未處理,但我們要清楚的知道,決策者在使用信息時所關注的點是什么,信息對于決策者來說有提示、警示的作用,提示的是那些未完成事件,處理信息的時候,“門禁”是關鍵字,“未處理”和數值是主要表現內容,之后是“已處理”和數值,“總數”排在最后,總數是可以兩者相加得出,所以可寫可不寫,只要把關系表示清楚即可,版面空間大可以用圖表展示,版面空間小可以用其它方法,但要突出重點信息,如下圖:


        ③ 信息延展型加工設計:


        可視化設計分析:看到同比和環比我總是很模糊,認真的做了研究,并做圖方便理解;同比,是2017年3月與2016年3月對比;

        環比,是2017年4月與2017年3月對比。


        理解了同比的意思后,根據原型提供的信息,做延展性的設計,

        貨運日報的同比,是今年今日與去年今日的對比,對比就要有漲幅,同時提供其同比增長的數據值;

        貨運月報的同比,是今年本月與去年本月的對比,同理,同時提供其同比增長的數據;

        這樣把兩個信息做了延展思考,既然是對比關系,可以采用柱狀圖進行直觀對比,如下圖:


        從圖表上可以看到直觀的對比信息,還可以得知詳細的增長率,對于決策者來說,對比信息單獨出現沒有可比性,全面的數據信息才能給決策者來做判斷,所以信息的完整性很重要,理解并完善原型圖信息,也是設計者應具備的能力。

        ④ 圖表的完整、適用性設計:


        可視化設計分析:圖表有多種多樣的,根據需求用合適的圖表,原型圖上沒有說明物品有幾種,可以想像得到機場里的物品數量堪比商場,所以要把可能多的情況表現出來(也可以跟項目方確認種類數量),如圖:


        給開發者和決策者提供最嚴謹的數據信息,在有限的空間表現準確的信息,還要保持界面整體風格的一致性,也是設計者的挑戰。

        ⑤ 示意圖幫助理解信息的設計:


        可視化設計分析:文字型的信息,要閱讀理解后,可以用示意形式幫助理解信息內容。這條信息是說“有9件貨物,在5月25號20:19時從大連始發,到達北京;后又在5月26號從北京始發到達深圳。”


        理解了信息要說的內容后,畫出飛機的飛行軌跡示意圖,直觀的表達出飛機的軌跡,下面是貨物信息,物品的名稱:9件貨物,飛機的航班,起飛日期、時間,始發地及目的地,轉機的信息等,都直觀的將信息可視化,比閱讀文字信息更快速的傳遞理解。


        諸如此類的信息有很多,挑了幾種少見的信息,幫助理解并分析其設計方法特點,為信息可視化展示設計做基礎素材,它的制作方法就是要先于使用者之前,把信息都理解透徹,然后設計出可以直觀表達信息的圖形或示意圖,傳遞給使用者正確清晰的信息。

        四、風格刻畫:設計潤色

        前面用很大篇幅介紹了怎么制版,怎么制定設計規范,怎么轉化信息為可視化設計,是因為前面是整個工作的重心,把前面所說的內容都理解了,就可以很快的完成風格的刻畫。根據前面的設計,我們得到一張編排好的純可視化信息界面,如下圖:


        整體編排都按照設計規范來排版制作,在刻畫風格時,就只需要考慮用色及背景圖的設計,對風格的刻畫上,采用科技感的樣式,營造頁面的光感,及星空的感覺,頁面使用深藍色,多次調整背景圖,定稿后:


        背景圖確定好,和排版信息進行合成,合成的過程當中,信息排版不需要做二次設計,如有需要修改也是極少的情況;調整后帶潤色的界面如下圖:


        4. 提升效率的關鍵點

        提升效率不止是完成速度的快慢,還有對數據信息理解的程度,理解到位就能提供給使用者直觀準確的信息;如果沒有理解到位就需要返工制作,所以在設計的時候,設計者的角色有兩個,一個是設計者本身,要考慮排版和可視化信息的轉化形式;另一個就是轉換成使用者視角,真正的在使用這些數據信息去判斷實際情況,才能深刻體會到使用者的心態,了解到使用者使用的目的所在,就能幫助使用者完成第一次的信息整理及篩選任務,讓使用者在閱讀查看界面信息時有清晰的思維,引導使用者做出更明智的業務決策,可見設計師要具備的能力不止是設計本身,更多的是思維邏輯及對信息的理解能力。

        預約申請免費試聽課

        填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

        上一篇:視覺設計師該如何系統的優化APP
        下一篇:UI設計教程之AI繪制潮流插畫

        達內UI設計7月免費訓練營報名啦

        UI培訓教程之系統圖標如何設計

        月薪過萬的UI設計師都是怎么設計界面的

        達內設計學院九周年慶典回首來時路,共赴新征程

        • 掃碼領取資料

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        貴州省

        廣西省

        海南省

        2019最新在线国产自拍,2019最新国产在线观看_久久爱久久高清视频 百度 好搜 搜狗
        <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>