如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
項(xiàng)目背景：為了配合世界杯做的H5活動(dòng)，主題是DIY你的世界杯時(shí)刻
玩法：選擇自己看世界杯的場(chǎng)景，可以在畫(huà)面當(dāng)中添加食物和自定義的小元素，另外根據(jù)場(chǎng)景的變換人物的腿也可以選擇哦
項(xiàng)目周期大概半個(gè)月，和團(tuán)隊(duì)的小伙伴一起完成的，感謝@珊，@暖暖，@明明
使用工具包括sketch、ps、手繪板
ps：做H5真的是很累，工作量大，畫(huà)的手疼，不過(guò)也積累了很多的經(jīng)驗(yàn)，上線了好開(kāi)心!
藍(lán)藍(lán)設(shè)計(jì)( m.wnxcall.com )是一家專注而深入的界面設(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ù)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
Material Design（以下簡(jiǎn)稱MD）是谷歌設(shè)計(jì)的一套視覺(jué)語(yǔ)言設(shè)計(jì)規(guī)范，主要應(yīng)用于安卓類應(yīng)用。
iOS Human Interface Guidelines（以下簡(jiǎn)稱iOS）是蘋(píng)果公司針對(duì) iOS設(shè)計(jì)的一套人機(jī)交互指南，目的是為了使運(yùn)行在 iOS 上的應(yīng)用都能遵從一套特定的視覺(jué)以及交互特性，從而能夠在風(fēng)格上進(jìn)行統(tǒng)一。
相對(duì)來(lái)說(shuō)，我們對(duì)于 iOS 的設(shè)計(jì)規(guī)范更加熟悉——因?yàn)榭紤]到成本，設(shè)計(jì)師進(jìn)行產(chǎn)品設(shè)計(jì)的時(shí)候只會(huì)出一套 iOS 的設(shè)計(jì)稿，然后去適配安卓機(jī)型。
很少會(huì)針對(duì)安卓機(jī)型再出一套 MD風(fēng)格的方案，這種現(xiàn)象雖然存在但是并不合理。不同的系統(tǒng)/平臺(tái)采用了不同的設(shè)計(jì)語(yǔ)言，不同的設(shè)計(jì)語(yǔ)言會(huì)培養(yǎng)出不同的操作習(xí)慣。
例如使用安卓手機(jī)的用戶平時(shí)見(jiàn)到的都是 MD風(fēng)格的界面，突然下了一個(gè) iOS風(fēng)格的應(yīng)用，那么操作起來(lái)就會(huì)很不習(xí)慣，增加了學(xué)習(xí)成本。
為了讓產(chǎn)品可以適用不同平臺(tái)用戶的操作習(xí)慣，提供 MD 和 iOS 兩套設(shè)計(jì)稿是非常有必要的。當(dāng)然 MD 和 iOS 的差異不是一篇文章就能說(shuō)清楚的，這里我就從陰影、導(dǎo)航和配色這三個(gè)方面來(lái)簡(jiǎn)單分析一下 MD 和 iOS 的差異。
對(duì)于不太熟悉 MD 的設(shè)計(jì)師來(lái)說(shuō)，MD 意味著大色塊+陰影。
為什么 MD 如此癡迷于陰影？
從它的名字就可以看出來(lái)——Material Design，這里的 material 指的是紙張；因?yàn)閬?lái)源于現(xiàn)實(shí)生活，所以 MD 非常喜歡使用真實(shí)世界元素的物理規(guī)律與空間關(guān)系來(lái)表現(xiàn)組件之間的層級(jí)關(guān)系，而陰影就是最常見(jiàn)的表現(xiàn)形式：
同樣的賬戶注冊(cè)，安卓界面中按鈕帶有陰影而 iOS 界面中按鈕沒(méi)有陰影。
FAB（Floating Action Button），帶有陰影的浮動(dòng)操作按鈕甚至成為了 MD 的一大招牌。相比較而言iOS更加扁平化。
產(chǎn)品導(dǎo)航體系主要由菜單欄構(gòu)成，而根據(jù)位置以及交互方式可以分為頂部欄菜單、底部欄菜單和側(cè)邊欄菜單。iOS 的導(dǎo)航體系主要由底部欄菜單構(gòu)成，而 MD 大量使用了頂部欄菜單和側(cè)邊欄菜單。
下面我們來(lái)看幾個(gè)例子：
網(wǎng)易云音樂(lè)在 iOS 中采用的是底部欄菜單導(dǎo)航，而在安卓機(jī)型上導(dǎo)航欄被移到界面頂部，「賬號(hào)」被收到側(cè)邊欄中。
b站在 iOS 中有底部欄菜單有5個(gè)標(biāo)簽，而在安卓機(jī)型中只有4個(gè)標(biāo)簽，「我的」同樣被側(cè)邊欄收起來(lái)。
推特在 iOS 中使用的底部欄菜單導(dǎo)航，在安卓機(jī)型中導(dǎo)航欄被移到了頂部。
而 Apple Music 做的更徹底，在安卓機(jī)型上直接舍棄了底部菜單欄，采用了側(cè)邊欄作為主導(dǎo)航模式。
我們發(fā)現(xiàn)前兩款國(guó)產(chǎn)應(yīng)用在安卓機(jī)型上都保留了底部欄菜單，而后兩款國(guó)外應(yīng)用直接砍掉底部欄菜單。不只是 Apple music 和推特，很多國(guó)外的安卓類應(yīng)用都沒(méi)有使用底部欄菜單。而國(guó)內(nèi)的應(yīng)用因?yàn)榭紤]到 iOS，即使 MD 化也是閹割版的，屬于 iOS 和 MD 的混血兒。甚至很多安卓應(yīng)用在設(shè)計(jì)風(fēng)格上往 iOS 靠攏，以b站為例，其5.11之前的安卓版本中都是沒(méi)有底部欄菜單的。
當(dāng)然這里并不是去評(píng)價(jià) MD 和 iOS 哪個(gè)導(dǎo)航體系更好用，我說(shuō)下自己的觀點(diǎn)：
底部欄菜單的使用非常方便用戶在單手握持情況下的操作，但是對(duì)于大屏手機(jī)來(lái)說(shuō)，單手操作會(huì)顯得很吃力。如果用戶改由雙手握持手機(jī)，那么從易用性上來(lái)說(shuō)底部欄菜單沒(méi)有任何優(yōu)勢(shì)。
MD 的方案更加注重對(duì)界面空間的利用，側(cè)邊欄菜單就不說(shuō)了。以底部欄菜單為例，在安卓機(jī)型中用戶滑動(dòng)的時(shí)候底部欄菜單會(huì)隱藏，方便的用戶可以看下知乎，安卓版的底部欄用戶滑動(dòng)的時(shí)候會(huì)隱藏，而 iOS 則是固定不動(dòng)的。
側(cè)邊欄的優(yōu)勢(shì)還體現(xiàn)在可以提供更多的標(biāo)簽，底部欄菜單最多可以放5個(gè)。但是側(cè)邊欄菜單需要用戶點(diǎn)擊才能調(diào)出來(lái)，比較隱蔽，而底部欄和頂部欄相對(duì)來(lái)說(shuō)就會(huì)顯得一目了然，總之各有千秋。
至于為什么 MD 會(huì)拋棄底部欄菜單，我個(gè)人的理解是設(shè)備原因。因?yàn)榘沧繖C(jī)型底部有三個(gè)物理按鍵，如果采用底部欄菜單作為主導(dǎo)航模式，容易造成用戶誤點(diǎn)擊。
類似的還有 web 類應(yīng)用，因?yàn)闉g覽器的控件欄也在底部，所以如果采用了底部欄菜單同樣會(huì)造成用戶的誤操作。
MD 提倡使用高飽和度的對(duì)比色來(lái)提升產(chǎn)品的視覺(jué)表現(xiàn)力，也就是我在上面提到的大色塊。同樣的一個(gè)功能，從底部欄背景色、插畫(huà)到按鈕，我們可以發(fā)現(xiàn) iOS 在色彩的使用上比較克制。
知乎之前的安卓版本使用了大面積的藍(lán)色，后來(lái)改成跟 iOS 一樣的白色。這樣的調(diào)整褒貶不一，有的用戶反饋這完全照搬了 iOS，要改回 MD。
產(chǎn)品界面設(shè)計(jì)中對(duì)比效果主要由配色、尺寸、間距和陰影來(lái)完成。MD 在配色和陰影上做的比較出彩，所以 MD風(fēng)格的產(chǎn)品在視覺(jué)表現(xiàn)上更有沖擊力。而 iOS 則顯得比較小清新，追求扁平和簡(jiǎn)潔。所以我們無(wú)法去評(píng)判這兩款設(shè)計(jì)規(guī)范的孰好孰壞，因?yàn)槠涓髯缘某霭l(fā)點(diǎn)就是不一樣的。
當(dāng)然前面也提到了 MD 和 iOS 的差異不僅僅體現(xiàn)在以上說(shuō)的這三點(diǎn)，還有一些小細(xì)節(jié)也非常值得我們思考。我們都知道在 iOS系統(tǒng)中，用戶向右滑動(dòng)的時(shí)候會(huì)返回上一級(jí)頁(yè)面。因?yàn)樘O(píng)果手機(jī)沒(méi)有物理返回按鍵，所以這種機(jī)制非常受歡迎，但是在一些特定場(chǎng)景的時(shí)候就會(huì)有問(wèn)題。例如如果我想復(fù)制微博里的「一曲肝腸斷，天涯何處覓知音」，選中光標(biāo)從左向右滑動(dòng)，這時(shí)就會(huì)返回上一級(jí)頁(yè)面，特別不方便。所以我只能從右向左進(jìn)行復(fù)制，我后來(lái)試了一下微信和 QQ，發(fā)現(xiàn)默認(rèn)復(fù)制的是整條動(dòng)態(tài)，這也算是一個(gè)折衷的方案。
這篇文章并不是去評(píng)判 iOS 和 MD 兩種設(shè)計(jì)風(fēng)格孰好孰壞，也不是讓我們現(xiàn)在就去為自己的產(chǎn)品做出兩套設(shè)計(jì)稿，這個(gè)目前來(lái)說(shuō)也不太現(xiàn)實(shí)。很多國(guó)民類應(yīng)用都只采用了一套設(shè)計(jì)稿，大家都這么做，整個(gè)大環(huán)境就是這樣。
但是還是那句話：存在不一定合理。出兩套設(shè)計(jì)稿雖然現(xiàn)在看起來(lái)不現(xiàn)實(shí)，但是我們也要做好準(zhǔn)備，要有危機(jī)感。
藍(lán)藍(lán)設(shè)計(jì)( m.wnxcall.com )是一家專注而深入的界面設(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ù)
每當(dāng)提到設(shè)計(jì)方法論時(shí)，總難免會(huì)給人一種比較虛空偏理論，或者說(shuō)比較難應(yīng)用到設(shè)計(jì)實(shí)戰(zhàn)中的感覺(jué)；但是這一次，經(jīng)過(guò)了自己的實(shí)踐之后，我覺(jué)得確實(shí)有一個(gè)比較靠譜的視覺(jué)推進(jìn)方法可以分享給大家，所以才有了這篇總結(jié)。
先直接概括一下這個(gè)方法，極限推敲法：遇到難題時(shí)，先把問(wèn)題拆解成一個(gè)或者幾個(gè)維度，選取某個(gè)維度，往兩個(gè)極端進(jìn)行嘗試，隨后逐漸中和極端方案，逐步找到自己想要的預(yù)期點(diǎn)，明確該維度的方向。
例一：雄獅的logo設(shè)計(jì)
期望比較簡(jiǎn)潔的同時(shí)，又不能丟了獅子的辨識(shí)度，比較糾結(jié)的是，這個(gè)度該如何把握？
按照極限推敲法來(lái)，我們先確立「極簡(jiǎn)」和「寫(xiě)實(shí)」作為關(guān)鍵維度，然后優(yōu)先嘗試兩端比較極限的方案；了解清楚兩種極限的可能性之后，繼續(xù)嘗試，加減細(xì)節(jié)，尋找一個(gè)符合預(yù)期的圖形狀態(tài)；最后的定稿，既保持了鮮明的特征和辨識(shí)度，同時(shí)也不失簡(jiǎn)潔。
（推進(jìn)過(guò)程中出方案的順序在圖中用數(shù)字標(biāo)出，「1」即為第一次嘗試，以此類推；具體推敲過(guò)程不在此贅述。）
例二：網(wǎng)易郵箱大師Tab icon改版設(shè)計(jì)
在網(wǎng)易郵箱大師5.0改版中，常駐底部的 Tab icon 是單獨(dú)進(jìn)行推敲優(yōu)化的。在之前的版本中，圖標(biāo)的樣式相對(duì)比較的刻板，偏向純表意，表現(xiàn)力不強(qiáng)；在5.0視覺(jué)改版的策略中，我們是以「優(yōu)雅」作為一個(gè)關(guān)鍵方向進(jìn)行優(yōu)化的，所以軸的兩端就定為「刻板」和「優(yōu)雅」，雖然并不是完全對(duì)立的兩個(gè)方向，同時(shí)也包含了一些「表意」等其他層面的因素，但是其中有部分感受是存在對(duì)立面的，我們就以此作為關(guān)鍵點(diǎn)進(jìn)行推敲。
可以從圖中看出，在不影響表意的前提下，各方案間的圖標(biāo)改動(dòng)非常微小，在有限的空間內(nèi)去做一些變化；幾經(jīng)嘗試之后，還是選擇了更常規(guī)更偏表意優(yōu)先，但是也適當(dāng)加入曲線因素體現(xiàn)「優(yōu)雅」的方案作為最終方向。
例三：內(nèi)容信息流列表設(shè)計(jì)
期望內(nèi)容列表的展示能給人以精品的感覺(jué)，但又不失去過(guò)多的閱讀效率。
首先確立以信息量的多少作為關(guān)鍵維度，在形成了初步的樣式之后，繼續(xù)調(diào)整在一屏內(nèi)條目的疏密以及排版來(lái)感知信息量的多少；在嘗試之后，最終討論決定，在初期內(nèi)容源還不夠「精」的情況下，還是最右側(cè)方案的信息呈現(xiàn)更為合適，并以此做了最終調(diào)整。
很多時(shí)候，極端情況是很難想象或者預(yù)判出來(lái)的，只有嘗試之后，才能更清楚的了解到實(shí)際會(huì)出來(lái)什么效果，達(dá)到怎樣的預(yù)期；在多次推敲之后，就能更好的了解期望的狀態(tài)到底應(yīng)該在哪個(gè)「位置」，讓模糊的概念逐漸變得清晰；該方法最大的好處在于，讓嘗試變的更有目標(biāo)，而不是胡亂嘗試，讓每一次嘗試都更有意義。
這個(gè)方法也算是視覺(jué)標(biāo)準(zhǔn)可量化的一次探索，我稱之為「?jìng)瘟炕?，因?yàn)樽詈蟮臎Q策仍然是依靠感官去衡量判斷的；把錯(cuò)綜復(fù)雜的感官拆解成一些更具體單一的關(guān)鍵維度也是非常關(guān)鍵的一個(gè)步驟，是開(kāi)始「?jìng)瘟炕沟那疤帷?
在以上所舉的例子中，有 logo設(shè)計(jì)，icon設(shè)計(jì)和界面設(shè)計(jì)（所用到的例子都是實(shí)戰(zhàn)，均為過(guò)往項(xiàng)目）；其實(shí)對(duì)象可以是各種各樣的設(shè)計(jì)，只要存在某種程度把握上的糾結(jié)，無(wú)法預(yù)判或者不明確方向的情況，都可以通過(guò)這個(gè)方法有效的推進(jìn)并找到當(dāng)下的最優(yōu)解。在實(shí)戰(zhàn)中，假如沒(méi)有那么多的時(shí)間和精力去細(xì)化，可以僅選取關(guān)鍵維度，然后在關(guān)鍵維度內(nèi)嘗試方向探索性的方案（粗略的嘗試），只要能感受到差異，即是有效的方案；當(dāng)然如果有充足的時(shí)間，那完全可以精細(xì)化出方案，這樣方案所傳達(dá)的感受也會(huì)更加精準(zhǔn)細(xì)致。
要注意的是，這個(gè)方法并不是一種妥協(xié)的方式，也不是一種擇中方案；我們所要尋找的是在一個(gè)維度中感受符合預(yù)期的位置，如果適合，也可以是非常激進(jìn)的方案。
這個(gè)方法只是提供了一種思路，如何更有效的嘗試方案來(lái)推進(jìn)視覺(jué)產(chǎn)出的思路；其中最主要的環(huán)節(jié)還是靠自己去摸索出方案的實(shí)踐部分，去實(shí)打?qū)嵉膰L試；在這其中投入精力的多少，也受其他客觀因素的影響，例如項(xiàng)目截止時(shí)間等等；不過(guò)我認(rèn)為個(gè)人的主觀能動(dòng)性才是主導(dǎo)，一定不能懶，要作圖，要?jiǎng)悠饋?lái)，僅靠憑空想象方案在腦中「出圖」，一來(lái)說(shuō)服不了別人，二來(lái)自己也底氣不足。只要圖形圖像語(yǔ)言一直存在，那么我覺(jué)得對(duì)視覺(jué)設(shè)計(jì)師來(lái)說(shuō)有一句話就是永遠(yuǎn)的真理：沒(méi)圖說(shuō)個(gè)XX。
本文主要從需求類型、表現(xiàn)形式、如何做正確設(shè)計(jì)來(lái)分析，設(shè)計(jì)師應(yīng)如何洞察需求本質(zhì)？如何做正確的設(shè)計(jì)？
有這樣兩種情況在設(shè)計(jì)師工作中經(jīng)常會(huì)遇到：業(yè)務(wù)方改來(lái)改去，經(jīng)過(guò)幾十遍的修改最終選了第一稿；一群非專業(yè)的人或領(lǐng)導(dǎo)在設(shè)計(jì)師身邊指來(lái)指去，出發(fā)點(diǎn)都是「我覺(jué)得」主觀感受，沒(méi)一個(gè)能提出有點(diǎn)含金量的意見(jiàn)。
實(shí)際工作里我們經(jīng)常遇到業(yè)務(wù)方一直在針對(duì)幾個(gè)問(wèn)題要求設(shè)計(jì)師在不停修改 ：顏色、大小、氛圍等。但是卻很少看到設(shè)計(jì)師跟業(yè)務(wù)方溝通設(shè)計(jì)結(jié)果出現(xiàn)的場(chǎng)景？是為了達(dá)到什么目標(biāo)？導(dǎo)致設(shè)計(jì)師一直處于不?！父母母摹沟目啾茽顟B(tài)。
本篇文章內(nèi)容為：設(shè)計(jì)師如何洞察需求本質(zhì)？如何做正確的設(shè)計(jì)？
設(shè)計(jì)師在工作中接觸到的需求一般分為三類：業(yè)務(wù)需求、用戶需求、產(chǎn)品功能需求。
業(yè)務(wù)需求是指產(chǎn)品和公司為了實(shí)現(xiàn)商業(yè)目標(biāo)產(chǎn)生的需求。不以結(jié)婚為目的的談戀愛(ài)就是耍流氓，不以賺錢(qián)為目的的產(chǎn)品也是耍流氓，說(shuō)來(lái)說(shuō)去最終目的都是為了實(shí)現(xiàn)商業(yè)價(jià)值。
業(yè)務(wù)需求多數(shù)來(lái)源老板、公司戰(zhàn)略、運(yùn)營(yíng)策略等，一般圍繞如何提升公司銷售額度、如何提升用戶量、如何提升利潤(rùn)、如何提升用戶轉(zhuǎn)化、如何推廣運(yùn)營(yíng)等等。
用戶需求是指通過(guò)調(diào)研或客服投訴搜集到的用戶反饋，一般來(lái)源于用戶在使用產(chǎn)品過(guò)程中的需求。在 kano模型中對(duì)用戶需求一般分為：基本需求、期望需求、魅力需求、無(wú)差異需求、逆向需求。針對(duì)這些需求公司都會(huì)結(jié)合發(fā)展戰(zhàn)略與優(yōu)先級(jí)去分析，可分為必做、應(yīng)做、可做、不做。
基于業(yè)務(wù)和用戶價(jià)值進(jìn)行需求分析的結(jié)果，為滿足業(yè)務(wù)和用戶提出的一組產(chǎn)品功能列表，功能需求構(gòu)成了一個(gè)完整的產(chǎn)品抽象模型，是團(tuán)隊(duì)之間進(jìn)行產(chǎn)品設(shè)計(jì)研發(fā)的基礎(chǔ)。
這有個(gè)萬(wàn)能的公式：銷售額=流量x客單價(jià)x轉(zhuǎn)化率
拿某某購(gòu)物中心舉個(gè)例子：銷售額就是我們聽(tīng)到的某某購(gòu)物中心在五一期間賣(mài)了xxx億的額度，流量就是五一期間有多少顧客進(jìn)來(lái)了這個(gè)購(gòu)物中心，客單價(jià)就是額度除以購(gòu)買(mǎi)人數(shù)，轉(zhuǎn)化率是訂單除以訪客。在同等訪客量的情況下訂單越低，轉(zhuǎn)化率越低。
這個(gè)公式換到互聯(lián)網(wǎng)產(chǎn)品中也一樣，多少用戶進(jìn)入 app，有多少人產(chǎn)生購(gòu)買(mǎi)行為，以及每個(gè)人購(gòu)買(mǎi)的單價(jià)，這些因素都是決定這個(gè)產(chǎn)品最終的銷售額。
業(yè)務(wù)需求是流量增長(zhǎng)
在產(chǎn)品發(fā)展初期，面臨的第一個(gè)問(wèn)題就是訪問(wèn)量，也就是產(chǎn)品的曝光率，用戶到達(dá)率。我們?cè)谏钪袝?huì)經(jīng)?？吹揭恍┕菊?qǐng)一些自帶流量的網(wǎng)紅、明星來(lái)做宣傳為公司帶來(lái)一些流量。在互聯(lián)網(wǎng)產(chǎn)品中常見(jiàn)的一些流量增長(zhǎng)的策劃為拉新獎(jiǎng)勵(lì)、高流量為低流量導(dǎo)流、免費(fèi)效應(yīng)等。
拉新獎(jiǎng)勵(lì)：推薦有獎(jiǎng)、注冊(cè)有獎(jiǎng)。
導(dǎo)流：高流量為低流量導(dǎo)流。
免費(fèi)：0元購(gòu)、秒殺等。
業(yè)務(wù)需求是活躍度
產(chǎn)品活躍度是指用戶每天開(kāi)啟 app 的頻次，每天停留的時(shí)間。不同屬性的產(chǎn)品活躍度的規(guī)律也不一定，比如：新聞?lì)?、理?cái)類、工具類的產(chǎn)品，針對(duì)不同用戶、不同屬性的產(chǎn)品提升活躍度的方式不一樣。
比較常見(jiàn)的提升活躍度的策略是：獎(jiǎng)勵(lì)刺激、有價(jià)值的內(nèi)容吸引、通過(guò)成長(zhǎng)等級(jí)來(lái)引起用戶參與。
獎(jiǎng)勵(lì)：補(bǔ)貼、答題獎(jiǎng)勵(lì)、分享得積分、返現(xiàn)金、簽到、打卡獎(jiǎng)勵(lì)。
內(nèi)容：推送激活、話題討論、焦點(diǎn)&熱點(diǎn)內(nèi)容。
榮譽(yù)感：排行榜、等級(jí)。
業(yè)務(wù)需求是用戶留存
經(jīng)過(guò)運(yùn)營(yíng)渠道推廣流量提升后，倒入一些新用戶，用戶經(jīng)過(guò)一段時(shí)間體驗(yàn)后是否留存關(guān)鍵在于：用戶需求被滿足、以及體驗(yàn)流程流暢決定的。當(dāng)用戶發(fā)現(xiàn)產(chǎn)品對(duì)自己沒(méi)有價(jià)值、體驗(yàn)沒(méi)有好感就會(huì)選擇離開(kāi)。
比較常見(jiàn)的留存策略是：翻倍獎(jiǎng)勵(lì)、產(chǎn)品體驗(yàn)迭代優(yōu)化、評(píng)分、用戶成長(zhǎng)體系等。
業(yè)務(wù)需求是品牌感知
用戶對(duì)同類產(chǎn)品的選擇很大程度取決于產(chǎn)品品牌的影響力，業(yè)務(wù)方在推廣中也會(huì)有針對(duì)品牌提升感知力。
比較常見(jiàn)的有：h5的情感推廣、公益活動(dòng)等。
網(wǎng)易的h5活動(dòng)在2017年經(jīng)常刷爆全屏，他們主打的是情感系列，深入人心，不僅提升主品牌影響，也提升了用戶對(duì)網(wǎng)易噠噠的產(chǎn)品感知。
小結(jié)：業(yè)務(wù)需求設(shè)計(jì)要點(diǎn)
對(duì)于用戶提出的一些功能的需求，設(shè)計(jì)師不能盲目聽(tīng)從，需要真正去識(shí)別有用的用戶、有價(jià)值的需求。我們可以通過(guò)一些調(diào)研、觀察，分析用戶的特征、習(xí)慣、場(chǎng)景和行為，以及期望得到什么效果，挖掘用戶的內(nèi)在動(dòng)機(jī)和原因，只有搞明白了用戶需求的本質(zhì)，才有可能做出用戶滿意的產(chǎn)品。
KANO模型定義了五類需求，我主要針對(duì)下面3類經(jīng)常遇見(jiàn)的說(shuō)下，也可以分為3個(gè)步驟去做：基本需求 — 期望需求 — 魅力需求。
用戶基本需求
指用戶認(rèn)為產(chǎn)品必須要有的屬性或者功能，比如：購(gòu)買(mǎi)流程的完整體驗(yàn)、完整注冊(cè)流程，這些基本需求一般來(lái)源產(chǎn)品初期迭代中的優(yōu)化完善。
用戶期望需求
用戶在主流程體驗(yàn)過(guò)程中增加一些利于自己快捷、便利的需求，這些功能并不影響主流程體驗(yàn)，比如：購(gòu)買(mǎi)過(guò)程中對(duì)收藏、歷史價(jià)格對(duì)比、搜索等，這些期望需求可以轉(zhuǎn)化成一些潛在的競(jìng)爭(zhēng)優(yōu)勢(shì)。
例如：下圖用戶需求搜集中用戶集中在對(duì)歷史價(jià)位走勢(shì)、提醒等功能的一些期望需求上。
△ 根據(jù)用戶期望需求調(diào)整的設(shè)計(jì)構(gòu)思
用戶興奮魅力需求
魅力需求是每一個(gè)產(chǎn)品追尋的方向，給用戶帶來(lái)一些超越他們預(yù)期的體驗(yàn)?？梢岳斫鉃樵跐M足用戶的基本需求、期望需求的基礎(chǔ)上給用戶創(chuàng)造附加價(jià)值體驗(yàn)，屬于創(chuàng)新設(shè)計(jì)思維范圍，可以提升好感及忠誠(chéng)度。比如：京東推出vr口紅試妝體驗(yàn)，天貓推出試裝直播等。
小結(jié)：對(duì)用戶需求設(shè)計(jì)要點(diǎn)
注冊(cè)流程簡(jiǎn)化
大量注冊(cè)資料讓用戶失去耐心，流程簡(jiǎn)化提升新用戶流量。
漏斗數(shù)據(jù)下的流程轉(zhuǎn)化
在公司xx流程里，我們看到每個(gè)頁(yè)面的流失漏斗，發(fā)現(xiàn)用戶在購(gòu)買(mǎi)決策「結(jié)果分析」那一步流失特別多，決定砍掉了介紹步驟，把之前5步改成三步?jīng)Q策。
這是一個(gè)非常妙的設(shè)計(jì)：對(duì)用戶來(lái)說(shuō)，直接觸達(dá)決策前的結(jié)果分析，用戶對(duì)結(jié)果的強(qiáng)感知轉(zhuǎn)化下一步操作，從數(shù)據(jù)來(lái)看這一步轉(zhuǎn)化率提高不少。
△ 公司實(shí)際創(chuàng)新項(xiàng)目不做露出具體頁(yè)面
留存
新用戶進(jìn)入 app 后，一般分為3個(gè)時(shí)期：振蕩期間、選擇期、穩(wěn)定期。震蕩期用戶流失較多，經(jīng)過(guò)一些市場(chǎng)對(duì)比后選擇留下的用戶會(huì)進(jìn)入一個(gè)穩(wěn)定期。一個(gè)用戶在產(chǎn)品內(nèi)留存越久，帶來(lái)的商業(yè)價(jià)值越高。
在產(chǎn)品體驗(yàn)流程中根據(jù)不同需求，策略也有不同。舉一個(gè) ofo 退押金例子：ofo 在不久前遭遇了資金問(wèn)題，我在退押金這一流程體驗(yàn)中誤操作了多次，最主要問(wèn)題就是信息引導(dǎo)。
△ 主流程中對(duì)用戶再三挽留
△ 主流程操作中弱化強(qiáng)需求信息
小結(jié)：對(duì)功能需求設(shè)計(jì)要點(diǎn)
在需求發(fā)起到設(shè)計(jì)目標(biāo)會(huì)經(jīng)過(guò)這樣幾個(gè)過(guò)程：羅列與信息搜集?深入挖掘?聚焦核心?創(chuàng)新發(fā)散?實(shí)現(xiàn)與落地。
這五步的節(jié)奏是：先發(fā)散 – 聚攏 – 再發(fā)散 – 聚攏。
羅列與信息搜集
深入挖掘
5w：what、when、wher、who、why這五步定位法，是讓設(shè)計(jì)師清楚需求的本質(zhì)與動(dòng)機(jī)。
聚焦核心：濾 — 煉 — 導(dǎo)
結(jié)合用研結(jié)果、數(shù)據(jù)結(jié)果、定位結(jié)果去除不重要、不必要的信息、提煉有價(jià)值的信息、導(dǎo)出核心關(guān)鍵。
創(chuàng)新發(fā)散
我們發(fā)現(xiàn)前三步是基于一些基礎(chǔ)方法論，讓設(shè)計(jì)師具備一些觀察用戶、分析用戶行為、洞悉本質(zhì)、同理心的訓(xùn)練，目的是讓我們把思維聚焦在核心的關(guān)鍵點(diǎn)上，而真正超越預(yù)期體驗(yàn)的來(lái)源于第4步創(chuàng)新設(shè)計(jì)思維。
實(shí)現(xiàn)與落地
對(duì)于設(shè)計(jì)師，解決問(wèn)題能力遠(yuǎn)高于單純作圖能力，而了解需求本質(zhì)是解決問(wèn)題的前提條件，在沒(méi)有明確需求的動(dòng)機(jī)和目的，設(shè)計(jì)方向是迷茫的。洞察、分析是設(shè)計(jì)師的基本能力，勤于思考分析，做正確有價(jià)值的設(shè)計(jì)。
如今心理學(xué)和行為學(xué)已經(jīng)是UX和產(chǎn)品設(shè)計(jì)領(lǐng)域當(dāng)中諸多理論的來(lái)源和實(shí)踐的依據(jù)，它們是UI/UX設(shè)計(jì)師和產(chǎn)品設(shè)計(jì)師的必修課。
系統(tǒng)的心理學(xué)和行為學(xué)的知識(shí)，對(duì)于設(shè)計(jì)工作其實(shí)有著極為深刻的影響。用戶體驗(yàn)設(shè)計(jì)很大程度上是在心理學(xué)和行為學(xué)的研究基礎(chǔ)上逐漸進(jìn)化和發(fā)展起來(lái)的，對(duì)于想要深耕這一領(lǐng)域的設(shè)計(jì)而言，心理學(xué)和行為學(xué)是繞不開(kāi)的必修課。
心理學(xué)和行為學(xué)早已并非是單獨(dú)存在的學(xué)科，它們和許多不同領(lǐng)域的知識(shí)交匯融合，圍繞著人性進(jìn)行多維度全方位的探討。如今我們所熟知的許多優(yōu)秀的產(chǎn)品，也大多從這些領(lǐng)域技汲取營(yíng)養(yǎng)，不少四兩撥千斤借力逆襲的成功案例，也往往借助的是這些深深植根于人性的杠桿。
這兩個(gè)宏大的命題并非簡(jiǎn)單幾段話說(shuō)得清楚，但是這當(dāng)中有許多有意思的現(xiàn)象，非常具有啟發(fā)性。許多植根于人性本能中的非理性心理和行為，在日常生活中主導(dǎo)著我們作出決策，有的是一些不易覺(jué)察的心理效應(yīng)，有的僅僅是不算太顯著的認(rèn)知偏差，但是在設(shè)計(jì)和實(shí)際產(chǎn)品當(dāng)中運(yùn)用，則常常呈現(xiàn)出極為驚艷的效果。
對(duì)于這些心理學(xué)效應(yīng)和認(rèn)知偏差，設(shè)計(jì)人員需要在自身進(jìn)行決策時(shí)候盡量回避，避之不及確實(shí)會(huì)面臨車毀人亡的局面；在設(shè)計(jì)過(guò)程中，可以巧妙地將這些因素納入到考慮當(dāng)中來(lái)，因?yàn)樗鼈兺瑯涌梢杂绊懹脩?，成為撬?dòng)產(chǎn)品打開(kāi)局面的重要的契機(jī)。
幸存者偏差（Survivorship bias）雖然被稱為認(rèn)知偏差，但是實(shí)際上，它更接近于是一種邏輯謬誤下產(chǎn)生的一種錯(cuò)誤認(rèn)知。幸存者偏差指的是人往往會(huì)注意到某種經(jīng)過(guò)篩選之后所產(chǎn)生的結(jié)果，同時(shí)忽略了這個(gè)篩選的過(guò)程，而被忽略的過(guò)程往往包含著關(guān)鍵性的信息。
讀書(shū)無(wú)用論是一種最常見(jiàn)的幸存者偏差。讀書(shū)無(wú)用論中最多的說(shuō)法是XX并沒(méi)有好好上學(xué)但是照樣掙大錢(qián)了，而XX努力讀書(shū)反而混得并不好。
這些個(gè)案并不涉及到具體數(shù)據(jù)，從數(shù)據(jù)角度上來(lái)說(shuō)，也不難解釋這種“主觀感受”的成因。根據(jù)第六次全國(guó)人口普查，大專及以上學(xué)歷的人口僅占總?cè)丝诘?.7%，高學(xué)歷者落魄更容易受到媒體的關(guān)注，而低學(xué)歷中的成功者也常常能夠吸引普通人的目光，即使低學(xué)歷人口中涌現(xiàn)的成功者的比例遠(yuǎn)低于高學(xué)歷者，由于基數(shù)差異，這個(gè)數(shù)值對(duì)比也是相當(dāng)可觀的。正是因?yàn)楹雎粤藬?shù)據(jù)中沉默的大多數(shù)，讀書(shū)無(wú)用論這種錯(cuò)誤的觀點(diǎn)才“得以成立”。
槍擊案中的幸存者大多傷的是手和腳，那么是否要加強(qiáng)手腳的保護(hù)呢？實(shí)際的情況上，在軀干和頭部中槍的人，大都沒(méi)有挺過(guò)來(lái)，相反更加需要保護(hù)是軀干和頭部。就像能活著回來(lái)的戰(zhàn)斗機(jī)中彈的通常都是翅膀和機(jī)身，因?yàn)橐嬷袕椀拇蠖家呀?jīng)犧牲了。這個(gè)案例也許能夠幫你更好地理解幸存者偏差。
對(duì)于事件發(fā)展過(guò)程中篩選機(jī)制的忽視，容易讓人產(chǎn)生錯(cuò)誤的結(jié)論，從而導(dǎo)向錯(cuò)誤的方向，在設(shè)計(jì)決策過(guò)程中，出現(xiàn)這樣的過(guò)程中，極有可能是致命的。
在需求分析和調(diào)研過(guò)程中，如果忽視了幸存者偏差，很有可能搜集到的數(shù)據(jù)，體現(xiàn)的僅僅知識(shí)少部分用戶的需求和想法，最終將偽需求和小眾需求當(dāng)作主要需求來(lái)作為設(shè)計(jì)易于，則可能讓產(chǎn)品從一開(kāi)始就走向萬(wàn)劫不復(fù)。
在搜集產(chǎn)品的用戶反饋信息的時(shí)候，也很容易遭遇幸存者偏差。絕大多數(shù)的用戶在正常使用產(chǎn)品的時(shí)候，如果沒(méi)有合理的觸發(fā)機(jī)制，或者產(chǎn)品沒(méi)有特別突出的特點(diǎn)的情況下，很少會(huì)主動(dòng)“好評(píng)”，相反，遭遇問(wèn)題的用戶則更傾向于主動(dòng)吐槽并分享糟糕的體驗(yàn)和問(wèn)題，這也很容易造成“這個(gè)產(chǎn)品哪哪兒都是問(wèn)題”的錯(cuò)覺(jué)。
基本歸因偏差這個(gè)名詞同樣源自于心理學(xué)，比較學(xué)術(shù)表述是“對(duì)他人行為進(jìn)行歸因的時(shí)候，往往會(huì)傾向于把別人的行為歸因?yàn)槠鋬?nèi)在因素，而低估了情境因素的影響，而對(duì)于自身的行為歸因的時(shí)候，則傾向于把自己的行為歸因?yàn)橥庠谝蛩?，而忽略自身因素的影響”，基本歸因偏差的含義表述可能有點(diǎn)拗口，但是并不難理解。
基本歸因偏差是一種重要的人類心理防御機(jī)制，是人類進(jìn)化過(guò)程中所產(chǎn)生的一種局限性的思維定勢(shì)。和復(fù)雜多樣的環(huán)境因素相比，行為者本身的問(wèn)題是更容易被發(fā)現(xiàn)的，所以觀察者在觀察行為者的時(shí)候，諸如社會(huì)環(huán)境、社會(huì)角色、情景壓力等外部因素更難以引起注意，將問(wèn)題更多歸因于行為者本身的行為舉動(dòng)和個(gè)人內(nèi)因。比如，當(dāng)看到某個(gè)人生活拮據(jù)的時(shí)候，會(huì)簡(jiǎn)單歸因于他不夠勤奮等等。類似的，在面對(duì)生活中的諸多不順的時(shí)候，直接歸因于“水逆”而很少會(huì)仔細(xì)思考是否有自身的原因。當(dāng)事人和觀察者對(duì)于事件的歸因不同，爭(zhēng)議和問(wèn)題往往因此而起。
對(duì)于UX設(shè)計(jì)師而言，基本歸因偏差是矛盾和問(wèn)題的常見(jiàn)的來(lái)源，而且這種認(rèn)知偏差存在于用戶也同樣存在于設(shè)計(jì)師本身。無(wú)論是面對(duì)設(shè)計(jì)問(wèn)題，還是做調(diào)研，進(jìn)行測(cè)試，涉及到多方面影響因素的時(shí)候，基本歸因偏差都會(huì)對(duì)設(shè)計(jì)方案、設(shè)計(jì)決策產(chǎn)生影響。
這需要設(shè)計(jì)師能夠清楚地分辨“我的觀點(diǎn)”和“我的行為”，能夠真正將自己從自己所處的立場(chǎng)、角色、職能上抽離出來(lái)，復(fù)盤(pán)整個(gè)局面，首先接納全部的狀況和現(xiàn)實(shí)，包括他人的想法、觀點(diǎn)，先不去判斷對(duì)錯(cuò)，而是先接納所有的狀況和全部的元素，明白事物的動(dòng)態(tài)變化過(guò)程，不再單一地去判斷，任何一個(gè)視角必然會(huì)存在一個(gè)立場(chǎng)，它們是當(dāng)前事物諸多層面中的一方面而已。
面對(duì)復(fù)雜多變，但是因果清晰、逐步成長(zhǎng)變化的事物，用動(dòng)態(tài)而全面的思維方式來(lái)看待，才能真正看清楚事物變化的軌跡，更有針對(duì)性地設(shè)計(jì)，作出合理的決策。
后視偏見(jiàn)（Hindsight Bias）則是另外一種常見(jiàn)的認(rèn)知偏差，它指的是人在事情發(fā)生以后覺(jué)得自己在事情發(fā)生之前就已經(jīng)預(yù)測(cè)到結(jié)果了，實(shí)際上，他們并不如自己想象的那樣能夠準(zhǔn)確的進(jìn)行預(yù)測(cè)。這種行為在觀察者眼中常常會(huì)被稱為“馬后炮”。
后視偏見(jiàn)在很多人身上都存在，人的主觀性和記憶本身會(huì)造成這種偏差。對(duì)于設(shè)計(jì)工作者而言，厚實(shí)偏差的存在無(wú)疑是會(huì)帶來(lái)負(fù)面影響的。后視偏見(jiàn)會(huì)讓人沉迷于“我早就預(yù)料到了”這種感受當(dāng)中，相應(yīng)的無(wú)法真正從事件中真正汲取到有用的經(jīng)驗(yàn)，也難于使用公平的眼光來(lái)評(píng)判客觀事物和他人，主觀上也很容易選擇性忽略許多客觀條件和事實(shí)。
后視偏見(jiàn)確實(shí)會(huì)給人帶來(lái)快感，相應(yīng)的，會(huì)在工作中影響決策的正確性和公平性，從而帶來(lái)潛在風(fēng)險(xiǎn)。糾正后視偏見(jiàn)的方法并不復(fù)雜，在確知事情結(jié)果之前，記錄下自己的想法，事后做驗(yàn)證，并統(tǒng)計(jì)成功與失敗的數(shù)據(jù)。
事件的結(jié)果并非是最好的判斷因素。在調(diào)整好認(rèn)知之后，對(duì)于事件和情況的過(guò)程和相關(guān)因素進(jìn)行相對(duì)全面的衡量，盡可能少的摻雜主觀情緒來(lái)進(jìn)行分析，這樣的決策的有效性會(huì)更強(qiáng)。
曝光效應(yīng)（the exposure effect）也被稱為多看效應(yīng)（和多看這款應(yīng)用并沒(méi)有關(guān)系），接觸效應(yīng)。曝光效應(yīng)本身的描述也不復(fù)雜：人會(huì)更加偏好自己熟悉的事物。在社會(huì)心理學(xué)領(lǐng)域，曝光效應(yīng)的另外一個(gè)稱謂是“熟悉定律”，這可能更好理解。
自己總傾向于購(gòu)買(mǎi)自己熟悉的品牌的產(chǎn)品，談戀愛(ài)的時(shí)候總會(huì)有繞不開(kāi)的老同學(xué)和老朋友，這些都是曝光效應(yīng)之下的人類認(rèn)知偏差。我們常常說(shuō)的“一旦接受了這個(gè)設(shè)定還挺帶感的”就是對(duì)于這一效應(yīng)的真實(shí)側(cè)寫(xiě)。
曝光效應(yīng)在廣告行業(yè)、產(chǎn)品營(yíng)銷和社交媒體有著天然的親和力，對(duì)于營(yíng)銷人員、運(yùn)營(yíng)人員、品牌設(shè)計(jì)師和UX設(shè)計(jì)師而言，這一效應(yīng)的活學(xué)活用是非常有必要的。
不過(guò)曝光效應(yīng)本身并非是無(wú)條件的，相反它和產(chǎn)品屬性、品牌設(shè)計(jì)、企業(yè)形象以及運(yùn)營(yíng)策略有著極為緊密的關(guān)聯(lián)。
曝光效應(yīng)在許多不同的社會(huì)實(shí)驗(yàn)當(dāng)中呈現(xiàn)出一種不穩(wěn)定性，可能是因?yàn)橄嚓P(guān)的影響因素多而復(fù)雜。有的研究表明，即使產(chǎn)品和服務(wù)曝光過(guò)程中絕大多數(shù)的內(nèi)容是正面的，公司和企業(yè)本身的名氣高低和品牌形象，同樣會(huì)影響曝光效應(yīng)的高低。
曝光效應(yīng)在發(fā)揮的過(guò)程中，即使曝光的內(nèi)容全部是正面的，對(duì)于用戶的影響也會(huì)逐步呈現(xiàn)出一種矛盾性，也就是用戶會(huì)對(duì)產(chǎn)品或者服務(wù)產(chǎn)生正面聯(lián)想的同時(shí)，還會(huì)產(chǎn)生不利的、負(fù)面的感受。
曝光效應(yīng)發(fā)揮效果最好的時(shí)段，始終是絕大多數(shù)用戶對(duì)于產(chǎn)品認(rèn)知不足的階段，這個(gè)時(shí)候曝光效應(yīng)會(huì)最大化的對(duì)用戶產(chǎn)生影響。
值得特別注意的是，一開(kāi)始就讓人覺(jué)得厭惡和不適的產(chǎn)品是無(wú)法產(chǎn)生正面的曝光效應(yīng)的，如果一開(kāi)始存在沖突，曝光效應(yīng)只會(huì)加深誤會(huì)和沖突。過(guò)量的曝光一定會(huì)帶來(lái)厭惡，由于復(fù)雜而大量不可控的影響因素，甚至?xí)?dǎo)致失控式的崩盤(pán)。
對(duì)于UX設(shè)計(jì)師和產(chǎn)品的策劃和運(yùn)營(yíng)者而言，在合適時(shí)機(jī)加大產(chǎn)品的正面曝光是有效度最高的策略。深入了解曝光效應(yīng)，才會(huì)明白何時(shí)放，而何時(shí)收。
可得性偏差（Availability Heuristic）也是一種常見(jiàn)的認(rèn)知偏差，它是啟發(fā)式偏差的一種，人們往往會(huì)根據(jù)自己認(rèn)知上的易得性來(lái)判斷事情的可能性，甚至于會(huì)根據(jù)自己看到和聽(tīng)到的只言片語(yǔ)來(lái)做決策，而不是根據(jù)統(tǒng)計(jì)學(xué)數(shù)據(jù)和系統(tǒng)化的知識(shí)來(lái)做判斷。
可得性偏差同樣是一種廣泛存在的認(rèn)知偏差，用戶認(rèn)為自己熟悉的、更容易獲得的信息在復(fù)雜的系統(tǒng)中發(fā)揮著更大的作用，主觀上忽略其他的部分?？傻眯云詈褪煜ざ桑ㄒ簿褪瞧毓庑?yīng)）有些許共通的地方。
可得性偏差在金融領(lǐng)域有著巨大的影響，許多準(zhǔn)備上市的企業(yè)會(huì)在上市前夕吸引大量的新聞報(bào)道，讓投資者在信息的狂轟濫炸之下不知不覺(jué)地去關(guān)心，無(wú)意識(shí)地去了解，并最終購(gòu)買(mǎi)這支股票拉高股價(jià)。這種策略就是借助投資者的可得性偏差來(lái)實(shí)現(xiàn)的。下面是谷歌搜索關(guān)鍵詞阿里巴巴的頻率和阿里巴巴的股價(jià)變化情況，兩者呈現(xiàn)出一種明顯的關(guān)聯(lián)性。
可得性偏差的廣泛存在，使得設(shè)計(jì)師甚至可以在自己的產(chǎn)品中借助有有意識(shí)的設(shè)計(jì)，來(lái)引導(dǎo)用戶的行為。作為設(shè)計(jì)師本身而言，可得性偏差同樣是會(huì)影響到設(shè)計(jì)決策，因?yàn)榭傻眯云钔瑯訒?huì)影響產(chǎn)品設(shè)計(jì)中的設(shè)計(jì)決策的走向。消除可得性偏差的方法也不難，需要設(shè)計(jì)者不要被已知的信息和容易想起來(lái)的信息所左右，而是盡量深入地從多個(gè)角度來(lái)考慮問(wèn)題，跳出固有的思維定勢(shì)，多角度看待問(wèn)題，作出合理的決策。
錨定效應(yīng)也被稱為沉錨效應(yīng)，它一樣是一個(gè)聽(tīng)起來(lái)高大上但是含義并不復(fù)雜的概念，它指的是人們對(duì)某人某事作出判斷的時(shí)候，容易受到第一印象或者第一信息的影響和支配。這種現(xiàn)象就像船只被錨固定在特定位置而無(wú)法移動(dòng)，因此而得名。
人們?cè)谧雠袛嗟臅r(shí)候，往往會(huì)受到第一印象和首個(gè)接收到的信息的影響。就像鳥(niǎo)類會(huì)將第一個(gè)看到的生物視之為自己的母親一樣，人們往往會(huì)借助第一印象來(lái)作為后續(xù)判斷一個(gè)事物的參考標(biāo)準(zhǔn)，甚至在人際交往中都是金科玉律。即使是沒(méi)有刻意地去參考第一信息，人們也會(huì)在潛意識(shí)當(dāng)中，重視第一次獲得的數(shù)據(jù)。
錨定效應(yīng)的另外一個(gè)層面是對(duì)比，當(dāng)擁有了錨定的參考之后，用戶在后續(xù)會(huì)以此為基準(zhǔn)進(jìn)行對(duì)比。對(duì)比并不存在絕對(duì)意義上的好壞，但是在不同的基準(zhǔn)之下，或者說(shuō)參考的基點(diǎn)不同的情況下，發(fā)揮的作用其實(shí)是截然不同的。
舉個(gè)簡(jiǎn)單的例子，粥鋪的服務(wù)員問(wèn)客人“加一個(gè)雞蛋還是加兩個(gè)雞蛋”比“要不要加雞蛋”所產(chǎn)生的銷售額高出不少，因?yàn)榍罢邥?huì)人的心理基點(diǎn)是“要加蛋”，而后一種問(wèn)法，則讓客人先思考“要不加蛋”，前者的轉(zhuǎn)化率自然更高。
正是因?yàn)橄热霝橹鬟@種心理現(xiàn)象大量影響著用戶的決策，使得市場(chǎng)競(jìng)爭(zhēng)中，許多企業(yè)和產(chǎn)品都不得不去力圖爭(zhēng)個(gè)第一，贏得主導(dǎo)權(quán)。
iPhone X的劉海屏對(duì)于手機(jī)市場(chǎng)有多大影響想必大家有目共睹。而后續(xù)的藍(lán)綠兩廠的升降式攝像頭設(shè)計(jì)和“真·全面屏”也因?yàn)槠渫怀鲂院蛷?qiáng)大的“第一印象”的構(gòu)建，而贏得了無(wú)數(shù)贊譽(yù)。
但是靜下心來(lái)想想，開(kāi)機(jī)解鎖還要等待攝像頭升起，好像還是一個(gè)蠻奇怪的事情?？墒亲钤绲摹罢妗と嫫痢贝_實(shí)夠驚艷。
優(yōu)惠促銷是各種產(chǎn)品銷售中最常用到的一種策略，而在花樣迭出的促銷手段當(dāng)中，有為數(shù)不多的集中手段，呈現(xiàn)出令人驚艷的效果。
免費(fèi)的贈(zèng)品和滿額減免就是這其中的典型。購(gòu)買(mǎi)產(chǎn)品A，贈(zèng)送一款B，這種贈(zèng)品策略的玩法可以說(shuō)是效果極佳，早年間阿芙精油聲名鵲起的階段，其中最令用戶欲罷不能的，就是他們的“贈(zèng)品”。用戶每一次購(gòu)買(mǎi)精油產(chǎn)品的時(shí)候，阿芙的團(tuán)隊(duì)會(huì)隨之一起發(fā)出精油的入門(mén)口袋書(shū)以及多達(dá)五六種精心挑選的精油試用裝，這種體貼且讓人覺(jué)得“狠賺一筆”的心理感受，使得許多新用戶迅速轉(zhuǎn)為穩(wěn)定客戶。
置于滿多少減多少，則同樣是一種成功的促銷策略。各種電商平臺(tái)和購(gòu)物節(jié)都會(huì)采用花樣繁多的滿減服務(wù)，相應(yīng)的，用戶在這種服務(wù)之下，總?cè)滩蛔 皽悊巍薄Ｆ叫亩?，真?shí)的情況是，用戶購(gòu)買(mǎi)了自己真正需要的商品，以及一系列為了湊單而同時(shí)購(gòu)買(mǎi)的非必須商品，對(duì)于商家和平臺(tái)而言，這種策略很好的拉高了銷量，也減少了許多商品的庫(kù)存，而用戶也感覺(jué)自己賺到了，皆大歡喜。
至于“包郵”，我就不贅述了。這個(gè)效果同樣非常突出。
相比之下，打折促銷所產(chǎn)生的效果，好像就沒(méi)有那么顯著和“暴力”了。歸根結(jié)底，問(wèn)題是出在“免費(fèi)”的認(rèn)知偏差之上。對(duì)于用戶而言，無(wú)論是贈(zèng)品、滿減還是包郵，本質(zhì)上都會(huì)讓用戶迅速地在大腦中形成一種“免費(fèi)獲得某種東西”的感覺(jué)，贈(zèng)品對(duì)應(yīng)的是免費(fèi)的物品，滿減對(duì)應(yīng)的是免費(fèi)的現(xiàn)金回饋，包郵則是免費(fèi)的郵寄服務(wù)。
心理學(xué)家和行為學(xué)家通過(guò)大量的實(shí)驗(yàn)驗(yàn)證了免費(fèi)確實(shí)和折扣等其他的促銷策略有著本質(zhì)的差別，它所帶來(lái)的非理性行為要明顯太多，免費(fèi)的吸引力無(wú)與倫比，說(shuō)是認(rèn)知偏差毫不為過(guò)。
你一定特別想點(diǎn)擊上面的圖片免費(fèi)下載素材。不好意思它只是個(gè)圖片。
人類本能地懼怕?lián)p失，選擇免費(fèi)的贈(zèng)品不會(huì)有損失，而相比之下選額其他則會(huì)讓人在潛意識(shí)中產(chǎn)生風(fēng)險(xiǎn)感，可能會(huì)蒙受損失。這樣一來(lái)，免費(fèi)的贈(zèng)品在人心中的價(jià)值就開(kāi)始高于實(shí)際價(jià)值，隨之而來(lái)的就是非理性消費(fèi)。
在設(shè)計(jì)的過(guò)程中，想要讓免費(fèi)的認(rèn)知偏差發(fā)揮效果，讓人快速地感知到這種“免費(fèi)獲得”的感受，應(yīng)當(dāng)是明顯的，否則很難快速地觸發(fā)非理性的反饋。
人類先天的生物性無(wú)處不在，我們自詡的理智在現(xiàn)實(shí)生活中發(fā)揮的作用并沒(méi)有我們想象中那么多，無(wú)處不在的各種認(rèn)知偏差主導(dǎo)了太多的
端午節(jié)到了，阿里巴巴TXD的小伙伴們準(zhǔn)備送你只'口味粽'，祝大家假期玩的開(kāi)開(kāi)心心，點(diǎn)擊圖片識(shí)別二維碼便可生成你專屬的‘口味粽’。
01
—
項(xiàng)目背景
阿里對(duì)待中秋節(jié)會(huì)更加的濃重，每年中秋節(jié)所有的員工都會(huì)收到精美的月餅和祝福。相比之下我們的端午節(jié)就過(guò)得比較平淡了，于是咱們團(tuán)隊(duì)的小伙伴們準(zhǔn)備做一個(gè)H5，用我們的自己的方式送大家以及自己一枚口味粽。
整個(gè)項(xiàng)目的初衷有兩個(gè)，一個(gè)是代表TXD送給大家端午節(jié)的祝福，另一個(gè)就是用團(tuán)隊(duì)協(xié)作的方式在極短的時(shí)間里面設(shè)計(jì)一款H5。
02
—
項(xiàng)目思路
對(duì)于我們來(lái)說(shuō)最大的挑戰(zhàn)是時(shí)間。距離端午假期僅剩一周不到的時(shí)間，而大家都有自己的業(yè)務(wù)工作，難道放棄？既然已經(jīng)立下了flag，怎么也得完成。我們制定了項(xiàng)目的節(jié)點(diǎn)，并且通過(guò)多枚成員分工協(xié)作去完成它。
大部分項(xiàng)目是需要協(xié)作完成的，一旦協(xié)作不好，項(xiàng)目進(jìn)度則事倍功半。所以最考驗(yàn)大家的是怎么進(jìn)行更的協(xié)作。通過(guò)有效的決策，我們讓協(xié)作變得順利。
我們通過(guò)小組會(huì)議確定玩法后，分配人員進(jìn)行文案和交互設(shè)計(jì)。由主設(shè)計(jì)師定下設(shè)計(jì)風(fēng)格，其他設(shè)計(jì)根據(jù)風(fēng)格繪制UI以及其他場(chǎng)景素材。所有素材實(shí)時(shí)同步在項(xiàng)目群里，確保保持統(tǒng)一的風(fēng)格。
03
—
項(xiàng)目介紹
首先我們的粽子不是一般的粽子≧ω≦，我們粽子的餡兒都采用各種珍稀的食材。
這些“珍稀”食材通過(guò)我們神秘的構(gòu)造機(jī)做成不同的神奇粽子！
更多不一樣的粽子，通過(guò)我們的機(jī)器定制屬于自己的神奇粽子。
本次的項(xiàng)目屬于我們的團(tuán)隊(duì)成員通過(guò)空閑時(shí)間在短時(shí)間里面完成的。只是想送給端午節(jié)的童鞋們一個(gè)小小的祝福。
今天聊些設(shè)計(jì)基礎(chǔ)部分。
設(shè)計(jì)工作中，我們總會(huì)接到不同場(chǎng)景、不同目標(biāo)用戶的業(yè)務(wù)需求，需要不同風(fēng)格的設(shè)計(jì)方案支持，但無(wú)論是什么風(fēng)格的設(shè)計(jì)，用戶都會(huì)有一個(gè)共同訴求——「品質(zhì)感」。
所謂品質(zhì)感其實(shí)就是產(chǎn)品給人的一種嚴(yán)謹(jǐn)、專心對(duì)待的態(tài)度。同樣一本書(shū)的封面，粗糙紙的封面和細(xì)心打磨的小羊皮封面就是不同的概念。
例如無(wú)印良品和愛(ài)馬仕，兩者都會(huì)傳達(dá)給用戶一種「品質(zhì)感」，雖設(shè)計(jì)方向不同，但他們有一個(gè)共同的特性——對(duì)細(xì)節(jié)的深度打磨。其實(shí)品質(zhì)感就是來(lái)源于產(chǎn)品對(duì)細(xì)節(jié)的深度考究與打磨。
一款有品質(zhì)感的設(shè)計(jì)，隨之帶來(lái)的是用戶使用中的舒適度、好感度、信賴感。
界面設(shè)計(jì)也是一樣，也會(huì)帶給用戶一種品質(zhì)感，其同樣是源于設(shè)計(jì)師對(duì)界面的每處細(xì)節(jié)的深度考究。
界面的品質(zhì)感主要來(lái)源于界面四個(gè)維度、界面中的結(jié)構(gòu)、界面中的圖形、界面中的顏色和界面中的動(dòng)態(tài)，今天說(shuō)如何通過(guò)結(jié)構(gòu)提升界面品質(zhì)感。
界面的結(jié)構(gòu)在用戶體驗(yàn)中起著重要作用，其相當(dāng)于界面設(shè)計(jì)中的「骨」，界面結(jié)構(gòu)中的細(xì)節(jié)更是會(huì)直接影響到整體設(shè)計(jì)的品質(zhì)感。那么具體結(jié)構(gòu)中的細(xì)節(jié)體現(xiàn)在哪里？
信息關(guān)系包含界面中的組合、層級(jí)、分割等。
組合
「物以類聚」，界面內(nèi)需明確傳達(dá)各元素間的關(guān)系。
輔助信息服務(wù)于主體信息：輔助信息為主體內(nèi)容的延續(xù)說(shuō)明或補(bǔ)充操作，作用為服務(wù)于主體內(nèi)容。同一組合內(nèi)，信息間需有明確的關(guān)系與合理的順序，且輔助信息不能搶鏡。例如朋友圈，清晰傳達(dá)關(guān)系的同時(shí)，以內(nèi)容為主的閱讀方式不會(huì)被頭像內(nèi)容干擾。
關(guān)系越緊密的內(nèi)容距離應(yīng)越近：形式不變的基礎(chǔ)上，元素之間的距離越近，越易被視為同一組合。距離相同時(shí)，橫向排列的內(nèi)容接近度相對(duì)更高。
層級(jí)
界面的層級(jí)關(guān)系主要體現(xiàn)在主次、優(yōu)先級(jí)、層數(shù)。
主次分明、避免層級(jí)混亂：清晰的層級(jí)結(jié)構(gòu)，能讓用戶更快的獲取重要內(nèi)容，同一組合下其信息一定有主要展示和次要展示?？梢酝ㄟ^(guò)位置、面積、顏色三個(gè)維度建立主次層級(jí)的對(duì)比度。
同一組合下，有且僅能有一個(gè)最重要的內(nèi)容：當(dāng)所有的內(nèi)容都重要，也就等于所有內(nèi)容都不重要，信息的優(yōu)先級(jí)不取決于主要信息是否夠大，而是主要信息和次要信息的對(duì)比度。
同一頁(yè)面，信息層級(jí)不宜過(guò)多：過(guò)多的信息層級(jí)會(huì)讓頁(yè)面變得復(fù)雜，增加用戶的理解成本。冗余的信息展示會(huì)讓界面變的凌亂瑣碎，一定程度上干擾用戶使用體驗(yàn)。一般情況下界面應(yīng)控制在3層信息以內(nèi)。
主次分明、優(yōu)先級(jí)明確、層級(jí)適當(dāng)會(huì)讓界面的信息傳達(dá)更清晰明確，進(jìn)而增加用戶的使用中的舒適度。
分割
分割是用于區(qū)分不同信息的方法，大概可以分為距離分割、線性分割、面性分割（背景色分割）、顏色分割。
距離分割：增大兩模塊的距離達(dá)到內(nèi)容分割內(nèi)容作用，元素間的距離越遠(yuǎn)，越不易被視為同一組合。其好處是可以省去分割元素，減少視覺(jué)層級(jí)，讓界面更干凈、明快。
線性分割：線性分割是目前界面中最常用的分割方式，其優(yōu)勢(shì)是線自身「較輕」，不易干擾用戶。值得注意的是線本身不重要，不宜過(guò)度強(qiáng)調(diào)，應(yīng)點(diǎn)到為止，所以線的顏色不宜過(guò)重。
面性分割/背景色分割：當(dāng)處理多層級(jí)、信息復(fù)雜的場(chǎng)景，在單個(gè)模塊里已經(jīng)用了線性分割的情況下?？赡苄枰鼜?qiáng)一點(diǎn)的分割方式來(lái)表明模塊與模塊間的關(guān)系，這時(shí)我們可能需要面性分割方式。這種方式像是灰色的背景上，羅列著多張卡片，能更明確的表達(dá)兩組內(nèi)容的分割感，但其缺點(diǎn)是會(huì)較明顯的增多界面層級(jí)。
顏色分割：當(dāng)信息的表現(xiàn)形式重復(fù)性較高，容易被看混的情況下，顏色分割是更為合適的選擇。
能起到分割作用的前提下，分割方式越輕，越不會(huì)干擾閱讀、界面越干凈。
以上可以總結(jié)為
文字字體是界面結(jié)構(gòu)中重要組成部分，文字也是多數(shù)場(chǎng)景下信息傳達(dá)最為準(zhǔn)確的方法。合理的字體能夠增加用戶的閱讀體驗(yàn)，提升用戶在產(chǎn)品使用中的舒適度。合理的字體包含字體的可讀性、對(duì)比度、間距。
可讀性：可讀性是字體在界面中需考慮的基礎(chǔ)因素，也是首要因素。字體的信息傳達(dá)需精準(zhǔn)、明確。字形選擇包括其場(chǎng)景適應(yīng)和字形的適度性。
字形的場(chǎng)景適應(yīng)：由于不同的字形會(huì)帶給用戶不同的感覺(jué)。由于場(chǎng)景需要，我們一定情況下會(huì)選擇自定義字體。當(dāng)我們選擇不同的字體時(shí)，需要考慮字體在產(chǎn)品內(nèi)不同模塊下是否易于閱讀。
字形的適度性：字體本身不宜搶鏡。隨意的、搶眼的字體一定場(chǎng)景下上能夠帶來(lái)足夠的氛圍感，但是長(zhǎng)期使用會(huì)出現(xiàn)「視覺(jué)疲勞」，其原因是字體本身的設(shè)計(jì)搶走了用戶正常在該場(chǎng)景下閱讀或使用的內(nèi)容和信息。
對(duì)比度
字號(hào)：用于區(qū)分不同層級(jí)的信息內(nèi)容，為保證信息的快速傳達(dá)，不同層級(jí)的字體需有一定的優(yōu)先級(jí)順序。
界面內(nèi)的主文案/一級(jí)文案應(yīng)精簡(jiǎn)明確。假設(shè)用戶只會(huì)在這個(gè)界面停留3、4秒，能夠吸引用戶繼續(xù)瀏覽界面的就是一級(jí)信息。當(dāng)一級(jí)信息文案字?jǐn)?shù)過(guò)多，會(huì)增加用戶剛進(jìn)入頁(yè)面時(shí)的閱讀成本，進(jìn)而降低閱讀體驗(yàn)。
另外，移動(dòng)端小于24px的字號(hào)應(yīng)慎重使用，雖然小的字號(hào)會(huì)讓版式更加的精致，但當(dāng)同一場(chǎng)景下，小于24px的文案字?jǐn)?shù)偏多時(shí)，會(huì)影響用戶的正常閱讀。但可用于弱化的文字鏈、標(biāo)簽等字?jǐn)?shù)少的場(chǎng)景。
加粗：字號(hào)相同，字體加粗也是區(qū)分不同層級(jí)信息的一種方法，當(dāng)兩信息區(qū)分度不大、界面層級(jí)過(guò)多需要減少層級(jí)的場(chǎng)景下，可以選擇加粗部分內(nèi)容建立輕度對(duì)比。
字色：我們畫(huà)畫(huà)的時(shí)候，時(shí)常會(huì)聽(tīng)到老師說(shuō)「要注意畫(huà)面的黑白灰」。在界面設(shè)計(jì)中，也是一樣，我們需注意各層級(jí)字體間的黑白灰關(guān)系。明確的畫(huà)面黑白灰關(guān)系會(huì)讓界面變得更干凈清晰。另外，當(dāng)不同明度切換時(shí)應(yīng)保持色相/飽和度不變。
間距：在界面設(shè)計(jì)中，字間距和行間距會(huì)直接影響用戶閱讀效率。過(guò)于緊密的間距會(huì)讓字體間失去「透氣性」，根據(jù)我們正常的閱讀順序來(lái)講，字間距要小于行間距以便于每一行更易被視為一組，進(jìn)而給用戶帶來(lái)更好的閱讀體驗(yàn)。我們可根據(jù)文案長(zhǎng)短，字號(hào)大小制定更適合閱讀的間距。
字體的可讀性是字體的基礎(chǔ)，明確的字體對(duì)比度能夠讓信息層級(jí)更加清晰干凈，而合理的字間距能夠無(wú)形的提升用戶的閱讀體驗(yàn)。
對(duì)齊是界面結(jié)構(gòu)中的一部分，合理的對(duì)齊方式能夠使界面內(nèi)的信息變得更規(guī)整，內(nèi)容傳達(dá)更明確。讓元素間的關(guān)系更具節(jié)奏感。
聯(lián)系性
同一組合內(nèi)的不同元素間需有明確的對(duì)齊關(guān)系，其關(guān)系能夠清晰表達(dá)不同元素間的親密性。
元素間的居左對(duì)齊：當(dāng)文案的字?jǐn)?shù)偏多一些的場(chǎng)景下，居左對(duì)齊更符合用戶的閱讀習(xí)慣。
元素間的居中對(duì)齊：當(dāng)內(nèi)容信息較少、或由于對(duì)齊元素形狀等因素，居中對(duì)齊可能會(huì)帶來(lái)意外的收獲與效果。
元素間的居右對(duì)齊：界面內(nèi)一般不會(huì)用居右對(duì)齊的方式來(lái)建立兩元素間的關(guān)系，但是界面內(nèi)會(huì)存在和屏幕建立右對(duì)齊關(guān)系的元素，與屏幕右對(duì)齊的元素一般為主體的解釋說(shuō)明以及輔助操作等。一般情境下，當(dāng)用戶閱讀完主要內(nèi)容信息后才會(huì)對(duì)操作類的功能有需求，如查看購(gòu)買(mǎi)、關(guān)注、查看更多、進(jìn)入下一頁(yè)面等。
統(tǒng)一性
另外，不同組件間也需要合理的建立對(duì)齊關(guān)系，同時(shí)為保持界面的簡(jiǎn)潔性，同一界面內(nèi)建立的對(duì)齊模式不要過(guò)多。
界面的結(jié)構(gòu)是提升界面品質(zhì)感的關(guān)鍵，而合理的信息關(guān)系、字體、對(duì)齊方式能夠讓界面的結(jié)構(gòu)更加完整，精致。也希望每個(gè)設(shè)計(jì)師的作品都更加的美而精致。
喜馬拉雅主播等級(jí)體系算是喜馬各業(yè)務(wù)線中資歷比較老的一員了，主要服務(wù)于主播用戶查看自身等級(jí)，以及特權(quán)享受，這次整理了近期關(guān)于主播等級(jí)線現(xiàn)存問(wèn)題的改版。
1. 產(chǎn)品層面
這次迭代的目的是：
通過(guò)溝通我們知道產(chǎn)品希望通過(guò)這次迭代來(lái)引起用戶注意，增加主播用戶和產(chǎn)品之間的互動(dòng)，而提升頁(yè)面日活以及次日留存。
2. 設(shè)計(jì)層面
設(shè)計(jì)師的基本出發(fā)點(diǎn)是需要設(shè)計(jì)出不低于競(jìng)品且更加精致的稿件，能夠更加有效傳達(dá)品牌理念和視覺(jué)延展性，進(jìn)而理解產(chǎn)品與競(jìng)品之間的差異化，增強(qiáng)用戶認(rèn)知。
3. 用戶層面
此次迭代需要考慮到主播用戶的教育成本和接受程度，能否讓用戶感受到產(chǎn)品的差異性，能否讓用戶在第一時(shí)間看到我們希望用戶關(guān)注的東西。
通過(guò)溝通我們明確了產(chǎn)品需求點(diǎn)，接下來(lái)需要針對(duì)需求進(jìn)行分析，我們從競(jìng)品視覺(jué)分析、設(shè)計(jì)關(guān)鍵詞提煉兩點(diǎn)來(lái)進(jìn)行設(shè)計(jì)決策。
1. 視覺(jué)競(jìng)品分析
針對(duì)性的通過(guò)對(duì) VIP、等級(jí)等屬性的頁(yè)面進(jìn)行視覺(jué)收集。
2. 設(shè)計(jì)關(guān)鍵詞提煉
主播等級(jí)頁(yè)面的服務(wù)理念是為主播用戶提供更加清晰的等級(jí)提升指引。區(qū)別于喜馬其他等級(jí)線，整個(gè)流程中除了滿足等級(jí)查看的基本需求和特權(quán)展示的標(biāo)準(zhǔn)化流程，更多的差異是對(duì)目標(biāo)用戶需求的洞察和挖掘，我們從目標(biāo)用戶需求定義了主播等級(jí)線設(shè)計(jì)差異化的關(guān)鍵詞。
通過(guò)與產(chǎn)品溝通需求點(diǎn)，我們了解到視覺(jué)層面需要滿足或改進(jìn)的內(nèi)容；通過(guò)視覺(jué)競(jìng)品分析我們獲取產(chǎn)品未來(lái)的設(shè)計(jì)趨勢(shì)以及具有前瞻性的設(shè)計(jì)概念；接下來(lái)在稿件輸出的過(guò)程中我們就可以打散原有頁(yè)面的信息層級(jí)并進(jìn)行重新分組，分析所有層級(jí)信息字段的屬性，然后整理出不可變動(dòng)信息、可變動(dòng)信息、可增加的信息、可變的布局樣式，不斷嘗試重組信息結(jié)構(gòu)，找出合適的視覺(jué)決策點(diǎn)。
針對(duì)設(shè)計(jì)稿件，開(kāi)展設(shè)計(jì)內(nèi)部視覺(jué)評(píng)審，針對(duì)視覺(jué)稿件還邀請(qǐng)了產(chǎn)品以及交互進(jìn)行意見(jiàn)收集，最終選擇方案一作為主播等級(jí)迭代方案。
在主頁(yè)面色彩偏好、功能布局定稿之后，為了在關(guān)鍵轉(zhuǎn)化點(diǎn)給用戶帶來(lái)統(tǒng)一有趣的視覺(jué)體驗(yàn)，以主頁(yè)面視覺(jué)為參考以動(dòng)效、ICON、插畫(huà)三個(gè)維度進(jìn)行設(shè)計(jì)延展，保證與競(jìng)品的品牌差異性以及設(shè)計(jì)的統(tǒng)一性。
1. 特權(quán)ICON
為了達(dá)到設(shè)計(jì)稿件色彩傾向、品牌差異設(shè)計(jì)貫穿用戶每一個(gè)關(guān)鍵轉(zhuǎn)化點(diǎn)保持特權(quán) ICON 視覺(jué)語(yǔ)言統(tǒng)一，并增加趣味性拉開(kāi)與競(jìng)品的差異，提升用戶點(diǎn)擊轉(zhuǎn)化率。
2. 插畫(huà)延伸
針對(duì)產(chǎn)品等級(jí)攻略個(gè)性化需求的訴求點(diǎn)，圍繞等級(jí)提升的不同要求繪制場(chǎng)景化插畫(huà)，并保持視覺(jué)層面的輸出配套，通過(guò)十字交叉分析有針對(duì)性的進(jìn)行精準(zhǔn)推送。
3. 動(dòng)效延伸
圍繞溫暖、成就感兩個(gè)關(guān)鍵進(jìn)行延展，在用戶點(diǎn)擊等級(jí)主頁(yè)入口的第一時(shí)間感受到等級(jí)提升的成就感以及統(tǒng)一色彩傾向帶來(lái)的重視感，通過(guò)特權(quán)展示達(dá)到所見(jiàn)即所得的直觀感受。
設(shè)計(jì)并非一念間的靈感迸發(fā)，設(shè)計(jì)師對(duì)整個(gè)業(yè)務(wù)需要有清晰的理解，明白產(chǎn)品定位并通過(guò)前期設(shè)計(jì)分析奠定設(shè)計(jì)理念而進(jìn)行設(shè)計(jì)產(chǎn)出。
設(shè)計(jì)是一個(gè)逐漸嶄露頭角的過(guò)程，而我理解的設(shè)計(jì)師則應(yīng)該是快樂(lè)的戰(zhàn)士而不是輕言放棄的賭徒，還是那句話：每個(gè)人都有屬于自己的一片森林。一點(diǎn)工作總結(jié)希望對(duì)大家有多裨益，同時(shí)歡迎各位大佬加入喜馬拉雅FM。
UI 在拿到產(chǎn)品原型時(shí)該如何思考？如何著手設(shè)計(jì)界面？最近跟一些設(shè)計(jì)師朋友交流 UI 設(shè)計(jì)方案，總結(jié)了一下在方案優(yōu)化的思考過(guò)程，在這里分享給大家。
很多 UI 拿到一個(gè)頁(yè)面原型的時(shí)候，就立馬打開(kāi)各大設(shè)計(jì)網(wǎng)站找參考，然后照著參考頁(yè)面上的效果，生搬硬套到原型上，這只是達(dá)到了單純美化頁(yè)面的效果。
那么拿到原型后應(yīng)該帶著怎樣的思維來(lái)進(jìn)行思考呢？
第一道思維：交互思維
先了解頁(yè)面實(shí)現(xiàn)什么功能，功能的交互操作流程是怎樣的，也就是說(shuō)用戶操作這個(gè)頁(yè)面上的功能時(shí)，用戶的行為路徑是怎樣的。
第二道思維：視覺(jué)思維
了解完功能、交互后，提取原型中視覺(jué)組成元素，細(xì)分歸類，每一類應(yīng)用統(tǒng)一性原則進(jìn)行設(shè)計(jì)。
然后交互與視覺(jué)一同結(jié)合來(lái)設(shè)計(jì)界面。
結(jié)合案例我們來(lái)看下兩道思維是如何進(jìn)行的。
了解功能交互流程。
根據(jù)實(shí)例原型分析出用戶行為路徑：
用戶行為路徑：
注意點(diǎn)：
提取視覺(jué)組成元素。
視覺(jué)元素：
注意點(diǎn)：
我們帶著兩道思維來(lái)檢驗(yàn)一下這位設(shè)計(jì)師輸出的方案：
問(wèn)題所在：
數(shù)據(jù)顯示在前，輸入在后，交互操作層級(jí)有點(diǎn)混亂。
問(wèn)題截圖：
問(wèn)題解決：
用戶行為路徑中，第1步有個(gè)先后順序，先輸入地址，后顯示數(shù)據(jù)，在進(jìn)行信息內(nèi)容布局設(shè)計(jì)的時(shí)候同樣需要有先后順序，所以交互操作層級(jí)一定程度上影響著布局排版。
問(wèn)題所在：
「批量轉(zhuǎn)賬」按鈕歸類到了第1步的信息模塊中，交互操作邏輯有點(diǎn)不通暢。
問(wèn)題截圖：
解決方案：
用戶行為路徑中，用戶核心費(fèi)用信息后，最有可能的行為就是點(diǎn)擊「批量轉(zhuǎn)賬」按鈕，所以「批量轉(zhuǎn)賬」按鈕與轉(zhuǎn)賬費(fèi)用信息的操作關(guān)聯(lián)性比較大，應(yīng)該在同一模塊里會(huì)更符合交互操作邏輯。
問(wèn)題所在：
主色、點(diǎn)綴色、輔助色各自的應(yīng)用范圍沒(méi)有規(guī)則，顏色應(yīng)用混亂。
問(wèn)題截圖：
問(wèn)題解決：
一個(gè)頁(yè)面或者項(xiàng)目中，各種顏色的應(yīng)用范圍需要有一定規(guī)范，文字使用什么顏色、按鈕使用什么顏色、輸入組件使用什么顏色、背景使用什么顏色都需要有對(duì)應(yīng)的使用規(guī)則。
問(wèn)題所在：
輸入類組件樣式存在多樣性，同樣是輸入框，有多種樣式，會(huì)造成用戶交互操作上的認(rèn)知有誤。
問(wèn)題截圖：
問(wèn)題解決：
一個(gè)頁(yè)面或者項(xiàng)目中，輸入類組件樣式應(yīng)用統(tǒng)一性原則，保持視覺(jué)風(fēng)格一致，從而減少用戶操作認(rèn)知偏差。
問(wèn)題所在：
按鈕樣式應(yīng)用到不具備按鈕點(diǎn)擊屬性的對(duì)象上，用戶會(huì)認(rèn)為也是可點(diǎn)擊，會(huì)造成用戶交互操作上的認(rèn)知有誤。
問(wèn)題截圖：
問(wèn)題解決：
一個(gè)頁(yè)面或者項(xiàng)目中，不具備按鈕點(diǎn)擊屬性的元素盡量不要套用按鈕樣式，減少用戶操作認(rèn)知偏差。
舉個(gè)例子：人形的稻草套上人的衣服，成功了欺騙了人們，造成了認(rèn)知偏差。
問(wèn)題所在：
同類信息內(nèi)容的展示存在多樣式，傳達(dá)過(guò)程中加重了用戶的認(rèn)知負(fù)擔(dān)。
問(wèn)題截圖：
問(wèn)題解決：
一個(gè)頁(yè)面或者項(xiàng)目中，同類信息內(nèi)容的展示應(yīng)用相似性原則保持視覺(jué)風(fēng)格一致，因?yàn)橄嗨菩缘牟季挚梢愿拥貍鬟_(dá)信息。
舉個(gè)例子：電商頁(yè)面，金額信息展示；理財(cái)頁(yè)面，收益信息的展示；都是應(yīng)用相似性的布局，即統(tǒng)一又地傳達(dá)信息。
問(wèn)題所在：
圖標(biāo)風(fēng)格不一致，圖形反白風(fēng)格，立體風(fēng)格，線性風(fēng)格。
問(wèn)題截圖：
問(wèn)題解決：
根據(jù)產(chǎn)品的特性，建議統(tǒng)一的圖標(biāo)風(fēng)格，選擇線性、面性、漸變、立體等風(fēng)格。
問(wèn)題所在：
頁(yè)面元素的對(duì)齊、間隔沒(méi)有規(guī)律，整體視覺(jué)顯得松散，不嚴(yán)謹(jǐn)。
問(wèn)題截圖：
問(wèn)題解決：
可以利用柵格系統(tǒng)，把頁(yè)面信息內(nèi)容規(guī)整起來(lái)。
根據(jù)發(fā)現(xiàn)的問(wèn)題，我們來(lái)看一下優(yōu)化后的設(shè)計(jì)方案：
優(yōu)化1：交互路徑
根據(jù)用戶行為路徑，將相關(guān)聯(lián)的信息歸類到一個(gè)模塊，每個(gè)步驟劃分到一個(gè)模塊，相關(guān)聯(lián)的步驟合并到一個(gè)模塊，模塊內(nèi)完成各自的操作展示任務(wù)，模塊之間信息內(nèi)容互不干擾，但從結(jié)構(gòu)布局又能夠形成符合交互操作邏輯。
優(yōu)化2：顏色規(guī)范
規(guī)范顏色，配色的方法在這里不做深入討論，這里方法的是基于品牌色通過(guò)飽和度、亮度、透明度的變化來(lái)得出文字各層級(jí)的顏色、邊框的顏色。
優(yōu)化3：輸入控件
對(duì)輸入類控件的樣式進(jìn)行了統(tǒng)一，讓用戶從視覺(jué)上就能夠清楚地分辨出哪些是可以進(jìn)行輸入操作的，從而減少用戶對(duì)交互操作上的認(rèn)知成本，提高信息輸入效率。
輸入控件進(jìn)行交互時(shí)，要有交互狀態(tài)反饋，默認(rèn)狀態(tài)、選中狀態(tài)、錯(cuò)誤狀態(tài)。視情況而定，可以增加鼠標(biāo)移上狀態(tài)和不可輸入狀態(tài)。
狀態(tài)變化時(shí)的顏色應(yīng)用，可以通過(guò)變換色相的透明度來(lái)保持色彩的一致性。
優(yōu)化4：按鈕規(guī)范
對(duì)按鈕進(jìn)行了分類，分為常規(guī)按鈕、圖標(biāo)按鈕、文字按鈕；對(duì)按鈕樣式用顏色進(jìn)行了統(tǒng)一；按鈕要有交互狀態(tài)反饋，不可點(diǎn)擊狀態(tài)、可點(diǎn)擊狀態(tài)、鼠標(biāo)移上狀態(tài)、鼠標(biāo)按下。
狀態(tài)變化時(shí)的顏色應(yīng)用，可以通過(guò)變換色相的飽和度、亮度、透明度來(lái)保持色彩的一致性。
優(yōu)化5：信息展示
對(duì)信息內(nèi)容應(yīng)用相似性原則進(jìn)行了排版的統(tǒng)一處理，每個(gè)小類信息的標(biāo)題與內(nèi)容采用統(tǒng)一排版格式，然后重復(fù)應(yīng)用，有助于提高信息獲取效率。
優(yōu)化6：圖標(biāo)風(fēng)格
這里的圖標(biāo)應(yīng)用于功能性圖標(biāo)，統(tǒng)一采用線性圓角風(fēng)格。功能性圖標(biāo)需要注意圖標(biāo)的形狀要能夠正確有效地傳達(dá)出功能的含義。
優(yōu)化7：對(duì)齊間隔
應(yīng)用柵格系統(tǒng)對(duì)視覺(jué)元素之間的對(duì)齊、間隔進(jìn)行調(diào)整，使頁(yè)面視覺(jué)更加嚴(yán)謹(jǐn)，頁(yè)面信息更容易閱讀。
交互思維
了解頁(yè)面中的功能交互流程，梳理用戶操作行為路徑，可以對(duì)行為步驟中的信息內(nèi)容進(jìn)行歸類分組提供依據(jù)，最終有助于頁(yè)面信息內(nèi)容的排版布局。
視覺(jué)思維
提取視覺(jué)組成元素，對(duì)顏色、文字、控件、圖標(biāo)等每一類應(yīng)用統(tǒng)一性原則進(jìn)行規(guī)范設(shè)計(jì)，再通過(guò)視覺(jué)元素本身相互組合，最終應(yīng)用回信息內(nèi)容上，建立規(guī)范的視覺(jué)感。
設(shè)計(jì)一個(gè)頁(yè)面，交互思維和視覺(jué)思維是互相配合的，缺一不可，最終都是為了共同去構(gòu)造符合交互操作邏輯、滿足視覺(jué)美感的界面。
大家都知道 UED（User Experience Design）用戶體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)，主張「以用戶為中心的設(shè)計(jì)」，我們團(tuán)隊(duì)的前身就是一個(gè)典型的 UED 團(tuán)隊(duì)。那么什么是 UGD 呢？
UGD（User Growth Design）用戶增長(zhǎng)設(shè)計(jì)，主張「以用戶為中心，以增長(zhǎng)為導(dǎo)向」。
下面這個(gè)是我們團(tuán)隊(duì)現(xiàn)在的 logo，這個(gè)圖形很清晰地描述了 UGD 的理念：在 UCD（以用戶為中心的設(shè)計(jì)）的基礎(chǔ)上增加一個(gè)向上的箭頭（增長(zhǎng)），變形成了 G（Growth，代表增長(zhǎng)）。也就是我們?cè)谠纫杂脩魹橹行牡幕A(chǔ)上，還要做到幫助業(yè)務(wù)增長(zhǎng)。
「增長(zhǎng)」的概念對(duì)很多人來(lái)說(shuō)也許還比較陌生。事實(shí)上，這個(gè)概念早在2010年就有人在美國(guó)提出了，到了2015年才引入國(guó)內(nèi)，最近兩年開(kāi)始火爆。所以說(shuō)它在國(guó)內(nèi)其實(shí)也是一個(gè)比較新的概念。感興趣的朋友可以看看《增長(zhǎng)黑客》相關(guān)書(shū)籍。
為什么我們要從傳統(tǒng)的 UED 進(jìn)化為充滿挑戰(zhàn)和不確定性的 UGD 呢？這要從天時(shí)、地利、人和三個(gè)方面說(shuō)起。
1. 天時(shí)
先說(shuō)說(shuō)天時(shí)，大概2016年左右吧，中國(guó)互聯(lián)網(wǎng)逐漸進(jìn)入下半場(chǎng)。關(guān)于下半場(chǎng)的話題這里不多說(shuō)了，感興趣的同學(xué)可以上網(wǎng)搜搜相關(guān)的文章或者看一下我的新書(shū)《破繭成蝶2》（7月出版），里面有很詳細(xì)的討論。簡(jiǎn)單的說(shuō)，下半場(chǎng)的特點(diǎn)就是：人口紅利、流量紅利、資金紅利都在逐漸萎縮。原先你可以花錢(qián)買(mǎi)流量；或者通過(guò)好的 idea 拉來(lái)大筆投資；再或者通過(guò)打造的體驗(yàn)迎來(lái)大量用戶。但這種「好時(shí)代」已經(jīng)一去不復(fù)返了，如果沒(méi)有實(shí)質(zhì)的增長(zhǎng)，創(chuàng)意、體驗(yàn)、流量都不能保證產(chǎn)品可以順利的活下去。
2017年3月底，美國(guó)又發(fā)生了一件大事：可口可樂(lè)，這家以營(yíng)銷著稱的公司，宣布將取消設(shè)立了24年的首席營(yíng)銷官（CMO）一職。全球市場(chǎng)營(yíng)銷、客戶及商務(wù)領(lǐng)導(dǎo)、戰(zhàn)略被整合成一個(gè)職能，由新創(chuàng)立的職位 CGO（Chief Growth Officer，首席增長(zhǎng)管）領(lǐng)導(dǎo)。第一任 CGO 將直接向可口可樂(lè)新任 CEO 匯報(bào)。
可能很多人不了解，CMO 的工作性質(zhì)和 UED 其實(shí)有很多相似的地方。比如都是成本部門(mén)（當(dāng)然市場(chǎng)部還要額外花錢(qián)）；都熱衷包裝創(chuàng)意而非對(duì)業(yè)績(jī)的直接影響；都傾向于用定性的方式檢驗(yàn)成果；都習(xí)慣通過(guò)經(jīng)驗(yàn)而非試驗(yàn)來(lái)做決策……
很多企業(yè)主對(duì)此非常無(wú)奈，他們明明知道在營(yíng)銷等方面的花費(fèi)存在巨大的浪費(fèi)，卻不知道浪費(fèi)在哪里。隨著大數(shù)據(jù)時(shí)代的到來(lái)（2015年左右），人們?cè)絹?lái)越重視數(shù)據(jù)的作用，越來(lái)越能夠輕易的獲取、存儲(chǔ)數(shù)據(jù)，也越來(lái)越知道如何從數(shù)據(jù)中獲取價(jià)值。在這種情況下，原先很多崗位的傳統(tǒng)工作方式顯然太過(guò)于低效，所以 CMO 逐漸被 CGO 取代也就不足為奇了。
從 CMO 到 CGO，揭示了四個(gè)變化趨勢(shì)：
誰(shuí)能肯定 CMO 的今天不會(huì)成為 UED 的明天呢？當(dāng)然，我認(rèn)為 UGD 只是未來(lái)的一個(gè)發(fā)展趨勢(shì)之一，我想未來(lái)設(shè)計(jì)師還會(huì)有很多其它的發(fā)展方向等待我們深入探索。
2. 地利
雖然我換過(guò)幾次工作，但是有一點(diǎn)我從來(lái)沒(méi)變，就是一直在做和商業(yè)相關(guān)的產(chǎn)品（電商、To B、互聯(lián)網(wǎng)金融），所以我對(duì)業(yè)務(wù)、對(duì)數(shù)據(jù)更敏感一些。和同行交流的過(guò)程中我也發(fā)現(xiàn)一個(gè)明顯的現(xiàn)象：越是接觸商業(yè)產(chǎn)品的設(shè)計(jì)師，越重視數(shù)據(jù)量化。當(dāng)然現(xiàn)在不僅是商業(yè)產(chǎn)品，所有類型產(chǎn)品的從業(yè)人員都需要有這個(gè)意識(shí)。比如做社交產(chǎn)品，也需要通過(guò)活躍度等指標(biāo)來(lái)檢驗(yàn)成果。
3. 人和
設(shè)計(jì)團(tuán)隊(duì)的地位其實(shí)普遍是比較尷尬的，因?yàn)槟愫茈y證明對(duì)產(chǎn)品、對(duì)企業(yè)的價(jià)值。以前設(shè)計(jì)師還可以靠特立獨(dú)行來(lái)贏得一些關(guān)注，但現(xiàn)在隨著時(shí)代的變化，設(shè)計(jì)和業(yè)務(wù)綁定的趨勢(shì)越來(lái)越明顯。與此同時(shí)，大部分設(shè)計(jì)師卻還沒(méi)有做好相應(yīng)的準(zhǔn)備，不知道該如何幫助業(yè)務(wù)增長(zhǎng)。
雖然支持團(tuán)隊(duì)很難成為核心團(tuán)隊(duì)，但我們依然可以通過(guò)改變自己，努力離核心部分近一點(diǎn)，更近一點(diǎn)。
看了前面的分析，可能有人會(huì)感覺(jué)迷茫：設(shè)計(jì)師到底應(yīng)該服務(wù)于業(yè)務(wù)還是用戶呢？
傳統(tǒng)思維認(rèn)為，設(shè)計(jì)師應(yīng)該為用戶、為體驗(yàn)負(fù)責(zé)。實(shí)際上，體驗(yàn)與業(yè)務(wù)并不沖突。通過(guò)一年多的試驗(yàn)，我們發(fā)現(xiàn)能帶動(dòng)業(yè)務(wù)數(shù)據(jù)提升的設(shè)計(jì)方案，質(zhì)量都比原始方案要好。通過(guò)無(wú)數(shù)次的試驗(yàn)結(jié)果總結(jié)規(guī)律，設(shè)計(jì)師的進(jìn)步非?？?，也非常大。
所以我們團(tuán)隊(duì)的價(jià)值主張一直都是：以用戶為中心，以增長(zhǎng)為導(dǎo)向！
很多設(shè)計(jì)師認(rèn)為自己不太可能幫助業(yè)務(wù)有實(shí)質(zhì)性的提升。其實(shí)設(shè)計(jì)的商業(yè)潛力是巨大的，只是還尚未被充分發(fā)揮出來(lái)。通過(guò)出眾的造型和外觀擊敗競(jìng)爭(zhēng)對(duì)手、銷量大幅提升的案例不勝枚舉。所以我堅(jiān)信設(shè)計(jì)師在這方面的空間非常大。
當(dāng)然要成為 UGD 并不是通過(guò)輸出美觀的產(chǎn)出物就可以做到。UGD 必須致力于通過(guò)設(shè)計(jì)思維及專業(yè)技能，用最小成本為產(chǎn)品/企業(yè)創(chuàng)造最大價(jià)值。我們團(tuán)隊(duì)在這方面已經(jīng)摸索了一年多的時(shí)間，現(xiàn)在還在繼續(xù)探索中。
和 UED 相比，我認(rèn)為 UGD 最重要的差別在于：
前三項(xiàng)相信大部分設(shè)計(jì)師已經(jīng)開(kāi)始意識(shí)到了，而第四項(xiàng)，也是最重要的一項(xiàng)，很容易成為設(shè)計(jì)師的軟肋。因?yàn)樵O(shè)計(jì)師太習(xí)慣于追求完美、「憋大招」了，他們很少考慮如何用較小的成本創(chuàng)造更大的價(jià)值。實(shí)際上，設(shè)計(jì)師縝密的思維、優(yōu)質(zhì)的創(chuàng)意如果能和精益思維、增長(zhǎng)思維結(jié)合起來(lái)，將產(chǎn)生驚人的效果！
當(dāng)然說(shuō)來(lái)容易做來(lái)難，我們?cè)陂L(zhǎng)期的實(shí)踐過(guò)程中經(jīng)歷了很多失敗和挫折，感謝公司的無(wú)限包容，使得我們最終能夠沉淀出一套嚴(yán)謹(jǐn)?shù)摹冈鲩L(zhǎng)體系」作為理論支撐，并不斷帶給業(yè)務(wù)方驚喜。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.wnxcall.com