• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】騰訊遊戲流程規範信息可視化項目實戰




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

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自優設的設計理論類文章,寫教學的作者是佚名,感謝佚名提供設計理論的實作教學。

    教學大綱:

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


    設計理論教學開始

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

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

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

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

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

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

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

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

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

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

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

    項目背景

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

    項目過程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    項目總結

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

    — —

    文章永久連結為: 騰訊遊戲流程規範信息可視化項目實戰