UI設計師作品集里的“情緒板”怎么做

1、幾乎大部分UI設計師在作品集里都會放入“情緒板”這個模塊，但是這個模塊的利弊其實都很明顯，大家都想通過展示情緒板來告訴面試官我是如何定義色彩和產品的視覺風格調性的，但是大部分設計其實在做界面之前都沒有做過情緒板，而是反套的。也就是做完界面后，看用到了什么舒服的顏色，然后再去找一些圖片和關鍵詞，做成“情緒板”。所以大家看到的情緒板幾乎都特別的雞肋，一是關鍵詞太普遍寬泛，幾乎所有產品都能夠用。二是圖片和關鍵詞關聯(lián)性并不大，只是好看或者帶有需要的顏色而已。例如上方我在設計平臺截取的一些例子，關鍵詞包括：品質、自然、舒服、簡約等等，幾乎可以用到每一種產品，圖片和關鍵詞也并沒有太強的關聯(lián)，為什么自由是一

2、座雪山？為什么活躍是一些電子產品？為什么簡約是一幢高樓？為什么專業(yè)是一臺黃色的電腦？這樣的案例比比皆是。所以很多設計師對情緒板的理解出現(xiàn)了問題，風格定義這件“事”，其實是很難的，需要沉淀非常多的經驗，從初學、臨摹、原創(chuàng)、大量風格探索嘗試后才能逐漸形成風格定義的能力。風格定義也絕對不是找一些圖片吸取一些色彩，就搞定了，所以市面上UI作品同質化的原因就是大家還沒有掌握定義風格的方法。1.什么是情緒板用白話來說，情緒板反饋的就是產品的相關利益者對產品的感受和期望，并將其具像化的方法和過程。每一個產品利益者對產品的期望都不同，一千個人心里都有一千個哈姆雷特，那么產品呈現(xiàn)出什么樣子，我們需要能夠將這些感

3、受和想法進行視覺具像化。這些感受和想法包括了產品的定位、用戶的需求、管理者的戰(zhàn)略規(guī)劃等等。2.為什么要做情緒板情緒板的結果并不會直接告訴設計師具體設計的參數(shù)，不會告訴設計師應該用什么顏色，應該用什么字體。而是一種視覺導向與感知指引，用來給設計師進行參考，并且設計師要始終如一的貫徹這些引導，這是原因之一。另一個很重要的原因就是在做情緒板的過程中，能夠讓設計團隊、產品管理者對該產品呈現(xiàn)的感知和理念能夠達成一致。和情緒板類似的方法還有例如品牌沖刺、人格化塊等一系列用于探索產品在視覺感知和產品品牌定位上的方法。3.情緒板的步驟其實很多人對一些方法比較排斥，我個人也是如此。大家一聽到方法、方法論頭都炸了

4、，你不如直接講案例來的更直接一點。好，我們今天會將方法和步驟都給大家講解一下，保證大家能夠看懂。先來將具體的執(zhí)行步驟，方法流程的簡單和復雜還是來自于當下的條件和資源，以及我們的期望。同時情緒板運用的時機也有講究，它并不適合運用在比較成熟的產品設計中，而是用在0-1或者1-2版本的階段。在這個階段里產品品牌初具雛形，用戶數(shù)據(jù)和特征也逐漸成型，所以我們有更多的數(shù)據(jù)來對這些反饋進行準確的描述。如果我們的條件和資源豐富，那么需要邀請用戶一起來參與，如果條件不允許，那那么至少也要將公司其他部門以及高層管理一起來參與，當然如果這些條件都不具備，那么設計團隊和設計個人也可以進行，但是對個人經驗要求比較高。那

5、么我們先理想化的來一次講解。第一步-邀請相關利益者并進行訪談研究我們需要邀請一下人員參與此次情緒板的方法研究：1.用戶（注意覆蓋多類樣本3名左右即可）2.設計團隊成員（覆蓋到其他參與方法的人員人數(shù)）3.其他利益相關部門負責人（2-3人） 4.老板（必須邀請）。由牽頭設計師進行主持。首先每一位設計師找到其他參與方法的人員，一對一開始進行訪談，主要圍繞以下幾個問題：1.產品帶給你什么感受2.您覺得和xx（競品）比起來有什么差別3.如果將我們的產品比作一個人，你覺得他是誰4.如何向朋友介紹這個產品5.它和你身邊的那種物品有相似的氣質還有更多的問題可以根據(jù)不同產品定位進行拓展。為什么要問這些問題呢？這

6、些問題將覆蓋到用戶對產品的一種主觀感受，并將其擬人、擬物化，讓用戶能描述出和競品在主觀感知上的差異和區(qū)別。于是我們會得到一些關于這些問題的關鍵詞。第二步-產出體驗關鍵詞并進行三維映射得出的關鍵詞例如我們經常會說的品質、自然這樣比較抽象的詞，也會得到像父親、皮帶這樣具像化的關鍵詞。這里要注意的是當用戶描述出他心中的關鍵詞后一定要進行追問，例如為什么您覺得它像父親而不是母親呢？這里就要時刻去找到用戶關鍵詞背后的真實想法。接下來我們會用到三維映射法，將所有關鍵詞都劃分出3種類型：1.視覺映射 2.感受映射 3.具象映射，并繼續(xù)訪談用戶：您剛才說產品給您的感覺是時尚的，那么您覺得時尚在你心中是什么顏色

7、的，時尚給您一種什么感覺以及如果讓您用一個物品來代替時尚，您會選擇什么物品。這樣做的好處是能夠讓抽象的概念具像化，讓設計師能夠切實理解用戶的主觀感受。一般如果我們只讓用戶描述主觀感受其實是不準確的。第三步-讓參與者創(chuàng)建情緒板當我們把所有提煉出來的關鍵詞都找到對應的三維映射后，我們將針對最后的結果進行可視化圖片收集。例如用戶覺得香奈兒包包可以用來代替時尚這個關鍵詞，那么我們就需要收集更多有關香奈兒包包的圖片。在收集圖片過程中要注意這幾點：1.圖片必須高清不模糊2.圖片的數(shù)量必須大于6張3.圖片的色彩盡量覆蓋多種4.圖片盡量簡潔有主體將所有關鍵詞都收集完圖片后，我們讓用戶在其中進行挑選，讓其選出最

8、符合他說出來的那個關鍵詞的圖片，每個關鍵詞選擇1-3張圖片。這三個步驟中，老板的建議和感知也是很關鍵的，因為我們知道用戶一般都會做很多利己的選擇，所以也只能作為一定的參考。而老板則是產品的創(chuàng)始人，對產品的定位和期望有更深入的想法，同時這也將成為我們后續(xù)推動工作很有價值的參考。那有小伙伴說，老板沒有審美，很土怎么辦。其實這個不重要，在這幾個環(huán)節(jié)中同時也要避免為了迎合老板而做出的決定，我們只需要聽老板的感知然后去分析即可，并不是老板說要什么就一定要去實現(xiàn)，否則就違背了本次方法的初衷。第四步-結合情緒板制定設計風格情緒板最后輸出的其實就是關鍵詞+具像化的圖片。到最后一個步驟，大家覺得是不是還是很迷茫

9、，那和我們做設計到底有什么關系呢？所以我們在做完這一系列操作之后，需要由資深、專家來牽頭完成風格的腦爆和定義。例如我們可以在設計團隊內繼續(xù)進行討論，圍繞形、色、字、構、質五個維度進行腦暴。每個人對這五個維度進行效果制作，可以是UI首頁、海報、插畫，以提煉出來的關鍵詞和圖片為準繩進行設計?？赡苄枰獛滋鞎r間，之后再次進行會議討論，為什么每個人的設計是這樣的，思路是什么。所以其實情緒板最后的效果，很大程度上取決于設計師的設計能力。如果團隊都是設計新人，那么也沒有必要做這個方法了。案例接下去我說一下之前我們項目中的案例。我們當時根據(jù)用戶以及產品定位提煉出來這些關鍵詞：沙發(fā)、撞色、口紅、香奈兒包、潮流、

10、多彩、品質。針對這些關鍵詞我們繼續(xù)尋找圖片。根據(jù)這些圖片，我們從形色質構質五個維度去尋找設計的靈感，例如在形狀方面我們提煉出了棱形作為一個特征符號，可以運用在圖標、背景修飾元素以及容積形狀等地方。顏色我們提煉出了產品主色以及輔助色，讓頁面更加活潑、輕量化。在金剛區(qū)圖標以及banner背景的運用上，用到了撞色以及淺色背景突出主題的設計。字體方面主要是運用到一些特殊字體時候的一些字體設計，例如在今日特賣以及明日預告等一些固定欄目標題的場景。構，運用在了一些氛圍大圖的結構布局上，采用了大標題結合大主體的對角線構圖以及對稱構圖。還有在banner的設計中利用前中后景營造的縱深感。質，運用到的是在圖片背

11、景中采用了氛圍元素的搭配以及一些微漸變，讓模塊的視覺豐富更有質感。大家還記得我們上一篇文章給大家介紹的NOKNOK應用嗎？一款像素風格的游戲社區(qū)產品。其實設計風格這回事，大家不要過度的追求，能營造出非常獨特的風格必須要滿足以下幾個條件：1.功能簡單。大家覺得淘寶和新浪微博的風格是什么？是不是很難明顯的感知有什么獨特的風格？因為產品題量大、功能復雜用戶多，所以很難設計出滿足所有用戶的很獨特的風格。2.風格小眾。例如像素、極簡、搖滾、潮流，這些風格是很容易出效果的，平時我們接觸的大部分產品都是滿足大部分用戶的視覺偏好，突然有一天你看到這些小眾風格你就會覺得很特別。但是這些小眾的風格是很有局限的，例如你讓淘寶去做成極簡風，或者大眾點評去做成很