如何運用情緒板進行產品設計?

sky
0 評論 12969 瀏覽 34 收藏 7 分鐘

上周我們分享了什么是情緒板以及情緒板如何在設計中去運用,幫助我們很好的做一些設計改版和提案。這周和大家簡單分享一下,實際項目中如何用這個方法去完成一個方案的設計。

項目背景

任何一個項目的開始,第一個要做的就是了解項目背景,以及要解決商業目標是什么。

簡單說下這個項目,這個項目是某大牌品牌在淘寶開了一家旗艦店,其中主打產品是口紅。買過口紅的朋友都知道,口紅是分很多色系,質地和色號,用戶訴求希望在淘寶詳情頁面,展現200多個色號。

200多個SKU,內心是很崩潰的。因為我們傳統的SKU選擇最多也就是6、7個,像衣服尺碼,鞋碼等,幾百個在當時設計上是一大挑戰。

初級設計師:你和資深設計師之間就差這1個方法

當時頁面是這樣的,10幾個已經很多。如果在已有的框架下面去增加幾百個視覺體驗緯度,全部展現出來,很明顯不合理,體驗會更差。

初級設計師:你和資深設計師之間就差這1個方法

當時交互是這樣的,在這里做了一個入口等級進去展開全部口紅顏色

那么拿到這個需求,我們要去思考,如果我們按照當前這個邏輯,點進去一堆顏色列表的設計,用戶是否看得懂,是否有更好的形式去幫助用戶更好的理解這個使用場景。

運用情緒板去思考?

1. 生活映射

設計源于生活又高于生活,想像一下你在生活中怎么陪女朋友去逛彩妝店,如果你沒有女朋友(扎心了,老鐵)也應該見過彩妝店,或者現在比較火的李佳琦直播;他們是如何去線下買彩妝的,你去觀察絲芙蘭專柜就會知道答案。

一般用戶會先去看熱門色號,再看顏色質地,光澤等,線下那些精致的專柜,會讓你更直觀地看見口紅質地,顏色,以及涂抹在嘴上的效果。所以當時在思考,怎么讓用戶在線上也有這種體感感受,我們制定出相對應的情緒板,還原真實購物場景。

2. 顏色映射

對于美妝場景,顏色和我們UI里面顏色是完全不一樣。在現實世界里,女生對于顏色有著很直觀的感受,我們把這種顏色感受記錄在情緒板。

初級設計師:你和資深設計師之間就差這1個方法

通過在情緒板里面記錄,能很好地把我們想要的色彩如何去表達能有個大概的思考??隙ú皇且粋€純色塊,這個體驗一定是直觀的,有趣的。

3. 質感映射

那么如何去體現口紅,彩妝這種設計質感?

大家都知道口紅、粉底都是有各種質感:啞光,滋潤,閃亮等等。那么對于這種質感,如何通過色彩去很好傳遞給用戶,需要我們去思考。

結合我們想要做的感覺,需要傳遞給用戶的感受制定到質感情緒板,為后續做提案作為指導。

4. 構成映射

思考下在現實生活里面,比如去染發,發型師都會給我們一個頭發冊子,還有平面設計的潘通色卡,以及裝文件的文件夾等,是否可以把這些形式去放在我們設計里面去?

初級設計師:你和資深設計師之間就差這1個方法

最終設計方案

我們運用文件夾這種形式為視覺容器載體,文件夾有打開關閉效果,打開文件夾我們可以清晰看見里面的色彩質地和顏色,方便用戶去理解,觸達用戶內心感受。

初級設計師:你和資深設計師之間就差這1個方法

初級設計師:你和資深設計師之間就差這1個方法

▲ 文件夾作為視覺容器載體來承載顏色

初級設計師:你和資深設計師之間就差這1個方法

▲ 每個文件夾點擊展開是一張對應的質感質地圖片,幫助用戶理解這個口紅實際效果

最后

以上經驗就是我之前一個項目案例,如何通過觀察生活,以及如何通過情緒板方法,幫助我們去設計一些好的方案,幫忙我們很好的把好的創意運用到設計中去,希望大家都能掌握這套設計方法。

#相關閱讀#

身為設計達人,你需要知道這個技巧

#專欄作家#

Sky,微信公眾號:我們的設計日記(ID:helloskys),人人都是產品經理專欄作家。支付寶體驗設計專家,阿里巴巴天貓設計專家;10年知名互聯網公司設計經驗,對于產品從0到1、品牌定位、金融產品、設計規范、運營規范、大促等有豐富實戰經驗。

本文原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自Unsplash, 基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!