民初思韻網

加入收藏   設為首頁
選擇語言   簡體中文
你好,請 登陸 或 注冊
首頁 人文思韻 傳奇人物 歷史思潮 時代作品 話題討論 國民思韻 民初捐助 賬戶管理
  搜索  
    人文精神 >>> 技術話題—商業文明的嶄新時代
字體    

導演別人的聯想 —— 圖形化設計- 內涵容不得牽強
導演別人的聯想 —— 圖形化設計- 內涵容不得牽強
cdc.tencent.com      阅读简体中文版

  聯想,不是說 lenovo 哦~ 是說人們的一種心理活動,這種心理活動讓人對世界有了自然的理解和表達。

  通過對自然界事物的理解、抽象演化,人們創造出很多圖形、文字來表達各種意思,向他人傳遞信息。

  人們不斷積累經驗,聯想經歷的特點不斷被深化、強化,促使表達者的設計活動不斷發展。

  到如今,我們已可以明確運用前人總結的聯想規律(相似聯想、接近聯想、對比聯想、因果聯想)來施展設計,向我們的用戶傳達各種信息。

  可是……

  別人心中的聯想活動,我們有多大的控制能力呢?

  我們可以有,我們必須有!

  本文以下將分享三個問題:

  什么東西讓人們聯想?  圖形化設計的元素(磚瓦)

  用什么方法導演人們的聯想?  設計過程(手藝)

  拿什么樣的精神來導演聯想?  設計原則(心法)

  圖形化設計 的“親戚”很多,如信息圖表設計、信息可視化設計、視覺傳達設計等等。

  我們可以說他們都與圖有關,與意思、數據或邏輯有關。歸根結底  他們都是要把信息直觀、準確、快速、清晰的傳達給人們,以獲得理解和共鳴,甚至快速的被記住。

  為了讓人們能真的依著導演去聯想,正確理解我們的意思,我們需要研究認識以下內容:

  我們通常用不同的視覺元素,代表不同的數據和信息維度,將這些帶有意義的元素組織在圖中,通過控制一個或多個元素變量,來體現數據信息間的關聯。

  不同的信息適合不同的圖形化設計

  1. 簡單的目標 — 圖像表征

  2. 簡單的意思

  就可以像上文中例 1 和例 2 那樣,用基礎的柱狀圖(或餅狀圖等)、簡潔的圖示,就可以解決問題了。

  3. 較復雜的邏輯或內容

  如表達我們這里“設計師的一天” ( 原圖過大,這里縮小了一點放上來)

  哈哈~ 能列出這里總共說了哪些信息點么?

  ……

  總之,各種元素的搭配和利用,要根據實際需要來統籌安排,要做到每個細節都是有道理的合理的安排。

  1. 我們第一眼讓用戶看到的線索,一定要清晰凸出。

  要放進一張圖的信息,至少會以一個貫穿整體的線索關聯。這條線索很多時候也是這個圖的主題。信息的組織  就要靠這條線索了。

  如“設計師的一天”,線索就是自始至終一天的時間,所以我就按照鐘表的刻度來對應每個時段會做的事,還標出了四個時間關鍵點。

  說到這兒,要講一個小案例:

  這是某好友“與我的故事”模塊,旨在告訴我該好友與我有什么共同點,當然實際是希望制造完善資料和互動的機會。

  大家也可以體驗一下,它藏在 QQ2011 正式版下,對方的資料卡窗口中。

  要說的是,最初的方案不是彩虹橋,是一棵友誼樹,請看:

  設計師最初的想法是兩好友間的友誼樹,樹根上抽象伸展出根系,每個根枝的末端指向一個屬性,寓意為養分供給著友誼樹成長。當屬性相同時根系顯綠色,當屬性不同時根系灰顯。兩人相同的屬性越多寓意養分越多、樹根綠的越多,樹木就越茂盛。

  初期交互過程中的演化:

  越來越規矩、簡單。

  但為了組織一堆數據而抽象出來的“友誼樹”卻愈發弱小了。設定的最弱到最強的表現是:

  最弱的時候是只有兩片葉子的芽,卻要拖著好大一坨“樹根”。

  按照交互的方案表達,線條簡潔,顏色單純,很平的感覺比較輕量。

  但是灰色與綠色的根摻雜在一起并不好辨識,而且當灰色過多時  無法很好收斂可能給用戶造成的負面情緒。

  更讓人緊張的是,視覺處理過程中,為了避免不和諧的頁面分隔,去掉了“地平線”的感覺,分隔地上、地下的界限已不在,小芽就被膨脹擴張的根條淹沒,整體的表達不再淺顯貼切。

  此時呈現出來的結果,已讓人較難聯想到圖的線索,和背后真正的意思了……

  后來立意改變,采用彩虹橋寓意兩人的友誼,向天空升起一個個屬性泡泡。相同的屬性越多,彩虹橋跨過的弧度越大。未跨過的部分漸變至偏白的低飽和度,如此一來,主體目標夠大,屬性相同的程度很容易辨識,頁面的色彩也飽滿了起來,并且規避了不和諧的頁面分割,算是比較成功的一次優化了。

  回過頭來總結:

  主題的線索,是人們對號入座展開聯想理解的開始。如果別人連線索也就是你這些信息的組織方式都沒看懂,那就沒辦法聯想到你圖中的邏輯,這個圖就白做了。

  我們為了將一堆繁雜信息簡潔、清楚的表達,把他們按一個線索組織起來。

  有時會為這個線索凝練出一個主體(比如上面所說的“友誼樹”、“彩虹橋”),來承載這些信息的邏輯關系。

  所凝練之主體,是第一個要站出來的,從它開始,用戶才在觀察這些信息與它的關聯性中,更好去理解信息和邏輯。

  如果為了凸出信息而凸出信息,那還凝練出來這個主體干什么呢?

  所以說,聯想的過程需要順序,需要導演!

  2. 我們安排的“劇情”,一定要符合人們的認知理解和客觀規律,接近真實生活經驗。

  比如,關于對顏色的感覺:

  顏色在應用的時候,是運用人們的心理感知規律,來加強人們的聯想和理解。

  如橙色是暖的對應到熱的活躍的;

  藍色是冷的、平靜的,對應到不活躍的。

  那么橙色到藍色的過渡漸變,自然成為人們的一個理解思路,他會很自覺的感受到你的意思。

  比如,關于事情發展的順序:

  在說明流程的時候,假如我們圖中的主角是一個水龍頭,用它來串聯流程,那就是

  從把手開始,依次經過旋轉點、龍頭、出水口,最終走到流出的水滴。

  不可能倒著來,否則不符合客觀事實的邏輯順序。

  比如,關于一種現狀的延續性聯想

  在 QQ 相關設計的實際項目中,我們通常是將某用戶個人的信息獨立呈現出來,但我們又往往打算讓用戶與其他人的圖表碰到一起比較,然后讓他們感受到其中的不一樣  和樂趣。

  那就有一個問題了—— 如何在用戶沒有看見其他人的圖表時,就能充分感受到他自己的圖表是在什么階段或檔次呢?不然怎么讓他主動去比較?

  來看案例 :

  這是 QQ 概況圖形化表達設計中的一個過程方案(最終飛機掉了)。

  我們的本意是給“用戶 QQ 的價值”一個具象的寄托,同時滿足用戶間的強弱對比表達。

  一開始我想用一個瓜果籃表達,價值越高則瓜果種類越豐富、數量越多,這樣用戶看到自己籃子里的東西  會相對準確的感覺到自己的 QQ 是什么情況,有沒有讓他興奮。

  但是這個想法品牌延續性未顧及到,實現也有困難,不便后臺繪圖,如果純貼圖的話,視覺設計師的工作量也會徒然增大不少,因此放棄了。

  后來想到不同體格的動物 ——覺得與我們的品牌關聯性太差,當用戶僅看到自己的圖表時,獨立的動物之間在狀態上沒有自然的延續,讓用戶較難想象與其他人有很明確的可比性。

  想到不同大小的鳥(就是上面那個) —— 在物種上保持了一致,形成了形象間一定的延續性,但還是與我們的品牌關聯性太差。

  最終決定用不同年齡階段的 QQ 企鵝 —— 總算緊扣上了我們自己的品牌,并且從幼兒到青壯年間的狀態過渡具有很好的延續性、強關聯,當用戶僅看到自己的圖表時,不管呈現何種時期的企鵝,他都能聯想到對應的狀態。并且很容易延展的想到還有什么樣的狀態,他要做些什么才可以提升自己 QQ 的總體價值。

  視覺同學所繪的小企鵝初稿:

  總之,在邏輯表達的任何一個細節  都要盡量的靠近實事。這就是說,圖形化設計的內涵容不得牽強。

  結語:

  在目前的工作中,我們還沒有碰到非常復雜、龐大的數據系統需要對其做可視化設計表達。

  之前接觸過的項目中,id.qq.com 新版首頁的個人 QQ 概況、好友視圖統計(年齡分布、性別分布、地域分布),客戶端好友資料卡“與我的故事”(好友同屬性)等等,也都是表達較簡單的信息組。(說實話這些需求處理的都還比較粗淺,不過首先,簡單管用就好~)設計過程中我們走過彎路,有過糾結,此處就謹作為前車之鑒,以供后來者辨析參考。

  以上文中給您提供了一些關鍵詞,不指望一篇文章就能催化出一批大牛。

  想了解更多您就先百度百科湊合一下,再慢慢拓寬、深入,搜尋您渴求的知識。

  最后,期待您的厚積薄發!

  over ^^

  附題外冷笑話一枚:

  當我用“聯想”一詞去搜索我需要的圖片素材時……我崩潰了。

2012-03-07 21:05

歡迎訂閱我們的微信公眾賬號!
春秋茶館訂閱號
微信號 season-tea(春秋茶館)
每天分享一篇科技/遊戲/人文類的資訊,點綴生活,啟迪思想,探討古典韻味。
  清末民初歷史人物  民初人物
高文費而隱 古德潔無華
楊霽園先生是民國時期寧波的一位大儒,一生致力于教育、述著,著作宏豐,在國學、文學等方面成就卓著,更兼他品行方端、至誠至孝,自1940年去世后,鄉人及門生一直追思不息。但楊....
傳奇人物傳記 風華絕代 物華天寶
此間選取古往今來傳奇人物的傳記與軼事,事不分大小,趣味為先,立意新穎,足以激越古今。
資助民初精神網
        回頂部     寫評論

[新一篇] 牛頓的一生
 
評論集
暫無評論!
發表評論歡迎你的評論
昵稱:     登陸  註冊
主頁:  
郵箱:  (僅管理員可見)

驗證:   验证码(不區分大小寫)  
© 2011   民初思韻網-清末民初傳奇時代的發現與復興   版權所有   加入收藏    設為首頁    聯繫我們    1616導航