情緒板如何有效應用于「視覺風格定義」?
在產品設計或日常的設計溝通中,相關人員可能都產生過類似的疑惑,即如何才可以將抽象的情緒與思考,轉化為有效溝通的設計語言,并推動后續產品視覺的探索與誕生。本篇文章里,作者便結合案例,對情緒板的結合應用進行了解讀,一起來看。
想象一下,當你加班加點花了大量時間設計了細節豐富的原型圖,但客戶卻反饋“這不是我們想要的感覺”,會是什么樣的心情?
在設計溝通中,一旦出現了“感覺”這個詞,大概率會讓這場溝通陷入僵局。相信,每位設計師至少都有過一次這樣的經歷。那么,如何將抽象的情緒和思考順利轉化為能有效溝通的設計語言,并幫助設計師朝著同一方向探索產品視覺?這時候情緒板的作用就凸顯出來了。下面就和大家分享一下“情緒板在視覺風格定義中的應用”。
一、情緒板方法介紹
1. 情緒板是什么?
情緒板(Mood Board)指一系列圖片的拼貼,是常用的表達設計定義和方向的設計工具/方法,協助設計師明確設計方向,提供靈感支持。
簡單來說,就是將抽象的想法變成具象的素材定義設計方向。其本質是將用戶的情緒可視化,因此稱為情緒板。情緒板既不是初稿也不是最終的風格方向,可以理解為是一種產品設計風格的參考,設計師在了解了相關的產品背景后,基于設計主題給出的一個較為初始的設計想法,用于提取最終視覺風格的工具。
2. 情緒板的使用環節與作用
情緒板主要應用于“概念設計”階段,也經常用于產品改版前的視覺風格探索。其主要作用有以下5點:
作用1:在概念設計之初,作為連接用戶需求與設計師想法的工具,避免設計師只憑直覺去理解用戶和設計產品。
作用2:情緒板能夠巧妙地向用戶傳達設計理念,并獲得用戶的理解和反饋。
作用3:作為設計師背后的方法論支持,提高設計的科學性與效率。
作用4:進一步驗證設計師想法,對后續的設計方向提供幫助。
作用5:將抽象的想法轉化成視覺符號,更加直觀。大大降低用戶、研究員、設計師的溝通成本。
3. 情緒板傳統的使用方法
如何創建情緒板?根據過往經驗,在情緒板傳統的使用方法中主要有五大步驟:
第一步:明確原生關鍵詞。
原生關鍵詞可以來自產品定位、品牌調性、功能特色、目標用戶的需求特征等,通過內部討論或者用戶訪談明確得出。例如:品質、可靠、易用,關鍵詞不宜太多,3-5個比較合適。
第二步:挖掘衍生關鍵詞。
衍生關鍵詞是原生關鍵詞的發散和聯想,可以通過內部頭腦風暴或用戶訪談挖掘。例如:原生關鍵詞是品質,衍生關鍵詞就可能是莫蘭迪色、柔和、陶瓷質感等。
如何獲得衍生關鍵詞?
設計師或用戶研究員可以通過頭腦風暴或者目標用戶簡單訪談獲取,看看通過原生關鍵詞能映射到什么具體的內容,將“抽象的關鍵詞”落到“具象的定義”,可以圍繞著視覺映射、心境映射、物化映射等三個維度來發散。
1)視覺映射
視覺映射可以理解為聯想到的視覺表現,比如“看到品質這個詞,你能聯想到什么顏色,什么顏色可以代表品質?”,也可以是“什么樣的形狀、質感能代表品質?”等等。
2)心境映射
心境映射可以理解為聯想到的心境感受,比如“看到品質這個詞,你有什么感受?”、“還有什么詞語可以給你帶來與品質這個詞語相似的感受?”等等。
3)物化映射
物化映射可以理解為聯想到的具體事物,比如“根據品質這個詞能聯想到什么產品,什么品牌?”等等。
通過上述步驟,設計師或用戶研究員已經獲取了原生關鍵詞所映射到的具體內容,即衍生關鍵詞,也是設計師尋找相關圖片的起點。
第三步:搜索圖片素材。
獲得衍生關鍵詞后,接下來要看設計師。設計師可以利用Pinterest、Behance、Unsplash等圖片資源豐富的平臺收集與關鍵詞相匹配的圖片素材。
在選取圖片的過程中也應當注意以下三大原則:
- 避免選擇帶有logo、或者非高清的圖片;
- 應盡量選取抽象反映這種風格或者感覺的圖片,而非具體的某個人或物;
- 避免局限在固定的領域。設計是相通的,可以涵蓋界面設計、家居、建筑等領域。
第四步:創建情緒板,讓用戶挑選圖片。
對搜集的圖片進行內部篩選,挑選合適的圖片進行用戶測試。測試前研究員需要將圖片進行打亂,邀請目標用戶根據原生關鍵詞進行挑選,選擇他們認為最接近他們內心想法的圖片然后進行追問。比如哪些圖片能代表“品質”、為什么選擇這張圖片、圖片中哪些元素給你傳遞這樣的感覺等等。
第五步:提取設計元素。
最后結合用戶的選擇和訪談結果,進行視覺風格的元素提取,主要包括:色彩、圖形、結構、質感等。
以色彩提取舉例,根據圖片提取到的顏色,進行調整、補充,并擴展部分元素,以豐富的配色來提升色彩層次與細節,具體如下:
二、結合實際案例看情緒板的創新應用
以上是情緒板的傳統使用方法,雖然可以幫助設計師有意識地捕捉和固化感性的因素,解決“感覺”的困擾。但在實際的運用過程中,也存在著以下3點局限性:
1. 情緒板傳統使用方法的局限性
做一次完整的情緒板所耗費的時間、人力成本是比較高的:需要召集相關利益者如產品研發人員、設計師、用戶研究員、具有代表性的用戶等角色,后期也需要花時間進行圖片的搜集、結果統計,以及設計要素的提煉。
用戶依據關鍵詞所選擇的圖片不足以明確設計風格走向:因為不同用戶對關鍵詞的心理感受、所能代表的圖片可能不一致,導致圖片選擇結果差異很大,缺乏統一性和方向性,設計師也較難提取共性的設計元素。
不同關鍵詞所代表圖片的差異讓設計風格產生割裂感:第二點局限性是說用戶選擇結果的不一致性,而第三點則是不同關鍵詞之間存在圖片風格沖撞或者交叉的問題,如果還是按照元素來提取容易讓最終的視覺風格和設計要素存在一種割裂感,很難融合到一起。
2. 情緒板的敏捷應用
由于意識到傳統情緒板方法的局限性,我們在幫某車企進行APP視覺風格改版時進行了一些不一樣的嘗試:
把傳統的情緒板流程“明確原生關鍵詞——挖掘衍生關鍵詞——搜索圖片素材——創建情緒板,并讓用戶挑選圖片——提取設計元素”。調整為:“明確原生關鍵詞——挖掘衍生關鍵詞——搜索圖片素材,并創建風格板——讓用戶挑選風格板的偏好與雷區——提取設計風格”,根據目標用戶選擇最高頻的風格板結果來指導下一步設計方向,在節約時間成本、設計風格高效明確、結果更具說服力三大優勢,具體如下:
- 節省時間,包括結果統計、要素提取等時間成本;
- 用戶想要的設計風格更為明確,既可以驗證設計師想法,也能從用戶側獲取 TA 對這種風格的看法,以及設計上避免踩雷的地方,指導設計更為高效;
- 結果更有說服力,直接獲得多少用戶喜歡這種風格,而不是多少用戶喜歡這幾張圖片。
下面結合某車企APP視覺風格改版,來說明情緒板的敏捷應用:
第一步和第二步:原生關鍵詞的確認和衍生關鍵詞的挖掘。
前兩步與傳統情緒板的使用方法是一致的。在正式開始之前,我們從已有用戶對該車企品牌的看法、產品定位、品牌調性等方面提取了五個關鍵詞:品質、可靠、經濟、經典、舒適;設計師和研究員通過內部頭腦風暴對原生關鍵詞進行聯想和發散,輸出衍生關鍵詞。
到這里為止基本與常規方法是一樣的,接下來第三、四、五步與傳統情緒板方法有些差異。
第三步:搜索圖片素材,創建風格板
結合衍生關鍵詞,設計師按照圖片的選取原則,利用 Pinterest、Behance 等平臺挑選合適的素材。在這個過程中,設計師還需要對未來將要改版的視覺風格形成一定的想法和假設,不是機械地對著關鍵詞搜集圖片;其次,除了本品的衍生關鍵詞所代表的圖片以外,還可以搜集競品的作為參照。
以下是設計師通過搜集圖片形成的風格板(僅舉例)
第四步:讓用戶挑選風格板的偏好與雷區。
接下來就是用戶挑選圖片組的環節,研究員出示風格板,用戶全部瀏覽后選擇偏好與雷區。在選擇偏好時可以問用戶“請選擇認為最喜歡/符合該車企印象的圖片”,可以限定選擇數量,也可以不限制,可以是1張圖片,也可以是圖片中的元素。
以下是風格板的統計結果展示(僅舉例)。
用戶喜歡什么樣的視覺風格:簡單、干凈、舒適 | 科技感、穩重。
選擇完偏好后,也請用戶選擇“不能接受的圖片是什么”,此外還需要用戶作出原因解釋。這樣可以讓視覺設計貼近偏好,避免踩雷,也能更直接地指導整體風格、主色調&配色、氛圍感等等。以下是設計雷區的舉例,設計師在設計過程中盡量避免使用以下元素:
上述步驟中,如果時間許可的情況下,可以結合關鍵詞來進行(比如讓用戶挑選能代表產品印象關鍵詞,哪些圖片組能代表某個關鍵詞等等)。這樣可以獲得更為多元化的信息,也可以看出用戶對該車企的印象是否契合原生關鍵詞,哪些圖片/元素所喚起的情感反應與品牌調性更符合等更加細致的內容。
第五步:提取設計風格。
最后一步設計師可直接根據風格板的選擇結果,再進行重組,最后結合之前的用研結果、設計原則、品牌調性與產品定位輸出了三套視覺設計方案,具體如下:
當然,值得注意的是,最終的視覺方案是要經過多輪討論才能確定下來的,改版設計還需要符合產品的定位、目標、業務價值與用戶訴求等,經過多方面考量才會落地,是一個逐步打磨、反復修改的過程。
3. 如何衡量視覺改版效果是否受到用戶歡迎
那么,如何衡量視覺改版效果是否受到用戶歡迎?在正式深入設計各個頁面之前,我們還做了視覺風格的盲測,主要從測試產品、測試內容、測試結果三大方面進行測試:視覺風格偏好盲測
測試產品:本品(原版&新版)、競品(燃油車和新能源),聚焦視覺風格改動較大的頁面。
測試內容:包括對不同主頁面的量化評分,以及合意性測試,以此來了解、確定目標用戶對改版后的視覺風格偏好與直觀感受。
測試結果:
- 某車企新版APP的視覺風格偏好得分顯著高于原版,與新能源車企APP差異不大;
- 新版視覺給用戶的感受是,比原版更為簡潔、舒適、年輕。通過對比新能源發現,新版設計的方向還可以更著力于科技感的營造等。
在設計開發上線后,我們還可以采用以下方法來側面評價視覺改版的效果:
搭建指標體系來評價:指標體系是度量用戶體驗水平的一種常見手段,依據用戶體驗五要素模型,視覺美觀處于表現層,可以作為指標體系的其中一個重要維度。具體可通過視覺一致性、色彩搭配美觀度等細分維度來評價,獲得改版前后的視覺風格對比分值,從而來評估視覺效果是否有提升。
進行前后對比的可用性測試:我們也可以通過用戶側進行產品的可用性測試,看看改版后視覺類型的可用性問題是否有減少、視覺美觀的滿意度評分是否有提高等方面來評估。
三、寫在最后
在設計前期的用戶研究階段,我們可以通過專家走查、可用性測試等方法來發現產品的問題,在功能或者交互層面作出改進。但視覺設計更多是源于美學、外觀和感覺,能夠激發用戶特定的情感反應。優秀的視覺設計可以在用戶剛接觸產品時,短時間內營造出良好的第一印象。有研究還表明這種良好的印象還可以讓用戶忽視一些產品功能上的不足。
所以,視覺設計是很重要的一環,在用戶體驗領域中,探索視覺風格有很多方法,情緒板是我們常用的方法之一。它不僅僅可以在初期方向探索時用來摸索與定位,在設計項目深化的過程中,每次的評審和改進,前期做的情緒板仍然起著良好的參照作用;對于設計師而言,情緒板也是用來與客戶、老板交流的有效手段。
作者:岑偉紅,ISAR公司資深用戶研究員。
來源公眾號:伊颯爾UXD學院,專注用戶研究和用戶體驗設計
本文由人人都是產品經理合作媒體 @伊颯爾UXD 授權發布,未經許可,禁止轉載。
題圖來自 Unsplash,基于 CC0 協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發揮!