產品的主視覺風格確定

01-29

轉自網路作者：nihongyun

Joline：關於一個APP，或者是一個互聯網產品的視覺風格和主題顏色是怎麼確定的，其實是有一套系統方法論的。這個方法論叫做：情緒板（Mood Board）。下面由網易設計師來解釋情緒板的運用方法，附實戰演示，特別實用！

什麼是情緒板？

視覺設計師可能會花很長時間產出了精緻的，高品質的設計，得到的卻是用戶或客戶的一句話：「這不是我想要的！」一般來說，在沒有實物前，人們並不清楚自己要的是什麼。但是在看到成品後，他們可以輕易地判斷是否符合自己的喜好或期望。因此，在為錯誤的設計方向投入過多前，了解用戶對風格的期望和需求，從而確定整個網站或產品的視覺風格是有必要的。

情緒板是一種啟發式和探索性的方法，可以對如下問題進行研究：圖像風格（photography style），色彩（color palettes），文字排版（typography），圖案（pattern）以及整體外觀以及感覺。視覺設計和人的情緒緊密相連，不同的設計總是會引發不同的情感。

此外，情緒板也可以作為可視化的溝通工具，快速地向他人傳達設計師想要表達的整體「感覺（feel）」。

如何創建情緒板？

首先，需要明確體驗關鍵詞，在一個設計項目中，通過進行涉眾訪談和用戶研究，研究，設計人員創建了產品的人物角色，基於人物角色，綜合用戶研究結果以及品牌/營銷文檔，可以得出體驗關鍵詞（Experience Keywords）。當人物角色和體驗關鍵詞都確定後，可以通過使用情緒板來探索網站或產品的視覺風格，並作為和內部人員進行早期溝通的基礎。

體驗關鍵詞（Experience Keywords）舉例：

其次，應基於時間限制，個人工作習慣以及用戶的需求對情緒板的呈現方式進行選擇。一般來說，可以從實體/數碼，以及拼貼/精緻模板兩個維度來區分情緒板的呈現方式。

A. 拼貼畫

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

B. 精緻化的模板

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

在這種形式的情緒板中，界定了配色，字體處理（如標題和副標題），按鈕風格甚至是圖片風格。標準模板可以讓人們聚焦於特徵化元素。

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

第三步是選擇素材創建情緒板，這是一個迭代的過程。

在這種形式的情緒板中，界定了配色，字體處理（如標題和副標題），按鈕風格甚至是圖片風格。標準模板可以讓人們聚焦於特徵化元素。

第三步是選擇素材創建情緒板，這是一個迭代的過程。

如何使用情緒板？

在使用情緒板過程中，體驗關鍵詞的作用相當重要。這裡首先要說明下什麼是體驗關鍵詞，可以參考以下的PPT截圖（此PPT為UCD CHINA2009年會上工作坊所用的PPT）。

獲得體驗關鍵詞是情緒板的第一項工作，一般從內部涉眾（相關的產品和設計人員）及外部用戶兩種渠道獲得。

自涉眾訪談和用戶研究中，可以收集大量的體驗詞樣本。在獲得這些樣本後，可以內部進行討論，通過歸納整理精簡為幾個關鍵詞。

體驗關鍵詞提取好之後，可以在內部使用情緒板（如果受限於資源或公司的保密政策），也可以招募用戶來完成。

在內部，由視覺設計師來完成，要注意以下幾點：

需要製作3套以上情緒板供評審。
製作的過程是個迭代的過程，需要內部團隊慎重討論決定。
情緒板的形式可以有多種，如拼貼畫或精緻化的模板（二者的區別在文檔中
如果招募外部用戶，則要注意以下幾點：
1. 主持人需要不斷詢問被訪者，去探究選擇圖片背後的原因：「為什麼你會選擇這張圖片？能否和大家分享一下你的想法？」
2. 注意差異的挖掘。注意挖掘被訪者之間的觀點差異，一百個人心中有一百個哈雷姆特，同一張圖片對於不同被訪者可能會有不同的解釋，如果好幾位被訪者同時選擇一張圖片代表他們各自對某個品牌的感覺，注意詢問他們選擇這張圖片的原因是否一樣。
  可以呈現給用戶的圖片有限的，因此，在挑選圖片時，需要內部研究和設計人員協同，根據視覺設計所需要考慮的幾個維度結合已有的關鍵詞進行圖片的篩選。一般來說，在將圖片呈現給用戶之前，內部人員已經明確了每一張圖片所代表的意義，在用戶選擇和訪談結束後，兩方面的數據綜合分析才能獲得最終的結果。
  以上是操作情緒板的一些技巧的總結。
  OK，那麼現在我們已經知道了情緒板的運用方法，就來馬上動手試試。（以下內容僅作演示，可能略顯粗糙）
  首先，我給自己定義一個主題：外賣APP。
  關鍵詞提取：美食快速送餐打電話（越多越好）
  根據關鍵詞尋找的一些圖片（色系盡量豐富，風格盡量多樣）：
  
  然後根據查找的圖片提取出用色：
  當然，現在提取出的顏色是雜亂的，且不具代表性。因此我做了第一次顏色篩選，提取出了最高頻的16種顏色。
  接著是第二次顏色篩選，主要去掉競品色（美團外賣、餓了么、百度外賣、達達、派樂趣、點評、京東到家、愛鮮蜂等）和臟色。當然去掉之後發現基本沒什麼可用的顏色了，因此還有一個問題就是，如果競品色不足以影響到我們的品牌色的話（在可控範圍內），還是可以採用的。具體這個決策過程需要大家一起討論決定。
  篩選出以下顏色：
  接著是第二次顏色篩選，主要去掉競品色（美團外賣、餓了么、百度外賣、達達、派樂趣、點評、京東到家、愛鮮蜂等）和臟色。當然去掉之後發現基本沒什麼可用的顏色了，因此還有一個問題就是，如果競品色不足以影響到我們的品牌色的話（在可控範圍內），還是可以採用的。具體這個決策過程需要大家一起討論決定。
  篩選出以下顏色：
  現在我們基本可以控制可選擇的主題色了，如果人力足夠的話，建議多做幾個版本以查看具體使用效果。當然，也可能是老闆拍板來決定。
  其他的視覺風格，如圖像風格、文字排版等也可以在這個調研基礎上進行確定。
  來源：uedc.163
  原文鏈接：用戶研究方法介紹——情緒板（Mood Board）