藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
政府網(wǎng)站設(shè)計(jì)不等同于普通的企業(yè)網(wǎng)站設(shè)計(jì)，政府網(wǎng)站是向群眾發(fā)布政務(wù)信息，提供為人民網(wǎng)上辦事的窗口，所以政府網(wǎng)站最主要的目的也就是為人民服務(wù)，那所有網(wǎng)站在進(jìn)入之后，首先最吸引我們的也就是網(wǎng)頁的界面，網(wǎng)頁的界面設(shè)計(jì)是從側(cè)面反映政府的形象，所以政府網(wǎng)站也不能像普通的網(wǎng)站那樣做的絢麗多彩，那一切設(shè)計(jì)都是有思路的，政府網(wǎng)站也要從網(wǎng)站的風(fēng)格，色彩等方面著重策劃，以人為本，帶給用戶良好的體驗(yàn)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
當(dāng)你為你的項(xiàng)目創(chuàng)建有效的，可訪問的，漂亮的ui時(shí)，只需要最小的調(diào)整來幫助快速改善你的設(shè)計(jì)。 努力創(chuàng)造。在這篇簡短且易于理解的指南中，我收集了一些容易放置的內(nèi)容。在實(shí)踐中，這些小技巧可以毫不費(fèi)力地幫助你改善你的設(shè)計(jì)，還有用戶體驗(yàn)。
希望你喜歡！
用微妙的邊界定義。
使用多重陰影或非常微妙的邊界（只是一個(gè)陰影比你的實(shí)際影子）周圍的某些元素可以使這些元素出現(xiàn)
更清晰，更清晰，幫助你避免那些看起來泥濘的陰影。
標(biāo)題給一個(gè)更好的光學(xué)范圍。減少長格式正文的字母間距？這是一個(gè)大大的“不”。但對于標(biāo)題……我要說“是”!
你的標(biāo)題很可能會(huì)比他們的標(biāo)題更大，更重。相比于正文，字母之間的間距有時(shí)會(huì)出現(xiàn)視覺上更大，這并不是你想要的。減少字母間距，只是少量，可以使你的標(biāo)題視覺平衡，更易于閱讀，通常更賞心悅目。
為了一致性，確保你的圖標(biāo)具有相同的視覺風(fēng)格。確保它們擁有相同的視覺風(fēng)格;同樣的重量，要么填滿，要么秒變了。不要混搭。
只使用一種字體就很好。在設(shè)計(jì)時(shí)，使用單一字體是絕對沒問題的，這樣做實(shí)際上可以幫你產(chǎn)生更強(qiáng)、更持久的結(jié)果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量，大小和顏色，你仍然可以產(chǎn)生完美的可接受的結(jié)果。雖然只有一個(gè)單獨(dú)的字體。
留白是UI設(shè)計(jì)朋友。大膽的使用。適度的留白，即使是少量的白色物質(zhì)，但要使用得當(dāng)。能讓你的設(shè)計(jì)透氣，而且看起來更光亮。
創(chuàng)建長篇內(nèi)容？給20 pt試試。對于長形式的內(nèi)容（即微博文章，項(xiàng)目描述等等），試著這樣做20pt(甚至更多一點(diǎn))為你的文本字號。當(dāng)然，這取決于所選擇的字體，但大多數(shù)流行的字體在20pt時(shí)效果得很好，并帶來更好的閱讀體驗(yàn)當(dāng)你的用戶面對一堵文字墻的時(shí)候。18pt太過時(shí)了。
使用字體比例定義一個(gè)適合的字體大小集。使用字體比例可以幫助您輕松、實(shí)用地定義一組字體大小。顧名思義，Type Scale基于一個(gè)比例因子(比如1.25)工作的。從一個(gè)基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?，H?等)，或較低層次(即;標(biāo)題、按鈕等)字體比例將幫助你產(chǎn)生看起來和諧的文本字號集。因?yàn)樗麄兊拇笮「鶕?jù)設(shè)定的固定比例增加和減少。
選擇一個(gè)基本顏色，然后使用色彩和色調(diào)增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設(shè)計(jì)。如果項(xiàng)目允許，簡單地使用一個(gè)有限的調(diào)色板選擇一個(gè)基地顏色，然后使用你選擇的顏色的色調(diào)和陰影可以增加一致性以最簡單的方式來改變你的設(shè)計(jì)。
改善用戶登錄的體驗(yàn)。記住拇指規(guī)則。允許用戶在任何時(shí)候跳過您的移動(dòng)應(yīng)用程序上線序列，并且放置跳過鏈接在拇指容易觸及的位置。只是一個(gè)簡單的調(diào)整，可以為你的用戶提供更好的體驗(yàn)……
記住，拇指仍然是主宰！
你的影子來自其中一個(gè)光源對吧？確保你的影子總是來自一個(gè)光源。這是一個(gè)簡單的錯(cuò)誤，但它可以讓你的設(shè)計(jì)看起來更拋光且統(tǒng)一。記住，我們不是生活在一個(gè)擁有一千個(gè)太陽的國度里。
使用更好的字體組合，效率會(huì)很很快。當(dāng)你想要提高你的字體組合技巧的時(shí)候，當(dāng)面對1000個(gè)字體選擇，只是去尋找對應(yīng)的自己集合，效率會(huì)快很多。
文字和圖像與一個(gè)微妙的覆蓋。根據(jù)文本可能放置在圖像上方的位置，您可以選擇嘗試，并測試完整的圖像覆蓋，或更微妙的(從下到上，或從上到下)漸變疊加，以實(shí)現(xiàn)兩者之間的簡單對比。為了在你的文本之間形成良好的對比，不要太復(fù)雜的內(nèi)容和圖片。
太多就會(huì)導(dǎo)致用戶體驗(yàn)不合格。盡量只在標(biāo)題和小段落中使用中心文字。對于幾乎所有其他內(nèi)容，保持文本左對齊。你的用戶會(huì)感謝你的你。
當(dāng)選擇一個(gè)多用途的文字，盡量找一個(gè)大量權(quán)重。你搜索的字體有很多選擇嗎？重量、風(fēng)格？如果你打算在你的一些項(xiàng)目中使用它，請嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話，我建議你避開這些。當(dāng)然也有例外，某些項(xiàng)目會(huì)要求“只有一種風(fēng)格”
更精致的字體，但對于絕大多數(shù)項(xiàng)目，你想要的字體再多一點(diǎn)就能…嗯…選擇。即使你決定只使用兩種或三種重量或風(fēng)格，希望你在設(shè)計(jì)過程的后期需要更多的空間。
想要?jiǎng)?chuàng)造更容易理解的界面，對吧？把你的文字調(diào)暗在光亮的背景上。在淺色背景下工作時(shí)，不要讓你的文本太亮。
當(dāng)涉及到長形式的內(nèi)容時(shí)，某些常規(guī)的粗細(xì)字體仍然可以看。但太重了，在屏幕上會(huì)很僵硬。你可以很容易地解決這個(gè)問題，選擇一些像深灰色（即#4F4F4F）的基調(diào)，把文字往下寫，讓眼睛更容易看。
總是通過icon最突出的內(nèi)容。你認(rèn)為這是常識(shí)，對嗎？我并不覺得。通過使用色彩對比度做區(qū)分，尺寸和標(biāo)簽，確保盡可能突出。如果可以的話，不要總是只依賴圖標(biāo)。如果可以使用文本標(biāo)簽，那就使用它們，讓用戶更好地理解。
當(dāng)你的字體變小時(shí)，請?jiān)黾有懈?，以達(dá)到更好的通用性。這同樣適用于當(dāng)你的字體大小增加。簡單地降低行高。
使用x-height來測試字體的可讀性?；旧?，x-height是一個(gè)小寫字母' x '相對于大寫字母高度 (T)的相同字體。如果你的字體有一個(gè)大的x高，通常有助于更好地閱讀，特別是在使用長形式的正文文本。另一種確定字體可讀性，并縮小范圍的方法如果你有一些無法選擇的字體，可以做這個(gè)測試，比較來自特定字體的三個(gè)字符：大寫字母I，小寫的L和數(shù)字1。
當(dāng)設(shè)計(jì)一個(gè)在應(yīng)用程序內(nèi)部使用的菜單時(shí)，確保提供最多經(jīng)常使用的動(dòng)作（例如：上傳圖像，添加文件等)最突出的屏幕上。
顏色-從你的圖像中選擇，會(huì)給你的產(chǎn)品帶來生命。簡單地從你的產(chǎn)品圖片中選擇顏色，然后應(yīng)用各種色調(diào)。你選擇的顏色陰影到你的背景，文字，圖標(biāo)或更多，可以添加。你的設(shè)計(jì)具有豐富的視覺趣味和個(gè)性。
基于字體的x坐標(biāo)，設(shè)置您的線高度。不同x高的字體需要不同的行高測量，實(shí)現(xiàn)文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即：18px)它們的x的高度可以有很大的不同，這在選擇正確的線的種類起著很大的作用高度來實(shí)現(xiàn)。
突出最重要的元素。通過使用字體大小，權(quán)重，顏色和布局的組合，可以很輕松的突出UI中最重要的元素。只是很簡單，但微妙的調(diào)整，讓用戶體驗(yàn)更好一點(diǎn)。
操作錯(cuò)誤的時(shí)候，添加一個(gè)額外的視覺輔助。在用戶剛剛采取的操作附近添加一個(gè)錯(cuò)誤消息可以是簡單的形式，但很有幫助，當(dāng)他們填寫任何形式的表格時(shí)額外的視覺輔助。
嘗試在移動(dòng)端創(chuàng)建慷慨的熱區(qū)。當(dāng)為移動(dòng)設(shè)備設(shè)計(jì)時(shí)，嘗試創(chuàng)建足夠大的可點(diǎn)擊區(qū)域，是好的。對于只包含文本的按鈕和鏈接來說，這是很有挑戰(zhàn)性的，盡可能使用帶有標(biāo)簽的圖標(biāo)。
以下是iOS和Android的最小推薦點(diǎn)擊區(qū)域：
44 x 44pt用于iOS
48x48dp用于Android
在短標(biāo)題上盡量使用全大寫。如果你想在標(biāo)題上使用全大寫，請確保它們在任何時(shí)候都很短。有可能，最好是一行。將它們用于較長的文本是不好的。和之前的技巧一樣，在標(biāo)題中添加少量的字母間距。能讓他們呼吸順暢，而且視覺效果更好。
在輕文本和圖像之間，保持可接受的對比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡單地應(yīng)用一個(gè)稍微不透明的背景在你的文本后面將保持這些元素之間的對比度很好。
看看這些很棒的字體，用在標(biāo)題非常好的。發(fā)現(xiàn)他們真的很適合標(biāo)題，設(shè)計(jì)感很強(qiáng)。（我沒有推廣費(fèi)用，請放心用）
看看這些很棒的字體，用于長文本是非常好的，強(qiáng)烈推薦使用。（我仍然沒有任何推廣費(fèi)）。
標(biāo)題和正文。當(dāng)你想實(shí)現(xiàn)一個(gè)好的垂直節(jié)奏，以及一個(gè)強(qiáng)大的視覺之間，需要對文本元素排版、間距作設(shè)計(jì)。我見過許多設(shè)計(jì)，最常見的是在文章列表中，它們已經(jīng)被應(yīng)用標(biāo)題的上下空白相等，這樣就失去了這種聯(lián)系在它下面有正文。在這種情況下，我總是會(huì)給我的標(biāo)題更多的頂部邊距，而在底部，標(biāo)題和下面的內(nèi)容之間的連接是更強(qiáng)，有良好的垂直節(jié)奏，視覺層次保留在所有的文章之間。
對于下載指標(biāo)，試著去做盡可能提供信息。對于用戶，嘗試使具有信息性的下載指示符對用戶很友好。你可以通過使用顏色來實(shí)現(xiàn)這一點(diǎn)，用百分?jǐn)?shù)來顯示當(dāng)前進(jìn)度，一個(gè)簡單的圖標(biāo)，讓他們可以在任何地方取消下載時(shí)間。
如果你能保持標(biāo)題簡短，簡潔……“想做就做”。
如果可以，如果合適的話，保持標(biāo)題簡短，時(shí)髦，切中要點(diǎn)。而不是“這是你的風(fēng)格，你的方式”，簡單地使用像這樣的“你的風(fēng)格。你的方式?！比藗儠?huì)瀏覽，保持這些標(biāo)題簡短有力有助于他們更快地消化中的信息。
記住，這種方式可能會(huì)讓人感覺很突然，你需要考慮一下你所從事的項(xiàng)目類型，以及目標(biāo)受眾來決定方法是合適的，相對于更標(biāo)準(zhǔn)的格式。
正確的設(shè)計(jì)“聲音”。在項(xiàng)目中處理文本時(shí)，選擇正確的字體將影響就像你說話的聲音一樣。要大聲，要柔和，要友好，要正式，要有趣。每一種字體都有自己獨(dú)特的聲音，關(guān)鍵在于找到合適的字體你正在做的項(xiàng)目的聲音。當(dāng)你剛接觸字體時(shí)，這似乎是一項(xiàng)艱巨的任務(wù)，所以不要害怕從類似的項(xiàng)目中獲得靈感，并從這些項(xiàng)目中汲取靈感它們有助于影響你的決定，并提高你的理解什么是合適的。
你的正文，并提高可讀性處理正文文本，并試圖找到合適的行長度可能有點(diǎn)平衡。對于一個(gè)單獨(dú)的列頁面，45到75個(gè)字符被普遍認(rèn)為是滿意的行長度，而行長度為66個(gè)字符(包括字母和空格)被發(fā)現(xiàn)是最佳位置。當(dāng)然，字體大小和行高在決定可讀性時(shí)也起著重要作用，但是對于行長，保持在45到75個(gè)字符之間，就會(huì)更好了。
偶爾使用純裝飾的幽靈文字也可以，但要保留閱讀的問題。屏幕上的大部分文本內(nèi)容應(yīng)該堅(jiān)持可用性最佳的做法是沒有問題的。但有時(shí)，希望添加純出于裝飾目的的文本，我們不希望所有的設(shè)計(jì)都落入乏味。如果沒有元素會(huì)以任何方式影響用戶體驗(yàn)，那么出于裝飾的原因，插入奇怪的元素是可以的。
使用戶界面中的元素彼此區(qū)分。按鈕、通知，ui中兩個(gè)獨(dú)立但重要的元素。如果可以的話，總是試著確保你的用戶能夠快速地將它們區(qū)分開來，輕松掃描您的網(wǎng)站或應(yīng)用程序。按鈕，在大多數(shù)情況下，將優(yōu)先，所以確保他們是最突出的。項(xiàng)目在屏幕上，并很容易區(qū)分其他元素。
只是一些細(xì)微的陰影，你所需要的。我們都喜歡陰影，對吧？它們可以作為微妙又很強(qiáng)大的視覺線索，在您的設(shè)計(jì)中使用要適度。現(xiàn)實(shí)世界中的陰影，在大多數(shù)情況下幾乎是不可察覺的，而且所以你應(yīng)該在ui中模仿這種行為。放下沉重和黑暗的陰影并降低不透明度，以實(shí)現(xiàn)一些的東西更微妙和栩栩如生。
使用全部大寫？選擇適合的字體，能夠達(dá)到光學(xué)清晰度。在你的設(shè)計(jì)中適度使用“全部大寫”是很好的。選擇一個(gè)合適的字體與行高和較重的字重，使用戶的光學(xué)清晰度。
讓面包屑脫穎而出，易于為用戶解釋。面包屑無處不在，經(jīng)常用于內(nèi)容豐富的網(wǎng)站，通過最小的調(diào)整，你可以確保用戶能夠快速定位他們在一個(gè)網(wǎng)站上的位置以及他們可能需要去的其他地方。如果用戶已經(jīng)通過使用跳轉(zhuǎn)到網(wǎng)站的某個(gè)深度，這一點(diǎn)尤其有用。
使用高度飽和的顏色?試一試用淺色調(diào)來緩和氣氛或者陰涼處。高度飽和的顏色(明亮的藍(lán)色、紅色、綠色等)可以讓網(wǎng)站看起來很棒，但是當(dāng)過度使用時(shí)，它們會(huì)使使用者的眼睛疲勞，主要是在使用的時(shí)候的文字內(nèi)容。盡可能使用時(shí)要適度，并盡量與柔和的顏色搭配顏色或色調(diào)變化)的飽和顏色，以避免可怕的眼睛疲勞。使用這種方法還可以直接注意到飽和的色彩和使最重要的內(nèi)容前面和中心，與更柔和的顏色采取較少突出角色，讓用戶的眼睛休息一下。記住，在選擇顏色時(shí)，可讀性和可訪問性應(yīng)該是最優(yōu)先的。
在ui中使用已建立的圖標(biāo)，為了避免給用戶造成混淆。在你的設(shè)計(jì)中添加圖標(biāo)時(shí)，試著選擇一個(gè)有代表性的已建立的圖標(biāo)。不要選擇一個(gè)能傳達(dá)正確含義和功能的圖標(biāo)否則會(huì)引起困惑，成為用戶的認(rèn)知障礙。不要在這些圖標(biāo)上過于叛逆。
在眾多經(jīng)過嘗試和測試的設(shè)計(jì)原則中，這里有一個(gè)是幫助您為用戶生成更清晰的ui的關(guān)鍵。接近只是確保相關(guān)設(shè)計(jì)元素放置在一起的過程，表明彼此之間的關(guān)系，這有助于加快用戶的認(rèn)知。
4pt基線網(wǎng)格+ 8pt網(wǎng)格=單一網(wǎng)格。當(dāng)使用類型時(shí)，8點(diǎn)網(wǎng)格旁邊使用4點(diǎn)基線
可以為你的設(shè)計(jì)帶來更和諧的垂直節(jié)奏。您需要對齊您的類型到基線網(wǎng)格4，使用的行高值為4的倍數(shù)（16、20、24、28等）
為什么4？我發(fā)現(xiàn)在過去使用特定的文本大小時(shí)，按8的倍數(shù)縮放是不太合適。
減少標(biāo)題上的行高是很好的。與長形式的主體文本不同，它需要足夠的行高，以便折行易讀。標(biāo)題的推薦行高通常約為1至1.3倍。
選顏色有困難計(jì)劃嗎？在顏色上進(jìn)行類比論。類似的顏色，也被稱為相鄰或相鄰的色調(diào)，是其中之一最和諧的配色方案，可以大大幫助你，如果你有很難挑選出搭配得很好的顏色。由三原色、二原色和三原色組成的一組相鄰的色調(diào)幫助您創(chuàng)建一個(gè)簡單的，顏色方案快速。當(dāng)你需要快速將顏色調(diào)和到混合中時(shí)，可以使用類似的方法。
在你的設(shè)計(jì)中盡量提高信噪比。你可以在你的設(shè)計(jì)中通過最大化信號來實(shí)現(xiàn)清晰和可用性最小化噪聲，從而產(chǎn)生高信噪比。您可以通過確保提供相關(guān)信息(信號)來實(shí)現(xiàn)這一點(diǎn)有效，不相關(guān)的信息(噪聲)被減少或完全刪除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式說話。語氣嗎？嘗試所有小寫字母。使用較重的字體和大寫會(huì)顯得有點(diǎn)正式和夸張。試著選擇全小寫和較輕的字體。在處理特定項(xiàng)目時(shí)，使用類似全小寫的拷貝可以呈現(xiàn)更非正式的、可接觸的信息。記住要在圖像之間使用某種顏色疊加與文字達(dá)到較強(qiáng)的對比。
當(dāng)使用類型時(shí)，元素不需要尖叫“看看我!”一直如此但他們確實(shí)需要一個(gè)平衡的等級制度。只需通過重量、大小和顏色進(jìn)行細(xì)微的調(diào)整就可以實(shí)現(xiàn)這一點(diǎn)。這樣做可以讓用戶掃描并找到必要的元素，避免在過程中產(chǎn)生任何混淆。
養(yǎng)肥了，字體大小為最佳易讀性。當(dāng)設(shè)置暗色文字與淺色背景，選擇一個(gè)更輕的粗細(xì)。但是…反過來說:淺色文字>深色背景。最好是看一下增加一點(diǎn)字體重量，特別是對于長表單副本。以最佳的易讀性為目標(biāo)，避免讓用戶的眼睛疲勞。
試著為你要呈現(xiàn)的內(nèi)容選擇合適的字體。用戶是精明的，有一種直觀的感覺，當(dāng)內(nèi)容與他們交談當(dāng)它不是。正確的字體選擇是至關(guān)重要的，使您的內(nèi)容講給他們直率和情感的水平。
你是否使用全大寫的短行文本？嗯…這是一個(gè)好主意，增加這些字母之間的間距，以達(dá)到更好的用戶的易讀性。這樣做使單詞更容易閱讀和處理，因?yàn)樽帜父啾舜藚^(qū)分。字母之間的間距只要稍微增加一點(diǎn)就可以。
打開這些錯(cuò)誤消息，您的表格有幫助。在使用表單時(shí)，請嘗試并確保錯(cuò)誤消息得到解釋。出了什么問題，如何補(bǔ)救?？偸亲層脩袅私馇闆r，即使是像常規(guī)一樣常見的事情的形式。讓這些錯(cuò)誤消息有用，不要讓您的用戶蒙昧。
試著向用戶保證在加載過程中會(huì)發(fā)生一些的事情你的應(yīng)用程序。顯示應(yīng)用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發(fā)生一些事情。系統(tǒng)狀態(tài)可見性是一個(gè)重要的原則要遵循，并允許用戶知道發(fā)生了什么。不要讓用戶從一開始玩猜謎游戲。
告訴用戶將要做什么如果他們應(yīng)用了某個(gè)動(dòng)作。在應(yīng)用特定的操作之前，總是嘗試并詳細(xì)地告知用戶可以有結(jié)果。這尤其適用于具有不可逆轉(zhuǎn)后果的行為，如刪除某些東西。讓用戶知道將要發(fā)生什么，并在此之前要求他們進(jìn)行確認(rèn)。他們就會(huì)按下那個(gè)標(biāo)有“刪除”的紅色大按鈕。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：卡洛設(shè)計(jì)鋪 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
1、標(biāo)簽欄是什么？
2、為什么標(biāo)簽欄要放于底部？
3、標(biāo)簽欄的三大規(guī)則
4、標(biāo)簽欄的基礎(chǔ)規(guī)范
5、標(biāo)簽欄的圖標(biāo)樣式
6、標(biāo)簽欄的展示樣式
7、賦予標(biāo)簽欄更多內(nèi)容
標(biāo)簽欄也叫Tab Bar，是移動(dòng)端應(yīng)用程序中最常用的UI元素之一。標(biāo)簽欄出現(xiàn)在應(yīng)用程序屏幕的底部，可以讓用戶在應(yīng)用程序中的不同部分之間快速切換。標(biāo)簽欄可以是半透明的，也可以具有背景色，在所有屏幕方向上都保持相同的高度，并且在顯示鍵盤時(shí)被隱藏。標(biāo)簽欄可以包含任意數(shù)量的標(biāo)簽，但是可見標(biāo)簽的數(shù)量根據(jù)設(shè)備的大小和方向而變化。如果由于水平空間有限而無法顯示某些選項(xiàng)卡，則最終的可見選項(xiàng)卡將變?yōu)椤案唷边x項(xiàng)卡，該選項(xiàng)卡將在單獨(dú)屏幕上的列表中顯示其他選項(xiàng)卡。
標(biāo)簽欄在任何目標(biāo)頁面中的高度是不變的，iOS 規(guī)定它的高度為98px(iOS @2x)。但因?yàn)?iPhone X 之后的全面屏手機(jī)引入了 Home Bar ，所以在進(jìn)行界面適配的時(shí)候，請務(wù)必要加上 Home Bar 自身的68px高度。別讓Home Bar遮擋標(biāo)簽欄中標(biāo)簽的展示，這會(huì)讓兩個(gè)控件發(fā)生操作手勢沖突。
史蒂文·霍伯（Steven Hoober）在對移動(dòng)設(shè)備使用情況的研究中發(fā)現(xiàn)，人們會(huì)根據(jù)自己的設(shè)備，需求和背景以多種方式觸摸手機(jī)，觸摸手機(jī)屏幕或按鈕的用戶分三種基本方式：抱著手機(jī)的人占36%、兩只手使用手機(jī)的人占15%，而49％的人依靠一只手在手機(jī)上完成事情，除此之外75％的用戶僅用一個(gè)拇指觸摸屏幕。
在下圖中，出現(xiàn)在手機(jī)屏幕上的圖表是近似覆蓋圖，其中的顏色表示用戶的拇指可以接觸到哪些區(qū)域以與屏幕交互。綠色表示用戶可以輕松到達(dá)的區(qū)域；黃色，需要伸展的區(qū)域；紅色區(qū)域，要求用戶改變握持設(shè)備的方式。
這意味著：
將常用的“行為”放在屏幕底部很重要，因?yàn)橹恍枰绘I式的交互即可輕松到達(dá)這些“行為”。
底部標(biāo)簽欄設(shè)計(jì)應(yīng)當(dāng)遵循三大原則：結(jié)構(gòu)合理、位置清晰、可預(yù)測行為。
為了讓標(biāo)簽欄表現(xiàn)清晰，兩大平臺(tái)在規(guī)范里都對標(biāo)簽數(shù)量給出了相同的建議：建議標(biāo)簽欄內(nèi)的標(biāo)簽個(gè)數(shù)為3個(gè)至5個(gè)。因?yàn)闃?biāo)簽過多會(huì)使每一個(gè)單元標(biāo)簽的可觸空間降低，人們在物理上（手指）難以點(diǎn)擊或誤觸，除此之外還會(huì)增加應(yīng)用程序結(jié)構(gòu)的復(fù)雜性。
注：如果你因?yàn)楫a(chǎn)品結(jié)構(gòu)非常繁雜，標(biāo)簽數(shù)量想要達(dá)到更多，那么在 iOS 中就會(huì)給你強(qiáng)硬處理，iOS 人機(jī)交互規(guī)范告訴產(chǎn)品設(shè)計(jì)者們：標(biāo)簽欄雖然可以包含任意數(shù)量的標(biāo)簽，但可見標(biāo)簽的數(shù)量會(huì)根據(jù)設(shè)備的大小(平板或手機(jī))和方向(豎屏或橫屏)而自適應(yīng)變化。如果由于水平空間有限而無法顯示某些標(biāo)簽時(shí)，最后的一個(gè)可見標(biāo)簽將被會(huì)被系統(tǒng)強(qiáng)行轉(zhuǎn)換為“更多”選項(xiàng)，需要用戶點(diǎn)擊“更多”選項(xiàng)之后，系統(tǒng)才將在單獨(dú)屏幕上的列表中顯示其他被隱藏的標(biāo)簽。
“我在哪里？” 是用戶成功導(dǎo)航所需要回答的一個(gè)基本問題，我們應(yīng)當(dāng)采用適當(dāng)?shù)囊曈X提示讓用戶知道目前所處的位置（選中狀態(tài)）。在APP應(yīng)用中我們常見的處理方式有4種：改變圖標(biāo)樣式、改變大小、改變顏色、改變展示樣式。它們并不一定是獨(dú)立存在的，可以同時(shí)作用于一個(gè)標(biāo)簽。
選取每個(gè)底部導(dǎo)航選項(xiàng)都有通向它的目的地，底部導(dǎo)航應(yīng)當(dāng)將用戶直接引導(dǎo)到相關(guān)頁面，不應(yīng)該打開菜單或其他窗口。如果在某些情況下可以使用標(biāo)簽，但在其他情況下則無法使用，則應(yīng)用程序的界面將變得不穩(wěn)定且不可預(yù)測。我們要確保所有選項(xiàng)卡始終處于啟用狀態(tài)，并說明為什么選項(xiàng)卡內(nèi)容不可用。例如造作新家APP，當(dāng)用戶處于未登錄狀態(tài)時(shí)，就不能查看底部標(biāo)簽“我的”信息，當(dāng)我點(diǎn)擊標(biāo)簽“我的”，就會(huì)彈出快捷登陸界面，這樣就能讓用戶明白不能使用的原因是賬號未登陸，從另一層面講也很好的引導(dǎo)了用戶注冊與登陸。
注：不要使用標(biāo)簽欄為用戶提供對當(dāng)前屏幕或應(yīng)用程序模式下的元素起作用的控件，如果需要提供控件，請使用工具欄。
在設(shè)計(jì)標(biāo)簽欄前我們首先要了解它的基礎(chǔ)規(guī)范，在保證基礎(chǔ)規(guī)范合理的情況下再去進(jìn)行設(shè)計(jì)。
為了保證圖標(biāo)的尺寸大小一致性，我們往往會(huì)建立基礎(chǔ)的網(wǎng)格尺寸來進(jìn)行繪制圖標(biāo)，下面就以常用的24x24為大家舉例：
網(wǎng)格包含2px出血位。這樣可以確保圖標(biāo)在導(dǎo)出時(shí)將保留其所需的比例和周圍的空白區(qū)域，同時(shí)還能夠很好的平衡圖標(biāo)的視覺重心。
最后加入圖標(biāo)的keyline，keyline由圓形，正方形，矩形，正交，三角形和對角線組成。它可以為您提供圖標(biāo)集中基本形狀或比例的一致大小。這使創(chuàng)建視覺上的穩(wěn)定變得更加容易，并有助于在設(shè)計(jì)相似比例的圖標(biāo)時(shí)有共同的參考準(zhǔn)則。
在24尺寸下的keyline構(gòu)成如下（24尺寸下的出血區(qū)域?yàn)?）：
當(dāng)把圖標(biāo)畫在網(wǎng)格上時(shí)可以很好的規(guī)范圖標(biāo)，讓它們從整體的視覺上看著統(tǒng)一規(guī)范。
標(biāo)簽的數(shù)量以及標(biāo)簽的展示形式?jīng)Q定了標(biāo)簽的布局形式，標(biāo)簽的常見布局一共有2種：屏幕等分、圖標(biāo)左右間距相等。
屏幕等分是最常見的標(biāo)簽布局形式，因?yàn)椴还芩嬖诙嗌賵D標(biāo)，都可以用它進(jìn)行屏幕劃分，計(jì)算方法也十分簡單，屏幕的寬度除以標(biāo)簽個(gè)數(shù)就是每列寬度。采用此等劃分的案例有：懂車帝、今日頭條。
圖標(biāo)左右距離相等多用在標(biāo)簽數(shù)量為3個(gè)的情況下，計(jì)算方法是先去除中間圖標(biāo)的尺寸，然后再左右平均劃分等距。相對于屏幕等分，圖標(biāo)左右間距相等劃分更為緊湊。
根據(jù)菲茲定律，使用指點(diǎn)設(shè)備到達(dá)一個(gè)目標(biāo)的時(shí)間，與當(dāng)前設(shè)備位置和目標(biāo)位置的距離（D）和目標(biāo)大小（S）有關(guān)。標(biāo)簽欄作為向用戶展現(xiàn)產(chǎn)品框架的關(guān)鍵控件，熱點(diǎn)區(qū)域（可點(diǎn)擊區(qū)域范圍）的設(shè)定一定要合理。底部圖標(biāo)尺寸較小，如果將圖標(biāo)作為熱點(diǎn)區(qū)域，那么可點(diǎn)擊區(qū)域就偏小，很可能出現(xiàn)用戶點(diǎn)擊不到的情況，正確的做法是以標(biāo)簽欄的布局作為基礎(chǔ)設(shè)定，在標(biāo)簽相鄰的部分劃出一定區(qū)域作為不可點(diǎn)擊區(qū)域，以免用戶誤操作，參考如下，紅色為可熱點(diǎn)區(qū)域，藍(lán)色為不可點(diǎn)擊區(qū)域：
在產(chǎn)品設(shè)計(jì)中，不同樣式的圖標(biāo)會(huì)給人不同的感受，隨著APP風(fēng)格越來越簡潔化，標(biāo)簽欄圖標(biāo)風(fēng)格緊緊地跟著界面的風(fēng)格而改變。經(jīng)過長時(shí)間的沉淀，標(biāo)簽欄圖標(biāo)常見的默認(rèn)設(shè)計(jì)樣式一共可分為四類：線性圖標(biāo)、面性圖標(biāo)、線性+面性圖標(biāo)、輕質(zhì)感圖標(biāo)。
線性圖標(biāo)通過線來塑造輪廓，在圖標(biāo)設(shè)計(jì)中使用的線有粗細(xì)之分，常用的App圖標(biāo)設(shè)計(jì)線的粗細(xì)一般有2px、3px、4px，不同的線條粗細(xì)所帶來的視覺感受也不同，我在“如何讓你的圖標(biāo)具有說服力”文章中提到過，線條越粗那么圖標(biāo)的性格就越活潑、粗曠，線條越細(xì)圖標(biāo)性格就越精致、商務(wù)，圖標(biāo)使用描邊的粗細(xì)可以根據(jù)產(chǎn)品的氣質(zhì)來決定。
選中狀態(tài)：當(dāng)選中狀態(tài)為高亮線性圖標(biāo)時(shí)，選中狀態(tài)的圖標(biāo)顏色會(huì)與默認(rèn)狀態(tài)的圖標(biāo)顏色形成較強(qiáng)的反差，但由于線和線的差異性并不強(qiáng)，線性圖標(biāo)沒有面性圖標(biāo)更具吸引力（引導(dǎo)性），即使加入了高亮色識(shí)別度也不及面性強(qiáng)。airbnb在處理線性圖標(biāo)選中狀態(tài)時(shí)就考慮到了這一點(diǎn)，選中狀態(tài)下不僅對圖標(biāo)的顏色做了較大變化，還加大了圖標(biāo)及文字的描邊粗細(xì)，從一定程度上加強(qiáng)了圖標(biāo)的引導(dǎo)性。（注：線性狀態(tài)的圖標(biāo)選中狀態(tài)也可以變?yōu)槊嫘詧D標(biāo)或線性+面性圖標(biāo)）
面性圖標(biāo)是通過面來塑造形體的圖標(biāo)，采用了剪影的設(shè)計(jì)形式，通過線或者面去切割基礎(chǔ)輪廓面，通過分型來塑造圖標(biāo)的體積感，面性圖標(biāo)的承載信息相對與線性圖標(biāo)來說更重，更具有引導(dǎo)性。
選中狀態(tài)：面性圖標(biāo)的選中狀態(tài)為高亮面性圖標(biāo)，顏色可以為純色、也可以為漸變、透明。愛奇藝的選中狀態(tài)就采用了高亮面性圖標(biāo)的展現(xiàn)方式，除了把圖標(biāo)底色及文字的顏色加深以外，還加入了品牌色，甚至為了讓“會(huì)員”標(biāo)簽更加突出，還單獨(dú)對“會(huì)員”標(biāo)簽的顏色進(jìn)行了修改。
線面結(jié)合圖標(biāo)相較單一的線性圖標(biāo)或單一的面性圖標(biāo)樣式更加豐富、也更富有趣味性。從設(shè)計(jì)的角度上說，由于元素的多樣化，設(shè)計(jì)更容易獲得好的效果。相反，如果運(yùn)用不當(dāng)會(huì)顯得圖標(biāo)非常雜亂，如何有效的把控好兩者之間的過度是關(guān)鍵。
選中狀態(tài)：線性圖標(biāo)的選中狀可以為高亮的線性+面性圖標(biāo)。懂車帝在處理標(biāo)簽選中狀態(tài)時(shí)就把圖標(biāo)底部加入了高亮黃色圓形塊狀，即保存了線性也添加了面，加深了選中狀態(tài)的視覺重量，更加明確的讓用戶感知自己所處的位置。
輕質(zhì)感圖標(biāo)層次簡單，用色素雅干凈，采用輕投影、輕漸變的方法設(shè)計(jì)，這類圖標(biāo)具有一定的立體感，能給人輕盈、簡潔、精致的感覺。輕質(zhì)感圖標(biāo)在標(biāo)簽欄中運(yùn)用的較少，在特殊情況下才會(huì)使用，例如盒馬，就把輕質(zhì)感圖標(biāo)用在了首頁標(biāo)簽與盒馬小鎮(zhèn)標(biāo)簽，首頁標(biāo)簽的引入是為了讓用戶加強(qiáng)對品牌形象的認(rèn)知，而盒馬小鎮(zhèn)標(biāo)簽的引入則是為了加強(qiáng)圖標(biāo)的引導(dǎo)性。
*圖標(biāo)樣式的常用變化（選中與未選中）
在我調(diào)研上百種應(yīng)用程序中，發(fā)現(xiàn)主流的APP標(biāo)簽欄樣式變化大致分為六種：線性-線性、線性-面性、線性-線+面、面性-面性、面性-線+面、線+面-線+面。雖然標(biāo)簽的樣式變化繁多，但是使用率最多的是“由線性轉(zhuǎn)面性”標(biāo)簽。
標(biāo)簽欄的不同展示形式會(huì)給用戶帶來不同的使用習(xí)慣和使用感受，常見的標(biāo)簽展示形式有四種：圖標(biāo)+文字、純圖標(biāo)、純文字、舵式。
圖標(biāo)+文字是最常見的標(biāo)簽展示形式，為了讓用戶能夠很好的明白圖標(biāo)的意圖，所以在圖標(biāo)下方會(huì)配有文字提示，這樣就能大大的降低誤讀的可能性。正因?yàn)橛形淖痔崾?，所以沒有必要過于擔(dān)心圖標(biāo)的識(shí)別性問題，那么圖標(biāo)就可以得到更深的延展，可以做的更有趣，更具有產(chǎn)品氣質(zhì)，甚至可以代入更深層次的動(dòng)效。
例如東家·守藝人APP，專門售賣各種手藝人的親手制作的各種藝術(shù)品，面向的對象是喜歡傳統(tǒng)文化的人群，在這樣的背景下東家結(jié)合宋體的筆畫（筆畫拆分）把圖標(biāo)設(shè)計(jì)的更加傳統(tǒng)、古樸，創(chuàng)造出具有東方韻味且極具形式感的圖標(biāo)設(shè)計(jì)。
采用純圖標(biāo)展示形式的產(chǎn)品比較少見，純圖標(biāo)樣式的最大缺點(diǎn)就是識(shí)別性低，沒有文字說明會(huì)導(dǎo)致用戶很難找到自己想要去的位置，也不明確自己所處的狀態(tài)。所以我們?nèi)绻O(shè)計(jì)純圖標(biāo)形式，那么必須要考慮到圖標(biāo)的識(shí)別性問題，間接的舍棄掉圖標(biāo)更多的延展性，讓圖標(biāo)變得更規(guī)矩。（識(shí)別性的提升我之前寫的圖標(biāo)文章中提到過，主要可以從大眾認(rèn)知隱喻與真實(shí)世界映射兩個(gè)方向出發(fā)去提升）
使用純圖標(biāo)樣式的產(chǎn)品特征：產(chǎn)品單一、領(lǐng)域垂直、小眾化、用戶群體接受度高。即使?jié)M足這些條件下產(chǎn)品使用純圖標(biāo)標(biāo)簽，用戶第一次使用往往也是比較迷茫，需要等用戶熟悉后才會(huì)得到好轉(zhuǎn)，所以一定要慎用。除此之外不太建議用于電商、視頻、學(xué)習(xí)、社交等領(lǐng)域。
對于我們設(shè)計(jì)師來說使用純圖標(biāo)樣式的產(chǎn)品中最為熟悉的就是花瓣了。
采用純文字展示形式能夠更直觀的讓用戶進(jìn)行操作，遵循簡單易用的原則。適合用戶群體跨度較大的產(chǎn)品，多用于直播類、內(nèi)容類、簡單工具類APP中。缺點(diǎn)也顯而易見，圖標(biāo)樣式比較單一，沒法加入更多趣味化、具有產(chǎn)品特性的元素到標(biāo)簽中。
采用純文字展示形式的產(chǎn)品有很多，最熟悉不過的就是抖音，抖音的標(biāo)簽?zāi)J(rèn)狀態(tài)下采用了純文字形式，選中狀態(tài)則把文字高亮顯示，并且底部加入了圓角矩形，對于用戶群體跨度較大的產(chǎn)品，這樣的展現(xiàn)形式再好不過了。（抖音在途中改用過圖標(biāo)+文字格式，不過后面也放棄了，我當(dāng)時(shí)用著圖標(biāo)+文字類型的抖音，的確感覺太奇怪?。?/span>
舵式標(biāo)簽可以看為底部標(biāo)簽式導(dǎo)航的一種變體。它在后者的基礎(chǔ)上，突出強(qiáng)調(diào)了一個(gè)標(biāo)簽并且放在中間的位置，樣子看起來像攢了一個(gè)舵，所以取名為舵式標(biāo)簽。一般舵式標(biāo)簽的顏色、大小等視覺表現(xiàn)會(huì)被設(shè)計(jì)得和其他普通標(biāo)簽有所差異，通過視覺對比的方式吸引用戶關(guān)注。舵式標(biāo)簽通常和產(chǎn)品框架體現(xiàn)無關(guān)，大多數(shù)應(yīng)用程序使用舵式標(biāo)簽是用來承載系統(tǒng)功能。起初是因?yàn)樯鐓^(qū)類APP為了激勵(lì)和方便用戶隨時(shí)隨地地輸出UGC內(nèi)容，所以把觸發(fā)用戶創(chuàng)作/發(fā)布的功能按鈕放置在標(biāo)簽欄中。
因?yàn)槎媸綐?biāo)簽可以很好地承載產(chǎn)品的重要功能，而被許多的應(yīng)用程序設(shè)計(jì)所采用，經(jīng)過越來越多的應(yīng)用采用舵式標(biāo)簽，使用的形式也越來越多樣，它現(xiàn)在并不再單一地用于承載產(chǎn)品功能，而是配合營銷場景、付費(fèi)場景，給產(chǎn)品的變現(xiàn)、拉新賦能。拼多多就把它拉新的主要入口作用到了舵式圖標(biāo)上，并且為了讓圖標(biāo)更加顯目，甚至把圖標(biāo)做成了輕質(zhì)感的形式體現(xiàn)，同時(shí)也通過2像素的線性圖標(biāo)減弱其他4個(gè)標(biāo)簽的引導(dǎo)性。
標(biāo)簽欄不僅是向用戶展現(xiàn)產(chǎn)品框架的關(guān)鍵控件，還可以貫穿整個(gè)產(chǎn)品的商業(yè)價(jià)值的體現(xiàn)，它是連接著整個(gè)產(chǎn)品最重要的頂層信息。如果想要讓標(biāo)簽變得更加豐富，想要標(biāo)簽內(nèi)容中含有更多的情感需求、 商業(yè)需求、運(yùn)營需求，那么我們可以重點(diǎn)從這兩個(gè)層面考慮：視覺層面、交互層面。
在視覺層面上我們可以迎合用戶的偏好與期望，通過豐富視覺體驗(yàn)的方法來增加內(nèi)容的觀賞性，這樣不僅能夠很好的向用戶傳遞著產(chǎn)品調(diào)性還能吸引用戶關(guān)注以及引導(dǎo)用戶進(jìn)行操作。
裝飾性圖標(biāo)僅僅是用來提升整個(gè)界面的視覺體驗(yàn)，通過豐富視覺體驗(yàn)的方法來增加內(nèi)容的觀賞性，這樣不僅可以吸引并留住用戶，還可以讓整個(gè)用戶體驗(yàn)更加積極。
整體裝飾性圖標(biāo)的出現(xiàn)往往是為了滿足情感需求與商業(yè)需求，整體裝飾圖標(biāo)并不是一直存在的，它的特點(diǎn)是季節(jié)性與周期性，并且它并不具備任何功能性。
從情感需求出發(fā)設(shè)計(jì)裝飾圖標(biāo)：例如世界杯火熱進(jìn)行時(shí)，優(yōu)酷為了滿足用戶的情感需求，就把標(biāo)簽欄的圖標(biāo)全部替換為帶有世界杯元素的圖案，讓用戶與其產(chǎn)生情感的共鳴。
從商業(yè)需求出發(fā)設(shè)計(jì)裝飾圖標(biāo)：現(xiàn)在的年貨節(jié)，之前的雙十二、雙十一、618等，每到節(jié)日促銷活動(dòng)的時(shí)候，很多電商應(yīng)用都會(huì)換上裝飾性圖標(biāo)，例如一號店，在過年前就把標(biāo)簽欄圖標(biāo)全部改為含帶過年氣息的元素，提前來預(yù)熱活動(dòng)，引導(dǎo)用戶消費(fèi)。
單個(gè)裝飾性圖標(biāo)的出現(xiàn)大部分都是為了滿足運(yùn)營需求，運(yùn)營為了推出某個(gè)活動(dòng)或功能，往往會(huì)單獨(dú)裝飾某個(gè)圖標(biāo)的設(shè)計(jì)視覺，以便于提高圖標(biāo)的引導(dǎo)性，最直接的例子就是我剛才提到過的拼多多。
我們可以在標(biāo)簽中加入更多的品牌基因，讓其與品牌產(chǎn)生聯(lián)動(dòng)性，這一形式是大部分應(yīng)用程序都在做的，我們可以從這6個(gè)層面加入品牌基因：品牌顏色、品牌LOGO、品牌元素、品牌名稱、品牌性格、品牌吉祥物。
色彩是圖標(biāo)設(shè)計(jì)中重要的構(gòu)成元素之一，我們可以直接提取品牌色作為圖標(biāo)設(shè)計(jì)視覺元素。例如站酷，站酷的品牌色是黃色，標(biāo)簽欄的圖標(biāo)（選中狀態(tài)）就提取了品牌的黃色，讓其與品牌調(diào)性高度一致。
當(dāng)然品牌顏色除了可以直接用外，還可以在提取時(shí)適當(dāng)調(diào)整色彩的飽和度、明度，做更多的形式變化。例如懂車帝，就在原有的黃色基礎(chǔ)上做了些許調(diào)整，圖標(biāo)采用黃色透明漸變的處理方式，在與品牌顏色呼應(yīng)的同時(shí)，使得整個(gè)圖標(biāo)更加精致、有活力。
提取品牌LOGO是最常用的使用方式，我們從品牌中提取出來的圖標(biāo)一般運(yùn)用在APP首頁標(biāo)簽。因?yàn)槭醉撌茿PP中最重要的頁面，也是進(jìn)入APP默認(rèn)的頁面，把首頁圖標(biāo)替換成品牌LOGO，能反復(fù)加強(qiáng)了用戶對App的LOGO印象，這樣不但使App內(nèi)外形成了視覺聯(lián)系，同時(shí)也二次傳遞了品牌形象。例如大眾點(diǎn)評，它的首頁標(biāo)簽就用了品牌LOGO，同時(shí)也使用了品牌顏色。
我們可以在品牌中提取它識(shí)別性較強(qiáng)的局部元素作為圖標(biāo)。例如虎牙直播，它就提取了品牌卡通形象的外輪廓作為首頁圖標(biāo)。
品牌提取的元素并不只是所見到的品牌視覺形象，還可以提取與品牌內(nèi)容強(qiáng)相關(guān)的元素。例如QQ音樂，它并沒有把它的品牌LOGO直接放于其中，而是通過大眾所熟知的音符作為首頁圖標(biāo)。
如果你的品牌還不為大眾所熟知，那么為了強(qiáng)化用戶對品牌名稱的認(rèn)知，可以把品牌名稱直接放入標(biāo)簽欄中。例如MONO，就把它的名稱分為四個(gè)字母分別放在了4個(gè)標(biāo)簽內(nèi)，需要注意的是這類圖標(biāo)不能單獨(dú)出現(xiàn)，因?yàn)樗旧聿痪邆渥R(shí)別性與引導(dǎo)性，必須配合文字一起出現(xiàn)，這樣才能讓用戶理解標(biāo)簽的真正功能，我們不能為了設(shè)計(jì)而設(shè)計(jì)。
圖標(biāo)風(fēng)格可以與品牌性格保持一致，一套帶有濃厚品牌感的圖標(biāo)，會(huì)讓人記憶猶新。例如：每日故宮，它的圖標(biāo)就非常具有特色，結(jié)合了品牌的性格以及定位，加入了眾多的古代中國元素，整體看起來有股濃濃的古韻之風(fēng)。
現(xiàn)在大部分品牌都會(huì)含帶吉祥物，我們可以在設(shè)計(jì)圖標(biāo)時(shí)提取吉祥物的外形，把它用于產(chǎn)品的標(biāo)簽中。例如盒馬，它就把吉祥物做為了底部標(biāo)簽，不過需要我們注意的是如果吉祥物的風(fēng)格與我們的圖標(biāo)風(fēng)格差別較大，我們就需要對它做風(fēng)格化的處理，不然看起來就十分突兀。（盒馬對吉祥物做了輕質(zhì)感的風(fēng)格化處理）
讓用戶自定義的標(biāo)簽現(xiàn)在越來越常見，而每個(gè)產(chǎn)品對其思考的層面也都有所不同。自定義標(biāo)簽往往出現(xiàn)在個(gè)人中心，它會(huì)根據(jù)用戶上傳的頭像或用戶的捏臉生成圖標(biāo)。
目前市面上很多APP都把用戶上傳的頭像作為了個(gè)人中心標(biāo)簽展示，例如我們常用的百度網(wǎng)盤就采用了此方案，當(dāng)用戶注冊未上傳用戶頭像時(shí)，會(huì)默認(rèn)顯示系統(tǒng)標(biāo)簽，當(dāng)用戶上傳完后就會(huì)顯示用戶頭像，并且如果你是會(huì)員，還會(huì)把會(huì)員標(biāo)示顯示在標(biāo)簽的右上方，彰顯會(huì)員用戶的尊貴性。
我們可以很明顯的發(fā)現(xiàn)百度網(wǎng)盤的底部標(biāo)簽?zāi)J(rèn)狀態(tài)為線性圖標(biāo)，而個(gè)人中心不管默認(rèn)狀態(tài)還是選擇狀態(tài)都為面性圖標(biāo)，所以如果你想要加強(qiáng)個(gè)人中心的引導(dǎo)性，那么可以采取此方案。
捏臉功能作為SOUL的一大特色，捏臉的虛擬形象賦予了真實(shí)人格屬性，加強(qiáng)了社交的傳播性，所以SOUL決定把用戶自定義的捏臉放于個(gè)人中心標(biāo)簽中。
除了對標(biāo)簽做視覺的提升外，我們還可以對其加入合理的交互效果，一方面可以提升用戶在使用產(chǎn)品過程中的樂趣，另一方面還可以為用戶提供更多便利，從而增強(qiáng)用戶體驗(yàn)。
在不同的狀態(tài)下點(diǎn)擊標(biāo)簽的功能也不一樣，一個(gè)標(biāo)簽可承載2到3個(gè)功能，可以滿足不同狀態(tài)下的用戶需求。
SOUL的廣場標(biāo)簽（進(jìn)入選取頁+刷新）
SOUL的廣告標(biāo)簽承載了2個(gè)功能，當(dāng)你處于其他標(biāo)簽時(shí)，點(diǎn)擊廣場標(biāo)簽則直接進(jìn)入到廣場頁面；當(dāng)你處于廣場頁面中時(shí)，再次點(diǎn)擊標(biāo)簽則會(huì)刷新整個(gè)頁面。
有貨的發(fā)現(xiàn)標(biāo)簽（進(jìn)入選取頁+上傳圖片）
有貨的發(fā)現(xiàn)標(biāo)簽也承載了2個(gè)功能，在設(shè)計(jì)上運(yùn)用的非常巧妙，當(dāng)你處于其他標(biāo)簽時(shí)，點(diǎn)擊發(fā)現(xiàn)標(biāo)簽則進(jìn)入到發(fā)現(xiàn)頁面；當(dāng)你在發(fā)現(xiàn)頁面時(shí)你的發(fā)現(xiàn)標(biāo)簽則變?yōu)榱松蟼鲌D片標(biāo)簽，可以點(diǎn)擊上傳圖片。
淘寶首頁標(biāo)簽（進(jìn)入選取頁+刷新+置頂）
淘寶的首頁標(biāo)簽同時(shí)承載了3個(gè)功能，當(dāng)你處于其他標(biāo)簽中，點(diǎn)擊首頁標(biāo)簽則直接進(jìn)入到首頁頁面；當(dāng)你在首頁頁面第一屏?xí)r，你點(diǎn)擊首頁標(biāo)簽則會(huì)刷新整個(gè)頁面；當(dāng)你滑過3分之1屏?xí)r，首頁標(biāo)簽的功能則變?yōu)橹庙?。所以在不同狀態(tài)下首頁標(biāo)簽也會(huì)具備不同的功能，并且每種狀態(tài)下的標(biāo)簽樣式也是不同。
愛奇藝首頁標(biāo)簽（進(jìn)入選取頁+到達(dá)指定位置+置頂）
愛奇藝的首頁標(biāo)簽也是同時(shí)承載了3個(gè)功能，不過它與淘寶有些許不同，愛奇藝并不能刷新頁面，而作為替換的功能是直接到達(dá)指定位置“猜你喜歡”。
我們做的設(shè)計(jì)不要僅限于視覺所看到的，還要考慮到所觸摸的、所聽到的，我們可以利用觸覺與聽覺去輔助用戶確認(rèn)自己的選擇，當(dāng)然我們一定要合理利用，反之則會(huì)讓用戶感到十分反感。
西瓜視頻與今日頭條在點(diǎn)擊標(biāo)簽欄圖標(biāo)時(shí)手機(jī)就會(huì)發(fā)出輕微的震動(dòng)，給予了用戶很好的點(diǎn)擊反饋。
SOUL點(diǎn)擊星球標(biāo)簽時(shí)手機(jī)就會(huì)發(fā)出戀愛鈴聲，在SOUL的產(chǎn)品報(bào)告中，SOUL主要面對女性用戶，女性用戶約為男性用戶的2.4倍（女人更偏感性），并且它的主要需求是滿足測試、匹配、交友，所以戀愛鈴聲能夠很好的引起用戶的情感共鳴。不過鈴聲有利有弊，當(dāng)你在特定場景下使用SOUL時(shí)，點(diǎn)擊到星球標(biāo)簽周圍人也都能聽到戀愛鈴聲，實(shí)屬尷尬，所以我在特定場景下使用SOUL時(shí)都會(huì)默默的關(guān)掉聲音。
精彩的圖標(biāo)動(dòng)畫，對整體的設(shè)計(jì)具有畫龍點(diǎn)睛的作用，降低標(biāo)簽切換時(shí)的枯燥感，提升操作的愉悅度和期待感。甚至可以通過 tab 的動(dòng)畫設(shè)計(jì)給用戶傳達(dá)出整個(gè) APP 設(shè)計(jì)的品牌及理念。標(biāo)簽動(dòng)畫往往都比較簡單，主要有：縮放、旋轉(zhuǎn)、顏色過渡、位移、抖動(dòng)、填充、線性軌跡、結(jié)合容器、元素介質(zhì)等。接下來我們來看看SOUl、虎牙、汽車之家是怎么做的。
SOUL的底部標(biāo)簽欄運(yùn)用到了彈性動(dòng)畫、結(jié)合容器以及線性軌跡。帶有彈性縮放的標(biāo)簽反饋，讓整體的設(shè)計(jì)更加具有趣味性，相比線性縮放也更有視覺沖擊力。圖標(biāo)的運(yùn)動(dòng)規(guī)則：先從 0 放大到最大（數(shù)值根據(jù)實(shí)際情況設(shè)定），然后再回彈至正常大小。除了彈性動(dòng)畫外，它還結(jié)合了容器的元素對內(nèi)部進(jìn)行了顏色的替換以及單線條的軌跡動(dòng)畫。這樣的處理不僅趣味性十足，還強(qiáng)化了選中當(dāng)前狀態(tài)，整體標(biāo)簽切換的一致性也較高。
虎牙一直是我比較喜歡的直播平臺(tái)，它的底部標(biāo)簽動(dòng)畫也是非常值得借鑒，運(yùn)用到的動(dòng)畫形式是抖動(dòng)與趣味表達(dá)。抖動(dòng)是通過圖標(biāo)的左右、上下快速位移或旋轉(zhuǎn)形成，整體的動(dòng)畫效果節(jié)奏較快，具有一定的速度感，使整個(gè)標(biāo)簽切換的情緒表達(dá)較為俏皮、可愛。除了抖動(dòng)外還在切換過程中代入了更多小元素的趣味表達(dá)，賦予了圖標(biāo)更多的性格，對我們的設(shè)計(jì)進(jìn)行再升華，從而提高整體設(shè)計(jì)的質(zhì)感和趣味。
因?yàn)橛脩羧后w的不同，汽車之家在標(biāo)簽動(dòng)畫的設(shè)計(jì)上也相對簡單、嚴(yán)謹(jǐn)，它的動(dòng)畫形式主要是結(jié)合容器與細(xì)節(jié)晃動(dòng)。選中效果由線切換為面，并加入了品牌底色，這樣能夠清晰的給用戶傳達(dá)當(dāng)前頁面。并且為了不使整體的切換效果變得生硬，在切換過程中采用了透明度與彈性縮放，讓其過渡的相對柔和。在細(xì)節(jié)的處理上也是非常用心，每個(gè)圖標(biāo)都帶有笑臉的形狀，間接的給用戶傳達(dá)“笑臉”信息，在選取標(biāo)簽時(shí)內(nèi)部形狀會(huì)輕微晃動(dòng)。整體來看汽車之家的標(biāo)簽動(dòng)效雖然偏向嚴(yán)謹(jǐn)，但是在細(xì)節(jié)上也給予用戶傳達(dá)了更多的情感。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：黑獅力 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
一.什么是選擇器
選擇器是一個(gè)輸入字段， 用戶必須在其中選擇一個(gè)（或多個(gè)）選項(xiàng)，這與文本字段中用戶可以自由使用的輸入?yún)^(qū)不同。選擇器具有各種不同的形狀和形式。下拉菜單，復(fù)選框，切換按鈕，滑塊等都是不同類型的選擇器，但它們看起來彼此并不相似。這些類型的選擇器之間的主要功能差異是用戶可以選擇的選項(xiàng)數(shù)量：一個(gè)或多個(gè)。
二.選擇器的類別
-單選選擇器
-多選選擇器
1.單選選擇器
單選選擇器按效果又可以分為：點(diǎn)擊選擇器、滑動(dòng)選擇器、多聯(lián)動(dòng)選擇器、開關(guān)選擇器、可搜索效果的選擇器、地圖選擇器。
特點(diǎn)：同一時(shí)間只能選擇一個(gè)選項(xiàng)，當(dāng)你已經(jīng)選擇完一項(xiàng)后，準(zhǔn)備選取另一項(xiàng)，那么后選的一項(xiàng)會(huì)立刻使先選的一項(xiàng)被取消選擇。
1-1點(diǎn)擊選擇器
點(diǎn)擊選擇器可分為兩種狀態(tài)，狀態(tài)一為立即觸發(fā)，當(dāng)你點(diǎn)擊后會(huì)立即跳到下一步操作；狀態(tài)二為再次確認(rèn)觸發(fā)，當(dāng)選中某項(xiàng)時(shí)，不會(huì)立即觸發(fā)操作，而是需要再點(diǎn)擊別的觸發(fā)類組件（如保存按鈕）后，再執(zhí)行操作。
-立即觸發(fā)式：
特點(diǎn)：直接進(jìn)入，并沒有再次確認(rèn)的按鈕，可以讓你快速到達(dá)想要的目的。
建議：雖然目的能快速達(dá)到，不過也很可能會(huì)造成誤操作，所以在設(shè)定這類選擇器時(shí)要多考慮手指的觸碰區(qū)域以及每個(gè)選擇元素的距離，同時(shí)正因?yàn)槭侵苯犹D(zhuǎn)，所以應(yīng)當(dāng)加入一些操作提示。
舉例：汽車之家在用戶選擇二手車時(shí)就會(huì)出現(xiàn)此選擇器，當(dāng)我在汽車之家想要選擇二手車時(shí)，它會(huì)彈出立即觸發(fā)式選擇器控件，我們在控件上可以看到有7個(gè)圓形選項(xiàng)，分別為：汽車之家誠信聯(lián)盟、準(zhǔn)新車、奧迪、奔馳、寶馬、三廂轎車、分期購車，當(dāng)我點(diǎn)擊“奧迪”選項(xiàng)時(shí)就會(huì)立即跳轉(zhuǎn)選擇后的頁面，為了讓用戶知道自己選擇后的狀態(tài)，在跳轉(zhuǎn)頁面時(shí)還會(huì)彈出非模態(tài)彈窗的文字提示“共找到1943輛車”。
-再次確認(rèn)觸發(fā)式：
特點(diǎn)：這是最為常見的選擇器類型，當(dāng)所在選項(xiàng)選上，除了選擇另一個(gè)選項(xiàng)之外，便沒法取消選中狀態(tài)。（選且只能選擇一個(gè)選項(xiàng)）
建議：在設(shè)定此類選擇器時(shí)我們應(yīng)該從產(chǎn)品的角度去考慮是否給用戶一個(gè)默認(rèn)選項(xiàng)，甚至是否考慮給出一個(gè)重置按鈕。
舉例：我剛注冊小紅書時(shí)，在小紅書填寫信息頁面中，它的默認(rèn)選項(xiàng)是“男”，我點(diǎn)擊“女”，則會(huì)自動(dòng)取消掉“男”，它們兩者并不能同時(shí)存在，并且只有我點(diǎn)擊下一步按鈕時(shí)才會(huì)正式確認(rèn)我選擇完成。
1-2滑動(dòng)選擇器
特點(diǎn)：滑動(dòng)選擇器是將需要選中的內(nèi)容滑動(dòng)至中部，然后點(diǎn)擊確認(rèn)按鈕確認(rèn)選中后返回選中內(nèi)容。大多數(shù)運(yùn)用在選擇時(shí)間或地址上。
建議：滑動(dòng)選擇器的展示區(qū)域有限，部分選項(xiàng)會(huì)被隱藏，最好是當(dāng)用戶對所有選項(xiàng)都比較熟悉、有預(yù)期的時(shí)候，才使用它。為了保證手機(jī)屏幕觸控精度，以免發(fā)生誤觸，滾輪選擇器建議控制在5列以內(nèi)。
舉例：在小紅書填寫年齡信息時(shí)，我們只需用手指在區(qū)域內(nèi)滑動(dòng)即可選擇想要的選項(xiàng)。
1-3多聯(lián)動(dòng)選擇器
特點(diǎn)：多聯(lián)動(dòng)選擇器是由兩個(gè)或兩個(gè)以上的中繼器制作而成，第一個(gè)中繼器選擇后，一般會(huì)對第二個(gè)中繼器進(jìn)行篩選，不過因?yàn)轱@示的區(qū)域有限，所以當(dāng)你要切換時(shí)，還只能挨個(gè)切換，效率低下。
建議：可以通過數(shù)據(jù)以及功能來減少選擇時(shí)間，例如在選擇地區(qū)時(shí)，根據(jù)當(dāng)前GPS定位地理位置，定位相關(guān)省級信息及名稱，減少滑動(dòng)操作。
舉例：如下，當(dāng)我選擇了內(nèi)蒙古自治區(qū)，那么2級內(nèi)容就應(yīng)該篩選掉內(nèi)蒙古以外的城市，比較適用于省份-城市或者品牌-產(chǎn)品這種類似的選擇，當(dāng)然下面第一張多聯(lián)動(dòng)選擇器也結(jié)合了滑動(dòng)選擇器。
多聯(lián)動(dòng)選擇器展示的方式非常多，不僅可以用滑動(dòng)形式展示，還可以用點(diǎn)擊、平鋪列表等形式展示。
在左圖選擇城市時(shí)，我們必須要先選擇省份，再選擇城市，最后才能選擇縣；
右圖則沒有先后順序，不過當(dāng)你首先選擇顏色時(shí)，如果沒有相同尺碼的衣服，缺貨的尺碼則不會(huì)被選中，先選擇尺碼也是相同道理。
1-4切換開關(guān)選擇器
特點(diǎn)：切換開關(guān)選擇器有且只有兩種選項(xiàng)，用來在開和關(guān)兩種狀態(tài)之間切換。開關(guān)屬于觸發(fā)類組件，撥動(dòng)開關(guān)時(shí)，它所指揮的某個(gè)操作會(huì)立即生效，常見的使用就是授權(quán)。開關(guān)的默認(rèn)狀態(tài)并不都是關(guān)閉的，還要從產(chǎn)品本身的設(shè)定上來決策。
建議：如果某開關(guān)的功能是用戶經(jīng)常使用的狀態(tài)，那么可以在默認(rèn)狀態(tài)下打開開關(guān)，不過需要注意的是在某些特殊的開關(guān)按鈕需要打開時(shí)，必須要提前告知用戶。
舉例：當(dāng)我打開UC瀏覽器的設(shè)置時(shí)，它的輔助功能就使用了切換開關(guān)選擇器，切換的開關(guān)只需要點(diǎn)擊即可。
1-5可搜索選擇器
特點(diǎn)：可搜索選擇器一般用于選擇項(xiàng)較多時(shí)，特別是對于電商購物類的APP搜索選擇器是必不可少的，搜索選擇器會(huì)根據(jù)用戶輸入的內(nèi)容，對中繼器進(jìn)行模糊的搜索，讓用戶快速找到并選擇內(nèi)容。
建議：在搜索區(qū)域輸入文字時(shí)，可給予用戶更多的文字提示以及以及引導(dǎo)類信息。
舉例：小紅書在搜索時(shí)就會(huì)出現(xiàn)數(shù)字化的信息提示，這樣能夠很好的引導(dǎo)用戶進(jìn)入到想要的搜索結(jié)果：筆記或者商品頁面。
1-6地圖選擇器
特點(diǎn)：作為最特別的選擇器，它的功能是復(fù)雜的，它的操作方式也是多樣化的，地圖選擇器的操作可點(diǎn)擊、可拖拽、可放大縮小等等，它多用于生活類APP。
建議：可以在選擇器中加入更多趣味、互動(dòng)、可感知的設(shè)計(jì)，如加入過節(jié)元素、車輛行駛路徑、熱門區(qū)域、甚至選取后手機(jī)的震動(dòng)等。
舉例：
打車類APP必用的地圖選擇器，滴滴出行的用戶可以實(shí)時(shí)看到車輛信息，可以采用點(diǎn)擊、拖拽、放大等操作來選取上車地點(diǎn)，選取后還有文字信息提示，讓用戶確認(rèn)操作是否正確。
貝殼APP則用地圖選擇器來讓用戶選擇二手房，同時(shí)也采用了聯(lián)動(dòng)式的效果，第一步是查看區(qū)域，可以明確看到區(qū)域的售房套數(shù)，點(diǎn)擊選擇區(qū)域后我們可以看到每個(gè)路段的房子套數(shù)，點(diǎn)擊路段后就可以看到每個(gè)樓盤的套數(shù)以及均價(jià)，直到點(diǎn)擊樓盤就會(huì)彈出詳細(xì)信息框。這樣有助于用戶在選擇二手房時(shí)從大數(shù)據(jù)分析二手房的情況，有更好的對比性與選擇性。
2.多選選擇器
當(dāng)單選選擇器不能滿足用戶需要時(shí)，這時(shí)我們就可以采用多選選擇器，一般常用的多選選擇器都是采用點(diǎn)擊的方式，當(dāng)然也有滑動(dòng)類型的多選選擇器。
2-1點(diǎn)擊多選選擇器
特點(diǎn)：當(dāng)用戶想要選擇多個(gè)類別的情況下，我們就可以用點(diǎn)擊多選選擇器來展示提供給用戶選擇，通過屏幕點(diǎn)擊選中或取消選中該選項(xiàng)，它不會(huì)立即觸發(fā)操作，需要再點(diǎn)擊別的觸發(fā)類組件（如保存按鈕）后，再執(zhí)行操作。
建議：從用戶的角度來講盡量不要強(qiáng)制用戶選擇數(shù)量或者默認(rèn)全部數(shù)量；多選項(xiàng)時(shí)觸碰區(qū)域不能太小，以免造成誤操作。
舉例：小紅書在選擇感興趣的內(nèi)容時(shí)就采用了點(diǎn)擊多選選擇器，不過在選擇興趣時(shí)它就強(qiáng)制用戶至少關(guān)注4個(gè)興趣，而對于單興趣或者少興趣的用戶來講，這無疑會(huì)造成用戶體驗(yàn)的不佳，被逼再次從中選擇次要的興趣。
2-2滑動(dòng)多選選擇器
特別注明：從用戶的角度來看，它可以選擇多個(gè)區(qū)域段的內(nèi)容，所以我把它分為多選選擇器中。
特點(diǎn)：當(dāng)系統(tǒng)給出的選項(xiàng)不在自己的選擇區(qū)間時(shí)，可以很好的自定義選擇區(qū)間，把定義權(quán)限交在用戶手里。同樣，它需要再點(diǎn)擊別的觸發(fā)類組件（如保存按鈕）后，再執(zhí)行操作。
建議：在用戶滑動(dòng)操作期間要有明確的操作提示，讓用戶時(shí)刻感知目前處于的狀態(tài)；滑動(dòng)區(qū)域盡量不要超過100刻度，如果刻度距離太小，用戶在滑動(dòng)時(shí)也很難精準(zhǔn)的選擇范圍。
舉例：在汽車之家APP中，當(dāng)我要選擇汽車價(jià)格范圍時(shí)就會(huì)出現(xiàn)此選擇器，我們可以用手指滑動(dòng)來選取它的價(jià)格區(qū)間，相對于上半部分的單選價(jià)格拓展性更強(qiáng)，用戶可以自行選擇上半部分的單選選擇器，也可以選擇滑動(dòng)多選選擇器，給予用戶更多的選擇。
三、選擇器的十大應(yīng)用要點(diǎn)
1、簡單易懂
標(biāo)題易懂：
在選擇器中標(biāo)題一定要簡單明了，很快的讓用戶知道他在為什么做選擇（如：當(dāng)你關(guān)注某烹飪的APP后，它會(huì)讓你勾選喜歡的菜譜，你的標(biāo)題就可以用“選擇菜譜”四個(gè)字，簡單明了）
文字標(biāo)簽易懂：
一般使用短語而不是句子，也并不需要用標(biāo)點(diǎn)符號來結(jié)尾。（如：當(dāng)選擇想要的菜譜時(shí)，菜譜后的文字不需要加入標(biāo)點(diǎn)符號）
選取狀態(tài)易懂：
用戶能夠明確感知什么是選中狀態(tài)，什么是未選中狀態(tài)，什么是禁用狀態(tài)。（如：選中狀態(tài)為高亮顯示，未選中為普通顯示，禁用狀態(tài)為灰度顯示）
反饋提示易懂：
當(dāng)你在選擇中遇到選項(xiàng)限制或是否需要確認(rèn)操作時(shí)，反饋提示一定要一目了然。（如：當(dāng)你選擇某衣服時(shí)，S碼不能選擇，則會(huì)用灰度顯示的文字代替，甚至可以用中橫線劃過文字，明確告訴用戶不能選擇）
2、基本排序
從邏輯順序：
邏輯排序能讓用戶很快很準(zhǔn)的找到自己需要的選項(xiàng)，特別是對于選擇地址/時(shí)間/個(gè)數(shù)等常規(guī)的選項(xiàng)時(shí)，可以按照字母/遠(yuǎn)近/大小來進(jìn)行排序。例如下面在選擇地址時(shí)，就是按照A-Z字母排序，這樣可以大大節(jié)省用戶選擇的時(shí)間。
從產(chǎn)品利益角度排列順序：
當(dāng)然為了產(chǎn)品自身的利益也可以自己優(yōu)化排序方式，選項(xiàng)的順序可以說服用戶進(jìn)行選擇，用戶可能因?yàn)榈谝粋€(gè)選項(xiàng)在列表中的位置而選擇了第一個(gè)選項(xiàng)；可以輔助用戶，也可以讓用戶向著產(chǎn)品所希望的方向傾斜。例如你在選擇菜譜時(shí)，產(chǎn)品為了讓用戶選擇更加優(yōu)質(zhì)的菜譜，就會(huì)把用戶評價(jià)高的菜譜放在前列；當(dāng)然商家也會(huì)這么做，例如你要去買某款商品，商家會(huì)在選項(xiàng)中把熱門、優(yōu)質(zhì)的產(chǎn)品放在最上方，讓你優(yōu)先選擇。
從用戶體驗(yàn)排列順序：
從用戶角度來說哪些對用戶體驗(yàn)好，那么就把它排在前面。例如汽車之家在進(jìn)行車輛類別的排序中就把用戶量最多的轎車排在第一位，而把用戶量最少的輕客放在了最后一位；同樣它在汽車品牌選擇中，單獨(dú)列出了熱門品牌把它放在前列，讓用戶進(jìn)行快速選擇。
3、一致性
視覺布局一致：
每個(gè)元素之間的對齊、元素與元素之間的間距、按鈕不同狀態(tài)的視覺體現(xiàn)。一般情況下移動(dòng)端更傾向于左對齊，這樣有利于快速讀取選擇內(nèi)容，可以提高用戶的瀏覽效率并減少錯(cuò)誤。
圖片/插畫風(fēng)格統(tǒng)一：
在圖文結(jié)合的選擇器中，我們一定要保證圖片（插畫）的優(yōu)質(zhì)以及風(fēng)格的統(tǒng)一。
4、合理運(yùn)用默認(rèn)選項(xiàng)
默認(rèn)選項(xiàng)是選擇器的開始狀態(tài)。在不同的選擇器中有不同的默認(rèn)方式。
默認(rèn)未選中：
這是最常見的一種狀態(tài)，特別是對于選擇年齡、生日這些個(gè)人隱私信息，系統(tǒng)也沒有辦法進(jìn)行默認(rèn)選擇。
默認(rèn)選中其中一個(gè)選項(xiàng)：
要想默認(rèn)其中一項(xiàng)，必須考慮兩點(diǎn)因素，因素一：你想要潛意識(shí)的像用戶傳達(dá)信息，在單選選擇器中默認(rèn)選擇一項(xiàng)后，就可以潛意識(shí)的向用戶傳遞信息必須要在這組單選項(xiàng)之中選擇一個(gè)。因素二就是產(chǎn)品的傾向，例如此產(chǎn)品的性別9成都是女性，那么建議默認(rèn)選項(xiàng)為女性。
默認(rèn)選中全部：
其實(shí)默認(rèn)選中全部在用戶體驗(yàn)上來講真的不是那么的友好，例如微博這個(gè)選擇器界面，剛進(jìn)這個(gè)界面時(shí)已經(jīng)全部勾選中，并且當(dāng)你沒注意習(xí)慣性的點(diǎn)擊下面的按鈕時(shí)會(huì)生立即效，沒有返回的余地。（吐槽：有些APP甚至沒有一鍵取消功能，要一個(gè)個(gè)的點(diǎn)擊取消...）這也是為了產(chǎn)品犧牲掉了部分用戶體驗(yàn)吧！
5、給用戶更多選擇
單選選擇器的更多選擇：
如果用戶不想做出選擇，那么應(yīng)該提供一個(gè)中立選項(xiàng)，為用戶提供一個(gè)明確的方向，中立選項(xiàng)比勉強(qiáng)選擇要好。例如在選擇行業(yè)領(lǐng)域時(shí)，以上并沒有你所處的領(lǐng)域或你不確定你的領(lǐng)域，你就可以選擇“不限”或“其他”。
多選選擇器的更多選擇：
在多選選擇器中，如果不能把控到用戶的準(zhǔn)確選項(xiàng)區(qū)間，那么可以考慮滑動(dòng)多選選擇器，讓用戶有更多的選擇區(qū)間，不管是汽車之家還是懂車帝在選擇車輛價(jià)格上兩者都是采用的相同方式。
6、控件狀態(tài)
選擇控件在操作過程中必須更改其狀態(tài)/外觀，要明確讓用戶知道是否能選中，是否被選中。控件狀態(tài)一般分為三種：未選中、選中、禁用。
未選中
選擇器的開始狀態(tài)，向用戶表明，可對該選擇控件進(jìn)行操作。
選中
用戶操作選取狀態(tài)，選擇控件處于被選中的狀態(tài)。
禁用
一般情況會(huì)為灰色顯示，用戶將無法與選項(xiàng)進(jìn)行交互。
7、操作提示
指的是用戶在操作中讓用戶得到相應(yīng)的反饋，用戶根據(jù)這些反饋可以判斷當(dāng)前狀態(tài)以及操作后狀態(tài)。在選擇器中，操作提示一般用輔助文案提示及非模態(tài)彈窗提示。
輔助文案提示（選擇前與選擇中）：
輔助文案指的是在選擇控件主體之外另外放置一些文案信息來充當(dāng)說明，例如下面是地區(qū)選擇，我在選擇不同層級的區(qū)域時(shí)，它的上方會(huì)出現(xiàn)輔助提示文案，讓你明確的知道你上一層級選擇的是什么。
同樣，當(dāng)我在選擇價(jià)格區(qū)間時(shí)，滑動(dòng)選擇器的左上方一樣有文字類的提示：
非模態(tài)彈窗提示（選擇后）：
非模態(tài)彈窗一般出現(xiàn)在用戶操作完的跳轉(zhuǎn)頁面中，為了讓用戶感知所選的選項(xiàng)在頁面的狀態(tài)，如下，非模態(tài)彈窗告知用戶一共有7輛車符合標(biāo)準(zhǔn)。
當(dāng)然除了非模態(tài)彈窗外，還有模態(tài)彈窗，但是用戶體驗(yàn)極差，目前很少使用，所以就不列出來了。
8、合理使用操作區(qū)域
擴(kuò)大點(diǎn)擊區(qū)域：
在選取按鈕類的操作時(shí)，容易出現(xiàn)點(diǎn)擊不到或誤操作的現(xiàn)象，我們可以通過擴(kuò)大點(diǎn)擊區(qū)的交互區(qū)域來提高易用性，例如下圖，雖然按鈕在左邊，但是可以把橫向區(qū)域都列為可點(diǎn)擊區(qū)域。
當(dāng)然我們也可以從設(shè)計(jì)的角度來擴(kuò)大視覺范圍，從而也提高了點(diǎn)擊范圍，這樣的處理不僅提升了視覺層面，還提升了交互體驗(yàn)。（圖文結(jié)合方式）
注意交互間距：
在元素與元素之間一定要有合理的交互間距，不然很容易出現(xiàn)誤選的情況。
合理利用有效區(qū)域：
在選項(xiàng)較多的選擇器中，我們可以利用好選擇主體控件之外的區(qū)域，例如在選擇城市/品牌時(shí)，我們可以做A-Z index式字母交互區(qū)，幫助用戶快速找到想要的選項(xiàng)。
9、趣味性
讓用戶選擇本來就是一件枯燥乏味的事情，如果讓這件事變得有趣那么會(huì)極大的提升用戶體驗(yàn)。
從文本層面：
例如當(dāng)用戶填寫性別信息時(shí)，你給予用戶的文字信息并不是“男”/“女”，而是“帥氣的boy”與“酷酷的girl”，這樣會(huì)讓用戶覺得這是一件比較有趣的事情，而不是被動(dòng)選擇。（注：這樣的取名一定要符合產(chǎn)品的特性）
從視覺層面：
加入可玩兒性的選項(xiàng)，例如汽車之家的頭像切換，可以選擇自己喜歡的頭像。（頭像并不是強(qiáng)制選擇的，如果不進(jìn)行操作則是默認(rèn)選項(xiàng)）
從交互層面：
讓用戶去享受選擇。例如Soul的星球首頁就做的非常棒，在未選擇狀態(tài)他的人物會(huì)360度圍繞著轉(zhuǎn)動(dòng)，當(dāng)然你也可以快速拖拽，或者放大縮小，可玩兒性十足，并且在內(nèi)部設(shè)定了最匹配/新人的高亮顯示，協(xié)助用戶去選擇。
10、合理使用選擇器
不同的產(chǎn)品在使用選擇器時(shí)都各有不同，因?yàn)槊總€(gè)選擇器都有他的利弊，而真正要怎么去選擇還要根據(jù)產(chǎn)品本身來定。
那么我就拿目前市面上最常見的5個(gè)地址選擇器的類型來分析一下利弊：
1/多聯(lián)動(dòng)選擇器（平鋪式）
貨車幫采用的是多聯(lián)動(dòng)平鋪式選擇器，它最大的特點(diǎn)就是能夠一眼就看清楚所有地址，不過地址多時(shí)需要花時(shí)間去找，只是當(dāng)你經(jīng)常使用此功能時(shí)便會(huì)形成記憶，再此搜索的時(shí)候就能形成記憶點(diǎn)擊，效率很高，并且在操作外還有路徑提示，不僅可以幫助你記住層級選項(xiàng)，還可以實(shí)時(shí)返回路徑進(jìn)行重新選擇。
手勢操作：點(diǎn)－點(diǎn)－點(diǎn)
2/多聯(lián)動(dòng)選擇器（列表跳轉(zhuǎn)式）
閑魚采用的是多聯(lián)動(dòng)列表跳轉(zhuǎn)式選擇器，這個(gè)選擇器最大的缺陷就是選擇三級之后用戶可能會(huì)忘了上一級的內(nèi)容，那么就又要切換到上一級，閑魚采用它的原因是因?yàn)樗挥卸壜?lián)動(dòng)，不存在遺忘現(xiàn)象，不過這樣列表式的選擇效率并沒有平鋪的效率高，人眼習(xí)慣掃視橫向內(nèi)容，所以橫向的內(nèi)容獲取往往要比縱向的多，在地址選擇器上我個(gè)人是不太建議采用多聯(lián)動(dòng)列表跳轉(zhuǎn)式，因?yàn)椴⒉桓咝б膊恢庇^。
手勢操作：滑－點(diǎn)－點(diǎn)
3/多聯(lián)動(dòng)選擇器（列表式）
轉(zhuǎn)轉(zhuǎn)采用的是多聯(lián)動(dòng)列表式選擇器，它的優(yōu)點(diǎn)是可以根據(jù)右側(cè)字母來找城市，數(shù)據(jù)偏大也能夠很快的查找。不過如果在層級的選項(xiàng)中出現(xiàn)錯(cuò)誤，同樣就要切換到上一級，并且在操作中沒有輔助信息提示。
手勢操作：滑/點(diǎn)－滑/點(diǎn)
4/多聯(lián)動(dòng)選擇器（下滑式）
安居客采用的是多聯(lián)動(dòng)下滑式選擇器，這種形式的選擇器不會(huì)遮擋后面的主要內(nèi)容信息，在選擇完地址之后能立即看到地址的篩選結(jié)果。優(yōu)點(diǎn)是能快速選擇多級地址，并且層級分明，擴(kuò)展性較強(qiáng)可以做成地址多選。缺點(diǎn)是不適合3個(gè)層級以上的地址選擇。
手勢操作：點(diǎn)－滑/點(diǎn)－點(diǎn)
5/地圖選擇器
美團(tuán)外賣采用的是地圖選擇器，這個(gè)選擇器一般用在需要精準(zhǔn)定位的生活類APP中，它的優(yōu)點(diǎn)就是能夠快速精準(zhǔn)定位，并且自動(dòng)錄取定位信息，它的缺點(diǎn)也顯而易見，不能含帶層級并且對范圍也有約束。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：黑獅力 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
新冠疫情后，如“健康寶”這類的小程序逐步成為大家生活中必不可少的應(yīng)用工具，并且大量線下商業(yè)場景如教育培訓(xùn)、百貨購物等通過小程序方式快速實(shí)現(xiàn)了線上“營業(yè)”，使得“小程序”這類商業(yè)解決方案，更加被大眾認(rèn)可并獲得新一輪快速發(fā)展。
而小程序的快速發(fā)展離不開其“生態(tài)土壤”——“分發(fā)平臺(tái)”的助力。作為分發(fā)平臺(tái)，為了滿足C端用戶的多元化需求，必然要在供給端市場上爭奪優(yōu)質(zhì)B端商戶。為衡量分發(fā)平臺(tái)對B端商戶的吸引力，需要用一套完善的評估機(jī)制。
這種評估的衡量主體不再是我們熟悉的C端用戶產(chǎn)品，衡量范疇也不應(yīng)僅局限在功能易用、體驗(yàn)流暢等傳統(tǒng)用戶產(chǎn)品體驗(yàn)維度上；而是轉(zhuǎn)化到平臺(tái)與B端的生態(tài)視角，分析內(nèi)容或服務(wù)供給者與分發(fā)平臺(tái)之間合作流程、合作意愿，以及分發(fā)平臺(tái)的生態(tài)健康度。
那么如何開展面向B端的“生態(tài)評估”，如何設(shè)定合理且全面的評估指標(biāo)，如何客觀的解讀評估結(jié)果，本文將從這些方面與大家分享我們在ToB視角下評估中的若干發(fā)現(xiàn)。
///
1、『評什么』評估體系建立
| 明確目標(biāo)：理解B端商戶訴求
傳統(tǒng)意義上，一款C端產(chǎn)品主要為了滿足用戶的某項(xiàng)特定需求，諸如搜索、購物、社交或地圖導(dǎo)航等，其產(chǎn)品目標(biāo)往往聚焦在完成一系列特定操作，并注重提升可用、易用、好用等維度的體驗(yàn)感知，從而提升用戶活躍、留存等數(shù)據(jù)結(jié)果，及品牌口碑。因此C端產(chǎn)品評估的核心指向是“體驗(yàn)”，體驗(yàn)是產(chǎn)品必須重視且保障的“紅線”。
而在小程序生態(tài)中，B端商戶作為小程序分發(fā)平臺(tái)上服務(wù)或內(nèi)容資源的供給方，最核心的訴求是以其獨(dú)特的服務(wù)或內(nèi)容資源，在分發(fā)平臺(tái)獲取對應(yīng)的流量，從而產(chǎn)生訂單、廣告線索等商業(yè)利益。體驗(yàn)不再是唯一重要的評價(jià)維度，有時(shí)甚至?xí)屛挥趯ι虡I(yè)利益的考量。同時(shí)分發(fā)平臺(tái)為獲取B端商戶豐富優(yōu)質(zhì)的服務(wù)或信息資源，功能布局必然導(dǎo)向滿足B端商業(yè)利益的實(shí)現(xiàn)。因此對B端商戶的訴求應(yīng)該從合作“伙伴”視角去理解，評估的核心指向是“利益”，在利益之下體驗(yàn)成為“可選項(xiàng)”而非“必選項(xiàng)”。
理解了ToC與ToB兩種業(yè)務(wù)的需求差異后，我們將更容易明確ToB指標(biāo)設(shè)定和解讀的重點(diǎn)。
| 設(shè)定指標(biāo)：梳理生態(tài)產(chǎn)品內(nèi)在的復(fù)雜結(jié)構(gòu)
圍繞著ToB業(yè)務(wù)中商戶與平臺(tái)間的利益共贏的底層邏輯，并通過對行業(yè)中多類B端分發(fā)生態(tài)產(chǎn)品的評估體系進(jìn)行桌面研究及規(guī)律總結(jié)，我們認(rèn)為以下三個(gè)鏈條可以描述B端分發(fā)生態(tài)產(chǎn)品的復(fù)雜結(jié)構(gòu)：
1、流程操作層：“賬號入駐-上線&迭代-數(shù)據(jù)分析-信息互動(dòng)等”的操作鏈條，指向商戶日常運(yùn)營操作的CRM系統(tǒng)，建設(shè)目標(biāo)是流程順暢、操作便捷；
2、規(guī)則秩序?qū)樱?/strong>“審核要求-規(guī)范建議-等級體系-權(quán)益激勵(lì)”的秩序鏈條，表現(xiàn)了平臺(tái)意志及價(jià)值觀，定義了商戶做什么被獎(jiǎng)勵(lì)，做什么被懲罰，構(gòu)建了以權(quán)益為中心的成長激勵(lì)體系，形成了獎(jiǎng)懲規(guī)則秩序，建設(shè)目標(biāo)是規(guī)則清晰、秩序井然；
3、資源能力層：“分發(fā)獲客-私域沉淀-運(yùn)營召回-變現(xiàn)轉(zhuǎn)化”的收益鏈條，指向服務(wù)和內(nèi)容的分發(fā)能力，及觸達(dá)用戶后私域沉淀及運(yùn)營能力。建設(shè)目標(biāo)是流量資源充沛，運(yùn)營能力及工具有效，能帶給商戶實(shí)際利益，代表的是生態(tài)平臺(tái)的實(shí)際吸引力。
由上，依照上述三個(gè)鏈條，對應(yīng)的評估體系如下：
///
2、『如何評』評估方案制定
| 劃定填答內(nèi)容：明確“誰”可以“回答什么”
由于評估主體是商戶，不像傳統(tǒng)C端用戶是“決策”與“執(zhí)行”的統(tǒng)一體，商戶內(nèi)部存在決策層（CEO/小程序負(fù)責(zé)人）和執(zhí)行層（商務(wù)、產(chǎn)品、運(yùn)營、研發(fā)等）的角色分離，導(dǎo)致不同角色能貢獻(xiàn)的信息并不相同。
具體而言，決策層通盤考慮公司的戰(zhàn)略目標(biāo)及布局，關(guān)注能帶給商戶實(shí)際利益的“資源能力層”指標(biāo)，如流量，私域運(yùn)營效果等。執(zhí)行層更聚焦在目標(biāo)實(shí)現(xiàn)中的執(zhí)行效率、體驗(yàn)，可回答“流程操作層”、“規(guī)則秩序?qū)印钡闹笜?biāo)，如流程操作的順暢性、審核要求和規(guī)范建議的適用性等。
如錯(cuò)邀決策層回答執(zhí)行層面問題，將無法得到細(xì)節(jié)問題的癥結(jié)所在；如果錯(cuò)邀執(zhí)行層回答決策布局問題，也不可能得到準(zhǔn)確全面的答案。因此明確“誰”能回答“什么”問題至關(guān)重要。
同時(shí)，決策層會(huì)依據(jù)分發(fā)平臺(tái)提供的商業(yè)價(jià)值，對比所付出的執(zhí)行成本，確定是否繼續(xù)投入。因此兩者間的信息存在相互驗(yàn)證關(guān)系，引入多角色評估有利于得到更全面的視角。
| 做好抽樣方案：長尾分布下分群抽樣
B端商戶作為生態(tài)中的供給“群體”，具有內(nèi)在群體結(jié)構(gòu)，每個(gè)商戶為生態(tài)提供的價(jià)值并不均勻，在生態(tài)內(nèi)可獲得的資源也不均勻。符合“貧者愈貧，富者愈富”的馬太效應(yīng)。
少數(shù)行業(yè)頭部商戶，自身體量規(guī)模大、品牌效應(yīng)強(qiáng)，如家政行業(yè)的58到家、快遞行業(yè)的順豐等，屬于各自行業(yè)內(nèi)寡頭玩家，可為生態(tài)提供該行業(yè)內(nèi)絕大多數(shù)優(yōu)質(zhì)甚至獨(dú)有資源，通?？色@取流量扶持。
而大量長尾商戶，自身體量規(guī)模較小、品牌效應(yīng)弱，如社區(qū)保潔公司、區(qū)域性物流公司等，可供給的資源稀薄、質(zhì)量參差，多數(shù)情況下只能自生自滅。雖然長尾商戶個(gè)體對平臺(tái)價(jià)值貢獻(xiàn)很少，但群體數(shù)量巨大，種類繁多，可保障平臺(tái)供給的多樣性，滿足用戶多元長尾的需求，因此也是生態(tài)中必不可少的供給者。
因此，考慮到兩個(gè)群體在生態(tài)內(nèi)價(jià)值的差異，評估需分別取樣，并對兩個(gè)亞群各自賦予結(jié)構(gòu)權(quán)重，以便將各自評估得分?jǐn)M合為統(tǒng)一得分。
對于具體結(jié)構(gòu)權(quán)重?cái)M定方式，則需依據(jù)平臺(tái)不同發(fā)展階段的目標(biāo)重點(diǎn)而定，如發(fā)展初期依賴行業(yè)頭部資源保障用戶體驗(yàn)，則頭部權(quán)重更高；而發(fā)展成熟期依賴大量長尾商戶保障供給的多樣性和豐富度，則長尾商戶更高。
///
3、『評出啥』評估結(jié)果分析
接下來，我們將引入兩個(gè)例子介紹評估結(jié)果的落地應(yīng)用。
| 分析各板塊得分差異
在不同發(fā)展階段，平臺(tái)生態(tài)建設(shè)的目標(biāo)重點(diǎn)也不同。通過橫向?qū)Ρ雀髦笜?biāo)差異，能夠判斷出現(xiàn)階段短板問題，確定后續(xù)優(yōu)化方向。
如上圖1，有大量體驗(yàn)問題暴露在“流程操作層”，導(dǎo)致該維度得分低，這是一個(gè)典型的處于發(fā)展初期的平臺(tái)生態(tài)特征：其基礎(chǔ)功能尚未完善，商戶入駐/上線等流程操作體驗(yàn)不佳；但早期受益于流量扶持等優(yōu)待政策，外加開發(fā)者尚處于平臺(tái)摸索期，其對規(guī)則秩序和資源能力的滿意度相對較高。當(dāng)前階段，平臺(tái)應(yīng)將精力重點(diǎn)投入在基礎(chǔ)流程的建設(shè)上，優(yōu)化基礎(chǔ)體驗(yàn)問題，以加速生態(tài)規(guī)模的擴(kuò)大。
如圖2，當(dāng)基礎(chǔ)流程逐步建設(shè)成熟后，開發(fā)者對于平臺(tái)的各類分發(fā)場景、運(yùn)營規(guī)則有一定的實(shí)踐經(jīng)驗(yàn)后，更容易挑戰(zhàn)“規(guī)則秩序”和“資源功能”等板塊的得分，此時(shí)說明分發(fā)平臺(tái)已經(jīng)進(jìn)入細(xì)致打磨分發(fā)場景、運(yùn)營工具、獎(jiǎng)懲規(guī)則及權(quán)益體系階段，精力重點(diǎn)應(yīng)該放在深入理解不同類型的行業(yè)打法，拓展分發(fā)場景并配以適合的運(yùn)營玩法的獎(jiǎng)懲規(guī)則及權(quán)益體系，以提升開發(fā)者的主動(dòng)運(yùn)營意愿。
| 關(guān)注不同生態(tài)群體得分差異
平臺(tái)發(fā)展初期往往需要扶持頭部開發(fā)者，打造標(biāo)桿案例吸引更多開發(fā)者入駐，因此這一階段頭部得分往往高于腰尾部。而隨著生態(tài)進(jìn)一步完善，腰尾部逐漸找到生存方式，逐漸縮小與頭部的差距。而如果腰尾部得分持續(xù)低迷，則說明平臺(tái)后續(xù)的發(fā)展?jié)摿Σ蛔?。同樣，如果頭部從始至終都沒有腰尾部得分高，說明示范作用沒樹立起來，優(yōu)質(zhì)資源有流失的風(fēng)險(xiǎn)。這兩種都是生態(tài)健康度不佳的表現(xiàn)，需要業(yè)務(wù)加強(qiáng)警惕。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
為什么同樣尺寸的圓形看起來比方形的小？
字體設(shè)計(jì)師不會(huì)把所有字母都設(shè)計(jì)得一樣高。他們會(huì)注意到人類視覺的特殊性，所以他們會(huì)使用光學(xué)技巧創(chuàng)造一個(gè)和諧的、可讀的、平衡的字體。
在上圖中，一個(gè)正方形、一個(gè)三角形和一個(gè)圓在幾何上是相等的。然而，我們的眼睛卻認(rèn)為三角形和圓形偏小。這是因?yàn)檫@三種形狀有不同的重量。從字體上講，就是黑色的數(shù)量分布并不均勻。
有兩種方式能夠使得它們保持視覺平衡：
A. 計(jì)算兩個(gè)形狀的面積，并保持它們相等
我不喜歡使用這種方法，因?yàn)樗贿m用于簡單的形狀，如三角形、圓形和菱形。這種方法對于復(fù)雜的視覺效果不太有效。
B. 使尺寸更大、超出和模糊形狀是測試視覺重量最簡單的方法
現(xiàn)在你應(yīng)該明白了為什么非方形/圖標(biāo)看起來比方形小，讓我們看看真正的圖標(biāo)和 UI 元素如何使用這些光學(xué)原理變得更好。
在設(shè)計(jì)整套圖標(biāo)時(shí)，確保它們的平衡是至關(guān)重要的。為了保持平衡，在圖標(biāo)背板和圖標(biāo)區(qū)域之間留出額外的空間，并允許非方形圖標(biāo)超出圖標(biāo)區(qū)域。
另一個(gè)例子是一個(gè)矩形的UI元素和一個(gè)圓形按鈕放在一起。如果圓形按鈕的高度與矩形UI元素相同，那么圓形按鈕看起來會(huì)更小?；诠鈱W(xué)校正原理，你需要區(qū)別對待這兩個(gè)元素。
看看下面的例子，WhatsApp，三星消息，和Swiggy支持聊天。你覺得哪一個(gè)更正確?請?jiān)诹粞詤^(qū)發(fā)表你的看法。
還有比正方形更正方形的嗎?
我們的眼睛有古怪的視覺感知，我們看到的事物與現(xiàn)實(shí)不同。下面是一個(gè)類似的小測試，你覺得哪個(gè)圓和哪個(gè)方更標(biāo)準(zhǔn)?
在這些橢圓和矩形中，一個(gè)是正圓，一個(gè)是正正方形。我已經(jīng)修改了正確的，但他們似乎更對稱了，這是因?yàn)榇怪?水平錯(cuò)覺。(彩云注：右邊是調(diào)整過的，看起來會(huì)更圓和更正)
大多數(shù)幾何字體不是幾何圖形。字體設(shè)計(jì)師通過牢記人類的視覺感知來設(shè)計(jì)高質(zhì)量的字體。他們幾乎在每個(gè)字母中都使用光學(xué)原理，以使字體保持平衡。
你從上面的測試中應(yīng)該明白了我的意思。要了解更多，請看下面的圖片。我把字母“O”從幾何字體Futura放在一個(gè)完美的圓圈旁邊。你覺得哪一個(gè)看起來更對稱?
你甚至在底部文字出現(xiàn)之前就猜到了，對吧?來自Futura的字母“O”比完美的圓更寬，但看起來更對稱。原因是，我們的眼睛傾向于看到的垂直區(qū)域比水平區(qū)域要長，即使它們是相同的。
讓我們看看這個(gè)錯(cuò)覺是如何出現(xiàn)在字母“T”上的。
在上圖中，水平筆畫的粗細(xì)要小于垂直筆畫的粗細(xì)，以避免產(chǎn)生錯(cuò)覺。你可以在設(shè)計(jì)方形圖標(biāo)、方形背景或頭像邊框等時(shí)使用這個(gè)技巧。
如何使駕駛盡可能平穩(wěn)?
設(shè)計(jì)字體字形就像開車。當(dāng)我們開車時(shí)，如果已經(jīng)在彎道的起點(diǎn)時(shí)，我們不會(huì)轉(zhuǎn)動(dòng)方向盤，只是在到達(dá)彎道前稍作自然轉(zhuǎn)彎，以免發(fā)生意外。
字體設(shè)計(jì)者不依賴于圖形編輯軟件的預(yù)設(shè)弧度。他們會(huì)調(diào)整曲線使其更平滑，因?yàn)樗麄冎廊搜劭梢粤⒓醋⒁獾街本€突然變成曲線的點(diǎn)。
讓我們看看這兩種曲線：純幾何和微調(diào)。試著觀察哪一個(gè)干擾了你的眼睛，哪一個(gè)是光滑的。
讓我們看看在UI設(shè)計(jì)中我們可以在哪些地方融入這種學(xué)習(xí)。
你可能已經(jīng)注意到右邊的按鈕、圖標(biāo)和框架看起來更賞心悅目。而左邊的曲線有一個(gè)很硬的從直線到曲線的過渡。
我們?nèi)绾涡拚€呢?在設(shè)計(jì)時(shí)，可以進(jìn)入形狀編輯模式，手動(dòng)調(diào)整曲線手柄的大小，如下圖所示。
為什么眼睛的判斷比數(shù)值參數(shù)更重要?
間距是字體設(shè)計(jì)中最關(guān)鍵的部分。字體設(shè)計(jì)師根據(jù)字母的形狀對字母進(jìn)行組合，并以不同的間距排列字母。例如，字母A和V是三角形的，包含更多的外部空白。所以，如果它們一起出現(xiàn)，那么它們之間的間距會(huì)有點(diǎn)寬，需要減少間距。這有助于形成和諧的字體。
字體來源:Ek Mukta，作者:Girish Dalvi博士和Yashodeep Gholap
現(xiàn)在，讓我們看看如何將這個(gè)知識(shí)點(diǎn)運(yùn)用到視覺設(shè)計(jì)的其他方面。你可能已經(jīng)注意到，在圓形或矩形容器中放置三角形圖標(biāo)會(huì)使圖標(biāo)顯得不協(xié)調(diào)。這僅僅是因?yàn)楫?dāng)用軟件來對齊的容器中，三角形的面積兩邊是不相等的?？纯聪旅娴膱D片，可以用視覺解釋來理解它。
為了使三角形在其容器內(nèi)具有光學(xué)中心，我們需要平衡兩邊的重量。對于三角形，你可以找到質(zhì)心，并將其與容器的中心對齊。現(xiàn)在，如果三角形是用形狀工具創(chuàng)建的，Adobe Illustrator會(huì)提供質(zhì)心的提示。
如果沒有看到質(zhì)心提示，也不要擔(dān)心。質(zhì)心可以通過簡單地畫線從任何兩個(gè)邊的中心到它們對面的頂點(diǎn)來定位。查看下面的圖片來更好地理解它。
這種方法只適用于幾何形狀。對于其他更復(fù)雜的形狀，你需要依靠你的眼睛判斷，而不是數(shù)學(xué)參數(shù)。
需要記住的是:如果你為開發(fā)者切圖時(shí)，你需要在圖標(biāo)周圍保留一些區(qū)域，這樣他們就可以將圖標(biāo)放在背景的中央。
從圖標(biāo)的質(zhì)心畫一個(gè)圈，留下它周圍的額外區(qū)域。
讓我們檢查一下，可以在留言區(qū)討論下到底哪個(gè)公司使用了錯(cuò)誤的資源？
如何平衡?
你有沒有仔細(xì)注意過字母“B”?它的底部被設(shè)計(jì)得比頂部大。如果我們設(shè)計(jì)的兩個(gè)半圓在數(shù)學(xué)上是相等的，它會(huì)看起來不平衡(檢查左圖)。這是因?yàn)槲覀冞M(jìn)化到從“視角”的概念來處理物理世界，在這個(gè)概念中，遠(yuǎn)處的物體看起來比附近的物體更小。（彩云注：可以理解為當(dāng)你在山腳時(shí)看到的山腳物體要比看山頂?shù)囊?，透視原理?
在印刷中，這意味著要使字體同樣平衡，就需要在底部畫得更重。
讓我們通過翻轉(zhuǎn)字體中的幾個(gè)字母來看到明顯的區(qū)別。
字體來源:Ek Mukta，作者:Girish Dalvi博士和Yashodeep Gholap
同樣的概念適用于其他水平對稱的字母形式，甚至在字母“H”的交叉杠是放在實(shí)際的中心以上，使它看起來更平衡。
所以，下次當(dāng)你設(shè)計(jì)一個(gè)水平的圖標(biāo)或標(biāo)志時(shí)，使用這種底部重的技巧來讓它在視覺上更加平衡。
這種錯(cuò)覺也被稱為“波根多夫錯(cuò)覺”( Poggendorff illusion)，這是一種奇怪的現(xiàn)象，會(huì)扭曲我們對形狀相交角度不是90°的感知。出于某種原因，我們的大腦很難推斷出一條被其他形狀部分覆蓋的線，從而導(dǎo)致連續(xù)性的中斷。為了更好地理解它，先看看下面例子中的左邊的圖，看看哪條線是連續(xù)的，A還是B?然后檢查我縮小了封面線的右邊的圖片。我希望你明白我的意思。
在拉丁字體中，' X '或' x '就是這種錯(cuò)覺的受害者，需要特殊處理使其看起來更自然。字體設(shè)計(jì)者稍微偏移對角線，以矯正X或X的光學(xué)效果。(彩云注：右邊是調(diào)整后的，視覺上看更加連續(xù))
如果你在為其他語言設(shè)計(jì)字體或?yàn)锳PP設(shè)計(jì)圖標(biāo)集時(shí)遇到類似的問題，你可以嘗試像在字母“X”中那樣偏移斜線。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：彩云Sky 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
設(shè)計(jì)不是拼圖，深入下去，有很多細(xì)節(jié)需要推敲，而這些細(xì)節(jié)的背后的邏輯與意義更值得關(guān)注。產(chǎn)品主要強(qiáng)調(diào)的是與人的交互，用戶通過對產(chǎn)品的操作來實(shí)現(xiàn)自身的目的，比如雙擊，滑動(dòng)，常按等，而操作一般建立在產(chǎn)品的功能基礎(chǔ)上，產(chǎn)品的功能細(xì)節(jié)體現(xiàn)在產(chǎn)品的業(yè)務(wù)邏輯中，產(chǎn)品所提供的功能是否更好的滿足用戶的需求，操作細(xì)節(jié)與功能細(xì)節(jié)密不可分，功能影響著用戶的操作，而操作細(xì)節(jié)更多體現(xiàn)在用戶的感受。
061.「淘寶」讓優(yōu)惠券合理使用的優(yōu)先級設(shè)置
062.「QQ」消息圖標(biāo)-“摸一下”就能拉近距離
063.「百度地圖」未來出行-提前規(guī)劃行程變得輕而易舉
064.「高德地圖」出行前-人性化的天氣提醒
065.「微信」公眾號文章在看-讓你看個(gè)夠
066.「QQ音樂」跑步電臺(tái)-讓枯燥的運(yùn)動(dòng)變的更有趣
067.「騰訊視頻」暖心的提示建立信任的橋梁
068.「躺平」動(dòng)態(tài)IP插圖-促使用戶進(jìn)一步行動(dòng)
069.「愛奇藝閱讀」會(huì)“冒泡”的TabBar欄
070.「美團(tuán)」更明確的視覺傳達(dá)-減少用戶思考
071.「網(wǎng)易云音樂」遇見陌生人-聽歌交友
072.「酷狗音樂」再也不用死死盯著歌詞頁面了
073.「微信」8.0浮窗-沒有最好、只有更好
074.「Boss直聘」綁定微信-重要消息再無遺漏
075.「QQ」自習(xí)室-換種方式學(xué)習(xí)，不一樣的收獲
061.「淘寶」讓優(yōu)惠券合理使用的優(yōu)先級設(shè)置
產(chǎn)品體驗(yàn)：
在淘寶的紅包卡券列表頁，可根據(jù)自身需求的實(shí)際情況設(shè)置優(yōu)先使用類型，以達(dá)到優(yōu)惠券的合理化使用。下單確認(rèn)時(shí)，系統(tǒng)會(huì)自動(dòng)選擇事先設(shè)置好的類型，依次對訂單金額使用優(yōu)惠券進(jìn)行減免。
設(shè)計(jì)思考：
只要我們出門走上街頭，就會(huì)看到各種各樣的優(yōu)惠券在向我們招手，逛一圈回來，手里能攥一大把優(yōu)惠券。即便是在家，樓梯道、門把手上、門縫下面都會(huì)有優(yōu)惠券塞進(jìn)來，多券在手，我們總是會(huì)去琢磨怎么花費(fèi)最劃算。不只是線下如此，線上更是夸張，每注冊一個(gè)電商平臺(tái)，都能收到一堆優(yōu)惠卡券，而且還是日更新的。
商家都知道，在打折促銷日漸平常的今天，消費(fèi)者很難會(huì)再有強(qiáng)烈的購物沖動(dòng)，單純的打折降價(jià)已經(jīng)不能給消費(fèi)者直觀的感受了，額外的優(yōu)惠才能對消費(fèi)者更有吸引力。為了提高店鋪轉(zhuǎn)化率，吸引流量，商家或平臺(tái)都會(huì)發(fā)放一些優(yōu)惠券，讓消費(fèi)者有“實(shí)惠”的感覺，更有利于拉動(dòng)二次進(jìn)店，以驅(qū)動(dòng)用戶買下更多的商品。其實(shí)優(yōu)惠券發(fā)放給消費(fèi)者之后并非不聞不問，還需要考慮通過何種方式發(fā)放、如何提醒、如何促進(jìn)消費(fèi)轉(zhuǎn)化都值得深究，如果優(yōu)惠券過期，表面上看是用戶的損失，實(shí)際真正得到損失的是平臺(tái)/商家。
在淘寶的紅包卡券功能里，可設(shè)置優(yōu)惠券的使用優(yōu)先級，便于用戶在下單時(shí)按照自己想要的方式讓優(yōu)惠券合理化依次使用，比如依據(jù)過期時(shí)間的先后、優(yōu)惠力度的大小等，便于達(dá)到最大化利用。在消費(fèi)者的心里，優(yōu)惠的金額即自己賺到的金額，不僅能讓其感受到優(yōu)惠的強(qiáng)度，還能有效避免優(yōu)惠券的浪費(fèi)，有利于平臺(tái)/商家發(fā)放的優(yōu)惠券最大程度的使用，提高消費(fèi)下單轉(zhuǎn)化率，達(dá)到消費(fèi)者、平臺(tái)、商家三方共贏的目的。
（PS：如果每次都是平臺(tái)默認(rèn)選擇，難免浪費(fèi)，比如一張8折優(yōu)惠券用在10元的商品上，遠(yuǎn)遠(yuǎn)不及用在100元的商品上劃算：用戶的消費(fèi)思維）
062.「QQ」消息圖標(biāo)-“摸一下”就能拉近距離
產(chǎn)品體驗(yàn)：
雙擊或按住QQ下方消息小圖標(biāo)往四周拖動(dòng)，就會(huì)變換各種不同的小表情，俏皮可愛的表情非常有趣。
設(shè)計(jì)思考：
Tab欄的作用主要是做內(nèi)容分類，節(jié)省設(shè)備的空間，在用戶需要的時(shí)候隨時(shí)可以點(diǎn)擊?？梢韵胂笠幌拢绻麤]有tab欄給大的模塊分類，應(yīng)用的功能全面鋪開，就像進(jìn)入了一個(gè)大型垃圾場（輕量型應(yīng)用除外），亂糟糟的感覺。Tab欄本身就是承載多個(gè)功能集合的一個(gè)入口，其點(diǎn)擊量影響著用戶的使用頻率和操作深度，直接關(guān)聯(lián)著轉(zhuǎn)化率的問題，所以很多應(yīng)用也會(huì)在視覺呈現(xiàn)樣式、交互手勢、情感化、微動(dòng)效等方向下功夫，用來吸引用戶去點(diǎn)擊，為其增加點(diǎn)擊量及操作頻率。
QQ的Tab欄消息圖標(biāo)就使用了趣味化的微動(dòng)效樣式，雙擊、或輕觸圖標(biāo)往四周摸一下，圖標(biāo)就會(huì)變換各種不同的小表情，真的是讓網(wǎng)友震驚了，通過趣味性的表情變化，也可讓用戶的心理情緒也隨之改變，俏皮可愛的圖標(biāo)樣式在保證識(shí)別性的前提下增加了親和力和趣味性，拉近與用戶之間的距離。趣味化的表現(xiàn)方式且與年輕人生活圈接軌，體現(xiàn)用戶時(shí)尚潮流的文化基因，時(shí)刻用戶保持著新鮮感。
（PS：上圖中只是舉例了其中幾個(gè)表情，如果想了解更多，請進(jìn)入QQ應(yīng)用中體驗(yàn)）
063.「百度地圖」未來出行-提前規(guī)劃行程變得輕而易舉
產(chǎn)品體驗(yàn)：
①、使用百度地圖自駕出行，選中其中一條路線后，點(diǎn)擊左下方的出行建議，設(shè)定出行日期及時(shí)間，系統(tǒng)以每15分鐘為一個(gè)時(shí)間段，計(jì)算出每個(gè)時(shí)間段出行預(yù)估的耗時(shí)，并推薦最優(yōu)出行線路。
②、選擇公交/地鐵出行時(shí)，除了應(yīng)有的路線指引，還提示了未來的時(shí)間段用該出行方式存在的故障及延時(shí)信息。
設(shè)計(jì)思考：
出行駕車如何避開堵車高峰？如何選擇合適的時(shí)間打車？公交/地鐵常用線路何時(shí)會(huì)出現(xiàn)特殊情況停運(yùn)晚點(diǎn)等，這些很多無法確定的時(shí)間經(jīng)常困擾著大家。眼看著春節(jié)假期就來臨了，這么好的旅游機(jī)會(huì)可不能在家中“躺尸”式的荒廢度過，想必有很多人已經(jīng)相約著去游玩一番的準(zhǔn)備，不過經(jīng)常會(huì)碰到途中堵車、路線封閉、交通工具停運(yùn)等問題的出現(xiàn)，真的是讓人“頭大”。
①、百度地圖的“未來出行”功能，自駕可提前設(shè)定出行時(shí)間，查看未來出發(fā)時(shí)刻的相應(yīng)耗時(shí)，未來時(shí)刻以每15分鐘為間隔，滑動(dòng)時(shí)間柱就能了解哪個(gè)時(shí)間點(diǎn)出發(fā)耗時(shí)最短，還可以向下滑動(dòng)頁面，進(jìn)一步了解每一段路程的詳細(xì)用時(shí)，讓周末出游的用戶，提前規(guī)劃行程變得輕而易舉。
②、還可以精準(zhǔn)預(yù)估“地鐵進(jìn)站”、“公交候車”的耗時(shí)，以及預(yù)估公交地鐵的擁擠情況，讓用戶出行更添安全感，提前了解未來搭乘公交、地鐵時(shí)已確定會(huì)出現(xiàn)的突發(fā)狀況，便于提早預(yù)算換乘交工工具，節(jié)約出行時(shí)間，提高出行效率，還能方便用戶下班回家避開晚高峰。
064.「高德地圖」出行前-人性化的天氣提醒
產(chǎn)品體驗(yàn)：
進(jìn)入高德地圖首頁，如果是雨天，頁面視覺會(huì)顯得比較暗，能看到烏云及明顯的雨滴落下，3秒后回到正常狀態(tài)。
設(shè)計(jì)思考：
不知小伙伴們是否碰到過這種情況，帶著雨傘從來不下雨，下雨的時(shí)候都是沒有帶雨傘；打車后前往上車地點(diǎn)發(fā)現(xiàn)在下雨，要么取消訂單，要么去買雨傘，總是那么的事與愿違。變化不定的天氣是最為影響出行的一項(xiàng)因素。而面對忽晴忽雨的天氣，如何才能順利出行呢？
使用高德地圖，進(jìn)入地圖首頁時(shí)，界面會(huì)出現(xiàn)天氣動(dòng)效，提示實(shí)時(shí)的天氣狀況，尤其是下雨天，可以提醒用戶出門記得帶雨傘，還便于用戶根據(jù)實(shí)際的天氣狀況選擇合適的交通工具出行，不論是打車、公交還是騎行，都可以隨意調(diào)整，在用戶出行之前通過視覺強(qiáng)調(diào)提醒，非常實(shí)用。
065.「微信」公眾號文章在看-讓你看個(gè)夠
產(chǎn)品體驗(yàn)：
在微信公眾號的文章底部，點(diǎn)擊在看，底部會(huì)展開一個(gè)新版塊“喜歡此內(nèi)容的人還喜歡”，給用戶推薦相似文章。
設(shè)計(jì)思考：
閱讀量怎么樣，要看標(biāo)題起的吸不吸引人，文章內(nèi)容質(zhì)量怎么樣，要看轉(zhuǎn)發(fā)量的多少。我們都知道，微信有很多公眾號都會(huì)產(chǎn)出質(zhì)量較高的文章，所以也被譽(yù)為繼線上看書之后的又一個(gè)知識(shí)發(fā)源地。將公眾號的文章拉到底部之后，“在看”也是一個(gè)不錯(cuò)的數(shù)據(jù)統(tǒng)計(jì)，點(diǎn)擊過“在看”的讀者，不僅預(yù)示著對文章的肯定，同時(shí)也能增加文章的閱讀量，形成二次傳播，
在微信公眾號的文章底部點(diǎn)擊“在看”后，會(huì)出現(xiàn)新增的相關(guān)文章推薦版塊，并提供公眾號名稱、文章標(biāo)題、點(diǎn)贊數(shù)和文章封面圖片等，對公眾號主和自媒體的人來講，文章曝光和閱讀量的提升又多了一成機(jī)會(huì)，為讀者推薦與原文相似或者同頻的文章類型，既能滿足引導(dǎo)用戶繼續(xù)探索的目的，還能通過所有公眾號相互串聯(lián)，讓其他公眾號的文章都有機(jī)會(huì)增加曝光和展示，進(jìn)行流量分發(fā)，兩全其美。
066.「QQ音樂」跑步電臺(tái)-讓枯燥的運(yùn)動(dòng)變的更有趣
產(chǎn)品體驗(yàn)：
在QQ音樂的設(shè)置里，通過跑步電臺(tái)選擇適合自己跑步速度頻率對應(yīng)類型的歌曲播放，一邊跑步一邊聽歌，為自己提供跑步節(jié)奏和堅(jiān)持的動(dòng)力。
設(shè)計(jì)思考：
基于現(xiàn)在快節(jié)奏的生活狀況，很多年輕人在午餐后直接睡覺、晚飯后常坐不起，這就是大批年輕人無法控制自己身體、越來越胖的原因?！跋矚g”跑步的的人群越來越多，但眾所周知，跑步需要極強(qiáng)的耐力和自律來控制自己堅(jiān)持下去，但大部分人都挨不過三分鐘熱度，定下跑步目標(biāo)時(shí)來勢洶洶，放棄時(shí)就借口連連。
如果在跑步過程中感到非常無聊，就不妨用下QQ音樂的跑步電臺(tái)，選擇一首適合自己跑步的神曲吧。QQ音樂的跑步電臺(tái)根據(jù)自己跑步的頻率推薦適合的音樂，有適合慢跑的、快跑的、節(jié)奏感強(qiáng)烈的、專業(yè)人士的推薦......再加上QQ音樂本身帶強(qiáng)大的歌曲庫，在跑步過程中可以聽到不同曲風(fēng)的好歌，讓跑步停不下來。用戶在跑步之前一般都會(huì)設(shè)定時(shí)間或距離目標(biāo)，在跑步時(shí)不停的查看數(shù)據(jù)（類似小時(shí)候在學(xué)校上著40分鐘的一節(jié)課，經(jīng)常查看還剩幾分鐘下課），播放著跑步電臺(tái)的音樂，能引導(dǎo)用戶的思維偏離設(shè)最初計(jì)定的目標(biāo)，將部分思維想法轉(zhuǎn)換到音樂的節(jié)奏中，給自己提供更多的跑步動(dòng)力，則堅(jiān)持的更久。另外，還可以設(shè)置“按步頻匹配音樂”，免去手選，系統(tǒng)根據(jù)實(shí)時(shí)的運(yùn)動(dòng)頻率，自動(dòng)為用戶精準(zhǔn)推薦符合該頻率的歌曲，讓原本枯燥的運(yùn)動(dòng)變的更加有趣。
067.「騰訊視頻」暖心的提示建立信任的橋梁
產(chǎn)品體驗(yàn)：
在零點(diǎn)以后打開騰訊視頻，橫屏觀看影片，頂部以“夜深了”溫馨的提醒，暗示“熬夜黨”以身體健康為重，放下手機(jī)早點(diǎn)休息。
設(shè)計(jì)思考：
在幾年以前，就報(bào)道過關(guān)于網(wǎng)吧通宵熬夜猝死的新聞。而如今互聯(lián)網(wǎng)時(shí)代，基于電腦、智能手機(jī)的普及，去網(wǎng)吧上網(wǎng)的人的確少了，但相同的悲劇新聞卻更多了，比如躺在床上熬夜逛淘寶、刷抖音、嗨聊、追劇等，一夜過去就沒再醒過來（這絕不是玩笑，可能就發(fā)生在我們身邊），只不過換了種方式，去的很“安逸”而已。
使用騰訊視頻觀看影片，在橫屏狀態(tài)下，到了深夜零點(diǎn)以后，屏幕上方會(huì)顯示“夜深了”，通過暖心的文案提醒用戶放下手機(jī)早點(diǎn)休息，表達(dá)出對用戶的關(guān)切之意。語言是情感化設(shè)計(jì)最直接的利器，這種提示雖然沒有直接中斷用戶觀看視頻，卻很直接的將用戶線上思維轉(zhuǎn)換至現(xiàn)實(shí)的場景之中，充分的考慮到用戶的身心健康，以情感化的方式引起用戶警覺，促使用戶結(jié)束觀看，表面上看似縮短了該用戶的使用時(shí)長，實(shí)則跟用戶之間建起了一座相互信任的橋梁，以提升用戶后續(xù)的使用粘性，增減其忠誠度。
068.「躺平」動(dòng)態(tài)IP插圖-促使用戶進(jìn)一步行動(dòng)
產(chǎn)品體驗(yàn)：
進(jìn)入躺平APP關(guān)注（首頁）頁，當(dāng)頁面數(shù)據(jù)為為空時(shí)，Tab欄上方會(huì)出現(xiàn)IP插圖，通過動(dòng)態(tài)的指引方式引導(dǎo)用戶進(jìn)入發(fā)現(xiàn)頁關(guān)注躺友，以獲取內(nèi)容信息。
設(shè)計(jì)思考：
在我們使用的眾多應(yīng)用中，大部分的空數(shù)據(jù)頁面都僅僅只提示頁面狀態(tài)，甚至有的一片空白，無任何提示都，并沒有合理的引導(dǎo)用戶如何去獲取數(shù)據(jù)信息，會(huì)導(dǎo)致用戶疑惑或焦慮，對產(chǎn)品產(chǎn)生不信任感，從而造成用戶流失，因用戶量的減少直接影響整體業(yè)務(wù)運(yùn)轉(zhuǎn)，得不償失。
躺平APP的空狀態(tài)利用IP打造了一套頗具獨(dú)特風(fēng)格的視覺形象，用一種“賤賤”的表現(xiàn)方式，映射出了主流用戶最真實(shí)的姿態(tài)，可謂是“人賤人愛”。
進(jìn)入躺平首頁，當(dāng)沒有好友、頁面數(shù)據(jù)為空時(shí)，通過動(dòng)態(tài)IP插圖明確的行動(dòng)指令引導(dǎo)用戶去關(guān)注躺友，以獲得數(shù)據(jù)內(nèi)容，能讓用戶快速地進(jìn)入到產(chǎn)品使用中，減少用戶的疑惑和焦慮感。同時(shí)，動(dòng)態(tài)的表現(xiàn)方式更具點(diǎn)擊欲望，讓交互行為更加活潑有趣，不僅能正確的引導(dǎo)用戶，也是轉(zhuǎn)化用戶進(jìn)一步操作好方法。
069.「愛奇藝閱讀」會(huì)“冒泡”的TabBar欄
產(chǎn)品體驗(yàn)：
點(diǎn)擊愛奇藝閱讀Tab欄的冒泡圖標(biāo)，除頁面切換之外，圖標(biāo)還會(huì)向上冒著氣泡，動(dòng)態(tài)呈現(xiàn)方式非常有趣。
設(shè)計(jì)思考：
APP的Tab欄作為第一觸點(diǎn)，對整個(gè)應(yīng)用模塊的分類起著不可替代的作用，還能檢驗(yàn)應(yīng)用整體的設(shè)計(jì)是否精致，其重要性不言而喻。很多設(shè)計(jì)師都會(huì)在圖標(biāo)風(fēng)格及造型上下很大的功夫，但卻常常忽視另外的一個(gè)關(guān)鍵點(diǎn)，即tab觸發(fā)時(shí)的動(dòng)效設(shè)計(jì)，合理的動(dòng)畫效果，能起到畫龍點(diǎn)睛的作用，但在設(shè)計(jì)過程中一定要考慮什么樣的動(dòng)畫效果更符合該產(chǎn)品的調(diào)性，傳達(dá)出設(shè)計(jì)品牌及理念。
點(diǎn)擊愛奇藝閱讀APP底部tab欄的“冒泡”圖標(biāo)，圖標(biāo)以動(dòng)效方式呈現(xiàn)，其上方還會(huì)冒著氣泡，2秒后自動(dòng)消失，能降低頁面切換后、內(nèi)容刷新時(shí)需要等待的枯燥感，提升用戶操作的愉悅度，且動(dòng)態(tài)的表現(xiàn)方式相比靜態(tài)更吸引眼球，以趣味化的方式增加視覺關(guān)注度，因此在切換 tab 時(shí)具有更強(qiáng)的視覺沖擊力。動(dòng)態(tài)的氣泡結(jié)合tab欄“冒泡”標(biāo)題，則更加真實(shí)形象，更好的傳達(dá)寓意，也能給用戶留下深刻的印象。
070.「美團(tuán)」更明確的視覺傳達(dá)-減少用戶思考
產(chǎn)品體驗(yàn)：
使用美團(tuán)酒店/住宿選擇入住時(shí)間，在日歷中設(shè)定好起止日期后，除起止日期用了明顯的提示外，中間夾帶的時(shí)間也用了淺色填充提示，截止時(shí)間上方還提示了入住天數(shù)統(tǒng)計(jì)。
設(shè)計(jì)思考：
在我們外出需要入住酒店時(shí)，選擇住店截止日期是必不可少的一步，因目前可供住宿的應(yīng)用比比皆是，在用戶體檢方面稍不留神，用戶就可能選擇其他應(yīng)用。設(shè)計(jì)師需要在設(shè)計(jì)時(shí)下功夫，比如減少操作路勁、節(jié)約用戶時(shí)間成本、明確的視覺傳達(dá)等，只要多站在用戶的角度思考，都能帶來更好的用戶體驗(yàn)。
在美團(tuán)APP上使用住宿，選擇起止時(shí)間時(shí)，并非常規(guī)的設(shè)置好起止時(shí)間就完事兒了。在起止日期范圍內(nèi)的時(shí)間里，系統(tǒng)使用了淡淡的底色填充顯示在日歷中，用更明顯的視覺傳達(dá)，讓用戶更明確自己所選擇的日期及范圍。截止時(shí)間上方統(tǒng)計(jì)了用戶的入住天數(shù)，因?yàn)樯婕敖疱X成本，在用戶可能會(huì)自己計(jì)算的情況下，系統(tǒng)已經(jīng)通過自動(dòng)統(tǒng)計(jì)時(shí)間來減少用戶的思考，節(jié)約時(shí)間成本，便于用戶在更快的時(shí)間內(nèi)做出決策，達(dá)到轉(zhuǎn)化的目的。
071.「網(wǎng)易云音樂」遇見陌生人-聽歌交友
產(chǎn)品體驗(yàn)：
使用網(wǎng)易云音樂的一起聽功能，除了能分享給好友外，還可以選擇“遇見陌生人”，系統(tǒng)自動(dòng)匹配興趣相投的陌生人并添加進(jìn)來一起聽歌。
設(shè)計(jì)思考：
自網(wǎng)易云音樂“一起聽”上線以來，深受廣大用戶的好評，原來聽著寂寞的歌曲并不會(huì)寂寞?；诓煌男枨?，心情不好時(shí)，邀請閨蜜一起聽；有新歌發(fā)行時(shí)，邀興趣相投的好友一起聽.....，但是，并非每次都那么方便，需要好友資源、相同時(shí)間、同一個(gè)音樂應(yīng)用等諸多條件，有時(shí)候邀請發(fā)出去之后，收到的只有尷尬。
網(wǎng)易云音樂的一起聽最新版本上線了“遇見陌生人”功能，這個(gè)功能能夠讓兩個(gè)彼此之間不認(rèn)識(shí)的人同時(shí)收聽一首歌曲，對于有很多心事的人而言，這的確是一個(gè)可以讓你袒露心聲的好機(jī)會(huì)。和陌生人一起聽歌，還能通過聽歌來交友，實(shí)現(xiàn)了更多有趣的交流模式，讓用戶在聽歌的過程中找到志同道合的好友，不得不說，這個(gè)功能真的很貼心。
072.「酷狗音樂」再也不用死死盯著歌詞頁面了
產(chǎn)品體驗(yàn)：
在酷狗音樂設(shè)置中可開啟桌面歌詞，按住歌詞卡片拖動(dòng)調(diào)整擺放位置（限設(shè)備四角），還可以通過滑動(dòng)使其吸附在設(shè)備兩側(cè)，待需要時(shí)再拖出來，點(diǎn)擊卡片關(guān)閉按鈕，歌詞關(guān)閉，歌曲也隨之停止播放。
設(shè)計(jì)思考：
曾幾何時(shí)，智能手機(jī)還未普及，我們偶爾聽到一首喜歡的歌曲，趕緊回去打開電腦，開著桌面歌詞，跟著學(xué)了起來?？粗烂娓柙~，跟隨節(jié)奏，可能是學(xué)歌最快的方式了，在KTV看著屏幕唱歌就是最好的例子。隨著后來智能手機(jī)的普及，聽歌/學(xué)歌確實(shí)方便多了，任何地方、任何環(huán)境（耳機(jī)）隨時(shí)打開APP就行，不知大家有沒有發(fā)現(xiàn)，雖然聽歌的次數(shù)、時(shí)間都增加了，很多歌都能哼上幾首，但正經(jīng)起來，好像什么歌都不會(huì)唱，要想學(xué)還得盯著APP播放頁的歌詞，太過局限，很多人都不想浪費(fèi)這個(gè)時(shí)間。
酷狗音樂的桌面歌詞就方便了很多。從設(shè)置中開啟桌面歌詞，用戶在聽著歌曲時(shí)逛淘寶、聊天、看書都可以隨時(shí)瀏覽歌詞，如果歌詞卡片遮擋了手機(jī)內(nèi)容，拖到邊緣隱藏即可，非常方便有查看、摘錄歌詞的需求的用戶使用，同一時(shí)間做著幾件事情，省時(shí)省力，何樂而不為呢？
073.「微信」8.0浮窗-沒有最好、只有更好
產(chǎn)品體驗(yàn)：
微信上線8.0版本，浮窗由之前的“邊緣吸附-只顯示標(biāo)題”調(diào)整到了“左上角-顯示網(wǎng)頁預(yù)覽圖”，多個(gè)浮窗更清晰。
設(shè)計(jì)思考：
記得以前，使用微信瀏覽網(wǎng)頁時(shí)，如果中途退出，下次就得重新打開，真心麻煩，用戶在此痛點(diǎn)的訴求下，浮窗功能便誕生了，從此，聊天/刷朋友圈、看文章不再艱難，中途停止，用浮窗掛在屏幕邊緣就行了，其方便程度自然不用多說。
微信一直致力于用戶體驗(yàn)而不停的探索，正所謂沒有最好，只有更好，即使上線了某個(gè)能讓用戶開心尖叫出來的功能，其團(tuán)隊(duì)也不會(huì)止步于此。微信8.0版本在上了一波“吊炸天”的功能后，也順帶優(yōu)化了浮窗功能，不得不說：比以前好用多了。入口固定在了左上角，解決了之前懸浮設(shè)備兩側(cè)遮擋內(nèi)容需要拖來拖去的問題，有多個(gè)浮窗時(shí)，也不用花太多時(shí)間回想哪個(gè)是自己想要的網(wǎng)頁（之前只顯示標(biāo)題），通過縮略圖就一目了然，能有效減少用戶思考而帶來選擇性困難的問題，極大方便用戶使用，考慮真的很人性化。
074.「Boss直聘」綁定微信-重要消息再無遺漏
產(chǎn)品體驗(yàn)：
在Boss直聘設(shè)置功能里，進(jìn)入通知和提醒，按照提示綁定微信并開啟消息通知，就可以通過微信接受Boss直聘引用里的溝通信息了。
設(shè)計(jì)思考：
對于現(xiàn)在的白領(lǐng)技術(shù)人才，很大一部分都是一邊工作一邊求職，以求某得更好的前程或更高的薪資，畢竟很優(yōu)秀的公司還是在少數(shù)。不管在一個(gè)企業(yè)做了多么久，只要實(shí)力相當(dāng)，跳槽漲薪遠(yuǎn)比待在一個(gè)公司提薪來的快，這是一個(gè)被業(yè)界公認(rèn)又不會(huì)被挑明的真相?；诒旧砭驮诠ぷ鞯脑颍舐毑粫?huì)那么的明顯，投遞簡歷之后，更不會(huì)長時(shí)間停留在求職應(yīng)用里，等到下班去看時(shí)，因?yàn)殚L時(shí)間未回復(fù)消息導(dǎo)致機(jī)會(huì)稍縱即逝。
Boss直聘的微信“代收消息”能幫助用戶解決這個(gè)難題。通過設(shè)置中的消息與提醒，綁定微信，方便用戶能通過微信及時(shí)收到重要的求職溝通信息，再也不用擔(dān)心錯(cuò)過重要消息了，十分方便，為心中有“小九九”的求職者提供了很大的便利。
075.「QQ」自習(xí)室-換種方式學(xué)習(xí)，不一樣的收獲
產(chǎn)品體驗(yàn)：
在QQ的“動(dòng)態(tài)”Tab功能里，進(jìn)入自習(xí)室，能看到正在學(xué)習(xí)的人數(shù)，“點(diǎn)擊加入”便可跟其他小伙伴一起學(xué)習(xí)了，學(xué)習(xí)中可相互夠溝通、點(diǎn)擊他人頭像“充電”等，很有儀式感。
設(shè)計(jì)思考：
不知大家是否有過這種經(jīng)歷：想每天早上起來跑步，可沒堅(jiān)持兩天就被各種理由征服；想決心減肥，可控制不了自己的嘴巴和食欲，連減肥的想法都沒有了；想睡前看書，可抖音、游戲、追劇一直刺激著自己的大腦神經(jīng)，最后書本只能放在家里吃灰。想努力的人總是能給自己定下每天的學(xué)習(xí)目標(biāo)，做好學(xué)習(xí)計(jì)劃，但是沒過幾天就堅(jiān)持不下去了，沒有意志力，整個(gè)人總是陷入焦慮的狀況，放棄，又不甘心，重新開始又放棄，這樣的惡性循環(huán)持續(xù)下去，可還是在原地打轉(zhuǎn)，有沒有想過換種方法試試。
進(jìn)入QQ的自習(xí)室，我們就可以和更多小伙伴一起學(xué)習(xí)學(xué)習(xí)交流、互相鼓勵(lì)，雖然是在線上，感覺有些虛擬，但針對自制力不強(qiáng)的同學(xué)卻能起到獲得堅(jiān)持下去的動(dòng)力，一群人在一起學(xué)習(xí)比一個(gè)人更有學(xué)習(xí)氛圍和儀式感。
（不要抬杠，報(bào)過網(wǎng)課同學(xué)都清楚，看直播課通常會(huì)有更強(qiáng)的吸收能力，而課后看回播不僅會(huì)把時(shí)長翻上兩倍，其吸收能力也比較差，直到看不下去放棄為止，少數(shù)自制力很強(qiáng)的除外。同樣的道理，在圖書館看書比在家看書的效率也能翻上好幾倍）
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：大漠飛鷹 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
在體驗(yàn)的過程中，其實(shí)里面有很多小揪揪需要深挖和思考，所以千萬不能小瞧它。很多產(chǎn)品細(xì)節(jié)的背后都是為了更多新用戶的加入、瀏覽、留存、付費(fèi)/轉(zhuǎn)化等，以最終達(dá)到對用戶服務(wù)/體驗(yàn)的提升、內(nèi)容生產(chǎn)者的利益以及企業(yè)自身的商業(yè)化。
106.「微信」公眾號取消關(guān)注-潛在的門檻
107.「高德地圖」視覺障礙模式-色盲/色弱用戶的福星
108.「小宇宙」紙杯電話-滿滿的回憶殺
109.「叮咚買菜」猜你喜歡-“找相似”讓你更加喜歡
110.「高德地圖」減少思考時(shí)間的AR實(shí)景導(dǎo)航
111.「搜狗輸入法」復(fù)雜/生僻字-貼心的拼音合并功能
112.「得物」3D空間-720度無死角瀏覽商品
113.「馬蜂窩」趣味且炫酷的連擊點(diǎn)贊
114.「真快樂」中斷登錄流程-最后的彈窗挽留
115.「網(wǎng)易云音樂」是如何降低用戶取關(guān)成功幾率的？
116.「中國農(nóng)業(yè)銀行」啟動(dòng)頁-連貫性的故事場景
117.「訊飛輸入法」詞窮-空格聯(lián)想關(guān)鍵字助力完善
118.「微信」群內(nèi)發(fā)專屬紅包-沒有“中間商”
119.「網(wǎng)易云音樂」不會(huì)放過任何展示品牌的機(jī)會(huì)
120.「淘寶」引流無處不在-訂單列表夾帶常購好貨
106.「微信」公眾號取消關(guān)注-潛在的門檻
產(chǎn)品體驗(yàn)：
微信公眾號的取消關(guān)注在改版后更換了樣式，由之前非常明顯的按鈕弱化為小頭像圖標(biāo)，并置于右上角。
設(shè)計(jì)思考：
我們經(jīng)常穿行于各大微信公眾號之間，其目的主要在于閱覽各種軟文，一方面增加我們對自身、周邊事物的了解，另一方面提高自己的眼界?；诠娞枖?shù)量的龐大，其內(nèi)容、質(zhì)量也是參差不齊，總會(huì)挑選一些自認(rèn)為質(zhì)量不錯(cuò)的公眾號進(jìn)行關(guān)注，根據(jù)時(shí)間流逝，對公眾號的類型及質(zhì)量要求在不停的變化，取消關(guān)注、來回切換也是常有的事?？勺詮纳洗胃轮?，很多用戶在公眾號歷史消息頁面找不到取消關(guān)注的入口了。
微信公眾號之前在歷史消息頁面有一個(gè)醒目“不再關(guān)注”按鈕，隨時(shí)清晰可見。改版之后，將“不再關(guān)注”按鈕換成了一個(gè)非常小的“頭像圖標(biāo)”，調(diào)整到了右上角位置，圖標(biāo)的樣式且與取消關(guān)注毫無關(guān)聯(lián)，如果不通過試錯(cuò)操作則很難發(fā)現(xiàn)。微信這樣調(diào)整的目的主要在于增加用戶取消操作的成本，也是為了保護(hù)公眾號的利益。公眾號只是平臺(tái)推出的一個(gè)版塊或子產(chǎn)品，其真實(shí)運(yùn)作起來，作者、讀者缺一不可，增加取消關(guān)注的難度，總會(huì)有部分用戶知難而退或延時(shí)取關(guān)，很大程度上降低了公眾號的掉粉率，隨著掉粉率的降低或穩(wěn)定，有一種對原創(chuàng)作者的內(nèi)容肯定、認(rèn)可的錯(cuò)覺，潛在的鼓勵(lì)作者創(chuàng)作出質(zhì)量更高的內(nèi)容，同時(shí)可能會(huì)吸引更多的用戶關(guān)注，如此良性循環(huán)下去，三方共贏。弱化取消關(guān)注入口，看似很小的改動(dòng)，或許有用戶會(huì)抱怨，但對產(chǎn)品的穩(wěn)定和提升起到的很大的作用。
107.「高德地圖」視覺障礙模式-色盲/色弱用戶的福星
產(chǎn)品體驗(yàn)：
在高德地圖的地圖設(shè)置中開啟視覺障礙模式，道路交通擁堵情況的色彩提示，會(huì)替換成一套色盲/色弱用戶的專屬配色，幫助其更輕松的使用地圖導(dǎo)航。
設(shè)計(jì)思考：
首先，我們在考駕照之前，都會(huì)被要求去對應(yīng)機(jī)構(gòu)體檢，其中就包括視覺檢查，如果是色盲/色弱用戶則很難按照正常流程去考駕照，但不排除原本沒有問題、在拿到駕照之后，逐漸出現(xiàn)色盲/色弱的情況（例如：曾經(jīng)有人眼睛里進(jìn)了一只蚊子，揉過之后就出現(xiàn)視覺障礙），但依然有自駕出行的需求。除此之外，還有部分并無自駕需求的色盲/色弱用戶，會(huì)查看地圖導(dǎo)航，根據(jù)實(shí)際路況來選擇出行工具，此時(shí)這類人群對常規(guī)的路況色彩提示并不能準(zhǔn)確的辨識(shí)，因而陷入不知所措的狀態(tài)。
高德地圖增加了視覺障礙功能，在設(shè)置中開啟后，路況的顏色提示會(huì)變成色盲/色弱用戶的專屬配色，其設(shè)置中有色彩對應(yīng)的代表說明，便于此類型用戶能輕松掌握路況信息。高德的這種思考方式是讓任何人在任何情況下都能平等地、方便地、無障礙地使用地圖導(dǎo)航，不得不說，產(chǎn)品團(tuán)隊(duì)真的是有心了。
108.「小宇宙」紙杯電話-滿滿的回憶殺
產(chǎn)品體驗(yàn)：
小宇宙APP在網(wǎng)絡(luò)出現(xiàn)故障時(shí)，會(huì)以“紙杯電話”的樣式作為缺省頁插圖，提醒網(wǎng)絡(luò)壞了，喚醒兒時(shí)記憶。
設(shè)計(jì)思考：
現(xiàn)在的孩童時(shí)光，大多數(shù)的業(yè)余時(shí)間除了學(xué)習(xí)之外，就是在電視機(jī)前看動(dòng)畫片或玩手機(jī)。但在80后那個(gè)沒有網(wǎng)絡(luò)的年代，信息都是通過跑腿或信件傳遞，為了豐富自己的兒童時(shí)光，其中也自制了一些印象較為深刻的簡易玩具，包括最早的手機(jī)“紙杯電話”。把兩個(gè)紙杯底部分別扎一個(gè)小孔，用毛線從小孔穿過連接起來并拉直，一人說話一人聽，就能完成“打電話”的過程。
小宇宙APP在網(wǎng)絡(luò)出現(xiàn)故障時(shí)，就利用“紙杯電話”的插圖樣式作為斷網(wǎng)缺省頁，首先能明確告知用戶當(dāng)前頁面的信息狀態(tài)出現(xiàn)了什么問題，并引導(dǎo)用戶進(jìn)行解決操作；其次，利用故障定位出該狀態(tài)的格調(diào)和氣氛，與用戶建立情感連接，通過情感化的方式喚起用戶的童年記憶，此時(shí)，不管頁面出了什么問題，都可以加深對產(chǎn)品的印象，為用戶的再次訪問埋下伏筆。
109.「叮咚買菜」猜你喜歡-“找相似”讓你更加喜歡
產(chǎn)品體驗(yàn)：
叮咚買菜首頁“猜你喜歡”版塊，如果對當(dāng)前商品不滿意，長按彈出找相似入口，進(jìn)入即可瀏覽與之相似的商品。
設(shè)計(jì)思考：
平時(shí)我們在沒事的時(shí)候，拿起手機(jī)在某些電商平臺(tái)，一逛就是一個(gè)小時(shí)，眼花繚亂的看著各種商品，即使不準(zhǔn)備買，也是在下單的邊緣瘋狂試探?；谟脩舻臑g覽記錄、時(shí)長、頻率，直接提高了“猜你喜歡”內(nèi)容的精準(zhǔn)度，根據(jù)用戶心理特征做出背后策略并在后續(xù)不同程度的再次呈現(xiàn)給用戶，即有幾率再次促進(jìn)轉(zhuǎn)化。
叮咚買菜同樣在首頁推出了猜你喜歡版塊，但如何利用用戶心理把可轉(zhuǎn)化率提升到最高呢？其實(shí)，不難看出，用戶對部分商品的多次瀏覽，除了少部分只是路過外，其主要原因還是在價(jià)格（經(jīng)濟(jì)許可）、口碑、品牌或主圖/詳情的誘惑力上產(chǎn)生顧慮，如果在變化不大的情況下多次推薦給用戶，作用微乎其微。
長按叮咚買菜“猜你喜歡”的商品區(qū)域，從彈出的找相似入口進(jìn)入，系統(tǒng)會(huì)從商品庫匹配類似的商品或相同的商品在不同的店鋪呈現(xiàn)給用戶，其價(jià)格、口碑等這些可能會(huì)影響用戶顧慮的條件都會(huì)有不同程度的變化，以最大力度改變用戶的想法，當(dāng)解決了用戶的部分顧慮后，有可能再次勾起下單的欲望，間接促成用于下單提升轉(zhuǎn)化。
110.「高德地圖」減少思考時(shí)間的AR實(shí)景導(dǎo)航
產(chǎn)品體驗(yàn)：
使用高德地圖導(dǎo)航時(shí)，將手機(jī)與地面形成垂直角度，界面會(huì)變成AR實(shí)景導(dǎo)航，相比普通導(dǎo)航更真實(shí)，各種指示和預(yù)警更加清晰可見，手機(jī)置于水平角度后，界面還原。
設(shè)計(jì)思考：
出行時(shí)，尤其是自駕，地圖應(yīng)用就是我們最好的向?qū)?，但它畢竟是一個(gè)軟件，并非萬能。比如：遇到錯(cuò)綜復(fù)雜的道路且有多條進(jìn)/出口時(shí)，一不留神，駛錯(cuò)車道就在轉(zhuǎn)瞬間，而且基于地圖本身的抽象性，很多地方還得依靠自己理性判斷思考。AR（增強(qiáng)現(xiàn)實(shí)技術(shù)）對多很多用戶來說，聽起來還是比較陌生，但隨著技術(shù)的不斷發(fā)展，很多企業(yè)已在嘗試實(shí)現(xiàn)AR導(dǎo)航技術(shù)，其整體體驗(yàn)相比普通車載導(dǎo)航要好出一大截，也是未來導(dǎo)航的趨勢。
使用高德地圖導(dǎo)航時(shí)，手機(jī)呈垂直角度即可自動(dòng)切換AR實(shí)景導(dǎo)航，非常直觀的體驗(yàn)。傳統(tǒng)導(dǎo)航通常都是經(jīng)過語音或圖像的傳達(dá)，接受到信息后用戶會(huì)思考幾秒，很容易出錯(cuò)且存在安全隱患，而AR導(dǎo)航利用攝像頭將前方道路的真實(shí)場景實(shí)時(shí)捕捉下來，再結(jié)合汽車當(dāng)前定位、地圖導(dǎo)航信息以及場景 AI 識(shí)別，生成虛擬的導(dǎo)航指引并疊加到真實(shí)道路上，創(chuàng)建出更貼近駕駛者真實(shí)視野的導(dǎo)航畫面，箭頭會(huì)無縫貼合在于真實(shí)場景，只需要跟著箭頭走，就能進(jìn)入正確道路，相比傳統(tǒng)地圖導(dǎo)航更加精細(xì)，提供了更加安全、舒適的駕駛體驗(yàn)。
111.「搜狗輸入法」復(fù)雜/生僻字-貼心的拼音合并功能
產(chǎn)品體驗(yàn)：
使用搜狗輸入法，當(dāng)遇到生僻/復(fù)雜文字不會(huì)打拼音時(shí)，不妨試試將文字的偏旁部首拆開分別拼音，或許有你想要的結(jié)果。
設(shè)計(jì)思考：
中華文明五千年歷史，從甲骨文算起，漢字已經(jīng)3000多年的歷史，雖然我們天天接觸漢字，但基于目前科技普遍，電子設(shè)備多的數(shù)不勝數(shù)，很多情況下直接減少了我們對漢字的接觸和溫故，然而有時(shí)候打字卻遇到部分比較復(fù)雜的漢字突然不知道怎么拼，尤其是工作所需或需要緊急回復(fù)時(shí)，“認(rèn)字認(rèn)一半”可能無法快速解決當(dāng)前問題，到底是感慨中華文化博大精深、還是尷尬呢？
使用搜狗輸入法打字，如遇到較為復(fù)雜/生僻字不會(huì)打拼音時(shí)，可直接拆分其偏旁部首分別拼音，在右側(cè)即會(huì)出現(xiàn)拼音疊加的單個(gè)文字，再配合“認(rèn)字認(rèn)一半”方法，雖然不能解決所有類似的需求，但能滿足大部分用戶所碰到的問題，減少因不會(huì)拼音帶來的困擾，兼顧了特殊用戶對打字使用體驗(yàn)的關(guān)照，貼心的拼音合并方式操作簡單，這是一個(gè)非常實(shí)用但容易被忽視的好功能。
112.「得物」3D空間-720度無死角瀏覽商品
產(chǎn)品體驗(yàn)：
在得物APP瀏覽商品時(shí)，可從詳情頁主圖進(jìn)入3D空間，通過上下、前后左右拖動(dòng)360度無死角預(yù)覽、放大縮小讓細(xì)節(jié)清晰可見，使之購買前對商品更加了解。
設(shè)計(jì)思考：
得物（毒）APP名字雖然沒那么響亮，但作為定向的電商平臺(tái)，在自己所在的圈子里還是小有名氣，如果你是喜歡潮流、運(yùn)動(dòng)的人群，那一定知道“毒”，即現(xiàn)在的得物。此App聚集了一大批熱愛球鞋、潮品穿搭和潮流文化的愛好者，其平臺(tái)商品上架的標(biāo)準(zhǔn)也極為嚴(yán)格，其用戶體驗(yàn)更是不必多說。
得物APP的3D空間算是用戶體驗(yàn)非常好的一個(gè)黑科技了，通過詳情頁主圖的3D空間進(jìn)入，在這里，部分商品能進(jìn)行可操控式自轉(zhuǎn)，用戶通過翻轉(zhuǎn)、放大、縮小等操作來查看商品的材質(zhì)、圖案、紋理、細(xì)節(jié)等，真正實(shí)現(xiàn)了可交互式互動(dòng)，堪稱360°x2無死角預(yù)覽。得物利用3D空間黑科技為用戶帶來更為便利、有趣、流暢的購物體驗(yàn)，打造了真正科技感的沉浸式購物。
113.「馬蜂窩」趣味且炫酷的連擊點(diǎn)贊
產(chǎn)品體驗(yàn)：
在馬蜂窩的游記中，對網(wǎng)友們曬出的攻略、心得贊善有加時(shí)，多次點(diǎn)擊左下角的“頂”，頁面中會(huì)以“喜歡”的手勢圖標(biāo)從底部直奔頭像，并用“連擊”樣式的數(shù)字累計(jì)，以及代表作者心情的回應(yīng)。
設(shè)計(jì)思考：
《羞羞的鐵拳》電影中有一段讓我印象非常深刻，記著馬小在“鐵鍋燉自己”時(shí)說了聲：老鐵們禮物刷起來，666走起來，當(dāng)時(shí)被滿屏覆蓋的666應(yīng)該讓很多屏幕的觀者都興奮不已。現(xiàn)如今，各種產(chǎn)品的線上內(nèi)容也都加入了喜歡、點(diǎn)贊、推薦等操作，樣式和原理基本大同小異，大部分都是通過心/星型圖標(biāo)，點(diǎn)擊選中、再次點(diǎn)擊取消，有點(diǎn)復(fù)選框的感覺，其實(shí)可以根據(jù)產(chǎn)品的屬性及受眾用戶的性格延伸出多種樣式，比如情感、個(gè)性、趣味等，以此給用戶帶去不同的心理感受。
馬蜂窩游記詳情頁左下角的頂（又名：點(diǎn)贊）存在連續(xù)點(diǎn)擊時(shí)，會(huì)出現(xiàn)一連串“喜歡”的手勢圖標(biāo)并從底部快速移動(dòng)至作者頭像，頭像且以閃動(dòng)的效果+文案做出回應(yīng)，配合數(shù)字累加和抖動(dòng)效果，著實(shí)炫酷，算是狠狠的秀了一把，有種直播禮物滿天飛的既視感。我們都知道，點(diǎn)贊不光是對作者的認(rèn)可，其不同的視覺效果還能表達(dá)自己對作者的贊美程度和內(nèi)心的滿足感。另外，動(dòng)態(tài)視覺效果大大提高了趣味性，就一個(gè)點(diǎn)贊功能，活生生整出了打游戲砍怪時(shí)的連擊效果，利用非常炫酷有趣樣式，提升用戶對產(chǎn)品的滿意度。
114.「真快樂」中斷登錄流程-最后的彈窗挽留
產(chǎn)品體驗(yàn)：
真快樂使用第三方應(yīng)用登錄授權(quán)成功后，需要綁定手機(jī)號碼，如果此時(shí)返回，系統(tǒng)通過彈窗配合警告性質(zhì)的文案對用戶流失前做出最后一步挽留。
設(shè)計(jì)思考：
登錄是用戶轉(zhuǎn)化最關(guān)鍵的一環(huán)，沒有用戶量再好的產(chǎn)品也是空談，因?yàn)檫@涉及產(chǎn)品的用戶量、使用粘性及企業(yè)的利益，所以有很多產(chǎn)品想盡一切辦法促使用戶注冊，哪怕是“僵尸”也在所不惜，一旦用戶注冊成功，平臺(tái)就會(huì)抓取用戶的隱私信息、操作數(shù)據(jù)等，便于日后對癥下藥用來促進(jìn)用戶轉(zhuǎn)化和喚醒“僵尸”用戶。這個(gè)隨時(shí)都有可能把用戶阻擋在門外的登錄門檻，是無法越過的，只能通過不同的手段來提升注冊量。
真快樂APP使用第三方賬號授權(quán)成功后，用戶若在綁定手機(jī)號碼環(huán)節(jié)操作退出/返回時(shí)，系統(tǒng)會(huì)利用彈窗對用戶做出操作警告，提醒用戶退出頁面可能帶來的影響和后果（無法購物），對用戶的返回流程制造難度，讓用戶思考 當(dāng)前的退出決策是否正確，畢竟相對于‘收獲’來說，‘損失’更讓人在乎某事物。針對此種情況，必定有極少部分用戶難而退，從而繼續(xù)完成登錄注冊的流程，一旦用戶登錄，就準(zhǔn)備接受平臺(tái)層出不窮的轉(zhuǎn)化手段吧。
（有人會(huì)說，大家都會(huì)反感這種阻擾操作流程的做法，但站在平臺(tái)的角度所設(shè)計(jì)，你都要離開我了，可能會(huì)是永久，我還在乎這個(gè)彈窗會(huì)對你造成反感嗎，畢竟你不回來，總會(huì)有其他人被我拉回來）
115.「網(wǎng)易云音樂」是如何降低用戶取關(guān)成功幾率的？
產(chǎn)品體驗(yàn)：
在網(wǎng)易云音樂取消關(guān)注其他用戶時(shí)，系統(tǒng)通過彈窗提醒關(guān)注時(shí)長、取消后的損失，并刻意混淆主次操作按鈕提高用戶操作失誤的可能性，以此達(dá)到讓用戶放棄取消操作的目的。
設(shè)計(jì)思考：
在用戶量及其龐大的應(yīng)用里，基于用戶的選擇范圍更廣且隨意性較強(qiáng)，所以對內(nèi)容的質(zhì)量要求更高，尤其是短視頻、直播類型的應(yīng)用，用戶對創(chuàng)作者今日關(guān)注、明日取關(guān)的情況再正常不過了。因掉粉情況的存在，很可能帶給創(chuàng)作者的心理作用，影響后期創(chuàng)作的發(fā)揮，甚至直接導(dǎo)致流失，而損失最大的一定是平臺(tái)。很簡單的道理，你辛辛苦苦在抖音埋頭苦干了幾個(gè)月，結(jié)果發(fā)現(xiàn)自己的粉絲只有兩位數(shù)，要么更加努力苦逼支撐，要么棄坑，所以說粉絲就是創(chuàng)作者最大的精神支柱，一點(diǎn)都不為過。
網(wǎng)易云音樂APP用戶之間的相互關(guān)注，利用社交的因素將用戶進(jìn)行潛在的捆綁，以提高用戶的使用粘性，針對脫粉的情況做了一定的預(yù)防措施。當(dāng)用戶存在取消關(guān)注（脫粉）行為時(shí)，系統(tǒng)通過彈窗挽留，利用關(guān)注的天數(shù)提醒取消關(guān)注后將重新計(jì)算的損失來增強(qiáng)說服力，促使用戶放棄脫粉行為。另外，用戶取消關(guān)注時(shí)，根據(jù)行為召喚主行動(dòng)按鈕應(yīng)為取消，然而此彈窗則弱化取消、強(qiáng)化繼續(xù)關(guān)注按鈕來達(dá)到混淆主次操作的目的，利用大家對于一些習(xí)慣性的操作完全就是下意識(shí)、且無需思考的慣性思維，引導(dǎo)其操作主按鈕，用戶誤以為取關(guān)成功，平臺(tái)則潛在的為其他用戶留下了粉絲，從而為后續(xù)的互惠互利得到了保障。如果用戶發(fā)現(xiàn)被誤導(dǎo)，可能出現(xiàn)再次脫粉動(dòng)機(jī)，但勢必要付出更多的操作/時(shí)間成本，相關(guān)數(shù)據(jù)表明，每提升一次用戶的成本，用戶放棄操作的可能性就越大。
116.「中國農(nóng)業(yè)銀行」啟動(dòng)頁-連貫性的故事場景
產(chǎn)品體驗(yàn)：
初次進(jìn)入農(nóng)業(yè)銀行，系統(tǒng)將多張圖片拼合在一起、制作出一個(gè)連貫的故事場景作為新手引導(dǎo)頁，左右勻速滑動(dòng)，就像看著一整張圖片或看小視頻的感覺。
設(shè)計(jì)思考：
不知大家是否還記得2017年的“百雀羚1931”廣告，上線當(dāng)天的瀏覽量就破410萬，且一天時(shí)間就為公眾號帶來5萬粉絲。其設(shè)計(jì)風(fēng)格上保持著經(jīng)典的傳統(tǒng)，讓人們有難忘回憶的感覺，結(jié)合講故事的形式，從1931年百雀羚成立開始，用一張長圖逐漸穿破時(shí)間線，形成一個(gè)完成的故事場景，雖然后來針對設(shè)計(jì)和營銷方面存在很大爭議，但這則廣告在上半年一直都是翹楚的存在，并不是沒有原因。
農(nóng)業(yè)銀行的引導(dǎo)頁結(jié)合多張圖片形成一個(gè)完整的故事場景，用戶左右勻速滑動(dòng)時(shí)，就像在看影片一樣。連貫性的故事場景能用戶帶來共鳴，就比如用戶在看這則啟動(dòng)頁時(shí)，有些場景總是好像在那里見過，而等我們看到最后一個(gè)場景時(shí)，直接拍手叫好，這就是共鳴。農(nóng)業(yè)銀行通過產(chǎn)生的共鳴抓住用戶這一剎那的感覺，給用戶留下深刻的印象，從而提升看到它的用戶衍生出想要傳播的欲望。
117.「訊飛輸入法」詞窮-空格聯(lián)想關(guān)鍵詞助力完善
產(chǎn)品體驗(yàn)：
在訊飛輸入法的輸入設(shè)置中，開啟“空格提交聯(lián)想詞”功能打字時(shí)，點(diǎn)擊空格鍵后，系統(tǒng)會(huì)根據(jù)已錄入的內(nèi)容聯(lián)想，自動(dòng)匹配較為連貫的文字組合成完整的句子。
設(shè)計(jì)思考：
因?yàn)檫M(jìn)入社會(huì)已久，書本知識(shí)基本與大腦分離，很多時(shí)候在和朋友交流時(shí)想說幾句漂亮話，可苦于表達(dá)能力有限，只能支支吾吾這個(gè)......那個(gè)......的糊弄過去。線下的即時(shí)交流沒辦法解決，那么到了線上就好說了，例如在社交軟件聊天時(shí)，因不受時(shí)間的限制，可利用各種智能輔助組織語言，實(shí)在不行百度復(fù)制粘貼，分分鐘給對方一種“江南才子”的趕腳，就連吵架都能不帶一個(gè)臟字兒的分分鐘把對方嚇“尿”。不過話說回來，我們在打字聊天時(shí)，不管出于什么目的，好的文采（語言組織）的確能給對方不一樣的感覺，提升自己的形象。
訊飛輸入法的空格聯(lián)想功能，根據(jù)已錄入的內(nèi)容，自動(dòng)匹配文字并組合成連貫的句子，當(dāng)用戶在卡殼或詞窮時(shí)，不妨多按幾次空格鍵，會(huì)有意想不到的結(jié)果，或許能夠解決不時(shí)之需。如果行之有效，不僅能減少用戶去其他地方搜尋的次數(shù)，還 能滿足用戶的虛榮心，以獲得他人的認(rèn)同感， 從而得到一種榮耀感和心理上的滿足。
118.「微信」群內(nèi)發(fā)專屬紅包-沒有“中間商”
產(chǎn)品體驗(yàn)：
如果在微信群需要給指定的成員發(fā)紅包，點(diǎn)擊左上角的類型選擇“專屬紅包”，紅包發(fā)出后只有被指定的人才能成功領(lǐng)取，能有效防止被冒領(lǐng)的可能性。
設(shè)計(jì)思考：
大部分微信用戶都存在多個(gè)群聊，因?yàn)橛脩袅康凝嫶?，我們不可能將群里的所有人都加為好友，但因特殊原因需要把紅包發(fā)給群里的指定成員，當(dāng)紅包發(fā)出后發(fā)現(xiàn)被冒領(lǐng)了，經(jīng)過自己的一番游說，冒領(lǐng)的用戶（A-B-C-......N）輪番多次退會(huì)，最終才到指定的用戶手中，真心不容易啊，收個(gè)紅包，簡直比“20世紀(jì)的郵政”還要慢。
還有很多用戶不知道微信的專屬紅包功能，其實(shí)早已解決了這個(gè)問題。通過發(fā)專屬紅包，在微信群里快速的將紅包發(fā)給指定的群員，有效避免被冒領(lǐng)而耽誤太多時(shí)間和不必要的溝通，還能防止陌生人領(lǐng)取紅包后立即退群導(dǎo)致金額無法追回，給自己帶來經(jīng)濟(jì)損失。
119.「網(wǎng)易云音樂」不會(huì)放過任何展示品牌的機(jī)會(huì)
產(chǎn)品體驗(yàn)：
下載網(wǎng)易云音樂后，首次進(jìn)入，直接以動(dòng)態(tài)的宣傳語和logo代替引導(dǎo)頁，用最大化的力度進(jìn)行品牌傳播。
設(shè)計(jì)思考：
曾有人斷言：”即使一把火把可口可樂的所有資產(chǎn)燒光，可口可樂憑著其商標(biāo)，就能重新起來”，可想而知，logo就是產(chǎn)品形象最直接的代言人。在日常經(jīng)營活動(dòng)、廣告宣傳、文化建設(shè)、對外交流中，是必不可少的元素，通過logo在有限的空間內(nèi)準(zhǔn)確傳達(dá)出品牌的特點(diǎn)，在用戶心中留下深刻的記憶，每當(dāng)看到logo時(shí)，自然的產(chǎn)生聯(lián)想，從而對企業(yè)產(chǎn)生認(rèn)同，所以產(chǎn)品不會(huì)放過任何一個(gè)展示logo的機(jī)會(huì)。
網(wǎng)易云音樂則直接將logo加宣傳語代替用戶首次打開時(shí)的引導(dǎo)頁并以動(dòng)態(tài)的方式呈現(xiàn)，是一個(gè)很好的植入品牌的觸點(diǎn)。其主要目的是利用logo強(qiáng)化品牌感，傳達(dá)品牌定位、格調(diào)和氣氛并與用戶建立情感連接，便于用戶進(jìn)入產(chǎn)品的第一印象就知道當(dāng)前使用的是什么產(chǎn)品；其次，直接使用具有品牌調(diào)性色彩（網(wǎng)易紅），能強(qiáng)化品牌在用心中的認(rèn)知度，提高記憶印象；再者，動(dòng)態(tài)方式讓logo的表現(xiàn)更為柔和，更具有親和力，且動(dòng)態(tài)比靜態(tài)更加吸引眼球，增加用戶的視覺關(guān)注度，還可以提升界面的趣味性。
120.「淘寶」引流無處不在-訂單列表夾帶常購好貨
產(chǎn)品體驗(yàn)：
在淘寶的全部訂單中查看記錄時(shí)，系統(tǒng)會(huì)在第二個(gè)訂單下方推送曾經(jīng)購買過的商品，促使用戶二次下單。
設(shè)計(jì)思考：
現(xiàn)階段用戶的購物心理由理性消費(fèi)轉(zhuǎn)變?yōu)楦行韵M(fèi)，在加上各種信用卡、花唄等條件的配合，很多人甚至把幾年以后的錢都花了，瞬間將直播帶貨、明星產(chǎn)品推向了制高點(diǎn)，實(shí)現(xiàn)商品可以不用，但不能不買的理念。淘寶更是利用人性的弱點(diǎn)以最大程度的演算用戶的心理變化（就差研究“人體細(xì)胞”了），將用戶可能產(chǎn)生一丁點(diǎn)想法的商品，都不遺余力的無限次推薦給用戶，什么猜你喜歡、你可能想買等都是如出一轍，只要有可能，平臺(tái)會(huì)想盡一切辦法、用盡一切手段促進(jìn)用戶二次轉(zhuǎn)化。
曾經(jīng)有人說：在淘寶看了剃須刀，結(jié)果不管是抖音還是支付寶，走到哪里都是剃須刀的影子，手機(jī)頂部通知欄的推送也是大量的剃須刀，就連短信都沒有放過，還收到了剃須刀商家的電話，“求求你放過我吧，我特么錯(cuò)了還不行嗎？”。一個(gè)小小的剃須刀尚且如此，那如果是···商品呢，可能連最基本的購物隱私也暴露在廣眾之下了。
淘寶在商品推送這方面做的可謂是無人能及。在消費(fèi)者的訂單列表中，第一屏的最下方也變成了推送廣告位，將用戶最近購買過的商品二次呈現(xiàn)，比如紙巾、零食等日常消耗類的商品。進(jìn)入訂單列表，系統(tǒng)通過行為預(yù)判猜測用戶可能尋找買過的商品會(huì)再次下單的可能性，便提前將部分商品在此處推薦出來以供用戶瀏覽，如有類似需求，則促成用戶再次下單。在推薦的商品中，也許是曾經(jīng)買過但被遺忘的商品，此時(shí)呈現(xiàn)可能會(huì)引起用戶的注意從而產(chǎn)生新的需求，繼而提升下單轉(zhuǎn)化率。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：大漠飛鷹CYSJ 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com
