白社會視覺設計誕生記 -網上推廣


 

說實話,我還真沒在公共場合真正好好說說白社會誕生的過程,她的樣子是如何被我們一步一步勾勒出來的。這次,借助UED Blog的即將開張,算是正式的公布出來吧。

在接到白社會設計任務的時候,當時的SNS漫天飛舞的設計樣式都是facebook、開心、校內的樣式,那時,我們就想,如何突破?如何脫離那隨處可見的信息架構、頁面布局模式以及視覺元素,讓人起碼在第一感受上不覺得這是一個市面上千篇一律的SNS的皮。

這其中,我們嘗試了很多的創新,情境故事般的界面,蘋果的Dock似的導航條,很炫很酷的交互方式,看著簡直就像電影《鋼鐵俠》一般高科技的界面。但一段時間的發散后,我們發現,我們走在一條誤區上,視覺設計不是那些表面光鮮亮麗為了炫耀技法的工具,視覺設計應該是通過適合的手法,更好的滿足用戶的需求,傳遞信息。所謂視覺傳達,是在用戶和信息之間搭建的一座橋梁,幫助用戶快速、高效、愉快的接受信息,而不是獨自一個人翩翩起舞,無視其它。

于此同時,白社會的虛擬用戶角色設計也在如火如荼的展開之中,作為參與者,我們也想到了既然虛擬用戶角色可以幫助產品設計和交互設計更準確的定位用戶需求,那么是不是也能幫助視覺設計在茫茫的大海中尋找目標用戶的視覺喜好,滿足他們的視覺品味,更有針對性的為他們設計呢?沒錯!隨即我們便開始啟動了一個叫做“虛擬用戶視覺模型”的項目,為的就是通過模擬目標用戶的視覺品味和喜好,將設計風格準確定位。無論是對產品的顏色質地風格,還是對其中文字風格,APP小插件的設計,都能具有一定的指導作用。

我們是這樣定義一個視覺模型的:
1. 用戶角色視覺模型是在虛擬用戶角色卡片的基礎上建立起來的,是對用戶角色的一個視覺填充。
2. 視覺模型只在用一系列圖片說話,進一步豐富用戶角色,使其更加直觀的得到展現。
3. 通過每張圖片所包含的顏色信息、質感表達和氛圍烘托,逐漸摸索出用戶角色在視覺放面的喜好。
4. 視覺模型會隨著人物角色信息的不斷完善而完善,形成一個持續填充的庫。
5. 模型中也會存在一些主觀的意識形態,根據一些建議意見,持續進行修訂完善。

以下是我們的視覺模型流程圖:

 

在這個視覺模型庫中,我們逐漸找到了感覺。我們的全部視覺元素不是來自于設計師的個人偏好,不是老板的喜好,不來自于任何人的個人主義,而是全部來自目標用戶的喜好,他們的期望。

 

在經過了視覺模型的幫助之后,我們逐漸找到了屬于白社會目標人群的一套視覺表達方式,并開始了一系列的設計嘗試。
首先,我們發現淡雅的色彩能讓白領上班族舒張壓力、精神放松,既然白社會是一個白領“生活在別處”的地方,那首先在視覺傳遞上要讓人感到輕松愉悅,以及一些貼心的溫暖。在第一版草稿設計的時候,我們嘗試用一些小清新的顏色來傳遞這種感覺,甚至視覺設計師提出了一些像是實時天氣、簡單輕松的小功能的想法豐富在頁面的整體調調中,同時對一些頁面的布局也有了不小的改變,比如一句話的位置,導航條的位置等。

 


arrow
arrow
    創作者介紹
    創作者 pagepe 的頭像
    pagepe

    pagepe的部落格

    pagepe 發表在 痞客邦 留言(0) 人氣()