少改稿秘訣!如何確定一個產(chǎn)品的主視覺風(fēng)格?(附實戰(zhàn)演示)

0 評論 18323 瀏覽 110 收藏 11 分鐘

關(guān)于一個APP,或者是一個互聯(lián)網(wǎng)產(chǎn)品的視覺風(fēng)格和主題顏色是怎么確定的,其實是有一套系統(tǒng)方法論的。這個方法論叫做:情緒板(Mood Board)。下面由網(wǎng)易設(shè)計師來解釋情緒板的運(yùn)用方法,附實戰(zhàn)演示,特別實用!

什么是情緒板?

視覺設(shè)計師可能會花很長時間產(chǎn)出了精致的,高品質(zhì)的設(shè)計,得到的卻是用戶或客戶的一句話:“這不是我想要的!”一般來說,在沒有實物前,人們并不清楚自己要的是什么。但是在看到成品后,他們可以輕易地判斷是否符合自己的喜好或期望。因此,在為錯誤的設(shè)計方向投入過多前,了解用戶對風(fēng)格的期望和需求,從而確定整個網(wǎng)站或產(chǎn)品的視覺風(fēng)格是有必要的。

情緒板是一種啟發(fā)式和探索性的方法,可以對如下問題進(jìn)行研究:圖像風(fēng)格(photography style),色彩(color palettes),文字排版(typography),圖案(pattern)以及整體外觀以及感覺。視覺設(shè)計和人的情緒緊密相連,不同的設(shè)計總是會引發(fā)不同的情感。

此外,情緒板也可以作為可視化的溝通工具,快速地向他人傳達(dá)設(shè)計師想要表達(dá)的整體“感覺(feel)”。

如何創(chuàng)建情緒板?

首先,需要明確體驗關(guān)鍵詞,在一個設(shè)計項目中,通過進(jìn)行涉眾訪談和用戶研究,研究,設(shè)計人員創(chuàng)建了產(chǎn)品的人物角色,基于人物角色,綜合用戶研究結(jié)果以及品牌/營銷文檔,可以得出體驗關(guān)鍵詞(Experience Keywords)。當(dāng)人物角色和體驗關(guān)鍵詞都確定后,可以通過使用情緒板來探索網(wǎng)站或產(chǎn)品的視覺風(fēng)格,并作為和內(nèi)部人員進(jìn)行早期溝通的基礎(chǔ)。

sq20160122 (2)

體驗關(guān)鍵詞(Experience Keywords)舉例:

sq20160122 (3)

其次,應(yīng)基于時間限制,個人工作習(xí)慣以及用戶的需求對情緒板的呈現(xiàn)方式進(jìn)行選擇。一般來說,可以從實體/數(shù)碼,以及拼貼/精致模板兩個維度來區(qū)分情緒板的呈現(xiàn)方式。

A. 拼貼畫

這是一種最簡單地創(chuàng)建情緒板的方式。使用這一模式,無需考慮諸如字體和特定顏色之類的細(xì)節(jié)問題。找到那些可以激發(fā)靈感的素材,其中可能包含那些傳達(dá)相似風(fēng)格和情緒的網(wǎng)站的截圖。這種方式快速,有趣,但是,具有一定的含混性。

B.?精致化的模板

模板可用來展示不同的元素。如:

jx20160122

在這種形式的情緒板中,界定了配色,字體處理(如標(biāo)題和副標(biāo)題),按鈕風(fēng)格甚至是圖片風(fēng)格。標(biāo)準(zhǔn)模板可以讓人們聚焦于特征化元素。

一般來說,情緒板可以以實體的方式呈現(xiàn),也可以以數(shù)碼方式呈現(xiàn)的,考慮到成本,時間等因素,我們多選用數(shù)碼的方式,因為這種方式更為設(shè)計師提供了更靈活,多樣的選擇。

第三步是選擇素材創(chuàng)建情緒板,這是一個迭代的過程。

gjc20160122

如何使用情緒板?

在使用情緒板過程中,體驗關(guān)鍵詞的作用相當(dāng)重要。這里首先要說明下什么是體驗關(guān)鍵詞,可以參考以下的PPT截圖(此PPT為UCD CHINA2009年會上工作坊所用的PPT)。

jt20160122

獲得體驗關(guān)鍵詞是情緒板的第一項工作,一般從內(nèi)部涉眾(相關(guān)的產(chǎn)品和設(shè)計人員)及外部用戶兩種渠道獲得。

cw20160122

自涉眾訪談和用戶研究中,可以收集大量的體驗詞樣本。在獲得這些樣本后,可以內(nèi)部進(jìn)行討論,通過歸納整理精簡為幾個關(guān)鍵詞。

wqnmb20160122 (1)

體驗關(guān)鍵詞提取好之后,可以在內(nèi)部使用情緒板(如果受限于資源或公司的保密政策),也可以招募用戶來完成。

在內(nèi)部,由視覺設(shè)計師來完成,要注意以下幾點:

  1. 需要制作3套以上情緒板供評審。
  2. 制作的過程是個迭代的過程,需要內(nèi)部團(tuán)隊慎重討論決定。
  3. 情緒板的形式可以有多種,如拼貼畫或精致化的模板(二者的區(qū)別在文檔中有)

wqnmb20160122 (2)

如果招募外部用戶,則要注意以下幾點:

  1. 主持人需要不斷詢問被訪者,去探究選擇圖片背后的原因:“為什么你會選擇這張圖片?能否和大家分享一下你的想法?”
  2. 注意差異的挖掘。注意挖掘被訪者之間的觀點差異,一百個人心中有一百個哈雷姆特,同一張圖片對于不同被訪者可能會有不同的解釋,如果好幾位被訪者同時選擇一張圖片代表他們各自對某個品牌的感覺,注意詢問他們選擇這張圖片的原因是否一樣。

wqnmb20160122 (3)

可以呈現(xiàn)給用戶的圖片有限的,因此,在挑選圖片時,需要內(nèi)部研究和設(shè)計人員協(xié)同,根據(jù)視覺設(shè)計所需要考慮的幾個維度結(jié)合已有的關(guān)鍵詞進(jìn)行圖片的篩選。一般來說,在將圖片呈現(xiàn)給用戶之前,內(nèi)部人員已經(jīng)明確了每一張圖片所代表的意義,在用戶選擇和訪談結(jié)束后,兩方面的數(shù)據(jù)綜合分析才能獲得最終的結(jié)果。

wqnmb20160122 (4)

以上是操作情緒板的一些技巧的總結(jié)。

OK,那么現(xiàn)在我們已經(jīng)知道了情緒板的運(yùn)用方法,就來馬上動手試試。(以下內(nèi)容僅作演示,可能略顯粗糙)

首先,我給自己定義一個主題:外賣APP。

關(guān)鍵詞提?。好朗?快速 送餐 打電話 (越多越好)

根據(jù)關(guān)鍵詞尋找的一些圖片(色系盡量豐富,風(fēng)格盡量多樣):

然后根據(jù)查找的圖片提取出用色:

當(dāng)然,現(xiàn)在提取出的顏色是雜亂的,且不具代表性。因此我做了第一次顏色篩選,提取出了最高頻的16種顏色。

接著是第二次顏色篩選,主要去掉競品色(美團(tuán)外賣、餓了么、百度外賣、達(dá)達(dá)、派樂趣、點評、京東到家、愛鮮蜂等)和臟色。當(dāng)然去掉之后發(fā)現(xiàn)基本沒什么可用的顏色了,因此還有一個問題就是,如果競品色不足以影響到我們的品牌色的話(在可控范圍內(nèi)),還是可以采用的。具體這個決策過程需要大家一起討論決定。

篩選出以下顏色:

現(xiàn)在我們基本可以控制可選擇的主題色了,如果人力足夠的話,建議多做幾個版本以查看具體使用效果。當(dāng)然,也可能是老板拍板來決定。

其他的視覺風(fēng)格,如圖像風(fēng)格、文字排版等也可以在這個調(diào)研基礎(chǔ)上進(jìn)行確定。

最后,提供一些在線調(diào)色網(wǎng)站的資源給大家,可以幫助我們?yōu)榍榫w板挑選圖片及在圖片中提取色彩。

Adobe Kuler

Colr.org

Colour Lovers

4096 Color Wheels

Color Schemer

Color Palette Generator

Web 2.0 Color Palette

Color Scheme Generator

ColorJack

Color Harmony

Color Blender

Color Schemer Online v2

 

作者:Joline

原文地址:http://uedc.163.com/402.html

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!