用戶(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)粘9ぷ鞯臅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)樵诔R?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)樵诔R?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)粘TO(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