相信很多設計師在項目中有遇到以下這些問題,這時候你是怎麼應對的呢?是拿著設計稿「回爐再造」還是駁回呢?
這個時候,如果能有理有據地闡述出你的設計⽅法論支撐,以駁回對⽅的質疑,設計稿的通過率將⼤大提⾼,而且對項⽬後續的設計提供非常有指導意義的幫助,提⾼設計的效率。
正確的設計處理流程
當我們接到一個介面改版需求時,會考慮哪些點呢?
相信我們大部分人都會重點關注美觀度,但是這往往是不夠的,我們既要把介面做得好看,也要做得科學。我們這次要說的情緒板,就可以幫助我們做出一個更加有理有據的介面設計。
情緒板的正確入門
網易UEDC給出的情緒板的定義如下:
情緒板,是對要設計的產品和相關主題方向的色彩、圖片、影像或其他材料的收集,從而引起某些情緒反應,以此作為設計方向或者形式的參考。幫助設計師明確視覺設計需求,用於提取配色方案、視覺風格、質感材質,以指導視覺設計,為設計師提供靈感。
那麼情緒板到底如何使用呢?我們先來看看整體的操作流程:
情緒板如何用於移動端設計
同樣,可以將情緒板運用到移動端介面視覺設計中,通過探索用戶的心理情緒和需求,可以將感受可視化,並作用於介面視覺風格、圖標風格的走向、關鍵圖標的選取等各個方面。為視覺細節的產出奠定理論基礎。
接下來我們通過金融類產品改版案例,幫助大家更好地學會使用情緒板。
情緒板實操過程中,我們模擬一款金融理財服務的產品。在這次改版中,改版目標是希望突顯產品專業、及時、全面、權威的品牌調性,同時匹配出符合產品調性的用色和視覺風格的設計,以滿足金融產品的目標用戶對投資收益、資金安全、周轉靈活的心理訴求。
第一步 確定原生關鍵詞
通過產品定位、涉眾訪談和以往的用戶研究數據,我們可以獲得大量的關鍵詞,而這些關鍵詞並不是都能用得上,我們需要篩選出既符合產品定位又能達到用戶心理預期的,最終提取3個基礎關鍵詞:收益、安全、靈活。
注意要點:基礎關鍵詞一般在3-5個之間,同時原生關鍵詞,一定要抽象化,不能過於具體。(例如:咖啡就是個具體名次,腦海中一下子就能聯想出該物體)
第二步 確定衍生關鍵詞
由於第一步的原生關鍵詞大多都比較抽象,因此我們需要對其進行發散和聯想。
從而需要更多具體關鍵詞,這樣我們後面才能更容易找到相應的圖片,具體關鍵詞一般都是具體的物體。
總結:為了更科學地找圖,第一步確定3-5個原生關鍵詞,第二步在每個原生關鍵詞下拓展3個衍生關鍵詞。
第三步 搜集圖片素材
關鍵詞確定好後,我們終於可以在圖庫中,使用關鍵詞進行圖片的搜集了。這時候如果圖片太多,不但會增加我們搜圖的工作量,後期也不方便用戶進行篩選,如果圖片太多,則可能搜到的圖片重複率太高,導致得出的結論不夠準確。所以一般來說1個關鍵詞對應搜3-5張圖片就足夠了。
創建圖片庫式的情緒板
搜集好圖片後,我們可以先在公司內部篩選一次,再將挑選出來的圖片打亂並依次排列,邀請目標用戶進行再次挑選,因為圖片較多,這裡只給出了一部分:
在用戶挑選圖片的過程中,我們需要問用戶2個問題:
分別選擇最能代表「投資收益」、「資金安全」、「周轉靈活」的幾張圖片。
你為什麼選擇了這張圖片?圖片的哪個元素讓你覺得有安全的感覺?
問題1的目的是為了:挑選出最終能代表關鍵詞的圖片;
問題2能讓我們了解用戶選擇圖片的原因,挖掘出用戶的心理情緒,從而了解到用戶的視覺偏好,而這2個點都可以為我們後面做視覺設計做好鋪墊,如下圖:
經過這樣一輪分析,我們選擇的任何一個顏色,都將會有理有據,具備科學度。
到這裡,你是不是以為情緒板已經完成它的使命了?其實真正有趣的地方才剛剛開始,APP的視覺設計策略原來可以用得如此得心應手!
情緒板在彩色化卡片的運用
彩色化卡片,是一個非常常見的功能入口,擁有各類顏色,但問題是:我們如何行之有效地提升細節感?
經過之前情緒板的鋪墊,彩色化版塊在設計時應該做到了色彩屬性與業務屬性相連接,才能與用戶的認知匹配。
比如穩健投資的業務屬性是穩定,而藍色的色彩屬性也有安全、穩定的意思,那麼就做到了圖標色彩的選取連接業務屬性。
情緒板在圖標風格上的運用
根據用戶畫像可以發現用戶在投資過程中容易出現緊張不安的心理情緒,大多數用戶都傾向尋求一個「靠譜」的平台。
且通過之前情緒板的調研發現,用戶覺得一個圖片能給他安全感,除了顏色之外,堅固圓潤的造型,同樣也能傳遞安全的感受。
因此在圖標設計中採用圓角而非直角的設計細節也是為了緩和用戶情緒,表達一種穩重和安全感。如Tab欄圖標和列表流圖標,都採用較為圓胖的圓角設計。
情緒板在介面呼吸感的運用
同樣的,介面風格採用大留白的設計來增加頁面的呼吸感,也是了緩解用戶緊張不安的心理情緒。
什麼樣的圖片能給用戶帶來安全?探索圖片本質,我們同樣能運用至介面設計,這就是情緒板的多樣性。
哪些環節適合用圖庫進行情緒板實操
前面講了情緒板在產品設計中的重要性,情緒板是什麼,以及我們為何要使用情緒板以及如何去使用。
那麼在整個產品設計流程中,到底有哪些環節可以使用到情緒板呢?通過對市面上產品的分析,大致可以分為以下4個方面:風格、顏色、版式、圖標。
增加設計科學度 情緒板是個利器
在項目前期,我們可以通過情緒板來定義產品整體的設計風格和產品主色調,設計過程中,介面排版、圖標的顏色、形狀和設計細節都可以使用情緒板來定義。
無論我們做什麼樣的設計,情緒板都無疑是一個很好的工具,它不僅可以幫助我們明確設計需求,做出更容易被大眾所接受的設計,也可以幫助我們更好地去與領導和其他需求方溝通,向他們傳達設計的價值主張,最終達成共識,提高設計效率。
編輯:千鋒UI設計