情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

8 評(píng)論 21092 瀏覽 95 收藏 17 分鐘

編輯導(dǎo)語(yǔ):什么是情緒板?就本文作者的理解而言,情緒板是設(shè)計(jì)師在對(duì)產(chǎn)品經(jīng)過(guò)一定了解之后,基于自身產(chǎn)品理解所給出的產(chǎn)品建議。那么,如何做好有效的情緒板設(shè)計(jì)?本篇文章里,作者就情緒板設(shè)計(jì)的意義,以及相應(yīng)的方法策略做了總結(jié),一起來(lái)看一下。

我們?cè)谠O(shè)計(jì)中經(jīng)常會(huì)遇到新版本或改版的設(shè)計(jì),從創(chuàng)意想法到設(shè)計(jì)初稿的過(guò)程可能會(huì)花費(fèi)比較長(zhǎng)的時(shí)間。

而作為設(shè)計(jì)師除了自己思考設(shè)計(jì)之外,還需要與產(chǎn)品、設(shè)計(jì)老大溝通我們的一些設(shè)計(jì)想法。因此,我們需要在不同的階段輸出不同的內(nèi)容反饋進(jìn)度并達(dá)成一些共識(shí)。

在多年的設(shè)計(jì)過(guò)程中,我也經(jīng)常會(huì)去嘗試一些情緒板的設(shè)計(jì),在這方面也沉淀了一些自己做情緒板設(shè)計(jì)的方法。因此可以借助這次機(jī)會(huì)給大家分享下這方面的經(jīng)驗(yàn),同時(shí)也希望起到拋磚引玉的作用,與大家交流下這方面的內(nèi)容。

一、情緒板的概念

首先我們要明確什么是情緒板?

我的理解是:情緒板既不是初稿也不是最終的風(fēng)格方向,而是設(shè)計(jì)師在了解了相關(guān)的產(chǎn)品背景后,基于自己對(duì)于產(chǎn)品的理解給出的一個(gè)較為初始的設(shè)計(jì)建議,并且希望可以通過(guò)這個(gè)初始的建議與產(chǎn)品側(cè)達(dá)成一些相關(guān)的設(shè)計(jì)共識(shí)。

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

二、情緒板的大概流程

情緒板的設(shè)計(jì)流程大概分為前中后三個(gè)階段,前期:分析-收集;中期:篩選-組合;后期:打磨-呈現(xiàn)。

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

1. 前期:分析-收集

主要是分析產(chǎn)品相關(guān)背景或需求本身的方向,結(jié)合產(chǎn)品背景及需求本身再進(jìn)一步分析大概的設(shè)計(jì)方向并收集相關(guān)素材內(nèi)容。

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

2. 中期:篩選-組合

當(dāng)我們收集完成后需要對(duì)現(xiàn)有素材進(jìn)行二次篩選并組合,基于現(xiàn)有素材組合大概的設(shè)計(jì)方案結(jié)構(gòu)。

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

3. 后期:打磨-呈現(xiàn)

基礎(chǔ)方案組合完成后需要進(jìn)行二次打磨,細(xì)化方案的內(nèi)容表現(xiàn),檢查整體的一致性及完整度,最后呈現(xiàn)給產(chǎn)品方。

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

三、為什么要做情緒板

可能很多設(shè)計(jì)師會(huì)疑惑為什么要做情緒板,直接設(shè)計(jì)初稿不就好了嗎?如果有這個(gè)疑問(wèn),可能還沒(méi)實(shí)際了解到情緒板到作用。但我們可以試著從我們?cè)谠O(shè)計(jì)過(guò)程中遇到的痛點(diǎn)來(lái)了解情緒板的作用或者意義。

在設(shè)計(jì)的過(guò)程中你是否會(huì)存在下面幾個(gè)問(wèn)題:

  1. 前期思考不夠——設(shè)計(jì)產(chǎn)出方案少;
  2. 設(shè)計(jì)不懼探索性——設(shè)計(jì)來(lái)源沒(méi)有考究;
  3. 初稿多次修改沒(méi)能達(dá)成共識(shí)——設(shè)計(jì)表達(dá)不出對(duì)方想要的;
  4. 設(shè)計(jì)中期出現(xiàn)不一致——設(shè)計(jì)沒(méi)有貫徹始終。

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

四、情緒板的作用

從這幾個(gè)問(wèn)題中,我們可以得到一個(gè)比較統(tǒng)一的結(jié)論就是:前期設(shè)計(jì)呈現(xiàn)內(nèi)容不夠,導(dǎo)致溝通不足而產(chǎn)生方向不統(tǒng)一。因此基于這個(gè)關(guān)鍵點(diǎn),我們?cè)賮?lái)看情緒板的作用。

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

1. 輔助構(gòu)建世界觀

在前期,世界觀、背景方面的內(nèi)容大多是以文字的方式呈現(xiàn),因此設(shè)計(jì)師可以通過(guò)情緒板的方式,來(lái)輸出對(duì)應(yīng)的世界觀設(shè)計(jì)表現(xiàn),這樣可以更加直觀地表現(xiàn)出對(duì)應(yīng)的視覺(jué)語(yǔ)言。

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

2. 具象設(shè)計(jì)想法

在初期與產(chǎn)品側(cè)溝通時(shí),單純靠語(yǔ)言表達(dá)的方式很難讓對(duì)方達(dá)到一種腦補(bǔ)的狀態(tài)。因此借助情緒板的方式更加直觀地呈現(xiàn)設(shè)計(jì)想法,通過(guò)具象的圖形或者圖形,大大降低雙方的溝通成本。

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

3. 明確設(shè)計(jì)方向

基于第二點(diǎn)的溝通,我們可以明確地了解到產(chǎn)品側(cè)的一些喜好。為后續(xù)設(shè)計(jì)初稿時(shí)起到一個(gè)清晰的方向作用。

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

4. 提高前期設(shè)計(jì)的效率

從零到一設(shè)計(jì)一套完整的方案往往需要耗費(fèi)較長(zhǎng)的時(shí)間,借助情緒板設(shè)計(jì)的方式來(lái)快速響應(yīng)一些想法及創(chuàng)意,這樣可以大大提高前期的輸出效率。

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

五、情緒板的基本原則

從多次的嘗試中,我總結(jié)梳理了幾個(gè)基本原則,了解這些原則可以讓我們?cè)谧龅臅r(shí)候更加嚴(yán)謹(jǐn),輸出更加準(zhǔn)確的設(shè)計(jì)方案。

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

1. 多方向性

情緒板的設(shè)計(jì)與我們?nèi)粘TO(shè)計(jì)一樣,需要給出不同的方向建議,單一的方案往往難以抉擇。多方案輸出除了提升抉擇空間之外,還可以增加方案碰撞的情況,往往可能是方案A的某部分內(nèi)容疊加方案B的某部分內(nèi)容才能產(chǎn)生最初的方向。

2. 嘗試性

此階段的所有輸出皆屬于嘗試與探索,因此不必過(guò)于考究設(shè)計(jì)細(xì)節(jié),重點(diǎn)在于表達(dá)出需要相關(guān)的設(shè)計(jì)概念及思考想法,把更多的時(shí)間留作設(shè)計(jì)思考及方案嘗試。

3. 效率性

情緒板的輸出重點(diǎn)在于前期溝通而達(dá)到一個(gè)比較好的共識(shí),因此在保證質(zhì)量的情況下,避免花費(fèi)過(guò)多的時(shí)間而影響輸出的效率性。盡量做到快與準(zhǔn)。在過(guò)往中項(xiàng)目組,基本上是以半天(4個(gè)小時(shí)左右)為一個(gè)單位來(lái)完成一套方案。

4. 試探性

情緒板是一種非常有效試探產(chǎn)品側(cè)想要往那種方向去推動(dòng)的方式,因?yàn)槲覀冊(cè)趯?shí)際的設(shè)計(jì)過(guò)程中,產(chǎn)品側(cè)可能也對(duì)整體的設(shè)計(jì)大調(diào)并不少特別有明確的腦補(bǔ),因此設(shè)計(jì)師可以借助情緒板的設(shè)計(jì)來(lái)挖掘產(chǎn)品側(cè)想要往哪個(gè)方向進(jìn)行發(fā)力。

六、情緒板設(shè)計(jì)的方法

這里總結(jié)情緒板的設(shè)計(jì)方法大概有這幾種:

  1. 借助圖像、插圖;
  2. 結(jié)合實(shí)際場(chǎng)景引申;
  3. 借鑒摘取同類型設(shè)計(jì);
  4. 繪制草稿。

1. 借鑒圖像、插圖

在我們?cè)O(shè)計(jì)一些專題活動(dòng)或者繪制插圖相關(guān)的一些設(shè)計(jì)時(shí),可以考慮使用這種方法來(lái)輸出你的情緒板設(shè)計(jì),可以通過(guò)借鑒一些設(shè)計(jì)網(wǎng)站或插圖網(wǎng)站上的現(xiàn)有素材來(lái)拼接,并表達(dá)自己在這方法的一些設(shè)計(jì)意圖及想法。

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

2. 結(jié)合實(shí)際場(chǎng)景引申

從更概念化的角度出發(fā),通過(guò)引用一些實(shí)際場(chǎng)景、物品、圖像,來(lái)拓展相關(guān)的圖形、質(zhì)感、色彩方面的設(shè)計(jì),并且輸出相關(guān)的設(shè)計(jì)雛形。例如我們?cè)谠O(shè)計(jì)LOGO或者圖形類的一些設(shè)計(jì),使用這種方法就可以幫助我們突破一些現(xiàn)有的認(rèn)知壁壘。

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

3. 借鑒摘取同類型設(shè)計(jì)

在設(shè)計(jì)之初,我們通常會(huì)有一個(gè)大概的思考雛形,但如果直接開(kāi)始設(shè)計(jì)往往效率上并不高。因此可以借助一些設(shè)計(jì)網(wǎng)站上的設(shè)計(jì),通過(guò)摘取組合的方式呈現(xiàn)自己的初步想法。我通常會(huì)在UI新版或者改版的時(shí)候使用這種方式,但只能表達(dá)大概的想法且不能代表最終的初稿設(shè)計(jì)。

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

4. 繪制草稿

當(dāng)我們想要表達(dá)一些溝通或者框架的設(shè)計(jì)時(shí),我們可以使用草稿繪制的方式來(lái)表現(xiàn),這個(gè)方式簡(jiǎn)單快捷,可以很有效率地對(duì)齊大部分的設(shè)計(jì)共識(shí)。

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

七、情緒板設(shè)計(jì)的注意事項(xiàng)

基于原則及方法,我們可以來(lái)簡(jiǎn)單了解下情緒版設(shè)計(jì)中需要注意的一些事項(xiàng),通過(guò)這些內(nèi)容讓你在實(shí)際操作過(guò)程中少踩一些坑。

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

1. 控制方案的數(shù)量

設(shè)計(jì)方案控制在2-3個(gè)左右即可,前期大多是屬于試探性方案呈現(xiàn)及找方向,太多則容易導(dǎo)致選擇困難。

2. 避免篇幅過(guò)長(zhǎng)

篇幅過(guò)長(zhǎng)往往容易降低別人閱讀的耐心,對(duì)于情緒板的輸出也是如此。結(jié)合過(guò)往的經(jīng)驗(yàn),建議以16:9的畫(huà)面為一頁(yè)來(lái)呈現(xiàn)一個(gè)方案。

3. 區(qū)分重點(diǎn)次要

在一頁(yè)內(nèi)呈現(xiàn)的方案避免過(guò)于平均,可以適當(dāng)突出某些想要重點(diǎn)表達(dá)的內(nèi)容,例如在這個(gè)方案中想要重點(diǎn)突出圖標(biāo)、顏色等,那么這里需要突出這部分在畫(huà)面中的比例,適當(dāng)縮小其他模塊的尺寸。

4. 結(jié)合世界觀

在輸出情緒板設(shè)計(jì)方案時(shí)還可以適當(dāng)考慮結(jié)合產(chǎn)品的世界觀,通過(guò)一些具象化的圖形或者插圖來(lái)表現(xiàn)相關(guān)的內(nèi)容。例如我們之前在游戲中心改版的嘗試中,就發(fā)散了幾個(gè)相關(guān)的世界觀,因此我們?cè)谳敵龇桨笗r(shí),則只需要把對(duì)應(yīng)的世界觀作為方案,通過(guò)情緒板的方式表現(xiàn)出來(lái)即可。

5. 保持整體風(fēng)格一致性

一致性是表現(xiàn)一個(gè)設(shè)計(jì)師是否具有系統(tǒng)化、全局觀的思考思維,因此我們?cè)诒憩F(xiàn)情緒板時(shí)也需要關(guān)注這方面的內(nèi)容,避免整體的調(diào)性不匹配。

6. 完整性表達(dá)

在呈現(xiàn)方案時(shí),盡量多維度的進(jìn)行對(duì)比,呈現(xiàn)一個(gè)完整性、系統(tǒng)性的設(shè)計(jì)。例如我們?cè)谠O(shè)計(jì)UI相關(guān)的內(nèi)容,從圖標(biāo)、顏色、字體等等一系列的內(nèi)容需要細(xì)致的闡述清楚,讓人更加能夠了解你的意圖。

八、UI情緒板模板分享

由于我日常以設(shè)計(jì)UI為主,因此可以給大家重點(diǎn)分享我在UI情緒板設(shè)計(jì)的經(jīng)驗(yàn)。希望可以幫助到大家快速上手。

當(dāng)你在做UI設(shè)計(jì)情緒板時(shí),需要明確了解UI設(shè)計(jì)中的結(jié)構(gòu),更系統(tǒng)性地去思考整體的內(nèi)容。我們?cè)赨I設(shè)計(jì)中往往需要包含以下這些內(nèi)容:圖形系統(tǒng)(圖標(biāo)+輔助圖形)、顏色系統(tǒng)、字體字形系統(tǒng)、質(zhì)感形態(tài)、界面形態(tài)、插圖風(fēng)格、動(dòng)效系統(tǒng)、影像系統(tǒng),等等這些部分的內(nèi)容。

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

1. UI情緒板模版

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

2. 過(guò)往實(shí)際案例分享

案例一:整體風(fēng)格比較偏個(gè)性一些,頁(yè)面嘗試用深色的背景設(shè)計(jì)。

  • 優(yōu)點(diǎn):整體風(fēng)格比較酷,配色比較未來(lái)感符合年輕的人的審美,深色的背景讓內(nèi)容更加聚焦。
  • 缺點(diǎn):深色的設(shè)計(jì)接受度是否可以,是否適合平臺(tái)類APP設(shè)計(jì)。

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

案例二:整體風(fēng)格3D化的設(shè)計(jì),包括頁(yè)面的一些體驗(yàn)上都可以增加視察的效果來(lái)設(shè)計(jì)。

  • 優(yōu)點(diǎn):整體設(shè)計(jì)風(fēng)格比較新穎,符合現(xiàn)在的設(shè)計(jì)趨勢(shì),整體感覺(jué)也比較年輕多彩。
  • 缺點(diǎn):3D的制作成本相對(duì)較大。

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

案例三:整體風(fēng)格比較清爽,白色融入漸變的設(shè)計(jì)也會(huì)顯得比較年輕。

  • 優(yōu)點(diǎn):整體頁(yè)面清爽,可以滿足任何內(nèi)容的透出,漸變色的圖標(biāo)和按鈕的設(shè)計(jì)補(bǔ)充了細(xì)節(jié)。
  • 缺點(diǎn):整體氛圍感、娛樂(lè)感較弱。

情緒板設(shè)計(jì):助你打開(kāi)設(shè)計(jì)創(chuàng)意

九、總結(jié)

很多時(shí)候我們會(huì)覺(jué)得情緒板設(shè)計(jì)可有可無(wú),或者因?yàn)闀r(shí)間的關(guān)系不允許我們經(jīng)過(guò)這一步。但,如我一開(kāi)始提到的點(diǎn),情緒板可以在前期幫助我們?nèi)ゴ蛲ê芏嗨伎嫉谋趬荆o助設(shè)計(jì)師在前期直觀的與產(chǎn)品側(cè)進(jìn)行方向上的探討,從而找到大方向上的共識(shí)。

以上都是屬于我個(gè)人總結(jié)的一些經(jīng)驗(yàn),因此建議大家在日常項(xiàng)目中多去嘗試,并在嘗試中找到適合自己的方法。

 

作者:dayvi,來(lái)自騰訊社交用戶體驗(yàn)設(shè)計(jì)部

推薦關(guān)注公眾號(hào) “騰訊設(shè)計(jì)”( 微信ID:TencentDesign ),第一時(shí)間獲取騰訊官方的設(shè)計(jì)方法論

本文由 @騰訊設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Pexels,基于CC0協(xié)議

作者:Michelle;主創(chuàng)團(tuán)隊(duì):騰訊用戶研究與體驗(yàn)設(shè)計(jì)部

來(lái)源公眾號(hào):騰訊設(shè)計(jì)(ID:TencentDesign),設(shè)計(jì)向善

本文由人人都是產(chǎn)品經(jīng)理合作媒體 @騰訊設(shè)計(jì) 授權(quán)發(fā)布,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash,基于 CC0 協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 情緒版也可以對(duì)應(yīng)說(shuō)找設(shè)計(jì)參考方向

    來(lái)自廣東 回復(fù)
  2. 情緒版是否等于競(jìng)品分析+設(shè)計(jì)師設(shè)計(jì)思路

    來(lái)自廣東 回復(fù)
  3. 時(shí)間充足,可以借助情緒板分享看法、意見(jiàn),時(shí)間緊張,可以借助一些其他方法進(jìn)行分享。找到適合自己的事最重要的。

    來(lái)自陜西 回復(fù)
  4. 情緒板在具象設(shè)計(jì)想法上的確會(huì)給予很大幫助,就像一千個(gè)人有一千個(gè)哈姆雷特,你永遠(yuǎn)不知道對(duì)方與自己理解和想象的畫(huà)面究竟相差得多遠(yuǎn)。產(chǎn)品經(jīng)理們可以好好運(yùn)用情緒板。

    來(lái)自廣東 回復(fù)
  5. 情緒板對(duì)我們的設(shè)計(jì)起到了很大的影響作用。

    來(lái)自廣東 回復(fù)
  6. 好棒呀

    來(lái)自廣東 回復(fù)
  7. 情緒板確實(shí)挺重要的

    來(lái)自廣東 回復(fù)
  8. 文章思路清晰,寫(xiě)得很好

    來(lái)自廣東 回復(fù)