設(shè)計趨勢,探討信息可視化的流程和方法(上)

來源:blog.sina 作者:劉津 學習:6049人次

由于目前在做大數(shù)據(jù)類的產(chǎn)品,界面上總需要使用設(shè)計語言來解釋一些很虛擬、抽象的概念,因此不可避免的要研究信息可視化。之前看了很多同行在這方面的總結(jié)和分享,卻發(fā)現(xiàn)內(nèi)容都差不多,幾乎都是來自國外的一些相關(guān)書籍和資料。所以這里我想談一下在經(jīng)歷了這個項目后,自己對信息可視化的一些粗淺的理解,希望可以拋磚引玉,影響更多同行分享有價值的內(nèi)容。

我對信息可視化的理解

由于剛開始接觸,理解自然非常淺顯。也許日后會有更高深的見解。目前我認為:信息可視化就是用圖形正確的表現(xiàn)復(fù)雜的信息和邏輯關(guān)系,這樣可以:

通過圖片特有的美觀和趣味性,吸引讀者通過最優(yōu)表現(xiàn)形式,使內(nèi)容更易懂拉近讀者與產(chǎn)品的距離,提升品牌認知度

這個圖忘記是在哪里看到的了,它給我留下了非常深刻的印象。這個例子通過簡單的圖形變化讓降雨量信息一目了然。信息可視化是一門了不起的學問,需要設(shè)計者既有很好的交互意識,又要有一定的圖形設(shè)計能力。

設(shè)計趨勢,探討信息可視化的流程和方法(上)

和視覺小伙伴們一起協(xié)作得出的成果

作品一:安全產(chǎn)品首頁展示

創(chuàng)作靈感:從需求文檔中看到這些子產(chǎn)品名字有御前衛(wèi)、八卦陣、御城河……當時就覺得非常有意思,腦海中立刻浮現(xiàn)出一個古城的畫面,古城周圍有士兵、有八卦陣、有御城河等。跟視覺設(shè)計師表達這個想法后大家一拍即合,最終產(chǎn)出了這個方案。中間的城樓最開始是紅色的,有點太搶眼,為了避免喧賓奪主又體現(xiàn)出數(shù)據(jù)被保護的感覺,就把它改成了這種半透明的、很數(shù)據(jù)化的虛擬感覺。

設(shè)計趨勢,探討信息可視化的流程和方法(上)

作品二:產(chǎn)品結(jié)構(gòu)圖

創(chuàng)作靈感:通過競品分析發(fā)現(xiàn)國內(nèi)外同行在這方面都非常下功夫,所以我們也要力求用一張圖來把產(chǎn)品結(jié)構(gòu)和關(guān)系描述清楚。下篇文章會講具體的設(shè)計過程。

設(shè)計趨勢,探討信息可視化的流程和方法(上)

作品三:使用流程示意圖

創(chuàng)作靈感:產(chǎn)品經(jīng)理給出的這個圖很嚴謹,但是對于用戶來說理解起來比較困難,因此先用線框圖把它簡化為單向的流程圖,但這樣又不夠美觀和直觀。心靈手巧的視覺設(shè)計師經(jīng)過圖形的美化,巧妙解決了這個問題。

原始圖:

設(shè)計趨勢,探討信息可視化的流程和方法(上)

修改中(局部):

設(shè)計趨勢,探討信息可視化的流程和方法(上)

改良后:

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!