【精選君推薦】：比起白開(kāi)水，冰淇淋明顯是比較好吃的嘛（除非你對(duì)甜食有著強(qiáng)烈的抗拒情緒）。那么對(duì)于你的眼睛來(lái)說(shuō)，自然也是比較想要“吃冰淇淋”的咯！近年來(lái)各種數(shù)據(jù)可視化、信息可視化圖的興起，科普知識(shí)、研究報(bào)告、信息圖表擺脫以往單一的數(shù)據(jù)文字內(nèi)容，不再冷冰冰而有了自己的“味道”。這些有趣的閱讀體驗(yàn)不正是口味超豐富的“冰淇淋”們嗎！下面先一起來(lái)欣賞一下這些美好的例子吧。
以上是一位設(shè)計(jì)師以自己節(jié)制飲食規(guī)劃一周為主題所拍攝的海報(bào)，原本不及顏色那么鮮美動(dòng)人垃圾食品的樸素的健康食品，在設(shè)計(jì)師的巧思下變得可愛(ài)清新，熱量蛋白質(zhì)等數(shù)據(jù)也不再干巴巴而成為設(shè)計(jì)的美好元素之一。這可比那些市面上說(shuō)教式的健康飲食菜譜讓人有胃口多了，是不是讓觀者更有動(dòng)力扔掉垃圾食品們，邁向健康的新生活呢~
以上是經(jīng)典字體Helvatica的一組時(shí)間軸圖表，設(shè)計(jì)師除了清晰的展示這個(gè)字體的歷史之外，不忘用強(qiáng)烈黑白紅凝造出與字體本身“優(yōu)雅、經(jīng)典”相符的氣質(zhì)。
以上是一組Mercedes-Benz 的廣告。作為大家耳熟能詳?shù)暮儡嚻放疲@組廣告用信息可視化的形式，將一些大家略知一二的常識(shí)圖形化夸張化，畫(huà)面吸引人的同時(shí)也更具說(shuō)服力。通過(guò)間接的手段去宣傳品牌概念，提升品牌的豐富內(nèi)涵形象。圖表內(nèi)容中使用的文字都需要非?！皩I(yè)、嚴(yán)謹(jǐn)”，并不是每個(gè)人都能從中得到有效的信息。反觀圖形化后的內(nèi)容，文字們紛紛有了表情，閱讀門(mén)檻大大降低。不再是看過(guò)即忘的填鴨式信息。
項(xiàng)目背景
參與我們的各種需求的團(tuán)隊(duì)外部人員眾多，有較為明確的工作流程規(guī)范來(lái)讓各位小伙伴了解到自己在項(xiàng)目中參與的部分對(duì)于提升效率是非常有必要的。一般的規(guī)范內(nèi)容都是以純文字內(nèi)容來(lái)表述，對(duì)于我這種一目十行的人當(dāng)然就是過(guò)目就忘了，等到需要使用的時(shí)候又要翻出來(lái)再次閱讀，效率既低又十分麻煩。如果將其轉(zhuǎn)換為圖像內(nèi)容，閱讀起來(lái)是否會(huì)更加直觀易懂，更能給人留下印象呢？
項(xiàng)目過(guò)程
一開(kāi)始提出這個(gè)需求，我們打算是以全html動(dòng)畫(huà)來(lái)實(shí)現(xiàn)設(shè)計(jì)，不僅在流程上能使原本的ppt形式更易讀美觀，也能在技術(shù)上有一些新的嘗試。整個(gè)流程以工廠流水線為概念，加入許多互動(dòng)的操作與小動(dòng)畫(huà)效果以求讓瀏覽者能夠?qū)γ總€(gè)步驟更加明確。
但由于定下的這個(gè)方向過(guò)于模糊偏向非功能。設(shè)計(jì)稿初稿出來(lái)后有眾多的問(wèn)題：其中閱讀時(shí)間過(guò)多，反而相交起直觀的文字ppt大大提升了閱讀門(mén)檻。職務(wù)角色太過(guò)抽象，過(guò)多的、區(qū)分不明顯的顏色也造成視覺(jué)上的較為混亂，僅靠人物身上的角色的名字和一些小物件也造成各自之間的區(qū)分辨識(shí)度過(guò)弱，花了大部分時(shí)間在場(chǎng)景與動(dòng)畫(huà)轉(zhuǎn)換的設(shè)計(jì)反而輕視了規(guī)范中最重要的步驟內(nèi)容的展示。這與圖形化流程規(guī)范來(lái)讓觀者更好理解整個(gè)工作流程的目的相悖，而且按照這種形式來(lái)進(jìn)行繪制，十二個(gè)規(guī)范是一個(gè)相當(dāng)巨大的工作量，若后續(xù)規(guī)范內(nèi)容有修改，維護(hù)量也過(guò)大。于是我們?cè)谟懻撨^(guò)后，對(duì)流程圖各個(gè)方面進(jìn)行了調(diào)整。首先我們重新審視了各個(gè)人物角色，收集并觀察各個(gè)崗位人員，提煉其較為典型的特征。先由最了解的角色視覺(jué)設(shè)計(jì)師入手：愛(ài)穿黑色系的簡(jiǎn)練的衣服、較為獨(dú)特的圓框眼鏡、常用工具photoshop等等。去掉帶有情感色彩的五官表情，使每個(gè)角色不會(huì)有過(guò)多主觀傾向。以簡(jiǎn)潔的元素來(lái)表現(xiàn)差異性。
經(jīng)過(guò)多次調(diào)整，最終的形象得到了較普遍的認(rèn)可，于是將全部角色進(jìn)行重繪。每個(gè)角色用相同的人偶模版，再對(duì)各個(gè)角色以著裝造型來(lái)區(qū)分角色。
調(diào)整后的人物特征較為明顯，區(qū)分度也有了很大提升。更為具體形象化使得代入感也有了加強(qiáng)，與此同時(shí)，舍棄在流程主軸中使用人物形象而用文字來(lái)描述。人物形象僅于頁(yè)面的頭部展示以及在目錄等頁(yè)面使用。接著流程的主軸也進(jìn)行了大量調(diào)整，去掉或者弱化多余的細(xì)節(jié)，強(qiáng)化重要信息。務(wù)求其信息傳達(dá)的的清晰明確。同時(shí)將流程歸為四大品類，將每一類都置入一個(gè)有趣的常見(jiàn)的形式（公路、河道、大富翁、加工流水線）。其中的每個(gè)流程軌道都做了一些小差異，盡量在成本無(wú)需過(guò)多付出上減少視覺(jué)疲勞。軌道主體也采用低飽和度的顏色，避免分散瀏覽者對(duì)關(guān)鍵節(jié)點(diǎn)信息的閱讀。
到了這一步，流程的視覺(jué)上似乎還是略顯單薄缺少趣味感，于是截取其中較為重要的步驟節(jié)點(diǎn)進(jìn)行圖標(biāo)的繪制。由于圖標(biāo)內(nèi)容各不相同，直接放置于流程中會(huì)顯得相當(dāng)凌亂所以加入了同樣的深灰圓底與長(zhǎng)投影。由于步驟圖標(biāo)是流程中的關(guān)鍵內(nèi)容，還加入了四幀的動(dòng)畫(huà)，使之更為生動(dòng)。
最終成品的實(shí)現(xiàn)：不為形式而設(shè)計(jì)而是從功能上出發(fā)來(lái)設(shè)計(jì)并加入動(dòng)畫(huà)，除了主要的功能區(qū)塊，其他的裝飾元素盡量簡(jiǎn)潔簡(jiǎn)單。
項(xiàng)目總結(jié)
整個(gè)項(xiàng)目經(jīng)歷了初稿的全部推翻——重制——減法——加法的過(guò)程，最后才得到較為接近我們初衷的效果。期間花費(fèi)了大量的時(shí)間來(lái)討論與修改，我也因此從中得到不少經(jīng)驗(yàn)。相比簡(jiǎn)單的日常需求，這種功能優(yōu)先、會(huì)長(zhǎng)期使用、較為復(fù)雜的項(xiàng)目，在開(kāi)始設(shè)計(jì)前應(yīng)該進(jìn)行更為徹底的思考與判斷，以其使用群體觀感出發(fā)，以保證其功能的良好實(shí)現(xiàn)的情況下轉(zhuǎn)換為設(shè)計(jì)語(yǔ)言，才談得上是好的設(shè)計(jì)。就如同冰淇淋一般，著色劑造型等包裝手段固然奪人眼球，但更重要的是制作其的配方好不好吃。比起什么都不去做，制造“冰淇淋”的意圖是好的，但要制造出“好看又美味的冰淇淋”才真正能符合用戶需求。
本文來(lái)自TGideas-騰訊游戲官方設(shè)計(jì)團(tuán)隊(duì) 轉(zhuǎn)載請(qǐng)注明
聯(lián)系客服
