設(shè)計(jì)趨勢(shì),探討信息可視化的流程和方法(上)
由于目前在做大數(shù)據(jù)類(lèi)的產(chǎn)品,界面上總需要使用設(shè)計(jì)語(yǔ)言來(lái)解釋一些很虛擬、抽象的概念,因此不可避免的要研究信息可視化。之前看了很多同行在這方面的總結(jié)和分享,卻發(fā)現(xiàn)內(nèi)容都差不多,幾乎都是來(lái)自國(guó)外的一些相關(guān)書(shū)籍和資料。所以這里我想談一下在經(jīng)歷了這個(gè)項(xiàng)目后,自己對(duì)信息可視化的一些粗淺的理解,希望可以拋磚引玉,影響更多同行分享有價(jià)值的內(nèi)容。
我對(duì)信息可視化的理解由于剛開(kāi)始接觸,理解自然非常淺顯。也許日后會(huì)有更高深的見(jiàn)解。目前我認(rèn)為:信息可視化就是用圖形正確的表現(xiàn)復(fù)雜的信息和邏輯關(guān)系,這樣可以:
通過(guò)圖片特有的美觀和趣味性,吸引讀者通過(guò)最優(yōu)表現(xiàn)形式,使內(nèi)容更易懂拉近讀者與產(chǎn)品的距離,提升品牌認(rèn)知度這個(gè)圖忘記是在哪里看到的了,它給我留下了非常深刻的印象。這個(gè)例子通過(guò)簡(jiǎn)單的圖形變化讓降雨量信息一目了然。信息可視化是一門(mén)了不起的學(xué)問(wèn),需要設(shè)計(jì)者既有很好的交互意識(shí),又要有一定的圖形設(shè)計(jì)能力。
作品一:安全產(chǎn)品首頁(yè)展示
創(chuàng)作靈感:從需求文檔中看到這些子產(chǎn)品名字有御前衛(wèi)、八卦陣、御城河……當(dāng)時(shí)就覺(jué)得非常有意思,腦海中立刻浮現(xiàn)出一個(gè)古城的畫(huà)面,古城周?chē)惺勘、有八卦陣、有御城河等。跟視覺(jué)設(shè)計(jì)師表達(dá)這個(gè)想法后大家一拍即合,最終產(chǎn)出了這個(gè)方案。中間的城樓最開(kāi)始是紅色的,有點(diǎn)太搶眼,為了避免喧賓奪主又體現(xiàn)出數(shù)據(jù)被保護(hù)的感覺(jué),就把它改成了這種半透明的、很數(shù)據(jù)化的虛擬感覺(jué)。
作品二:產(chǎn)品結(jié)構(gòu)圖
創(chuàng)作靈感:通過(guò)競(jìng)品分析發(fā)現(xiàn)國(guó)內(nèi)外同行在這方面都非常下功夫,所以我們也要力求用一張圖來(lái)把產(chǎn)品結(jié)構(gòu)和關(guān)系描述清楚。下篇文章會(huì)講具體的設(shè)計(jì)過(guò)程。
作品三:使用流程示意圖
創(chuàng)作靈感:產(chǎn)品經(jīng)理給出的這個(gè)圖很?chē)?yán)謹(jǐn),但是對(duì)于用戶(hù)來(lái)說(shuō)理解起來(lái)比較困難,因此先用線框圖把它簡(jiǎn)化為單向的流程圖,但這樣又不夠美觀和直觀。心靈手巧的視覺(jué)設(shè)計(jì)師經(jīng)過(guò)圖形的美化,巧妙解決了這個(gè)問(wèn)題。
原始圖:
修改中(局部):
改良后:
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- 用戶(hù)體驗(yàn),分享20個(gè)有影響力的包裝設(shè)計(jì)
- 用戶(hù)體驗(yàn),如何讓用戶(hù)心動(dòng)?
- 調(diào)色知識(shí),簡(jiǎn)單實(shí)用的調(diào)色原理
- 圖片畫(huà)冊(cè)平面設(shè)計(jì)排版ps理論教程
- Photoshop初級(jí)教程-命令的技巧
- 顏色管理,讓自己的照片在網(wǎng)上正確地顯示
- UI知識(shí),尺寸對(duì)UI設(shè)計(jì)的影響
- 設(shè)計(jì)界面最常用最舒服的12種顏色(含色
- 色彩知識(shí),講解顏色基礎(chǔ)知識(shí)和配色理論
- 移動(dòng)設(shè)計(jì),移動(dòng)應(yīng)用導(dǎo)航模式設(shè)計(jì)方法