用戶(hù)越接近里程碑（例如完成任務(wù)、達(dá)到目標(biāo)等），他們就越快地朝著目標(biāo)努力
心理學(xué)家曾經(jīng)做過(guò)個(gè)有趣的實(shí)驗(yàn)，把老鼠放入迷宮里面，出口放置老鼠愛(ài)吃的甜點(diǎn)，結(jié)果發(fā)現(xiàn)，越是接近目標(biāo)老鼠跑的越快，人類(lèi)也有這樣的現(xiàn)象，還記得我們上大學(xué)時(shí)都會(huì)測(cè)跑步時(shí)長(zhǎng)，每當(dāng)剩最后幾百米時(shí)同學(xué)們都會(huì)瘋狂沖刺，這就是所謂的目標(biāo)梯度效應(yīng)，越接近目標(biāo)動(dòng)機(jī)就越強(qiáng)，反之如果讓人感覺(jué)距離目標(biāo)很遙遠(yuǎn)，就很難有動(dòng)力。
在互聯(lián)網(wǎng)產(chǎn)品中拼多多就把目標(biāo)梯度效應(yīng)應(yīng)用的非常成功，如果我們?cè)谄炊喽嗌腺?gòu)買(mǎi)商品時(shí)到結(jié)算完成后會(huì)彈出一個(gè)分享領(lǐng)現(xiàn)金的彈窗，而這個(gè)彈窗上的內(nèi)容展示是通過(guò)進(jìn)度條的模式告訴用戶(hù)你還差百分之幾就能夠領(lǐng)現(xiàn)金，當(dāng)用戶(hù)看到這種情況時(shí)大部分會(huì)選擇分享，努力的完成最后百分之幾，相信大家都收到過(guò)父母好友等分享的砍一刀鏈接，在這個(gè)過(guò)程中拼多多就通過(guò)了物質(zhì)的刺激，運(yùn)用目標(biāo)梯度效應(yīng)刺激用戶(hù)產(chǎn)生分享行為，從而達(dá)到裂變的目的。
下圖中的飛書(shū)官網(wǎng)，banner處就使用了梯度效應(yīng)，告訴用戶(hù)還需要多久到達(dá)目標(biāo)，不需要用戶(hù)在進(jìn)行滾動(dòng)或者點(diǎn)擊，對(duì)廣告來(lái)講用戶(hù)在得知目標(biāo)的時(shí)候會(huì)耐心等待，從而避免用戶(hù)直接跳過(guò)
當(dāng)然也會(huì)出現(xiàn)弊端，當(dāng)頻繁去利用用戶(hù)的目標(biāo)梯度效應(yīng)時(shí)，并不能幫助用戶(hù)達(dá)到目標(biāo)，久而久之就會(huì)對(duì)產(chǎn)品失去信任，會(huì)損失用戶(hù)的忠誠(chéng)度。
它指出計(jì)算機(jī)與用戶(hù)的互動(dòng)速度都不需要雙方等待時(shí)，效率就會(huì)提升。
1979年IBM的，Walter Doherty提出系統(tǒng)響應(yīng)時(shí)間每減少一秒，用戶(hù)進(jìn)行下一次的操作思考就會(huì)降低，這種現(xiàn)象與個(gè)人注意力的持續(xù)時(shí)間線相關(guān)，在1979年之前計(jì)算機(jī)的處理性還處于相對(duì)較慢的階段平均高響應(yīng)時(shí)長(zhǎng)為2s，因此在1979年之前用戶(hù)普遍認(rèn)為2s的時(shí)間是最有效的時(shí)間，而1979年后計(jì)算機(jī)性能方面迎來(lái)提高，系統(tǒng)響應(yīng)時(shí)間降到2s一下。
在1979年IBM公司的Doherty和他的團(tuán)隊(duì)通過(guò)3年的時(shí)間在1982年就《系統(tǒng)響應(yīng)時(shí)間對(duì)經(jīng)濟(jì)價(jià)值影響》的課題進(jìn)行研究，研究的主體主要以用戶(hù)操作系后，響應(yīng)時(shí)間作為變量，對(duì)多維度產(chǎn)生結(jié)果的影響。
結(jié)果發(fā)現(xiàn)，計(jì)算機(jī)處理請(qǐng)求所用的時(shí)間與用戶(hù)的響應(yīng)時(shí)間高度相關(guān)，即計(jì)算機(jī)響應(yīng)時(shí)間越短，用戶(hù)的思考時(shí)間就越短，而其中一組研究數(shù)據(jù)就顯示一現(xiàn)象，一旦系統(tǒng)響應(yīng)時(shí)間超過(guò)400ms左右時(shí)各項(xiàng)指標(biāo)數(shù)據(jù)會(huì)產(chǎn)生較大的波動(dòng)，于是IBM公司就此提出研究結(jié)果系統(tǒng)響應(yīng)時(shí)間低于400ms效率就會(huì)提升。
在產(chǎn)品設(shè)計(jì)中多爾蒂閾值如何運(yùn)用，我們要明白400ms是個(gè)范圍值并不是一定要卡在400ms，而是在響應(yīng)時(shí)間低于400ms范圍，我們可以理解為是一個(gè)上限，那么有上限就有下限，響應(yīng)時(shí)間并不是越快越好。
IBM在系統(tǒng)響應(yīng)時(shí)間規(guī)范中強(qiáng)調(diào)了‘過(guò)渡時(shí)間’概念，雖然越快越好，但是用戶(hù)在使用產(chǎn)品中需要理解結(jié)果和過(guò)程，這里可以理解為有效延遲，像我們?cè)谧鯱I中涉及的一些彈窗反饋這類(lèi)通知形的元素，在做交互時(shí)間時(shí)對(duì)于用戶(hù)越快越好，像一些輪播banner需要用戶(hù)手動(dòng)滑動(dòng)的時(shí)候同樣是響應(yīng)越快越好，如果延遲超過(guò)400ms用戶(hù)就會(huì)感知到明顯的卡頓不流程。
而《過(guò)渡延遲》則需要在一些具有明顯目標(biāo)的場(chǎng)景進(jìn)行使用，如我們做UI的過(guò)程中涉及到的TAB切換，這里則需要刻意的延長(zhǎng)時(shí)間，目的是幫助用戶(hù)感受到頁(yè)面之間的變化，反而會(huì)感知上會(huì)更加流暢，對(duì)于用戶(hù)而言有助于用戶(hù)思考：我點(diǎn)了什么、結(jié)果是什么。
小場(chǎng)景內(nèi)：過(guò)渡時(shí)間100ms左右
中型場(chǎng)景：過(guò)渡時(shí)間250ms左右
大型場(chǎng)景：過(guò)渡時(shí)間350ms左右
系統(tǒng)響應(yīng)時(shí)間的目的是進(jìn)行關(guān)鍵指引，因此并不是越快越好，多爾蒂閾值是一個(gè)范圍值，而在這個(gè)范圍內(nèi)如何利用則需要根據(jù)具體的場(chǎng)景、產(chǎn)品目標(biāo)、用戶(hù)目標(biāo)等多維度思考
戶(hù)的大部分時(shí)間都在瀏覽其他網(wǎng)站或app，因此用戶(hù)希望你所設(shè)計(jì)的網(wǎng)站或app能夠像他們已知的網(wǎng)站或app一樣運(yùn)作。
雅各布定律是一個(gè)描述用戶(hù)學(xué)習(xí)的定律，降低用戶(hù)學(xué)習(xí)成本要求盡可能依據(jù)用戶(hù)既有經(jīng)驗(yàn)進(jìn)行任務(wù)和流程設(shè)計(jì)。
例如在UI設(shè)計(jì)中我們強(qiáng)調(diào)一致性，從大的頁(yè)面、組件到小的一個(gè)按鈕元素，我們都要做的樣式和交互的統(tǒng)一，這里除了說(shuō)要保持一致性才去規(guī)范頁(yè)面組件，還有一個(gè)就是因?yàn)槲覀円裱鸥鞑级桑嗨频膬?nèi)容、相似的操作方式能夠讓用戶(hù)體驗(yàn)?zāi)愕漠a(chǎn)品時(shí)更快的適應(yīng)設(shè)計(jì)模式。
這里舉個(gè)我工作中的例子，在去年的時(shí)候我?guī)椭鷪F(tuán)隊(duì)另一位設(shè)計(jì)做一個(gè)?？蛍eb端的產(chǎn)品改版，由于產(chǎn)品的業(yè)務(wù)錯(cuò)綜復(fù)雜，一個(gè)網(wǎng)頁(yè)端承載了招聘、學(xué)習(xí)、社交、工具等多項(xiàng)業(yè)務(wù)。而整個(gè)產(chǎn)品的設(shè)計(jì)風(fēng)格還還存在16年之前，這次做跨時(shí)代的改版對(duì)于當(dāng)時(shí)的我們而言也是比較棘手的，因?yàn)槭袌?chǎng)上并沒(méi)有像我們的產(chǎn)品這么業(yè)務(wù)復(fù)雜，每一個(gè)業(yè)務(wù)板塊單獨(dú)來(lái)拆解都是一個(gè)大的方向，并且競(jìng)品也是很多，用戶(hù)群體來(lái)講分層也是比較嚴(yán)重，像使用招聘業(yè)務(wù)的用戶(hù)并不會(huì)去社交或者學(xué)習(xí)刷題。
因此我們當(dāng)時(shí)就想到雅各布定律讓用戶(hù)決定產(chǎn)品的風(fēng)格，本著這個(gè)思路我們?nèi)ミM(jìn)行用戶(hù)問(wèn)卷調(diào)研，通過(guò)對(duì)用戶(hù)日常使用什么網(wǎng)站的頻率次數(shù)進(jìn)行調(diào)研，通過(guò)對(duì)用戶(hù)日常使用的網(wǎng)站進(jìn)行統(tǒng)計(jì)，找出數(shù)量最高的前三位，以此再針對(duì)性的調(diào)研設(shè)計(jì)風(fēng)格和形式，最終確定我們自己的產(chǎn)品風(fēng)格，這個(gè)方法也是當(dāng)時(shí)我們?yōu)榱吮苊獠煌瑯I(yè)務(wù)的用戶(hù)群體對(duì)新風(fēng)格的接受程度，最后用戶(hù)的反饋也是符合我們的預(yù)期。
雅各布定律告訴我們?cè)谶M(jìn)行設(shè)計(jì)時(shí)，要延續(xù)用戶(hù)已經(jīng)習(xí)慣的認(rèn)知，其次從產(chǎn)品自身業(yè)務(wù)出發(fā)進(jìn)行細(xì)化，像一些同類(lèi)型的產(chǎn)品，他們無(wú)論從功能還是設(shè)計(jì)上都大同小異，因?yàn)閷?duì)于用戶(hù)來(lái)講，用戶(hù)對(duì)這個(gè)行業(yè)的產(chǎn)品已經(jīng)具備一定的認(rèn)知，例如做電商的產(chǎn)品去用戶(hù)做金融產(chǎn)品的思路來(lái)進(jìn)行設(shè)計(jì)產(chǎn)品，那對(duì)于用戶(hù)無(wú)疑就是增加認(rèn)知成本。
像下圖中的醫(yī)療軟件，從功能和板式上首屏都高度相似，三個(gè)核心功能icon，緊接著是各個(gè)科室的入口，然后就是一些內(nèi)容推薦，而右邊的音樂(lè)產(chǎn)品又是另一種結(jié)構(gòu)風(fēng)格，試想一下如果我們目的是在去找醫(yī)院，結(jié)果看到了音樂(lè)類(lèi)產(chǎn)品的布局結(jié)構(gòu)，這就打破了認(rèn)知，雖然有創(chuàng)新但是在用戶(hù)認(rèn)知成本上就會(huì)非常大。
最后總結(jié)一下，用戶(hù)會(huì)把使用其他產(chǎn)品的習(xí)慣轉(zhuǎn)移到另一款相似的產(chǎn)品，我們做設(shè)計(jì)時(shí)金盡可能的避免非必要的創(chuàng)新，這樣會(huì)讓用戶(hù)更快的適應(yīng)產(chǎn)品。
霍桑效應(yīng)是一種理論，它描述了一種反應(yīng)性，在這種反應(yīng)性中，個(gè)體根據(jù)被觀察的意識(shí)來(lái)修改他們行為的一個(gè)方面，所以又被稱(chēng)為被“被試效應(yīng)”。
霍桑是20世紀(jì)20年代位于美國(guó)芝加哥的一家電工廠，雖然設(shè)備先進(jìn)、福利優(yōu)越，但是工人們還是不滿(mǎn)意，生產(chǎn)效率低下，為了研究這一現(xiàn)象，美國(guó)科學(xué)院專(zhuān)門(mén)進(jìn)行了工作條件、設(shè)計(jì)會(huì)因素和生產(chǎn)效益關(guān)系等系列研究，最后發(fā)現(xiàn)是實(shí)驗(yàn)中效應(yīng)，稱(chēng)為霍桑效應(yīng)。
你是否有過(guò)這樣的經(jīng)歷你們公司的大boss或者是某位重量級(jí)領(lǐng)導(dǎo)人物總是會(huì)時(shí)不時(shí)得“經(jīng)過(guò)”你們辦公室，搞得所有人都迅速進(jìn)入戰(zhàn)備狀態(tài)，當(dāng)有人要造訪你家時(shí)，你是否會(huì)確保房間處于干凈、整潔狀態(tài)，并且會(huì)確保孩子們?cè)诳腿藖?lái)訪過(guò)程中都展示出最佳狀態(tài)，這些行為都是霍桑效應(yīng)。
在產(chǎn)品設(shè)計(jì)時(shí)利用霍桑效應(yīng)就能夠激起用戶(hù)的效率和產(chǎn)品數(shù)據(jù)，比如產(chǎn)品簽到流程，在用戶(hù)進(jìn)行累計(jì)簽到時(shí)給予特殊獎(jiǎng)勵(lì)，在連續(xù)簽到過(guò)程中給出鼓勵(lì)的話(huà)術(shù)，根據(jù)霍桑效應(yīng)給予人們足夠的尊重或者讓人們感受參與其中會(huì)提升明顯的效率，在簽到過(guò)程中給予鼓勵(lì)能夠讓用戶(hù)感受到尊重，讓產(chǎn)品更加人性化。
霍桑效應(yīng)中講到從旁人的角度，善意的謊言和夸獎(jiǎng)?wù)娴目梢栽炀鸵粋€(gè)，那么在產(chǎn)品設(shè)計(jì)的維度來(lái)思考這句話(huà)，我們?cè)谠O(shè)計(jì)中是不是可以去不定時(shí)的夸獎(jiǎng)用戶(hù)呢，比如下面中keep在新用戶(hù)進(jìn)行一項(xiàng)運(yùn)動(dòng)結(jié)束后，會(huì)彈出稱(chēng)成就勛章給予支持鼓勵(lì)，提升用戶(hù)自信心和參與感
當(dāng)用戶(hù)由于先前投入的資源（時(shí)間、精力、金錢(qián)等）而繼續(xù)做某事時(shí)，他們會(huì)體驗(yàn)到沉沒(méi)成本效應(yīng)。
沉沒(méi)成本，是指已經(jīng)付出且不可收回的成本，在日常生活中，沉沒(méi)成本可以是已經(jīng)花費(fèi)的金錢(qián)、等待的時(shí)間甚至是付出的感情等。
比如我們?nèi)ル娪霸嚎措娪?，過(guò)程中發(fā)現(xiàn)電影內(nèi)容過(guò)于無(wú)聊、枯燥，大多數(shù)還是堅(jiān)持看完，他們內(nèi)心的想法是錢(qián)都花了怎么也要看完，在比如用戶(hù)購(gòu)買(mǎi)88元課程，贈(zèng)送各種輔助服務(wù)導(dǎo)師指導(dǎo)、問(wèn)題答疑、課后作業(yè)等服務(wù)，對(duì)于企業(yè)來(lái)講這些贈(zèng)送的服務(wù)就是對(duì)沖用戶(hù)購(gòu)買(mǎi)88元課程的沉沒(méi)成本，既利于銷(xiāo)售又增加企業(yè)的信任感。
而在產(chǎn)品設(shè)計(jì)中，不同的用戶(hù)在不同的場(chǎng)景中也都會(huì)遇到沉沒(méi)成本的抉擇，幫助用戶(hù)減少甚至隱去抉擇、降低厭惡心理在一定程度上不僅提高用戶(hù)體驗(yàn)，甚至能提升產(chǎn)品數(shù)據(jù)。
人們總是會(huì)對(duì)已知的損失耿耿于懷而造成判斷的偏差，這來(lái)自于每一個(gè)“非理性人”本能性的恐懼，每個(gè)人損失厭惡，相對(duì)于收益所得往往更在意損失。試想當(dāng)我們無(wú)意中獲得一筆百元的收益時(shí)，我們因此興奮的時(shí)間可能也僅限于當(dāng)天甚至更短；而若自己不小心掉落一百元或因?yàn)闆Q策失誤損失一百元費(fèi)用時(shí)，則將會(huì)捶胸頓足好長(zhǎng)時(shí)間。
在產(chǎn)品設(shè)計(jì)中運(yùn)用較多的是電商產(chǎn)品，例如京東的購(gòu)物車(chē)中除了展示商品信息和價(jià)格外還會(huì)把贈(zèng)品鋪列出來(lái)，如果是多件商品，還會(huì)幫助用戶(hù)計(jì)算好預(yù)計(jì)可節(jié)省多少錢(qián)，這些贈(zèng)品和節(jié)省的錢(qián)都是沉沒(méi)成本，用來(lái)刺激用戶(hù)進(jìn)行下單消費(fèi)，提高平臺(tái)的活躍度。
除此之外社交產(chǎn)品中也可以在情感方面減少用戶(hù)的損失厭惡感，例如在一些直播產(chǎn)品中當(dāng)用戶(hù)進(jìn)入直播間在聊天區(qū)域會(huì)通知主播，而同一時(shí)間用戶(hù)退出直播間則不會(huì)提示，這個(gè)過(guò)程主播的感知幾乎為零，不通過(guò)仔細(xì)對(duì)比很難發(fā)現(xiàn)，這樣的手段對(duì)于產(chǎn)品而言能讓主播在直播的過(guò)程中增加積極性，避免情緒上低落的表現(xiàn)，同時(shí)也能夠幫助產(chǎn)品提升信任度。
上面說(shuō)的是正向的沉沒(méi)成本，而反向成本效應(yīng)也可以幫助產(chǎn)品帶來(lái)信任感，增加用戶(hù)記憶提升用戶(hù)增長(zhǎng)，如下圖中的京東的商品頁(yè)面，用戶(hù)下單后并不直接扣款，當(dāng)7天過(guò)后用戶(hù)沒(méi)用進(jìn)行售后退貨等行為，平臺(tái)將自動(dòng)扣除，
在這7天內(nèi)用戶(hù)可以進(jìn)行隨意退款。
作者：愛(ài)吃貓的魚(yú)___ 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
其實(shí)很簡(jiǎn)單，心理學(xué)目的是了解用戶(hù)真實(shí)的想法，希望設(shè)計(jì)師在注重頁(yè)面美感的同時(shí)也要注重用戶(hù)的使用，做產(chǎn)品設(shè)計(jì)最終目的是為了給公司帶來(lái)價(jià)值，給公司帶來(lái)價(jià)值的前提是要給用戶(hù)帶來(lái)價(jià)值，這就需要我們?nèi)チ私庑睦韺W(xué)當(dāng)然不需要精通，每個(gè)心理學(xué)如果要去吃透他，需要耗費(fèi)非常大的精力，對(duì)于設(shè)計(jì)帶來(lái)的幫助不成正比，所以只需要了解各個(gè)心理學(xué)法則在產(chǎn)品中如何應(yīng)用就OK了。
本次繼續(xù)分享10個(gè)心理學(xué)的知識(shí)，將從心理學(xué)的背景定義、重點(diǎn)解析、設(shè)計(jì)運(yùn)用、詳細(xì)案例4個(gè)維度進(jìn)行深度解析
簡(jiǎn)述定義：保證用戶(hù)在使用流程中的高峰處和結(jié)尾處保持較高的愉悅體驗(yàn)
簡(jiǎn)述定義：用戶(hù)對(duì)未完成的事情、被中斷的事情記憶更加深刻
簡(jiǎn)述定義：基礎(chǔ)的信息組織原則，主要提升用戶(hù)獲取信息的效率
簡(jiǎn)述定義：用戶(hù)會(huì)更加珍惜已經(jīng)獲得的服務(wù)、物品等
用戶(hù)同時(shí)思考兩件事情以上時(shí)，思考效率和準(zhǔn)確性會(huì)下降，做事情難以專(zhuān)注。
用戶(hù)在使用一個(gè)產(chǎn)品流程時(shí)的高峰體驗(yàn)和結(jié)尾體驗(yàn)。
用峰終法則提升用戶(hù)在整個(gè)產(chǎn)品上或某個(gè)功能上的體驗(yàn)，需要先對(duì)用戶(hù)在整個(gè)產(chǎn)品上或某個(gè)功能上的使用行為與想法進(jìn)行分析，并繪制出用戶(hù)的情緒曲線，根據(jù)情緒的峰值節(jié)點(diǎn)和使用流程的結(jié)尾，這兩個(gè)“關(guān)鍵時(shí)刻”，進(jìn)行體驗(yàn)上的重點(diǎn)打造。
2002年的諾貝爾經(jīng)濟(jì)學(xué)獎(jiǎng)得主、美國(guó)心理學(xué)家丹尼爾?卡尼曼經(jīng)過(guò)深入研究，發(fā)現(xiàn)人們對(duì)體驗(yàn)的記憶由兩個(gè)因素決定，即高峰（無(wú)論是正向的還是負(fù)向 的）時(shí)與結(jié)束時(shí)的感覺(jué)，這就是“峰終定律”。關(guān)于峰終定律有這樣一個(gè)實(shí)驗(yàn)：讓兩組人員聽(tīng)相同時(shí)間的強(qiáng)噪音，然后一組停下來(lái)，另一組接著再聽(tīng)一段時(shí)間的弱噪音，就實(shí)際遭遇來(lái)講，后一組比前一組受了更多的折磨，但是聽(tīng)到更長(zhǎng)時(shí)間噪音的后一組的痛苦指數(shù)卻要比前一組低很多，原因就是對(duì)于兩組人員來(lái)講，結(jié)束時(shí)刻的噪音給他們留下的感受最為深刻，因而他們的痛苦指數(shù)主要是由噪音結(jié)束時(shí)的刺激程度所決定的。在另 外一種情況下，令兩組人員聽(tīng)相同時(shí)間的噪音，其中一組的噪音強(qiáng)度較高，另 外一組的噪音強(qiáng)度較低，但是其中某一時(shí)刻聽(tīng)到了極其刺耳的超強(qiáng)度的噪音， 結(jié)果就是，后一組的痛苦指數(shù)要高于前一組，盡管就總體而言，后一組所聽(tīng)到 的噪音強(qiáng)度要低許多。
這體現(xiàn)的就是感受過(guò)程中的“高峰”一刻的決定作用。依照峰終定律，高峰和結(jié)束時(shí)的體驗(yàn)主宰了人們這段感受的性質(zhì)和強(qiáng)弱的 程度，而跟感受的總的比重以及體驗(yàn)時(shí)間的長(zhǎng)短無(wú)關(guān)。也就是說(shuō)，如果在一段 體驗(yàn)的高峰和結(jié)尾，體驗(yàn)是愉悅的，那么對(duì)整個(gè)體驗(yàn)的感受就是愉悅的，即使 這次體驗(yàn)更多的是痛苦或不愉快的感受。
用戶(hù)根據(jù)體驗(yàn)的高峰和結(jié)束來(lái)判斷產(chǎn)品體驗(yàn)是否好壞，并不是根據(jù)用戶(hù)使用產(chǎn)品的每一個(gè)節(jié)點(diǎn)感受的平均值來(lái)判定，我們可以理解為結(jié)果比過(guò)程重要。
就像我們看電影時(shí)，一個(gè)電影2小時(shí)前1小時(shí)都枯燥無(wú)味，突然中間有5分鐘讓你的情緒上升，此時(shí)你可能覺(jué)得這個(gè)電影還行，至少讓你達(dá)到了情緒高潮，當(dāng)你繼續(xù)觀看時(shí)電影片段又變得枯燥無(wú)味，突然最后10分鐘和結(jié)束時(shí)出現(xiàn)了電影彩蛋，并且這10分鐘的內(nèi)容特別符合你的胃口，這時(shí)候你就會(huì)出現(xiàn)一種“嗯，這個(gè)電影不錯(cuò)，結(jié)局挺好”這樣的心理暗示，此時(shí)會(huì)發(fā)現(xiàn)接近100多分鐘的枯燥內(nèi)容都被你忽略掉了，或者你也記得但是你默認(rèn)了電影90%的枯燥。
一些app里在用戶(hù)購(gòu)買(mǎi)成功后，將已購(gòu)商品以一種具有儀式感的收藏卡形式展示給用戶(hù)，給用戶(hù)驚喜的體驗(yàn)，在盲盒星球內(nèi)購(gòu)買(mǎi)盲盒成功后會(huì)彈出卡片，把用戶(hù)獲得感拉滿(mǎn)，在網(wǎng)易云音樂(lè)直播間內(nèi)如果是新手用戶(hù)就會(huì)彈出新人見(jiàn)面禮，通過(guò)視覺(jué)的表現(xiàn)形式把氛圍拉拉滿(mǎn)，當(dāng)然還有一種反向峰值，當(dāng)有一些產(chǎn)品進(jìn)行抽獎(jiǎng)時(shí)，如果用戶(hù)未中獎(jiǎng)會(huì)彈出情感化彈窗，對(duì)用戶(hù)進(jìn)行安慰降低用戶(hù)的挫敗感。
上面講的偏向于業(yè)務(wù)彈窗，還有一種是功能性彈窗， 當(dāng)用戶(hù)使用某個(gè)產(chǎn)品流程時(shí)，這個(gè)流程可能通過(guò)多個(gè)維度才能到達(dá)最終的節(jié)點(diǎn)，在最后用戶(hù)完成操作時(shí)通過(guò)情感化彈窗進(jìn)行提示，又或者在版本升級(jí)時(shí)需要引導(dǎo)用戶(hù)進(jìn)行更新，使用情感化的表現(xiàn)，能夠?qū)a(chǎn)品與用戶(hù)產(chǎn)生情緒共鳴，增加趣味性，提升體驗(yàn)。
當(dāng)用戶(hù)使用產(chǎn)品去完成目標(biāo)時(shí)，突然中間步驟出現(xiàn)網(wǎng)絡(luò)波動(dòng)、網(wǎng)絡(luò)斷開(kāi)等不可抗拒的因素，此時(shí)在頁(yè)面中添加一些情感化設(shè)計(jì)，會(huì)緩解用戶(hù)焦慮情緒，甚至可以在空狀態(tài)中添加動(dòng)效來(lái)提升趣味性。
近期在工作中做了一個(gè)直播項(xiàng)目，其中的一個(gè)功能就涉及到直播抽獎(jiǎng)，因?yàn)楫a(chǎn)品獎(jiǎng)品比例較多且輪數(shù)也多，用戶(hù)的中獎(jiǎng)幾率也比較高，所以導(dǎo)致用戶(hù)在中獎(jiǎng)后基本就退出直播間，因此在做設(shè)計(jì)的過(guò)程中為了避免這個(gè)問(wèn)題，我在中間彈窗上做了優(yōu)化。
通過(guò)情感的中獎(jiǎng)彈窗形式來(lái)強(qiáng)化用戶(hù)的感知度，在直播過(guò)程中提升興奮感，提升用戶(hù)觀看的直播的欲望。
在講一個(gè)案例，去年我們做一個(gè)刷題功能的體驗(yàn)優(yōu)化，用戶(hù)在刷題場(chǎng)景下會(huì)面對(duì)幾十道甚至上百道題目，整個(gè)過(guò)程非常漫長(zhǎng)，并且舊版的功能交互上并沒(méi)有展示總共還有多少題的這個(gè)提示，用戶(hù)在刷題過(guò)程中會(huì)非常焦慮，為了解決這個(gè)問(wèn)題，通過(guò)這三個(gè)手段改進(jìn)，1）我在刷題過(guò)程中以進(jìn)度條的形式去實(shí)時(shí)告知用戶(hù)刷題進(jìn)度，減少用戶(hù)焦慮，2）用戶(hù)在最后幾題的場(chǎng)景中會(huì)添加鼓勵(lì)話(huà)語(yǔ)，強(qiáng)化用戶(hù)峰值，3）在結(jié)果頁(yè)面為用戶(hù)展示直觀的數(shù)據(jù)變化，強(qiáng)化用戶(hù)的滿(mǎn)足感，同時(shí)激勵(lì)用戶(hù)進(jìn)行持續(xù)性刷題。
用戶(hù)只記得使用過(guò)程中體驗(yàn)高的場(chǎng)景和結(jié)束時(shí)的場(chǎng)景。
無(wú)論是在交互還是視覺(jué)上我們都可以利用峰終定律幫助用戶(hù)達(dá)到好的使用體驗(yàn)。
蔡格尼克記憶效應(yīng)（Zeigarnik effect；又稱(chēng)蔡加尼克效應(yīng)、“契可尼效應(yīng)”） 是一種記憶效應(yīng)，指用戶(hù)在完成一件事的過(guò)程中被打斷，他會(huì)持續(xù)關(guān)注這件事，記憶更加深刻。
簡(jiǎn)單理解就是用戶(hù)對(duì)沒(méi)有完成的事更關(guān)注。
該效應(yīng)由蘇聯(lián)心理學(xué)家蔡加尼克在20世紀(jì)20年代提出，有一次她在酒館用餐，遇到了一位記憶力過(guò)人的服務(wù)生，她不用筆記就能記住所有客人下單的菜肴，奇怪的是當(dāng)菜肴上齊之后，蔡加尼克再次詢(xún)問(wèn)服務(wù)生，她竟然完全不記得菜單了，這就是由于她的工作完成之后，緊張狀態(tài)消失，記憶水平隨之下降了。
我們生活中也會(huì)遇到相似的場(chǎng)景，考試我們都經(jīng)歷過(guò)，在過(guò)程中某一道題沒(méi)答上來(lái)，在答后后面的時(shí)候腦子里一直會(huì)想那道未填的題，而前面填過(guò)那么多題，我們卻不容易記住。
看綜藝大家經(jīng)常都知道，看到關(guān)鍵節(jié)點(diǎn)的時(shí)刻總會(huì)有廣告插入，但是我們又舍不得換臺(tái)生怕廣告結(jié)束，錯(cuò)過(guò)了什么關(guān)鍵內(nèi)容，廣告商其實(shí)就是摸透觀眾心理，讓你又愛(ài)又恨的看廣告。
生活中還有很多場(chǎng)景，像晚上刷抖音一直想著刷兩條就趕緊睡覺(jué)，一抬頭發(fā)現(xiàn)凌晨了...打游戲贏一把就不玩了，但當(dāng)?shù)搅粟A一把時(shí)一看時(shí)間過(guò)了好幾個(gè)小時(shí)...小時(shí)候買(mǎi)方便面集里面的卡片....
為什么我們會(huì)對(duì)未完成的工作事項(xiàng)記憶深刻？
假如我們把事項(xiàng)分為三類(lèi)：1）我們?cè)试S其正常完成，2）我們?cè)偻瓿傻倪^(guò)程中打斷，過(guò)一段時(shí)間在接著進(jìn)行，3）在完成的過(guò)程中打斷，并且不允許完成。
稍加思考其實(shí)會(huì)發(fā)現(xiàn)，正常完成任務(wù)后是沒(méi)有任何心理負(fù)擔(dān)，完成事項(xiàng)的過(guò)程中被打斷，這時(shí)候人的心理的會(huì)時(shí)刻記憶這件未完成的事項(xiàng)，就像我現(xiàn)在寫(xiě)這篇文章，如果某個(gè)段落我沒(méi)寫(xiě)完去做一些其他事情，我就會(huì)時(shí)刻想著我文章的小段還沒(méi)有完成，那么假如我在寫(xiě)文章的過(guò)程中，被打斷并且不允許我寫(xiě)后續(xù)的文章，我的注意力可能就會(huì)完全在寫(xiě)文章這件事，我要去想怎么才能繼續(xù)寫(xiě)，或者怎么才能讓我繼續(xù)寫(xiě)，這恰恰驗(yàn)證了人們對(duì)于未完成且無(wú)法繼續(xù)的事項(xiàng)心理負(fù)擔(dān)是最重的。
在一些教育產(chǎn)品或者簽到產(chǎn)品中都會(huì)有一些進(jìn)度型的提示，像下面“開(kāi)言英語(yǔ)”的課程報(bào)名頁(yè)面，在側(cè)面添加了進(jìn)度條，時(shí)刻告知用戶(hù)當(dāng)前進(jìn)度，并且在進(jìn)度末端提示未到達(dá)節(jié)點(diǎn)，對(duì)用戶(hù)進(jìn)行心理暗示，引導(dǎo)完成未來(lái)事項(xiàng)。
在新用戶(hù)注冊(cè)頁(yè)面時(shí)很多產(chǎn)品會(huì)收集用戶(hù)基本信息，通常會(huì)使用分段形式把信息分開(kāi)，減輕用戶(hù)心理負(fù)擔(dān)，并且在完成任務(wù)時(shí)會(huì)給用戶(hù)明確當(dāng)前進(jìn)度，同樣在一些其他場(chǎng)景例如認(rèn)證信息場(chǎng)景中，哪怕用戶(hù)中途因?yàn)槠渌麜r(shí)間被打斷，回來(lái)后也能夠很快的定位到未完成事項(xiàng)。
很多日歷產(chǎn)品中會(huì)添加代辦事項(xiàng)的功能，這個(gè)功能就很好的利用了《蔡加尼克效應(yīng)》有些用戶(hù)會(huì)通過(guò)在日歷下面添加每天的計(jì)劃以此來(lái)督促自己完成，如果某一天的事項(xiàng)發(fā)現(xiàn)沒(méi)有完成就會(huì)有很重心理負(fù)擔(dān)，哪怕到了第二天也會(huì)回過(guò)頭來(lái)把錯(cuò)過(guò)的事項(xiàng)給完成，像我經(jīng)常就會(huì)使用《滴答清單》來(lái)督促自己完成什么事情，如果有哪一天的事項(xiàng)沒(méi)有在清單上打上勾，我可能好幾天都在關(guān)注這件事。
前幾個(gè)月的時(shí)候我在公司做了一個(gè)新用戶(hù)注冊(cè)登錄的流程，在過(guò)程中我主要是負(fù)責(zé)UI和UX的工作，在這個(gè)過(guò)程中就使用到了蔡加尼克效應(yīng)，當(dāng)時(shí)接到的需求是公司戰(zhàn)略目標(biāo)擴(kuò)張，需要在移動(dòng)端更針對(duì)性的收集新用戶(hù)信息以此進(jìn)行內(nèi)容推薦，提升用戶(hù)留存。
在得知業(yè)務(wù)目標(biāo)是提升用戶(hù)留存時(shí)，我就思考設(shè)計(jì)的發(fā)力點(diǎn)，通過(guò)倒推的方式去一步一步拆解，在這個(gè)需求場(chǎng)景內(nèi)，用戶(hù)留存取決于內(nèi)容推薦是否準(zhǔn)確，內(nèi)容推薦準(zhǔn)確度取決收集的用戶(hù)信息是否準(zhǔn)確和用戶(hù)信息填寫(xiě)率，用戶(hù)填寫(xiě)的準(zhǔn)度度需要產(chǎn)品側(cè)通過(guò)內(nèi)容的方式進(jìn)行發(fā)力，而如何讓用戶(hù)信息填寫(xiě)率增長(zhǎng)則是設(shè)計(jì)目標(biāo)。
設(shè)計(jì)目標(biāo)已經(jīng)很明確了，那么如果去優(yōu)化呢，當(dāng)時(shí)我是先把舊版的問(wèn)題給拆解出來(lái)。
1、交互上舊版把用戶(hù)信息都堆積在一個(gè)頁(yè)面上，并且對(duì)于業(yè)務(wù)目標(biāo)上很多信息是無(wú)效的并且還在視覺(jué)核心位置，如用戶(hù)頭像、用戶(hù)昵稱(chēng)等這些信息對(duì)于內(nèi)容推薦沒(méi)有任何作用。
2、視覺(jué)上沒(méi)有核心聚焦區(qū)域，用戶(hù)進(jìn)來(lái)后會(huì)措手不及不知道從哪開(kāi)始下手填寫(xiě)，并且按鈕的樣式也不夠直觀對(duì)用戶(hù)造成不可點(diǎn)擊的假象。
首先從交互上開(kāi)始優(yōu)化，因?yàn)闀?huì)新增很多信息填寫(xiě)內(nèi)容，所以為了避免用戶(hù)在同一個(gè)頁(yè)面看到很多的表單，把交互流程拆解，按照業(yè)務(wù)維度把表單拆分成多個(gè)頁(yè)面，在每個(gè)流程內(nèi)給用戶(hù)傳達(dá)出這個(gè)填寫(xiě)是個(gè)簡(jiǎn)單的事情，從而避免用戶(hù)從第一步就抗拒。
這里面還涉及到【沉沒(méi)成本效應(yīng)】當(dāng)用戶(hù)在填寫(xiě)第三步四步的時(shí)候會(huì)因?yàn)榍懊嬉呀?jīng)填寫(xiě)了那么多信息花費(fèi)了時(shí)間并不想放棄，沉沒(méi)成本前面幾篇文章講過(guò)設(shè)計(jì)心理學(xué)-5種用戶(hù)體驗(yàn)法則，這里不詳細(xì)講了，其次就是【蔡加尼克效應(yīng)】用戶(hù)在每個(gè)頁(yè)面看到當(dāng)前進(jìn)度的時(shí)候就會(huì)產(chǎn)生必須完成的暗示，然后這個(gè)心理暗示就會(huì)持續(xù)推動(dòng)用戶(hù)完成剩下的內(nèi)容填寫(xiě)。
后期我們針對(duì)舊版和新版的優(yōu)化做了可用性測(cè)試，結(jié)果上也非常正向，新版的步驟雖然被拉長(zhǎng)了，但是每一個(gè)步驟都比較簡(jiǎn)單用戶(hù)填寫(xiě)起來(lái)沒(méi)有門(mén)檻，所以填寫(xiě)效率上大于舊版，詳細(xì)過(guò)程之前有復(fù)盤(pán)過(guò)一篇文章感興趣的可以了解一下注冊(cè)登錄可用性流程最后用戶(hù)的信息填寫(xiě)率也是非常有效的提升。
上線之后數(shù)據(jù)也是正向增長(zhǎng)，當(dāng)然不止這一個(gè)場(chǎng)景才能用到蔡加尼克效應(yīng)，比如像一些用戶(hù)成本要求比較高的健身打卡、學(xué)習(xí)打卡等任務(wù)可以使用一些階段獎(jiǎng)勵(lì)來(lái)激勵(lì)用戶(hù)持續(xù)完成。
五架帽理論簡(jiǎn)稱(chēng)為LATCH原則，它定義了在好的組織性信息才能提升用戶(hù)體驗(yàn)，使設(shè)計(jì)更易于理解、靈活和可維護(hù)。
LATCH的概念最初由Richard Saul Wurman在他的設(shè)計(jì)原則和設(shè)計(jì)模式中提到，后來(lái)在他的《信息架構(gòu)》的書(shū)中重新定義了五架帽概念。
LATCH即是Location位置，Alphabet字母，Time時(shí)間，Category類(lèi)別和Hierarchy視覺(jué)層級(jí)組成，這五種方式目標(biāo)都是通過(guò)高效的信息呈現(xiàn)來(lái)提升用戶(hù)體驗(yàn)。
理論上講的是通過(guò)位置來(lái)組織信息，其實(shí)比較好理解，我們可以理解為你本人所在位置是一個(gè)坐標(biāo)點(diǎn)，所有的信息形成都是圍繞你的坐標(biāo)點(diǎn)來(lái)組成的。
例如地圖軟件中你的當(dāng)前位置不斷變換，手機(jī)屏幕中不斷加載出新的地標(biāo)建筑，在一些游戲場(chǎng)景，例如絕地求生，隨著你的位置變換，不同的建筑環(huán)境、人、道具等都會(huì)隨著在你周?chē)霈F(xiàn)，當(dāng)一些信息組成對(duì)用戶(hù)非常重視時(shí)則會(huì)優(yōu)先出現(xiàn)，比如駕駛過(guò)程中當(dāng)前位置不變，地圖會(huì)優(yōu)先加載道路信息，其次是建筑信息（網(wǎng)絡(luò)波動(dòng)的時(shí)候比較明顯）。
并且隨著VR/元宇宙等技術(shù)，基于位置變換組織信息已經(jīng)是非常重要的一環(huán)。
總結(jié)：通過(guò)位置結(jié)合時(shí)間能夠給用戶(hù)展示高效率的信息
與字面意思一樣，按字母順序排列信息，當(dāng)數(shù)據(jù)量很大時(shí)，它是組織信息的最佳方法之一，在產(chǎn)品應(yīng)用中常見(jiàn)的就是像通訊錄、目錄等能夠快速的定位到信息，通過(guò)這種方式延伸出其他場(chǎng)景的排序方式，例如電商產(chǎn)品中的側(cè)邊分類(lèi)，就是利用英文字母的邏輯把商品類(lèi)別進(jìn)行分類(lèi)，在一種就是按照時(shí)間的維度進(jìn)行信息分類(lèi)。
當(dāng)信息具有相同性需要排序的時(shí)候，使用分類(lèi)的方式能夠最快的提升用戶(hù)篩選效率，在我們生活我們每個(gè)人都有分類(lèi)的習(xí)慣，如電腦桌上會(huì)放置一些小物件或電子設(shè)備相關(guān)的，衣柜里統(tǒng)一都放衣服每一層放不同季節(jié)的衣服，每當(dāng)我們想使用到某件物品時(shí)第一時(shí)間就能定位到它的位置。
在產(chǎn)品中使用最多的是分類(lèi)和導(dǎo)航，例如同樣的鞋子可以用品牌分類(lèi)，也可以按照季節(jié)分類(lèi)或者性別分類(lèi)......音樂(lè)可以用流行、搖滾、民謠等等分類(lèi)......
類(lèi)別是該理論中比較關(guān)鍵的一環(huán)，它定義事物按照分類(lèi)的方式能夠讓用戶(hù)快速的查找信息組織。
上面位置、字母、類(lèi)別都是提高信息查找效率，視覺(jué)層級(jí)與字面意思相同，當(dāng)我們滿(mǎn)足基本的查找效率后可以使用不同的視覺(jué)層級(jí)來(lái)凸顯重要性。
例如在產(chǎn)品設(shè)計(jì)中可以從顏色、大小等方式來(lái)滿(mǎn)足我們想要的層級(jí)梯度，讓產(chǎn)品/用戶(hù)的核心價(jià)值快速的讓用戶(hù)察覺(jué)到。
上面只是對(duì)每條規(guī)則單獨(dú)拆出來(lái)解析，實(shí)際中它們是可以共存的，如位置結(jié)合時(shí)間能夠讓用戶(hù)第一時(shí)間看到重要信息，類(lèi)別結(jié)合字母就出現(xiàn)了我們看到的通訊錄，類(lèi)別結(jié)合視覺(jué)層級(jí)能夠讓分類(lèi)更加重要等。
五架帽理論最終目的都是為了提升用戶(hù)使用產(chǎn)品時(shí)的信息效率，它的五條設(shè)計(jì)規(guī)則也是在產(chǎn)品設(shè)計(jì)中的必須要遵守的，為什么說(shuō)要遵守，因?yàn)樵O(shè)計(jì)中我們可以仔細(xì)回想下，基本上每一個(gè)頁(yè)面的誕生都與這五條規(guī)則相關(guān)，一但違背，這個(gè)頁(yè)面的可用性或者美觀就會(huì)有所缺失。
當(dāng)一個(gè)物品用戶(hù)沒(méi)有擁有時(shí)，對(duì)他的價(jià)值感相對(duì)較低，當(dāng)用戶(hù)擁有時(shí)會(huì)高估和珍惜物品的價(jià)值。
心理學(xué)家 Daniel Kahneman、Jack Knetsch 和 Richard Thaler 對(duì)稟賦效應(yīng)進(jìn)行了實(shí)驗(yàn)，并在他們 1990 年的論文“稟賦效應(yīng)和粗略定理的實(shí)驗(yàn)檢驗(yàn)”中展示了這一概念，這一現(xiàn)象可以用行為金融學(xué)中的“損失厭惡”理論來(lái)解釋?zhuān)摾碚撜J(rèn)為一定量的損失給人們帶來(lái)的效用降低要多過(guò)相同的收益給人們帶來(lái)的效用增加。因此人們?cè)跊Q策過(guò)程中對(duì)利害的權(quán)衡是不均衡的，對(duì)“避害”的考慮遠(yuǎn)大于對(duì)“趨利”的考慮。出于對(duì)損失的畏懼，人們?cè)诔鲑u(mài)商品時(shí)往往索要過(guò)高的價(jià)格。
比如我們過(guò)生日收到的禮物，在沒(méi)有得到這件禮物之前，我們對(duì)他的價(jià)值或者吸引力往往沒(méi)那么高，但是當(dāng)這件禮物通過(guò)生日的形式送給你的時(shí)候，他就具有一定的意義并且這件禮物是屬于你的，假如此時(shí)有人花市場(chǎng)價(jià)購(gòu)買(mǎi)你的禮物，內(nèi)心更多的想法是不舍得賣(mài)，因?yàn)檫@件禮物已經(jīng)屬于你了。
講個(gè)自己真實(shí)的故事，我自己是對(duì)一些財(cái)富手串、事業(yè)手串等等相關(guān)的東西不感興趣的，哪怕他很便宜我也不會(huì)去買(mǎi)，但是有一天女朋友從雍和宮幫我求來(lái)一個(gè)財(cái)富手串并且還是開(kāi)過(guò)光的，以后我就每天帶著這個(gè)手串形影不離，有一次放在某個(gè)地方找不到了，當(dāng)時(shí)我就很焦慮，感覺(jué)自己損失了很大一筆錢(qián)，這個(gè)其實(shí)就是稟賦效應(yīng)作祟，因?yàn)檫@件東西通過(guò)很特別的方式才到我手里，我已經(jīng)認(rèn)定這就是我的東西了，所以他對(duì)我的價(jià)值是極其高，哪怕我之前對(duì)這種手串不感興趣。
最常見(jiàn)的產(chǎn)品設(shè)計(jì)場(chǎng)景中就是分享的場(chǎng)景，例如我們常見(jiàn)的一些分享都是底部彈出一些第三方鏈接方式，那么想一下這樣的方式分享率極低，我們可以利用稟賦效應(yīng)去強(qiáng)化產(chǎn)品的價(jià)值感，在學(xué)習(xí)產(chǎn)品中把學(xué)習(xí)數(shù)據(jù)融入分享頁(yè)面中提升讓用戶(hù)感受到學(xué)習(xí)的價(jià)值增加分享欲望，在旅游產(chǎn)品中一般都會(huì)記錄用戶(hù)的旅游足跡，此時(shí)把用戶(hù)經(jīng)過(guò)的城市以地圖的形式融入在分享頁(yè)面中，激發(fā)用戶(hù)的旅游價(jià)值，稟賦效應(yīng)在分享產(chǎn)品中不止這些玩法，商品收貨時(shí)、貴重物品分享時(shí)等等。
誘導(dǎo)即是向用戶(hù)贈(zèng)送免費(fèi)的東西，通過(guò)這種方式提供免費(fèi)試用服務(wù)或者是一些優(yōu)惠禮包等，當(dāng)?shù)玫矫赓M(fèi)服務(wù)或者優(yōu)惠時(shí)由于稟賦效應(yīng)用戶(hù)可能會(huì)去進(jìn)行付費(fèi)或者深度使用，讓用戶(hù)感受到這是它自己的東西，對(duì)產(chǎn)品的價(jià)值感加倍。（但是我感覺(jué)這種方式效果提升不是很明顯，但是確實(shí)可以利用這種心理去嘗試可能會(huì)有意外收獲。）
誘發(fā)稟賦效應(yīng)的另一個(gè)重要因素是用戶(hù)的主人翁意識(shí)，在一些產(chǎn)品中會(huì)有一些個(gè)性化的設(shè)置，用戶(hù)可以根據(jù)自己的喜好去進(jìn)行設(shè)置，這樣可以讓用戶(hù)與產(chǎn)品產(chǎn)生價(jià)值聯(lián)動(dòng)，比如谷歌瀏覽器的背景和同步功能就是我一直使用的原因，雖然其他瀏覽器也有同樣的功能，但是在互聯(lián)網(wǎng)初期谷歌可是用這個(gè)功能吸引了不少用戶(hù)，在比如app中常見(jiàn)的換膚、換色等功能。
有正向的也就有反向的，反向指的就是厭惡效應(yīng)，人們對(duì)自己所擁有的東西更加珍視，所以對(duì)于損失所表現(xiàn)出來(lái)的厭惡要比獲取收益表現(xiàn)出的愉悅強(qiáng)烈得多，我們往往會(huì)對(duì)所損失的東西更為敏感，有心理學(xué)家實(shí)驗(yàn)過(guò)，股票下跌的損失要用雙倍的漲幅才能挽回心理痛苦，在產(chǎn)品中常見(jiàn)的就是會(huì)員試用服務(wù)，當(dāng)我們給用戶(hù)7天或者30天的試用期后，時(shí)間一到大部分用戶(hù)都會(huì)選擇付費(fèi)，因?yàn)樗麄兡J(rèn)這些服務(wù)已經(jīng)擁有不愿損失。
情緒和社會(huì)會(huì)影響一個(gè)人的決策，因此根據(jù)行為經(jīng)濟(jì)學(xué)，當(dāng)我們了解這些因素時(shí)，我們可以構(gòu)建設(shè)計(jì)來(lái)幫助用戶(hù)做出可能的最佳決策，產(chǎn)品設(shè)計(jì)師可以通過(guò)使用價(jià)值賦能、個(gè)性化、免費(fèi)試用等簡(jiǎn)單方法，利用這種效果來(lái)提高產(chǎn)品的留存率和滲透率。
指的是用戶(hù)同時(shí)思考兩件事情以上時(shí)，思考效率和準(zhǔn)確性會(huì)下降，做事情難以專(zhuān)注。
我們?nèi)粘９ぷ鞯臅r(shí)候，如果好幾件待辦事情同時(shí)需要處理，我們自己也是很難去說(shuō)專(zhuān)注某一件事完成，做設(shè)計(jì)師的都知道，在設(shè)計(jì)時(shí)如果被別人打擾很容易打斷設(shè)計(jì)思路，我們應(yīng)該都經(jīng)歷過(guò)好不容易沉浸下來(lái)去做某個(gè)需求，忽然中間有個(gè)緊急的需求插過(guò)來(lái)讓我們完成，當(dāng)我們把緊急需求完成后，再去做被打斷的需求發(fā)現(xiàn)思路被打斷了，這就是《干擾效應(yīng)》的影響。
人們?cè)谔幚硎虑闀r(shí)大腦會(huì)給傳遞出目標(biāo)信號(hào)，根據(jù)人的本能認(rèn)知進(jìn)行操作，處理收到的反饋信息，最后在反饋給大腦，當(dāng)多個(gè)事情需要處理時(shí)，大腦需要同時(shí)傳送不同的目標(biāo)信號(hào)，身體的各項(xiàng)部位進(jìn)行執(zhí)行，這時(shí)候我們往往跟不上大腦信號(hào)，因?yàn)椤断搿泛汀蹲觥肥歉四苣芰Ψ磻?yīng)相關(guān)。
人們處理事情就像電腦運(yùn)行軟件一樣，同時(shí)運(yùn)行多個(gè)軟件時(shí)，電腦的效率就會(huì)出現(xiàn)發(fā)燙、卡頓等問(wèn)題，人處理多項(xiàng)事情時(shí)效率就會(huì)變慢，無(wú)法專(zhuān)注某一個(gè)事情。
看下圖中這兩組金剛區(qū)圖標(biāo)，首先第一組的問(wèn)題是雖然顏色很豐富，但是沒(méi)有進(jìn)行很好的分類(lèi)，增加用戶(hù)的思考時(shí)間，干擾性太大。
再看第二組金剛區(qū)圖標(biāo)，雖然很精致且有食欲，很符合外賣(mài)平臺(tái)的調(diào)性，當(dāng)然有好也會(huì)有壞，這么多復(fù)雜的圖標(biāo)同時(shí)出現(xiàn)，當(dāng)用戶(hù)目標(biāo)很明確的時(shí)候，這么多的圖標(biāo)就形成了信息干擾，用戶(hù)需要配合文字才能減少篩選效率。
下面這組某生鮮的金剛區(qū)也是同樣的問(wèn)題，雖然把商品實(shí)物圖作為信息傳達(dá)的元素，但商品過(guò)于復(fù)雜，在移動(dòng)端屏幕上很難看到細(xì)節(jié)，這需要用戶(hù)對(duì)商品的認(rèn)知非常明確，例如一用戶(hù)來(lái)賣(mài)水果，如果是第一次使用這個(gè)產(chǎn)品可能很難通過(guò)圖標(biāo)來(lái)找到入口。
我們看下面的美團(tuán)首頁(yè)，他的金剛區(qū)入口有15個(gè)，他們的處理方法在結(jié)構(gòu)上是進(jìn)行了層級(jí)區(qū)分，把重要切頻率高的5個(gè)入口重點(diǎn)突出，使用頻率較低的入口弱化，通過(guò)層級(jí)和減少?gòu)?fù)雜度避免用戶(hù)出現(xiàn)迷惑行為。
個(gè)人中心是承載功能入口較多的頁(yè)面，很多功能用戶(hù)一般很少用到，每個(gè)用戶(hù)的功能使用頻率都根據(jù)用戶(hù)習(xí)慣而定，在設(shè)計(jì)上個(gè)人中心常見(jiàn)的就是把功能按照維度分類(lèi)，如設(shè)置類(lèi)、功能類(lèi)等便于用戶(hù)查找。
還有一種像站酷這種列表布局也是比較效率的布局方式，這種布局方式按照用戶(hù)的習(xí)慣，由上到下的順序進(jìn)行瀏覽，干凈簡(jiǎn)潔的頁(yè)面，某種程度是減少了干擾。
先看一張對(duì)比圖，簡(jiǎn)單講下我是如何運(yùn)用干擾效應(yīng)進(jìn)行設(shè)計(jì)。
這是去年我對(duì)我們產(chǎn)品的個(gè)人中心頁(yè)進(jìn)行改版，左邊是舊版頁(yè)面，舊版頁(yè)面無(wú)論是視覺(jué)上還是交互上都不符合用戶(hù)認(rèn)知，在功能層面也是紊亂不夠簡(jiǎn)潔，整個(gè)改版流程呢分為分析用戶(hù)目標(biāo)、問(wèn)題梳理、針對(duì)優(yōu)化、結(jié)果驗(yàn)證。
這里主要講下如何針對(duì)用戶(hù)目標(biāo)進(jìn)行優(yōu)化，用戶(hù)目標(biāo)分兩個(gè)維度，一是個(gè)人中心作為管理內(nèi)容進(jìn)行使用，二是通過(guò)個(gè)人中心查看投遞簡(jiǎn)歷的進(jìn)度，其中投遞簡(jiǎn)歷對(duì)于產(chǎn)品價(jià)值是相對(duì)較高。
提一嘴當(dāng)時(shí)的用戶(hù)是技術(shù)類(lèi)居多，大多是求職、學(xué)習(xí)目的。
無(wú)論是視覺(jué)上還是交互上問(wèn)題都是比較多，并且結(jié)構(gòu)比較混亂，把一些用戶(hù)不常用且對(duì)產(chǎn)品沒(méi)有價(jià)值的功能點(diǎn)放置層級(jí)較高，過(guò)多的就不寫(xiě)了，總之都是問(wèn)題。
作者：愛(ài)吃貓的魚(yú)___ 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
有效的顏色應(yīng)用技巧是每個(gè)從事視覺(jué)合成相關(guān)工作的，包括插畫(huà)家和UI設(shè)計(jì)師，都必須具備的。隨著扁平化設(shè)計(jì)和material design的普及，具備色彩理論知識(shí)變得更加重要。
目前鮮艷的顏色和漸變出現(xiàn)在不同數(shù)字產(chǎn)品的用戶(hù)界面上：從好玩和有趣的到商業(yè)應(yīng)用和網(wǎng)站。然而，關(guān)于明亮的顏色對(duì)用戶(hù)體驗(yàn)的影響還有很多討論。本文對(duì)豐富多彩的用戶(hù)界面設(shè)計(jì)的優(yōu)缺點(diǎn)進(jìn)行了深入的分析。
增加可讀性和易讀性
我們之前的一篇文章中，介紹了影響配色方案選擇的因素?？勺x性和易讀性是設(shè)計(jì)師考慮色彩運(yùn)用的基本因素。提醒一下，可讀性是指人們閱讀文本內(nèi)容的容易程度，而易讀性則定義了用戶(hù)在特定字體中區(qū)分字母的速度。
鮮明的顏色足夠的對(duì)比度有助于增加可讀性和易讀性。有對(duì)比的布局元素會(huì)變得可區(qū)分和引人注目。然而，高色彩對(duì)比可能并不總是有效。如果文本內(nèi)容和背景顏色對(duì)比度太大，將很難閱讀或掃描文本。這就是為什么推薦設(shè)計(jì)師創(chuàng)建一個(gè)溫和的對(duì)比度，只用高對(duì)比度顏色突出元素的原因。
對(duì)任何數(shù)字產(chǎn)品來(lái)說(shuō)，視覺(jué)層次是打造清晰導(dǎo)航和直觀交互的核心要素。UI組件就是這樣被組織起來(lái)的，這樣大腦就可以通過(guò)這種包括顏色在內(nèi)的物理差異來(lái)區(qū)分物體。
顏色有自己的層次結(jié)構(gòu)，這是受用戶(hù)思維的影響所決定的。有大膽的顏色，如紅色和橙色，以及弱的白色和奶油色。明亮的顏色很容易被注意到，所以設(shè)計(jì)師經(jīng)常用它們來(lái)突出或設(shè)置對(duì)比度。此外，將一種顏色應(yīng)用到幾個(gè)元素上，表示它們?cè)谀撤N程度上是有相關(guān)性的。例如，您可以為購(gòu)買(mǎi)按鈕選擇紅色，以便人們?cè)谛枰獣r(shí)直觀地找到它們。
大腦對(duì)大膽的顏色反應(yīng)強(qiáng)烈，這就是為什么明亮的顏色組合很容易被注意和記住的原因。色彩豐富的用戶(hù)界面設(shè)計(jì)，在眾多顏色較輕的產(chǎn)品中容易脫穎而出。顏色的選擇需要基于目標(biāo)受眾的喜好和市場(chǎng)調(diào)查。
此外，如果一個(gè)公司擁有明亮的企業(yè)顏色應(yīng)用于商標(biāo)和品牌項(xiàng)目，那使用同樣顏色在其網(wǎng)站或移動(dòng)應(yīng)用上也是一個(gè)好方法。這種方式連接公司所有的溝通渠道，創(chuàng)造了一致性的視覺(jué)解決方案，并且提高了品牌知名度。
為了傳達(dá)正確的語(yǔ)氣、信息和號(hào)召用戶(hù)做出預(yù)期的行動(dòng)，設(shè)計(jì)師需要知道顏色會(huì)影響我們的情緒和行為。我們的大腦會(huì)對(duì)顏色做出反應(yīng)，而我們通常不會(huì)注意這點(diǎn)。這項(xiàng)名為“顏色心理學(xué)”的研究表明，當(dāng)我們的眼睛感知到一種顏色時(shí)，大腦就會(huì)向內(nèi)分泌系統(tǒng)發(fā)出信號(hào)，釋放負(fù)責(zé)情緒變化的荷爾蒙。
適當(dāng)選擇顏色有助于讓用戶(hù)處于一種促使他們采取行動(dòng)的心理狀態(tài)，并設(shè)置合適的氛圍將正確的信息傳遞給用戶(hù)。比如，如果設(shè)計(jì)師設(shè)計(jì)了一個(gè)與自然或園藝相關(guān)的產(chǎn)品的UI，很有可能會(huì)選擇用綠色和藍(lán)色。通過(guò)這種方式，設(shè)計(jì)將從一開(kāi)始就與一種產(chǎn)品或服務(wù)類(lèi)型相關(guān)聯(lián)。您可以在我們的文章《顏色對(duì)用戶(hù)行為的影響》中找到對(duì)顏色含義的具體描述。
明亮的顏色和漸變，是UI設(shè)計(jì)中的最流行的趨勢(shì)。如今，可以在不同類(lèi)型的數(shù)字產(chǎn)品中看到這種運(yùn)用，而嚴(yán)格的商業(yè)風(fēng)格的限制似乎被拋在了一邊。
明亮的漸變色彩在用戶(hù)界面上可以帶來(lái)一種現(xiàn)代化感和新鮮的想法。結(jié)合最新趨勢(shì)設(shè)計(jì)的APP或網(wǎng)站往往引人注目，盡管競(jìng)爭(zhēng)激烈，仍能吸引用戶(hù)的注意力。
那些認(rèn)為顏色能靠直覺(jué)和審美隨意混合的觀念是錯(cuò)誤的。如果你想要?jiǎng)?chuàng)造和諧的視覺(jué)構(gòu)圖，那么關(guān)于顏色如何起作用以及它們?nèi)绾螀f(xié)作的基本知識(shí)是必不可少的。
在UI中應(yīng)用的顏色越鮮艷，搭配就越困難。為了讓用戶(hù)感到愉悅和舒適，設(shè)計(jì)師努力將平衡和和諧融入到用戶(hù)界面設(shè)計(jì)中。色彩協(xié)調(diào)是指在設(shè)計(jì)中以最吸引人、最有效的方式來(lái)安排色彩，以供用戶(hù)感知。和諧的顏色組合有助于對(duì)網(wǎng)站或APP獲得一個(gè)不錯(cuò)的第一印象。顏色理論定義了一些基本的顏色方案，下面這些配色方案被證明是有效的。
單色，色彩和諧是基于一種顏色和它的各種色調(diào)。
類(lèi)似色，該方案適用于顏色輪上相鄰的顏色。
互補(bǔ)色，它是在色輪上相互放置的顏色的混合，目的是產(chǎn)生高對(duì)比度。
多色互補(bǔ)，這個(gè)方案與前一個(gè)方案相似，但是它使用了更多的顏色。例如，如果你選擇藍(lán)色，你需要取另外兩個(gè)相鄰的顏色，表示黃色和紅色。
三元色，它是基于三個(gè)獨(dú)立的顏色，在色輪上是等距的。專(zhuān)業(yè)人士建議使用一種顏色作為主調(diào)，其他顏色作為輔助。
四色，tetradic配色方案使用四個(gè)顏色從車(chē)輪是互補(bǔ)的。如果你把選中顏色上的點(diǎn)連起來(lái)，它們就形成了矩形。
大膽的顏色可以作為在UI中進(jìn)行重音的工具，但它也可能成為重音消失的原因。許多鮮明的顏色在一個(gè)單一的視覺(jué)組成會(huì)帶來(lái)了失去突出元素的風(fēng)險(xiǎn)，因?yàn)樗麄兂蔀橐粋€(gè)色彩種制造混亂的一部分。
這就是為什么推薦設(shè)計(jì)師使用60%-30%-10%的比例。最重要的部分應(yīng)該是主色調(diào)，三分之一的構(gòu)圖采用第二色，10%的部分應(yīng)該選擇有助于形成重音的顏色。這樣的比例被認(rèn)為是令人愉快的，因?yàn)樗试S逐漸感知所有的視覺(jué)元素。
創(chuàng)造數(shù)字產(chǎn)品的核心階段之一是用戶(hù)研究。定義和分析目標(biāo)受眾，使設(shè)計(jì)師了解他們對(duì)網(wǎng)站或應(yīng)用程序的期望。年齡、性別和文化會(huì)影響潛在用戶(hù)的喜好。例如，孩子們很喜歡黃色，但當(dāng)我們長(zhǎng)大后，黃色通?？雌饋?lái)不那么有吸引力。男人和女人通常喜歡冷酷的顏色，如藍(lán)色，綠色。不像女人，男人通常喜歡白色、黑色和灰色。
明亮的顏色也是如此。即使您是設(shè)計(jì)一個(gè)有趣的APP，也需要考慮目標(biāo)受眾的具體情況。中年人通常更喜歡輕松的用戶(hù)界面，他們可能不喜歡屏幕上很重的顏色去分散注意力。
正如我們上面所說(shuō)，明亮的顏色可以產(chǎn)生大量的對(duì)比度，幫助突出重要的UI元素，并提供良好的易讀性和可讀性。然而，過(guò)多的對(duì)比度可能會(huì)起到不好的效果，尤其是在移動(dòng)界面上，因?yàn)樗鼈兊目臻g有限，可以在不同的環(huán)境下使用。
小屏幕、環(huán)境光和明亮的字體使對(duì)比度高的圖像在用戶(hù)眼中顯得很難看。這就是為什么在移動(dòng)UI設(shè)計(jì)中使用明亮的顏色需要注意顏色之間的對(duì)比度，這樣人們?cè)陂喿x文字時(shí)會(huì)感到舒服。
顏色是大師手中的一件偉大的工具，和其他任何工具一樣，它也有它的優(yōu)點(diǎn)和缺點(diǎn)。為了有效地使用它，需要考慮它的所有方面，以便能夠找到適合設(shè)計(jì)任務(wù)和目標(biāo)的解決方案。
作者：愛(ài)設(shè)計(jì)的狐貍 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
「尼爾森十大原則」又稱(chēng)為「用戶(hù)界面設(shè)計(jì)的10種可用性啟發(fā)式」，是由雅各布·尼爾森（Jakob Nielsen）提出的10條交互設(shè)計(jì)一般原則。之所以將其定義為“啟發(fā)式”，是因?yàn)樗鼈兪菑V泛的經(jīng)驗(yàn)法則，而不是特定的可用性準(zhǔn)則。
在官方2019年的描述視頻中將原則定義為「十大UX設(shè)計(jì)試探法」，運(yùn)用這些原則有助于我們?cè)囂皆O(shè)計(jì)的邊界，探索設(shè)計(jì)的可能性，千萬(wàn)不要讓原則成為束縛我們?cè)O(shè)計(jì)的枷鎖。
“保證元素對(duì)象，操作選項(xiàng)的可見(jiàn)性，以此降低用戶(hù)的記憶負(fù)荷?！?
這個(gè)原則直譯文過(guò)來(lái)的話(huà)有點(diǎn)拗口，其實(shí)就是指盡量減少需要用戶(hù)記憶的東西，特殊情況下提供可選項(xiàng)讓用戶(hù)在此確認(rèn)信息。特別是在一些較為長(zhǎng)流程的頁(yè)面流轉(zhuǎn)中，一定要注意上下文的關(guān)聯(lián)性，以此協(xié)助用戶(hù)進(jìn)行回憶，而不是從頭開(kāi)始記憶。
1. 選項(xiàng)可視性
最常見(jiàn)的運(yùn)用，將選項(xiàng)以用戶(hù)最能理解的方式呈現(xiàn)出來(lái)，不讓用戶(hù)疑惑。
在平常練習(xí)的飛機(jī)稿或者一些風(fēng)格獨(dú)特的產(chǎn)品中我們經(jīng)常會(huì)看到只使用了icon的tab欄，雖然美觀，但是當(dāng)用戶(hù)量達(dá)到一定程度，且用戶(hù)屬性較多的情況下很容易造成識(shí)別上的問(wèn)題。目前市面上較多的產(chǎn)品還是選擇了文字+icon的展示形式，通過(guò)文字與圖形加深用戶(hù)的識(shí)別，高德則選擇了使用表意最為明確的文字。
2. 頁(yè)面可視性
頁(yè)面標(biāo)題也是最為常見(jiàn)的運(yùn)用形式，產(chǎn)品需要清晰的告知用戶(hù)目前所處的位置。特別是在一些需要長(zhǎng)時(shí)間停留，存在操作被打斷的界面中標(biāo)題尤為重要。
目前市面上常見(jiàn)的產(chǎn)品都會(huì)在用標(biāo)題來(lái)告知用戶(hù)當(dāng)前所處頁(yè)面，有段時(shí)間特別流行類(lèi)似APP Store這種刻意放大來(lái)突出頁(yè)面標(biāo)題。值得一提的是，在IOS中如果從一個(gè)APP跳轉(zhuǎn)至另一個(gè)APP左上角則會(huì)出現(xiàn)上一個(gè)APP的名稱(chēng)，切點(diǎn)擊可以快速返回。如上圖中的淘寶頁(yè)面，我是通過(guò)微博點(diǎn)擊廣告鏈接后跳轉(zhuǎn)進(jìn)入的。
3. 交互通用性
只要是用戶(hù)熟悉的交互形式，用戶(hù)就不用浪費(fèi)時(shí)間去記憶，即使不用文字說(shuō)明，也能有效的保證用戶(hù)的識(shí)別。
在文字閱讀或者編輯的時(shí)候，長(zhǎng)按可以拷貝/粘貼，即使不用說(shuō)明，絕大部分用戶(hù)也能get到，還有就是預(yù)覽圖片時(shí)候，使用手指交換進(jìn)行縮放。
4. 歷史記錄
提供最近訪問(wèn)項(xiàng)可以幫助用戶(hù)恢復(fù)他們未完成的任務(wù)以及難以回憶的任務(wù)。
最常見(jiàn)的莫過(guò)于瀏覽器的歷史記錄，可以幫助用戶(hù)回憶尋找某個(gè)時(shí)間節(jié)點(diǎn)的內(nèi)容，微信的聊天記錄劃分了更多的維度來(lái)幫助用戶(hù)搜索相應(yīng)的記錄。淘寶瀏覽商品不穩(wěn)定性較大，有時(shí)用戶(hù)會(huì)因?yàn)槟硞€(gè)宣傳而點(diǎn)進(jìn)某個(gè)商品，通過(guò)足跡可以查看瀏覽記錄，這樣就不用特地去記店鋪名稱(chēng)或者加入收藏夾了。
“用戶(hù)看不見(jiàn)的加速器（快捷方式）通?？梢约涌鞂?zhuān)家用戶(hù)的交互速度，從而使系統(tǒng)可以同時(shí)滿(mǎn)足經(jīng)驗(yàn)不足和經(jīng)驗(yàn)豐富的用戶(hù)。允許用戶(hù)定制頻繁的操作。”
系統(tǒng)需要同時(shí)適用于新手用戶(hù)與專(zhuān)家用戶(hù)，對(duì)于新手用戶(hù)來(lái)說(shuō)，需要盡量降低他們的學(xué)習(xí)成本，幫助他們快速上手，而對(duì)于專(zhuān)家用戶(hù)來(lái)說(shuō)，他們需要的是快捷以及高效。
1. 千人千面
在注重用戶(hù)數(shù)據(jù)分析的今天，很多時(shí)候已經(jīng)不用用戶(hù)自己手動(dòng)去設(shè)置自己的偏好，產(chǎn)品便能像你所想。
左圖的滴答清單是最為常見(jiàn)的為新手用戶(hù)準(zhǔn)備的引導(dǎo)方式，右圖支付寶的財(cái)富界面，如果是新手用戶(hù)，那么金剛區(qū)下方則展示現(xiàn)金紅包，基金推薦等吸新人，如果是基金老用戶(hù)了，則會(huì)展示更加專(zhuān)業(yè)的數(shù)據(jù)字段來(lái)幫助用戶(hù)決策。
2. 重復(fù)操作
對(duì)于熟悉的產(chǎn)品，一般來(lái)說(shuō)用戶(hù)更希望一切趨于穩(wěn)定。
在外賣(mài)這種使用頻次較高選擇項(xiàng)較多的產(chǎn)品中，很大一部分用戶(hù)不愿意冒著風(fēng)險(xiǎn)嘗試新的菜品，或者點(diǎn)餐決策時(shí)間較短（比如開(kāi)會(huì)），他們很多時(shí)候會(huì)選擇“再來(lái)一單”。
3. 快捷方式
在操作同一款軟件時(shí)，專(zhuān)家用戶(hù)的屏幕只有一個(gè)預(yù)覽窗口，而我…恨不得屏幕再大點(diǎn)，塞下所有工具欄。
在各種軟件中都會(huì)設(shè)置快捷鍵便于專(zhuān)家用戶(hù)的高效操作，比如專(zhuān)家用戶(hù)的Photoshop和我的PS。
“對(duì)話(huà)中不應(yīng)包含無(wú)關(guān)緊要或很少需要的信息。對(duì)話(huà)中每增加一個(gè)信息單元都會(huì)與相關(guān)信息單元競(jìng)爭(zhēng)，從而降低其相對(duì)可見(jiàn)度?！?
我們?cè)谠O(shè)計(jì)一個(gè)頁(yè)面的時(shí)候，如果其中的元素都想突出，最終只會(huì)導(dǎo)致沒(méi)有任何突出的元素。這里可以參考“信噪比”的概念，即相關(guān)信息與無(wú)關(guān)信息的比例，用戶(hù)的注意力是有限的，降低不必要的視覺(jué)噪音，才不會(huì)過(guò)于分散用戶(hù)的注意力，提高用戶(hù)效率。
1. 文字內(nèi)容
資訊類(lèi)產(chǎn)品中最為常見(jiàn)，如果一大段文字又臭又長(zhǎng),那么就很容易影響到想要傳達(dá)給用戶(hù)的核心思想。
36氪在快訊頁(yè)面中會(huì)將重點(diǎn)資訊標(biāo)紅來(lái)突出，此外默認(rèn)情況下只展示資訊標(biāo)題，方便用戶(hù)快速瀏覽，如果遇到感興趣的資訊可以再選擇展開(kāi)瀏覽詳細(xì)信息。
2. 視覺(jué)元素
利用這個(gè)原理，現(xiàn)在的產(chǎn)品會(huì)在一些視覺(jué)元素處理上做出區(qū)分，不僅能引導(dǎo)用戶(hù)快速完成預(yù)設(shè)的操作路徑，且對(duì)產(chǎn)品本身業(yè)務(wù)也是相當(dāng)有利。
淘寶的結(jié)算頁(yè)面中，為了促使用戶(hù)剁手不受干擾，會(huì)將付款btn與其他做高反差處理，同理Airbnb在首頁(yè)中將搜索房源作同樣的的處理，只要促使用戶(hù)搜索了，那就提高了剁手的轉(zhuǎn)化率。
“錯(cuò)誤信息應(yīng)該使用簡(jiǎn)單的語(yǔ)言表示，準(zhǔn)確指示問(wèn)題并建設(shè)性地提出解決方案。”
原文中特地強(qiáng)調(diào)不要用代碼去表示錯(cuò)誤信息，即用用戶(hù)能夠理解的，通俗的，接地氣的詞匯，千萬(wàn)不要用一些專(zhuān)業(yè)性術(shù)語(yǔ)。用語(yǔ)盡量禮貌，不要責(zé)怪用戶(hù)，讓他們覺(jué)得自己是個(gè)傻逼，這樣很容易讓他們產(chǎn)生挫敗感。
得道在使用手機(jī)號(hào)登錄的時(shí)候手機(jī)號(hào)少輸入了一位，以至于登錄btn一直無(wú)法點(diǎn)擊，雖然診斷了錯(cuò)誤，但是沒(méi)有明確的告知用戶(hù)錯(cuò)在哪。Behance在這方面就顯得更為完善，會(huì)實(shí)時(shí)判斷狀態(tài)，并且實(shí)時(shí)告知原因，協(xié)助用戶(hù)進(jìn)行改正。
“即使可以在沒(méi)有文檔的情況下使用系統(tǒng)會(huì)更好，但可能仍需要提供幫助和文檔。任何此類(lèi)信息都應(yīng)該易于搜索，著眼于用戶(hù)的任務(wù)，列出要執(zhí)行的具體步驟，并且信息量不要太大。”
每個(gè)用戶(hù)的背景都有所不同，所以很難確保所有用戶(hù)都能暢通無(wú)阻的使用自己的產(chǎn)品。無(wú)論什么類(lèi)型的產(chǎn)品，都盡量給用戶(hù)提供一個(gè)幫助的途徑，對(duì)于那些只需要一句話(huà)就能概括的，可以考慮在附近進(jìn)行簡(jiǎn)短的說(shuō)明，而對(duì)于需要復(fù)雜說(shuō)明的，最好統(tǒng)一一個(gè)幫助入口，且放置于用戶(hù)易于找到的位置。
在IOS的設(shè)置中，會(huì)在一些設(shè)置項(xiàng)下添加簡(jiǎn)要的說(shuō)明，以此來(lái)幫助用戶(hù)更好的理解。印象筆記與普遍的產(chǎn)品一樣，在菜單欄上有幫助的入口，而且提供精準(zhǔn)的搜索功能，幫助用戶(hù)更快的解決有可能遇到的問(wèn)題。
篩選可以說(shuō)是我使用比較頻繁的一種交互形式，比如我點(diǎn)外賣(mài)，會(huì)選擇滿(mǎn)減優(yōu)惠力度大，同時(shí)我也可以選擇在哪一個(gè)價(jià)格區(qū)間內(nèi)的產(chǎn)品，這就會(huì)用到篩選，而到了B端產(chǎn)品上來(lái)，一個(gè)CRM系統(tǒng)當(dāng)中，篩選的邏輯也會(huì)比移動(dòng)端的復(fù)雜，伴隨著：且關(guān)系、或關(guān)系、大于、小于等等這樣復(fù)雜的邏輯，也為設(shè)計(jì)本身增加了很多難度。因此，今天我們就來(lái)討論討論篩選控件
篩選存在的對(duì)于整個(gè)表單來(lái)說(shuō)是非常重要的，它可以幫助用戶(hù)，在表單茫茫多的數(shù)據(jù)當(dāng)中進(jìn)行快速的定位；可以對(duì)表單進(jìn)行快速劃分，縮短用戶(hù)對(duì)于數(shù)據(jù)的尋找時(shí)間；能夠滿(mǎn)足用戶(hù)在工作中，實(shí)際業(yè)務(wù)場(chǎng)景的篩選。
對(duì)于實(shí)際B端場(chǎng)景來(lái)說(shuō)，篩選是日常數(shù)據(jù)分類(lèi)的一個(gè)重要途徑，我們先來(lái)看看實(shí)際場(chǎng)景到底有哪些？
比如今天作為一個(gè)電話(huà)銷(xiāo)售人員，想要聯(lián)系最近注冊(cè)的用戶(hù)時(shí)，通常會(huì)通過(guò)篩選來(lái)選出最近幾天注冊(cè)過(guò)，同時(shí)又沒(méi)有銷(xiāo)售更進(jìn)的客戶(hù)，進(jìn)行一個(gè)優(yōu)先級(jí)的排布；
再比如說(shuō)，在銷(xiāo)售周報(bào)當(dāng)中，銷(xiāo)售主管可以通過(guò)篩選得到每個(gè)人這周完成的狀態(tài)，也可以通過(guò)篩選得出每個(gè)人對(duì)于線索的更進(jìn)情況和對(duì)客戶(hù)的流失狀態(tài)等等，這些都可以通過(guò)各種各樣的篩選形式來(lái)滿(mǎn)足用戶(hù)對(duì)于特定情況下的使用
篩選可以通過(guò)多個(gè)篩選條件進(jìn)行多維度的尋找，而導(dǎo)航、搜索只能通過(guò)單一條件進(jìn)行指定篩選。
雖然在現(xiàn)在很多搜索都可以支持多維度用空格去進(jìn)行多字段的關(guān)鍵詞搜索，但本質(zhì)上區(qū)別不大
所以在B端項(xiàng)目當(dāng)中，如果你有表單，那你就需要篩選
我們將篩選分為基礎(chǔ)篩選和高級(jí)篩選兩種，兩種篩選會(huì)根據(jù)業(yè)務(wù)場(chǎng)景不同，在不同的頁(yè)面去使用
基礎(chǔ)篩選一般為系統(tǒng)預(yù)設(shè)好的篩選字段，具有很強(qiáng)的業(yè)務(wù)和場(chǎng)景的需求?；A(chǔ)篩選一般分為四個(gè)部分：
篩選條件：是指用戶(hù)可以篩選的范圍
篩選項(xiàng)：是指用戶(hù)可以選擇的篩選項(xiàng)目
已選項(xiàng)：是指用戶(hù)已經(jīng)選中的篩選項(xiàng)
備選項(xiàng)：是指用戶(hù)還沒(méi)有選擇的篩選選項(xiàng)
基礎(chǔ)篩選更多作為用戶(hù)快捷篩選的一種方式，因?yàn)橐话闶褂脠?chǎng)景當(dāng)中用戶(hù)幾個(gè)篩選邏輯為“且”
同時(shí)篩選的邏輯也為簡(jiǎn)單篩選，所以在使用場(chǎng)景上只適合在對(duì)篩選要求不高的場(chǎng)景下使用。
高級(jí)篩選一般為篩選中含有運(yùn)算符，同時(shí)篩選當(dāng)中包含條件關(guān)系，比如且關(guān)系或者否關(guān)系。一般高級(jí)篩選包含以下幾類(lèi)關(guān)鍵詞
篩選關(guān)系：是指幾個(gè)篩選條件之間的關(guān)系，一般為 且、或關(guān)系，即 且 關(guān)系為幾個(gè)條件之間的交集；或 關(guān)系為幾個(gè)條件之間的聯(lián)集（并集）
篩選字段：是指在篩選當(dāng)中，所要的篩選項(xiàng)，一般為表單當(dāng)中的所有可篩選的字段
篩選操作：是指篩選字段和篩選值之間的關(guān)系，常見(jiàn)的篩選操作有：大于、小于、是、否、包含、不包含、為空、不為空等等。
篩選值：你所需要篩選的數(shù)值
高級(jí)篩選一般滿(mǎn)足更多的用戶(hù)場(chǎng)景，為用戶(hù)多條件多字段、多個(gè)篩選關(guān)系、多個(gè)篩選操作 提供有利保障。
當(dāng)在篩選器條件少于5個(gè)的情況下，最常使用的就是上下布局，這樣篩選能與網(wǎng)站保持統(tǒng)一的情況下，上下布局也更方便用戶(hù)進(jìn)行閱讀
當(dāng)篩選器過(guò)多的情況下（一般在5-15個(gè)之間），篩選器過(guò)多，需要滾屏才能看到篩選結(jié)果，用戶(hù)使用起來(lái)會(huì)很別扭。所以在5-15個(gè)的情況下，一般會(huì)將篩選項(xiàng)進(jìn)行收折，這樣保證篩選整體面積不會(huì)太大，同時(shí)將用戶(hù)常用的篩選放在前面，可以滿(mǎn)足用戶(hù)基本的業(yè)務(wù)需求和使用場(chǎng)景
左右布局在PC端一般是以字段選擇進(jìn)行篩選，通俗來(lái)講就是將用戶(hù)可以篩選的所有字段全部羅列出來(lái)，然后通過(guò)勾選選，擇出你需要篩選的字段，進(jìn)行篩選器的使用
左右布局的好處是能夠?qū)⒑Y選的所有條件都直接的展示出來(lái)，可以適應(yīng)很多場(chǎng)景，在篩選器用15個(gè)以上時(shí)。通過(guò)左右布局的方式，能夠讓篩選條件進(jìn)行滾動(dòng)，在最大限度保持用戶(hù)使用體驗(yàn)
在日常的B端產(chǎn)品中，篩選的形式有哪些？篩選到底應(yīng)該怎么設(shè)計(jì)？接下來(lái)為大家總結(jié)梳理一些在 B端產(chǎn)品 中的篩選玩法，希望為你開(kāi)啟新大陸。
平鋪型一般為用戶(hù)搜索結(jié)果數(shù)據(jù)量過(guò)大，使用戶(hù)搜索出來(lái)的結(jié)果與其預(yù)期差距過(guò)大，用戶(hù)然后可以通過(guò)篩選對(duì)數(shù)據(jù)的再一次分類(lèi)，使用戶(hù)能夠精準(zhǔn)尋找其想要的結(jié)果。
平鋪型一般為篩選條件少于6個(gè)，這樣能夠通過(guò)1行或者2行去展示篩選項(xiàng)的結(jié)果
多用于信息量大的產(chǎn)品，比如電商、視頻網(wǎng)站等等。常見(jiàn)的淘寶、京東、騰訊視頻PC端 都采取用這樣的方式，將所有的篩選條件列出來(lái)。
平鋪型的好處是將篩選項(xiàng)的結(jié)果全部或者部分放出，能夠幫助用戶(hù)快速理解篩選項(xiàng)以及快讀找到自己想要的結(jié)果。
缺點(diǎn)也是很明顯，平鋪型的控件占比大，需要占據(jù)大量面積展示平鋪出的篩選結(jié)果。
比如淘寶PC端，搜索一個(gè)產(chǎn)品后花去40%的面積去展示所有的篩選條件，其實(shí)就是想引導(dǎo)用戶(hù)，淘寶搜索過(guò)后spu的數(shù)量仍然過(guò)大，想通過(guò)進(jìn)一步的篩選，讓用戶(hù)明確自己對(duì)想要東西。同時(shí)因?yàn)槊娣e占比大，通常平鋪型都是以收折的狀態(tài)，只有在搜索觸發(fā)后才會(huì)完全展開(kāi)
收折型篩選是一種簡(jiǎn)單直接的篩選形式，將用戶(hù)常用的篩選形式通過(guò)下拉框的形式進(jìn)行篩選。每一個(gè)篩選條件就是一個(gè)下拉框，這種形式看上去很簡(jiǎn)單，但是在B端場(chǎng)景中，下拉框?qū)τ谟脩?hù)來(lái)說(shuō)認(rèn)知成本低，操作性也較強(qiáng)，同時(shí)在用戶(hù)重度使用時(shí)，又能給用戶(hù)很好的使用體驗(yàn)的一種方式
用戶(hù)可以直接對(duì)其常用的字段篩選進(jìn)行一步操作，并且沒(méi)有復(fù)雜的篩選關(guān)系，全部都是“且”的篩選邏輯，能夠保證用戶(hù)進(jìn)行快速的篩選選擇
將所有信息全部平鋪展開(kāi)，信息量過(guò)于冗雜繁多，同時(shí)在做通用性產(chǎn)品時(shí)，這種方式很難做到通用性
單側(cè)篩選是一種更通用的篩選形式，通過(guò)對(duì)于你想篩選的字段進(jìn)行勾選，勾選完成后就會(huì)出現(xiàn)篩選條件，然后選擇篩選字段、篩選操作、篩選值，一般選擇完成所有篩選后，還需要點(diǎn)擊查詢(xún)，篩選操作才算完成。
整個(gè)單側(cè)篩選，大量的篩選條件可以放置在表單的左側(cè)或者右側(cè)，通過(guò)表單縱向空間，去承載大量篩選條件。
節(jié)省空間、通用性強(qiáng)。因?yàn)樵诤芏郤aas系統(tǒng)、Paas系統(tǒng)當(dāng)中，無(wú)法針對(duì)每一個(gè)客戶(hù)進(jìn)行設(shè)計(jì)，就要考慮到系統(tǒng)通用型高，做一些大而全的功能。在每個(gè)表單也所需要定制化修改的地方很少，同時(shí)能容納的信息量可以很大。
就是在后臺(tái)系統(tǒng)當(dāng)中只有這一種篩選形式會(huì)面臨在我常用的幾種篩選的字段中，要通過(guò)不斷尋找，來(lái)滿(mǎn)足我的篩選需求，操作麻煩。
我們產(chǎn)品在某一次改版就將篩選由收折式修改為單側(cè)式，因?yàn)槲覀冇脩?hù)使用篩選的場(chǎng)景非常的多，用戶(hù)每次篩選都要多進(jìn)行2、3步操作，導(dǎo)致用戶(hù)進(jìn)行了大量的吐槽，后來(lái)進(jìn)行修改，將篩選順序支持手動(dòng)調(diào)整順序，用戶(hù)吐槽的次數(shù)才慢慢減少。
表頭篩選是一種復(fù)雜篩選的形式，其最開(kāi)始是來(lái)源于Excel的篩選形式。點(diǎn)擊表單的篩選按鈕，可以將表頭的篩選字段直接帶入，方便用戶(hù)。之后在后臺(tái)產(chǎn)品的發(fā)展中，得以借鑒過(guò)來(lái)。
可以通過(guò)表頭的點(diǎn)擊，使用戶(hù)更快捷進(jìn)入到自己的篩選條件，在通常情況下，在表單越左的數(shù)據(jù)顯然是越重要的，也是使用篩選去篩頻率最高的，因此高頻的篩選場(chǎng)景基本還是得到滿(mǎn)足。
用戶(hù)第一次進(jìn)入系統(tǒng)很難理解這種交互形式，且在每個(gè)表頭都會(huì)有一個(gè)icon，影響用戶(hù)對(duì)于表頭的識(shí)別。
通過(guò)點(diǎn)擊篩選按鈕，展現(xiàn)出篩選彈窗，進(jìn)行篩選。這種篩選適合在篩選功能在系統(tǒng)中不是很重要的層級(jí)。最常見(jiàn)的就是Tapd，在其中篩選不是很強(qiáng)的一個(gè)功能，同時(shí)也是系統(tǒng)中十分有必要的。
是能夠在節(jié)省面積的情況下，可以進(jìn)行很復(fù)雜的篩選，同時(shí)可以支持復(fù)雜情況下的篩選
彈窗會(huì)遮擋一部分表單數(shù)據(jù)，會(huì)影響篩選人的判斷，其次篩選條件的添加也相對(duì)更加繁瑣。
在我們一系列篩選的調(diào)整過(guò)后，我們團(tuán)隊(duì)也總結(jié)了對(duì)于我們來(lái)說(shuō)更重要的條件和形式，來(lái)和大家分享探討一下。
我們認(rèn)為影響篩選控件最重要的是用戶(hù)的使用頻率，因?yàn)橛脩?hù)的使用頻率和使用方式，直接影響到我們篩選是用普通篩選or高級(jí)篩選，也會(huì)影響到篩選的形式。
篩選功能的做法，取決于我們產(chǎn)品未來(lái)是想往哪一個(gè)方向發(fā)展，如果想把功能做的強(qiáng)大，就得考慮到篩選的后續(xù)擴(kuò)展性。因此滿(mǎn)足實(shí)際業(yè)務(wù)也是十分重要。
在B端系統(tǒng)當(dāng)中，最可能遇見(jiàn)的就是你給用戶(hù)設(shè)計(jì)的路徑但是其實(shí)用戶(hù)根本沒(méi)有往你想的方向去操作。我們系統(tǒng)最開(kāi)始給用戶(hù)設(shè)計(jì)好了很多功能點(diǎn)，但是用戶(hù)對(duì)于這個(gè)點(diǎn)的認(rèn)知成本實(shí)在過(guò)低，也導(dǎo)致了后面系統(tǒng)功能點(diǎn)很多都被埋沒(méi)。因?yàn)樵谀阍O(shè)計(jì)好了一個(gè)功能點(diǎn)后，要適當(dāng)引導(dǎo)用戶(hù)，解釋這個(gè)功能的使用場(chǎng)景才不會(huì)讓你設(shè)計(jì)的功能被淹沒(méi)。
關(guān)于樹(shù)形選擇，我們必須先知道它的基礎(chǔ)概念，“樹(shù)” 究竟是什么？我們先來(lái)看看樹(shù)狀結(jié)構(gòu)的定義
樹(shù)狀結(jié)構(gòu)其實(shí)是作為一種層次結(jié)構(gòu)化的表達(dá)方式，它能夠?qū)?shù)的抽象出來(lái)表達(dá)完整的構(gòu)造關(guān)系，為什么叫做樹(shù)，是因?yàn)樗袷且粋€(gè)上下顛倒的樹(shù)，根部在最頂端，枝葉反而變?yōu)橄路健?
同樣在對(duì)樹(shù)狀結(jié)構(gòu)的整體命名上，也遵循了與之類(lèi)似的表達(dá)方式：
節(jié)點(diǎn)（Node）：是樹(shù)狀結(jié)構(gòu)當(dāng)中的基本單位，使用節(jié)點(diǎn)可以表示 不同數(shù)據(jù)間的 組成關(guān)系（從屬關(guān)系與并列關(guān)系）通常節(jié)點(diǎn)會(huì)分為幾類(lèi)特殊情況。
1.根節(jié)點(diǎn)：整個(gè)樹(shù)狀結(jié)構(gòu)的開(kāi)端被稱(chēng)為根節(jié)點(diǎn)。一個(gè)樹(shù)狀結(jié)構(gòu)一定只有一個(gè)根，在思維導(dǎo)圖中，根節(jié)點(diǎn)就代表著它的開(kāi)端，用于延展出更多的樹(shù)狀結(jié)構(gòu)。不過(guò)在目前的樹(shù)形選擇當(dāng)中，因?yàn)閷?duì)易用性的要求，通常會(huì)隱藏根節(jié)點(diǎn)，只展示子節(jié)點(diǎn)。而根節(jié)點(diǎn)隱藏在 標(biāo)題、選項(xiàng)文本 當(dāng)中。
2.子節(jié)點(diǎn)：根節(jié)點(diǎn)之外的節(jié)點(diǎn)被稱(chēng)為子節(jié)點(diǎn)。一個(gè)樹(shù)狀結(jié)構(gòu)子節(jié)點(diǎn)數(shù)量是沒(méi)有具體限制，在樹(shù)形選擇當(dāng)中是直接展示出來(lái)的部分。
3.葉節(jié)點(diǎn)：沒(méi)有連接到其他子節(jié)點(diǎn)的節(jié)點(diǎn)。葉節(jié)點(diǎn)屬于一類(lèi)特殊的子節(jié)點(diǎn)，它是整個(gè)樹(shù)狀結(jié)構(gòu)的最末端節(jié)點(diǎn)，在樹(shù)形選擇當(dāng)中是一個(gè)重要的概念，下面會(huì)展開(kāi)來(lái)講。
分支（Branch）：節(jié)點(diǎn)之間的鏈接，在我們樹(shù)形選擇當(dāng)中，分支的線條可以選擇顯隱。其搭配的使用方式也有所不同
同時(shí)我們還會(huì)用到節(jié)點(diǎn)的幾個(gè)基礎(chǔ)的概念：
節(jié)點(diǎn)層級(jí)：指當(dāng)前節(jié)點(diǎn)所在的層級(jí)，比如根節(jié)點(diǎn)為第一層級(jí)，根的子節(jié)點(diǎn)為第二層級(jí)，以此類(lèi)推；
節(jié)點(diǎn)高度：對(duì)于某一節(jié)點(diǎn)的高度，便是該節(jié)點(diǎn)下所有葉節(jié)點(diǎn)從上到下的個(gè)數(shù)；
節(jié)點(diǎn)深度：指該節(jié)點(diǎn)到根節(jié)點(diǎn)的唯一路徑長(zhǎng)度，深度與層級(jí)較為類(lèi)似。
樹(shù)狀結(jié)構(gòu)究竟出現(xiàn)在生活中的什么地方呢？樹(shù)狀結(jié)構(gòu)對(duì)于我們又有什么用呢？大家可能理解上會(huì)覺(jué)得很枯燥，我給大家舉一個(gè)例子：
回憶一下我們小學(xué)使用字典時(shí)的場(chǎng)景，首先我們是先通過(guò)聲母，去確定這個(gè)漢字的大概的頁(yè)數(shù)范圍，然后通過(guò)韻母去確定這個(gè)漢字的詳細(xì)位置，最后通過(guò)音調(diào)找到想要尋找的漢字：
其實(shí)字典的設(shè)計(jì)，便是一個(gè)典型的樹(shù)形結(jié)構(gòu)。而在 B端系統(tǒng)中我們常見(jiàn)的公司組織架構(gòu)、省 市 縣 地址選擇、在線教育的班級(jí)結(jié)構(gòu) 等等，這些都是使用了完整的樹(shù)形結(jié)構(gòu)。
采用樹(shù)形可以快速進(jìn)行結(jié)構(gòu)化的表達(dá)，其目的是為了用戶(hù)能夠快速地增刪改查，想要更多了解結(jié)構(gòu)化表達(dá)的同學(xué)推薦大家看一本書(shū)《金字塔原理》，里面講了非常多的邏輯化思維、表達(dá)的方法與內(nèi)容，內(nèi)容比較多，而這種思維其實(shí)在我們工作生活中都能夠用到。
1.層級(jí)縮進(jìn)
為了將樹(shù)的整個(gè)結(jié)構(gòu)完整的表達(dá)出來(lái)，會(huì)使用層級(jí)縮進(jìn)的方式進(jìn)行區(qū)分，通常會(huì)使用 8px 對(duì)下一級(jí)節(jié)點(diǎn)進(jìn)行縮進(jìn)，這樣能夠表達(dá)更為完整的層級(jí)關(guān)系。
這里要注意，如果想要更為強(qiáng)調(diào)樹(shù)形選擇的層級(jí)關(guān)系或者樹(shù)形內(nèi)容本身就比較多的情況下，可以見(jiàn)解 Coding 編輯器的思路，即：將縮進(jìn)內(nèi)容使用“分支線”進(jìn)行表達(dá)，更明確清晰。 這里使用層級(jí)線后，折疊圖標(biāo)也會(huì)有所不同，下面有明確解釋。
2.折疊圖標(biāo)（節(jié)點(diǎn)按鈕）
主要是將節(jié)點(diǎn)下的所有樹(shù)葉與子節(jié)點(diǎn)進(jìn)行展示，在整個(gè)樹(shù)的結(jié)構(gòu)中，折疊圖標(biāo)一般分為兩種：三角折疊、方形折疊
三角折疊：為頁(yè)面層級(jí)較少時(shí)使用。因?yàn)樵谳^少的層級(jí)下，用戶(hù)不用特意去思考當(dāng)前節(jié)點(diǎn)所在層級(jí)究竟在哪。
方形折疊： 更多與頁(yè)面層級(jí)線進(jìn)行配合使用，通過(guò)層級(jí)縮進(jìn)，將頁(yè)面層級(jí)線標(biāo)識(shí)清楚，能夠更好的在多層級(jí)情況下進(jìn)行合理區(qū)分。
3.選擇控件
整個(gè)樹(shù)形結(jié)構(gòu)依舊是在選擇錄入框架下，分為單選和多選。因此需要對(duì)其類(lèi)型有所展示，特別是在多選的場(chǎng)景下，一定要標(biāo)明它的類(lèi)型，方便用戶(hù)進(jìn)行理解使用。
通常這個(gè)控件可以在單選的時(shí)候進(jìn)行隱藏，這里先按下不表，我在樹(shù)形選擇的類(lèi)型當(dāng)中深入給同學(xué)們進(jìn)行分析理解。
4.選項(xiàng)文本
注意字?jǐn)?shù)限制、超出后如何處理即可，我就不做過(guò)多介紹。
在講樹(shù)形選擇之前，我先為大家講解關(guān)于與其相關(guān)的同類(lèi)型產(chǎn)品，為了方便大家的記憶，我選擇出了兩類(lèi)不同的組件進(jìn)行對(duì)比，感興趣的同學(xué)可以關(guān)注“CE青年” 后臺(tái)回復(fù)樹(shù)形對(duì)比進(jìn)行查看。我通過(guò)視頻的形式為大家進(jìn)行了講解，相信大家在看完之后一定會(huì)有所收獲。
單選樹(shù)只能選擇葉節(jié)點(diǎn)，也就是需要將每個(gè)樹(shù)展開(kāi)過(guò)后才能進(jìn)行選擇。
它是一個(gè)較為傳統(tǒng)的選擇方式，因?yàn)樗倪x擇熱區(qū)較小并且理解成本較高，因此這種方式不太滿(mǎn)足現(xiàn)如今對(duì)于B端產(chǎn)品效率提升方面的要求，并且要求十分特殊，因此使用較少，現(xiàn)多以單選節(jié)點(diǎn)樹(shù)為主。
單選節(jié)點(diǎn)樹(shù)與單選樹(shù)最大的區(qū)別在于其能夠選擇子節(jié)點(diǎn)，這樣可快速選擇該子節(jié)點(diǎn)以及其各種葉節(jié)點(diǎn)。
同時(shí)傳統(tǒng)的單選節(jié)點(diǎn)樹(shù)中是采取單選按鈕的方式，隨著對(duì)B端要求的不斷提高，并且在樹(shù)的功能越發(fā)的復(fù)雜過(guò)后，幾乎取消了 單選按鈕 的形式，取而代之的是將整個(gè) 文本標(biāo)簽 作為選擇的熱區(qū)，用戶(hù)點(diǎn)擊過(guò)后即可進(jìn)行選擇。
因此在樹(shù)形選擇當(dāng)中，逐漸將單選節(jié)點(diǎn)樹(shù)演變成由兩部分熱區(qū)所組成的一個(gè)控件：
在左側(cè)，主要以樹(shù)類(lèi)型的展開(kāi)折疊操作，熱區(qū)通常就是圖標(biāo)折疊圖標(biāo)這一部分；
在右側(cè)，以選擇該選項(xiàng)、節(jié)點(diǎn)的操作為主，熱區(qū)范圍以整個(gè)選項(xiàng)文本作為基礎(chǔ)，進(jìn)行延展即可。
這里還是提示以下新讀者，這類(lèi)選擇一定要進(jìn)行 Hover 狀態(tài)處理，不然用戶(hù)無(wú)法根據(jù)光標(biāo)的變化判斷是否可點(diǎn)擊，當(dāng)然老讀者跳過(guò)就行～
大家在對(duì)比單選與多選時(shí)會(huì)發(fā)現(xiàn)，為什么不會(huì)存在多選樹(shù)？不存在只選擇選項(xiàng)的多選呢？
思考時(shí)間又到了，別忘下劃，自己先想想呢～
雖然在理論上會(huì)存在多選樹(shù)的情況，但是它存在的價(jià)值比較詭異。首先在樹(shù)的節(jié)點(diǎn)當(dāng)中，我選擇一個(gè)子節(jié)點(diǎn)就是選擇該節(jié)點(diǎn)下的所有。因此可以說(shuō)是選擇了一個(gè)節(jié)點(diǎn)；或者說(shuō)它選擇了該節(jié)點(diǎn)下的多個(gè)選項(xiàng)，因此在實(shí)際情況中這類(lèi)場(chǎng)景過(guò)于的少，更多會(huì)用多選節(jié)點(diǎn)樹(shù)進(jìn)行代替。
當(dāng)然，多選節(jié)點(diǎn)樹(shù)與單選節(jié)點(diǎn)樹(shù)在結(jié)構(gòu)上是十分接近的，就是將復(fù)選框展示出來(lái)，方便大家進(jìn)行選擇。考慮到大家經(jīng)驗(yàn)不足，建議這里復(fù)選框放在折疊圖標(biāo)前側(cè)，原因有二：
在樹(shù)形選擇后續(xù)的拓展當(dāng)中，經(jīng)常會(huì)遇到選擇增加一些操作功能，比如 新增、刪除、復(fù)制、粘貼、拖動(dòng)排序。我看很多設(shè)計(jì)師最開(kāi)始因?yàn)榉N種原因?qū)⑦x擇組件部分放在后側(cè)，導(dǎo)致之后的操作無(wú)法進(jìn)行更多的拓展，隨之崩潰，對(duì)樹(shù)形選擇又是一頓亂造～
現(xiàn)有的基礎(chǔ)架構(gòu)基本都是沿用了這類(lèi)設(shè)計(jì)，可減少前端同學(xué)的工作量，同時(shí)也減少他 BUG 的產(chǎn)生。
多選節(jié)點(diǎn)樹(shù)的使用場(chǎng)景非常多，我舉一個(gè)大家在樹(shù)形選擇中都會(huì)犯的例子，希望大家能夠多理解其中存在的特殊邏輯：
比如在一個(gè)大型上市公司當(dāng)中，我作為老板會(huì)去設(shè)定整個(gè)“設(shè)計(jì)部”的權(quán)限，并且想要得到的效果是之后有任何新員工都是使用這個(gè)權(quán)限。如果作為一個(gè)新人設(shè)計(jì)師，很容易就會(huì)使用多選節(jié)點(diǎn)樹(shù)，將整個(gè)組織架構(gòu)進(jìn)行選擇，但是這樣的選擇與用戶(hù)實(shí)際想要的內(nèi)容是存在較大差異的。
在產(chǎn)品設(shè)計(jì)中，對(duì)于上訴的“設(shè)計(jì)部”這個(gè)概念其實(shí)是一個(gè)動(dòng)態(tài)數(shù)據(jù)，即在之后新增到“設(shè)計(jì)部”的所有員工，我不必再去權(quán)限管理中重新配置。我們遇到動(dòng)態(tài)數(shù)據(jù)的情況時(shí)，首先不建議大家采取樹(shù)形選擇，因?yàn)槭紫葘?duì)于這個(gè)概念的理解成本很高，無(wú)法通過(guò)樹(shù)形選擇這樣的方式讓用戶(hù)理解；同時(shí)系統(tǒng)對(duì)于這類(lèi)動(dòng)態(tài)數(shù)據(jù)的情況都建議特殊處理，至于怎么處理，大家可以在評(píng)論區(qū)討論，我也會(huì)在后續(xù)文章當(dāng)中為大家進(jìn)行講解。
易理解：
因?yàn)闃?shù)狀結(jié)構(gòu)本身就已經(jīng)存在很久，早在 DOS 計(jì)算機(jī)時(shí)代就有它的影子，經(jīng)過(guò)長(zhǎng)期累月的發(fā)展，用戶(hù)在理解上也會(huì)相對(duì)更加容易
快瀏覽：
在數(shù)據(jù)量特別大的時(shí)候，能夠根據(jù)子節(jié)點(diǎn)優(yōu)先找到自己想要的葉節(jié)點(diǎn)，從而提升選擇效率，與《選擇錄入02》當(dāng)中講到的 Tab選擇十分類(lèi)似，沒(méi)看過(guò)的同學(xué)建議先去看看。
看結(jié)構(gòu)：
結(jié)構(gòu)，能夠輔助人們進(jìn)行快速記憶，從而對(duì)整體框架有著更深了解。而樹(shù)形選擇正是有了這種結(jié)構(gòu)能夠更為方便的讓更多人熟知，從而更快了解業(yè)務(wù)。
首先對(duì)于樹(shù)形選擇本身的控件形式，你就需要去分析其能承載的內(nèi)容數(shù)據(jù)量。應(yīng)該是在什么范圍內(nèi)較為合適。
當(dāng)數(shù)據(jù)量過(guò)大時(shí)一定會(huì)出現(xiàn)異步加載、數(shù)據(jù)分頁(yè)等諸多情況，因此在設(shè)計(jì)中，需對(duì)這類(lèi)情況進(jìn)行設(shè)計(jì)。
全選功能本身較為簡(jiǎn)答，無(wú)外乎就是一個(gè)復(fù)選框的事情，但是在上面提到的數(shù)據(jù)量過(guò)大 + 全選的存在，會(huì)有些問(wèn)題還需要大家進(jìn)行留意。
在樹(shù)形選擇當(dāng)中，都可以采取鍵盤(pán)操作從而提高效率。基本規(guī)則是：
↑鍵：向上切換同級(jí)節(jié)點(diǎn)；從第一子節(jié)點(diǎn)，順序返回父節(jié)點(diǎn)；
↓鍵：向下切換同級(jí)節(jié)點(diǎn)；順序進(jìn)入已展開(kāi)的第一子節(jié)點(diǎn)；
←鍵：關(guān)閉當(dāng)前級(jí)別節(jié)點(diǎn)；返回上一級(jí)父節(jié)點(diǎn)；
→鍵：展開(kāi)子節(jié)點(diǎn)列表；順序進(jìn)入已經(jīng)展開(kāi)的第一子節(jié)點(diǎn)；
回車(chē)鍵：提交當(dāng)前 foucs 的節(jié)點(diǎn)選項(xiàng)；
樹(shù)形選擇是較為常見(jiàn)的一類(lèi)方式，但由于大家對(duì) 基本的樹(shù)形結(jié)構(gòu) 認(rèn)識(shí)不足，導(dǎo)致對(duì)其設(shè)計(jì)會(huì)有許多誤區(qū)。
最近看到很多美妝博主都在出什么紅黑榜，其實(shí)就是在說(shuō)哪些產(chǎn)品是有問(wèn)題，不推薦大家使用，有哪些東西是可以安利的好物。
想著B(niǎo)端設(shè)計(jì)當(dāng)中，也會(huì)存在這一情況。然后我在打開(kāi) Ant Design ，瀏覽完所有的組件，你會(huì)發(fā)現(xiàn)：“組件當(dāng)中也會(huì)存在紅黑榜~”
今天就趁著 618 剛過(guò)的這個(gè)時(shí)間節(jié)點(diǎn)，我也來(lái)“帶帶貨”，說(shuō)說(shuō)B端組件當(dāng)中的紅黑榜
首先我先說(shuō)一下關(guān)于紅黑榜的定義
1.使用頻率高：也就是這個(gè)組件我們平時(shí)會(huì)頻繁的使用
2.黑榜：在使用過(guò)程中，會(huì)遇到諸多問(wèn)題，導(dǎo)致無(wú)法正常使用
3.紅榜：往往會(huì)更滿(mǎn)足B端產(chǎn)品的實(shí)際需求，對(duì)于組件有更深的認(rèn)識(shí)
通過(guò)我的分享能夠給大家有一個(gè)初步的認(rèn)識(shí)，當(dāng)然整個(gè)組件都是基于我平時(shí)的設(shè)計(jì)觀察與使用，目的也是想和大家分享、避避坑，如果有什么疑惑，歡迎在評(píng)論區(qū)我們一起討論~
樹(shù)形選擇在B端系統(tǒng)當(dāng)中的出現(xiàn)頻率非常高，比如我們常見(jiàn)的：表格、表單、各類(lèi)詳情頁(yè)，只要涉及到 層級(jí)結(jié)構(gòu)的選擇，都會(huì)有它的身影（注意，這里主要說(shuō)的是樹(shù)狀的選擇類(lèi)組件）但是作為設(shè)計(jì)師，樹(shù)形選擇在使用的過(guò)程當(dāng)中，會(huì)出現(xiàn)很多意想不到問(wèn)題
尺寸無(wú)法確定
因?yàn)闃?shù)形選擇本身這個(gè)組件的特殊性，它的大小需要通過(guò)內(nèi)容當(dāng)中的高度與寬度共同決定，而在設(shè)計(jì)過(guò)程當(dāng)中，高度與寬度究竟為多少就要仔細(xì)的考慮
因?yàn)樵谑褂脴?shù)形選擇時(shí)，需要思考每一個(gè)內(nèi)容的具體尺寸，太高太低都不行
如果太低，展開(kāi)樹(shù)形選擇就會(huì)非常的麻煩；如果太高，則在數(shù)據(jù)量較少的時(shí)候，會(huì)給人數(shù)據(jù)很空
橫向空間也是同理，也就造成了在設(shè)計(jì)時(shí)，需要深入思考
樹(shù)形選擇，作為基礎(chǔ)組件，在應(yīng)付復(fù)雜的選擇需求時(shí)，很明顯的會(huì)感到“力不從心”，無(wú)論是從它顯示選中時(shí)的內(nèi)容，還是大量的數(shù)據(jù)時(shí)的選擇難度，樹(shù)形在適用性上，都會(huì)大大降低，當(dāng)遇到這類(lèi)情況時(shí)，建議采取更多 “業(yè)務(wù)組件” 的方式來(lái)對(duì)選擇進(jìn)行優(yōu)化
分類(lèi)表單（也可以叫Tab表單，不過(guò)只是代稱(chēng)而已~）在B端產(chǎn)品當(dāng)中也非常常見(jiàn)，它出現(xiàn)在復(fù)雜的表單當(dāng)中，但是作為設(shè)計(jì)師，在真正去使用分類(lèi)表單時(shí)，你就會(huì)發(fā)現(xiàn)會(huì)有非常多的問(wèn)題需要我們?nèi)ヌ幚?
對(duì)于用戶(hù)而言，分類(lèi)表單不能夠完整的查看表單信息，每一個(gè)都需要來(lái)回切換。也就意味著填寫(xiě)表單的時(shí)候，我們不能通過(guò)滾動(dòng)查看所有數(shù)據(jù)，而是要去點(diǎn)擊每一個(gè)單獨(dú)的分類(lèi)里面，通過(guò)分類(lèi)了解具體的表單內(nèi)容
同時(shí)必填項(xiàng)的提示，在分類(lèi)表單也非常難以處理，因?yàn)槠涿恳粋€(gè)獨(dú)立，而作為用戶(hù)，其實(shí)是不清楚具體哪一個(gè)分類(lèi)里面有必填項(xiàng)，也會(huì)導(dǎo)致填寫(xiě)的效率過(guò)于低下（其實(shí)會(huì)有處理的辦法，只是大家對(duì)于這類(lèi)提醒都不太滿(mǎn)意）
分類(lèi)表單在編輯狀態(tài)時(shí)，同樣難以處理。當(dāng)提交完分類(lèi)表單后，我們還需要考慮數(shù)據(jù)在詳情頁(yè)里的展示形式，因?yàn)楸韱闻c詳情頁(yè)的映射關(guān)系，這時(shí)候在設(shè)計(jì)時(shí)，應(yīng)該提供某一分類(lèi)下的數(shù)據(jù)編輯，還是整個(gè)分類(lèi)表單的數(shù)據(jù)編輯？
其實(shí)這種情況，特別是初級(jí)B端設(shè)計(jì)師，處理起來(lái)也是非常棘手
頂部導(dǎo)航非常特殊，雖然在我之前 導(dǎo)航菜單 的文章當(dāng)中提到過(guò)，但在使用頂部導(dǎo)航的過(guò)程當(dāng)中，還是會(huì)面臨很多問(wèn)題
頂部導(dǎo)航最大的局限性便是展示數(shù)量太低，畢竟在空間布局當(dāng)中，橫向空間與縱向空間的差異其實(shí)是非常大的，頂部導(dǎo)航的高度設(shè)定不能過(guò)高，同時(shí) 二級(jí)、三級(jí)菜單 只能夠使用下拉菜單，也就導(dǎo)致在導(dǎo)航菜單的設(shè)計(jì)當(dāng)中局限性過(guò)大，并且項(xiàng)目一旦發(fā)展過(guò)后，不容易解決問(wèn)題
當(dāng)然，頂部導(dǎo)航并不是一無(wú)是處，在許多工具型產(chǎn)品、官網(wǎng) 當(dāng)中，頂部導(dǎo)航都有著它的一席之地，其實(shí)這類(lèi)形式，更多是以?xún)?nèi)容為主的網(wǎng)站結(jié)構(gòu)，才會(huì)采取頂部導(dǎo)航，也就是上下結(jié)構(gòu)會(huì)更加合理
柵格嚴(yán)格意義上來(lái)講不算是組建，但是由于很多設(shè)計(jì)師 誤用、亂用，導(dǎo)致設(shè)計(jì)師為了柵格而柵格
因?yàn)樵诔Ｒ?jiàn)的移動(dòng)端設(shè)計(jì)當(dāng)中，是不存在柵格（主要是移動(dòng)端橫向空間小，使用不頻繁）
在桌面端的設(shè)計(jì)當(dāng)中，并不是說(shuō)柵格不好，而是很多時(shí)候設(shè)計(jì)師使用柵格往往會(huì)非常盲目，舉一個(gè)簡(jiǎn)單的例子，在表格當(dāng)中是否需要使用柵格？
答案是：“不用使用柵格”，其實(shí)這類(lèi)問(wèn)題就是目前很多設(shè)計(jì)師的問(wèn)題，因?yàn)闀?huì)盲目使用，也就導(dǎo)致了我在做設(shè)計(jì)的過(guò)程當(dāng)中，出現(xiàn)很多為了柵格而柵格的現(xiàn)象。后面有時(shí)間單獨(dú)總結(jié)一下柵格主要運(yùn)用在哪些地方，希望大家別盲目使用
至于柵格應(yīng)該如何使用，在我之前的文章當(dāng)中都有提到，可以自行點(diǎn)擊歷史記錄查看
滑動(dòng)輸入條在很多概念設(shè)計(jì)當(dāng)中都會(huì)經(jīng)常出現(xiàn)，特別是在 Dribbble 上的桌面端設(shè)計(jì)當(dāng)中，是每一個(gè)設(shè)計(jì)師的標(biāo)配，但是在實(shí)際的B端項(xiàng)目中，特別是桌面端的B端系統(tǒng)當(dāng)中，滑動(dòng)輸入條是非常不合理的一個(gè)組件
因?yàn)锽端產(chǎn)品當(dāng)中，大多數(shù)的產(chǎn)品都是需要精準(zhǔn)錄入，并且數(shù)據(jù)的區(qū)間非常大，因此也就造成了滑動(dòng)輸入條，使用起來(lái)給用戶(hù)的感受是非常糟糕的，并且由于大多數(shù)用戶(hù)的預(yù)期還是以直接輸入為主，這也就造成了現(xiàn)如今B端產(chǎn)品很見(jiàn)到滑動(dòng)輸入條的原因
面包屑導(dǎo)航在實(shí)際工作當(dāng)中經(jīng)常使用，因?yàn)樵诔Ｒ?jiàn)的B端系統(tǒng)當(dāng)中，導(dǎo)航菜單以及信息結(jié)構(gòu)，一定是非常復(fù)雜的（除非你的系統(tǒng)里面就只有一級(jí)導(dǎo)航菜單，并且沒(méi)有其他的頁(yè)面層級(jí)邏輯）
因此通過(guò)面包屑導(dǎo)航，能夠讓我們清晰知道整個(gè)頁(yè)面的信息結(jié)構(gòu)，通過(guò)面包屑又因?yàn)槠?nbsp;小巧、靈活，無(wú)論你是在一個(gè)完整大頁(yè)面當(dāng)中，又或者是一個(gè)小的氣泡卡片當(dāng)中，面包屑都能進(jìn)行承載，并且它還能夠起到 返回 的作用，又能夠清晰的展示頁(yè)面的路徑信息，是一個(gè)可以一舉多得的組件
穿梭框相比大家的不會(huì)陌生，在設(shè)計(jì)B端產(chǎn)品的時(shí)候，或多或少都會(huì)有所涉及，與此同時(shí)，由于穿梭框本身復(fù)雜，再加上很多設(shè)計(jì)師會(huì)覺(jué)得它占比過(guò)大，因此不會(huì)去使用
今天安利穿梭框，其實(shí)是想安利這一類(lèi)的穿梭類(lèi)的組件，你會(huì)發(fā)現(xiàn)其實(shí)很多業(yè)務(wù)選擇類(lèi)的組件都會(huì)通過(guò)穿梭框的形式進(jìn)行演變，比如我們常見(jiàn)的“國(guó)家城市選擇、部門(mén)成員選擇” 甚至表格當(dāng)中的字段顯示隱藏設(shè)置，這些都是傳統(tǒng)的數(shù)據(jù)選擇過(guò)后一步一步演變而來(lái)，因此這類(lèi)穿梭框型的數(shù)據(jù)選擇
其實(shí)更加體現(xiàn)的是設(shè)計(jì)師基于目前的組件所進(jìn)行的優(yōu)化，而分析它為何這樣做，這樣做的原因，成為了穿梭框上榜的理由
折疊面板就像一個(gè)大的“盒子”，當(dāng)產(chǎn)品經(jīng)理在你的身后說(shuō)著：“這個(gè)信息我要放，那個(gè)信息也不能落下的時(shí)候”，拖出一個(gè)折疊面板來(lái)解決這個(gè)問(wèn)題
其實(shí)在折疊面板的使用過(guò)程中，主要是在詳情頁(yè)以及表格當(dāng)中，因?yàn)檎郫B面板本身可以容納很多信息，并且能夠交代具體的層級(jí)關(guān)系，因此使用折疊面板能夠有更多展示數(shù)據(jù)的可能性，即插即用，非常方便
在頁(yè)面當(dāng)中的任何地方，蹦出一個(gè)氣泡卡片你都不會(huì)感到奇怪。其實(shí)氣泡卡片我在日常設(shè)計(jì)當(dāng)中，經(jīng)常使用的一個(gè)組件，因?yàn)樗軌蛉菁{下任意的內(nèi)容，小到一串文字、大到一個(gè)視頻，都能夠在氣泡卡片當(dāng)中進(jìn)行使用
并且在信息當(dāng)中，氣泡卡片作為一個(gè)信息補(bǔ)充的組件，因此在系統(tǒng)當(dāng)中，需要展示但是又不是那么重要的信息，使用氣泡卡片，就會(huì)更加的方便
最后一個(gè)，自然逃不掉我們的錨點(diǎn)導(dǎo)航。感覺(jué)在我的瘋狂安利下，越來(lái)越多的產(chǎn)品都開(kāi)始使用錨點(diǎn)導(dǎo)航。因?yàn)锽端產(chǎn)品必定是復(fù)雜且多的信息，自然而然我們?cè)谑褂玫倪^(guò)程當(dāng)中要更多考慮信息的承載
按鈕是任何用戶(hù)界面當(dāng)中（無(wú)論是桌面還是移動(dòng)用戶(hù)界面）必備的交互元素：甚至可以說(shuō)，如果頁(yè)面中沒(méi)有一個(gè)按鈕，整個(gè)頁(yè)面設(shè)計(jì)將是不完整的。在日常生活中，按鈕也是隨處可見(jiàn)的，一個(gè)電燈開(kāi)關(guān)、遙控器按鈕，現(xiàn)實(shí)生活中按鈕反復(fù)的出現(xiàn)也可以幫助我們不斷去理解屏幕世界中按鈕應(yīng)該如何操作，從而衍生出屏幕世界中的按鈕的具體形態(tài)
人機(jī)交互中最重要的就是把我們從小到大對(duì)于這個(gè)世界的認(rèn)識(shí)映射到屏幕世界中，比如蘋(píng)果最為經(jīng)典ios的滑動(dòng)解鎖
而到了屏幕世界中，控件的設(shè)計(jì)更應(yīng)該與物理世界保持相對(duì)的一致，這也是按鈕設(shè)計(jì)中，尤為重要的一個(gè)環(huán)節(jié)
最近常問(wèn)身邊的朋友，按鈕究竟是什么？
因?yàn)閷?duì)于他們而言，按鈕不就是一個(gè)操作區(qū)域加上文字，沒(méi)什么特別的，也正因如此，對(duì)于按鈕的具體構(gòu)造也不太了解。這篇文章主要是根據(jù)自身的工作經(jīng)驗(yàn)，結(jié)合當(dāng)下對(duì)于按鈕設(shè)計(jì)的理解，去分析如何進(jìn)行更合理的按鈕設(shè)計(jì)
對(duì)于每個(gè)設(shè)計(jì)師來(lái)說(shuō)按鈕并不陌生，在每天的設(shè)計(jì)中，都會(huì)使用按鈕進(jìn)行頁(yè)面設(shè)計(jì)；但又不是每一個(gè)設(shè)計(jì)師都能夠?qū)粹o設(shè)計(jì)好，因?yàn)樗嬖谌齻€(gè)方面的復(fù)雜性：
使用場(chǎng)景過(guò)多：
不是每個(gè)場(chǎng)景都需要相同的按鈕，比如在登錄頁(yè)當(dāng)中，登錄和注冊(cè)就是使用不同的按鈕形式。這些情況特別在B端產(chǎn)品中，業(yè)務(wù)在每個(gè)步驟中需要突出和強(qiáng)調(diào)的點(diǎn)不同，導(dǎo)致設(shè)計(jì)師很難通過(guò)具體場(chǎng)景進(jìn)行按鈕設(shè)計(jì)；
出現(xiàn)頻率太高：
B端產(chǎn)品中，每個(gè)頁(yè)面當(dāng)中都會(huì)有按鈕不停的重復(fù)，而高頻的出現(xiàn)會(huì)讓我們感到麻木，導(dǎo)致很多設(shè)計(jì)師都將其忽略；
形式太多：
在我總結(jié)的按鈕形式當(dāng)中，一共分為10類(lèi)，且情況多種多樣，很多時(shí)候都沒(méi)有意識(shí)到不同形式之間的差距，導(dǎo)致亂用混用
因此一個(gè)看上去小小的按鈕，其實(shí)經(jīng)常會(huì)困擾著我們，如果剛開(kāi)始沒(méi)有將按鈕進(jìn)行整體的梳理，那么在你的設(shè)計(jì)過(guò)程中，按鈕會(huì)經(jīng)常打斷自己的設(shè)計(jì)思維，為了讓大家能夠?qū)Π粹o有更深的理解，我將按鈕進(jìn)行系統(tǒng)的拆解，結(jié)合實(shí)際案例，能夠使按鈕更淺顯易懂
在文章按鈕類(lèi)型的分析中，我將按鈕分為兩大類(lèi)、十小類(lèi)，將其分類(lèi)也是為了更好的為大家去分析每一個(gè)按鈕所涉及到的狀態(tài)，當(dāng)我們理解按鈕之前，你需要了解它的內(nèi)部構(gòu)造
首先，拋出一個(gè)問(wèn)題給大家，下圖中，共有幾種按鈕形式？分別是什么？給大家五秒鐘時(shí)間思考
如果你對(duì)上圖的按鈕形式并不完全了解，建議你拿好小本本，做好筆記～
在開(kāi)始講常見(jiàn)按鈕類(lèi)型前，我們必須要搞清楚一個(gè)重要的知識(shí)點(diǎn)：按鈕狀態(tài)
按鈕狀態(tài)：可以讓用戶(hù)知道這個(gè)按鈕當(dāng)前是在進(jìn)行哪一種操作，方便幫助用戶(hù)進(jìn)行判斷
常見(jiàn)的按鈕狀態(tài)分為：正常狀態(tài)(Normal)、聚焦?fàn)顟B(tài)(Focus)、懸停狀態(tài)(Hover)、激活狀態(tài)(Active)、加載狀態(tài)(Loading)、禁用狀態(tài)(Disabled)，下面分別對(duì)這六大狀態(tài)進(jìn)行拆解
正常狀態(tài) (Normal)：除了其他五種狀態(tài)外的情況都是正常狀態(tài)，它是按鈕最為常規(guī)的狀態(tài)形式，也是設(shè)計(jì)師必須設(shè)計(jì)的一種狀態(tài)
聚焦?fàn)顟B(tài) (Focus)：主要是用于展示當(dāng)前電腦光標(biāo)所在的具體位置。聽(tīng)起來(lái)有點(diǎn)玄乎，我來(lái)講他背后的原理，主要是方便一些鍵盤(pán)使用的用戶(hù)，可以使用Tab鍵或者方向鍵來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行訪問(wèn)輸入
比如在Mac OS 以及 Windows的使用中，通過(guò)點(diǎn)擊Tab，便展示出文件的Focus狀態(tài)
Focus狀態(tài)是一個(gè)非常重要的交互形式，但是很多設(shè)計(jì)師都會(huì)忽略，甚至在很多網(wǎng)站，直接就是將這個(gè)樣式所去除，導(dǎo)致使用Tab鍵無(wú)法獲取聚焦的反饋，比如常見(jiàn)的百度、Google再到各大操作系統(tǒng)都會(huì)有這類(lèi)反饋，去除這類(lèi)反饋，會(huì)導(dǎo)致用戶(hù)無(wú)法用方向鍵控制光標(biāo)位置，在很大程度上降低用戶(hù)使用的可能性
懸停狀態(tài) (Hover)：在桌面端的設(shè)計(jì)當(dāng)中，即使用戶(hù)知道它是可以點(diǎn)擊的，但是你還是需要設(shè)計(jì)懸停狀態(tài)，表明鼠標(biāo)現(xiàn)在正在按鈕上。平板電腦和移動(dòng)端的設(shè)備上用永遠(yuǎn)不會(huì)展示懸停狀態(tài)，因?yàn)槟愕氖种甘菬o(wú)法在屏幕上進(jìn)行懸停的（雖然IPad OS 更新了13.4版本后，會(huì)有Hover態(tài)的出現(xiàn)，但是是通過(guò)鼠標(biāo)進(jìn)行操作，因此這里不予以討論）
激活狀態(tài) (Active)：激活狀態(tài)因?yàn)榻蟹ú煌?，在有的地方也稱(chēng)之為Press狀態(tài)，它的表現(xiàn)就是將按鈕按壓下，將顏色變深同時(shí)會(huì)涉及到內(nèi)陰影等效果的出現(xiàn)
禁用狀態(tài) (Disable)：按鈕禁用狀態(tài)作為最難設(shè)計(jì)的狀態(tài)之一，主要在于禁用狀態(tài)的表現(xiàn)形式以及禁用狀態(tài)與激活狀態(tài)之間如何的切換，我具體來(lái)分析一下兩個(gè)難點(diǎn)
難點(diǎn)一：禁用狀態(tài)在顏色上首先會(huì)給人灰色塊的感覺(jué)，行業(yè)里也稱(chēng)之為置灰，在設(shè)計(jì)上，也需要注意光標(biāo)移動(dòng)時(shí)需要展示禁用光標(biāo)，即讓前端大哥將Cursor的hover狀態(tài)更改為not-allowed，你可以?xún)?yōu)雅的在前端面前裝個(gè)X（之后會(huì)出一期，簡(jiǎn)單聊聊我與前端如何協(xié)作如何裝X）
難點(diǎn)二：禁用與激活狀態(tài)的切換，比如在一個(gè)注冊(cè)頁(yè)面中，需要姓名與電話(huà)必填，當(dāng)用戶(hù)沒(méi)有填寫(xiě)完成姓名與電話(huà)時(shí)，應(yīng)該將按鈕置灰，提示用戶(hù)不可以點(diǎn)擊，當(dāng)用戶(hù)填寫(xiě)完成必填字段后，將禁用按鈕轉(zhuǎn)變?yōu)榧せ畎粹o，提示用戶(hù)可以點(diǎn)擊登錄
加載狀態(tài)/Loading：按鈕需要時(shí)間進(jìn)行加載的一種狀態(tài)，通常會(huì)被用戶(hù)忽略，但是在B端產(chǎn)品中，Loading狀態(tài)尤為重要，這里有很多細(xì)節(jié)和小技巧，展開(kāi)講篇幅太大，在文中4.3小節(jié)（按鈕細(xì)節(jié)）會(huì)詳細(xì)解答
主按鈕為頁(yè)面中按鈕區(qū)最為核心的操作，在日常場(chǎng)景中，主要按鈕一般都為新建、編輯、保存這一類(lèi)正向的操作，強(qiáng)調(diào)頁(yè)面中最為核心的功能，能夠讓用戶(hù)一看到主按鈕就明白大致在頁(yè)面中需要如何操作
但在主按鈕的使用中，要遵循以下兩個(gè)原則：
1.在頁(yè)面當(dāng)中，按鈕區(qū)域的主按鈕最好只有一個(gè)，否者會(huì)對(duì)頁(yè)面的主要功能造成干擾
2.并不是每一個(gè)頁(yè)面都需要有主按鈕，不要因?yàn)轫?yè)面缺失主按鈕而強(qiáng)行加上。因?yàn)樵趯?shí)際使用中，時(shí)常遇到按鈕之間為平級(jí)的關(guān)系，強(qiáng)行添加，容易造成頁(yè)面層級(jí)混亂
在主按鈕中，按鈕狀態(tài)的設(shè)計(jì)也會(huì)跟隨物理世界進(jìn)行相應(yīng)的映射，因此在設(shè)計(jì)時(shí)需考慮現(xiàn)實(shí)生活中的狀態(tài)
比如用戶(hù)的Hover時(shí)，一般都將按鈕抬起并亮度增加，其目的是為了提示用戶(hù)可以點(diǎn)擊，而用戶(hù)在按下時(shí)，用加黑來(lái)表示用戶(hù)按下的狀態(tài)，與現(xiàn)實(shí)生活中按鈕的狀態(tài)類(lèi)似，因此按鈕狀態(tài)也應(yīng)該映射物理世界
次按鈕在頁(yè)面中出現(xiàn)最為頻繁，在日常使用中，如果你不太確定使用何種按鈕時(shí)，那使用它，大概率沒(méi)有錯(cuò)。因?yàn)樗\(yùn)用廣泛，出現(xiàn)頻率也最高，因此也被人們稱(chēng)為標(biāo)準(zhǔn)按鈕
在次按鈕的設(shè)計(jì)形式中，我們團(tuán)隊(duì)將設(shè)計(jì)形式分為兩類(lèi)：
此按鈕整體以文字+邊框的形式，這類(lèi)形式在視覺(jué)層面上感知較弱，適合幾個(gè)按鈕同時(shí)展示，在B端項(xiàng)目中，字線型也是在使用中最為頻繁的形式
字面型更偏向表達(dá)按鈕整體，常見(jiàn)于各類(lèi)移動(dòng)端的按鈕當(dāng)中，整體的表達(dá)也更適合移動(dòng)端這類(lèi)屏幕尺寸較少的設(shè)備當(dāng)中，更符合卡片化設(shè)計(jì)的思路，反而不太適合桌面端的設(shè)計(jì)
文字按鈕為頁(yè)面中視覺(jué)層級(jí)較低的按鈕形式，因而可以在頁(yè)面中大面積的重復(fù)使用，文字按鈕與鏈接（Link）基本一致，且沒(méi)有太多區(qū)分，所以在設(shè)計(jì)上，文字按鈕與鏈接基本相同
文字按鈕重復(fù)的出現(xiàn)，以表格頁(yè)面當(dāng)中的操作列表最為突出，因?yàn)楸砀癞?dāng)中常用的操作最好能夠直接展示出來(lái)，因此表格中基本都采取文字按鈕的形式
圖標(biāo)按鈕為頁(yè)面中控件占比最小的按鈕，所以在頁(yè)面中的使用也是最為高效的。因?yàn)闆](méi)有了文字元素，會(huì)導(dǎo)致用戶(hù)在圖標(biāo)的理解上出現(xiàn)偏差。為了解決這一問(wèn)題，主要是通過(guò)用戶(hù)在Hover時(shí)使用展示Tooltip提示按鈕的含義，同時(shí)建議在圖標(biāo)按鈕的使用上多為高頻且易理解的圖標(biāo)
我舉一個(gè)簡(jiǎn)單例子：
在桌面端產(chǎn)品中，幫助文檔一定是非常重要的一個(gè)入口，當(dāng)用戶(hù)對(duì)頁(yè)面中的功能有所疑惑時(shí)，可以通過(guò)此來(lái)幫助用戶(hù)進(jìn)行理解，通常需要在大多數(shù)頁(yè)面當(dāng)中展示幫助中心的入口，這時(shí)圖標(biāo)按鈕就變得最為合適
因此，我們可以得出圖標(biāo)按鈕的應(yīng)用場(chǎng)景通常為：當(dāng)頁(yè)面中需要高效的展示一個(gè)或幾個(gè)圖標(biāo)時(shí)，同時(shí)圖標(biāo)按鈕的展示最為頻繁時(shí)，當(dāng)同時(shí)滿(mǎn)足以上兩點(diǎn)，使用圖標(biāo)按鈕就是一個(gè)更優(yōu)的解決方案
按鈕菜單為頁(yè)面中許多操作的集合，通常是將高頻的操作以及一些低頻的操作進(jìn)行整合，組成的按鈕菜單。這樣既能夠減少頁(yè)面元素的冗雜，同時(shí)也能夠滿(mǎn)足業(yè)務(wù)對(duì)于功能的需求
舉個(gè)例子，在表格頁(yè)面當(dāng)中，B端設(shè)計(jì)師最常見(jiàn)到的按鈕菜單就是新建，這類(lèi)新建按鈕其實(shí)是必不可少的，同時(shí)業(yè)務(wù)需要，還需要多個(gè)業(yè)務(wù)按鈕進(jìn)行展示，按鈕菜單的出現(xiàn)，幫助用戶(hù)進(jìn)行按鈕的整理，同時(shí)也滿(mǎn)足業(yè)務(wù)需求
這其實(shí)是主按鈕的一種衍生，通過(guò)圖標(biāo)對(duì)主按鈕的含義進(jìn)行解釋?zhuān)瑥亩鴰椭脩?hù)提高這個(gè)按鈕的識(shí)別性。如果一個(gè)按鈕你想比主按鈕更加強(qiáng)調(diào)，那便可使用在按鈕中添加圖標(biāo)，這樣既能夠強(qiáng)化圖標(biāo)的含義，同時(shí)也加深了用戶(hù)對(duì)于按鈕的印象
在六個(gè)常見(jiàn)按鈕形式中，我們根據(jù)重要的優(yōu)先級(jí)，給常見(jiàn)按鈕進(jìn)行一個(gè)簡(jiǎn)單的排序：
危險(xiǎn)按鈕在刪除操作中最為常見(jiàn)，通常是為了警告用戶(hù)，這個(gè)數(shù)據(jù)刪除不可恢復(fù)，讓用戶(hù)謹(jǐn)慎考慮。在常見(jiàn)的刪除操作中，都需要用戶(hù)進(jìn)行二次確認(rèn)，避免用戶(hù)誤操作
當(dāng)然，在實(shí)際業(yè)務(wù)中，危險(xiǎn)按鈕不宜過(guò)多，如果業(yè)務(wù)當(dāng)中無(wú)法避免，需要展示多個(gè)刪除按鈕時(shí)，推薦采取圖標(biāo)按鈕進(jìn)行展示或者Hover過(guò)后將其呼出
幽靈按鈕，看它的名字就能想到它的作用：像幽靈一般透明的存在
它沒(méi)有使用復(fù)雜的顏色、樣式，而是用線條表示外部輪廓，證明它還是一個(gè)按鈕。同時(shí)內(nèi)部只用文字展示按鈕名稱(chēng)。它只出現(xiàn)在按鈕背景復(fù)雜的頁(yè)面當(dāng)中，比如：漸變色、紋理、動(dòng)態(tài)圖片背景的情況下，幽靈按鈕能夠完美融入到環(huán)境當(dāng)中
而現(xiàn)如今，傳統(tǒng)意義上的幽靈按鈕已經(jīng)很少，畢竟在現(xiàn)如今的官網(wǎng)當(dāng)中，幽靈按鈕已經(jīng)不再流行，更多的是出現(xiàn)在復(fù)雜頁(yè)面的“實(shí)心按鈕”，而在某種意義上講，這類(lèi)按鈕才是幽靈按鈕現(xiàn)在的狀態(tài)
在形式上，幽靈按鈕和次按鈕看來(lái)起沒(méi)有并什么不同，因此會(huì)有很多疑惑，那我什么時(shí)候用幽靈按鈕什么時(shí)候用次按鈕呢？
首先幽靈按鈕是屬于特殊按鈕體系中，因此它不會(huì)受整個(gè)按鈕體系的束縛，比如我在一個(gè)設(shè)計(jì)系統(tǒng)中，分別定義了常規(guī)按鈕的尺寸分別是24px、32px、40px，但是我在一個(gè)官網(wǎng)落地頁(yè)當(dāng)中需要有一個(gè)46px的按鈕出現(xiàn)，次按鈕就完全不合適。其次幽靈按鈕邊框粗細(xì)、字體大小都是和常規(guī)按鈕體系不同，因此幽靈按鈕就和次按鈕有所不同
第二個(gè)方面在次按鈕的設(shè)計(jì)形式中，不僅僅只有描邊按鈕這一種形式，因此幽靈按鈕與次按鈕它們可能會(huì)有交集，但是屬于兩種不同類(lèi)型的場(chǎng)景，因此也不能將它們混用
在Material Design 出現(xiàn)之初，懸浮按鈕受到了很多人的追捧，它也是安卓設(shè)計(jì)的代名詞。主要是用于頁(yè)面當(dāng)中最常用的操作，是整個(gè)APP中最核心的按鈕，能夠代表這個(gè)產(chǎn)品的核心功能，比如印象筆記的新增筆記（安卓）、滴答清單的新增清單等等...
但沉浸式設(shè)計(jì)的出現(xiàn)，使得移動(dòng)端寸土寸金的地方，需要固定一個(gè)按鈕的情況就變得更加少見(jiàn)
而在B端的設(shè)計(jì)過(guò)程中，逐漸衍生出了B端行業(yè)特有的方式
懸浮按鈕在B端場(chǎng)景中，主要是幫助用戶(hù)進(jìn)行輔助咨詢(xún)的功能，例如在一些用戶(hù)需要得到幫助的頁(yè)面中，可以通過(guò)懸浮按鈕，使用戶(hù)的又疑問(wèn)的頁(yè)面進(jìn)行快速提問(wèn)，幫助用戶(hù)能夠進(jìn)行快速的跳轉(zhuǎn)，在飛書(shū)的應(yīng)用列表中，其實(shí)用戶(hù)剛開(kāi)始理解應(yīng)用列表其實(shí)存在一個(gè)理解成本，就可以通過(guò)懸浮按鈕進(jìn)行展示
行為號(hào)召按鈕簡(jiǎn)稱(chēng)：CTA按鈕
主要目的是為了號(hào)召人們?cè)谀承┨囟ǖ捻?yè)面中使用此按鈕來(lái)提高轉(zhuǎn)化，比如立即購(gòu)買(mǎi)、聯(lián)系我們、立即訂閱等等...
大多數(shù)時(shí)候，CTA按鈕都是成對(duì)出現(xiàn)的?！笆桥c否“ 、“登錄與注冊(cè)”、“確認(rèn)與取消”等。因此，分析清楚CTA按鈕后設(shè)計(jì)出視覺(jué)層級(jí)合理的頁(yè)面稱(chēng)為非常重要的點(diǎn)。在設(shè)計(jì)中，一般會(huì)采取漸變色、主題色、主題色的互補(bǔ)色等等，它經(jīng)常獨(dú)立出現(xiàn)
在B端軟件的場(chǎng)景中，官網(wǎng)是CTA按鈕出現(xiàn)最為重要的頁(yè)面，一般在官網(wǎng)中，使用CTA按鈕將用戶(hù)引導(dǎo)從潛在客戶(hù)向付費(fèi)客戶(hù)進(jìn)行轉(zhuǎn)變（點(diǎn)擊過(guò)后一般是一個(gè)聯(lián)系表單進(jìn)行信息的填寫(xiě)），這也是在B端產(chǎn)品中非常重要的指標(biāo)：潛客向付費(fèi)客戶(hù)轉(zhuǎn)變?？梢砸龑?dǎo)用戶(hù)進(jìn)入到下一個(gè)階段，如果CTA按鈕設(shè)計(jì)不好，人們對(duì)于官網(wǎng)只是瀏覽，不會(huì)有任何轉(zhuǎn)化
因此，在設(shè)計(jì)CTA按鈕的形式與位置時(shí)，需要與產(chǎn)品、設(shè)計(jì)、運(yùn)營(yíng)等共同確定并討論使用，大家站在不同的立場(chǎng)希望得到一個(gè)完美的方案，因?yàn)樵O(shè)計(jì)出清晰的結(jié)構(gòu)層次將直接引導(dǎo)用戶(hù)朝著理想的使用路徑前進(jìn)，從而極大提高轉(zhuǎn)化率
在我們?nèi)粘ＴO(shè)計(jì)中，常常會(huì)遇到一些棘手的文案問(wèn)題：登陸、登錄、確認(rèn)、確定、發(fā)送、發(fā)布，在許許多多的工作場(chǎng)景中，猶豫究竟應(yīng)該在按鈕上使用哪種文案，這就需要我們通過(guò)具體的案例場(chǎng)景進(jìn)行展示相應(yīng)文案
登陸（Land) ：這是網(wǎng)絡(luò)中錯(cuò)別字最為頻繁的用此，很多人都會(huì)把登陸放到登錄頁(yè)面中，其實(shí)是錯(cuò)的。這個(gè)詞里的“陸”字，就是陸地的意思，其基本含義只是登上陸地而已，拓展出來(lái)還會(huì)有“登陸到某一個(gè)市場(chǎng)”，但登陸網(wǎng)站的說(shuō)法是絕對(duì)錯(cuò)誤的
登錄（Login）：這是“登記記錄、記載”的含義，我們正常輸入賬號(hào)密碼就是為了去記錄我們的一個(gè)信息，一般為官網(wǎng)登錄頁(yè)
確認(rèn)（Confirm）：這是帶有一些不可逆我操作的提示，一般用于用戶(hù)配置、選擇項(xiàng)等
確定（Yes）：這是詢(xún)問(wèn)用戶(hù)是否進(jìn)行某項(xiàng)不可逆操作，一般為一個(gè)單獨(dú)的操作
發(fā)送（Send）：這是盡快傳遞對(duì)方的聊天消息，一般為即時(shí)性的聊天發(fā)送
發(fā)布（Publish）：這是用于用戶(hù)填寫(xiě)的觀點(diǎn)、意見(jiàn)、文章等反饋信息發(fā)布到一些正式場(chǎng)合，如論壇、社區(qū)等
這些細(xì)節(jié)的文案就是幫助用戶(hù)去理解頁(yè)面中所傳達(dá)的真正含義，多將文字放置到場(chǎng)景中，文案也更好的輔佐他們作出抉擇
圓角在每一個(gè)軟件中，隨處可見(jiàn)。圓角大小所帶來(lái)的不僅僅是視覺(jué)表現(xiàn)，還更多影響著用戶(hù)的使用體驗(yàn)以及對(duì)于產(chǎn)品而言的整體的認(rèn)知，如果在開(kāi)始設(shè)計(jì)之前，沒(méi)有對(duì)按鈕圓角有具體的規(guī)劃，很容易踩坑，如何設(shè)計(jì)好圓角，我們來(lái)進(jìn)行系統(tǒng)分析
在下文中我們將按鈕的圓角大小，分為以下三類(lèi)：直角、圓角、半圓
直角：
按鈕四角的方向，具有很強(qiáng)烈的引導(dǎo)性，看上去也會(huì)更加刺眼，使得在頁(yè)面當(dāng)中注意力會(huì)減弱。同時(shí)，直角在按鈕排列當(dāng)中看上去更加統(tǒng)一，相同的東西在視覺(jué)上不太能引起我們的注意
圓角：
相比與直角按鈕，在使用圓角的按鈕中，視覺(jué)上總是給人一種柔和親近的感覺(jué)，當(dāng)幾個(gè)圓角按鈕進(jìn)行排列時(shí)，能夠感受到圓角按鈕更容易被點(diǎn)擊。因此在使用的按鈕中，建議添加圓角的細(xì)節(jié)元素
為何直角的物體會(huì)給人更嚴(yán)肅的感受——每一個(gè)人都認(rèn)為圓角會(huì)更好，但是并不是每一個(gè)人都能夠解答為什么圓角更好
在巴羅神經(jīng)病學(xué)研究所對(duì)拐角的科學(xué)研究發(fā)現(xiàn)，“拐角的感知程度隨著角度線性變化。銳角比鈍角產(chǎn)生更強(qiáng)的幻覺(jué)顯著性”。換句話(huà)說(shuō)，拐角越尖，則感覺(jué)越亮，拐角越多，越難看
圓角還有另一種解釋?zhuān)且驗(yàn)楝F(xiàn)實(shí)生活中有圓角的物體會(huì)更友好。從小，我們就知道尖角的物體會(huì)讓人受傷，圓角的物體會(huì)更安全。這就是小孩在玩皮球與刀的時(shí)候，家長(zhǎng)的反應(yīng)完全不同。
小朋友玩刀會(huì)讓家長(zhǎng)十分的緊張，趕緊讓孩子放下；而小朋友玩皮球時(shí)，家長(zhǎng)則是非常的放心。這激起了神經(jīng)科學(xué)所謂的尖銳邊緣“回避反應(yīng)”。因此，我們傾向于“避免鋒利的邊緣，因?yàn)樵谧匀唤缰兴鼈兛赡軙?huì)構(gòu)成危險(xiǎn)”
通常在移動(dòng)端場(chǎng)景中，半圓按鈕隨處可見(jiàn)，移動(dòng)端手指觸摸操作上，對(duì)于圓角的影響小之又??；而到了桌面端的場(chǎng)景下，鼠標(biāo)的使用，半圓按鈕就會(huì)有所不妥
如果相同面積中，按鈕的圓角增大，相應(yīng)的對(duì)于按鈕的可操作區(qū)域就會(huì)隨之減小，在同等尺寸下的按鈕中，小圓角的按鈕明顯比大圓角的按鈕更容易操作
當(dāng)然，麻煩事還不僅僅于操作區(qū)域，在結(jié)合實(shí)際業(yè)務(wù)，我們的按鈕常常作為原子（原子設(shè)計(jì)理論）用來(lái)組成為下拉菜單進(jìn)行聯(lián)動(dòng)，半圓按鈕在下拉菜單的設(shè)計(jì)中，也會(huì)因?yàn)榘雸A的局限，使下拉菜單的設(shè)計(jì)會(huì)更加困難，同樣在設(shè)計(jì)上，半圓角對(duì)于下拉菜單的適配也會(huì)相當(dāng)突兀，因此在考慮這方面設(shè)計(jì)時(shí)，需要你多去思考之后的業(yè)務(wù)場(chǎng)景
按鈕的狀態(tài)中，Loading狀態(tài)通常不會(huì)對(duì)用戶(hù)進(jìn)行直接展示，因?yàn)榇蠖鄶?shù)情況下，Loading狀態(tài)就發(fā)生在一秒鐘以?xún)?nèi)，但是對(duì)于B端場(chǎng)景中有很多重要操作，在長(zhǎng)時(shí)間等待中不展示loading狀態(tài)，會(huì)導(dǎo)致用戶(hù)在使用時(shí)犯下錯(cuò)誤
當(dāng)按鈕響應(yīng)時(shí)間小于1秒時(shí)，通常正常反饋即可
當(dāng)按鈕響應(yīng)時(shí)間長(zhǎng)于1秒時(shí)，我們通常會(huì)采取加載動(dòng)畫(huà)，減緩用戶(hù)等待的焦慮感
舉個(gè)例子：比如一個(gè)確認(rèn)提交的按鈕，由于網(wǎng)絡(luò)或者服務(wù)器等原因，需要長(zhǎng)時(shí)間加載資源，而用戶(hù)不知道我剛才按下的按鈕是否有效，這時(shí)用戶(hù)慌張，想要多按下幾次這個(gè)按鈕，系統(tǒng)就會(huì)不停提交數(shù)據(jù)，最后網(wǎng)絡(luò)變好時(shí)，窗口就會(huì)一瞬間瘋狂展示，導(dǎo)致用戶(hù)體驗(yàn)下降
為了防止這類(lèi)事情的發(fā)生，需要在設(shè)計(jì)師考慮到按鈕在加載一秒以后的狀態(tài)，應(yīng)當(dāng)提示用戶(hù)在網(wǎng)頁(yè)已經(jīng)收到請(qǐng)求，正在加載，同時(shí)在按鈕狀態(tài)中應(yīng)該為不可操作狀態(tài)。同時(shí)會(huì)給出加載轉(zhuǎn)圈的動(dòng)畫(huà)，緩解用戶(hù)的焦慮
當(dāng)你完成了第一步的設(shè)計(jì)后，想想在按鈕的狀態(tài)中，是否更能夠幫助用戶(hù)進(jìn)行體驗(yàn)上的提升呢？
這也是在面試某大型互聯(lián)網(wǎng)公司時(shí)，被問(wèn)到過(guò)的一個(gè)問(wèn)題～敲黑板
對(duì)用戶(hù)操作的適當(dāng)反饋是用戶(hù)界面設(shè)計(jì)的最基本準(zhǔn)則。讓用戶(hù)了解當(dāng)前狀態(tài)、位置、是否成功、進(jìn)度如何，減少不確定性；并引導(dǎo)他們?cè)谡_的方向上交互，而不是浪費(fèi)精力在重復(fù)操作上
在Loading的加載過(guò)程中，等待焦慮一直是用戶(hù)想要了解到的，為了緩解類(lèi)似情況，可以將等待的進(jìn)度狀態(tài)進(jìn)行展示，使的用戶(hù)在等待的過(guò)程中，能夠清晰的清楚自己的按鈕目前處于何種狀態(tài)，我大概還需要等待多久，緩解用戶(hù)在等待過(guò)程中的焦慮
以上兩個(gè)方式均是尼爾森十大原則的內(nèi)容，能夠在按鈕Loading狀態(tài)中，緩解用戶(hù)在按鈕加載過(guò)程中、重復(fù)提交、等待焦慮的問(wèn)題，通過(guò)一些設(shè)計(jì)小細(xì)節(jié)，幫助產(chǎn)品提升用戶(hù)體驗(yàn)
通過(guò)上文對(duì)于按鈕的解釋?zhuān)笾旅靼装粹o在設(shè)計(jì)中的作用，接下來(lái)我結(jié)合一個(gè)工作中的實(shí)際案例，來(lái)看看我們應(yīng)該如何優(yōu)化常見(jiàn)按鈕在頁(yè)面當(dāng)中的設(shè)計(jì)
項(xiàng)目背景：在桌面端，我們需要對(duì)整個(gè)導(dǎo)航欄進(jìn)行設(shè)計(jì)改版，但其中涉及到對(duì)于導(dǎo)航的一個(gè)整體優(yōu)化，主要是由于業(yè)務(wù)功能發(fā)生變化，我們需要在導(dǎo)航欄上增加快捷添加入口和通知中心，來(lái)滿(mǎn)足導(dǎo)航的后續(xù)的功能需求，由于保密協(xié)議的原因，就不放自家產(chǎn)品
在桌面端中，瀏覽模式大致分為兩類(lèi)，F(xiàn)型瀏覽模式、Z型瀏覽模式（下方知識(shí)拓展會(huì)有講到）
首先，因?yàn)閷?dǎo)航在整個(gè)頁(yè)面的頂部，結(jié)合兩種瀏覽模式在頂部時(shí)統(tǒng)一都為從左到右的瀏覽順序
因此確定整個(gè)導(dǎo)航按鈕初步的按鈕重要層級(jí)排序
我們對(duì)于用戶(hù)的按鈕層級(jí)有著明顯的劃分，因?yàn)樵谡麄€(gè)導(dǎo)航右側(cè)，又因?yàn)槠涞奶厥庑裕覀儼巡僮骺臻g分為三部分：
左側(cè)為操作路徑最短的區(qū)域，因?yàn)樽烂娑说漠a(chǎn)品需要通過(guò)鼠標(biāo)進(jìn)行交互操作，而其中移動(dòng)鼠標(biāo)的長(zhǎng)短直接決定用戶(hù)是否愿意點(diǎn)擊這個(gè)按鈕，因此，靠左的按鈕適合放置用戶(hù)最常使用的操作
中部為按鈕內(nèi)部區(qū)，可以放置一些低頻，但是又必須出現(xiàn)在這個(gè)區(qū)域的按鈕操作（比如：幫助中心、通知中心等等...）
右側(cè)為按鈕最為重要層級(jí)最弱的區(qū)域，同時(shí)它也有一些特殊性
一般在瀏覽器的右側(cè)，為用戶(hù)最容易定位的操作區(qū)域，因?yàn)榭拷吘墝?dǎo)致在用戶(hù)定位當(dāng)中能夠幫助用戶(hù)進(jìn)行快速選擇
回到頁(yè)面中信息層級(jí)較高、同時(shí)需要精準(zhǔn)定位的按鈕就會(huì)將個(gè)人中心放置在最右側(cè)，方便用戶(hù)進(jìn)行快速定位
因此我們講導(dǎo)航當(dāng)中按鈕重要層級(jí)進(jìn)行簡(jiǎn)單排序，得到下圖：
通過(guò)親密性原則，我們將除去左右兩側(cè)確定好的按鈕之外的按鈕進(jìn)行簡(jiǎn)單分類(lèi)，將有關(guān)聯(lián)的按鈕進(jìn)行組合，形成較強(qiáng)的關(guān)聯(lián)性～
視覺(jué)調(diào)整作為最重要的一步，主要是為了在最后的按鈕重要層級(jí)上，將一部分按鈕突出、一部分按鈕弱化，達(dá)到我們想要的整個(gè)層級(jí)效果
通過(guò)團(tuán)隊(duì)內(nèi)部討論，將我們的新增按鈕定位CTA按鈕，因?yàn)樗P(guān)聯(lián)到我們每個(gè)使用系統(tǒng)的人都會(huì)用到，屬于最高頻的操作按鈕，也因此將其突出
F型瀏覽模式：
是新聞平臺(tái)、博客等文字為主的網(wǎng)站布局所采取的閱讀模式
該閱讀模式由尼爾森團(tuán)隊(duì)的眼動(dòng)追蹤研究結(jié)果從而進(jìn)行普及，在這個(gè)研究中記錄了超過(guò)200位用戶(hù)瀏覽網(wǎng)頁(yè)時(shí)，發(fā)現(xiàn)用戶(hù)的主要閱讀行為在許多網(wǎng)站和場(chǎng)景中表現(xiàn)得相當(dāng)一致。這個(gè)閱讀模式看起來(lái)有點(diǎn)像字母F，因此也被叫做F型瀏覽模式。
首先用戶(hù)以水平方向進(jìn)行閱讀，通常是在閱讀區(qū)域的上半部分
接下來(lái)，他們?cè)谄聊蛔髠?cè)垂直瀏覽，尋找段落開(kāi)篇幾句中感興趣的內(nèi)容。當(dāng)他們找到感興趣的內(nèi)容時(shí)，他們?cè)诘诙€(gè)水平方向上快速瀏覽，通常這塊內(nèi)容區(qū)比上一個(gè)內(nèi)容區(qū)更短小、更簡(jiǎn)潔。這部分元素形成了F的下半部分
最后，用戶(hù)在垂直方向上瀏覽內(nèi)容的左側(cè)區(qū)域
Z型瀏覽模式
是掃描滾動(dòng)的網(wǎng)站的典型模式
正如你所期望的，“z”型模式的布局遵循字母Z的形狀?！癦”型模式的設(shè)計(jì)跟蹤了人眼掃描頁(yè)面時(shí)的路線——從左到右，從上到下：
首先，人們從左上角到右上角進(jìn)行掃描，形成一條水平線
接下來(lái)，向頁(yè)面的左下側(cè)掃描，鏈接成一條對(duì)角線
最后，再次向右轉(zhuǎn)，形成第二條水平線
當(dāng)觀眾的視角以這種模式移動(dòng)時(shí)，它形成一個(gè)虛構(gòu)的“Z”字形
在實(shí)際工作中，經(jīng)常遇到自己設(shè)計(jì)的按鈕與開(kāi)發(fā)實(shí)際還原的按鈕差距很大，一些沒(méi)有經(jīng)驗(yàn)的設(shè)計(jì)師會(huì)和開(kāi)發(fā)說(shuō)，你看我設(shè)計(jì)稿，每一個(gè)按鈕都要按照設(shè)計(jì)稿的來(lái)，這樣設(shè)計(jì)師與前端開(kāi)發(fā)之間的矛盾就會(huì)越來(lái)越深。其實(shí)在按鈕設(shè)計(jì)的細(xì)節(jié)中，開(kāi)發(fā)怎么完美的還原，里面還有很多細(xì)節(jié)
首先要想讓開(kāi)發(fā)完全還原你的設(shè)計(jì)稿，就必須了解開(kāi)發(fā)實(shí)現(xiàn)的思維方式，針對(duì)它的思維方式進(jìn)行相應(yīng)的思考。
又由于Sketch與開(kāi)發(fā)常使用的VScode之間邏輯上存在較大差異，導(dǎo)致設(shè)計(jì)師設(shè)計(jì)出來(lái)的很多設(shè)計(jì)稿開(kāi)發(fā)根本無(wú)法實(shí)現(xiàn)，這也是B端設(shè)計(jì)師擺在你面前的第一個(gè)問(wèn)題
對(duì)你沒(méi)看錯(cuò)，無(wú)法實(shí)現(xiàn)，我舉一個(gè)例子
這是一位同學(xué)問(wèn)我的一個(gè)問(wèn)題，他說(shuō)我這個(gè)按鈕為啥實(shí)現(xiàn)不了，前端不就是多幾個(gè)代碼去適配我的設(shè)計(jì)稿就可以了嗎？
如果你看了上圖也有很多疑問(wèn)，那就接著看下去～
在按鈕當(dāng)中，通俗的理解Padding就是文字與按鈕之間的間距
因?yàn)镾ketch等軟件在按鈕的設(shè)計(jì)中，只有圖形位置的概念，沒(méi)有內(nèi)間距Padding的概念，因此需要對(duì)按鈕還原要明確的描述
比如上圖，前端同學(xué)在開(kāi)發(fā)是就會(huì)將Padding設(shè)置為24px，所以整個(gè)按鈕長(zhǎng)度便為24px*2+20px（文本寬度）=68px
而為什么說(shuō)上面的設(shè)計(jì)規(guī)范實(shí)現(xiàn)不了，因?yàn)閷?duì)于前端而言，Padding通常都是統(tǒng)一且固定的，只會(huì)根據(jù)按鈕文字長(zhǎng)度進(jìn)行相應(yīng)的調(diào)整，比如我上面舉的錯(cuò)誤栗子，其實(shí)在前端同學(xué)面前這類(lèi)設(shè)計(jì)是不能夠被共用，而且對(duì)前端同學(xué)項(xiàng)目會(huì)變得越來(lái)越不能維護(hù)，所以按鈕設(shè)計(jì)應(yīng)該更規(guī)劃
但是如果真的需要去實(shí)現(xiàn)兩個(gè)文字按鈕長(zhǎng)度和四個(gè)字的一樣怎么辦，需要去設(shè)定按鈕的最小寬度
按鈕最小寬度的設(shè)定一般為4個(gè)字文字的長(zhǎng)度，假設(shè)字體大小為16px，左右的Padding為24px
最小寬度為：88px，因此在按鈕的標(biāo)注中，需要展示最小間距為88px，方便前端進(jìn)行CSS開(kāi)發(fā)
在我們的sketch中，按鈕邊框有三種，內(nèi)邊框、居中邊框、外邊框，默認(rèn)為居中，但是在前端的CSS代碼中沒(méi)有居中邊框，沒(méi)有居中邊框，沒(méi)有居中邊框（重要的事情說(shuō)三遍），默認(rèn)為內(nèi)邊框，如果需要調(diào)整為外邊框，最好能夠標(biāo)注
信息無(wú)障礙，是指任何人在任何情況下都能平等地、方便地、無(wú)障礙地獲取信息和利用信息。隨著互聯(lián)網(wǎng)覆蓋越來(lái)越廣，對(duì)于身體有局限的群體而言，更加迫切通過(guò)互聯(lián)網(wǎng)獲取信息，而這就需要互聯(lián)網(wǎng)產(chǎn)品進(jìn)行信息無(wú)障礙的優(yōu)化。在我國(guó)其受益人群至少包括：8500多萬(wàn)殘障人士，2億多60歲以上的老年人，數(shù)量龐大。率先考慮信息無(wú)障礙能為產(chǎn)品增加優(yōu)勢(shì)而帶來(lái)更多用戶(hù)。
如今智能手機(jī)掀起了一場(chǎng)無(wú)障礙輔助工具的革命，而站在這個(gè)關(guān)鍵點(diǎn)的互聯(lián)網(wǎng)設(shè)計(jì)師，也要開(kāi)始行動(dòng)起來(lái)，先從以下這幾個(gè)容易實(shí)現(xiàn)的事情開(kāi)始著手進(jìn)行無(wú)障礙的優(yōu)化吧。
對(duì)視障用戶(hù)來(lái)說(shuō)，是用聽(tīng)取讀屏語(yǔ)音來(lái)了解你設(shè)計(jì)的界面信息的。讀屏軟件就像他們了解互聯(lián)網(wǎng)世界的眼睛，它的原理是直接讀出界面里的文字，如果icon按鈕未加無(wú)障礙標(biāo)簽讀屏?xí)x為"無(wú)法發(fā)音"，那么視障者就無(wú)法獲取這些信息，自然也就無(wú)法使用你設(shè)計(jì)的功能。
解決的辦法是:
1.需要在產(chǎn)品代碼中添加無(wú)障礙標(biāo)簽(Android :contentDescription ; iOS:accessibilityLabel在對(duì)應(yīng)的開(kāi)發(fā)者文檔里很容易找到，可以發(fā)給你合作的研發(fā)同學(xué))。
2.裝飾性icon可隱藏標(biāo)簽不讀，提升讀屏效率。不建議不做處理也不加標(biāo)簽，那么用戶(hù)聽(tīng)到的就是“無(wú)標(biāo)簽”，這樣會(huì)讓用戶(hù)以為這里有什么重要信息讀不到而感到不安。
3.標(biāo)簽語(yǔ)義簡(jiǎn)短準(zhǔn)確，盡可能使用動(dòng)詞。
4.必要時(shí)需要走查焦點(diǎn)順序，確保不會(huì)被錯(cuò)誤的焦點(diǎn)順序誤導(dǎo)頁(yè)面含義。
并且最好由設(shè)計(jì)師進(jìn)行語(yǔ)義的標(biāo)注，因?yàn)樵O(shè)計(jì)師才是對(duì)頁(yè)面里圖形應(yīng)用最了解的人。避免出現(xiàn)“搜索”被寫(xiě)成“放大鏡”、或者是“searchBtn_123”之類(lèi)的情況。
顏色可以用來(lái)區(qū)分信息數(shù)據(jù)的類(lèi)別和維度，也可以幫助傳達(dá)情緒等重要信息。然而，世界上有超過(guò)8%的男性和0.4%的女性都被色覺(jué)障礙的問(wèn)題困擾。我們通常籠統(tǒng)的稱(chēng)這類(lèi)人群為“色盲”，他們是典型的識(shí)別顏色有問(wèn)題的群體。
"色彩"的目標(biāo)是"易于感知"，指的是互聯(lián)網(wǎng)產(chǎn)品的內(nèi)容信息的色彩對(duì)任何人來(lái)說(shuō)，都應(yīng)該擁有足夠高的辨識(shí)度和舒適度，我從以下4個(gè)方向進(jìn)行介紹。
1.更安全的配色
a.色盲人群：
設(shè)計(jì)師在進(jìn)行設(shè)計(jì)配色時(shí)應(yīng)時(shí)刻自測(cè)，避免明度相似的橙黃綠兩兩配色和明度相似的紅綠配色，因?yàn)檫@樣的配色勢(shì)必會(huì)造成色盲用戶(hù)的可讀性問(wèn)題。并且，紅色在紅綠色盲眼中并不是一種明亮醒目的顏色。相反紅色對(duì)他們來(lái)說(shuō)顯得非常深，而暗紅色則幾乎接近黑色。因此色盲人士很難分辨出文章內(nèi)的深紅色的強(qiáng)調(diào)字，從而遺漏關(guān)鍵信息（設(shè)計(jì)時(shí)，可利用此插件模擬色盲眼中的顏色：Color Oracle） 。
b.文化差異：
因?yàn)樯试诓煌瑖?guó)家文化中代表不同含義,所以對(duì)于國(guó)際用戶(hù)來(lái)說(shuō)也是存在障礙的。在西方文化里，紅色通常用于表示消極趨勢(shì)，而綠色則表示積極趨勢(shì)，但在東方文化中卻正相反。
c.特殊群體：
臨床醫(yī)學(xué)研究表明對(duì)于部分自閉癥患者來(lái)說(shuō)，高飽和高對(duì)比度的顏色，甚至只是黃色都會(huì)讓他們感到不舒服和不安，因此在自閉癥康復(fù)中心是不會(huì)出現(xiàn)過(guò)于對(duì)比刺激的顏色的。
另外，老年群體隨著年齡的增長(zhǎng)，晶狀體變黃變渾濁，會(huì)選擇性的吸收藍(lán)光，從而導(dǎo)致老年人對(duì)藍(lán)色的鑒別能力下降明顯，如果你的主流用戶(hù)是老年人，請(qǐng)盡量避免將藍(lán)色運(yùn)用到重要的按鍵中去。
2.更強(qiáng)的文本對(duì)比度
文本對(duì)比度與可讀性息息相關(guān)，它測(cè)量的文本顏色和背景色之間的明度差。WCAG AA對(duì)于文本對(duì)比度的規(guī)范是：4.5:1，若字號(hào)夠大（>18pt，或粗體>14pt）時(shí)，標(biāo)準(zhǔn)可降到3:1。如果滿(mǎn)足4.5:1這個(gè)標(biāo)準(zhǔn)會(huì)讓你的頁(yè)面視覺(jué)看起來(lái)不那么優(yōu)雅，可以嘗試局部加強(qiáng)可視性的方法：
關(guān)于可讀性其他需要注意的點(diǎn)：盡量不要在圖片上疊加文字，除非你能保證圖片背景顏色單一且對(duì)比度足夠高。
Material Design設(shè)計(jì)規(guī)范建議，需要淡淡的遮罩確保上層文字的可讀性；并且不建議極高對(duì)比度的文本，因?yàn)檫@樣會(huì)使一部分視障者看到的字旋轉(zhuǎn)模糊。
3.更多樣的視覺(jué)變量
顏色是數(shù)據(jù)可視化中最常用的視覺(jué)變量之一。但是對(duì)于無(wú)法辨別顏色的用戶(hù)，如果顏色作為的唯一的提示信息，他們可能將無(wú)法理解你傳達(dá)的信息。那么有什么改善的方法呢?
a. 不讓顏色成為唯一的視覺(jué)變量：除顏色外，我們可以追加圖標(biāo)、紋理或者文字來(lái)加以標(biāo)注。
b.色盲模式：Trello作為一款工具產(chǎn)品，在標(biāo)注信息時(shí)，提供色盲模式可打開(kāi)和關(guān)閉，并用不同紋理加以區(qū)別，色盲友好模式是一個(gè)很好的范例，它可以有效幫助色盲，又不會(huì)妨礙非色盲用戶(hù)。
c.以明度飽和度為度量：雖然色盲人士對(duì)色相的辨識(shí)能力較弱，但卻對(duì)明度、飽和度非常敏感。我們可以使用明度或飽和度區(qū)分信息?？催@個(gè)例子：傳統(tǒng)熱力圖習(xí)慣用暖色代表熱力高冷色代表熱力低，Google Analaytics的熱力圖采用深藍(lán)色顯示熱度高的時(shí)段、淺藍(lán)色顯示熱度低的時(shí)段，簡(jiǎn)單有效。
控件可以是按鈕、鏈接、輸入框或任何帶有事件監(jiān)聽(tīng)器的HTML元素。控件太小或彼此太靠近可能會(huì)給用戶(hù)帶來(lái)糟糕的體驗(yàn)問(wèn)題。
比如對(duì)于無(wú)法用指尖精確定位的用戶(hù)（有顫抖疾病的用戶(hù)），或因年齡而導(dǎo)致靈活性降低的老年用戶(hù)，都會(huì)難以點(diǎn)擊過(guò)小控件。
為了給用戶(hù)足夠的間距來(lái)準(zhǔn)確選擇控件，Material Design建議至少48×48dp，iOS設(shè)計(jì)系統(tǒng)將目標(biāo)熱區(qū)尺寸最小值定為44 x 44pt，而WCAG對(duì)WEB的規(guī)范則建議至少44×44px。一個(gè)控件可以在視覺(jué)上是24 x 24px，但是在所有邊上都會(huì)有一個(gè)額外的填充使它達(dá)到44×44px。并且太靠近的控件可能會(huì)因誤點(diǎn)擊而帶來(lái)挫敗感，所以同時(shí)還建議控件之間的空間足夠遠(yuǎn)以減少誤觸。Microsoft給pc的建議是至少有8px的間距，而Material Design推薦的控件至少間隔8dp。我們可根據(jù)以上規(guī)范來(lái)審視自己設(shè)計(jì)的控件。
1.文字大?。?/strong>
有視覺(jué)障礙的用戶(hù)可能會(huì)把字號(hào)調(diào)得很大。你需要保證你的設(shè)計(jì)在大字號(hào)的情況下內(nèi)容不會(huì)溢出或排版錯(cuò)亂。做設(shè)計(jì)的時(shí)候，可以使用2倍以上的字體測(cè)試你的設(shè)計(jì)。
在互聯(lián)網(wǎng)早期，設(shè)計(jì)了字號(hào)在9-14px之間的網(wǎng)頁(yè)，如今已與20年前不同，瀏覽器已經(jīng)可以在任何尺寸設(shè)備上使用，小到智能手表大到4K熒幕，我們不能再使用固定的字號(hào)來(lái)設(shè)計(jì)產(chǎn)品了。字號(hào)應(yīng)該與設(shè)計(jì)本身一樣具有響應(yīng)性。例如可以允許用戶(hù)自定義字號(hào)、行高或字間距等以達(dá)到舒適的閱讀水平。
2.文字樣式:
文字作為傳達(dá)信息的重要載體，對(duì)于許多用戶(hù)來(lái)說(shuō)，裝飾字體或草書(shū)字體都是比較難閱讀的。且用過(guò)細(xì)的、過(guò)小的、斜體和全大寫(xiě)文本，也會(huì)降低識(shí)別度。
有效的動(dòng)畫(huà)可以給頁(yè)面帶來(lái)生命感，但如果濫用動(dòng)效不僅會(huì)分散用戶(hù)注意力，嚴(yán)重的話(huà)對(duì)某些用戶(hù)來(lái)說(shuō)來(lái)說(shuō)可能是致命的（光敏性癲癇的臨床誘因之一就是閃光圖像的刺激）。
1997年的一天，日本電視臺(tái)正在播放《精靈寶可夢(mèng)》第38集“電腦戰(zhàn)士3D龍”，但就在這天晚上發(fā)生了600多名兒童昏倒在家中集體送醫(yī)事件，轟動(dòng)了動(dòng)畫(huà)界，任天堂的股價(jià)也隨之大跌。原來(lái)，為了達(dá)到震撼效果，3D龍的背景運(yùn)用了“藍(lán)-紅-藍(lán)”的快速閃爍來(lái)表現(xiàn)爆炸，這樣高頻率的閃爍刺激了孩子們脆弱的眼睛，導(dǎo)致他們集體患上了急性光敏癥。也因?yàn)檫@件事日本開(kāi)始著手對(duì)動(dòng)畫(huà)片的制作制定規(guī)范。Twitter在2019年為了保護(hù)對(duì)閃爍圖像敏感的人員安全，也采取了禁用APNG動(dòng)圖格式的措施。
另外WCAG 2.3.3官方說(shuō)明，一些用戶(hù)會(huì)因滾動(dòng)頁(yè)面的動(dòng)效（例如緩動(dòng)和視差滾動(dòng)）而觸發(fā)大腦前庭疾病從而產(chǎn)生頭暈的癥狀，所以iOS、Mac、Windows 10都具有關(guān)閉動(dòng)效的功能。
為了避免給特殊人群造成困擾，設(shè)計(jì)師在開(kāi)始做動(dòng)效之前，應(yīng)該看看以下四條是否滿(mǎn)足：
1.動(dòng)效每秒閃動(dòng)不超過(guò)3次，發(fā)生的閃光區(qū)域不超過(guò)超過(guò)25％否則，光敏癲癇患者會(huì)有發(fā)病的風(fēng)險(xiǎn)。
2.避免過(guò)于夸張的視差和運(yùn)動(dòng)效果，因?yàn)榇竽X前庭失調(diào)者會(huì)引發(fā)眩暈。
3.避免有多個(gè)元素通過(guò)不斷移動(dòng)、閃爍而分散注意力，因?yàn)檫@可能會(huì)讓注意力缺陷者產(chǎn)生困擾 。
4.如果有上述情況，需提供一些控件或選項(xiàng)來(lái)暫停、隱藏或者更改任何動(dòng)畫(huà)或效果的頻率。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn