進(jìn)入喜茶小程序的時(shí)候給我的感受是簡(jiǎn)潔、時(shí)尚、極致的設(shè)計(jì)風(fēng)格，截了兩張小程序內(nèi)的兩個(gè)界面。 確實(shí)做的還挺不錯(cuò)的，為什么給人感受不一樣？接下來(lái)我們分析分析
1.首先從下面的頁(yè)面我們能發(fā)現(xiàn)，界面的排版只有卡片左邊距留了20的安全距離，而卡片右邊安全距離為0，這樣特別的版式設(shè)計(jì)給人不對(duì)稱(chēng)的感覺(jué)，這樣的設(shè)計(jì)能讓用戶(hù)記住，同時(shí)又有一點(diǎn)時(shí)尚范的感覺(jué)，很符合喜茶目標(biāo)用戶(hù)年輕人的審美。
2.同時(shí)產(chǎn)品的banner是3:2的比例，較為靠近黃金比例的尺寸。
1.點(diǎn)單頁(yè)面，喜茶新增了新品推廣位，一些新上的產(chǎn)品都會(huì)在推廣位呈現(xiàn)，尺寸比例4:3，給人的感受像是線下海報(bào)一樣，同時(shí)第三個(gè)廣告位露出部分，讓用戶(hù)知道后面還可以左滑查看。同時(shí)推廣頁(yè)的右下角有個(gè)箭頭指引，告知用戶(hù)可點(diǎn)擊。
2.看完這幾個(gè)頁(yè)面會(huì)發(fā)現(xiàn)，喜茶的基本上都是純直角的設(shè)計(jì)語(yǔ)言，推廣頁(yè)是直角、標(biāo)簽是直角、按鈕微圓角，直角的設(shè)計(jì)語(yǔ)言給人的感受是時(shí)尚、極致、極簡(jiǎn)的設(shè)計(jì)感受，個(gè)人非常喜歡。
3.但是點(diǎn)單頁(yè)面的有點(diǎn)亂，標(biāo)簽的顏色過(guò)多，不夠統(tǒng)一，圖標(biāo)的也非常的多，這樣給人的感受就會(huì)比較凌亂，盡可能少的去表現(xiàn)，這樣更加能提高用戶(hù)的效率。
1.在點(diǎn)單頁(yè)面用戶(hù)上滑，推廣位漸漸的往上消失，這樣產(chǎn)品的展示會(huì)更多，利于用戶(hù)挑選和尋找。
2.用戶(hù)在選口味界面，發(fā)現(xiàn)每一個(gè)標(biāo)簽的內(nèi)的文字左右的安全距離一致，依次排列，具有節(jié)奏感，頁(yè)面給人感受簡(jiǎn)潔、易操作，同時(shí)用戶(hù)可以選自己的口味，可進(jìn)行保存，下次點(diǎn)直接就可以選擇自己的口味。
在喜茶的百貨界面能清晰發(fā)現(xiàn)每一個(gè)模塊的都是不一樣的，很多產(chǎn)品的商場(chǎng)頁(yè)面都是一致的，而喜茶在產(chǎn)品的展示會(huì)以不一樣的形式出現(xiàn)，每一個(gè)模塊都有尺寸和排版的差異，這樣給用戶(hù)有種落錯(cuò)感，更加有設(shè)計(jì)。
1.喜茶的會(huì)員頁(yè)給我眼前一亮的感覺(jué)，會(huì)員的背景用色都是明度高、純度低的漸變給人的感受清新、淡雅的感覺(jué)。
2.會(huì)員頁(yè)用戶(hù)在切換的同時(shí)圖標(biāo)的顏色會(huì)跟著會(huì)員的顏色變化，特權(quán)的內(nèi)容也會(huì)有不一樣的變化，讓用戶(hù)有明顯的等級(jí)感知。
3.切換到“黑卡”的時(shí)候，會(huì)發(fā)現(xiàn)會(huì)員頁(yè)的“喜”字加上了質(zhì)感。
4.會(huì)員卡上“喜”字提取了“喜茶”中的“喜”，跟其他產(chǎn)品的會(huì)員做了區(qū)分的同時(shí)又加深了品牌印象。
喜茶有兩種不同風(fēng)格的圖標(biāo)，一種是比較極簡(jiǎn)，線性，差異性沒(méi)有那么強(qiáng)，而另一種則是插畫(huà)風(fēng)格的圖標(biāo)，給人感受比較有趣，更有差異，極簡(jiǎn)則符合喜茶整體小程序的調(diào)性，而插畫(huà)又豐富了頁(yè)面的單調(diào)性。
1.喜茶頂部的banner做非常不錯(cuò)，例如跟FENDI合作的會(huì)在首屏加入視頻，用戶(hù)一進(jìn)入小程序就能看到能很好的吸引用戶(hù)的注意。
2.用戶(hù)在左右切換banner時(shí)，文字會(huì)先出現(xiàn)然后底部的圖片漸漸出現(xiàn)，給用戶(hù)感受自然、流暢的感受，好的動(dòng)畫(huà)效果能給產(chǎn)品加分，給用戶(hù)留下好的感受。
1.喜茶的數(shù)字字體是NeutraText-DemiAlt，每次進(jìn)去喜茶看到他們的數(shù)字字體非常有獨(dú)特性，給人的感受時(shí)尚、極致、有設(shè)計(jì)。
2.部分界面和海報(bào)喜茶會(huì)用上方正悠宋，有點(diǎn)中國(guó)風(fēng)、古風(fēng)的韻味在里面，而且也非常有獨(dú)特的設(shè)計(jì)美感，喜茶會(huì)應(yīng)用在國(guó)風(fēng)的海報(bào)以及會(huì)員頁(yè)的“喜”字上，突出風(fēng)格化。
3.好的字體能很好的提高產(chǎn)品的品牌感和設(shè)計(jì)美感，更能傳達(dá)該品牌想傳達(dá)的東西。
藍(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)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(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咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
從產(chǎn)品經(jīng)理處獲取項(xiàng)目原型圖，當(dāng)獲取到原型圖后不要盲目的去進(jìn)行設(shè)計(jì)，要先分析了解整個(gè)項(xiàng)目的功能、特性、用戶(hù)群體、項(xiàng)目的定位等等，特別是對(duì)功能的疑惑處一定要找產(chǎn)品經(jīng)理溝通，只有做到對(duì)項(xiàng)目了熟于胸才能做出優(yōu)秀的設(shè)計(jì)。
當(dāng)我們對(duì)項(xiàng)目的功能、特性、用戶(hù)群體、項(xiàng)目的定位都有所了解后，還是不能馬上進(jìn)入設(shè)計(jì)環(huán)節(jié)。我們需要先對(duì)市面上同類(lèi)型的產(chǎn)品進(jìn)行分析和對(duì)比，包括設(shè)計(jì)風(fēng)格、配色、排版、功能樣式等等，了解其優(yōu)劣勢(shì)，做到取長(zhǎng)補(bǔ)短，思考如何讓我們的產(chǎn)品更加的完善，這時(shí)候我們的腦海里面基本上對(duì)自己要設(shè)計(jì)的東西已經(jīng)有了一個(gè)大概的雛形。
這篇文章內(nèi)所有的數(shù)值均以2倍圖為例，使用1倍圖的同學(xué)請(qǐng)自行除以2。
現(xiàn)在UI設(shè)計(jì)通常使用的是全面屏的設(shè)計(jì)規(guī)范，全面屏的設(shè)計(jì)稿更加美觀，且做作品集的時(shí)候搭配全面屏樣機(jī)視覺(jué)效果也更加突出。通常只設(shè)計(jì)一套蘋(píng)果全面屏的設(shè)計(jì)稿，不需要另外設(shè)計(jì)安卓端設(shè)計(jì)稿，安卓端由安卓工程師自行適配。
界面：750px1624px
狀態(tài)欄：750x88px
導(dǎo)航欄：750x88px
菜單欄：750x98px
指示器：750x68px
左右邊距：32px或24px
*其中狀態(tài)欄和指示器不需要進(jìn)行額外的設(shè)計(jì)，是系統(tǒng)默認(rèn)控件，除顏色外不可改變。
頂部功能：48x48px
底部菜單欄（有文字）：48x48px
底部菜單欄（無(wú)文字）：64x64px
尺寸：36px、32px、28px、24px
顏色：正常（#333333）、輔助（#999999）、未輸入提示（#CCCCCC）
*利用文字尺寸對(duì)比和顏色對(duì)比可以得到不錯(cuò)的效果。也可以給文字顏色添加少量的藍(lán)色，讓顏色不那么呆板。
組建控件系統(tǒng)可以讓我們的設(shè)計(jì)稿更加的規(guī)范，也便于修改，可以極大的提高我們的工作效率。
所有的圖標(biāo)都需要做成控件，方便我們切圖。然后就是會(huì)重復(fù)使用的狀態(tài)欄、導(dǎo)航欄、菜單欄、指示器、列表、彈框、按鈕等控件。
除了我們常用的控件以外，顏色、投影等特殊效果、文字大小都可以保存樣式，把項(xiàng)目的配色、特殊效果、文字尺寸都保存下來(lái)，不同的設(shè)計(jì)工具有不同的保存方式，大家可以根據(jù)自己使用的設(shè)計(jì)工具進(jìn)行設(shè)置。
我們需要讓項(xiàng)目保持一個(gè)統(tǒng)一的設(shè)計(jì)風(fēng)格，讓項(xiàng)目更加的整體、統(tǒng)一、協(xié)調(diào)。不同的風(fēng)格有不同的優(yōu)勢(shì)，選對(duì)與項(xiàng)目屬性相符的設(shè)計(jì)風(fēng)格可以讓項(xiàng)目更加的出彩。
這種風(fēng)格沒(méi)找到合適的名稱(chēng)，我個(gè)人一般叫它傳統(tǒng)風(fēng)格。這種設(shè)計(jì)風(fēng)格使用分割線分割小的模塊，用背景色塊分割大的模塊，特別適合列表信息。雖然給人感覺(jué)沒(méi)有特別強(qiáng)烈的設(shè)計(jì)感，但簡(jiǎn)單實(shí)用、樸實(shí)無(wú)華，層級(jí)劃分清晰明了。
卡片式風(fēng)格是借用現(xiàn)實(shí)世界中卡片的特征和概念，將一個(gè)模塊或同類(lèi)型元素放到一個(gè)卡片容器類(lèi)，可以增加內(nèi)容的獨(dú)立性，讓模塊劃分關(guān)系變得非常的清晰，是現(xiàn)在非常常用的一種設(shè)計(jì)方式。
常用做法是采用淺灰的背景+白色卡片的方式，卡片都帶有一定的圓角，類(lèi)似于將撲克牌一張張的放在桌子上，桌面是灰色背景，每一張撲克牌就是一個(gè)卡片。也不排除暗夜模式的卡片式設(shè)計(jì)，背景會(huì)更暗一些，卡片略亮。
在傳統(tǒng)UI風(fēng)格的基礎(chǔ)上去除背景色塊和分割線，單以間距來(lái)區(qū)分模塊和元素，對(duì)親密性的應(yīng)用有較高的要求。有時(shí)候單以間距來(lái)區(qū)分模塊和元素時(shí)，可能會(huì)導(dǎo)致模塊層級(jí)不分明，所以會(huì)使用將標(biāo)題加大的形式，讓模塊與模塊之間的區(qū)分更加明顯。因?yàn)槿コ朔指罹€，留白就更多，會(huì)顯得界面更加的干凈、清爽。
新擬態(tài)是19年底在追波開(kāi)始出現(xiàn)的一種設(shè)計(jì)風(fēng)格，特點(diǎn)是使用統(tǒng)一的光源做出立體的浮雕效果，元素有厚度但沒(méi)有紋理和材質(zhì)的輕擬物風(fēng)。
常規(guī)做法是假設(shè)一個(gè)統(tǒng)一的左上方光源，給元素分別添加一個(gè)左上角和右下角的投影，左上角（被光源照射的一側(cè)）投影使用亮色，右下角投影使用暗色，讓元素可以浮起來(lái)。而在按下或選中狀態(tài)時(shí)則使用兩個(gè)內(nèi)陰影，左上角暗色右下角亮色讓元素凹下去。需要注意的是界面模塊和背景色一般是同一個(gè)顏色，所以顏色不能使用純白或純黑，否則有一側(cè)的投影就會(huì)看不見(jiàn)，通常是使用藍(lán)灰色或深灰色背景。
新擬態(tài)風(fēng)格視覺(jué)效果新穎、柔和，對(duì)比度低，看得久了會(huì)產(chǎn)生一定的視覺(jué)疲勞，研發(fā)成本也較高，所以現(xiàn)在更多的還是處于概念稿，實(shí)際項(xiàng)目中應(yīng)用較少?？梢宰鳛橐环N練習(xí)或部分功能的使用。
設(shè)計(jì)稿完成之后我們需要將圖標(biāo)等元素切圖導(dǎo)出交付給開(kāi)發(fā)，IOS和安卓需要根據(jù)要求導(dǎo)出不同倍數(shù)的png格式切圖文件。
IOS：現(xiàn)在通常是輸出2套，以@2x、@3X為后綴，也就是2倍圖、3倍圖；
Android：現(xiàn)在通常是輸出3套，xhdpi（超清，對(duì)應(yīng)IOS的2倍圖）、xxhdpi（超超清，對(duì)應(yīng)IOS的3倍圖）、xxxhdpi（超超超清），安卓切圖不需要將倍數(shù)加到切圖命名內(nèi)，而是每種尺寸單獨(dú)建立一個(gè)文件夾。
png：最常用的切圖文件格式，背景無(wú)底透明，所以在導(dǎo)出切圖文件時(shí)需要先去掉背景色（figma將畫(huà)板填充色隱藏，sketch畫(huà)板不要勾選“包含于導(dǎo)出項(xiàng)”）；
svg：矢量切圖，需要背景無(wú)底透明，部分網(wǎng)頁(yè)端項(xiàng)目可能需要svg格式的切圖文件；
bmp：部分硬件機(jī)器的項(xiàng)目需要使用的圖片格式，需要注意的是bmp無(wú)法實(shí)現(xiàn)背景透明，如果背景是透明的會(huì)自動(dòng)帶上白色，需要切圖文件把背景帶上一起切，而且figma和sketch等UI設(shè)計(jì)軟件無(wú)法直接導(dǎo)出bmp格式，需要先導(dǎo)出為png或jpg格式，再使用ps或其他工具轉(zhuǎn)換一次。
只能使用英文、下滑線、數(shù)字進(jìn)行命名，不要使用中文和特殊字符。命名方式一般是類(lèi)別_位置_功能_狀態(tài)（有些切圖沒(méi)有多種狀態(tài)則不需要添加狀態(tài)命名）。
以蘋(píng)果端舉例：如底部菜單欄的首頁(yè)圖標(biāo)命名則是ico_bottom_home_nor@2x（圖標(biāo)_底部_首頁(yè)_未選中狀態(tài)）和ico_bottom_home_sel@2x（圖標(biāo)_底部_首頁(yè)_選中狀態(tài)）。
頂部的搜索圖標(biāo)沒(méi)有多個(gè)狀態(tài)，命名是ico_nav_search@2x（圖標(biāo)_頂部_搜索）。
類(lèi)別一般只有3種：圖標(biāo)（icon）、圖片（image）、按鈕（button），我們通常會(huì)簡(jiǎn)寫(xiě)為ico、img、btn。
狀態(tài)一般只有4種：正常（normal）、按下（press）選中（selected）、禁用（disabled），我們通常會(huì)簡(jiǎn)寫(xiě)為nor、pre、sel、dis。pc端會(huì)多一種狀態(tài)：懸停（hover）。
sketch和figma等UI設(shè)計(jì)軟件可以同時(shí)導(dǎo)出多個(gè)尺寸的切圖文件和前綴/后綴，所以我們只需要設(shè)置圖標(biāo)本身的命名如ico_bottom_home_sel，而不需要每個(gè)切圖都去手動(dòng)的添加IOS后綴的@2x和@3X，以及安卓的前綴xhdpi等，在導(dǎo)出設(shè)置中設(shè)置好每個(gè)尺寸的文件夾名稱(chēng)和后綴，再統(tǒng)一導(dǎo)出即可。
軟件內(nèi)部導(dǎo)出：現(xiàn)在的UI設(shè)計(jì)軟件Sketch、Figma、Mstergo等都可以直接導(dǎo)出切圖文件，只需要設(shè)置好相應(yīng)的倍數(shù)和前綴、后綴，就可以快速的導(dǎo)出切圖文件；
上傳第三方：最常用的就是將設(shè)計(jì)文件上傳至藍(lán)湖，研發(fā)人員可以在藍(lán)湖上下載自己需要的切圖文件，但在上傳藍(lán)湖之前需要把設(shè)計(jì)稿中需要切圖的元素設(shè)置為切片。
和切圖文件一起交付給開(kāi)發(fā)的還有設(shè)計(jì)稿的標(biāo)注文件，讓研發(fā)人員可以清楚地知道界面內(nèi)元素的顏色、尺寸、對(duì)齊方式、距離、透明度，文字的字體、字號(hào)、行高等。
很多設(shè)計(jì)文件都可以安裝藍(lán)湖插件，再通過(guò)插件將設(shè)計(jì)稿導(dǎo)出到藍(lán)湖，研發(fā)人員就可以便捷的查看界面的標(biāo)注。
Figma、Mastergo等在線設(shè)計(jì)軟件都可以切換為開(kāi)發(fā)者模式，只需要將研發(fā)人員邀請(qǐng)到自己的設(shè)計(jì)文件所在團(tuán)隊(duì)內(nèi)，研發(fā)人就可以查看到界面的標(biāo)注；
有部分公司有一定的保密措施，會(huì)禁止設(shè)計(jì)師使用第三方平臺(tái)或是聯(lián)網(wǎng)操作，這種情況設(shè)計(jì)也無(wú)法使用Figma、Mastergo等在線設(shè)計(jì)軟件，只能使用Sketch等客戶(hù)端，輸出標(biāo)注就需要使用相應(yīng)的插件，Sketch可以使用Sketch Measure導(dǎo)出HTML格式的標(biāo)注文件。
在項(xiàng)目上線的階段UI設(shè)計(jì)需要輔助研發(fā)提供上線應(yīng)用商店需要的項(xiàng)目預(yù)覽圖、啟動(dòng)LOGO，也需要設(shè)計(jì)補(bǔ)充出APP的啟動(dòng)頁(yè)、閃屏頁(yè)等。
上線應(yīng)用商店需要的預(yù)覽圖，通常是使用項(xiàng)目中比較有特色的幾個(gè)UI界面加以設(shè)計(jì)。
上線應(yīng)用商店必須提供的LOGO，手機(jī)中啟動(dòng)APP的入口，但不同的應(yīng)用商店有不同的尺寸，華為、蘋(píng)果、小米、三星、應(yīng)用寶等所需要的啟動(dòng)LOGO都有所不同，所以輸出多個(gè)尺寸。以蘋(píng)果App Store為例，需要以下尺寸：
啟動(dòng)頁(yè)和引導(dǎo)頁(yè)一般是和UI界面一起設(shè)計(jì)，不過(guò)需要項(xiàng)目上線后才會(huì)有其價(jià)值，所以可以先設(shè)計(jì)完項(xiàng)目的界面，在研發(fā)開(kāi)發(fā)的過(guò)程中再去設(shè)計(jì)啟動(dòng)頁(yè)和引導(dǎo)頁(yè)，只要在項(xiàng)目上線前提供給研發(fā)就可以。
當(dāng)一個(gè)項(xiàng)目上線后，只能代表我們的現(xiàn)階段的工作已經(jīng)全部完成。每個(gè)項(xiàng)目上線后都會(huì)收集用戶(hù)反饋，根據(jù)用戶(hù)反饋的信息優(yōu)化功能和界面設(shè)計(jì)，通過(guò)持續(xù)不斷的優(yōu)化、迭代讓我們的產(chǎn)品越來(lái)越好，這個(gè)過(guò)程中也需要我們UI設(shè)計(jì)不斷的去進(jìn)行調(diào)整和優(yōu)化。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(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咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
什么是好的設(shè)計(jì)？好設(shè)計(jì)，就是不改稿的設(shè)計(jì)，甲方買(mǎi)單的設(shè)計(jì)，這句話多大多數(shù)設(shè)計(jì)師來(lái)說(shuō)是沒(méi)錯(cuò)的。因?yàn)樵O(shè)計(jì)師也要吃飯的、要生活。只要客戶(hù)買(mǎi)單了，我們就能達(dá)到經(jīng)濟(jì)上的收益。
但是僅僅客戶(hù)買(mǎi)單就足夠了嗎？我覺(jué)得對(duì)于一個(gè)想要提升自己的設(shè)計(jì)師來(lái)說(shuō)并不足夠。這個(gè)客戶(hù)買(mǎi)單了說(shuō)明你在一定程度上，在當(dāng)前滿(mǎn)足了這個(gè)需求層次或者審美的客戶(hù)群體。
當(dāng)客戶(hù)發(fā)現(xiàn)設(shè)計(jì)并沒(méi)有在實(shí)際宣傳中達(dá)到目的，買(mǎi)完單的客戶(hù)也沒(méi)辦法回頭再找設(shè)計(jì)師退款，但是，可想而知這個(gè)客戶(hù)就流失了。而且如果只滿(mǎn)足于應(yīng)對(duì)這一需求層次的客戶(hù)，當(dāng)面對(duì)要求更高的客戶(hù)的時(shí)候，我們也會(huì)變得無(wú)能為力。只能看著客戶(hù)流失，或者勉強(qiáng)接下項(xiàng)目，卻在不斷的改稿中疲于奔命。
想了解什么是好的設(shè)計(jì)，首先需要要了解什么是設(shè)計(jì)，設(shè)計(jì)的目的是什么。
設(shè)計(jì)是有目的的策劃，平面設(shè)計(jì)是這些策劃將要采取的形式之一，在平面設(shè)計(jì)中你需要用視覺(jué)元素來(lái)傳播你的設(shè)想和計(jì)劃，用文字和圖形把信息傳達(dá)給受眾，讓人們通過(guò)這些視覺(jué)元素了解你想表達(dá)的信息，這才是我們?cè)O(shè)計(jì)的定義。平面設(shè)計(jì)的目的不僅是視覺(jué)表層的美觀度，更重要的、最根本的是信息的傳達(dá)。
所以好的設(shè)計(jì)就是，能準(zhǔn)確直觀的傳播設(shè)計(jì)目的，被受眾更有效、更愿意接收信息的設(shè)計(jì)。簡(jiǎn)單來(lái)講，信息（包括內(nèi)容信息和情感信息）傳達(dá)的是設(shè)計(jì)的基礎(chǔ)，是設(shè)計(jì)中一切行為的第一準(zhǔn)則，是對(duì)的設(shè)計(jì)。在此基礎(chǔ)上具備良好的美感傳達(dá)就是好的設(shè)計(jì)。
我們可能在設(shè)計(jì)學(xué)習(xí)過(guò)程中學(xué)到了很多的設(shè)計(jì)法則，形式美法則、創(chuàng)意思維、排版原則、色彩原則、字體運(yùn)用原則。但是很多時(shí)候用到的時(shí)候就想不起來(lái)，用了也沒(méi)達(dá)到效果？
我理解更多的是因?yàn)闆](méi)有從根本上理解這些法則存在的意義、運(yùn)用的目的。設(shè)計(jì)師應(yīng)該做最吝嗇的人，過(guò)程中每一個(gè)視覺(jué)元素的運(yùn)用都要有其目的性。這個(gè)目的性就應(yīng)該是信息傳達(dá)和美感傳達(dá)。以此為標(biāo)準(zhǔn)反復(fù)檢驗(yàn)自己的設(shè)計(jì)作品，相信我們能做出好的設(shè)計(jì)。
（一）客戶(hù)對(duì)設(shè)計(jì)的期待信息準(zhǔn)確有效傳遞，受眾對(duì)信息要求直觀、易讀。
這是一個(gè)高效時(shí)代，時(shí)間就是金錢(qián)。同時(shí)是一個(gè)信息大爆炸的時(shí)代，每天我們會(huì)面對(duì)各種不同媒介的信息，不斷沖擊這我們的視覺(jué)。我們不能要求受眾有時(shí)間和耐心完整仔細(xì)的觀看閱讀整個(gè)設(shè)計(jì)。這就要求我們的設(shè)計(jì)，即便一眼，就能判斷設(shè)計(jì)究竟在表現(xiàn)什么信息，而不被其他不重要信息干擾。當(dāng)客戶(hù)對(duì)表達(dá)信息有一個(gè)直觀的概念后，希望繼續(xù)閱讀下去的話，我們就要在易讀方面進(jìn)行深化。
明確最重要的信息
對(duì)于設(shè)計(jì)需求的分析得出最重要的信息，最想傳達(dá)的信息
突出最重要的信息
將它擺放在突出的位置，整體的烘托，對(duì)比的凸顯，合適的構(gòu)圖
次要信息
相對(duì)最重要的信息較弱
信息的篩選
設(shè)計(jì)中包含的信息必須有明確的效用，而不被不必要的信息干擾導(dǎo)致失去閱讀興趣
設(shè)置重要等級(jí)
針對(duì)內(nèi)容設(shè)置重要性等級(jí)，然后根據(jù)相應(yīng)等級(jí)進(jìn)行設(shè)計(jì)。
信息分組
這是受眾感知多條信息的前題，將相關(guān)的信息放置或整合為一體，這樣就可以實(shí)現(xiàn)分組。大多數(shù)情況下三至四個(gè)信息組已經(jīng)足夠了。
閱讀性文字排版 （閱讀性文字指的是需要受眾閱讀的，而非裝飾性、不需要識(shí)別性的）
在文字排版當(dāng)中易讀是必須追求的。
對(duì)齊：為了達(dá)到易讀效果，首先要從對(duì)齊開(kāi)始。
檢索：易于檢索目標(biāo)內(nèi)容，精心處理檢索方式。（依據(jù)版式設(shè)計(jì)原則中的對(duì)比，重復(fù)原則實(shí)現(xiàn)）
記憶：要點(diǎn)便于記憶，突出主要內(nèi)容。（依據(jù)版式設(shè)計(jì)原則中的對(duì)比，重復(fù)原則實(shí)現(xiàn)）
文字：文字大小、字間距、行距、字體、文字的排布五個(gè)方面。過(guò)小的字體、過(guò)大的字體，過(guò)度裝飾的字體，不符合視覺(jué)流程，不合理的版式布局。都是會(huì)影響閱讀的易讀性。
（二）客戶(hù)對(duì)設(shè)計(jì)的期待能引人注意、獲得好的反饋，受眾希望從設(shè)計(jì)中收到某種刺激、有所收獲。
人們每天沒(méi)數(shù)量驚人的信息淹沒(méi)，面對(duì)潮水涌來(lái)的信息。我們的頭腦中會(huì)形成一個(gè)過(guò)濾器，只會(huì)對(duì)能引發(fā)我們興趣的信息，能夠得到某種刺激的信息，才能順利通過(guò)并留下清晰的印象。因此，想要設(shè)計(jì)從眾多信息中脫穎而出并抓住受眾的實(shí)現(xiàn)。就必須引人注目、傳遞刺激，讓受眾在你的設(shè)計(jì)上逗留。
美的視覺(jué)效果比較容易給人帶來(lái)刺激
這時(shí)候我們學(xué)習(xí)的各種原則知識(shí)，構(gòu)成知識(shí)（點(diǎn)線面，平衡、對(duì)比、調(diào)和、節(jié)奏、變異.....）、版式知識(shí)（位置、比例、分割、留白、網(wǎng)格.....）等都可以充分發(fā)揮作用了。
滿(mǎn)足期待
人們希望沖設(shè)計(jì)只能夠得到收獲，包括有用的文字信息和情感上的。反過(guò)來(lái)如果已經(jīng)知道了，沒(méi)有興趣，無(wú)我無(wú)關(guān)的信息，是無(wú)法吸引受眾的。選用一種能夠傳達(dá)設(shè)計(jì)內(nèi)容及主題思想的吸睛元素就很有必要。可以是文字（禮物、服務(wù)、免費(fèi)、抽獎(jiǎng)、限時(shí)、折扣等）或者圖形元素、圖片。
吸睛元素與設(shè)計(jì)需求要匹配
選取吸睛元素必須與設(shè)計(jì)主題信息密切相關(guān)。例如，在定位是高品質(zhì)的項(xiàng)目設(shè)計(jì)中，放置一個(gè)花哨刺眼的打折；在畫(huà)面中一個(gè)無(wú)關(guān)的美女。這確實(shí)很可能在短時(shí)間內(nèi)贏得受眾的注意，但是當(dāng)文字或圖片與設(shè)計(jì)需要傳達(dá)的信息完全無(wú)關(guān)的情況下。也會(huì)很快的失去他們的關(guān)注。
情感刺激
一個(gè)好的吸睛元素往往能激發(fā)受眾的情感——受眾會(huì)覺(jué)得驚喜，感覺(jué)自己的情感獲得了認(rèn)可，也可能會(huì)對(duì)設(shè)計(jì)產(chǎn)生共鳴。一旦感情上拉近了受眾與設(shè)計(jì)的距離，就有可能增加受眾良好的反饋行動(dòng)達(dá)到商業(yè)目的（購(gòu)買(mǎi)產(chǎn)品、產(chǎn)生消費(fèi)等）。
消極情感
人們被設(shè)計(jì)激發(fā)的情感并非總是積極正面的。更重要的是有針對(duì)性的激發(fā)觀眾的情感。應(yīng)該根據(jù)不同的設(shè)計(jì)目的，激發(fā)觀眾內(nèi)心相應(yīng)的情感。例如一個(gè)減肥中心的宣傳設(shè)計(jì)，畫(huà)面營(yíng)造一種胖人失落的畫(huà)面（沒(méi)有偏見(jiàn)我自己也是個(gè)胖子~），從而激發(fā)受眾不安的消極情緒。這也可能引起受眾的關(guān)注，并愿意深入了解。
受眾反應(yīng)的不確定性
視覺(jué)會(huì)給人帶來(lái)一連串的生理上的、心理上的、情感上的、行動(dòng)上的反應(yīng)，設(shè)計(jì)是視覺(jué)經(jīng)驗(yàn)的科學(xué)。他包括兩個(gè)方面，一個(gè)是不以人為而改變的即生理感受的人的基本反應(yīng)，另一個(gè)是隨即的或不確定因素構(gòu)成。如個(gè)人喜好，性格等等、等等，導(dǎo)致我們無(wú)法完全確定受眾在面對(duì)設(shè)計(jì)時(shí)候的情感等反應(yīng)。
相對(duì)穩(wěn)定的方面： 主要是生理上的視知覺(jué)，人們的一些視覺(jué)習(xí)慣、視覺(jué)流程、視覺(jué)邏輯，如從上到下，從左到右，喜歡連貫的、重復(fù)，喜歡有對(duì)比的，還有在顏色方面人們最喜歡的其實(shí)是有對(duì)比的互補(bǔ)色等等。這都是跟人們的生理上的習(xí)慣有關(guān)，都是人生理機(jī)能的本能反應(yīng)。作為設(shè)計(jì)師應(yīng)該對(duì)這些知識(shí)能充分了解、靈活運(yùn)用，設(shè)計(jì)是對(duì)人本的關(guān)注，首先應(yīng)對(duì)文化與人的感知方式這些相對(duì)穩(wěn)定的方面進(jìn)行研究，并且需要我們?cè)趯?shí)踐中去總結(jié)。
不穩(wěn)定的方面： 不穩(wěn)定的方面主要是指情感、素質(zhì)、品位、閱歷上的不同，在設(shè)計(jì)過(guò)程中你需要具備一定的判斷和把握能力，你需要客觀和克制，才能完成卓越的設(shè)計(jì)。
設(shè)計(jì)思維的科學(xué)： 設(shè)計(jì)是必須具有科學(xué)的思維方法，能在相同中找到差別，能在不同當(dāng)中找到共同之處，能掌握運(yùn)用各種思維方法，如縱向關(guān)聯(lián)思維和橫向關(guān)聯(lián)思維以及發(fā)散式的思維，善于運(yùn)用科學(xué)的思維方式找到奇特的新的視覺(jué)形象，才能不斷發(fā)現(xiàn)新的可能。
設(shè)計(jì)學(xué)習(xí)過(guò)程中的總結(jié)和整理，有些內(nèi)容來(lái)自網(wǎng)絡(luò)，如有冒犯請(qǐng)聯(lián)系我刪改！僅為自身學(xué)習(xí)提升的記錄，如果對(duì)內(nèi)容有更好的理解，歡迎交流探討。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(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咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
近年來(lái)，行業(yè)內(nèi)不斷探索廣告的新玩法，激勵(lì)視頻廣告成為一種愈加流行的廣告形式，當(dāng)前已經(jīng)是媒體主流變現(xiàn)模式之一，以滿(mǎn)足廣告主營(yíng)銷(xiāo)效果、媒體變現(xiàn)效率最大化。對(duì)用戶(hù)而言，觀看激勵(lì)視頻廣告能夠獲得相應(yīng)獎(jiǎng)勵(lì)；對(duì)于客戶(hù)，激勵(lì)視頻廣告通過(guò)獎(jiǎng)勵(lì)機(jī)制，得到更長(zhǎng)時(shí)間的曝光來(lái)提升轉(zhuǎn)化率；對(duì)于平臺(tái)，有更高的變現(xiàn)效率能帶來(lái)更高的收益。
百度激勵(lì)視頻廣告承載著百度APP任務(wù)系統(tǒng)、權(quán)益場(chǎng)景、活動(dòng)場(chǎng)景等的重要變現(xiàn)任務(wù)，本文將從激勵(lì)視頻廣告的框架、提升轉(zhuǎn)化效果兩個(gè)方面，來(lái)闡述容器結(jié)構(gòu)設(shè)計(jì)與提升轉(zhuǎn)化效果的設(shè)計(jì)思考。
框架：建立場(chǎng)景核心轉(zhuǎn)化流程
激勵(lì)視頻廣告是獨(dú)立的視頻場(chǎng)景，場(chǎng)景內(nèi)的元素布局、容器結(jié)構(gòu)不依賴(lài)于所在的宿主場(chǎng)景，在整個(gè)交互鏈路中能夠采用更有創(chuàng)新的設(shè)計(jì)形式。
1、布局跨場(chǎng)景橫向一致
基于激勵(lì)視頻廣告的元素來(lái)明確內(nèi)容分區(qū)，考慮元素作用與通用性可分為頂部框架區(qū)、附加掛載區(qū)、內(nèi)容信息區(qū)、轉(zhuǎn)化決策區(qū)，在結(jié)構(gòu)設(shè)計(jì)上，將核心獎(jiǎng)勵(lì)計(jì)時(shí)組件置于頂部框架區(qū)并保持穩(wěn)定展現(xiàn)，保證百度APP內(nèi)的視頻廣告在布局上橫向一致性，同時(shí)也有利于場(chǎng)景之間創(chuàng)意交叉驗(yàn)證與復(fù)用。
2、容器、元素組件選型
從激勵(lì)視頻的鏈路流程出發(fā)，結(jié)合主動(dòng)交互行為的各類(lèi)組件狀態(tài)：獎(jiǎng)勵(lì)計(jì)時(shí)與完成、視頻播放與完播、瀏覽落地頁(yè)、退出挽留四種核心狀態(tài)。
1）獎(jiǎng)勵(lì)計(jì)時(shí)與完成：考慮獎(jiǎng)勵(lì)計(jì)時(shí)器會(huì)存在于多種不同場(chǎng)景情況，需要具備橫向統(tǒng)一的計(jì)時(shí)形式來(lái)穩(wěn)定用戶(hù)預(yù)期，以及通過(guò)視覺(jué)反饋給予用戶(hù)明確的狀態(tài)變化感知，來(lái)降低不同場(chǎng)景下的理解成本，通過(guò)ABtest的方式，最終選用場(chǎng)景元素圖標(biāo)與文本計(jì)時(shí)形式，圖標(biāo)能夠根據(jù)獎(jiǎng)勵(lì)的不同支持靈活配置，滿(mǎn)足多元化場(chǎng)景的適配訴求，同時(shí)選用視覺(jué)感知較弱的樣式與動(dòng)畫(huà)形式，盡可能避免與點(diǎn)擊、轉(zhuǎn)化無(wú)關(guān)的元素動(dòng)畫(huà)稀釋用戶(hù)對(duì)內(nèi)容的注意力，從而影響廣告效果。
2）視頻播放與完播：播放狀態(tài)下，為盡量降低對(duì)視頻內(nèi)容的遮擋，在轉(zhuǎn)化組件的呈現(xiàn)上，采用“延遲展現(xiàn)吸引觀看，漸進(jìn)式增強(qiáng)吸引點(diǎn)擊”的手段，視頻完播狀態(tài)下呈現(xiàn)視頻尾幀，尾幀增加再看一個(gè)視頻功能，為想要獲得金幣的用戶(hù)縮短操作步長(zhǎng)，提升激勵(lì)視頻廣告的分發(fā)。
3）瀏覽落地頁(yè)：瀏覽落地頁(yè)過(guò)程中也需明示獎(jiǎng)勵(lì)計(jì)時(shí)，為了保證視頻場(chǎng)景和落地頁(yè)場(chǎng)景的計(jì)時(shí)延續(xù)與組件統(tǒng)一性，采用避讓計(jì)時(shí)組件的面板化落地頁(yè)容器。
4）退出挽留：當(dāng)用戶(hù)在不同獎(jiǎng)勵(lì)狀態(tài)下會(huì)在退出的主動(dòng)行為，挽留彈窗承載挽留與再看功能的重要作用，彈窗作為前后鏈路場(chǎng)景的共性組件，在彈窗設(shè)計(jì)上頂部承載所在場(chǎng)景主視覺(jué)IP，以滿(mǎn)足多元化場(chǎng)景的下活動(dòng)主視覺(jué)的延續(xù)，使激勵(lì)視頻廣告更契合所在活動(dòng)場(chǎng)景。
3、轉(zhuǎn)化鏈路降步長(zhǎng)
在原有的基礎(chǔ)路徑上，獎(jiǎng)勵(lì)計(jì)時(shí)與倒計(jì)時(shí)結(jié)束的兩個(gè)環(huán)節(jié)僅有計(jì)時(shí)器形態(tài)的變化，元素變化是容易起到聚焦視覺(jué)的作用的，以倒計(jì)時(shí)結(jié)束為節(jié)點(diǎn)，將用戶(hù)從"視頻場(chǎng)景"帶入到"決策場(chǎng)景"，通過(guò)容器結(jié)構(gòu)形態(tài)的變化來(lái)解放停留在計(jì)時(shí)器上的視覺(jué)焦點(diǎn)，面板結(jié)構(gòu)能承載更多的增益內(nèi)容，延展信息載量，視頻完播是判斷用戶(hù)對(duì)內(nèi)容感興趣的重要契機(jī)，在視頻完播狀態(tài)自動(dòng)調(diào)起落地頁(yè)，通過(guò)縮短轉(zhuǎn)化步長(zhǎng)提升轉(zhuǎn)化效率。
激勵(lì)視頻廣告容器每一步迭代都伴隨大量的前置思考、歸因分析、嚴(yán)謹(jǐn)實(shí)驗(yàn)，經(jīng)歷多輪迭代最終完成流程框架搭建，后面我們?nèi)砸伎既绾瓮ㄟ^(guò)設(shè)計(jì)方法，在現(xiàn)有的框架上進(jìn)一步提升轉(zhuǎn)化效果。
提轉(zhuǎn)：內(nèi)容化與獎(jiǎng)勵(lì)玩法助決策
在廣告創(chuàng)意視角下，通過(guò)內(nèi)容信息命中用戶(hù)訴求、滿(mǎn)足心理期望能夠提升轉(zhuǎn)化效果；在用戶(hù)目標(biāo)視角下，我們希望充分發(fā)揮激勵(lì)機(jī)制，給予用戶(hù)更多豐富的獎(jiǎng)勵(lì)交互與玩法，持續(xù)獲取收益與滿(mǎn)足感。
1、增益信息前置，助力轉(zhuǎn)化決策
輪播推薦詞：推薦詞輪播的形式來(lái)營(yíng)造場(chǎng)景內(nèi)互動(dòng)氛圍，在一些節(jié)日期間通過(guò)契合節(jié)日的情感化文案，讓內(nèi)容更貼合節(jié)日營(yíng)銷(xiāo)氛圍，同時(shí)將落地頁(yè)中的優(yōu)質(zhì)廣告賣(mài)點(diǎn)、數(shù)據(jù)生成的熱度等多元的營(yíng)銷(xiāo)信息前置，助力用戶(hù)決策。
行動(dòng)號(hào)召詞：不同廣告內(nèi)容之間的轉(zhuǎn)化文案存在差異化的表達(dá)，通過(guò)符合廣告內(nèi)容的決策性文案披露，將固定文案升級(jí)為營(yíng)銷(xiāo)目標(biāo)及類(lèi)型特征文案，輔助轉(zhuǎn)化決策，在容器內(nèi)每一個(gè)元素都應(yīng)該作為廣告創(chuàng)意的一部分。
2、分段獎(jiǎng)勵(lì)計(jì)時(shí)，引導(dǎo)視頻完播
點(diǎn)擊率、轉(zhuǎn)化率隨視頻播放時(shí)長(zhǎng)的數(shù)據(jù)變化，發(fā)現(xiàn)呈現(xiàn)正相關(guān)的趨勢(shì)，我們希望用戶(hù)能夠選擇看完視頻，核心思路是將用戶(hù)從低變現(xiàn)效率場(chǎng)景，引導(dǎo)至高變現(xiàn)效率的場(chǎng)景，由此我們通過(guò)兩段計(jì)時(shí)獎(jiǎng)勵(lì)的設(shè)計(jì)形式，激勵(lì)用戶(hù)可以拿到更多獎(jiǎng)勵(lì)并將視頻看完，考慮多種不同場(chǎng)景以及理解成本的問(wèn)題，最終選用兩段獎(jiǎng)勵(lì)計(jì)時(shí)組件的方式。
3、彩蛋營(yíng)造驚喜，提升轉(zhuǎn)化
為了更好的匹配各大電商平臺(tái)調(diào)起類(lèi)廣告的預(yù)算，大促期間的突然出現(xiàn)的禮物彩蛋為用戶(hù)營(yíng)造節(jié)日驚喜感，在點(diǎn)擊行為后，紅包元素的彈窗與彩帶動(dòng)畫(huà)形式來(lái)承載金幣獎(jiǎng)勵(lì)與氛圍，獎(jiǎng)勵(lì)感知的觸達(dá)能夠提升用戶(hù)的獲得感，同時(shí)在獎(jiǎng)勵(lì)彈窗上進(jìn)一步承載調(diào)起任務(wù)，從而更好的滿(mǎn)足客戶(hù)營(yíng)銷(xiāo)訴求。
4、強(qiáng)化轉(zhuǎn)化組件，增強(qiáng)獎(jiǎng)勵(lì)觸達(dá)
延續(xù)以上驚喜感獎(jiǎng)勵(lì)滿(mǎn)足促轉(zhuǎn)化的思路，針對(duì)下載類(lèi)廣告，我們?cè)谵D(zhuǎn)化組件上進(jìn)行與獎(jiǎng)勵(lì)內(nèi)容的結(jié)合，在任務(wù)計(jì)時(shí)完成但并沒(méi)有形成轉(zhuǎn)化的時(shí)機(jī)下，通過(guò)變色與光效視覺(jué)吸引來(lái)傳遞獎(jiǎng)勵(lì)信息，通過(guò)強(qiáng)化獎(jiǎng)勵(lì)感知和轉(zhuǎn)化組件來(lái)助力轉(zhuǎn)化決策。
寫(xiě)在最后
激勵(lì)視頻廣告至今經(jīng)歷了多個(gè)不同的階段，如何在商業(yè)效果與用戶(hù)感知之間選取一個(gè)平衡點(diǎn)，一直都是激勵(lì)視頻廣告的長(zhǎng)久的設(shè)計(jì)課題，目前也只是一個(gè)開(kāi)始，還有很多的設(shè)計(jì)提轉(zhuǎn)機(jī)會(huì)點(diǎn)等待我們?nèi)ド钔?，相信在不久的將?lái)能夠探索更加多元的激勵(lì)玩法，發(fā)現(xiàn)更多契合用戶(hù)訴求的場(chǎng)景，為更好的價(jià)值生產(chǎn)不斷迭代功能與體驗(yàn)，我們希望能夠給予用戶(hù)、客戶(hù)、平臺(tái)更多的價(jià)值增益，做用戶(hù)喜歡、客戶(hù)滿(mǎn)意、平臺(tái)有利的商業(yè)設(shè)計(jì)。
藍(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)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(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咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
19世紀(jì)末，意大利經(jīng)濟(jì)學(xué)家和工程師維爾弗雷多·帕累托（Vilfredo Pareto）發(fā)現(xiàn)，自家花園中80%的豌豆產(chǎn)自于20%的豌豆莢，在隨后研究土地所有權(quán)和財(cái)富不平等的問(wèn)題中，再次發(fā)現(xiàn)意大利 80%的土地屬于 20%的人。
20世紀(jì)初，由管理學(xué)家約瑟夫·朱蘭（Joseph Juran）將其命名為帕累托法則，即80%的結(jié)果是20%的原因造成的，并且號(hào)召關(guān)注「重要的少數(shù)」而不是在「瑣碎的多數(shù)」當(dāng)中投注精力。后續(xù)在經(jīng)濟(jì)學(xué)中得出結(jié)論（80%的財(cái)富掌握在20%的人手里）更加證實(shí)了帕累托法則的觀點(diǎn)。
帕累托法則有很多不同的叫法，如帕列托法則、關(guān)鍵少數(shù)法則、二八法則、巴萊特定律、最省力的法則、不平衡原則等，后續(xù)筆者將其稱(chēng)為「80/20法則」。
其實(shí)，80/20法則是一個(gè)較為抽象的概念，可以理解為：大部分的效果由少數(shù)幾項(xiàng)關(guān)鍵的因素來(lái)決定。在實(shí)際的場(chǎng)景中，“大部分”不是精確的80%，“幾項(xiàng)關(guān)鍵因素”也不是固定的20%，數(shù)據(jù)會(huì)有所浮動(dòng)，可能是70%+30%或者90%+10%，但不管這些數(shù)字如何波動(dòng)，其背后蘊(yùn)含的規(guī)律（集中的投入將產(chǎn)出大于預(yù)期的結(jié)果）是不變的，并且生活中存在的許多不平衡現(xiàn)象，都與這個(gè)規(guī)律相當(dāng)接近。
80/20法則并不受人為直接控制，更多時(shí)候是自然而然的形成，其適用領(lǐng)域非常廣泛。早期大多數(shù)用于社會(huì)、經(jīng)濟(jì)、管理以及工程等領(lǐng)域，而在80年代末就已經(jīng)有設(shè)計(jì)師將其設(shè)計(jì)領(lǐng)域，在各行各業(yè)中，已經(jīng)有大量的案例證明了 80/20原則：
70年代中期出現(xiàn)圖形化界面，而到80年代末，80/20法則就已經(jīng)被設(shè)計(jì)師引用在設(shè)計(jì)規(guī)范當(dāng)中，后續(xù)經(jīng)過(guò)不斷的發(fā)展及優(yōu)化，現(xiàn)已深入設(shè)計(jì)中的方方面面，PM用來(lái)處理KPI、UX用來(lái)劃分權(quán)重、UI用來(lái)決策版面布局等。
界面設(shè)計(jì)中該如何應(yīng)用80/20法則，這就需要設(shè)計(jì)師時(shí)刻注意如何讓用戶(hù)更快找到目標(biāo)、如何更順暢的完成任務(wù)以及如何擁有更愉悅的心理感受。例如80%的用戶(hù)只會(huì)用到20%的功能，那么設(shè)計(jì)師就應(yīng)該將80%的時(shí)間、精力集中在這20%的功能上，不斷迎合用戶(hù)需求以及使用體驗(yàn)。
80/20法則能夠幫助我們提供決策思路、梳理設(shè)計(jì)方向，通過(guò)前面的了解，我們應(yīng)該清楚了產(chǎn)品80%的用戶(hù)只會(huì)用到20%的功能，而80%的收益也恰恰來(lái)自于20%的付費(fèi)用戶(hù)，甚至低于20%。
雖然一直呼吁盡量滿(mǎn)足所有用戶(hù)，但產(chǎn)品團(tuán)隊(duì)的重心始終要圍繞著20%來(lái)進(jìn)行，從產(chǎn)品到設(shè)計(jì)、再到開(kāi)發(fā)測(cè)試，都能以此為方向制定問(wèn)題的解決方案。
任何一款產(chǎn)品都不能忽略主次，每隔一段時(shí)間就要重新評(píng)估功能價(jià)值，以備后續(xù)的更新迭代，針對(duì)非關(guān)鍵性的80%切勿耗費(fèi)過(guò)多的精力，以免喧賓奪主，不僅得到不好的反饋、還會(huì)帶來(lái)不必要的損失，吃力不討好。
對(duì)于已經(jīng)過(guò)期的核心（曾經(jīng)20%）功能，需要及時(shí)降低權(quán)重以及精力的消耗，不然即便是掌聲一片、也可能無(wú)法變現(xiàn)。
用20%的部分創(chuàng)造80%的價(jià)值，并不意味著只關(guān)注20%的關(guān)鍵性指標(biāo)、其它的就可以被忽略，這樣做表面上看是挺誘人，但會(huì)讓其他很多指標(biāo)停滯，呈現(xiàn)出產(chǎn)品過(guò)度優(yōu)化的情況，造成短時(shí)間內(nèi)隱藏的負(fù)面影響。
團(tuán)隊(duì)?wèi)?yīng)該要有眾覽全局的眼光，考慮到各指標(biāo)間的相互影響，可視情況而定將時(shí)間和精力合理分配，如90%+10%、80%+20%、70%+30%等，只要是將大部分用在關(guān)鍵性指標(biāo)上即可。
在UI設(shè)計(jì)中，我們會(huì)將主要精力花費(fèi)在20%的頁(yè)面設(shè)計(jì)上，例如APP底部標(biāo)簽欄的幾大主頁(yè)或其它重要的一/二級(jí)頁(yè)面，會(huì)花費(fèi)更多的心思去構(gòu)思不一樣的布局、表現(xiàn)手法，將設(shè)計(jì)功底凸顯出來(lái)。而剩下80%的頁(yè)面就相對(duì)機(jī)械化，會(huì)使用一些常規(guī)樣式以及復(fù)用的方式像搭積木一樣快速完成，成本之低、效率之高毋庸置疑。
同一個(gè)頁(yè)面的設(shè)計(jì)方式也是如此，設(shè)計(jì)師將大量心思放在首屏及位置靠上的功能上，待超過(guò)一屏后下滑時(shí)，設(shè)計(jì)也會(huì)逐漸輕量、組件化，這有助于節(jié)省產(chǎn)品、設(shè)計(jì)、開(kāi)發(fā)更多的時(shí)間。
用戶(hù)瀏覽屏幕時(shí)，眼球移動(dòng)的順序通常都是從左到右、從上到下（基于網(wǎng)頁(yè)瀏覽眼動(dòng)測(cè)試），這種移動(dòng)軌跡很像字母「F」，這也讓F型布局成為網(wǎng)頁(yè)設(shè)計(jì)中效率最高的方式之一，所以設(shè)計(jì)師通常會(huì)將重要的信息放在左上角或左側(cè)，不重要的信息放在右側(cè)。
如下面這張眼動(dòng)測(cè)試圖，F(xiàn)型布局也正好詮釋了80/20法則合理性與可行性，在頁(yè)面中20%的關(guān)鍵區(qū)域，吸引了用戶(hù)80%的注意力。
很多產(chǎn)品因?yàn)闃I(yè)務(wù)功能的龐大，一股腦的將信息全部展示出來(lái)，看起來(lái)十分臃腫，用戶(hù)不能快速找到自己想要的信內(nèi)容，就會(huì)失去信心。
優(yōu)酷APP首頁(yè)將熱門(mén)頻道和點(diǎn)擊頻率較高的頻道顯示在頂部導(dǎo)航中，如精選、電視劇、電影、最新院線等，而其他更多的分類(lèi)則隱藏在頻道選項(xiàng)卡中，將少量（≈20%）重要的內(nèi)容放在明顯的位置，目的就是為了讓大部分用戶(hù)更快觸達(dá)，提高了產(chǎn)品的易用性。
在一些選項(xiàng)列表中，由于選項(xiàng)數(shù)量的龐大，會(huì)給用戶(hù)增加使用難度。
例如，使用美團(tuán)購(gòu)買(mǎi)火車(chē)票在選擇地址時(shí)，面對(duì)超長(zhǎng)的地址列表，逐個(gè)查看或通過(guò)字母篩選，都要花費(fèi)一定的時(shí)間和操作成本，即便可以通過(guò)碼字搜索來(lái)完成，但因?yàn)樽孕休斎胗泻芏嗟牟豢煽匦裕茏層脩?hù)選擇的就不要讓其輸入。對(duì)于地址列表，除開(kāi)自動(dòng)定位和搜索歷史，運(yùn)用80/20法則就能很好的解決這一問(wèn)題，系統(tǒng)將約20%高頻選擇的熱門(mén)城市作為單獨(dú)的模塊放在全部列表之前，提高了大部分用戶(hù)的搜索效率。
極簡(jiǎn)風(fēng)格的界面設(shè)計(jì)跟80/20法則在精神上保持著高度的一致，剔除多余、無(wú)用的元素，而保留的每一個(gè)元素都是有目的、有針對(duì)性的，也是絕對(duì)必要的存在。在極簡(jiǎn)主義設(shè)計(jì)中，視覺(jué)上簡(jiǎn)單干凈，大部分都是通過(guò)通過(guò)留白來(lái)襯托關(guān)鍵性元素的存在，讓用戶(hù)更加聚焦于主要功能/信息。
奧卡姆剃刀指出「如無(wú)必要，勿增實(shí)體」，需知頁(yè)面中每多一個(gè)元素都會(huì)增加視覺(jué)“噪聲”，意味著用戶(hù)需要花費(fèi)額外的時(shí)間和理解成本，對(duì)用戶(hù)體驗(yàn)的影響是很大的。那么問(wèn)題來(lái)了，當(dāng)產(chǎn)品需要增加一項(xiàng)需求量小但確實(shí)存在的功能，該怎么處理？
這時(shí)我們可以將奧卡姆剃刀原則作為最終的評(píng)判標(biāo)準(zhǔn)，是否需要增加上述所說(shuō)的功能，就要看看能否很好的控制團(tuán)隊(duì)開(kāi)發(fā)成本和用戶(hù)體驗(yàn)成本。其實(shí)在80/20法則中，很多小眾但確實(shí)存在的功能需求基本很難抵消所造成的用戶(hù)體驗(yàn)損失，所以即便實(shí)現(xiàn)了這個(gè)需求，也很難分配出20%的精力去維護(hù)與迭代，甚至“俺耳盜鈴”般的將其遺忘，但這個(gè)視覺(jué)“噪聲”一直存在，如果事先能分析出這種結(jié)果，這個(gè)需求根本不需要增加。
在2004年長(zhǎng)尾模型才被提出來(lái)的時(shí)候，很多人認(rèn)為這是在顛覆80/20法則，它們的曲線長(zhǎng)得很像，但結(jié)論完全相反，那條長(zhǎng)長(zhǎng)的“尾巴”（非關(guān)鍵的80%）所占據(jù)的長(zhǎng)度幾乎與頭部的（關(guān)鍵的20%）高度相當(dāng)，這說(shuō)明收益雖低，但這么多數(shù)量的累積，依然值得重點(diǎn)關(guān)注。所以有很多企業(yè)在采集差異化戰(zhàn)略時(shí)運(yùn)用了長(zhǎng)尾理論，例如小米搭建的全品類(lèi)商城用的是長(zhǎng)尾理論。
乍一聽(tīng)好像很有道理，難道80/20法則被推翻了嗎？事實(shí)并非如此，長(zhǎng)尾理論的成立必須要滿(mǎn)足兩個(gè)條件，第一是尾巴真的足夠長(zhǎng)（小眾需求確實(shí)非常多），第二長(zhǎng)尾巴能被用戶(hù)發(fā)現(xiàn)（龐大的用戶(hù)量），這兩個(gè)條件缺一不可。例如京東、淘寶、微信、支付寶等，其前提都是建立在大規(guī)模、且海量的用戶(hù)資源之上，不管多么隱蔽、多小的動(dòng)能，總能擁有一些不錯(cuò)的曝光度，所以才能發(fā)揮長(zhǎng)尾模型的作用。
說(shuō)道這里，大家應(yīng)該就明白了，那些中小型的產(chǎn)品對(duì)長(zhǎng)尾模型大多是望塵莫及，所以在你的產(chǎn)品規(guī)模、用戶(hù)量沒(méi)有達(dá)到一定的級(jí)別之前，就不要妄捧長(zhǎng)尾模型，用好80/20法則就好。
80/20法則在實(shí)際工作中是一個(gè)相對(duì)普遍的定律，它能讓我們靈活思考設(shè)計(jì)問(wèn)題，更好的為用戶(hù)服務(wù)，雖然80/20法則也存在一定的爭(zhēng)議，但還是適用于覺(jué)絕大多數(shù)的場(chǎng)景，在關(guān)鍵時(shí)候使用，能幫助我們準(zhǔn)確的找到問(wèn)題點(diǎn)，在有限的時(shí)間和精力下快速作出優(yōu)化決策并、關(guān)注核心功能，最終達(dá)成目標(biāo)。
藍(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)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(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咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
一、項(xiàng)目背景
虛擬形象產(chǎn)品形態(tài)現(xiàn)已逐步成熟，“捏臉+社區(qū)” 的模式逐漸成為年輕人的虛擬社交游樂(lè)場(chǎng)，競(jìng)品Q(chēng)Q、Soul、淘寶等產(chǎn)品先后融入虛擬形象，探索年輕、有趣的社交模式。
貼吧在這一方向上進(jìn)行了創(chuàng)意玩法探索，希望可以通過(guò)特色互動(dòng)形式，拉近與年輕用戶(hù)的關(guān)系，為后續(xù)開(kāi)拓社交場(chǎng)景奠定基礎(chǔ)。
二、視覺(jué)風(fēng)格滿(mǎn)足年輕用戶(hù)喜好
通過(guò)用戶(hù)調(diào)研，了解年輕用戶(hù)喜好個(gè)性十足和精致細(xì)膩的設(shè)計(jì)，同時(shí)希望可以有更多的搭配空間，我們針對(duì)設(shè)計(jì)成本與用戶(hù)喜好，建立十字坐標(biāo)軸篩選設(shè)計(jì)方向，匹配不同用戶(hù)，帶來(lái)差異化感知。
1、潮流、漫畫(huà)雙風(fēng)格設(shè)定，滿(mǎn)足用戶(hù)自我表達(dá)
潮流風(fēng)格具備年輕時(shí)髦感，漫畫(huà)風(fēng)格質(zhì)感更細(xì)膩，打造出產(chǎn)品的精致度，雙風(fēng)格設(shè)計(jì)可以最大程度滿(mǎn)足用戶(hù)的多元自我表達(dá)需求。
2、形象工程量產(chǎn)，滿(mǎn)足搭配的豐富度
為了達(dá)到玩法多變的目標(biāo)，我們對(duì)形象進(jìn)行工程化文件拆分，以發(fā)型區(qū)為例，通過(guò)層層分區(qū)來(lái)實(shí)現(xiàn)顏色、素材的靈活搭配。
拆分不同的發(fā)片，與身體、面部相互穿插，可以搭配出不同發(fā)型，對(duì)底色、陰影、描邊的拆分，實(shí)現(xiàn)代碼著色改變發(fā)色，每個(gè)形象完成36層拆解，達(dá)到顏色、素材的多元展現(xiàn)。
漫畫(huà)風(fēng)格，在表現(xiàn)上相比潮流風(fēng)格更加細(xì)膩，采用同樣的裸模坐標(biāo)與拆分標(biāo)準(zhǔn)，實(shí)現(xiàn)雙風(fēng)格靈活搭配。
針對(duì)兩種風(fēng)格我們批量化產(chǎn)出了服飾、發(fā)型、配飾、五官等標(biāo)準(zhǔn)化素材，實(shí)現(xiàn)全部素材多變量靈活搭配，形象設(shè)計(jì)從軟萌可愛(ài)到年輕潮流，貼合了年輕用戶(hù)的多重喜好，為了提升與研發(fā)的對(duì)接效率，同步制定了工程文件產(chǎn)出規(guī)范，通過(guò)對(duì)坐標(biāo)軸、熱區(qū)的定位，圖層規(guī)范化的命名，實(shí)現(xiàn)所有素材快速開(kāi)發(fā)上線，降低產(chǎn)研溝通走查成本。
三、創(chuàng)新交互玩法增加可玩性
1、點(diǎn)選切換展示區(qū)讓創(chuàng)作更便捷
從0-1搭建基礎(chǔ)框架，為了降低學(xué)習(xí)操作成本，讓用戶(hù)可以快速上手，框架采用上部展示區(qū)、下部選擇區(qū)的形象制定產(chǎn)品通用布局。
在交互形態(tài)上，我們進(jìn)行了創(chuàng)意玩法創(chuàng)新，新增點(diǎn)選切換形式提升便捷度，用戶(hù)能通過(guò)點(diǎn)選展示區(qū)當(dāng)前部位快速定位操作，簡(jiǎn)化使用，縮短裝扮時(shí)長(zhǎng)。
2、靈活手勢(shì)創(chuàng)新實(shí)現(xiàn)玩法多變
針對(duì)貼吧用戶(hù)腦洞大開(kāi)、鬼馬個(gè)性的特點(diǎn)，提供靈活操作，提升形象創(chuàng)意度，以下圖為例，可以看到眼睛、嘴巴等元素通過(guò)用戶(hù)的旋轉(zhuǎn)、縮放、位移等操作產(chǎn)生了很多鬼畜搞笑的形象，更有阿凡達(dá)、小岳岳、一眼丁真等形象加持，趣味十足。
3、豐富表態(tài)吸引用戶(hù)快速參與
通過(guò)動(dòng)態(tài)輕互表情帶來(lái)驚喜感，同時(shí)增加長(zhǎng)按觸發(fā)連擊效果，提升用戶(hù)互動(dòng)爽感，狀態(tài)表達(dá)幫助用戶(hù)快速選擇當(dāng)時(shí)狀態(tài)，更低成本參與自我表達(dá)。
四、強(qiáng)化感知多場(chǎng)景觸達(dá)虛擬形象
為了讓貼吧用戶(hù)快速玩起來(lái)，提升用戶(hù)滲透，我們?cè)谫N吧全場(chǎng)景進(jìn)行傳播。
1、串聯(lián)核心場(chǎng)景實(shí)現(xiàn)用商聯(lián)動(dòng)變現(xiàn)
串聯(lián)端內(nèi)成長(zhǎng)體系這一核心任務(wù)，打通多場(chǎng)景閉環(huán)，形象設(shè)定之后，在首頁(yè)、圖文詳情頁(yè)、個(gè)人主頁(yè)等核心場(chǎng)景展示個(gè)人形象，形成全場(chǎng)景滲透，有效擴(kuò)大虛擬形象在端內(nèi)的傳播。
高定裝扮聯(lián)通會(huì)員權(quán)益與成長(zhǎng)值，通過(guò)漲、兌、買(mǎi)路徑，實(shí)現(xiàn)會(huì)員權(quán)益激勵(lì)、成長(zhǎng)體系、形象變現(xiàn)的三方激勵(lì)串聯(lián)。
采用細(xì)膩手繪技法為對(duì)魔域游繪制精品形象，吸引游戲深度用戶(hù)完成形象裝扮，同時(shí)實(shí)現(xiàn)設(shè)計(jì)變現(xiàn)。
2、建立分享回流機(jī)制實(shí)現(xiàn)社區(qū)裂變
通過(guò)端外引流和影響力擴(kuò)散，吸引用戶(hù)產(chǎn)生回流，增加用戶(hù)粘性，持續(xù)增加用戶(hù)量。
五、結(jié)語(yǔ)
以上就是虛擬形象設(shè)計(jì)在整個(gè)創(chuàng)新玩法探索中的思路與舉措。
回顧設(shè)計(jì)過(guò)程，我們探索了更加貼切用戶(hù)的快捷交互體驗(yàn)，提升操控效率、縮減觸發(fā)路徑；我們緊跟設(shè)計(jì)趨勢(shì)，時(shí)刻關(guān)注年輕用戶(hù)需求，通過(guò)多風(fēng)格、工程化、輕互動(dòng)等手段，打造年輕化產(chǎn)品；我們通過(guò)與貼吧核心場(chǎng)景串聯(lián)融合，給老產(chǎn)品帶來(lái)全新社區(qū)體驗(yàn)。
虛擬形象上線后滲透率持續(xù)增長(zhǎng)到15%，用戶(hù)累積佩戴數(shù)達(dá)百萬(wàn)級(jí)別，效果超預(yù)期，吧友們?cè)谔摂M形象吧里進(jìn)行深入的評(píng)價(jià)與討論。定制出了高顏值、個(gè)性化、輕幽默等不同風(fēng)格的形象。
最后也期待廣大吧友們可以通過(guò)對(duì)貼吧虛擬形象的關(guān)注和喜愛(ài)來(lái)到貼吧，在我們的特色平臺(tái)定制出獨(dú)一無(wú)二的自己。
未來(lái)我們也將不斷探索、創(chuàng)新更多年輕化創(chuàng)意玩法，讓貼吧成為用戶(hù)喜愛(ài)具有歸屬感的繁榮社區(qū)。
藍(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)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(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咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
藍(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)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(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咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
“系統(tǒng)應(yīng)該在合理的時(shí)間內(nèi)通過(guò)適當(dāng)?shù)姆答?，始終讓用戶(hù)了解正在發(fā)生的事情” --尼爾森。
用戶(hù)都希望產(chǎn)品是可控的、狀態(tài)是可預(yù)測(cè)的，所以無(wú)論用戶(hù)在界面上做了什么，系統(tǒng)應(yīng)該在合適的時(shí)間給予合理的反饋，始終保持界面的狀態(tài)可見(jiàn)、變化可見(jiàn)、內(nèi)容可見(jiàn)，讓用戶(hù)對(duì)已經(jīng)發(fā)生的、正在進(jìn)行的、以及后續(xù)走向都有所了解，以避免在后續(xù)的轉(zhuǎn)化決策中出現(xiàn)錯(cuò)誤。
界面不僅僅是為了把信息呈現(xiàn)給用戶(hù)，還需要引導(dǎo)用戶(hù)來(lái)操作，讓用戶(hù)清楚的知道當(dāng)前在什么位置，以及操作時(shí)最想要知道的信息。
例如，訂單頁(yè)頂部的導(dǎo)航分欄，不僅將字體加大加粗、色彩加深，還添加了主題色的形狀，為的就是強(qiáng)化用戶(hù)當(dāng)前所在位置。購(gòu)買(mǎi)產(chǎn)品VIP時(shí)，按鈕中會(huì)顯示金額，也是為了讓用戶(hù)的視線停留在CTA按鈕上，避免用戶(hù)想要查看價(jià)格時(shí)將視線從CTA按鈕上移開(kāi)。
對(duì)于同一操作，系統(tǒng)需要搭配不同的時(shí)間場(chǎng)景給予不同的反饋，確保反饋的及時(shí)性，避免讓用戶(hù)產(chǎn)生焦慮或不安。例如在跳轉(zhuǎn)頁(yè)面時(shí)，即時(shí)跳轉(zhuǎn)，用戶(hù)通?？床坏饺魏翁D(zhuǎn)中的狀態(tài)，時(shí)間稍長(zhǎng)會(huì)看到加載動(dòng)效，若長(zhǎng)時(shí)間沒(méi)有響應(yīng)，則會(huì)提示其他問(wèn)題，如網(wǎng)絡(luò)問(wèn)題、跳轉(zhuǎn)失敗等。
用戶(hù)需要清晰感知到已經(jīng)發(fā)生、正在發(fā)生以及即將發(fā)生的事情，以便于他們進(jìn)行下一步?jīng)Q策。每當(dāng)用戶(hù)進(jìn)行交互后，系統(tǒng)應(yīng)將當(dāng)前狀態(tài)、位置、進(jìn)度以及操作結(jié)果適當(dāng)?shù)姆答伣o用戶(hù)，以減少不確定性。如果用戶(hù)存在失誤，更應(yīng)加以正確方向上的引導(dǎo)，避免用戶(hù)產(chǎn)生疑惑或重復(fù)操作。
例如在電商應(yīng)用中，將商品收藏、添加到購(gòu)物車(chē)等，這種操作行為不會(huì)造成任何損失，系統(tǒng)在反饋時(shí)盡量不要打斷用戶(hù)，使用類(lèi)似toast簡(jiǎn)短彈窗提示即可。但對(duì)于金額支付、內(nèi)容刪除等，會(huì)涉及用戶(hù)利益或安全方面的操作，就需要通過(guò)彈窗打斷用戶(hù)當(dāng)前操作，讓其二次確認(rèn)后再作決策，以減少不必要的損失。
“系統(tǒng)應(yīng)該說(shuō)用戶(hù)的語(yǔ)言，用戶(hù)熟悉的單詞，短語(yǔ)和概念，而不是系統(tǒng)導(dǎo)向的術(shù)語(yǔ)。遵循現(xiàn)實(shí)世界的約定，使信息以自然和合乎邏輯的順序出現(xiàn)”--尼爾森。
設(shè)計(jì)師需要站在用戶(hù)的角度去做設(shè)計(jì)，但并不能就此代表用戶(hù)，不要將自己對(duì)產(chǎn)品的理解、行業(yè)中的專(zhuān)業(yè)術(shù)語(yǔ)代入用戶(hù)場(chǎng)景中，因?yàn)橛脩?hù)的認(rèn)知大多來(lái)源于多周?chē)h(huán)境的感知，我們需要使用最貼近目標(biāo)用戶(hù)群體生活場(chǎng)景的表達(dá)方式，讓信息表現(xiàn)的自然，用戶(hù)能更容易理解。
對(duì)于環(huán)境貼切原則，直接點(diǎn)就是“說(shuō)人話”，蘋(píng)果之父「喬布斯」和微信之父「張小龍」的產(chǎn)品核心理念便是如此，用最簡(jiǎn)單直白的語(yǔ)言、用戶(hù)最熟悉的概念呈現(xiàn)信息，盡量貼近真實(shí)的世界，將產(chǎn)品做到傻瓜也能操作，才能保證與用戶(hù)溝通交流的順暢。
產(chǎn)品的設(shè)計(jì)語(yǔ)言需要針對(duì)不同的用戶(hù)群體以及不同的使用習(xí)慣，使用該群體所熟知的文字、圖形、版式、配色以及設(shè)計(jì)風(fēng)格等，讓用戶(hù)覺(jué)得這個(gè)產(chǎn)品能解決自己的問(wèn)題，不會(huì)有認(rèn)知上的困難。
從大了講，例如微信的標(biāo)準(zhǔn)模式符合大多數(shù)常規(guī)用戶(hù)的操作，但又另外設(shè)計(jì)了一套關(guān)懷模式，將文字、按鈕變的更大，色彩變的更強(qiáng)，這就是為老年人的視覺(jué)障礙而準(zhǔn)備的一套解決方案。還可以開(kāi)啟聽(tīng)文字消息，在會(huì)話框中只要點(diǎn)擊一下文字消息，系統(tǒng)就可以直接閱讀，將信息的傳達(dá)從視覺(jué)轉(zhuǎn)移至聽(tīng)覺(jué)，更大程度的解決了視覺(jué)障礙問(wèn)題。其實(shí)，不管是微信的標(biāo)準(zhǔn)模式、關(guān)懷模式，還是其他的鄉(xiāng)村模式、青少年模式、大學(xué)生模式等，都是為了迎合不同的用戶(hù)群體。
將范圍縮小至產(chǎn)品的某個(gè)功能，如高德地圖視覺(jué)障礙模式（色盲/色弱用戶(hù)的專(zhuān)屬配色）、首頁(yè)設(shè)置（搜索框位置的調(diào)整）等也是為了滿(mǎn)足不同用戶(hù)群體或同一用戶(hù)群體的不同使用習(xí)慣而設(shè)計(jì)。
將現(xiàn)實(shí)世界中的物體映射至產(chǎn)品設(shè)計(jì)中，能讓用戶(hù)通過(guò)對(duì)現(xiàn)實(shí)環(huán)境的認(rèn)知感受到產(chǎn)品的真實(shí)易懂，很大程度上降低了學(xué)習(xí)成本，幫助用戶(hù)更快的理解并輕松掌握其使用方式。模擬現(xiàn)實(shí)世界的物體并不僅僅局限其外形，對(duì)于其動(dòng)態(tài)效果、聲音以及其他屬性特征等都可以加以融合，打造更真實(shí)的用戶(hù)體驗(yàn)。
iOS系統(tǒng)早期的桌面圖標(biāo)就是如此，即便后來(lái)逐漸過(guò)渡到扁平化，但很多地方依然保留了擬物化的設(shè)計(jì)，如同步變化的動(dòng)態(tài)時(shí)鐘表盤(pán)、接近于物品外觀的相機(jī)、計(jì)算器圖標(biāo)等。網(wǎng)易云音樂(lè)播放頁(yè)面中，復(fù)古的黑膠唱片，不僅模仿了早期的留聲機(jī)，還融入的懷舊情感，與其他同類(lèi)產(chǎn)品的差異性也即刻凸顯。
產(chǎn)品不僅可以使用人們對(duì)真實(shí)物體的視覺(jué)感知，還可以利用文化觀念進(jìn)行隱喻。
例如，紅色意味著危險(xiǎn)、禁止，綠色則代表安全、通過(guò)，而產(chǎn)品中的審核結(jié)果就可以用顏色醒目的圖標(biāo)強(qiáng)化提示，紅色表示審核未通過(guò)、綠色表示審核通過(guò)。另外在現(xiàn)實(shí)生活中，“+、-”符號(hào)代表增加和減少，對(duì)于互聯(lián)網(wǎng)產(chǎn)品，同樣可以使用“+、-”來(lái)表示內(nèi)容的增加與減少，常見(jiàn)的有購(gòu)買(mǎi)商品數(shù)量調(diào)整、自定義內(nèi)容布局等。
“用戶(hù)通常會(huì)錯(cuò)誤地選擇了系統(tǒng)的某個(gè)功能，并且需要一個(gè)明確標(biāo)記的「緊急出口」來(lái)離開(kāi)不想要的狀態(tài)，而不必進(jìn)行擴(kuò)展對(duì)話。支持撤消和重做”--尼爾森。
用戶(hù)需要擁有控制系統(tǒng)和來(lái)去自由的權(quán)利，且產(chǎn)品要在用戶(hù)可能犯錯(cuò)誤之前及時(shí)警示并給予正確的引導(dǎo)，但總有些特殊場(chǎng)景，用戶(hù)發(fā)生主觀上的失誤不可避免，為了不讓用戶(hù)進(jìn)入到錯(cuò)誤的場(chǎng)景，這時(shí)系統(tǒng)應(yīng)該提供一個(gè)“緊急出口”，便于用戶(hù)撤銷(xiāo)和重做。
在使用產(chǎn)品的過(guò)程中，系統(tǒng)檢測(cè)到用戶(hù)有可能出現(xiàn)操作失誤的情況，應(yīng)給予明確的提示和指引，關(guān)閉/返回就是最為常見(jiàn)的“緊急出口”，即便大部分用戶(hù)知道向右側(cè)滑返回，但“緊急出口”依然要明確顯示。
另外，在刪除某些信息時(shí)，系統(tǒng)給予的確認(rèn)彈窗也是為了減少用戶(hù)操作失誤，以免造成不必要的損失。
用戶(hù)的失誤行為已不可避免的發(fā)生，應(yīng)當(dāng)提供撤銷(xiāo)、取消或重做等相關(guān)功能。
在社交類(lèi)應(yīng)用中，短時(shí)間內(nèi)發(fā)出的消息可撤回重新編輯，便是給了用戶(hù)可以反悔的權(quán)利，辦公類(lèi)產(chǎn)品中的回收站亦是如此。
“不應(yīng)該讓用戶(hù)懷疑不同的話語(yǔ)、場(chǎng)景或行為是否在表達(dá)同樣的一件事情。系統(tǒng)設(shè)計(jì)需遵循平臺(tái)慣例，保持一致性”--尼爾森。
對(duì)用戶(hù)來(lái)說(shuō)，同一產(chǎn)品需要統(tǒng)一的設(shè)計(jì)規(guī)范，其視覺(jué)樣式、交互形式都應(yīng)該遵循基本的用戶(hù)習(xí)慣，保持功能、操作的一致性為確保用戶(hù)對(duì)界面的學(xué)習(xí)使用至關(guān)重要。
設(shè)計(jì)規(guī)范就是為保持產(chǎn)品內(nèi)部的一致性而生，不管是色彩間距、還是組件模塊，保持一致性不僅能讓用戶(hù)感覺(jué)使用的是同一個(gè)產(chǎn)品，還有助于品牌傳播，給用戶(hù)留下一定的印象。
對(duì)于業(yè)務(wù)非常復(fù)雜的大型產(chǎn)品，雖然各元素組件樣式繁多，但會(huì)從視覺(jué)風(fēng)格和交互形式上來(lái)確保產(chǎn)品的一致性，這都可以減少用戶(hù)的思考負(fù)擔(dān)和學(xué)習(xí)成本。
雖然很多產(chǎn)品都在呼吁創(chuàng)新、去同質(zhì)化，但差異化較大的設(shè)計(jì)雖然達(dá)到了去同質(zhì)化的目的，卻給用戶(hù)增加了更多的學(xué)習(xí)及思考成本。這里意思請(qǐng)大家不要誤解，并不是說(shuō)不去創(chuàng)新，而是除非你的產(chǎn)品有足夠的影響力，對(duì)于較大的變動(dòng)，企業(yè)能承擔(dān)起試錯(cuò)成本、以及增加了額外學(xué)習(xí)成本可能造成的用戶(hù)流失，否則只能進(jìn)行一些小的改動(dòng)，循序漸進(jìn)的跟隨主流。
對(duì)于同類(lèi)型的產(chǎn)品，我們依然需要參考競(jìng)品的一些設(shè)計(jì)形式，如下圖是音樂(lè)APP的播放頁(yè)面，其主要功能的優(yōu)先級(jí)排列、頁(yè)面布局基本相同，即便是創(chuàng)新也是從設(shè)計(jì)風(fēng)格、氛圍以及微動(dòng)效等方面做出差異化。
先舉個(gè)例子，之前有不少產(chǎn)品引用費(fèi)茨定律“任意一點(diǎn)移動(dòng)到目標(biāo)中位置距離越短，所花費(fèi)的時(shí)間就越少”這一原則，于是將左上角的返回按鈕搬到了左下角（側(cè)滑返回操作沒(méi)有影響），沒(méi)錯(cuò)，對(duì)于現(xiàn)在的大屏手機(jī)來(lái)說(shuō)，返回效率確實(shí)提升了，但卻違背了用戶(hù)的使用習(xí)慣，增加了誤操作的可能性。
返回按鈕放置左上角，與絕大多數(shù)產(chǎn)品保持一致的使用習(xí)慣，這意味著用戶(hù)只需付出更少的學(xué)習(xí)成本甚至無(wú)需學(xué)習(xí)即可快速上手。
“系統(tǒng)要么消除容易出錯(cuò)的情況，要么檢查它們，并在用戶(hù)采取行動(dòng)之前向用戶(hù)提供確認(rèn)選項(xiàng)”--尼爾森。
用戶(hù)的很多操作都是比較隨意、無(wú)意識(shí)性的，也因此造成了一些不可挽回的錯(cuò)誤。系統(tǒng)應(yīng)該在用戶(hù)出錯(cuò)之前采取一定的措施，這并沒(méi)有多么復(fù)雜，或許只是一個(gè)走心的設(shè)計(jì)，如使用引導(dǎo)用戶(hù)、溫馨提示、有效控制等方式以減少錯(cuò)誤的發(fā)生。
主動(dòng)引導(dǎo)的目的就是為了給用戶(hù)提供明確的路徑，減少錯(cuò)誤操作。很多APP首次下載或更新迭代之后就會(huì)提供新手引導(dǎo)，還有表單的占位符提供的格式規(guī)范、內(nèi)容描述也是如此。
在用戶(hù)操作時(shí)，系統(tǒng)對(duì)用戶(hù)錄入的已有信息進(jìn)行預(yù)判并提供相匹配的內(nèi)容讓用戶(hù)選擇，也是一種常用的防錯(cuò)方式。如搜索聯(lián)想詞、商品錯(cuò)誤文字自動(dòng)修正等。
對(duì)于一些較為敏感、可能存在危險(xiǎn)或不可逆轉(zhuǎn)的操作時(shí)，系統(tǒng)需要提供二次確認(rèn)引起用戶(hù)注意，以起到警示作用。例如注銷(xiāo)賬號(hào)、刪除某些內(nèi)容或中途退出流程，都會(huì)有彈窗提醒用戶(hù)，避免誤操作帶來(lái)不必要的損失。
從表面來(lái)看，限制用戶(hù)似乎并不友好，但為了避免用戶(hù)錯(cuò)誤理解，利用明確的限制阻止用戶(hù)犯錯(cuò)也是一個(gè)不錯(cuò)的選擇。例如無(wú)效內(nèi)容置灰、未達(dá)到操作條件的限制，都能很好的防止用戶(hù)無(wú)效操作。
筆者曾使用過(guò)一個(gè)產(chǎn)品，在選擇出生年齡時(shí)，往前的年份能滑到清朝時(shí)期（一百多歲玩不動(dòng)智能手機(jī)了），往后面能滑到今年之后的幾十年（我還沒(méi)出生呢），這并不是在質(zhì)疑設(shè)計(jì)的合理性，而是無(wú)效或過(guò)于冷門(mén)的選項(xiàng)越多，用戶(hù)可能會(huì)有選擇性困難「綜合癥」、也可能會(huì)提高隨意性以及選擇錯(cuò)誤的幾率，這對(duì)后期用戶(hù)數(shù)據(jù)分析的精準(zhǔn)度有很大影響。
適當(dāng)?shù)南拗撇僮鞣秶瑢?duì)產(chǎn)品來(lái)說(shuō)也是一個(gè)很好的防錯(cuò)策略。例如：美團(tuán)定酒店的日歷限制在半年以?xún)?nèi)、在手機(jī)號(hào)碼表項(xiàng)中限制輸入11位數(shù)字等，都可以降低用戶(hù)出錯(cuò)的概率。
對(duì)于隨意性較強(qiáng)的用戶(hù)，通常都是「做多錯(cuò)多」，所以在部分場(chǎng)景下，如果對(duì)用戶(hù)的操作需求明確可控，可根據(jù)實(shí)際場(chǎng)景提供符合目標(biāo)的默認(rèn)值，以減少用戶(hù)操作成本。
添加銀行卡時(shí)，輸入卡號(hào)后會(huì)自動(dòng)匹配對(duì)應(yīng)的銀行、購(gòu)物下單時(shí)系統(tǒng)也會(huì)自動(dòng)選擇一個(gè)默認(rèn)收貨地址，這些默認(rèn)值的存在都或多或少的減少了用戶(hù)操作步驟，即便不是用戶(hù)所需，也不會(huì)造成什么負(fù)擔(dān)，這本該就是用戶(hù)完成任務(wù)的必要流程。
在數(shù)字信息輸入場(chǎng)景中，可以利用一些特定格式，不僅能減少出錯(cuò)，還能有效避免將錯(cuò)誤信息帶入下一步流程。
例如，輸入手機(jī)號(hào)、銀行卡號(hào)、身份證號(hào)等，可以將幾個(gè)數(shù)字分為一組，以此類(lèi)推，這樣更有利于用戶(hù)自查。
“通過(guò)使用對(duì)象、動(dòng)作和選項(xiàng)的可視化表達(dá)，最大限度地減輕用戶(hù)的記憶負(fù)擔(dān)”--尼爾森。
在產(chǎn)品設(shè)計(jì)的時(shí)候，需保證組件、按鈕以及選項(xiàng)的可見(jiàn)性，用戶(hù)不需要去動(dòng)腦筋，產(chǎn)品應(yīng)該把用戶(hù)當(dāng)傻瓜對(duì)待，盡可協(xié)助其記憶。在特殊情況下，用戶(hù)離開(kāi)當(dāng)前頁(yè)面，產(chǎn)品可提供關(guān)鍵信息讓其確認(rèn)，而不是讓用戶(hù)去回憶，徒增記憶負(fù)荷。
產(chǎn)品能做決定的就不要讓用戶(hù)去選擇、能讓用戶(hù)選擇的就不要讓他們自己輸入。其實(shí)選擇和輸入的操作成本相差巨大，很多用戶(hù)都不愿意在輸入上面花費(fèi)過(guò)多時(shí)間。
問(wèn)個(gè)比較現(xiàn)實(shí)的問(wèn)題，如果你申請(qǐng)信用卡的意愿不是很明確、在辦與不辦之間猶豫徘徊時(shí)，有多少人是被幾頁(yè)超長(zhǎng)表單勸退的？需要用戶(hù)提供的信息我們無(wú)權(quán)刪減，但可以利用設(shè)計(jì)手段降低操作成本，如果將部分輸入框變成選擇框，讓任務(wù)變的更容易完成，用戶(hù)的抵觸心理自然也會(huì)降低。例如：微信添加銀行卡時(shí)，手機(jī)號(hào)、銀行卡號(hào)都能從相應(yīng)的接口獲取，減少了很多操作。
與其讓用戶(hù)逐步完成任務(wù)，不如讓用戶(hù)只進(jìn)行一步簡(jiǎn)單操作，產(chǎn)品就智能化的將信息提取出來(lái)、自動(dòng)拆分并送到用戶(hù)手中，不僅節(jié)省了大量的交互步驟和瀏覽時(shí)間，也降低了用戶(hù)因自行輸入信息可能出錯(cuò)而帶來(lái)的不可控感，大大提高了產(chǎn)品的易用性。
新建收貨地址時(shí)，將地址信息粘貼至輸入框，產(chǎn)品即可自動(dòng)拆分省/市/區(qū)、詳細(xì)地址及個(gè)人信息；綁定信用卡時(shí)，只需掃描卡片就能自動(dòng)提取卡號(hào)、開(kāi)戶(hù)行、有效期等信息。
特別是一些隱藏的交互操作，一定要使用用戶(hù)最熟悉的方式，避免浪費(fèi)時(shí)間去回憶或手動(dòng)試錯(cuò)，要保證用戶(hù)在最短的時(shí)間內(nèi)有效識(shí)別、理解。
例如，左滑列表中的某個(gè)內(nèi)容可進(jìn)行刪除操作、屏幕邊緣右滑返回上一頁(yè)、雙擊短視頻點(diǎn)贊等。
眾所周知，文字表意明確，也是最能讓用戶(hù)理解的方式，不過(guò)它的信息傳達(dá)效率遠(yuǎn)遠(yuǎn)不如圖形，所以在眾多UI設(shè)計(jì)中，有圖標(biāo)的出現(xiàn)，就會(huì)搶占信息組中的主視覺(jué)，但這并不代表可以完全替代文字，很多時(shí)候，我們應(yīng)該讓文字成為輔助的存在，以加深用戶(hù)的理解。圖標(biāo)+文字組合表意更加明確，能迎合更廣泛的用戶(hù)群體，避免少數(shù)用戶(hù)產(chǎn)生疑惑。
這里要說(shuō)明一點(diǎn)，圖標(biāo)并非不能單獨(dú)出現(xiàn)，而是要慎用。就如搜索圖標(biāo)，全球99%都在用這個(gè)放大鏡造型，無(wú)可厚非。花瓣APP底部標(biāo)簽欄也使用了純圖標(biāo)形式，因?yàn)樗鎸?duì)的用戶(hù)絕大多數(shù)都是設(shè)計(jì)師，而設(shè)計(jì)師對(duì)圖標(biāo)的識(shí)別和理解自然沒(méi)什么難度。
針對(duì)一些需要用戶(hù)記住或?qū)τ脩?hù)來(lái)說(shuō)較為重要的信息，即便已進(jìn)入下一步流程，產(chǎn)品有必要二次呈現(xiàn)用給用戶(hù)確認(rèn)，避免用戶(hù)回憶（想不起來(lái)就會(huì)離開(kāi)）。
在購(gòu)物下單頁(yè)面，會(huì)提供商品的關(guān)鍵信息給用戶(hù)確認(rèn)；部分產(chǎn)品的表單任務(wù)完成后，點(diǎn)擊提交，也會(huì)彈出之前輸入的內(nèi)容給用戶(hù)自查。
系統(tǒng)應(yīng)該提供用戶(hù)最近的訪問(wèn)項(xiàng)，幫助他們提供未完成或想要重復(fù)完成的任務(wù)，即便是跨系統(tǒng)、設(shè)備，再次使用也不用來(lái)回調(diào)整，歷史記錄功能便是這個(gè)需求的最佳體現(xiàn)。
例如騰訊視頻的觀看歷史模塊，按照時(shí)間排序，提供了看過(guò)的內(nèi)容以及進(jìn)度，點(diǎn)進(jìn)去之后會(huì)從上次退出時(shí)的位置節(jié)點(diǎn)接著播放，視頻、音樂(lè)、閱讀類(lèi)應(yīng)用都是如此。
“好的產(chǎn)品需要同時(shí)兼顧新用戶(hù)和資深用戶(hù)的需求，對(duì)新用戶(hù)來(lái)說(shuō)，需要功能明確、清晰，對(duì)于老用戶(hù)需要快捷高效使用高頻功能。不可迎合某一種用戶(hù)，把不必要的信息占據(jù)重要部分”--尼爾森。
靈活高效原則旨在滿(mǎn)足多樣化的使用群體，通過(guò)對(duì)他們的使用場(chǎng)景、任務(wù)流程進(jìn)行深挖，讓其在最短的路徑以最快的速度完成目標(biāo)需求。
系統(tǒng)要同時(shí)照顧新老用戶(hù)的使用體驗(yàn)，對(duì)于新手用戶(hù)，要盡量降低學(xué)習(xí)成本，能讓其快速上手是留住他們的必要手段。而對(duì)老用戶(hù)來(lái)說(shuō)，對(duì)產(chǎn)品的信任度有一定的基礎(chǔ)，能快捷高效、心情愉悅的使用至關(guān)重要。
沒(méi)有什么能比提供快捷操作更能節(jié)省時(shí)間成本了，但凡使用過(guò)手機(jī)、電腦辦公的用戶(hù)都用該知道Ctrl+C、Ctrl+V、Ctrl+S這三組合的神奇之處，提升的效率真的不是一星半點(diǎn)兒。
在UI設(shè)計(jì)中，很多快捷的入口、操作方式都相對(duì)降低了用戶(hù)使用門(mén)檻，例如快捷登錄（QQ、微信、手機(jī)號(hào)一鍵登錄）減少操作步驟，節(jié)省用戶(hù)很多時(shí)間；另外，在一些產(chǎn)品截圖后就會(huì)彈出分享、反饋入口，這也是通過(guò)行為預(yù)判為用戶(hù)提供便捷操作的體現(xiàn)。
一些頻繁使用的功能，可在不同的頁(yè)面重復(fù)顯示，當(dāng)用戶(hù)有使用需求時(shí)，能隨時(shí)通過(guò)就近的操作入口進(jìn)入。微信的掃一掃在會(huì)話列表、通訊錄、個(gè)人信息等頁(yè)面都有操作入口，非常方便；支付寶首頁(yè)的花唄、借唄、芝麻信用等功能在我的頁(yè)面幾乎都重復(fù)了一遍，觸手可及，對(duì)產(chǎn)品轉(zhuǎn)化也有很大的幫助。
「功能自定義」意味著用戶(hù)可以對(duì)自己常用或喜歡的功能進(jìn)行隨意排列、增減，兼顧了不同用戶(hù)對(duì)不同功能的使用需求，提高產(chǎn)品的靈活性。
支付寶讓用戶(hù)根據(jù)自己的喜好選擇13個(gè)常用功能放在首頁(yè)，操作起來(lái)更加方便，滿(mǎn)足了用戶(hù)的自定義需求。網(wǎng)易云音樂(lè)則更個(gè)性化，不僅能對(duì)功能模塊、底部導(dǎo)航自定義，系統(tǒng)還提供了3種不同的版式風(fēng)格，對(duì)于這種靈活的調(diào)整，不管是“蘿卜”還是“青菜”，總有一款是你的最?lèi)?ài)。
提供默認(rèn)選項(xiàng)上述有提到過(guò)，通過(guò)減少多余操作，不僅對(duì)防止用戶(hù)出錯(cuò)有極大的幫助，對(duì)于提升任務(wù)完成效率也尤為明顯。
不同的用戶(hù)就有不同的需求、不同的喜好、不同的使用習(xí)慣，產(chǎn)品需要做到千人千面，以最大化的程度滿(mǎn)足多種用戶(hù)群體。
這種類(lèi)似的案例非常之多，且不說(shuō)各大電商通過(guò)背后隱藏的算法為各種用戶(hù)匹配不同的內(nèi)容，就說(shuō)明面上能看到的如關(guān)愛(ài)模式、鄉(xiāng)村模式、青少年模式等，還有高德地圖搜索框上/下位置調(diào)整、京東商品頁(yè)的宮格樣式/列表樣式等，都在為滿(mǎn)足絕大多數(shù)的用戶(hù)的使用需求而付出了最大努力。
“不要包含不相關(guān)或低頻次的信息/操作。頁(yè)面中的每個(gè)額外信息都會(huì)降低主要內(nèi)容的相對(duì)可見(jiàn)性”--尼爾森。
在設(shè)計(jì)頁(yè)面時(shí)，需要注意信噪比（有效信息與無(wú)效信息的比例），處理好信息層級(jí)，方便用戶(hù)能快速捕捉到自己想要知道、或產(chǎn)品想讓用戶(hù)知道的信息。因?yàn)橛脩?hù)的注意力有限，任何低頻次或不相關(guān)的信息都將成為視覺(jué)“噪音”，導(dǎo)致原本重要的信息被用戶(hù)忽略。
不管是模塊與模塊之間、還是單個(gè)模塊內(nèi)的各個(gè)類(lèi)容，都有其一定的等級(jí)權(quán)重，劃分好信息層級(jí)能集中用戶(hù)注意力，更好的引導(dǎo)用戶(hù)操作，避免用戶(hù)分不清重點(diǎn)而徒增使用成本。需知什么內(nèi)容都想突出，其結(jié)果必定是什么也突出不了。
產(chǎn)品的視覺(jué)效果需要和諧統(tǒng)一，富有設(shè)計(jì)感、獨(dú)具一格的效果能給人眼前一亮個(gè)感覺(jué)。這就是為什么很多小而美產(chǎn)品能頻頻登上App Store的榜單的原因。例如，躺平（已下線）、即刻、小宇宙等應(yīng)用獲得了用戶(hù)的一致好評(píng)。
不管一個(gè)頁(yè)面中信息量的多少，但是一定要有“主角”，很多時(shí)候，我們會(huì)通過(guò)添加次要信息或背景裝飾來(lái)襯托這個(gè)“主角”的存在。設(shè)計(jì)之前一定要權(quán)衡視覺(jué)重點(diǎn)，應(yīng)弱化或去除頁(yè)面中的無(wú)關(guān)信息，減少信息“噪音”的干擾，使用體驗(yàn)?zāi)艿玫搅己玫奶嵘?
所有的設(shè)計(jì)都應(yīng)該遵循產(chǎn)品設(shè)計(jì)四大原則，即親密、對(duì)齊、重復(fù)、對(duì)比。很多時(shí)候，頁(yè)面設(shè)計(jì)不夠精致，總感覺(jué)差點(diǎn)意思，但又找不出真正的原因，就是基礎(chǔ)原則沒(méi)有掌握好，或許只是間距、字號(hào)、大小的一個(gè)微調(diào)，即可達(dá)到意想不到的視覺(jué)效果。關(guān)于設(shè)計(jì)四原則，暫不多做贅述，后續(xù)會(huì)單獨(dú)出具詳細(xì)的文章。
“錯(cuò)誤的信息應(yīng)該用通俗易懂的語(yǔ)言表達(dá)，較準(zhǔn)確的指出問(wèn)題，并且提出解決方案。避免通過(guò)代碼等用戶(hù)難以理解的形式”--尼爾森。
筆者相信有很多人見(jiàn)過(guò)這樣的問(wèn)題，在遇到網(wǎng)絡(luò)問(wèn)題時(shí)過(guò)了幾分鐘后的頁(yè)面還是一片白板、很多錯(cuò)誤反饋就顯示什么錯(cuò)誤404/505/321之類(lèi)的代碼，真心搞不懂，很讓人抓狂。
用戶(hù)在使用過(guò)程中，有時(shí)候出錯(cuò)不可避免，系統(tǒng)應(yīng)該通過(guò)明確的提示性文字或插圖來(lái)提醒用戶(hù)，并附上解決方案，而不是給一堆看不懂的代碼草草了事，需要幫助用戶(hù)從識(shí)別、診斷、并從錯(cuò)誤中恢復(fù)過(guò)來(lái)。
用戶(hù)在操作前（預(yù)判）、操作中、操作后都可能出錯(cuò)，系統(tǒng)可通過(guò)前端驗(yàn)證（優(yōu)先使用）和后端驗(yàn)證明確告知出錯(cuò)的原因以及解決方法。
例如手機(jī)號(hào)碼表單項(xiàng)都是限制在11位數(shù)，如果用戶(hù)手滑少輸了一位數(shù)字，在離開(kāi)輸入框時(shí)，系統(tǒng)應(yīng)及時(shí)通過(guò)前端驗(yàn)證告知用戶(hù)。這里要吐槽一點(diǎn)，一些產(chǎn)品是等用戶(hù)完成所有表單內(nèi)容并提交后才統(tǒng)一反饋，這并不太友好。還有產(chǎn)品在用戶(hù)未達(dá)到表單要求的情況下，始終將下一步按鈕處于置灰狀態(tài)，期間并沒(méi)有任何提示，這就需要用戶(hù)反復(fù)查看每個(gè)表單項(xiàng)的內(nèi)容是否達(dá)標(biāo)，無(wú)故浪費(fèi)大量的時(shí)間成本，實(shí)則不可取。
當(dāng)網(wǎng)絡(luò)出現(xiàn)問(wèn)題或長(zhǎng)時(shí)間無(wú)響應(yīng)，系統(tǒng)會(huì)給出明確的提示，并提供重新加載、刷新、設(shè)置網(wǎng)絡(luò)等操作入口，讓用戶(hù)知道問(wèn)題出現(xiàn)的原因以及如何解決。
當(dāng)錯(cuò)誤已經(jīng)發(fā)生，系統(tǒng)應(yīng)盡可能的幫助用戶(hù)從錯(cuò)誤中恢復(fù)，將損失降到最低。
發(fā)布微信朋友圈，如果內(nèi)容有問(wèn)題刪除后，系統(tǒng)會(huì)提供“重新編輯”入口，并保留了原先所有內(nèi)容，能很輕松的、以最小的操作成本就完成了二次編輯。iPhone相冊(cè)中的回收站會(huì)保留30天內(nèi)所刪除的內(nèi)容，方便隨時(shí)恢復(fù)，這都用戶(hù)犯錯(cuò)后能及時(shí)止損的最佳體現(xiàn)。
“如果系統(tǒng)能讓用戶(hù)不需要閱讀文檔就會(huì)使用那是最好的，但通常情況下還是需要幫助文檔的。任何信息應(yīng)該容易被搜索，且專(zhuān)注于用戶(hù)的目標(biāo)任務(wù)，并列出具體的步驟來(lái)告知用戶(hù)”--尼爾森。
雖然很多時(shí)候，用戶(hù)并不需要幫助或稍加摸索便能上手，但要考慮到意外情況的發(fā)生，系統(tǒng)有必要提供一份幫助文檔，方便用戶(hù)有需要時(shí)能隨時(shí)了解，以便接下來(lái)專(zhuān)注于完成任務(wù)。
能進(jìn)行清晰直觀、符合用戶(hù)習(xí)慣的設(shè)計(jì)再好不過(guò)了，無(wú)需任何幫助，用戶(hù)也能順暢的完成任務(wù)。如組件庫(kù)的打造，就是為了讓設(shè)計(jì)更簡(jiǎn)單、用戶(hù)更容易理解與使用。
對(duì)于那些用戶(hù)只需花費(fèi)少量的時(shí)間就能熟練使用的功能，產(chǎn)品為了實(shí)現(xiàn)快速轉(zhuǎn)化或給少數(shù)的特定人群提供幫助，會(huì)提供一次性幫助。如首次進(jìn)入App的新手引導(dǎo)、迭代后的部分新功能指引等。
對(duì)于較為復(fù)雜的操作流程或存在必須要用戶(hù)注意的問(wèn)題，產(chǎn)品會(huì)在必要的位置提供說(shuō)明，方便用戶(hù)在需要時(shí)能及時(shí)獲得幫助。
例如粵通卡ETC激活流程，對(duì)于這種冷門(mén)卻又必須要用的功能，即便使用過(guò)的老用戶(hù)也未必能記住所有步驟，所以每次進(jìn)入激活功能，首先看到的便是操作指引。其他如綁定信用卡時(shí)，輸入簽約手機(jī)號(hào)、安全碼，對(duì)應(yīng)位置都有固定的幫助入口。
對(duì)于一些常見(jiàn)的使用問(wèn)題，系統(tǒng)會(huì)提供一個(gè)「幫助中心」功能入口，將所有問(wèn)題集合在一起，方便用戶(hù)隨時(shí)查看。
藍(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)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(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咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com