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