大家對(duì)原型工具應(yīng)該不陌生，無論是設(shè)計(jì)師還是產(chǎn)品經(jīng)理，或多或少都接觸過原型圖的工具，比如較為大眾熟知的Axure，國(guó)內(nèi)運(yùn)用較為廣泛的墨刀和摹客，以及一些較為小眾的產(chǎn)品。不難發(fā)現(xiàn)，大多數(shù)工具類產(chǎn)品的運(yùn)作模式幾乎都如出一轍：先免費(fèi)使用一段時(shí)間，養(yǎng)成了用戶認(rèn)知和習(xí)慣后，逐步開始投放廣告或者收取費(fèi)用變向商業(yè)化——原型工具產(chǎn)品自然也脫離不了這種運(yùn)作模式。所以在這個(gè)內(nèi)卷時(shí)代下，各大原型工具相繼脫穎而出，前段時(shí)間體驗(yàn)了一下摹客RP，這次就結(jié)合摹客RP這款原型工具產(chǎn)品來聊聊：內(nèi)卷時(shí)代下工具到底應(yīng)該怎么做

精一技o(jì)r擅百技？

要說怎么做一款產(chǎn)品，首先先確立這款產(chǎn)品的定位和方向，如果定位和方向上不對(duì)，自然后續(xù)鋪墊的功能還是需求都是在錯(cuò)誤的事情上繼續(xù)做錯(cuò)誤的事情，相信這是每一個(gè)產(chǎn)品人都不愿看到的。但往往理想很豐滿，現(xiàn)實(shí)卻很骨感：結(jié)合自己的從業(yè)經(jīng)歷，很多時(shí)候產(chǎn)品定位和方向是很難先做到清晰，然后才開始鋪設(shè)功能的；一般情況都是跟從競(jìng)品功能，快速拿到結(jié)果，才開始結(jié)合自身業(yè)務(wù)特效慢慢摸索產(chǎn)品定位和方向的

眾所周知，作為B端屬性的工具類產(chǎn)品，最為重要的無非就兩點(diǎn)：降本和增效，這兩點(diǎn)向來是B端尤其是偏工具類產(chǎn)品的核心目標(biāo)；那么如何降本和增效呢？有人說降低操作成本啊，降低認(rèn)知成本啊，降低學(xué)習(xí)成本啊，那到底降的是什么本？增效又是增的什么效？

從上圖可以看出，無論是降人力成本、認(rèn)知成本等等，還是增加學(xué)習(xí)效率、體驗(yàn)效率等等，所有對(duì)象都指向了用戶群體。有人就會(huì)問了：你這不是廢話嘛，工具不就是給用戶用的嘛？誒～還真不一樣！用戶群雖然特指一個(gè)群體，但是隸屬不同目標(biāo)下，自然而然也有類別區(qū)分

為什么這樣說，因?yàn)椴煌挠脩羧河胁煌墓δ茉V求；用戶A通過產(chǎn)品想達(dá)成目標(biāo)A，用戶B通過產(chǎn)品想達(dá)成目標(biāo)B，那么用戶A和用戶B從根本的目標(biāo)不相同，那么他倆的體驗(yàn)路徑和信息傳達(dá)也是需要有不同
的區(qū)分的，簡(jiǎn)單來說就是用戶達(dá)成的目標(biāo)不同，想看到的頁(yè)面和功能也不相同

把工具產(chǎn)品比喻成一個(gè)小中臺(tái)來說，所有用戶都是中臺(tái)的需求方，不同需求方的目的不同，但是作為小中臺(tái)來說都是需要同時(shí)滿足的。以摹客RP來舉例，作為一款協(xié)作產(chǎn)品，用戶群可大致分為產(chǎn)品經(jīng)理、UE設(shè)計(jì)師、研發(fā)等，而針對(duì)不同的用戶群目標(biāo)來看，產(chǎn)品經(jīng)理的核心目標(biāo)是快速通過原型具像化產(chǎn)品功能，而UE設(shè)計(jì)師則是通過產(chǎn)品經(jīng)理的思想以圖形化的形式表達(dá)出來，而身為研發(fā)的核心目標(biāo)是快速了解業(yè)務(wù)邏輯，以便構(gòu)思開發(fā)結(jié)構(gòu)

擅百技？

綜上所述來看，無非就是針對(duì)不同的用戶群體的需求都滿足嘛，我都把功能給你做上去不就好啦？表面上的確滿足了所有用戶群的需求，可事實(shí)上無形將各類的成本分?jǐn)偨o了各個(gè)用戶，怎么理解呢？大家可以腦補(bǔ)想象自己作為一名維修工，此時(shí)你急需把一顆梅花口的螺絲給取出來，這時(shí)候你來到工具間，你最希望看到下圖中哪個(gè)場(chǎng)景？

毋庸置疑大家肯定都會(huì)選擇右邊那個(gè)工具間，因?yàn)楣δ芘帕姓R有序，不管你維修工是水電維修還是建筑維修還是網(wǎng)絡(luò)維修，都能在這個(gè)工具間找你能幫你完成你的目標(biāo)。這便是所謂的擅百技——基于用戶群的需求全部將功能一一實(shí)現(xiàn)

還是以摹客RP舉例，當(dāng)不同用戶群進(jìn)入平臺(tái)，功能排列整齊有序，都有足夠的區(qū)域和節(jié)點(diǎn)幫助用戶群實(shí)現(xiàn)各自的目標(biāo)，產(chǎn)品經(jīng)理能通過組件庫(kù)、模板等快速輸出原型圖，UE設(shè)計(jì)師則能通過多樣的圖形、動(dòng)效等實(shí)現(xiàn)高保真交互稿，團(tuán)隊(duì)方面則有快捷拉起會(huì)議、在線留言等功能；所謂是將目前市面上幾乎所有原型工具功能，結(jié)合自身的發(fā)展沉淀做出的平臺(tái)
可是，擅百技就足夠了么？換句話說，當(dāng)你在找梅花口的的起子時(shí)，你會(huì)希望看到平口起子在眼前對(duì)你進(jìn)行干擾嗎？

精一技？

既然你說擅百技不好，那么接下來你是不是以為我會(huì)走極端，那就只針對(duì)產(chǎn)品經(jīng)理做一款原型工具精一技不就好了？大漏特漏！雖說術(shù)業(yè)有專攻，互聯(lián)網(wǎng)時(shí)代咱們包容性廣，咱不走極端，在每個(gè)用戶群的功能需求上更聚焦精細(xì)化不就行了，精一技不夠，咱們就精百技，每一個(gè)功能打磨透透的，卷到極致這樣夠不夠了？
這樣做OK，內(nèi)卷時(shí)代下大家都是這樣做的，但是會(huì)帶來一個(gè)新的問題：
在多維全局視角下，體驗(yàn)成本實(shí)際上均是嫁接分?jǐn)傆诟鱾€(gè)角色的
怎么理解這個(gè)問題呢？可以看到下面一張圖示意：

從二維視角下來看，各個(gè)角色以目標(biāo)核心出發(fā)各司其職，通過工具平臺(tái)功能都能很好實(shí)現(xiàn)目標(biāo)；但是我們不妨拔高一層視角來看看：

以多維全局視角來看，雖然各個(gè)角色各司其職完成了自己的目標(biāo)，但是基于產(chǎn)品使用層完全是由平臺(tái)承載的，導(dǎo)致了各個(gè)角色的使用成本嫁接分?jǐn)偨o了其他角色，簡(jiǎn)答來說就是：
角色A完成對(duì)應(yīng)目標(biāo)時(shí)，存在角色B和角色C的信息干擾，那么角色A無形中分?jǐn)偭私巧獴和C的成本
舉個(gè)例子：產(chǎn)品經(jīng)理打開原型工具后，想直接拖動(dòng)下拉框組件搭建一個(gè)產(chǎn)品原型，這時(shí)候選中下拉框組件想進(jìn)行文案編輯，此時(shí)彈出了下拉框組件對(duì)應(yīng)的編輯面板：字號(hào)、字色、字體、行高、字間距等等，然后其中部分功能則屬于設(shè)計(jì)同學(xué)關(guān)注的，例如字體、字色、字間距等，但是此類成本則分?jǐn)偨o了產(chǎn)品經(jīng)理，產(chǎn)品經(jīng)理在整個(gè)搭建原型的過程中，增設(shè)了過濾這些信息的成本

那有人就會(huì)說了，這很簡(jiǎn)單啊，可以直接做成個(gè)性化定制工具平臺(tái)啊，根據(jù)每個(gè)角色身份不同進(jìn)來設(shè)計(jì)師進(jìn)來就只看到和設(shè)計(jì)相關(guān)的功能，產(chǎn)品經(jīng)理進(jìn)來就只看到和產(chǎn)品相關(guān)的功能不就好了？而且我把每一個(gè)角色對(duì)應(yīng)的功能做到專精，是不是就精一技且解決問題了？

我要打十個(gè)！

看到這個(gè)標(biāo)題大家可能會(huì)想到我們的詠春葉問老師，無論對(duì)手學(xué)的什么招數(shù)、有多少個(gè)人，葉師傅都能一人單挑全部，然后撂下一句霸氣的：“我要打十個(gè)！”
收一收，繼續(xù)回來我們的主題上來，是否將工具平臺(tái)做成個(gè)性化定制平臺(tái)并且其中功能都打磨細(xì)致，就能解決工具降本增效的問題了？其實(shí)不然，問題不能想得太復(fù)發(fā)，當(dāng)然也不能想得很簡(jiǎn)單，都知道用戶需求是分階段而不同的，可能產(chǎn)品經(jīng)理A不需要設(shè)置字號(hào)大小顏色，但是產(chǎn)品經(jīng)理B為了今年績(jī)效決定卷一卷同事，立志要出“高保真原型”，開始設(shè)置起了字號(hào)大小顏色，此時(shí)平臺(tái)功能又被局限住了
那么究竟應(yīng)該怎么做呢？不妨把眼界跳出同類競(jìng)品Axure、墨刀等，結(jié)合不同多角色并行的工具搭建類產(chǎn)品做競(jìng)品調(diào)研，得出兩個(gè)不同的產(chǎn)品方向思路：

思路1是像葉師傅詠春拳一樣，見招拆招：平臺(tái)以通過不同身份拆分成不同時(shí)間段進(jìn)行角色管理
大致以上中下游角色進(jìn)行功能分發(fā)，例如產(chǎn)品初期，上游的產(chǎn)品視角進(jìn)入平臺(tái)，基礎(chǔ)的團(tuán)隊(duì)管理、項(xiàng)目管理、關(guān)聯(lián)PRD等，然后進(jìn)行聚焦產(chǎn)品原型搭建；之后流到中游由設(shè)計(jì)師進(jìn)行二次加工，包括高保真原型稿、交互動(dòng)效、串聯(lián)頁(yè)面跳轉(zhuǎn)等；最后流到下游研發(fā)團(tuán)隊(duì)視角，研發(fā)通過已經(jīng)二次加工過的高保真設(shè)計(jì)稿進(jìn)行框架搭建、前后端接口串聯(lián)等開發(fā)評(píng)估
站在平臺(tái)的視角來看，綜上所述產(chǎn)品方向可拆解為：
時(shí)間維度：核心解決降本問題，包含時(shí)間成本、溝通成本，更加以維度追溯問題（產(chǎn)品問題追溯上游、設(shè)計(jì)問題追溯中游等等）
角色維度：核心解決增效問題，減少信息干擾、提升操作效率、溝通效率和協(xié)作效率

思路2則是基于前面?zhèn)€性化定制工具平臺(tái)的思路上進(jìn)行優(yōu)化改造的，通過不同角色視角進(jìn)入不同的工具平臺(tái)，通過數(shù)據(jù)打通串聯(lián)實(shí)現(xiàn)多角色同平臺(tái)操作，減少時(shí)間維度上的強(qiáng)依賴關(guān)系
例如產(chǎn)品進(jìn)入平臺(tái)，依舊是創(chuàng)建項(xiàng)目、管理團(tuán)隊(duì)等，然后開始進(jìn)行產(chǎn)品形態(tài)輸入和原型搭建，之后UE同學(xué)便能在同平臺(tái)看到協(xié)作項(xiàng)目進(jìn)行產(chǎn)出或者進(jìn)行二次優(yōu)化，最終通過管理員權(quán)限人員進(jìn)行收口；其次針對(duì)平臺(tái)來說，不斷更新同步的數(shù)據(jù)，能間接豐富平臺(tái)的多元化

無論是思路1還是思路2，不難發(fā)現(xiàn)：將原型工具的核心目標(biāo)降本和增效，往上抽象出一層就是圍繞兩個(gè)維度在解決問題：一個(gè)是具備時(shí)效性的時(shí)間維度，一個(gè)是具備多元性的角色維度。從上圖可以感知到：不同時(shí)間節(jié)點(diǎn)，不同角色介入的時(shí)間隨著時(shí)間維度的增加而變化
因?yàn)檎麄€(gè)項(xiàng)目周期，不同職能的角色一定會(huì)有先后順序，那么有了這一層抽象以后，無論你的需求刻畫多么具體，無論你的case多么邊界，只要緊貼圍繞這兩個(gè)維度進(jìn)行優(yōu)化，都是從本質(zhì)上解決工具平臺(tái)的降本和增效問題

作者：雨灰    來源：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

最近很流行一個(gè)詞——B端C化，解釋出來就是可以用C端的模式和思維來對(duì)B端產(chǎn)品進(jìn)行設(shè)計(jì)，討論者大致分為兩種觀點(diǎn)：

1.C端產(chǎn)品市場(chǎng)已經(jīng)趨于飽和，可拓展空間剩余不多了，B端產(chǎn)品市場(chǎng)還是一片藍(lán)海，于是產(chǎn)生了一些C端設(shè)計(jì)師轉(zhuǎn)型去做B端了，將一些C端的模式和思維帶到了B端設(shè)計(jì)中，導(dǎo)致越來越多的B端逐漸C化；

2.B端產(chǎn)品市場(chǎng)互相競(jìng)爭(zhēng)，為了在同市場(chǎng)中打出差異化，于是一些B端市場(chǎng)開始招攬C端設(shè)計(jì)師培養(yǎng)轉(zhuǎn)型，并且嘗試融入C端產(chǎn)品的模式和思維在同市場(chǎng)內(nèi)競(jìng)爭(zhēng)，是產(chǎn)品設(shè)計(jì)的“內(nèi)卷化”現(xiàn)象，導(dǎo)致市面上的C化的B端產(chǎn)品越來越多；

但上述無論哪一種觀點(diǎn)，都在闡述一種現(xiàn)象或者趨勢(shì)：不管是交互還是視覺還是UI，目前部分C端設(shè)計(jì)師正在往B端設(shè)計(jì)師轉(zhuǎn)型。這個(gè)現(xiàn)象的發(fā)生對(duì)整個(gè)設(shè)計(jì)行業(yè)來說無異于新增了很多新亮點(diǎn)——市場(chǎng)上越來越多的B端交互、數(shù)據(jù)可視化視覺等需求，進(jìn)而導(dǎo)致對(duì)市場(chǎng)培訓(xùn)行業(yè)開始產(chǎn)生B端培訓(xùn)的訴求，同時(shí)也破空而出了很多優(yōu)秀的B端設(shè)計(jì)師。那么B端C化到底是什么，和傳統(tǒng)B端C端有什么區(qū)別，有這方面想法訴求的同學(xué)怎么去實(shí)現(xiàn)轉(zhuǎn)型？

由于我本人之前是做C端UI設(shè)計(jì)師，到后來轉(zhuǎn)型成為B端交互設(shè)計(jì)師，而接觸的業(yè)務(wù)恰好涉及B端和C端的聯(lián)動(dòng)以及多角色之間的協(xié)作，所以這篇文章借助結(jié)合我個(gè)人的經(jīng)驗(yàn)和看法，談一談自己對(duì)B端C化的理解

B端C端的區(qū)別

在談B端C化之前，需要先了解B端和C端的區(qū)別是什么。B端C端的區(qū)別網(wǎng)上有很多文章和概述了，大致歸納下來主要以四個(gè)維度去區(qū)分：受眾主體、上線周期、業(yè)務(wù)類型和產(chǎn)品側(cè)重點(diǎn)這四個(gè)維度，其余的維度也會(huì)有區(qū)分，但是影響較小，主要還是圍繞以上四個(gè)維度進(jìn)行B端和C端區(qū)分

受眾主體

受眾主體也就是相對(duì)應(yīng)產(chǎn)品的用戶群體。C端的受眾主體是大眾用戶，特征為多樣化，用戶與用戶之間跨度也大，但是場(chǎng)景和路徑較為單一的，比如C端產(chǎn)品就以年齡層、城市、性別等來劃分用戶，每個(gè)階段的用戶都有不同的訴求、認(rèn)知和習(xí)慣等等；在做任何決策方面都屬于偏感性（Heart）的個(gè)人決策（Personal）；用戶穩(wěn)定性則比較差，要是對(duì)產(chǎn)品不滿意，可以立馬換另一款產(chǎn)品，轉(zhuǎn)換門檻低，有多個(gè)競(jìng)爭(zhēng)對(duì)手產(chǎn)品可供選擇；

而B端產(chǎn)品的受眾主體則是為組織群體，特征為多場(chǎng)景和多維度，用戶群體較為清晰明確，可以按照崗位、角色、權(quán)限等劃分用戶群，但是之間的關(guān)系更加復(fù)雜，比如設(shè)計(jì)一個(gè)銀行內(nèi)部管理系統(tǒng)，用戶群就很明確清晰——銀行各級(jí)職員角色，根據(jù)職級(jí)關(guān)系設(shè)計(jì)不同的功能以及權(quán)限；在做任何決策方面都屬于偏理性（Head）的團(tuán)隊(duì)性決策（Team）；用戶穩(wěn)定性較強(qiáng)，要是對(duì)產(chǎn)品不滿意，也只能被迫適應(yīng)和忍受，轉(zhuǎn)換成本較高，幾乎沒有其他產(chǎn)品可供選擇

上線周期

上線周期就是指產(chǎn)品從需求階段到設(shè)計(jì)階段。到開發(fā)階段直至最后產(chǎn)品上線所需要的周期。C端產(chǎn)品上線周期模式有個(gè)很明確的特點(diǎn)：快速迭代、敏捷，很多C端產(chǎn)品功能更新迭代的速度很快，上線周期非常短，往往半個(gè)月甚至一周就完成開發(fā)上線，加上用戶群的多樣性和跨度大，所以在上線的時(shí)候往往會(huì)需要AB實(shí)驗(yàn)去驗(yàn)證方案可行性；

B端產(chǎn)品上線周期則是和C端一個(gè)對(duì)立面——長(zhǎng)，少則雙月/季度多則半年/一年等，因?yàn)锽端產(chǎn)品流程上都屬于重型流程，角色之間關(guān)系復(fù)雜，交互系統(tǒng)較為繁瑣，需求的改動(dòng)和迭代并沒有那么頻繁，也不需要像C端產(chǎn)品那樣快速上線搶占市場(chǎng)，所以B端上線周期會(huì)很慢，也導(dǎo)致在工作強(qiáng)度上相比C端較為輕松一些，但是缺點(diǎn)就是結(jié)果沒有C端來的那么快和明顯

業(yè)務(wù)類型

C端產(chǎn)品的核心競(jìng)爭(zhēng)力就是產(chǎn)品本身，關(guān)鍵總結(jié)就是讓用戶爽就完事了，所以C端產(chǎn)品的需求類型往往圍繞用戶群的痛點(diǎn)產(chǎn)生；因?yàn)镃端用戶跨度大，不同的用戶群體有不同的痛點(diǎn)，所以導(dǎo)致C端的需求類型不是很明確清晰，需要不斷從用戶身上去探索挖掘需求，在不斷的試錯(cuò)中逐漸得出正確的結(jié)論；

B端產(chǎn)品的核心競(jìng)爭(zhēng)力除了產(chǎn)品本身，還依賴復(fù)雜的關(guān)系、渠道、技術(shù)和資源，你的關(guān)系夠硬、渠道夠廣、技術(shù)夠領(lǐng)先、資源夠豐富，哪怕你的產(chǎn)品很一般，一樣能領(lǐng)先其他同行業(yè)的競(jìng)爭(zhēng)對(duì)手，關(guān)鍵總結(jié)下來就是讓用戶贏就夠了；B端產(chǎn)品的需求類型雖然也是圍繞著用戶群的痛點(diǎn)產(chǎn)生，但需求的目標(biāo)是更加明確清晰的，加上需求變更的頻率、范圍往往都有契約/合同所約束，所以相較于C端產(chǎn)品來說，B端產(chǎn)品是需求更加明確且容易達(dá)成目標(biāo)

產(chǎn)品側(cè)重點(diǎn)

產(chǎn)品側(cè)重點(diǎn)無異于區(qū)分C端和B端最明顯的門檻了，C端產(chǎn)品的側(cè)重點(diǎn)主要在于體驗(yàn)，而B端產(chǎn)品的側(cè)重點(diǎn)主要在于效益

前面提到過C端產(chǎn)品核心讓用戶爽就完事了，加上基于用戶更換產(chǎn)品的成本很低：你這款產(chǎn)品我用不爽就換掉了，所以C端產(chǎn)品的側(cè)重點(diǎn)永遠(yuǎn)以用戶體驗(yàn)為主，前面說的需求業(yè)務(wù)類型也幾乎是圍繞用戶體驗(yàn)產(chǎn)生的；大家對(duì)比市場(chǎng)上同類型的C端產(chǎn)品，界面、交互、功能都不會(huì)差很多，是因?yàn)榻?jīng)過長(zhǎng)時(shí)間的更新迭代，已經(jīng)沉淀下來目前最好的用戶體驗(yàn)類型了，隨著產(chǎn)品量級(jí)越大，改變用戶體驗(yàn)類型就越謹(jǐn)慎；C端產(chǎn)品就是為了尋找并解決用戶痛點(diǎn)、癢點(diǎn)和爽點(diǎn)，加上品牌性、用戶隱私等因素考量，產(chǎn)品側(cè)重點(diǎn)聚焦于用戶體驗(yàn)

B端產(chǎn)品側(cè)重點(diǎn)則是圍繞效益了，因?yàn)樽鳛橐粋€(gè)團(tuán)隊(duì)使用的產(chǎn)品，不管是從易用性、功能性還是安全性，為這個(gè)團(tuán)隊(duì)解決問題為首要基礎(chǔ)，那么使用者的體驗(yàn)、產(chǎn)品的美觀度等等相較于優(yōu)先級(jí)就沒有那么高了，所以導(dǎo)致了有一段時(shí)間大家對(duì)B端的理解依舊是老舊、丑、難用的認(rèn)知上；B端產(chǎn)品就是為了使用產(chǎn)品的團(tuán)隊(duì)解決效率、成本、營(yíng)收的問題，加上產(chǎn)品的穩(wěn)定性、安全性等因素的考量，產(chǎn)品側(cè)重點(diǎn)自然更聚焦在效益上

什么是B端C化

前面了解了B端和C端產(chǎn)品的區(qū)別，接下來聊一聊什么是B端C化；簡(jiǎn)單來說從字面意思理解就是B端的設(shè)計(jì)層面逐漸靠近C端，網(wǎng)上也有很多B端可視化、趨勢(shì)潮流的設(shè)計(jì)和文章，但是B端C化不僅僅是從視覺設(shè)計(jì)上的改良，下面我逐漸從大到小聊一下我對(duì)B端C化的理解

功能架構(gòu)

在做過很多B端產(chǎn)品之后發(fā)現(xiàn)，往往很多產(chǎn)品經(jīng)理是對(duì)整個(gè)產(chǎn)品架構(gòu)、功能形態(tài)一切都清晰地了如指掌，但是有時(shí)候在搭建產(chǎn)品架構(gòu)的時(shí)候，功能形態(tài)單一粗糙，步驟復(fù)雜且笨拙；站在業(yè)務(wù)產(chǎn)品的視角來看，架構(gòu)邏輯上都是沒有問題的，但是站在用戶視角來看，整體框架是混亂破碎的，步驟繁瑣且復(fù)雜，導(dǎo)致用戶對(duì)產(chǎn)品的認(rèn)知變差，但是又不得不去用這個(gè)產(chǎn)品，只能被迫去學(xué)習(xí)使用

比如一個(gè)產(chǎn)品案例，就是一個(gè)產(chǎn)品的底層邏輯是前端輸入素材id，后端返還一個(gè)素材后就可以使用了，站在產(chǎn)品業(yè)務(wù)視角來看，這樣設(shè)計(jì)沒有什么問題，符合產(chǎn)品的底層邏輯；但是站在用戶視角就特別難受了，用戶想用一個(gè)素材，還要去尋找id然后輸入搜索，像C端那樣全部鋪出來給用戶選不好嘛？

行為習(xí)慣

行為習(xí)慣自然是指用戶群在該行業(yè)下的行為習(xí)慣，電商行業(yè)、社交行業(yè)等等不同行業(yè)的習(xí)慣、專業(yè)術(shù)語等都不相同，這個(gè)在C端產(chǎn)品中都很能得到體驗(yàn)，比如電商行業(yè)的大紅大紫，社交行業(yè)的左右滑動(dòng)等等，這類有著很明顯的行業(yè)屬性和大眾認(rèn)知，一樣是B端設(shè)計(jì)中應(yīng)該注意的點(diǎn)

最經(jīng)典的案例就是紅色綠色的定義區(qū)分，在數(shù)據(jù)產(chǎn)品認(rèn)知中，綠色代表數(shù)據(jù)漲了，紅色代表數(shù)據(jù)跌了，比如GMV數(shù)據(jù)，DAU數(shù)據(jù)等，紅色為重點(diǎn)關(guān)注的數(shù)據(jù)；而在金融行業(yè)中，基金股票紅色代表漲了，綠色則代表跌了，所以設(shè)計(jì)的原則一定得是基于不同行業(yè)的用戶行為習(xí)慣

信息層級(jí)

B端產(chǎn)品的信息量一般是很龐大的，尤其是數(shù)據(jù)、表單、審批等B端產(chǎn)品，涉及到不同角色不同權(quán)限的開放等，所以用戶能否能一眼看清關(guān)鍵信息，能否幫助用戶快速達(dá)成目標(biāo)，是交互層面針對(duì)信息層級(jí)的設(shè)計(jì)處理一個(gè)重要的環(huán)節(jié)

之前很常見B端產(chǎn)品中信息處理的方法就是堆積處理，直接將信息、數(shù)據(jù)等平鋪展示，比如很久之前的某牛商家端后臺(tái)等老舊系統(tǒng)；現(xiàn)在很多新的B端產(chǎn)品都是以模塊化處理方法將信息層級(jí)區(qū)分，使得模塊之間間隔更明顯，信息處理的效率更高，宛若C端中的卡片式設(shè)計(jì)

設(shè)計(jì)語言

設(shè)計(jì)語言自然是B端設(shè)計(jì)中標(biāo)題、字號(hào)、顏色等規(guī)范標(biāo)準(zhǔn)，早些年把B端產(chǎn)品組件化后且開源的自然是阿里老大哥了，當(dāng)時(shí)最早的AntDesign、以及后來的ElementDesign組件庫(kù)，到現(xiàn)在都被很多中小企業(yè)甚至大廠某些產(chǎn)品一直使用中，但隨著B端產(chǎn)品的普及和發(fā)展，越來越多的企業(yè)開始將自己產(chǎn)品沉淀出完善成套的設(shè)計(jì)語言，并搭建出自己的組件庫(kù)投入使用了

用戶體驗(yàn)

如何去衡量用戶體驗(yàn)是否是好的，最客觀來講當(dāng)然是通過數(shù)據(jù)去衡量，而數(shù)據(jù)往往在C端產(chǎn)品中很常見，不管是體驗(yàn)數(shù)據(jù)還是表現(xiàn)數(shù)據(jù)，都是C端產(chǎn)品中最為關(guān)注的；然而在B端產(chǎn)品中，更多收集的一般都是業(yè)務(wù)表現(xiàn)數(shù)據(jù)，幾乎沒有衡量用戶使用平臺(tái)的相關(guān)數(shù)據(jù)，大多衡量體驗(yàn)的方法都是依靠問卷反饋的形式；但在B端C化的過程中，用戶體驗(yàn)的數(shù)據(jù)也逐漸被加入到B端產(chǎn)品當(dāng)中來，成為體驗(yàn)標(biāo)準(zhǔn)的考核之一：比如某個(gè)任務(wù)完成的時(shí)長(zhǎng)，報(bào)錯(cuò)出現(xiàn)的頻次、某某工具的使用率等

視覺設(shè)計(jì)

最后就是B端C化表現(xiàn)層的設(shè)計(jì)，包括目前主流的設(shè)計(jì)趨勢(shì)如大數(shù)據(jù)可視化、3D建模、材質(zhì)質(zhì)感、Dark模式等都逐漸融入到B端產(chǎn)品中，使得B端產(chǎn)品不再追求簡(jiǎn)單的“功能優(yōu)先”和“能用就行”，而是像C端那樣追求更美觀的視覺，更極致的體驗(yàn)

為什么要B端C化

總結(jié)下來“B端C化”就是B端產(chǎn)品無論是從功能架構(gòu)還是視覺體驗(yàn)，越來越趨于人性考慮設(shè)計(jì)，越來越關(guān)注使用者的感受和反饋，因?yàn)檎f白了不管B端產(chǎn)品代替成本高不高，用戶是一群專業(yè)人士還是普通職員，使用者歸根到底還是“人”在使用產(chǎn)品，那么必然會(huì)帶來體驗(yàn)相關(guān)的問題；所以B端C化會(huì)逐漸形成一種趨勢(shì)，在企業(yè)平臺(tái)資源支持的情況下，會(huì)將B端產(chǎn)品的功能放大，追趕市場(chǎng)競(jìng)爭(zhēng)，逐利行業(yè)內(nèi)卷，在體驗(yàn)和視覺感官上也會(huì)更加的人性化，結(jié)果自然是產(chǎn)品設(shè)計(jì)者們更加的卷了（手動(dòng)狗頭）

總結(jié)

無論是現(xiàn)在的B端C化還是將來其他多元的設(shè)計(jì)趨勢(shì)，隨著市場(chǎng)的競(jìng)爭(zhēng)和行業(yè)內(nèi)卷，已經(jīng)反推著設(shè)計(jì)師們不單單局限于照顧自己的“三分田地”了，無論是之前視覺設(shè)計(jì)師開始學(xué)習(xí)3D建模，還是UI設(shè)計(jì)師嘗試接觸代碼設(shè)計(jì)，設(shè)計(jì)師最大的品質(zhì)就是應(yīng)該緊跟時(shí)代的趨勢(shì)變化，及時(shí)調(diào)整補(bǔ)充自己的能力，提升自我的競(jìng)爭(zhēng)力，才是在當(dāng)今環(huán)境下立足的根本

作者：雨灰       來源：站酷 

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

1、卡片的造型

1）圓角

不同的圓角，所帶來的氣質(zhì)是不同的。圓角很小，視覺印象是硬朗，高冷，具有攻擊性的，多用于嚴(yán)肅、高端、沖突感強(qiáng)烈的設(shè)計(jì)中；而更大的圓角給人的感覺是有親和力，柔軟，安全的，多用于兒童產(chǎn)品、娛樂性強(qiáng)的設(shè)計(jì)中。

在設(shè)計(jì)的時(shí)候，根據(jù)自己的產(chǎn)品屬性選擇氣質(zhì)相符的圓角設(shè)計(jì)很有必要。

常見的卡片弧度形式有4類：直接、小圓角、大圓角、特殊圓角

我一般喜歡用4的倍數(shù)來設(shè)置圓角，比如圓角大小為4px、8px、12px之類的。要注意的是，圓角越大，可用面積會(huì)越小，需要根據(jù)實(shí)際場(chǎng)景進(jìn)行平衡，以視覺上舒服為宜。

2）比例

卡片的比例，我習(xí)慣遵循一些美感規(guī)律，比如黃金比例（1.618），白銀比例（1.414），青銅比例（1.732），正方形之類的比例。當(dāng)然，實(shí)際設(shè)計(jì)需求中的比例，還是要結(jié)合內(nèi)容的多少具體分析。

我的經(jīng)驗(yàn)是，當(dāng)比較接近這些美感比例其中之一時(shí)，就直接優(yōu)化到這個(gè)比例。比如做了一個(gè)卡片，寬高比是1.5，比較接近于黃金比例，我就干脆讓它等于黃金比例。

3）異型

除了正常的卡片樣式，還可以做一些異型的卡片設(shè)計(jì)。異型卡片具有較強(qiáng)的形式感和視覺沖擊力，所以會(huì)比較多的用在游戲或者運(yùn)營(yíng)相關(guān)的界面中，吸引用戶的注意力。缺點(diǎn)是批量化設(shè)計(jì)成本略高且因?yàn)檫^于風(fēng)格化而不夠耐看。

2、卡片的效果

1）顏色

卡片的顏色搭配可以使用純色和漸變色。這些顏色與文字之間的對(duì)比要符合界面對(duì)比度標(biāo)準(zhǔn)（ https://contrast-grid.eightshapes.com/，這個(gè)網(wǎng)站可以直接查到可用性數(shù)值，只要不是DNP就是可以用的配色），以免影響內(nèi)容本身的閱讀。如果拿不準(zhǔn)的話，可以多用一些白色，比較不容易出錯(cuò)。

純色卡片設(shè)計(jì)會(huì)讓界面顯得冷靜高級(jí)，但對(duì)配色的要求相對(duì)較高，用不好的話會(huì)顯得單調(diào)，沉悶。如果你堅(jiān)持要用這種卡片配色的話，建議搭配一些圖形紋理，會(huì)更容易把控，還能提升畫面細(xì)節(jié)。

純色卡片設(shè)計(jì)

漸變色的卡片設(shè)計(jì)目前較為常見，層次細(xì)節(jié)更加豐富，畫面也顯得更活潑一些。

漸變色卡片設(shè)計(jì)https://dribbble.com/shots/12284120-Wallet-Design-App

有些朋友經(jīng)常因?yàn)榕渖缓枚l(fā)愁，其實(shí)是需要多去找一些參考來看的，實(shí)在擔(dān)心配色不好，直接去吸優(yōu)秀的配色方案也是OK的，但要注意搭配合理。

教大家一個(gè)方法，去dribbble上搜color或直接打開https://dribbble.com/search/color這個(gè)鏈接，就可以看到非常多的優(yōu)秀配色方案了。

2）圖案

卡片的設(shè)計(jì)還可以結(jié)合輔助圖形，以圖案的形式與卡片進(jìn)行結(jié)合。這些輔助圖形可以來源于品牌符號(hào)的延伸，讓品牌有更多的露出機(jī)會(huì)。

也可以是運(yùn)用一些簡(jiǎn)單的圖形，提升卡片的設(shè)計(jì)細(xì)節(jié)，以下是一些還不錯(cuò)的設(shè)計(jì)案例。這些卡片上的圖形都有借鑒參考的價(jià)值，自己平時(shí)有時(shí)間的話，也可以多做一些作為圖形的儲(chǔ)備。強(qiáng)烈建議收藏，真的可以很有用。

來源：https://dribbble.com/shots/10513966-Gradient-Bank-cards

來源：https://dribbble.com/shots/10498737-Dark-Bank-Application-Design

來源：https://dribbble.com/shots/11313260-Finance-App-Exploration

來源：https://www.behance.net/gallery/84029601/100-Financial-Virtual-Design-Cards-PSD-XD

這里彩云給大家找了非常多的卡片設(shè)計(jì)形式，可以從中參考學(xué)習(xí)配色和紋理造型。

3）圖片、視頻

卡片背景也可以用圖片和視頻的形式進(jìn)行設(shè)計(jì)，圖片和視頻的選擇一般會(huì)偏暗色，以不影響內(nèi)容閱讀為準(zhǔn)。

來源：https://dribbble.com/shots/5717917-Travel-Article-Application

3、卡片的內(nèi)容

1）文字

卡片上的文字不要太長(zhǎng)，我的經(jīng)驗(yàn)是橫向不要超過42字（關(guān)于這個(gè)字?jǐn)?shù)，有資料可以查，感興趣的可以找找看），縱向不要超過5行。過多的文本不建議使用卡片形式。

其實(shí)這張卡片的設(shè)計(jì)中，我也用到了黃金比例來指導(dǎo)自己的設(shè)計(jì)，方便快速確定文字比例關(guān)系。

2）間距（網(wǎng)格法）

卡片上的文字間距最好有一定的規(guī)律，這里可以按網(wǎng)格法來規(guī)劃，比如8px網(wǎng)格，10px網(wǎng)格等等。網(wǎng)格的使用其實(shí)可以很靈活，比如我這里的卡片其實(shí)就用到了8px網(wǎng)格，各間距就會(huì)用8的倍數(shù)來做。大小比例就盡量用黃金比例來處理，這樣做目的一方面是為了讓界面有秩序，另一方面是提升決策效率。秩序產(chǎn)生美，而效率讓你早點(diǎn)下班。

3）減少線框

卡片中盡量減少線框，多用留白來進(jìn)行內(nèi)容劃分。

4）層次清晰

卡片中的內(nèi)容層級(jí)要做好，標(biāo)題和內(nèi)容之間的差異要明顯。這里的層次主要是通過對(duì)比拉開的，做好對(duì)比的關(guān)鍵就是對(duì)比效果要強(qiáng)烈，決不能模棱兩可。

比如下圖中左邊的案例只是在文字的字號(hào)上有一定的對(duì)比，但字號(hào)間相差不大，效果不明顯，就會(huì)讓人看第一時(shí)間不知道看哪。而右側(cè)的案例則用了加粗，大字號(hào)，大留白等，讓畫面有了強(qiáng)烈的對(duì)比，從而產(chǎn)生更好的信息層級(jí)。

5) 內(nèi)容出界

只在卡片的框框里做設(shè)計(jì)，有時(shí)候未免顯得太呆板，破開卡片的邊界可以讓卡片本身更具形式感。如果被人說你的設(shè)計(jì)沒啥亮點(diǎn)，那內(nèi)容出界的設(shè)計(jì)就是一個(gè)很好的提升設(shè)計(jì)亮點(diǎn)的手法。

彩云曾經(jīng)做的一張banner就是運(yùn)用了出界的手法

來源：dribbble。界面上的天氣圖標(biāo)也用了出界的手法，讓畫面顯得更有亮點(diǎn)

4、卡片的細(xì)節(jié)

1）光感

卡片中的光感細(xì)節(jié)能提升設(shè)計(jì)的質(zhì)感。下面這張圖是我最近做的一張會(huì)員卡的背景設(shè)計(jì)，大家對(duì)比下，在卡片頂部加了1px高光線和斜面反光的細(xì)節(jié)前后的質(zhì)感區(qū)別。

這個(gè)小細(xì)節(jié)，我經(jīng)常會(huì)用到，執(zhí)行簡(jiǎn)單又容易出效果。

2）投影

投影的細(xì)節(jié)，不要過重，但又要能與背景分離開。有2個(gè)小技巧：

1.在取色的時(shí)候，可以選擇背景顏色的色相，然后略微加深一些，不要用純黑色來做投影，會(huì)顯臟。

2.投影的距離不要太小，太小的投影會(huì)顯得不夠自然；也不能太大，太大會(huì)很浪費(fèi)界面資源。

3）3D效果

3D卡片的設(shè)計(jì)，因?yàn)椴槐阌趦?nèi)容編排和閱讀，所以帶透視的卡片在實(shí)際UI中并不太常用。但在作品集包裝和運(yùn)營(yíng)頁(yè)面中，則可以帶來比較好的視覺沖擊力，可以嘗試運(yùn)用。

圖片來自：Cradle

作者：彩云Sky    來源：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

什么是圍繞應(yīng)用生命周期的編排設(shè)計(jì)

圍繞應(yīng)用生命周期的編排設(shè)計(jì)是一種企業(yè)級(jí)技術(shù)產(chǎn)品設(shè)計(jì)策略。

它的核心是要解決設(shè)計(jì)師很難上手企業(yè)級(jí)技術(shù)產(chǎn)品，且更加難以找到體驗(yàn)設(shè)計(jì)機(jī)會(huì)點(diǎn)的問題。我們是一群工作在企業(yè)級(jí)技術(shù)產(chǎn)品領(lǐng)域里的設(shè)計(jì)師，同時(shí)也是掘金者，這篇分享即是我們?cè)谄髽I(yè)級(jí)技術(shù)產(chǎn)品領(lǐng)域里探索的一些方法總結(jié)。

 

當(dāng)設(shè)計(jì)遇上技術(shù)

工作現(xiàn)狀

在我們?nèi)粘９ぷ髦校图夹g(shù)產(chǎn)品 PD 聊需求是一件非常痛苦的事情，他們講的每一個(gè)字都認(rèn)識(shí)，但是組合起來就不知道是干什么的了，因此設(shè)計(jì)師也很難去想象用戶是怎么在用這些功能。

因此相較于 C 端產(chǎn)品來說，B 端的技術(shù)產(chǎn)品目前還處于基本可用的狀態(tài)，更談不上什么體驗(yàn)了。

 

分析原因

究其原因，我們總結(jié)有三點(diǎn)：

① 這些產(chǎn)品大多數(shù)都是由技術(shù)來主導(dǎo)，功能優(yōu)先

② 設(shè)計(jì)在整個(gè)流程中都處于非常被動(dòng)的狀態(tài)

③ 設(shè)計(jì)與技術(shù)之間存在一定的專業(yè)壁壘，技術(shù)往往比較抽象難以理解

同時(shí)，我們的用戶并不是客戶，用戶不能根據(jù)自己的意愿喜好選擇產(chǎn)品。用戶隱藏在企業(yè)內(nèi)部，設(shè)計(jì)師日常中很難接觸到真實(shí)用戶。另一方面，用戶的技術(shù)專業(yè)背景與設(shè)計(jì)師的專業(yè)存在鴻溝，這使得設(shè)計(jì)師對(duì)用戶需求的理解也不夠深，所以說在這種環(huán)境隔離和語境不通的狀態(tài)下，設(shè)計(jì)師其實(shí)難以和用戶構(gòu)建同理心。

 

能做的事

在這種狹小的設(shè)計(jì)發(fā)揮空間里，我們能做什么呢？

其實(shí)我們?cè)O(shè)計(jì)師有明顯的優(yōu)點(diǎn)：

比較擅長(zhǎng)找規(guī)律找方法，有破局意識(shí)，從而能夠發(fā)現(xiàn)設(shè)計(jì)的機(jī)會(huì)點(diǎn)。

 

企業(yè)級(jí)技術(shù)產(chǎn)品設(shè)計(jì)探索

發(fā)現(xiàn)規(guī)律

所以我們回過頭看一下之前做過的這些產(chǎn)品和功能，從它們的作用對(duì)象、出現(xiàn)時(shí)間、用戶目標(biāo)、用戶行為這四個(gè)維度對(duì)他們進(jìn)行歸納和總結(jié)。

我們發(fā)現(xiàn)這些產(chǎn)品具有很強(qiáng)的階段性，通過不同的產(chǎn)品來支撐各個(gè)階段下的用戶目標(biāo)。用戶通過產(chǎn)品的功能來實(shí)現(xiàn)各種編排動(dòng)作，例如對(duì)應(yīng)用本身代碼的編排、對(duì)應(yīng)用依賴的底層資源的編排，從而支撐用戶應(yīng)用的生命周期。

因此企業(yè)級(jí)技術(shù)產(chǎn)品具有以下四個(gè)特點(diǎn)：

• 階段性

• 驅(qū)動(dòng)性

• 流程性

• 抽象性

提出策略-圍繞應(yīng)用生命周期的編排設(shè)計(jì)

首先我們要針對(duì)這四個(gè)特性進(jìn)行一輪判斷，了解這個(gè)產(chǎn)品的場(chǎng)景，場(chǎng)景下對(duì)應(yīng)的角色，每個(gè)角色執(zhí)行的是單線還是多線任務(wù)流，以及任務(wù)流是由哪些功能支撐。經(jīng)過這層判斷之后再定位具體問題：

① 每個(gè)階段的目標(biāo)是什么

② 階段下每個(gè)角色各自的小目標(biāo)又是什么

③ 任務(wù)要對(duì)應(yīng)用還是應(yīng)用相關(guān)的內(nèi)容進(jìn)行編排

④ 產(chǎn)品的功能是如何實(shí)現(xiàn)的

當(dāng)找到這些問題的答案以后，我們就可以對(duì)產(chǎn)品的上下游場(chǎng)景進(jìn)行編排，明確各階段的側(cè)重以及上下游場(chǎng)景的限制條件；對(duì)角色進(jìn)行權(quán)限分配以及協(xié)作觸點(diǎn)的確定；將任務(wù)流從起點(diǎn)到過程再到結(jié)果進(jìn)行梳理；以及最后通過對(duì)底層技術(shù)的理解，合理編排產(chǎn)品信息架構(gòu)和界面內(nèi)容。

為了能夠更加高效的完成以上信息的收集和處理，我們沉淀了 CMTD 四個(gè)小工具。

 

策略詳解

C 是 Collaboration，協(xié)同場(chǎng)景，主要回答四個(gè)問題：When、What、Who、Where。

① When：用以明確產(chǎn)品所處階段以及上下游階段，以全鏈路的視角看用戶的完整使用場(chǎng)景，因?yàn)楫a(chǎn)品往往可能只是解決用戶部分場(chǎng)景的問題

② What：定義當(dāng)前場(chǎng)景的階段目標(biāo)以及要做的事情

③ Who：當(dāng)前階段的事情由哪些角色參與

④ Where：這些角色在線上或線下是如何配合協(xié)作的

例如我們要做一個(gè)技術(shù)產(chǎn)品，通過 Collaboration，我們知道它覆蓋了發(fā)布階段、日常運(yùn)維階段，目的是把經(jīng)過測(cè)試的應(yīng)用發(fā)布上線并進(jìn)行日常維護(hù)，主要是運(yùn)維人員配合研發(fā)人員和發(fā)布經(jīng)理完成線上的問題排查和線下配置文檔的交接，我們就能比較清楚的知道我們要做的是一個(gè)運(yùn)維平臺(tái)。

 

M 是 multi-role，多角色，主要用以分析產(chǎn)品是由哪些角色共同協(xié)同驅(qū)動(dòng)的。

與 C 端產(chǎn)品不同的是，我們除了對(duì)核心角色的自然人屬性進(jìn)行洞察，還要定義清楚該角色的目標(biāo)有哪些，目標(biāo)對(duì)應(yīng)的任務(wù)流以及支撐的功能和權(quán)限。并且企業(yè)級(jí)技術(shù)產(chǎn)品往往都不是一個(gè)角色就能完全執(zhí)行完成，所以該角色的上下游角色也要摸清之間的協(xié)作觸點(diǎn)在哪里。

多角色的信息我們可以通過在客戶現(xiàn)場(chǎng)或者用戶訪談來收集，并沉淀為用戶角色庫(kù)。

基于收集來的用戶信息，來定義我們產(chǎn)品的角色：

 

T 是 Task flow，任務(wù)流。任務(wù)流一定是基于一個(gè)用戶角色的某個(gè)目標(biāo)，來定義任務(wù)的起點(diǎn)-過程-結(jié)果。

起點(diǎn)就是界面上用戶的操作入口，過程需要包含觸發(fā)操作、自操作、條件判斷以及是否有協(xié)作角色參與進(jìn)來，在結(jié)果處除了提供結(jié)果反饋還要提供下一任務(wù)的去向入口，幫助用戶把流程串聯(lián)起來。

任務(wù)流可以借助現(xiàn)有流程的走查或按照 T 模型來梳理任務(wù)流信息，從而幫助我們更好的定義一條用戶的任務(wù)流是如何執(zhí)行的。

例如我們要做的運(yùn)維平臺(tái)的產(chǎn)品，核心角色是運(yùn)維，他其中的一個(gè)目標(biāo)是為應(yīng)用創(chuàng)建工作空間。按照 T 模型，我們可以很方便的將這條任務(wù)流定義出來。

 

D 是 deep ，深化。主要從兩個(gè)維度展開：技術(shù)架構(gòu)和邏輯原理。這是兩個(gè)在做技術(shù)產(chǎn)品的過程中經(jīng)常會(huì)接觸到的兩個(gè)概念。

在分析技術(shù)架構(gòu)時(shí)，我們可以重點(diǎn)關(guān)注兩個(gè)點(diǎn)：看由哪些功能模塊構(gòu)成，這些功能之間的靜態(tài)結(jié)構(gòu)，是包含關(guān)系還是依賴關(guān)系。分析邏輯原理，一是了解這些功能產(chǎn)生的實(shí)例，是一對(duì)一的關(guān)系還是一對(duì)多的關(guān)系，信息或流量在這些功能模塊之間如何流轉(zhuǎn)。通過這些分析，我們可以把掌握的功能特征和邏輯規(guī)律。

舉例來說，運(yùn)維平臺(tái)的核心角色運(yùn)維人員需要為應(yīng)用創(chuàng)建工作空間，按照梳理出的任務(wù)流，用戶需要經(jīng)過3次跳轉(zhuǎn)7步完成，那這個(gè)是否還有優(yōu)化空間呢？

我們可以從 Deep 深化的角度入手，看這條任務(wù)流是由哪幾塊功能支撐的。例如工作空間內(nèi)包含網(wǎng)絡(luò)和安全組，安全組內(nèi)包含負(fù)載均衡和虛擬機(jī)。就像我們了解汽車的制動(dòng)裝置，看到裝置內(nèi)包含氣室，氣室內(nèi)包含活塞體、密封墊，密封墊連接在推桿上。

再?gòu)倪壿嬙韴D入口，了解流量會(huì)先按照工作空間進(jìn)行隔離，從工作空間走專有網(wǎng)絡(luò)還是經(jīng)典網(wǎng)絡(luò)，網(wǎng)絡(luò)將流量分發(fā)到安全組，安全組里的負(fù)載均衡會(huì)負(fù)責(zé)調(diào)配流量到虛擬機(jī)。他們之間層層遞進(jìn)互相依賴。就像汽油從油箱到達(dá)制動(dòng)裝置，在發(fā)動(dòng)機(jī)里和空氣一起被壓縮燃燒后能量轉(zhuǎn)化轉(zhuǎn)送到動(dòng)力裝置一樣。

通過上面的分析我們了解到這幾個(gè)功能其實(shí)是緊密關(guān)聯(lián)的，用戶沒有必要分散到不同的地方進(jìn)行添加和創(chuàng)建，完全可以借助流程表單和抽屜把他們串聯(lián)在一起。

因此我們找到優(yōu)化體驗(yàn)的機(jī)會(huì)點(diǎn)，把之前需要三次跳轉(zhuǎn)7步完成的任務(wù)流，優(yōu)化到1個(gè)入口5步完成。

 

總結(jié)回顧

企業(yè)級(jí)技術(shù)產(chǎn)品有四個(gè)特性：階段性、驅(qū)動(dòng)性、流程性、抽象性。通過 C、M、T、D 四個(gè)小工具來幫助我們收集和歸納信息，實(shí)現(xiàn)對(duì)上下游場(chǎng)景的編排、角色的定義、任務(wù)流的編排以及界面的編排。

作者：Ant_Design    來源：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

前言

很多時(shí)候，我們發(fā)現(xiàn)自己精心設(shè)計(jì)的作品總是亂亂的感覺，究其根本，大部分都是文字、圖形、色彩處理不當(dāng)，后續(xù)的優(yōu)化調(diào)整也都圍繞著這幾點(diǎn)進(jìn)行，這也是為什么設(shè)計(jì)師在制定設(shè)計(jì)規(guī)范的時(shí)候，會(huì)把文字（標(biāo)題、正文、提示的字號(hào)）、色彩（主色、輔助、點(diǎn)綴、漸變的使用場(chǎng)景）規(guī)范分的很細(xì)。然而，有時(shí)候即便用好了規(guī)范，依然沒達(dá)到理想的視覺效果，這里就要提到設(shè)計(jì)規(guī)范中很少有人關(guān)注、且非常容易被忽視的「間距」問題。
優(yōu)秀的界面設(shè)計(jì)應(yīng)該體現(xiàn)在每個(gè)維度，間距在設(shè)計(jì)中也是不可缺少的部分，尤其是界面元素較為密集時(shí)，需要對(duì)間距的使用掌握得當(dāng)，合理的利用間距留白，能將信息更高效的傳達(dá)給用戶。
文字、圖形、色彩是UI設(shè)計(jì)的三大組成元素，間距即是這幾種元素結(jié)合的媒介，如何通過間距給用戶帶來更舒適的視覺體驗(yàn)是設(shè)計(jì)過程中極其重要的一環(huán)，那么你所理解的間距到底是什么、有什么作用、如何合理有效的使用？筆者進(jìn)行了整理總結(jié)，通過本篇文章揭曉。

分享目錄

一、間距在UI中的重要性
二、定義文字間距
三、定義元素/組件間距
四、定義模塊間距
五、間距的使用技巧及原則
六、結(jié)語

一、間距在UI中的重要性

1.什么是間距？

間距指的是界面各元素彼此相隔的距離，可以是文字自身的行距、與圖片、與組件、與模塊的間距，或是界面兩側(cè)的安全距離（如網(wǎng)頁(yè)的寬度為1920px，內(nèi)容區(qū)為1400px，那么安全距離為兩側(cè)各260px）等。
作為UI設(shè)計(jì)師，在設(shè)計(jì)界面的每一個(gè)元素都需要考慮到上、下、左、右以及毗鄰元素的屬性來合理調(diào)整間距，利用各間距之間的規(guī)律來組織界面內(nèi)容，確保信息的節(jié)奏性，給用戶輕松、預(yù)約的瀏覽體驗(yàn)。

2.間距的實(shí)際作用

間距可以讓界面信息更有節(jié)奏，提升內(nèi)容的可讀性，還能通過不同的疏密程度來闡述各元素之間的關(guān)系，以吸引用戶的注意力，所以在控制界面間距時(shí)，一定要有“較真”的心態(tài)，任何一次的改動(dòng)與調(diào)整都要先考慮清楚為什么，能給產(chǎn)品和用戶帶來什么。要做好間距，不能僅停留在視覺層面，需要進(jìn)行多方面思考。
設(shè)計(jì)師層面：規(guī)范的定義間距，不必每個(gè)元素都去考慮間距的大小，有效減少?zèng)Q策和思考時(shí)間，提升效率。
開發(fā)層面：開發(fā)可以按照基礎(chǔ)間距去定義變量，長(zhǎng)期如此，雖然不能煉成像素眼，但僅憑視覺也能看出間距的倍數(shù)。例如基礎(chǔ)間距以8px增量，在使用8px、16px、24px、32px、48px...等，開發(fā)直接使用基礎(chǔ)間距x1、x2、x3...，以此類推，在開發(fā)眼中，肉眼定然看不出1px的差別，但卻能區(qū)分出8px的差距，不必每次都去測(cè)量，還能減少誤差，高度還原設(shè)計(jì)效果。
用戶層面：有節(jié)奏且具備一致性美感的界面效果，信息的有效傳遞變的輕松，用戶體驗(yàn)?zāi)艿玫胶艽蟪潭鹊奶嵘?

3.間距的統(tǒng)一性

設(shè)計(jì)規(guī)范的目的是提升設(shè)計(jì)師的工作效率、團(tuán)隊(duì)之間的高效溝通、讓設(shè)計(jì)風(fēng)格始終保持高度統(tǒng)一。同理，間距也是設(shè)計(jì)規(guī)范中非常重要的一環(huán)，它作為規(guī)范中的最小單元，如果沒有遵循統(tǒng)一，將會(huì)直接影響界面整體的版式和布局，信息的疏密程度嚴(yán)重影響用戶的瀏覽。不僅是設(shè)計(jì)師，開發(fā)每次面對(duì)同樣的模塊都需要定義不同的間距也是崩潰的，毫無規(guī)律可循。
統(tǒng)一的間距能讓界面的視覺效果更有節(jié)奏，設(shè)計(jì)師在設(shè)計(jì)某些相似的模塊時(shí)可直接復(fù)用組件，即便是多人共同完成同個(gè)項(xiàng)目或更換成員，也不會(huì)因間距不統(tǒng)一的問題造成整個(gè)APP的風(fēng)格混亂。
對(duì)開發(fā)來說，如果清楚間距的使用規(guī)律，即便有小的誤差，也能自行更正，例如使用8px增量，8、16、24...按倍數(shù)規(guī)律以此類推，若出現(xiàn)9的間距，開發(fā)會(huì)更正為8、15則會(huì)更正為16，自行多退少補(bǔ)，雖然設(shè)計(jì)師需要細(xì)心、盡量不出現(xiàn)這種小的出入，但任何事情都沒法做到絕對(duì)，統(tǒng)一的間距能讓減少設(shè)計(jì)的出入以及與設(shè)計(jì)師之間的頻繁溝通，能進(jìn)一步提高開發(fā)效率。

▲ 從上圖可以看出，間距不規(guī)范、信息就像一鍋粥，而規(guī)范的使用間距就能將信息自動(dòng)分組。

二、定義文字間距

文字是UI設(shè)計(jì)中非常重要的信息元素，雖然大多數(shù)設(shè)計(jì)師對(duì)文字的屬性比較了解，但在真實(shí)設(shè)計(jì)中總會(huì)因其他信息的干擾不能合理運(yùn)用，與上線后的視覺效果預(yù)期相差甚大。文字的各種間距處理看似簡(jiǎn)單，但實(shí)際上有很多因素要考慮，例如字間距、行高、段落等，下面帶大家一起了解。

1.字符間距

字符間距一般都是設(shè)計(jì)工具的默認(rèn)數(shù)值，無需調(diào)整。當(dāng)碰到多行文字需要避開頭尾的標(biāo)點(diǎn)符號(hào)時(shí)，使用工具中的避頭尾功能即可自動(dòng)調(diào)整字間距，如無此功能，則需手動(dòng)調(diào)整，這里并沒有所謂的技巧與方法，頭尾避開標(biāo)點(diǎn)符號(hào)即可。
另外，在設(shè)計(jì)卡片、瓷片區(qū)的標(biāo)題時(shí)，有時(shí)需要通過調(diào)整字符間距來提升界面的舒適度，間距數(shù)值自行定義，但相同層級(jí)的內(nèi)容標(biāo)題字間距一定要保持一致。

2.文字行高

行高是指上邊框+下邊框+字號(hào)的高度之和，這里主要針對(duì)多行文本。在平面設(shè)計(jì)中，行高沒有一定的標(biāo)準(zhǔn)，如無特別需要，使用系統(tǒng)默認(rèn)的行高即可。
在UI設(shè)計(jì)中，文字會(huì)有5～6個(gè)不同的等級(jí)，為便于用戶閱讀，一般會(huì)設(shè)定行高標(biāo)準(zhǔn)，尤其是新聞資訊類型的應(yīng)用本身就以文字內(nèi)容為主，不同的行高對(duì)文字的易讀性會(huì)產(chǎn)生較大的影響。
文字行高一般會(huì)設(shè)定為字號(hào)的1.2～1.5倍，具體值跟字號(hào)有很大關(guān)系，文字越小，行高就越大。例如，我們可以設(shè)定字號(hào)32px為中間值（非絕對(duì)），小于或等于32的字體、行高為字號(hào)的1.5倍，大于32的為1.2倍。另外，也可以直接將所有行高固定在字號(hào)的1.5倍，不難發(fā)現(xiàn)，字體越大其折行的概率就越低，試想一下，如果將48px的文字折成幾行，界面還能剩下多少空間？

3.文字段落

文本段落間距的重要性在移動(dòng)UI界面中并不明顯，更多體現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)中。需要著重糾正一點(diǎn)的是，部分設(shè)計(jì)師在設(shè)置段間距時(shí)習(xí)慣性的多敲一次回車鍵，這種方式并不可取，會(huì)造成間距過大、內(nèi)容脫節(jié)。
如有需要，一定要手動(dòng)設(shè)置段間距，這里沒有固定的數(shù)值和規(guī)律，視覺舒適即可。筆者習(xí)慣將段間距設(shè)定為字號(hào)的0.5倍，例如字號(hào)為30、段間距為15，字號(hào)為40、段間距為20，僅供參考。

三、定義元素/組件間距

定義間距其實(shí)并沒有一個(gè)絕對(duì)的標(biāo)準(zhǔn)，主要取決于最小單位，例如4px、5px、6px、8px都是可以的，到底使用哪個(gè)數(shù)值還得根據(jù)產(chǎn)品自身定位及內(nèi)容組織形式，前提是所有間距都要遵循最小單位并基于倍數(shù)形成規(guī)律。
在設(shè)計(jì)界面時(shí)，需要利用間距來建立信息層級(jí)、提升瀏覽體驗(yàn)以及表達(dá)各元素之間的關(guān)系，這就是為什么當(dāng)我們打開新聞資訊、電商類應(yīng)用會(huì)發(fā)現(xiàn)信息非常緊湊，而打開工具、社交類應(yīng)用時(shí)感覺信息比較寬松。間距的基數(shù)越小、頁(yè)面就越細(xì)碎；基數(shù)越大、頁(yè)面的留白就越多，使用不同的基數(shù)，呈現(xiàn)出來的視覺效果也形態(tài)各異。
筆者在工作中通常以8px作為基數(shù)，以此衍生出8、16、24、32、48、64這6個(gè)間距數(shù)值，完全能夠滿足絕大多數(shù)的使用場(chǎng)景。當(dāng)然，針對(duì)信息較少的頁(yè)面也會(huì)使用到120、160、200...其他間距數(shù)值，例如缺省頁(yè)、登錄頁(yè)面等。不難看出，上述以8px為基數(shù)定義間距數(shù)值時(shí)，沒有40、56這兩個(gè)數(shù)值，難道他們不是8的倍數(shù)嗎？我們以8和16做對(duì)比，后者是前者的2倍，其間距的變化尤為明顯；但如果用56和64做對(duì)比，后者是前者的1.14倍，其間距的差別微乎其微。敲重點(diǎn)，設(shè)計(jì)師在定義間距時(shí)，需要遵循倍數(shù)規(guī)則，但同時(shí)也要為考慮界面美觀及用戶的瀏覽體驗(yàn)而跳出呆板的規(guī)則，當(dāng)間距數(shù)值越大時(shí)，根據(jù)基數(shù)所跳躍的倍數(shù)就越大，其實(shí)設(shè)定字號(hào)也是相同的邏輯（后期詳解）。

四、定義模塊間距

從信息層級(jí)角度來看，等級(jí)權(quán)重越高、間距就越大，在現(xiàn)實(shí)世界中也是如此，一個(gè)物體周圍的空間越大，就越容易吸引人們的注意力。
模塊間距分為塊內(nèi)間距（同一模塊中不同元素或信息組之間的距離）和塊外間距（同一個(gè)頁(yè)面中不同模塊的之間的距離），為了更好的區(qū)分信息層級(jí)，塊外間距一定會(huì)大于塊內(nèi)間距，也能保持塊內(nèi)信息的親密性。
如下圖所示，將裝修序列步驟、官方攻略、常用服務(wù)等看作不同的信息模塊，每個(gè)模塊內(nèi)元素的間距都會(huì)比各模塊之間的間距小很多。

五、間距的使用技巧及原則

1.接近性原則

需要通過各元素的間距來體現(xiàn)出信息的關(guān)聯(lián)性，格式塔原理中的“接近性”原則告訴我們，相互靠近的物體被認(rèn)為比相互距離較遠(yuǎn)的物體更有關(guān)聯(lián)性，因此，相關(guān)聯(lián)的元素之間靠的越近，用戶越能感知到信息的關(guān)聯(lián)，同時(shí)更能了解整個(gè)界面中各模塊信息的邏輯關(guān)系。

2.利用留白強(qiáng)調(diào)

很多時(shí)候，想讓一個(gè)元素變的突出，可以用加大字號(hào)、修改色值或后加粗等方式進(jìn)行強(qiáng)調(diào)，但這并不是突出信息的唯一方式，當(dāng)所有元素都變的突出，那就等于什么都不突出了。如果想讓界面中的元素不同程度的突出，留白也是一種強(qiáng)調(diào)信息的方式，它能引導(dǎo)用戶將注意力集中在特定的內(nèi)容上。

3.使用柵格系統(tǒng)

善用柵格系統(tǒng)（上述有詳細(xì)說明），通過最小間距值進(jìn)行遞增，讓整個(gè)界面看起來更協(xié)調(diào)。柵格系統(tǒng)可以讓設(shè)計(jì)師在元素的親疏關(guān)系上更快作出決策，后續(xù)不管是迭代還是更換設(shè)計(jì)成員，都能保持統(tǒng)計(jì)的間距規(guī)范。

4.文字行高規(guī)則

這個(gè)問題在很多團(tuán)隊(duì)中都是硬傷，甚至在設(shè)計(jì)驗(yàn)收時(shí)還被直接忽略。在主流UI設(shè)計(jì)工具中，添加文本元素時(shí)，都會(huì)有默認(rèn)行高，在前面的內(nèi)容中有講過多行文本的行高為字號(hào)的1.2~1.5倍，那么單行文字的行高到底是需要手動(dòng)設(shè)置還是遵循默認(rèn)，筆者認(rèn)為都是可以的，但一定要與開發(fā)保持一致。
行高決定著文字邊緣與定界框的間距，而開發(fā)只能看到定界框與其他元素的間距。

1）默認(rèn)行高
默認(rèn)行高值會(huì)隨著字號(hào)的變化基于一定的倍數(shù)自動(dòng)增減，需要將此規(guī)律或倍數(shù)告知開發(fā)，開發(fā)將此規(guī)則植入代碼方能最大化還原設(shè)計(jì)效果。另外在設(shè)計(jì)界面時(shí)，尤其是多組文字元素的上下間距，需要通過計(jì)算（文字邊緣到定界框的間距+文字元素間距=實(shí)際間距）或手動(dòng)測(cè)量才能達(dá)到精準(zhǔn)狀態(tài)，下圖為例：

2）手動(dòng)設(shè)置行高
手動(dòng)設(shè)置即字號(hào)是多少、就將行高設(shè)置為多少，確保文字邊緣緊貼定界框，在設(shè)計(jì)過程中調(diào)整間距時(shí)，無需計(jì)算，根據(jù)設(shè)計(jì)工具的智能提示調(diào)整即可。

5.間距值數(shù)量設(shè)定

在同一APP應(yīng)用中，根據(jù)最小基數(shù)定義的間隔值數(shù)量不易過多，一般在6個(gè)左右就能滿足絕大多數(shù)的設(shè)計(jì)場(chǎng)景。例如以8px的基數(shù)為8、16、24、32、48、64等，以5px的基數(shù)為5、10、15、25、40、60等。數(shù)量過多會(huì)導(dǎo)致界面不同元素、模塊的間距差異化不夠明顯，數(shù)量太少無法滿足多元素、模塊使用場(chǎng)景，也會(huì)導(dǎo)致間距跨度較大。

6.明顯相鄰間距值

設(shè)定間距值需遵循一個(gè)原則“數(shù)值越大、遞增的倍數(shù)就越大”。當(dāng)相鄰間距值的差異化較小時(shí)，用戶很難感知到界面中信息之間的邏輯關(guān)系，我們需要根據(jù)柵格系統(tǒng)中間距值的增大、設(shè)置更大的區(qū)間值，讓相鄰間距值之間的視覺差異更加明顯。

7.跳出間距的束縛

當(dāng)界面中的信息較為密集、間距不足以滿足信息的突出程度時(shí)，需跳出純粹的間距規(guī)范束縛，換種方式或許更好。例如：給元素添加背景讓其聚焦、使用分隔線/色塊間隔、調(diào)整元素大小等，需知「此消彼長(zhǎng)」的道理。

六、結(jié)語

如果在處理界面信息層級(jí)時(shí)，改來改去還是覺得很亂，不防從間距角度出發(fā)，或許會(huì)有不一樣的收獲。雖然在剛開始的時(shí)候，規(guī)范間距帶來的效果甚微，但隨著團(tuán)隊(duì)規(guī)模不斷擴(kuò)大、界面數(shù)量越來越多、內(nèi)容越來越復(fù)雜時(shí)就會(huì)發(fā)現(xiàn)，所有內(nèi)容統(tǒng)一間距規(guī)范，不管是構(gòu)建一致性界面視覺效果、還是對(duì)開發(fā)和設(shè)計(jì)師來說，既能提升用戶體驗(yàn)、還能提高團(tuán)隊(duì)的工作效率。
間距是否規(guī)范使用，決定著界面是否規(guī)整、信息傳達(dá)是否清晰，即便如此，間距也只是解決信息層級(jí)方式的其中之一，切不可讓其限制設(shè)計(jì)師的發(fā)揮和思考空間。制定設(shè)計(jì)規(guī)范有助于項(xiàng)目的高效運(yùn)轉(zhuǎn)，間距也好、色彩也罷，設(shè)計(jì)師依然需要從實(shí)際用戶場(chǎng)景出發(fā)，通過不斷的思考和經(jīng)驗(yàn)總結(jié)，打磨出更合理、更符合項(xiàng)目需求的設(shè)計(jì)規(guī)范。

作者：大漠飛鷹CYSJ    來源：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

在交互設(shè)計(jì)、用戶體驗(yàn)設(shè)計(jì)中，每一個(gè)細(xì)小環(huán)節(jié)都至關(guān)重要。比如說，空狀態(tài) ( The Empty State ) 是許多應(yīng)用程序設(shè)計(jì)開發(fā)過程中忽略的一點(diǎn)，卻也有著優(yōu)化用戶體驗(yàn)、改善應(yīng)用程序的潛力。

 

一.什么是空狀態(tài)？

空狀態(tài)：顧名思義就是空白的狀態(tài)，空狀態(tài)是對(duì)沒有數(shù)據(jù)頁(yè)面的補(bǔ)充，一種對(duì)零數(shù)據(jù)的設(shè)計(jì)形式（如下圖所示：無網(wǎng)絡(luò)、訂單為空、沒有關(guān)注的人以及無法連接網(wǎng)絡(luò)等等這些頁(yè)面就是所謂的“空狀態(tài)”。）

空狀態(tài)是APP設(shè)計(jì)中不可或缺的一部分，特別是新用戶初次接觸到產(chǎn)品APP時(shí)，必然會(huì)面對(duì)很多空狀態(tài)。

 

            

二：空狀態(tài)的分類

第一：根據(jù)空狀態(tài)產(chǎn)生的路徑，可以將空狀態(tài)分為3類

 

系統(tǒng)層：本地請(qǐng)求異常；如：無網(wǎng)絡(luò)、服務(wù)器異常等

信息層：請(qǐng)求成功，數(shù)據(jù)異常；如內(nèi)容已刪除、已下架等；

空白層：請(qǐng)求成功，無數(shù)據(jù)；最常見的空頁(yè)面或空狀態(tài)；

 

            

 

第二：根據(jù)空狀態(tài)的出現(xiàn)場(chǎng)景又可以將其分為4大類：

 

初體驗(yàn)：初次注冊(cè)登錄的用戶很多功能都沒有熟悉

無信息/無結(jié)果：某些功能還未使用過

完成任務(wù)：完成某項(xiàng)功能后反饋的結(jié)果

出錯(cuò)：因?yàn)楦鞣N原因?qū)е碌腻e(cuò)誤頁(yè)面

 

            

初體驗(yàn)時(shí)，根據(jù)不同的產(chǎn)品，我們可以為用戶提供不同的引導(dǎo)

· 創(chuàng)作平臺(tái)→引導(dǎo)用戶創(chuàng)造內(nèi)容、推薦相關(guān)內(nèi)容、開啟權(quán)限……

· 工具類app→介紹相關(guān)功能、添加相關(guān)人、相關(guān)功能……

·學(xué)習(xí)類app→收集用戶目標(biāo)、推薦相關(guān)課……

            

 

無信息/無結(jié)果時(shí)，告知用戶該如何解決問題，或者給用戶其他選擇

·購(gòu)物車為空時(shí)→讓用戶購(gòu)買或者給用戶推薦商品

·無收藏時(shí)→應(yīng)到用戶去收藏

·搜索為空時(shí)→告知用戶換一個(gè)詞試一試

·無評(píng)論時(shí)→讓用戶搶個(gè)沙發(fā)

            

 

 

任務(wù)完成后，鼓勵(lì)或獎(jiǎng)勵(lì)用戶

·郵件全部回復(fù)完→祝用戶擁有美好的一天

·書看完時(shí)→讓眼睛放松一下

·打卡成功→獎(jiǎng)勵(lì)用戶勛章等等

            

 

程序出錯(cuò)后，緩解用戶情緒，告知用戶解決辦法

·網(wǎng)絡(luò)出錯(cuò)→檢查網(wǎng)絡(luò)/刷新頁(yè)面

·404頁(yè)面→讓用戶反饋情況到后臺(tái)、報(bào)錯(cuò)等

            

三：設(shè)計(jì)空狀態(tài)頁(yè)面的好處

 

據(jù)調(diào)查顯示：“平均下來，APP在被下載之后的前3天時(shí)間里，日活躍用戶(DAU)數(shù)量下降了77個(gè)百分點(diǎn)。30天內(nèi)，下降比例達(dá)到80%”。用戶會(huì)嘗試多個(gè)同類APP，然后在接下來的3到7天內(nèi)決定其中的哪些不合適。這時(shí)候就需要通過更多好的設(shè)計(jì)和體驗(yàn)來留住用戶

 

當(dāng)然一個(gè)產(chǎn)品的好與壞不能全靠空狀態(tài)，但是空狀態(tài)對(duì)于新用戶的留存是很重要的。

 

Spotify的用戶體驗(yàn)專家Tamara Hilmes提醒設(shè)計(jì)師們時(shí)說，空狀態(tài)是一個(gè)展示產(chǎn)品個(gè)性化的機(jī)會(huì)，因此，在進(jìn)行空狀態(tài)設(shè)計(jì)時(shí)，需要認(rèn)真考慮品牌和用戶的目標(biāo)和背景。

 

 

 

四：空狀態(tài)設(shè)計(jì)原則

            

4.1基本原則 

準(zhǔn)確：空狀態(tài)需要清晰明確地將當(dāng)前系統(tǒng)狀態(tài)傳達(dá)給用戶

直觀：簡(jiǎn)言之就是畫面要“小而美”→簡(jiǎn)單

高效：提供用戶快速有效地?cái)[脫空狀態(tài)的方法

 

準(zhǔn)確

準(zhǔn)確原則要求在文字描述上做到清晰地闡述系統(tǒng)當(dāng)前的狀態(tài)。

下圖為例，如果僅以“獲取不到數(shù)據(jù)”作為收件箱空狀態(tài)提示文字，用戶不清楚是系統(tǒng)異常、網(wǎng)絡(luò)異常還是僅僅因?yàn)槭占錄]有郵件而出現(xiàn)當(dāng)前狀態(tài)。準(zhǔn)確地將系統(tǒng)狀態(tài)及操作結(jié)果告知用戶是空狀態(tài)設(shè)計(jì)中十分重要的目標(biāo)。

            

 

 

特殊原因?qū)е碌目諣顟B(tài)，也可以在附加文字中告知用戶其原因，例如郵箱賬號(hào)未登錄而導(dǎo)致收件箱為空的情況。

 

直觀：

空狀態(tài)不僅要講究視覺的美感，還要講究體驗(yàn)的“美感”，要讓用戶在不用思考的情況下，  獲得最大的價(jià)值，

            

 

高效

若空狀態(tài)在系統(tǒng)中可以通過觸發(fā)操作離開，建議在空狀態(tài)的文字或操作上進(jìn)行展現(xiàn)。

以站內(nèi)信空狀態(tài)為例，系統(tǒng)存在用戶可執(zhí)行的解決方案，在設(shè)計(jì)上也要體現(xiàn)。上面提到的賬號(hào)未登錄導(dǎo)致站內(nèi)信為空時(shí)，考慮附加文字提示‘登錄賬號(hào)即可開始’。若系統(tǒng)存在直接觸發(fā)操作的方案，可通過鏈接或按鈕的形式提供入口給用戶，便于用戶快速有效地回到功能主流程中。

            

 

 

4.2進(jìn)階原則       

有趣：有趣又易用，符合用戶的心理預(yù)期

品牌：介紹并強(qiáng)化品牌元素，通過恰當(dāng)?shù)姆绞?、形式呈現(xiàn)

記憶：有創(chuàng)意或幽默色彩，呈現(xiàn)形式新穎，體現(xiàn)專業(yè)同時(shí)創(chuàng)造正面情緒

 

有趣

空狀態(tài)的設(shè)計(jì)在滿足了基本的設(shè)計(jì)原則后，還可根據(jù)產(chǎn)品的品牌特征進(jìn)行優(yōu)化。一般對(duì)空狀態(tài)的圖片、文案來著手進(jìn)行品牌化設(shè)計(jì)。

采用含著關(guān)懷情感的文案“哎呀，網(wǎng)絡(luò)好像出了點(diǎn)問題”代替“網(wǎng)絡(luò)未連接”這樣冰冷無感情的提示文字，同樣達(dá)到告知用戶系統(tǒng)狀態(tài)的目的，但修改后的文案明顯更能貼合服務(wù)工具型軟件的品牌形象。

 

同時(shí)結(jié)合文案主題，用有趣的插畫吸引用戶，達(dá)到緩解用戶焦慮、負(fù)面情緒的目的

例如下圖的刷新一下試試，企業(yè)IP作為粉刷匠在刷新Wi-Fi，比起一個(gè)失聯(lián)的行星就更有意思

       品牌

當(dāng)空狀態(tài)滿足了用戶的基本需求后，就可以考慮如何樹立品牌形象了！

目前最簡(jiǎn)單且有效的辦法是——企業(yè)IP+插畫+文案，雖然被很多人吐槽套路、片面，但是作為剛起步的創(chuàng)業(yè)類的app，這不失為一種好辦法

 

            

 

設(shè)計(jì)專屬吉祥物形象，對(duì)產(chǎn)品進(jìn)行擬人化表達(dá)，避免極其復(fù)雜的插畫，保障界面簡(jiǎn)潔明快；

由于插畫不可交互，盡量與背景融合為一部分，避免使用明亮的色彩，誤導(dǎo)用戶點(diǎn)擊。

 

 

記憶

文章的開頭講過，空狀態(tài)對(duì)留住新用戶有著很關(guān)鍵的作用，那么空狀態(tài)在用戶使用的幾秒鐘內(nèi)一定要給用戶留下足夠深刻的印象才有可能留住這些新用戶，所以空狀態(tài)一定要有新意，甚至是要給用戶出其不意的視覺感受，這個(gè)階段考慮的問題要更多一些，受眾人群的特點(diǎn)、品牌的調(diào)性、想要達(dá)到的效果、解決問題的手法、還要注意對(duì)用戶而言是否直接有效并且準(zhǔn)確。

 

阿里旗下“躺平”app的空狀態(tài)打破常規(guī)，非常優(yōu)秀的抓住了用戶人群的特性，解決了用戶的需求的同時(shí)，還給用戶樹立了非常深刻的品牌印象。

            

產(chǎn)品所有能傳遞情緒的場(chǎng)景都應(yīng)該與品牌情緒一致。采用負(fù)面情緒的空狀態(tài)有一定風(fēng)險(xiǎn)，可能會(huì)起到消極作用。

用戶更容易代入場(chǎng)景化的故事，產(chǎn)生情感共鳴。構(gòu)思場(chǎng)景，需研究產(chǎn)品目標(biāo)用戶群的特質(zhì)，設(shè)計(jì)他們的共同回憶，將有關(guān)的場(chǎng)景、片段、元素進(jìn)行拼貼、組合、關(guān)聯(lián)，再找到最能勾起情緒沖動(dòng)的突破口，豐滿場(chǎng)景。

避免正面刻板的形象（一眼就能看到底的設(shè)計(jì)），盡可能簡(jiǎn)單有趣、不落俗套，讓用戶看到這個(gè)畫面后可以有更多想象的空間，從而吸引用戶，驅(qū)動(dòng)用戶的好奇心。

 

五、總結(jié)

簡(jiǎn)單總結(jié)了一些設(shè)計(jì)空狀態(tài)時(shí)整體的設(shè)計(jì)流程，如下：

 
功能入口：提供相關(guān)功能的入口和動(dòng)作按鈕，解釋服務(wù)的功能和優(yōu)點(diǎn)，引導(dǎo)用戶到其他頁(yè)面查看內(nèi)容

1. 標(biāo)題文案：說明當(dāng)前狀態(tài)，解釋當(dāng)前問題出現(xiàn)原因，介紹功能概要

2. 解說文案：如何走出當(dāng)前狀態(tài)，如何解決當(dāng)前問題，補(bǔ)充說明功能的屬性

3. 推薦數(shù)據(jù)：提供熱門數(shù)據(jù)、個(gè)性化推薦數(shù)據(jù)讓用戶選擇；如電商搜索無結(jié)果、購(gòu)物車等頁(yè)面，推 薦用戶感興趣的商品，能有效地提升購(gòu)買轉(zhuǎn)化率

4. 操作引導(dǎo)：提供相關(guān)操作的示意和引導(dǎo)，讓用戶能刪除或替換內(nèi)容

5. 完成指導(dǎo)：送上任務(wù)達(dá)成的祝賀語，鞏固用戶的成就

 

細(xì)節(jié)備注：

文字和圖形一樣，也是一種情緒的載體，注意文字的魅力，加注重文字的情緒表達(dá)，更易調(diào)動(dòng)觀者的心。

• 避免命令的、指使的語氣，盡量使用輕快的、戲謔的、娛樂式的語氣，婉轉(zhuǎn)傳達(dá)用戶可以去做什么；

• 避免傻瓜式的敘述、空洞的鋪陳，描述詞風(fēng)格應(yīng)該匹配產(chǎn)品調(diào)性；

• 如果出錯(cuò)了，提供一個(gè)解決辦法

• 反問開場(chǎng)，可以調(diào)動(dòng)用戶情緒，嘗試錯(cuò)愕驚訝、夸張的口吻，會(huì)使情感更生動(dòng)
  

  作者：木子淺談    來源：站酷

  藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

  分享此文一切功德，皆悉回向給文章原作者及眾讀者.
  免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
  
  

  藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

  
  

沒有難看的顏色，只有難看的搭配每一種顏色有其獨(dú)特的作用，令人產(chǎn)生不同的情感。合理使用色彩可以取得宜人的效果。

一、色彩的基本認(rèn)知（本模塊設(shè)計(jì)小白可以了解一下，有基礎(chǔ)的略過）        1、色彩由色相、飽和度、明度三要素構(gòu)成

 色相(Hue)

即各類色彩的相貌稱謂，如大紅、普蘭、檸檬黃等。色相是色彩的首要特征，是區(qū)別各種不同色彩的最準(zhǔn)確的的標(biāo)準(zhǔn)。事實(shí)上任何黑白灰以外的顏色都有色相的屬性，而色相也是由原色、間色和復(fù)色來構(gòu)成。

 

飽和度(Saturation)

飽和度是指色彩的鮮艷程度，也稱色彩的純度。飽和度取決于該色中含色成分和消色成分(灰色)的比例。含色成分越大，飽和度越高；消色成分越大，飽和度越低。

 

明度(Brightness）

明度是眼睛對(duì)光源體和物體表面的明暗程度的感覺，主要有由光線強(qiáng)弱決定的一種視覺經(jīng)驗(yàn)。明度不僅取決于物體照明程度，而且取決于物體表現(xiàn)的反射系數(shù)。

 

2、配色的基本認(rèn)識(shí)

 

基本色環(huán)(Color Wheel）

按照光譜順序?yàn)椋杭t、橙紅、黃橙、黃、黃綠、綠、綠藍(lán)、藍(lán)、藍(lán)紫、紫、紫紅、紅和紫中間在加個(gè)中間色。在色相環(huán)的圓圈里，各種色調(diào)按照不同角度排列，則十二色相環(huán)每一色相距30度，24色相環(huán)每一色相距15度。

 

同一色

色相環(huán)中的任意色因明度變化而呈現(xiàn)的色彩。顏色混合是通過在色彩中加入黑、白、灰形成的。統(tǒng)一色調(diào)，色彩的純度和明度是具有共同性，明度按照色相略有變化。

同色系配色是指主色和輔色都在同一色相上，這種配色方法往往會(huì)給人頁(yè)面很一致化的感受

 

同類色

同類色又稱類似色。色相環(huán)原色起45度以內(nèi)，含有較多共同的色彩元素的色彩，同類色指色相性質(zhì)相同，但色度有深淺之分。

 

相鄰色

色相環(huán)中相距90度，或者相隔五六個(gè)數(shù)位的兩色，為鄰近色關(guān)系，屬中對(duì)比效果的色組。色相彼此近似，冷暖性質(zhì)一致，色調(diào)統(tǒng)一和諧，感情特性一致。

相鄰色不同于同一色的枯燥乏味。稍微跳動(dòng)的的色彩也一樣保持著設(shè)計(jì)的穩(wěn)定性，還能起到強(qiáng)調(diào)單獨(dú)作品的作用

 

對(duì)比色

指色相環(huán)上色相對(duì)比較大、純度較高的任意兩色。對(duì)比色之間無過多的共性，對(duì)比效果強(qiáng)烈。當(dāng)對(duì)比的兩色具有相同的彩度和明度時(shí)，對(duì)比效果越明顯；兩色越接近補(bǔ)色，對(duì)比效果越強(qiáng)烈。

主導(dǎo)的對(duì)比配色需要精準(zhǔn)掌控色彩搭配和面積，其中主導(dǎo)色會(huì)帶動(dòng)頁(yè)面的氣氛，產(chǎn)生激烈的心理感受。

 

補(bǔ)色

補(bǔ)色又稱互補(bǔ)色、余色，亦稱強(qiáng)度比色，就是兩種顏色(等量)混合后呈現(xiàn)黑灰色，那么這兩種顏色以定位互補(bǔ)色。色環(huán)的任何直徑兩端相對(duì)之色都稱為互補(bǔ)色

補(bǔ)色對(duì)比由于色彩過于沖撞，很少用戶傳統(tǒng)網(wǎng)頁(yè)界面，一般用于活動(dòng) banner，起到吸引用戶眼球的作用。

二、HSB色彩模型

1、什么是HSB色彩模型

如果你寫過HTML和CSS，那么肯定熟悉RGB，三個(gè)字母分別表示：R(紅)、G(綠)、B(藍(lán))。這種方式對(duì)電腦來說非常直接明了，也是電腦理解顏色的默認(rèn)方式。對(duì)電腦友好并不意味對(duì)人類易用，這也是HSB誕生的原因。

HSB代表色相(Hue) - 飽和度(Saturation) - 明度(Brightness)，又稱HSV，是一種更人性化的顏色描述方式。為什么這么講？因?yàn)樗c人們描述顏色的自然方法一致。

 

2、HSB色彩模式設(shè)置及優(yōu)點(diǎn)

1)、比起 RGB 系統(tǒng)，HSB使用了更貼近人類感官直覺的方式來描述色彩 ，對(duì)于設(shè)計(jì)師來說更容易理解

 

HSB 的概念很接近色彩學(xué)所常使用的色彩空間模型，由于是由三個(gè)屬性所組合而成，因此常以色立體表示，

但由于我們常用的操作系統(tǒng)依然為二度空間的系統(tǒng)，因此在計(jì)算機(jī)系統(tǒng)的選色接口中常以不同的接口出現(xiàn)，我想其實(shí)大家都很熟悉，像是下圖為sketch中的選色器，可以看見一個(gè)全彩的色相條，和一個(gè)顏色的窗口，滑動(dòng)色相條即可得到不一樣的顏色

 

2)、HSB可以更加科學(xué)地保證設(shè)計(jì)師所使用的不同顏色處于同一明度和飽和度，使用戶的視覺體驗(yàn)感更好

也許你會(huì)覺得 HSB 并沒有比較簡(jiǎn)單，但是實(shí)際使用過就會(huì)發(fā)現(xiàn)，它是多么的好用。例如下圖的男女比例的背景色塊，如果用RGB調(diào)色只能通過設(shè)計(jì)師的眼睛和經(jīng)驗(yàn)來調(diào)整他們是否處于同樣的色調(diào)中，但是用HSB來調(diào)色，保持S和B值相同，只需要滑動(dòng)色相條即可得到完全一樣的色調(diào)，省時(shí)省力還科學(xué)

                   

 

三、色彩使用規(guī)則

       

1、色調(diào)的分類

色調(diào)（color tone）是不同色相但是具有同樣亮度和純度的顏色進(jìn)行的分組，

     

 

極淺vp（very pale）色調(diào)：

是純度最低、亮度最高的，干凈清淡的顏色，給人清的，柔弱的，女性的，年輕的，淡的，可愛的印象。

 

亮灰色lg（light grayish）色調(diào)：

純度低，中高亮度的色調(diào)，給人高貴、安定、古樸的印象和輕柔的感覺。

 

中灰色mg（medium grayish）色調(diào)：

低純度中亮度，具有濁，不起眼，古樸，穩(wěn)健，安定的氣氛。

 

深灰dg（dark grayish）色調(diào)：

低純度和中低亮度，給人漂亮、安定、自然的感覺。

 

極暗vd（very dark）色調(diào)：

是純度和亮度都最低的色調(diào)，具有厚重牢固的感覺，給人非常暗，陰暗，厚重，堅(jiān)固、男性的印象。

 

淺的pl（pale）色調(diào)：

中純度和高亮度的色調(diào)，給人干凈、淺、爽朗的感覺。

 

柔軟sf（soft）色調(diào)：

中純度和中高亮度，給人穩(wěn)健溫柔的感覺。相比淺色給人感覺更安定。

 

晦暗dl（dull）色調(diào)：

中純度和中亮度的色調(diào)，給人安心高雅的感覺，一般說的中間色就是晦暗色調(diào)。

 

暗dk（dark）色調(diào)：

中純度和低亮度的色調(diào)，具有結(jié)實(shí)，成熟，古樸的色調(diào)印象。

 

亮It（light）色調(diào): 

高純度高亮度的色調(diào)，具有明亮、健康、活潑，年輕而穩(wěn)定的印象。

 

強(qiáng)st（strong）色調(diào)：

高純度和中高亮度的色調(diào)，充滿活力，冗長(zhǎng)，熱情，開放的印象。

 

深dp（deep）色調(diào)：

高純度和低亮度的色調(diào)，具有力量感和深度，給人深的，濃的，傳統(tǒng)的等印象。

 

活潑VV（vivid）色調(diào)：

高純度和中亮度的色調(diào)，較為鮮艷，鮮明，華麗，鮮艷，鮮活的印象。

 

2、色調(diào)配色技巧

同色相環(huán)配色技巧原理一樣，色調(diào)也有3種基本的配色技巧。

 

1）同色調(diào)的配色：

同色調(diào)的顏色幾乎沒有亮度和純度差，是比較容易統(tǒng)一和協(xié)調(diào)的配色。

     

 2）鄰近色調(diào)配色：

具有一定的亮度和純度差但是差值不大，比較容易調(diào)和，容易傳達(dá)原有印象。有縱向鄰近、橫向鄰近、和斜向鄰近三種。

     

3）對(duì)比色調(diào)配色：

亮度與純度差很大，是極具張力的配色方法。是色調(diào)圖上相隔很遠(yuǎn)的色調(diào)的配色。自由選擇色相，有亮度對(duì)比、純度對(duì)比、亮度和純度對(duì)比這三種配色方式。

      

配色網(wǎng)站推薦

推薦是三個(gè)比較好用的、簡(jiǎn)單操作的配色網(wǎng)站，有需要的可以收藏

1、coolors.co

2、designspiration.com

3、materialpalette.com

四、常用色分析

除了醫(yī)療作用外，顏色還有一定的象征意義和社會(huì)屬性，對(duì)人類生活有著舉足輕重的影響。顏色心理學(xué)領(lǐng)域的佼佼者，美國(guó)羅切斯特大學(xué)安德魯.埃利奧特說，以前從來沒有人做過這種聯(lián)系。他表示：“顏色研究表明的是，我們的行為會(huì)受到我們沒有留意，習(xí)以為常的事物的影響。”

據(jù)國(guó)外媒體報(bào)道，人們常常認(rèn)為，穿著紅色服裝是自信的表現(xiàn)。同時(shí)，科學(xué)家們也認(rèn)為，運(yùn)動(dòng)員身穿紅色運(yùn)動(dòng)服更容易取得好成績(jī)。然而，英國(guó)羅徹斯特大學(xué)的安德魯·埃里奧特等人開展的一項(xiàng)最新研究卻顯示，紅色會(huì)抑制人們思維的活躍性。

埃里奧特和他的研究小組共對(duì)一些中學(xué)的高年級(jí)學(xué)生和部分大學(xué)生進(jìn)行了四次研究。期間，他們向被測(cè)試者發(fā)放了一些用于進(jìn)行智力水平測(cè)試的紙片——在各張紙片的右上角分別用紅色、灰色或綠色表明了序號(hào)。

結(jié)果，凡是所持紙片上用紅色標(biāo)明序號(hào)的學(xué)生，其所獲得的智力水平評(píng)分均明顯低于那些手持灰色或綠色序號(hào)紙片的學(xué)生。先前的研究已經(jīng)證實(shí)，人們?cè)谌粘Ｉ钪兴佑|到的顏色會(huì)對(duì)人的潛意識(shí)產(chǎn)生影響，只不過這種影響非常短暫。

埃里奧特教授認(rèn)為，紅色首先會(huì)使人們聯(lián)想到錯(cuò)誤和失敗。談到這一點(diǎn)，大多數(shù)人肯定都會(huì)想到老師在判卷時(shí)所使用的紅墨水。當(dāng)然，有關(guān)禁止的信號(hào)通常也以紅色表示。而在自然界中，紅色則是一種警示色。隨后進(jìn)行的另外兩項(xiàng)研究則證實(shí)，當(dāng)受測(cè)試者眼看著紅色回答問題時(shí)，他們通常會(huì)選擇那些較為簡(jiǎn)單的問題進(jìn)行解答－－這是人們?cè)诿鎸?duì)困難時(shí)所選擇的最經(jīng)典的方法。

與紅色相對(duì)的是，藍(lán)色能夠促進(jìn)創(chuàng)新；黃色，則是最令人愉快的顏色，它被認(rèn)為是愉快的象征，可以刺激神經(jīng)系統(tǒng)和改善大腦功能，激發(fā)人的朝氣，令人思維敏捷。另外還有，橙色，是新思想和年輕的象征，令人感到溫暖、活潑和熱情，能啟發(fā)人的思維，可有效地激發(fā)人的情緒和促進(jìn)消化功能。

賞心悅目的色彩能夠通過視神經(jīng)傳遞到大腦神經(jīng)細(xì)胞，從而有利于促進(jìn)人的智力發(fā)育。在和諧色彩中生活的少年兒童，其創(chuàng)造力高于普通環(huán)境中的成長(zhǎng)者。若常處于讓人心情壓抑的色彩環(huán)境中，則會(huì)影響大腦神經(jīng)細(xì)胞的發(fā)育，從而使智力下降。所以，我們?cè)谄綍r(shí)日常生活中，正確的應(yīng)用色彩心理學(xué)，改善生活環(huán)境色彩，讓我們的心情更舒適，思維更敏銳。

所以一定不要讓自己孩子在高考的時(shí)候穿什么紅色的外套，旗開得勝什么的，可能會(huì)影響思維活躍度，導(dǎo)致考試成績(jī)不理想

橙色稍稍混入黑色或白色，會(huì)變成一種穩(wěn)重、含蓄又火熱的暖色，但混入較多的黑色，就成為一種燒焦的色；橙色中加入較多的白色會(huì)帶來一種甜膩的感覺。由于位于可見光的中低頻頻段,橙色在空氣中的衍射能力僅次于紅色，而其色感比紅色更暖，最飽和的橙色應(yīng)該是色彩中感受最暖的顏色，能給人有莊嚴(yán)、尊貴、神秘等感覺，所以基本上屬于心理色性。歷史上許多權(quán)貴和宗教界都用以裝點(diǎn)自己，現(xiàn)代社會(huì)上往往作為標(biāo)志色和宣傳色。不過也是容易造成視覺疲勞的色。

英國(guó)埃塞克斯大學(xué)做了一項(xiàng)研究顯示，綠色是很特別的顏色，在四季分明之地方，如見到春天之樹木、有綠色的嫩葉，大自然的顏色。在綠色環(huán)境中鍛煉能提高情緒、活力和愉悅感。也就是說，戶外鍛煉有益身心。

色彩心理學(xué)家早就指出，人們?cè)诟哳l率顏色(如綠色，藍(lán)色和紫色)的環(huán)境下會(huì)產(chǎn)生平靜的感覺，而在中低頻率顏色(如紅色，橙色和黃色)的環(huán)境下更容易興奮和激動(dòng)。這一現(xiàn)象可能是在人類進(jìn)化的過程出現(xiàn)的。因?yàn)閷?duì)于原始人類來說，綠色的環(huán)境意味著充足的食物和水源，對(duì)綠色的積極感覺在進(jìn)化過程中融入大腦。

英國(guó)埃塞克斯大學(xué)的研究者選取十四名男大學(xué)生，要求他們?cè)谑覂?nèi)固定單車上騎行5分鐘，并觀看關(guān)于森林的紀(jì)錄片。隨后，研究者將視頻背景由綠色轉(zhuǎn)換為黑色、白色和紅色，讓志愿者在觀看這3種顏色視頻的同時(shí)，又分別騎行了5分鐘。結(jié)果發(fā)現(xiàn)，他們?cè)谟^看綠色視頻時(shí)疲勞感低，情緒也能保持愉悅；而觀看紅色背景視頻時(shí)，他們更容易情緒不穩(wěn)。

紫色跨越了暖色和冷色，所以可以根據(jù)所結(jié)合的色彩創(chuàng)建與眾不同的情調(diào)。帶些紅色的深紫色可以產(chǎn)生一個(gè)暖色盤。淺紫色是較貴的，常常會(huì)聯(lián)想到浪漫。當(dāng)結(jié)合玫紅色的時(shí)候，可以創(chuàng)建一個(gè)很女性化的色盤。一個(gè)比較男人的色盤可以使用偏紅偏黑的深紫色。泥土和自然的色彩可以結(jié)合紅紫色和淺褐色或者亮紫色+綠色。黃色和紫色是對(duì)比色，可以創(chuàng)建強(qiáng)對(duì)比度的色盤。

     

作者：木子淺談    來源：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

我們已經(jīng)或多或少看過一些優(yōu)秀作品，也知道了一些設(shè)計(jì)方法和技巧，了解到了一些相關(guān)的理論知識(shí)，自己也做過一些項(xiàng)目或者是練習(xí)，總體來說都掌握了一定的設(shè)計(jì)能力；但是設(shè)計(jì)師想要擁有更多的資源（指薪資、工作機(jī)會(huì)等等）或者是想職業(yè)進(jìn)階，除了一定的設(shè)計(jì)能力之外是遠(yuǎn)遠(yuǎn)不夠的，設(shè)計(jì)師還需要掌握更多的能力，才能讓自己成長(zhǎng)提升，并且擁有他人無法取代的價(jià)值。我通過自己的經(jīng)歷和整理收集，發(fā)現(xiàn)目前如今不同階段的設(shè)計(jì)師對(duì)待同一個(gè)問題不同的角度以及特征，如下圖所示：

不難發(fā)現(xiàn)，當(dāng)大家還是初級(jí)設(shè)計(jì)師的時(shí)候，剛剛接觸設(shè)計(jì)行業(yè)，我們更多的是去觀察、學(xué)習(xí)、臨摹一些“好看”的作品，熟練地使用設(shè)計(jì)軟件和提升設(shè)計(jì)技法，最后的是自己做出來的產(chǎn)品是否漂亮美觀，最重要的是客戶/老板是否會(huì)買單，而自己無法清晰地定義自己設(shè)計(jì)的產(chǎn)品價(jià)值，也不能很好表達(dá)出自己的想法和觀點(diǎn)。所以產(chǎn)品走向會(huì)根據(jù)老板/客戶的水準(zhǔn)來定義，輪到自己表達(dá)只是支支吾吾，最后只是做為執(zhí)行無休止地改改改。一切由老板/客戶說的算，無法清晰地了解自己產(chǎn)品的定位，缺乏表達(dá)觀點(diǎn)的能力，缺乏一定的審美，作為執(zhí)行角色無休止加班成為了初級(jí)設(shè)計(jì)師最大的痛點(diǎn)。

而經(jīng)過一段時(shí)間的學(xué)習(xí)和工作后，逐漸轉(zhuǎn)型成為中級(jí)設(shè)計(jì)師后，有了一定的設(shè)計(jì)技法和軟件使用熟練度，有了一定的審美和視覺表現(xiàn)能力，平臺(tái)規(guī)模合作團(tuán)隊(duì)也逐漸變大，基本能滿足老板/客戶/業(yè)務(wù)方提出的需求。開始學(xué)習(xí)一些設(shè)計(jì)相關(guān)理論，開始拆解自己或別人產(chǎn)品的交互架構(gòu)，更多地開始關(guān)注用戶體驗(yàn)起來，也會(huì)融入品牌元素到自己的產(chǎn)品當(dāng)中，為自己的產(chǎn)品做情感化設(shè)計(jì)和制定設(shè)計(jì)規(guī)范，會(huì)組織一些專業(yè)語言和業(yè)務(wù)溝通以及陳述自己的產(chǎn)品。但是如何從眾多的設(shè)計(jì)方案中找到最優(yōu)的方案來解決問題，如何更多地體現(xiàn)產(chǎn)品的價(jià)值，產(chǎn)品利益鏈如何形成商業(yè)閉環(huán)，如何在團(tuán)隊(duì)/設(shè)計(jì)圈體現(xiàn)自己個(gè)人的價(jià)值，如何提升自己的個(gè)人影響力，成為了中級(jí)設(shè)計(jì)師這階段的痛點(diǎn)。

通過三年五年的沉淀，成為高級(jí)設(shè)計(jì)師后，形成了自己獨(dú)有的一套方法論和設(shè)計(jì)思維，能熟練地拆解每款產(chǎn)品和定義產(chǎn)品，視覺表現(xiàn)層已經(jīng)完全能駕馭，能清晰地闡述自己的設(shè)計(jì)思路和結(jié)論，產(chǎn)品用戶體驗(yàn)層也有了一定的經(jīng)驗(yàn)和方法，在團(tuán)隊(duì)中或者設(shè)計(jì)圈有自己一定的個(gè)人影響力，更多地會(huì)在工作中思考產(chǎn)品帶來的社會(huì)價(jià)值和商業(yè)價(jià)值，會(huì)用不同的思維去思考產(chǎn)品的各個(gè)維度，找到最優(yōu)的方法解決問題，會(huì)把固有的利益鏈轉(zhuǎn)換成商業(yè)閉環(huán)，提升用戶轉(zhuǎn)化率等等。而這階段的設(shè)計(jì)師的主要痛點(diǎn)就是面臨著團(tuán)隊(duì)管理和溝通，朝著資深設(shè)計(jì)師和設(shè)計(jì)專家轉(zhuǎn)型，以及如何為平臺(tái)帶來的利益價(jià)值考核等等問題。

資深設(shè)計(jì)師或者設(shè)計(jì)專家這里不談，因?yàn)檫@階段所思考的問題大都和設(shè)計(jì)無關(guān)了。通過上述不難發(fā)現(xiàn)，每個(gè)階段的設(shè)計(jì)師都有各自的特征和痛點(diǎn)，雖然其中都包含著設(shè)計(jì)相關(guān)的能力，但是隨著階段的進(jìn)階設(shè)計(jì)相關(guān)的能力占比逐漸變少，更多的是其他的能力增長(zhǎng)，所以設(shè)計(jì)師除了設(shè)計(jì)以外其他能力的重要程度顯而易見，那么我們來看看除了設(shè)計(jì)以外，設(shè)計(jì)師應(yīng)該掌握其他什么能力。

思考能力(Thinking)

思考能力作為首要的能力，不僅僅是設(shè)計(jì)師，其他職業(yè)一樣需要這個(gè)能力，這里所涵蓋的面太廣泛了也說不了，這里主要針對(duì)三點(diǎn)來講：核心競(jìng)爭(zhēng)力、批判思維和分析能力。思考分為兩個(gè)層面：自我層面的和業(yè)務(wù)層面的思考；自我層面的思考就是要通過深度剖析自我，發(fā)掘自己處于哪個(gè)階段，有什么長(zhǎng)處和不足，自己想要什么，需要往怎樣的方向發(fā)展；而業(yè)務(wù)層面的則是要需要思考業(yè)務(wù)產(chǎn)品的結(jié)構(gòu)框架、用戶體驗(yàn)、商業(yè)價(jià)值等等等等，前者更加關(guān)注自身的成長(zhǎng)，后者更加關(guān)注業(yè)務(wù)的成長(zhǎng)。

· 核心競(jìng)爭(zhēng)力

核心競(jìng)爭(zhēng)力就是有與別人不一樣的競(jìng)爭(zhēng)力，想要做到別人無法替代你的地步，就要有自己個(gè)人核心的競(jìng)爭(zhēng)力。如果你會(huì)做一張 Banner，我也會(huì)做一張 Banner，你會(huì)搞一個(gè)頁(yè)面，我也會(huì)搞一個(gè)頁(yè)面，那么你這個(gè)人就成為了可有可無的螺絲釘，唯一的優(yōu)勢(shì)就是年輕能拼能熬，等你熬銹了老了，隨時(shí)可以換一顆新的螺絲釘來取代你的位置。所以不管什么階段，我們要深度剖析自己，認(rèn)清自己的優(yōu)勢(shì)劣勢(shì)，并采取相應(yīng)的措施。

剖析自己的核心競(jìng)爭(zhēng)力給大家一個(gè)大致思路，從異樣性和共通性入手。自己周圍或多或少有團(tuán)隊(duì)，條件不足的話現(xiàn)在網(wǎng)絡(luò)各大平臺(tái)都很發(fā)達(dá)，也能融入一些設(shè)計(jì)圈子中，和不同的人對(duì)比尋找自己的核心競(jìng)爭(zhēng)力。異樣性是當(dāng)前的優(yōu)勢(shì)，找出其中的優(yōu)點(diǎn)，不斷地放大深造，變成你的核心競(jìng)爭(zhēng)力，而和別人不一樣的缺點(diǎn)找出來摒棄改正；共通性就是和大家一樣的地方，可以看作是偽劣勢(shì)，因?yàn)橹T多共通性中總有你最喜歡最擅長(zhǎng)的一個(gè)，將它單獨(dú)拿出來不斷擴(kuò)大，逐漸就拉開了差異性，慢慢就轉(zhuǎn)化成你的核心競(jìng)爭(zhēng)力了，而大家都有的缺點(diǎn)，你把它糾正了，就成為你的核心競(jìng)爭(zhēng)力了。

來舉一個(gè)栗子：小王是一名工作了3年的設(shè)計(jì)師，研究生畢業(yè)，由于公司的原因平時(shí)工作最多接觸的就是一些運(yùn)營(yíng)圖 banner，也有過很多品牌 VI 的經(jīng)驗(yàn)，逐漸自己在視覺表現(xiàn)上有自己一定的見解和想法，也更加感興趣做視覺表現(xiàn)的東西。

那么他的共通性就有：1.工作3年之久；2.研究生畢業(yè)；3.視覺表現(xiàn)能力強(qiáng)也更感興趣；4.做過品牌 VI 的經(jīng)驗(yàn)；5.有自己的見解和想法。

由此推斷出小王的共通性是：1.工作經(jīng)驗(yàn)豐富；2.視覺表現(xiàn)力強(qiáng)；3.有想法和見解；

異樣性是：1.學(xué)歷優(yōu)勢(shì)；2.品牌 VI 相關(guān)經(jīng)驗(yàn)

那么小王可以保持自己學(xué)歷優(yōu)勢(shì)下，可以繼續(xù)深造品牌 VI 相關(guān)，逐漸轉(zhuǎn)型成為高學(xué)歷的品牌 VI 設(shè)計(jì)師，那么學(xué)歷和很多品牌 VI 的經(jīng)驗(yàn)就是小王的核心競(jìng)爭(zhēng)力；也可以通過熱愛去學(xué)習(xí) C4D 動(dòng)效等軟件繼續(xù)增強(qiáng)自己視覺表現(xiàn)力，配合自己豐富的工作經(jīng)驗(yàn)逐漸轉(zhuǎn)型成高學(xué)歷的創(chuàng)意藝術(shù)設(shè)計(jì)師，然后通過將自己的想法見解通過分享會(huì)、文章等模式產(chǎn)出，將這一點(diǎn)升級(jí)成個(gè)人影響力，那么綜合下來更加優(yōu)秀的視覺表現(xiàn)力、豐富的工作經(jīng)驗(yàn)和個(gè)人影響力也會(huì)逐漸變成小王的核心競(jìng)爭(zhēng)力。

只有通過不同維度深度地剖析自己，找到自己的共通和異樣點(diǎn)，清晰自己的價(jià)值定位，然后制定出適合自己成長(zhǎng)目標(biāo)和方案，不斷放大增加自己的核心競(jìng)爭(zhēng)力，成為不可取代的那個(gè)人。

· 批判思維

批判思維是一名設(shè)計(jì)師必須具備的思維能力，我們不僅僅要學(xué)會(huì)批判別人的作品，還要學(xué)會(huì)自我批判。這里不是指無腦的批判（之前遇到過一個(gè)實(shí)習(xí)生剛進(jìn)到公司里，就把之前所有人做的東西全部批判了一遍，重點(diǎn)是只說產(chǎn)品好看與否，完全不顧及平臺(tái)一致性商業(yè)價(jià)值用戶體驗(yàn)等等，最后只批判卻沒有任何實(shí)質(zhì)性的建議，頗有一種指點(diǎn)江山的感覺，然后后面再也沒見到過他了），這里是指在自己通過批判別人或自我的方案，不斷地優(yōu)化糾正，最后產(chǎn)出最優(yōu)質(zhì)的方案，這是批判思維的出發(fā)點(diǎn)。

不同的人有不同的經(jīng)歷，看待問題的維度是多種多樣的，所以一個(gè)方案產(chǎn)出后，通過不同的人思考后的結(jié)果是最好的解決方案。這也印證了波克定理：只有在爭(zhēng)辯中，才可能誕生最好的主意和最好的決定。所以當(dāng)設(shè)計(jì)師接到產(chǎn)品交互給到的原型圖后，不要上手就做圖，要通過自己經(jīng)驗(yàn)和想法去看待原型圖，然后提出更加優(yōu)質(zhì)的方案進(jìn)行討論，如果你的方案更加優(yōu)質(zhì)，那么不僅是產(chǎn)品的質(zhì)量得到了優(yōu)化，你個(gè)人的經(jīng)驗(yàn)也得到了沉淀，下次遇到相同的場(chǎng)景就可以拿出來復(fù)用，直到遇到更好的方案。

唯一注意的事項(xiàng)就是注意溝通的方法，這里后文會(huì)提到，比你資歷高的人提出的觀點(diǎn)更加具有建設(shè)性，在毫無頭緒沒有創(chuàng)新的情況下就聽比你更有經(jīng)驗(yàn)的人的；遇到比你資歷低的人提出的觀點(diǎn)也不要嗤之以鼻，抓取其中有用的點(diǎn)，沒準(zhǔn)是一個(gè)新的思維方向；總之，有數(shù)據(jù)說數(shù)據(jù)，沒數(shù)據(jù)舉案例，沒案例講觀點(diǎn)，如果連觀點(diǎn)都沒有的話，照著大佬說的話做就是了。

· 分析能力

分析能力也是設(shè)計(jì)師必須掌握的能力之一，無論你是創(chuàng)意藝術(shù)設(shè)計(jì)師，還是用戶體驗(yàn)設(shè)計(jì)師，譬如一張 Banner 氛圍傳遞或者文案排版，譬如插畫的配色或者場(chǎng)景搭建，譬如產(chǎn)品的布局結(jié)構(gòu)或者用戶體驗(yàn)，這些都需要有一定的分析能力。通過拆解改版/競(jìng)品/參照產(chǎn)品等，明確產(chǎn)品的最終目的、商業(yè)價(jià)值等等，有了這些準(zhǔn)備后才能對(duì)自己的產(chǎn)品進(jìn)行設(shè)計(jì)或者改版。而分析產(chǎn)品可以以用戶體驗(yàn)五要素的角度來分析，分別是：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層和表現(xiàn)層，具體相關(guān)的文章站酷、PM 社區(qū)、36氪等等都搜的到，這里不再細(xì)說；之前在分析產(chǎn)品的時(shí)候發(fā)現(xiàn)有些產(chǎn)品強(qiáng)行套用這五個(gè)要素進(jìn)去不適用，因?yàn)橛行┊a(chǎn)品的頁(yè)面它不存在戰(zhàn)略層或者范圍層的東西，所以我總結(jié)歸納了三個(gè)角度來分析產(chǎn)品。

案例就用淘搶購(gòu) v4.1 頁(yè)面（已上線）來講，三個(gè)角度主要是：表現(xiàn)層、用戶體驗(yàn)層和價(jià)值層。表現(xiàn)層主要就是產(chǎn)品頁(yè)面的配色、布局結(jié)構(gòu)之類的；用戶體驗(yàn)層就是產(chǎn)品的心智透出、交互流程之類的；價(jià)值層就是產(chǎn)品深度的價(jià)值體現(xiàn)了，比如商業(yè)價(jià)值、社會(huì)價(jià)值和用戶留存率之類的；大致可以套用這個(gè)公式去思考：為什么這里會(huì)用這種表現(xiàn)形式，它想要表達(dá)怎樣的效果，它要達(dá)到怎樣的最終目的，如果是自己去設(shè)計(jì)會(huì)怎樣做。舉例：因?yàn)樘詫氁?guī)范為卡片式設(shè)計(jì)，在視覺表現(xiàn)上要統(tǒng)一，所以淘搶購(gòu) v4.1 的業(yè)務(wù)目的是統(tǒng)一視覺樣式，并且它需要給用戶產(chǎn)生一種“商品很便宜快去搶購(gòu)再不搶購(gòu)就沒了”的心智認(rèn)知，它的最終目的是引導(dǎo)用戶去商品 Detail 頁(yè)面購(gòu)買商品和提高商品的點(diǎn)擊率，這樣通過協(xié)調(diào)關(guān)系形成平臺(tái)、商家和用戶之間的利益鏈商業(yè)閉環(huán)。

想要提升自己的分析能力除了項(xiàng)目和時(shí)間的沉淀外，更多的時(shí)候需要自己平時(shí)的積累，站酷等平臺(tái)有很多優(yōu)秀的作品，作者會(huì)把自己設(shè)計(jì)的分析和思路寫出來，我們可以看看別人的想法是否值得借鑒，然后再去分析一下，最后思考如果是自己的話會(huì)怎么去做；其次做設(shè)計(jì)的時(shí)候帶著同理心去做，把自己當(dāng)作用戶去看待自己的產(chǎn)品，通過不斷的積累提升自己對(duì)產(chǎn)品的敏銳度，將一些產(chǎn)品的隱性問題挖掘出來；另外可以多看一些好的設(shè)計(jì)分析書，比如《U一點(diǎn)料1、2》、《以匠心 致設(shè)計(jì)》等等，將學(xué)到的分析方法代入自己的產(chǎn)品或作品中，逐漸分析能力就增強(qiáng)了。

規(guī)劃能力(Plan)

規(guī)劃能力是日常工作生活中所需要掌握的能力，主要講業(yè)務(wù)規(guī)劃和職業(yè)生涯規(guī)劃，業(yè)務(wù)規(guī)劃能力應(yīng)對(duì)的是我們工作中處理業(yè)務(wù)所需要具備的能力，而職業(yè)生涯規(guī)劃應(yīng)對(duì)的是我們整個(gè)人生職業(yè)生涯規(guī)劃的能力。掌握這個(gè)能力后前者會(huì)給我們帶來業(yè)務(wù)處理效率上的提升，后者給我們帶來整個(gè)人生有益的好處，所以這個(gè)能力非常重要。

· 業(yè)務(wù)規(guī)劃

很多時(shí)候我們還在有條不紊地處理某個(gè)需求，心想著下班去吃個(gè)飯買水果回家洗澡睡覺的時(shí)候，突然來了一個(gè)緊急的需求，就把我們整天的計(jì)劃給打亂了，火急火燎地處理完這個(gè)需求，然后又把之前的需求做了，最后加班改改改導(dǎo)致整個(gè)計(jì)劃泡湯了。工作中遇到這樣的情況很多很多，處理方法有很多種，最經(jīng)典的就是四象限法則，把事情的緊急重要程度分為：重要且緊急、緊急不重要、重要不緊急和不重要且不緊急四個(gè)象限。

很多時(shí)候都是道理我們都懂，可是一遇到情況依舊手忙腳亂，根本原因是沒有認(rèn)真地把它代入自己的工作生活當(dāng)中。畫一個(gè)象限表，把自己今天所要處理的事務(wù)陳列出來五分鐘都不需要，一開始可能因?yàn)槭虑椴欢嗑蜎]堅(jiān)持下去，一旦養(yǎng)成習(xí)慣后，將來遇到多種緊急情況突發(fā)的時(shí)候就能認(rèn)識(shí)到這個(gè)習(xí)慣給你帶來的好處了，所謂養(yǎng)兵千日，用兵一時(shí)就是這個(gè)道理。

在做業(yè)務(wù)需求的時(shí)候，可能會(huì)碰到有些需求價(jià)值高，有些需求價(jià)值低但又很緊急，不知道怎么處理之間的關(guān)系，我們依舊可以套用四象限法則來制定一個(gè)四象限表：價(jià)值高且緊急、緊急但價(jià)值低、價(jià)值高不緊急和價(jià)值低不緊急。什么是價(jià)值高的需求呢，就是能讓你有充分思考和分析的需求，比如某個(gè)頁(yè)面的改版；價(jià)值低的需求則是相對(duì)不怎么需要思考和分析的需求，比如根據(jù)已有的規(guī)范改個(gè)顏色之類的。在時(shí)間的優(yōu)先級(jí)前，價(jià)值高的需求大于價(jià)值低的，最后剩下的就是價(jià)值不高且不緊急的。因?yàn)槲覀儫o法拒絕需求，需求來了肯定要是做的，工作不是愛好可以有多種選擇性，但我們要學(xué)會(huì)將需求分解成不同類型的，對(duì)自己有成長(zhǎng)沉淀的需求那可以作為最高優(yōu)先級(jí)去處理，留夠充裕的時(shí)間去思考分析，然后沉淀經(jīng)驗(yàn)穩(wěn)定提升。

· 職業(yè)生涯規(guī)劃

這個(gè)在大學(xué)期間就學(xué)過相關(guān)的課程，只不過當(dāng)時(shí)并沒有太深的感觸，而是等工作以后才知道這項(xiàng)能力的重要性，它相當(dāng)于關(guān)系著你每個(gè)階段的里程碑，當(dāng)成游戲中的成就任務(wù)也不為過，還是自己設(shè)定的成就任務(wù)。某個(gè)階段想要達(dá)成什么樣的目標(biāo)，想要獲得怎樣的成就，都是要自己一步一步慢慢規(guī)劃并且完成出來的。

因?yàn)槲矣龅竭^幾個(gè)非常努力的人，努力到讓人心悸的地步，每天除去吃飯睡覺工作時(shí)間就是在努力學(xué)習(xí)，到最后還是很迷茫，不知道做什么，不知道如何體現(xiàn)自己的價(jià)值。這類沒有目的的努力的人是很可怕的，他們努力得沒有錯(cuò)，但是這樣下去沒有成效的努力會(huì)讓他們覺得努力并沒什么用，然后逐漸開始產(chǎn)生抱怨、泄氣和放棄等負(fù)面情緒。

舉個(gè)例子來說明：如果你剛畢業(yè)，給自己制定的長(zhǎng)遠(yuǎn)的職業(yè)生涯規(guī)劃是在工作3～5年后進(jìn)到大廠工作提升自己，那么所拆分下來就需要一些項(xiàng)目工作經(jīng)驗(yàn)和優(yōu)秀的作品，再拆分下來就是如何做出優(yōu)秀的作品，細(xì)分到最后就是作品當(dāng)中的元素，比如圖標(biāo)排版布局之類的，那么就制定一段時(shí)間內(nèi)的練習(xí)就按照各類元素去做，比如圖標(biāo)畫兩個(gè)星期，APP 設(shè)計(jì)排版布局練習(xí)兩個(gè)星期，插畫練習(xí)畫兩個(gè)星期，這樣堅(jiān)持下來就組成一個(gè)完整的項(xiàng)目作品了，以此類推。有了規(guī)劃目標(biāo)并且在自我驅(qū)動(dòng)的推動(dòng)下，逐漸實(shí)現(xiàn)自己的職業(yè)目標(biāo)。

設(shè)計(jì)師要如何培養(yǎng)自我驅(qū)動(dòng)可以看我之前的文章：

淺談設(shè)計(jì)師的自我驅(qū)動(dòng)

https://www.zcool.com.cn/article/ZODEzMTky.html

執(zhí)行能力(Execute)

執(zhí)行能力是指自我在工作&學(xué)習(xí)中執(zhí)行的能力，執(zhí)行能力為一個(gè)設(shè)計(jì)師最主要的核心技能，一切的能力都凌駕于這個(gè)基礎(chǔ)之上；哪怕你再能說會(huì)道，能賦予你的設(shè)計(jì)各種價(jià)值，能給予你的設(shè)計(jì)各種環(huán)境，但這些都是第二步，第一步就是你的設(shè)計(jì)表現(xiàn)達(dá)到期望值，如若第一步稿子都不好看，那么沒人愿意會(huì)聽你敘述的。前文已經(jīng)提及到了，設(shè)計(jì)師在初級(jí)至中級(jí)階段的時(shí)候大多數(shù)注重的就是表現(xiàn)手法，如同學(xué)說話一樣，表現(xiàn)手法可以看作是漢語拼音，然后才是組成一個(gè)個(gè)字，最后組成一句完整的話語。

· 自我執(zhí)行力

提升自我執(zhí)行的能力我大致分為兩個(gè)步驟：看和做。

首先先來說看，看其實(shí)是提高自己審美的一個(gè)過程，通過看一些平臺(tái)網(wǎng)站的優(yōu)秀設(shè)計(jì)作品，久而久之自己的審美能力才會(huì)提高，然而看分下來一種是帶有目的性和不帶有目的性的。不帶有目的性地去看是在自己有空余或?qū)W習(xí)時(shí)間，通過瀏覽設(shè)計(jì)網(wǎng)站采集學(xué)習(xí)一些你覺得好看的作品；采集是一個(gè)很好的習(xí)慣，我覺得是每個(gè)設(shè)計(jì)師必須養(yǎng)成的習(xí)慣，把自己平時(shí)覺得好的表現(xiàn)形式收集起來，等到某一天需要用到的時(shí)候，腦海中對(duì)當(dāng)前場(chǎng)景會(huì)有一定的印象，再根據(jù)印象去尋找采集到的作品，能很大程度上節(jié)省自己腦爆的時(shí)間，哪怕沒有采集或者文件丟失，自己的腦中大致也會(huì)有一個(gè)雛形方向。而帶有目的性地看是指針對(duì)某一個(gè)模塊去搜集整理，比如今天我需要做一個(gè)關(guān)于內(nèi)容的模塊，那么我就會(huì)去尋找一些做內(nèi)容的產(chǎn)品設(shè)計(jì)，搜集到的各類關(guān)于內(nèi)容的表現(xiàn)手法，然后結(jié)合自己的經(jīng)驗(yàn)和分析，找出最適合自己產(chǎn)品的一種。

僅僅看是不夠的，在看過之后我們需要?jiǎng)邮謬L試才能算真正地沉淀自己所看到、學(xué)到的東西。做設(shè)計(jì)最忌諱的就是“眼高手低或者眼低手高”這種狀態(tài)，有了審美但表現(xiàn)手法跟不上，或者說表現(xiàn)手法有但是審美跟不上。一定要在自己吸收了一定的審美后，通過自己的嘗試去做出來，才能真正的沉淀到自己的大腦當(dāng)中，變成自己的表現(xiàn)手法之一。最后通過大量的積累，結(jié)合對(duì)商業(yè)需求的判斷形成設(shè)計(jì)策略，才能從容應(yīng)對(duì)不同的產(chǎn)品需求，哪怕你今天做金融相關(guān)的產(chǎn)品，還是明天做電商的產(chǎn)品，后天又改做工具類產(chǎn)品，一旦形成了自己不同的應(yīng)對(duì)策略，才能做到真正意義上的游刃有余。

很多時(shí)候我們只關(guān)注到魚的大小、魚的肉質(zhì)是否鮮美那20%層面的東西，往往忽視了80%最重要的捕魚技巧和方法；看到的只是產(chǎn)品是否好看，交互是否流暢，體驗(yàn)是否良好，沒有往更深層次地去想這個(gè)產(chǎn)品的商業(yè)背景是什么，設(shè)計(jì)師為什么要這樣設(shè)計(jì)，如果換做自己的話會(huì)去怎么做；畢竟我們所做的一切訓(xùn)練、思考都是為了更好地為工作服務(wù)，就如同脫離了商業(yè)背景以后，有些設(shè)計(jì)就只是單純的炫技，并沒有解決問題的價(jià)值，而設(shè)計(jì)師的工作核心就是解決問題，所以我們要結(jié)合作品的背景、價(jià)值等因素，去看、去做、去學(xué)相應(yīng)的表現(xiàn)手法才是自我執(zhí)行的核心所在。

表達(dá)能力(Express)

表達(dá)能力是設(shè)計(jì)師除去執(zhí)行能力外第二重要的能力，小到平日里的溝通對(duì)接，大到述職晉升面試，都離不開表達(dá)能力的支持。有些設(shè)計(jì)師經(jīng)常面試怎么都過不了關(guān)，我本以為是作品集的問題，可是看完之后作品方面完全沒有什么問題，具體了解后才知道是在面試過程當(dāng)中不知如何闡述自己的作品和思路或者在闡述過程中由于緊張等因素導(dǎo)致表達(dá)斷斷續(xù)續(xù)不順暢，面試官就會(huì)覺得這個(gè)人不靠譜然后 PASS，明明做圖很優(yōu)秀卻輸在了表達(dá)上，這種情況就很憋屈。在廣告公司中，一個(gè) LOGO 或者廣告視頻往往只是贈(zèng)品，出售的卻是這個(gè)品牌VI的故事；如果一個(gè)設(shè)計(jì)師不懂得怎么闡述自己的業(yè)務(wù)，不懂得怎么推銷自己的方案，不懂得拓寬自己的個(gè)人影響力，就單純的只會(huì)執(zhí)行作圖的話，那么這名設(shè)計(jì)師是不合格的。網(wǎng)傳有一個(gè)段子“一個(gè)公司的工資排名規(guī)律：用 Word 的不如用 Excel 的，用 Excel 的不如用 PPT 的，用 PPT 的不如講 PPT 的，講 PPT 的不如聽 PPT 的，聽 PPT 的不如聽匯報(bào)的，聽匯報(bào)的不如決定的，決定的不如簽字的”，由此可見表達(dá)能力在職場(chǎng)中的重要性。

· 業(yè)務(wù)表達(dá)

業(yè)務(wù)表達(dá)是指在自己工作的過程當(dāng)中，對(duì)自己的設(shè)計(jì)方案進(jìn)行闡述。大部分設(shè)計(jì)師會(huì)遇到一個(gè)困擾，當(dāng)設(shè)計(jì)稿做完以后就不知道怎么去表達(dá)自己的設(shè)計(jì)理念，被業(yè)務(wù)方/面試官/老板提出質(zhì)疑時(shí)，比如：“你這產(chǎn)品的設(shè)計(jì)為什么要用紅色？”、“聊天信息這塊兒為什么要用小氣泡的樣式？”，往往不知道怎么去說，有一種當(dāng)時(shí)就覺得好看所以這樣做了，也沒有去想那么多的感覺，或者其他優(yōu)秀的作品/競(jìng)品是這樣做的，我也就這樣做了；那么結(jié)果往往就是自己的專業(yè)性遭到質(zhì)疑，然后轉(zhuǎn)變成業(yè)務(wù)方/老板進(jìn)行設(shè)計(jì)主導(dǎo)，形成“改來改去還是第一版好”這樣類似的惡性循環(huán)中。

那么如何提升自己的業(yè)務(wù)表達(dá)能力呢？首先設(shè)計(jì)師要提升在設(shè)計(jì)領(lǐng)域的專業(yè)度，通過學(xué)習(xí)吸納設(shè)計(jì)相關(guān)的知識(shí)，然后代入自己的設(shè)計(jì)當(dāng)中去試著闡述設(shè)計(jì)稿，準(zhǔn)備工作先做到位，收集相關(guān)的數(shù)據(jù)，掌握相對(duì)應(yīng)的設(shè)計(jì)理論，先說服自己再去說服別人。比如：“通過色彩心理學(xué)得知，紅色能帶給人興奮、激動(dòng)、熱情等積極情緒，而我們產(chǎn)品所需要透出的氛圍是熱情的、積極向上的，相對(duì)應(yīng)地激發(fā)出用戶的正向情緒，所以我這里使用紅色。”、“根據(jù)近半年數(shù)據(jù)研究得出，產(chǎn)品聊天信息模塊使用過程當(dāng)中女性用戶占總用戶數(shù)的85.9%，而小氣泡樣式相對(duì)比其他樣式更能迎合女性用戶群體的喜好，通過 A/B 測(cè)試結(jié)果得出，使用小氣泡樣式后數(shù)據(jù)上漲了15%左右，所以聊天信息模塊整體改版成小氣泡的樣式?！?

通過自己前期的準(zhǔn)備（設(shè)計(jì)理論知識(shí)補(bǔ)充、用戶調(diào)研、數(shù)據(jù)測(cè)試等），將自己的設(shè)計(jì)理念表達(dá)出來，主導(dǎo)整個(gè)設(shè)計(jì)的方向，必要時(shí)可以理性地堅(jiān)持自己的設(shè)計(jì)方案，畢竟無論是老板還是業(yè)務(wù)方，出發(fā)點(diǎn)都是希望自己的產(chǎn)品能做到最好最完善，只要你給出數(shù)據(jù)支撐和專業(yè)性的建議，他們一定都會(huì)采納接受的，而最后你的能力和專業(yè)性也得到了對(duì)應(yīng)的認(rèn)可。

· 書面表達(dá)

我本人是強(qiáng)烈建議在能力達(dá)到一定程度的時(shí)候，通過寫作來檢視自己成果的。因?yàn)橥芏鄸|西自己是明白的，但是寫出來讓其他人看懂是另外一種能力了。自己一段時(shí)間的職業(yè)經(jīng)驗(yàn)總結(jié)、對(duì)設(shè)計(jì)的見解看法、自己獨(dú)特的設(shè)計(jì)思維、一本書的讀后感等等都可以通過書面表達(dá)出來，某個(gè)知識(shí)理論難的不是學(xué)習(xí)，而是將它教授出去，因?yàn)橹挥心阆胍涯臣抡f明白，闡述得其他人都能看懂，那么首先你要對(duì)這件事理解得很透徹，然后通過自己的經(jīng)驗(yàn)和見解，轉(zhuǎn)化成通俗的語言說給別人聽。最好的狀態(tài)就是與你同樣級(jí)別的人你能與他用專業(yè)術(shù)語對(duì)話，級(jí)別比你低的人你能把理論轉(zhuǎn)換成他能聽懂的語言進(jìn)行交流，這樣才算是對(duì)理論概念理解透徹到位。

大家也明白，學(xué)習(xí)最有效的方法不是輸入而是輸出，設(shè)計(jì)也是一樣的。在學(xué)習(xí)某種理論方法后，通過書面表達(dá)出自己的見解和想法，并代入到相應(yīng)的例子當(dāng)中，做到舉一反三才能算是真正的學(xué)到了這個(gè)知識(shí)點(diǎn)。

· 述職

述職一般出現(xiàn)在晉升報(bào)告或者面試當(dāng)中，“諸侯朝于天子曰述職，述職者，述所職也?！笔雎毧梢哉f是工作報(bào)告中的總結(jié)性報(bào)告。向自己的老板述職是為了升職加薪，向面試官述職是為了獲取更好的工作機(jī)會(huì)；工作成果有了，但是述職做不好的話，在老板/面試官眼里你就做了無成效的工作，述職沒有想象的那么簡(jiǎn)單，但是也沒有那么難，很多人都會(huì)經(jīng)歷兩個(gè)述職的誤區(qū)，這些誤區(qū)我經(jīng)歷過也看到過，所以總結(jié)出來警醒大家。

一、把述職當(dāng)作流水賬

把述職當(dāng)作流水賬是很多新人容易犯的錯(cuò)誤，當(dāng)述職的時(shí)候，有的人就會(huì)陳列出自己今年做了多少多少工作：“我今年改版了 XXX 模塊”、“我設(shè)計(jì)了 XXX 的首頁(yè)”、“我通過調(diào)查研究自主推導(dǎo)改版了 XXX 模塊并落地成功”等等，這時(shí)候你的老板/面試官會(huì)心里會(huì)想：“所以呢？”“然后呢？”，工作結(jié)果固然重要，但是決定你能否晉升/錄用的，不僅僅是把你做的工作進(jìn)行流水賬般的描述就夠了的。

二、把述職當(dāng)作邀功大會(huì)

這個(gè)誤區(qū)相對(duì)來說更高端一些，述職的時(shí)候有的人常常會(huì)像邀功一樣：“我今年通過改版了 XXX 模塊，導(dǎo)致用戶量從50%上漲到了80%”、“通過調(diào)查研究改版了 XXX 模塊，最后通過 A/B 測(cè)試發(fā)現(xiàn)數(shù)據(jù)上漲了5%，最后落地全部實(shí)施新的設(shè)計(jì)方案”，這些看似闡述了產(chǎn)品的背景、自己做了什么以及結(jié)果，但是往往來說還是不夠的，以上統(tǒng)統(tǒng)可以歸為無效述職。

你做了什么重要嗎？沒那么重要，重要的是你帶了什么樣的價(jià)值。述職所需要你做的，老板/面試官所想要了解的就是：分析為什么產(chǎn)品之前數(shù)據(jù)會(huì)那么低？你是通過那些方法得出解決方案的？為什么那么多種解決方案里你要選擇這一種？你這樣的方法能否沉淀成體系？如果換一個(gè)人來按照你的方法做是否可以得到同樣的效果？有效述職也就是決定你能向上一步的，是把你在工作中的感性認(rèn)知上升到理性規(guī)律的歸納總結(jié)的能力體現(xiàn)。

· SCQA模型

SCQA 模型是一個(gè)“結(jié)構(gòu)化表達(dá)”工具，是麥肯錫咨詢顧問芭芭拉·明托在《金字塔原理》中提出的，而這個(gè)模型可以套用在業(yè)務(wù)表達(dá)、書面表達(dá)以及述職任何場(chǎng)景當(dāng)中；S是指場(chǎng)景(Situation)，C是指沖突(Complication),Q是指問題(Question)，A是指解決方案(Answer)。

無論你是在向業(yè)務(wù)方/老板闡述方案做工作匯報(bào)，還是自己寫作梳理都可以用到這個(gè)模型；S場(chǎng)景陳述的通常是大家都熟悉的事、普遍認(rèn)同的事、事情發(fā)生的背景。由此切入既不突兀交代了事情背景又容易讓大家產(chǎn)生共鳴，產(chǎn)生代入感，然后引出沖突C。Q是其中發(fā)現(xiàn)的問題，最后A給出相對(duì)應(yīng)的解決方案，是對(duì)Q的回答也是接下來我們要闡述的內(nèi)容。整個(gè)結(jié)構(gòu)其實(shí)是形成良好的溝通氛圍，然后帶出沖突和疑問，最后提供可行的解決方案。

我們熟知的廣告詞經(jīng)常使用這個(gè)套路：

得了灰指甲——描述場(chǎng)景【S】

一個(gè)傳染兩——發(fā)生了沖突【C】

問我怎么辦？——提出問題【Q】

馬上用亮甲！——給出解決方案【A】

這個(gè)模型無論作為演講的開場(chǎng)白，作為向業(yè)務(wù)方/老板闡述設(shè)計(jì)方案的開場(chǎng)，還是作為一篇文章的序言都是屢試不爽的。S場(chǎng)景需要讓對(duì)方產(chǎn)生共鳴，必須讓對(duì)方產(chǎn)生一種：“是的，你說的好有道理”的反應(yīng)，只有場(chǎng)景被認(rèn)同了才能繼續(xù)故事的發(fā)展，這時(shí)候打破你給對(duì)方營(yíng)造的安全感，制造C沖突，相繼提出Q問題，共同確認(rèn)面臨的一個(gè)問題，然后你給出你的A解決方案，而這個(gè)解決方案就是你整個(gè)敘述的核心和中心思想。

比如你要向業(yè)務(wù)方/老板闡述你的設(shè)計(jì)方案，就可以這樣來描述：“在 XXv2.0 版本上線后（交代場(chǎng)景），收集了近半年以來的數(shù)據(jù)發(fā)現(xiàn)，女性用戶相對(duì)減少了20%（發(fā)生沖突），為什么會(huì)減少20%的女性用戶（提出疑問），根據(jù)我的調(diào)查研究發(fā)現(xiàn)原因是改版后整個(gè)產(chǎn)品色調(diào)偏男性化，由于我們產(chǎn)品的受眾群體大多是女性用戶，男女比例為1:3，所以在 v.2.1 的改版中我將整個(gè)產(chǎn)品色調(diào)改為偏女性化的方向（給出解決方案）”。

同樣，我寫這個(gè)章節(jié)的思路就可以這樣理解：設(shè)計(jì)師們工作中通常會(huì)面臨述職、面試以及寫文章等情況（交代場(chǎng)景），但是往往很多設(shè)計(jì)師不知道如何去表達(dá)，思路也不是很清晰，導(dǎo)致述職無效、面試失敗等情況（發(fā)生沖突），要如何避免這種情況發(fā)生？如何鍛煉自己的表達(dá)能力？（提出疑問），那就要多通過 SCQA 模型在生活工作中去練習(xí)表達(dá)（給出解決方案）。

生活能力(Lives)

最后是生活能力，設(shè)計(jì)不是工作的全部，工作不是生活的全部，我們應(yīng)該過好自己的生活，產(chǎn)品設(shè)計(jì)都是從生活中獲得靈感和啟發(fā)的，我們?nèi)绾螌?duì)待自己的生活，我們就會(huì)得到怎樣的反饋。多陪伴下自己的家人、培養(yǎng)一個(gè)興趣愛好、保持學(xué)習(xí)新鮮事物的動(dòng)力等等，成為一個(gè)有趣的靈魂。往往設(shè)計(jì)師能從多樣化的生活中發(fā)現(xiàn)靈感和啟發(fā)，也能從生活中找到不同用戶的痛點(diǎn)和感知；如何做一名好的設(shè)計(jì)師，就是帶著同理心去做設(shè)計(jì)，如何帶著同理心做設(shè)計(jì)，就是將自己當(dāng)作用戶，而用戶是融入到生活中的。下面我就來例舉兩個(gè)通過生活中的啟發(fā)改變產(chǎn)品設(shè)計(jì)的例子。

· 用戶擁有感

在購(gòu)買星巴克的時(shí)候，為什么服務(wù)員要把顧客的名字寫在杯子上呢？難道僅僅是為了分辨嘛？像其他奶茶店一樣貼一張打印好的便簽不就好了么？去宜家購(gòu)置家具的時(shí)候，為什么要讓顧客自己親手組裝家具？可口可樂為什么可以定制自己城市的易拉罐？因?yàn)檫@一切都是要給用戶塑造擁有感，人是一種很不理性的生物，只要先拿到一個(gè)東西，就會(huì)覺得自己擁有這個(gè)東西，就不想放掉它了，這就是擁有感最根本的示范。從心理學(xué)的角度來說這被稱為稟賦效應(yīng)，意思就是我們對(duì)于自己所擁有東西的價(jià)值往往會(huì)看得更重。這就是為什么小時(shí)候玩的玩具、收集的畫冊(cè)、穿的衣服都已經(jīng)沒什么用了，我們還要留著當(dāng)紀(jì)念的原因。因?yàn)槲覀兊娜诵詫?duì)于擁有感非常執(zhí)著，對(duì)于自己得到的東西非常迷戀，當(dāng)我們覺得要失去它的時(shí)候，會(huì)有一種損失感，覺得很不舍，會(huì)覺得心里很難受，這就是稟賦效應(yīng)在我們身上發(fā)生了最明顯的效果。

而這樣的營(yíng)銷策略被用到產(chǎn)品設(shè)計(jì)當(dāng)中，例如前段時(shí)間很火的軟件 Zepeto，每個(gè)人都不一樣的生成圖片洗刷著我們的朋友圈；例如每年年末的賬單、網(wǎng)易云音樂總結(jié)等等，賬單它只是一份賬單，根據(jù)不同用戶生成不同的賬單，也就賦予了不同的意義；又例如各種 H5 性格測(cè)試生成的分享卡等等，這些都是產(chǎn)品設(shè)計(jì)中從生活中營(yíng)銷案例中汲取經(jīng)驗(yàn)的體現(xiàn)。

· 線下導(dǎo)購(gòu)轉(zhuǎn)線上

每當(dāng)我們?nèi)サ缴虉?chǎng)線下商店的時(shí)候，導(dǎo)購(gòu)員和我們素未謀面，但是卻可以通過我們的大致年齡、穿著、性別等因素推斷我們需要什么樣的產(chǎn)品，然后向我們推銷對(duì)應(yīng)的產(chǎn)品，如若剛好觸動(dòng)我們的需求，于是我們就會(huì)發(fā)生購(gòu)買這個(gè)行為。生活中線下導(dǎo)購(gòu)的方式也被運(yùn)用到線上導(dǎo)購(gòu)的產(chǎn)品中，同樣平臺(tái)和用戶素未謀面，可是可以通過掌握大數(shù)據(jù)，分析用戶近半年、近一個(gè)月的購(gòu)買和瀏覽商品的數(shù)據(jù)，結(jié)合相對(duì)應(yīng)季節(jié)等因素推送給用戶所需要的產(chǎn)品。比如我平時(shí)經(jīng)常瀏覽一些潮牌個(gè)性的衣物，現(xiàn)在正值冬季，想買一件冬季穿的棉衣，那么當(dāng)我打開淘寶的時(shí)候，系統(tǒng)會(huì)推送一些潮牌大衣等冬季衣物在首頁(yè)，我正好有這個(gè)需求又符合我的口味愛好，自然而然就會(huì)點(diǎn)進(jìn)去購(gòu)買了。

有一條創(chuàng)業(yè)準(zhǔn)則是這樣說的：“如果有點(diǎn)兒閑錢，還有點(diǎn)時(shí)間，但又找不到商機(jī)，最好的辦法就是去鬧市、電梯、小區(qū)人流量最高的那個(gè)大門口，端杯茶，靜靜的聽人們抱怨?！?，谷歌、蘋果公司的設(shè)計(jì)思維首當(dāng)其沖的就是帶著同理心去設(shè)計(jì)、去制定設(shè)計(jì)策略，同理心來源于生活，而這一切只有設(shè)計(jì)師把自己的生活經(jīng)營(yíng)好，才能從當(dāng)中獲得啟發(fā)和感悟，然后代入自己的設(shè)計(jì)理念當(dāng)中，設(shè)計(jì)出真正能根本解決問題的產(chǎn)品。

其次偶爾會(huì)從網(wǎng)上看到或者聽說 XX 設(shè)計(jì)師猝死，XX 設(shè)計(jì)師檢驗(yàn)出 XX 疾病等等，每每看到此類消息都會(huì)感到痛心，工作不是生活的全部，如果連自己的工作和生活都處理不好的話，那么說明這個(gè)人生活能力真的很糟糕。如果一個(gè)人整天筋疲力盡打不起精神，那么他的工作會(huì)做得好嘛？所以在這請(qǐng)求大家合理安排好工作時(shí)間，勞逸結(jié)合，多鍛煉身體，多花些時(shí)間陪伴父母、家人，這樣才能帶著健康的身心去工作，從而取得更好的工作成果，形成一個(gè)良性的循環(huán)。你怎樣對(duì)待生活，生活就會(huì)怎樣對(duì)待你。

作者：雨灰    來源：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司