騰訊遊戲流程規範資訊可視化項目實戰

來源:互聯網
上載者:User

   比起白開水,冰淇淋明顯是比較好吃的嘛(除非你對甜食有著強烈的抗拒情緒)。那麼對於你的眼睛來說,自然也是比較想要”吃冰淇淋”的咯!

  近年來各種資料視覺效果、資訊可視化圖的興起,科普知識、研究報告、資訊圖表擺脫以往單一的資料文字內容,不再冷冰冰而有了自己的”味道”。這些有趣的閱讀體驗不正是口味超豐富的”冰淇淋”們嗎!下面先一起來欣賞一下這些美好的例子吧。

  以上是一位設計師以自己節制飲食規劃一周為主題所拍攝的海報,原本不及顏色那麼鮮美動人垃圾食品的樸素的健康食品,在設計師的巧思下變得可愛清新,熱量蛋白質等資料也不再乾巴巴而成為設計的美好元素之一。這可比那些市面上說教式的健康飲食菜譜讓人有胃口多了,是不是讓觀者更有動力扔掉垃圾食品們,邁向健康的新生活呢~

  以上是經典字型Helvatica的一組時間軸圖表,設計師除了清晰的展示這個字型的曆史之外,不忘用強烈黑白紅凝造出與字型本身”優雅、經典”相符的氣質。

  以上是一組Mercedes-Benz 的廣告。作為大家耳熟能詳的豪車品牌,這組廣告用資訊可視化的形式,將一些大家略知一二的常識圖形化誇張化,畫面迷人的同時也更具說服力。通過間接的手段去宣傳品牌概念,提升品牌的豐富內涵形象。圖表內容中使用的文字都需要非常”專業、嚴謹”,並不是每個人都能從中得到有效資訊。反觀圖形化後的內容,文字們紛紛有了表情,閱讀門檻大大降低。不再是看過即忘的填鴨式資訊。

  項目背景

  參與我們的各種需求的團隊外部人員眾多,有較為明確的工作流程規範來讓各位小夥伴瞭解到自己在項目中參與的部分對於提升效率是非常有必要的。一般的規範內容都是以純文字內容來表述,對於我這種一目十行的人當然就是過目就忘了,等到需要使用的時候又要翻出來再次閱讀,效率既低又十分麻煩。如果將其轉換為映像內容,閱讀起來是否會更加直觀易懂,更能給人留下印象呢?

  項目過程

  一開始提出這個需求,我們打算是以全html動畫來實現設計,不僅在流程上能使原本的ppt形式更易讀美觀,也能在技術上有一些新的嘗試。整個流程以工廠流水線為概念,加入許多互動的操作與小動畫效果以求讓瀏覽者能夠對每個步驟更加明確。

  但由於定下的這個方向過於模糊偏向非功能。設計稿初稿出來後有眾多的問題:其中閱讀時間過多,反而相交起直觀的文字ppt大大提升了閱讀門檻。職務角色太過抽象,過多的、區分不明顯的顏色也造成視覺上的較為混亂,僅靠人物身上的角色的名字和一些小物件也造成各自之間的區分辨識度過弱,花了大部分時間在情境與動畫轉換的設計反而輕視了規範中最重要的步驟內容的展示。這與圖形化流程規範來讓觀者更好理解整個工作流程的目的相悖,而且按照這種形式來進行繪製,十二個規範是一個相當巨大的工作量,若後續規範內容有修改,維護量也過大。於是我們在討論過後,對流程圖各個方面進行了調整。首先我們重新審視了各個人物角色,收集並觀察各個崗位人員,提煉其較為典型的特徵。先由最瞭解的角色視覺設計師入手:愛穿黑色系的簡練的衣服、較為獨特的圓框眼鏡、常用工具photoshop等等。去掉帶有情感色彩的五官表情,使每個角色不會有過多主觀傾向。以簡潔的元素來表現差異性。

  經過多次調整,最終的形象得到了較普遍的認可,於是將全部角色進行重繪。每個角色用相同的人偶模版,再對各個角色以著裝造型來區分角色。

  調整後的人物特徵較為明顯,區分度也有了很大提升。更為具體形象化使得代入感也有了加強,與此同時,捨棄在流程主軸中使用人物形象而用文字來描述。人物形象僅於頁面的頭部展示以及在目錄等頁面使用。接著流程的主軸也進行了大量調整,去掉或者弱化多餘的細節,強化重要訊息。務求其資訊傳達的的清晰明確。同時將流程歸為四大品類,將每一類都置入一個有趣的常見的形式(公路、河道、大富翁、加工流水線)。其中的每個流程軌道都做了一些小差異,盡量在成本無需過多付出上減少視覺疲勞。軌道主體也採用低飽和度的顏色,避免分散瀏覽者對關鍵節點資訊的閱讀。

  到了這一步,流程的視覺上似乎還是略顯單薄缺少趣味感,於是截取其中較為重要的步驟節點進行表徵圖的繪製。由於表徵圖內容各不相同,直接放置於流程中會顯得相當淩亂所以加入了同樣的深灰圓底與長投影。由於步驟表徵圖是流程中的關鍵內容,還加入了四幀的動畫,使之更為生動。

  最終成品的實現:不為形式而設計而是從功能上出發來設計並加入動畫,除了主要的功能區塊,其他的裝飾元素盡量簡潔簡單。

  項目總結

  整個項目經曆了初稿的全部推翻——重製——減法——加法的過程,最後才得到較為接近我們初衷的效果。期間花費了大量的時間來討論與修改,我也因此從中得到不少經驗。相比簡單的日常需求,這種功能優先、會長期使用、較為複雜的項目,在開始設計前應該進行更為徹底的思考與判斷,以其使用群體觀感出發,以保證其功能的良好實現的情況下轉換為設計語言,才談得上是好的設計。就如同冰淇淋一般,著色劑造型等封裝手段固然奪人眼球,但更重要的是製作其的配方好不好吃。比起什麼都不去做,製造”冰淇淋”的意圖是好的,但要製造出“好看又美味的冰淇淋”才真正能符合使用者需求。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。