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，是移動端應(yīng)用程序中最常用的UI元素之一。標(biāo)簽欄出現(xiàn)在應(yīng)用程序屏幕的底部，可以讓用戶在應(yīng)用程序中的不同部分之間快速切換。標(biāo)簽欄可以是半透明的，也可以具有背景色，在所有屏幕方向上都保持相同的高度，并且在顯示鍵盤時被隱藏。標(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)行界面適配的時候，請務(wù)必要加上 Home Bar 自身的68px高度。別讓Home Bar遮擋標(biāo)簽欄中標(biāo)簽的展示，這會讓兩個控件發(fā)生操作手勢沖突。
史蒂文·霍伯（Steven Hoober）在對移動設(shè)備使用情況的研究中發(fā)現(xiàn)，人們會根據(jù)自己的設(shè)備，需求和背景以多種方式觸摸手機(jī)，觸摸手機(jī)屏幕或按鈕的用戶分三種基本方式：抱著手機(jī)的人占36%、兩只手使用手機(jī)的人占15%，而49％的人依靠一只手在手機(jī)上完成事情，除此之外75％的用戶僅用一個拇指觸摸屏幕。
在下圖中，出現(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)清晰，兩大平臺在規(guī)范里都對標(biāo)簽數(shù)量給出了相同的建議：建議標(biāo)簽欄內(nèi)的標(biāo)簽個數(shù)為3個至5個。因?yàn)闃?biāo)簽過多會使每一個單元標(biāo)簽的可觸空間降低，人們在物理上（手指）難以點(diǎn)擊或誤觸，除此之外還會增加應(yīng)用程序結(jié)構(gòu)的復(fù)雜性。
注：如果你因?yàn)楫a(chǎn)品結(jié)構(gòu)非常繁雜，標(biāo)簽數(shù)量想要達(dá)到更多，那么在 iOS 中就會給你強(qiáng)硬處理，iOS 人機(jī)交互規(guī)范告訴產(chǎn)品設(shè)計(jì)者們：標(biāo)簽欄雖然可以包含任意數(shù)量的標(biāo)簽，但可見標(biāo)簽的數(shù)量會根據(jù)設(shè)備的大小(平板或手機(jī))和方向(豎屏或橫屏)而自適應(yīng)變化。如果由于水平空間有限而無法顯示某些標(biāo)簽時，最后的一個可見標(biāo)簽將被會被系統(tǒng)強(qiáng)行轉(zhuǎn)換為“更多”選項(xiàng)，需要用戶點(diǎn)擊“更多”選項(xiàng)之后，系統(tǒng)才將在單獨(dú)屏幕上的列表中顯示其他被隱藏的標(biāo)簽。
“我在哪里？” 是用戶成功導(dǎo)航所需要回答的一個基本問題，我們應(yīng)當(dāng)采用適當(dāng)?shù)囊曈X提示讓用戶知道目前所處的位置（選中狀態(tài)）。在APP應(yīng)用中我們常見的處理方式有4種：改變圖標(biāo)樣式、改變大小、改變顏色、改變展示樣式。它們并不一定是獨(dú)立存在的，可以同時作用于一個標(biāo)簽。
選取每個底部導(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)時，就不能查看底部標(biāo)簽“我的”信息，當(dāng)我點(diǎn)擊標(biāo)簽“我的”，就會彈出快捷登陸界面，這樣就能讓用戶明白不能使用的原因是賬號未登陸，從另一層面講也很好的引導(dǎo)了用戶注冊與登陸。
注：不要使用標(biāo)簽欄為用戶提供對當(dāng)前屏幕或應(yīng)用程序模式下的元素起作用的控件，如果需要提供控件，請使用工具欄。
在設(shè)計(jì)標(biāo)簽欄前我們首先要了解它的基礎(chǔ)規(guī)范，在保證基礎(chǔ)規(guī)范合理的情況下再去進(jìn)行設(shè)計(jì)。
為了保證圖標(biāo)的尺寸大小一致性，我們往往會建立基礎(chǔ)的網(wǎng)格尺寸來進(jìn)行繪制圖標(biāo)，下面就以常用的24x24為大家舉例：
網(wǎng)格包含2px出血位。這樣可以確保圖標(biāo)在導(dǎo)出時將保留其所需的比例和周圍的空白區(qū)域，同時還能夠很好的平衡圖標(biāo)的視覺重心。
最后加入圖標(biāo)的keyline，keyline由圓形，正方形，矩形，正交，三角形和對角線組成。它可以為您提供圖標(biāo)集中基本形狀或比例的一致大小。這使創(chuàng)建視覺上的穩(wěn)定變得更加容易，并有助于在設(shè)計(jì)相似比例的圖標(biāo)時有共同的參考準(zhǔn)則。
在24尺寸下的keyline構(gòu)成如下（24尺寸下的出血區(qū)域?yàn)?）：
當(dāng)把圖標(biāo)畫在網(wǎng)格上時可以很好的規(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)簽個數(shù)就是每列寬度。采用此等劃分的案例有：懂車帝、今日頭條。
圖標(biāo)左右距離相等多用在標(biāo)簽數(shù)量為3個的情況下，計(jì)算方法是先去除中間圖標(biāo)的尺寸，然后再左右平均劃分等距。相對于屏幕等分，圖標(biāo)左右間距相等劃分更為緊湊。
根據(jù)菲茲定律，使用指點(diǎn)設(shè)備到達(dá)一個目標(biāo)的時間，與當(dāng)前設(shè)備位置和目標(biāo)位置的距離（D）和目標(biāo)大?。⊿）有關(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)會給人不同的感受，隨著APP風(fēng)格越來越簡潔化，標(biāo)簽欄圖標(biāo)風(fēng)格緊緊地跟著界面的風(fēng)格而改變。經(jīng)過長時間的沉淀，標(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)時，選中狀態(tài)的圖標(biāo)顏色會與默認(rèn)狀態(tài)的圖標(biāo)顏色形成較強(qiáng)的反差，但由于線和線的差異性并不強(qiáng)，線性圖標(biāo)沒有面性圖標(biāo)更具吸引力（引導(dǎo)性），即使加入了高亮色識別度也不及面性強(qiáng)。airbnb在處理線性圖標(biāo)選中狀態(tài)時就考慮到了這一點(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)底色及文字的顏色加深以外，還加入了品牌色，甚至為了讓“會員”標(biāo)簽更加突出，還單獨(dú)對“會員”標(biāo)簽的顏色進(jìn)行了修改。
線面結(jié)合圖標(biāo)相較單一的線性圖標(biāo)或單一的面性圖標(biāo)樣式更加豐富、也更富有趣味性。從設(shè)計(jì)的角度上說，由于元素的多樣化，設(shè)計(jì)更容易獲得好的效果。相反，如果運(yùn)用不當(dāng)會顯得圖標(biāo)非常雜亂，如何有效的把控好兩者之間的過度是關(guān)鍵。
選中狀態(tài)：線性圖標(biāo)的選中狀可以為高亮的線性+面性圖標(biāo)。懂車帝在處理標(biāo)簽選中狀態(tài)時就把圖標(biāo)底部加入了高亮黃色圓形塊狀，即保存了線性也添加了面，加深了選中狀態(tài)的視覺重量，更加明確的讓用戶感知自己所處的位置。
輕質(zhì)感圖標(biāo)層次簡單，用色素雅干凈，采用輕投影、輕漸變的方法設(shè)計(jì)，這類圖標(biāo)具有一定的立體感，能給人輕盈、簡潔、精致的感覺。輕質(zhì)感圖標(biāo)在標(biāo)簽欄中運(yùn)用的較少，在特殊情況下才會使用，例如盒馬，就把輕質(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)簽欄的不同展示形式會給用戶帶來不同的使用習(xí)慣和使用感受，常見的標(biāo)簽展示形式有四種：圖標(biāo)+文字、純圖標(biāo)、純文字、舵式。
圖標(biāo)+文字是最常見的標(biāo)簽展示形式，為了讓用戶能夠很好的明白圖標(biāo)的意圖，所以在圖標(biāo)下方會配有文字提示，這樣就能大大的降低誤讀的可能性。正因?yàn)橛形淖痔崾荆詻]有必要過于擔(dān)心圖標(biāo)的識別性問題，那么圖標(biāo)就可以得到更深的延展，可以做的更有趣，更具有產(chǎn)品氣質(zhì)，甚至可以代入更深層次的動效。
例如東家·守藝人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)就是識別性低，沒有文字說明會導(dǎo)致用戶很難找到自己想要去的位置，也不明確自己所處的狀態(tài)。所以我們?nèi)绻O(shè)計(jì)純圖標(biāo)形式，那么必須要考慮到圖標(biāo)的識別性問題，間接的舍棄掉圖標(biāo)更多的延展性，讓圖標(biāo)變得更規(guī)矩。（識別性的提升我之前寫的圖標(biāo)文章中提到過，主要可以從大眾認(rèn)知隱喻與真實(shí)世界映射兩個方向出發(fā)去提升）
使用純圖標(biāo)樣式的產(chǎn)品特征：產(chǎn)品單一、領(lǐng)域垂直、小眾化、用戶群體接受度高。即使?jié)M足這些條件下產(chǎn)品使用純圖標(biāo)標(biāo)簽，用戶第一次使用往往也是比較迷茫，需要等用戶熟悉后才會得到好轉(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)時用著圖標(biāo)+文字類型的抖音，的確感覺太奇怪?。?/span>
舵式標(biāo)簽可以看為底部標(biāo)簽式導(dǎo)航的一種變體。它在后者的基礎(chǔ)上，突出強(qiáng)調(diào)了一個標(biāo)簽并且放在中間的位置，樣子看起來像攢了一個舵，所以取名為舵式標(biāo)簽。一般舵式標(biāo)簽的顏色、大小等視覺表現(xiàn)會被設(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為了激勵和方便用戶隨時隨地地輸出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)，同時也通過2像素的線性圖標(biāo)減弱其他4個標(biāo)簽的引導(dǎo)性。
標(biāo)簽欄不僅是向用戶展現(xiàn)產(chǎn)品框架的關(guān)鍵控件，還可以貫穿整個產(chǎn)品的商業(yè)價值的體現(xiàn)，它是連接著整個產(chǎn)品最重要的頂層信息。如果想要讓標(biāo)簽變得更加豐富，想要標(biāo)簽內(nèi)容中含有更多的情感需求、 商業(yè)需求、運(yùn)營需求，那么我們可以重點(diǎn)從這兩個層面考慮：視覺層面、交互層面。
在視覺層面上我們可以迎合用戶的偏好與期望，通過豐富視覺體驗(yàn)的方法來增加內(nèi)容的觀賞性，這樣不僅能夠很好的向用戶傳遞著產(chǎn)品調(diào)性還能吸引用戶關(guān)注以及引導(dǎo)用戶進(jìn)行操作。
裝飾性圖標(biāo)僅僅是用來提升整個界面的視覺體驗(yàn)，通過豐富視覺體驗(yàn)的方法來增加內(nèi)容的觀賞性，這樣不僅可以吸引并留住用戶，還可以讓整個用戶體驗(yàn)更加積極。
整體裝飾性圖標(biāo)的出現(xiàn)往往是為了滿足情感需求與商業(yè)需求，整體裝飾圖標(biāo)并不是一直存在的，它的特點(diǎn)是季節(jié)性與周期性，并且它并不具備任何功能性。
從情感需求出發(fā)設(shè)計(jì)裝飾圖標(biāo)：例如世界杯火熱進(jìn)行時，優(yōu)酷為了滿足用戶的情感需求，就把標(biāo)簽欄的圖標(biāo)全部替換為帶有世界杯元素的圖案，讓用戶與其產(chǎn)生情感的共鳴。
從商業(yè)需求出發(fā)設(shè)計(jì)裝飾圖標(biāo)：現(xiàn)在的年貨節(jié)，之前的雙十二、雙十一、618等，每到節(jié)日促銷活動的時候，很多電商應(yīng)用都會換上裝飾性圖標(biāo)，例如一號店，在過年前就把標(biāo)簽欄圖標(biāo)全部改為含帶過年氣息的元素，提前來預(yù)熱活動，引導(dǎo)用戶消費(fèi)。
單個裝飾性圖標(biāo)的出現(xiàn)大部分都是為了滿足運(yùn)營需求，運(yùn)營為了推出某個活動或功能，往往會單獨(dú)裝飾某個圖標(biāo)的設(shè)計(jì)視覺，以便于提高圖標(biāo)的引導(dǎo)性，最直接的例子就是我剛才提到過的拼多多。
我們可以在標(biāo)簽中加入更多的品牌基因，讓其與品牌產(chǎn)生聯(lián)動性，這一形式是大部分應(yīng)用程序都在做的，我們可以從這6個層面加入品牌基因：品牌顏色、品牌LOGO、品牌元素、品牌名稱、品牌性格、品牌吉祥物。
色彩是圖標(biāo)設(shè)計(jì)中重要的構(gòu)成元素之一，我們可以直接提取品牌色作為圖標(biāo)設(shè)計(jì)視覺元素。例如站酷，站酷的品牌色是黃色，標(biāo)簽欄的圖標(biāo)（選中狀態(tài)）就提取了品牌的黃色，讓其與品牌調(diào)性高度一致。
當(dāng)然品牌顏色除了可以直接用外，還可以在提取時適當(dāng)調(diào)整色彩的飽和度、明度，做更多的形式變化。例如懂車帝，就在原有的黃色基礎(chǔ)上做了些許調(diào)整，圖標(biāo)采用黃色透明漸變的處理方式，在與品牌顏色呼應(yīng)的同時，使得整個圖標(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)系，同時也二次傳遞了品牌形象。例如大眾點(diǎn)評，它的首頁標(biāo)簽就用了品牌LOGO，同時也使用了品牌顏色。
我們可以在品牌中提取它識別性較強(qiáng)的局部元素作為圖標(biāo)。例如虎牙直播，它就提取了品牌卡通形象的外輪廓作為首頁圖標(biāo)。
品牌提取的元素并不只是所見到的品牌視覺形象，還可以提取與品牌內(nèi)容強(qiáng)相關(guān)的元素。例如QQ音樂，它并沒有把它的品牌LOGO直接放于其中，而是通過大眾所熟知的音符作為首頁圖標(biāo)。
如果你的品牌還不為大眾所熟知，那么為了強(qiáng)化用戶對品牌名稱的認(rèn)知，可以把品牌名稱直接放入標(biāo)簽欄中。例如MONO，就把它的名稱分為四個字母分別放在了4個標(biāo)簽內(nèi)，需要注意的是這類圖標(biāo)不能單獨(dú)出現(xiàn)，因?yàn)樗旧聿痪邆渥R別性與引導(dǎo)性，必須配合文字一起出現(xiàn)，這樣才能讓用戶理解標(biāo)簽的真正功能，我們不能為了設(shè)計(jì)而設(shè)計(jì)。
圖標(biāo)風(fēng)格可以與品牌性格保持一致，一套帶有濃厚品牌感的圖標(biāo)，會讓人記憶猶新。例如：每日故宮，它的圖標(biāo)就非常具有特色，結(jié)合了品牌的性格以及定位，加入了眾多的古代中國元素，整體看起來有股濃濃的古韻之風(fēng)。
現(xiàn)在大部分品牌都會含帶吉祥物，我們可以在設(shè)計(jì)圖標(biāo)時提取吉祥物的外形，把它用于產(chǎn)品的標(biāo)簽中。例如盒馬，它就把吉祥物做為了底部標(biāo)簽，不過需要我們注意的是如果吉祥物的風(fēng)格與我們的圖標(biāo)風(fēng)格差別較大，我們就需要對它做風(fēng)格化的處理，不然看起來就十分突兀。（盒馬對吉祥物做了輕質(zhì)感的風(fēng)格化處理）
讓用戶自定義的標(biāo)簽現(xiàn)在越來越常見，而每個產(chǎn)品對其思考的層面也都有所不同。自定義標(biāo)簽往往出現(xiàn)在個人中心，它會根據(jù)用戶上傳的頭像或用戶的捏臉生成圖標(biāo)。
目前市面上很多APP都把用戶上傳的頭像作為了個人中心標(biāo)簽展示，例如我們常用的百度網(wǎng)盤就采用了此方案，當(dāng)用戶注冊未上傳用戶頭像時，會默認(rèn)顯示系統(tǒng)標(biāo)簽，當(dāng)用戶上傳完后就會顯示用戶頭像，并且如果你是會員，還會把會員標(biāo)示顯示在標(biāo)簽的右上方，彰顯會員用戶的尊貴性。
我們可以很明顯的發(fā)現(xiàn)百度網(wǎng)盤的底部標(biāo)簽?zāi)J(rèn)狀態(tài)為線性圖標(biāo)，而個人中心不管默認(rèn)狀態(tài)還是選擇狀態(tài)都為面性圖標(biāo)，所以如果你想要加強(qiáng)個人中心的引導(dǎo)性，那么可以采取此方案。
捏臉功能作為SOUL的一大特色，捏臉的虛擬形象賦予了真實(shí)人格屬性，加強(qiáng)了社交的傳播性，所以SOUL決定把用戶自定義的捏臉放于個人中心標(biāo)簽中。
除了對標(biāo)簽做視覺的提升外，我們還可以對其加入合理的交互效果，一方面可以提升用戶在使用產(chǎn)品過程中的樂趣，另一方面還可以為用戶提供更多便利，從而增強(qiáng)用戶體驗(yàn)。
在不同的狀態(tài)下點(diǎn)擊標(biāo)簽的功能也不一樣，一個標(biāo)簽可承載2到3個功能，可以滿足不同狀態(tài)下的用戶需求。
SOUL的廣場標(biāo)簽（進(jìn)入選取頁+刷新）
SOUL的廣告標(biāo)簽承載了2個功能，當(dāng)你處于其他標(biāo)簽時，點(diǎn)擊廣場標(biāo)簽則直接進(jìn)入到廣場頁面；當(dāng)你處于廣場頁面中時，再次點(diǎn)擊標(biāo)簽則會刷新整個頁面。
有貨的發(fā)現(xiàn)標(biāo)簽（進(jìn)入選取頁+上傳圖片）
有貨的發(fā)現(xiàn)標(biāo)簽也承載了2個功能，在設(shè)計(jì)上運(yùn)用的非常巧妙，當(dāng)你處于其他標(biāo)簽時，點(diǎn)擊發(fā)現(xiàn)標(biāo)簽則進(jìn)入到發(fā)現(xiàn)頁面；當(dāng)你在發(fā)現(xiàn)頁面時你的發(fā)現(xiàn)標(biāo)簽則變?yōu)榱松蟼鲌D片標(biāo)簽，可以點(diǎn)擊上傳圖片。
淘寶首頁標(biāo)簽（進(jìn)入選取頁+刷新+置頂）
淘寶的首頁標(biāo)簽同時承載了3個功能，當(dāng)你處于其他標(biāo)簽中，點(diǎn)擊首頁標(biāo)簽則直接進(jìn)入到首頁頁面；當(dāng)你在首頁頁面第一屏?xí)r，你點(diǎn)擊首頁標(biāo)簽則會刷新整個頁面；當(dāng)你滑過3分之1屏?xí)r，首頁標(biāo)簽的功能則變?yōu)橹庙?。所以在不同狀態(tài)下首頁標(biāo)簽也會具備不同的功能，并且每種狀態(tài)下的標(biāo)簽樣式也是不同。
愛奇藝首頁標(biāo)簽（進(jìn)入選取頁+到達(dá)指定位置+置頂）
愛奇藝的首頁標(biāo)簽也是同時承載了3個功能，不過它與淘寶有些許不同，愛奇藝并不能刷新頁面，而作為替換的功能是直接到達(dá)指定位置“猜你喜歡”。
我們做的設(shè)計(jì)不要僅限于視覺所看到的，還要考慮到所觸摸的、所聽到的，我們可以利用觸覺與聽覺去輔助用戶確認(rèn)自己的選擇，當(dāng)然我們一定要合理利用，反之則會讓用戶感到十分反感。
西瓜視頻與今日頭條在點(diǎn)擊標(biāo)簽欄圖標(biāo)時手機(jī)就會發(fā)出輕微的震動，給予了用戶很好的點(diǎn)擊反饋。
SOUL點(diǎn)擊星球標(biāo)簽時手機(jī)就會發(fā)出戀愛鈴聲，在SOUL的產(chǎn)品報(bào)告中，SOUL主要面對女性用戶，女性用戶約為男性用戶的2.4倍（女人更偏感性），并且它的主要需求是滿足測試、匹配、交友，所以戀愛鈴聲能夠很好的引起用戶的情感共鳴。不過鈴聲有利有弊，當(dāng)你在特定場景下使用SOUL時，點(diǎn)擊到星球標(biāo)簽周圍人也都能聽到戀愛鈴聲，實(shí)屬尷尬，所以我在特定場景下使用SOUL時都會默默的關(guān)掉聲音。
精彩的圖標(biāo)動畫，對整體的設(shè)計(jì)具有畫龍點(diǎn)睛的作用，降低標(biāo)簽切換時的枯燥感，提升操作的愉悅度和期待感。甚至可以通過 tab 的動畫設(shè)計(jì)給用戶傳達(dá)出整個 APP 設(shè)計(jì)的品牌及理念。標(biāo)簽動畫往往都比較簡單，主要有：縮放、旋轉(zhuǎn)、顏色過渡、位移、抖動、填充、線性軌跡、結(jié)合容器、元素介質(zhì)等。接下來我們來看看SOUl、虎牙、汽車之家是怎么做的。
SOUL的底部標(biāo)簽欄運(yùn)用到了彈性動畫、結(jié)合容器以及線性軌跡。帶有彈性縮放的標(biāo)簽反饋，讓整體的設(shè)計(jì)更加具有趣味性，相比線性縮放也更有視覺沖擊力。圖標(biāo)的運(yùn)動規(guī)則：先從 0 放大到最大（數(shù)值根據(jù)實(shí)際情況設(shè)定），然后再回彈至正常大小。除了彈性動畫外，它還結(jié)合了容器的元素對內(nèi)部進(jìn)行了顏色的替換以及單線條的軌跡動畫。這樣的處理不僅趣味性十足，還強(qiáng)化了選中當(dāng)前狀態(tài)，整體標(biāo)簽切換的一致性也較高。
虎牙一直是我比較喜歡的直播平臺，它的底部標(biāo)簽動畫也是非常值得借鑒，運(yùn)用到的動畫形式是抖動與趣味表達(dá)。抖動是通過圖標(biāo)的左右、上下快速位移或旋轉(zhuǎn)形成，整體的動畫效果節(jié)奏較快，具有一定的速度感，使整個標(biāo)簽切換的情緒表達(dá)較為俏皮、可愛。除了抖動外還在切換過程中代入了更多小元素的趣味表達(dá)，賦予了圖標(biāo)更多的性格，對我們的設(shè)計(jì)進(jìn)行再升華，從而提高整體設(shè)計(jì)的質(zhì)感和趣味。
因?yàn)橛脩羧后w的不同，汽車之家在標(biāo)簽動畫的設(shè)計(jì)上也相對簡單、嚴(yán)謹(jǐn)，它的動畫形式主要是結(jié)合容器與細(xì)節(jié)晃動。選中效果由線切換為面，并加入了品牌底色，這樣能夠清晰的給用戶傳達(dá)當(dāng)前頁面。并且為了不使整體的切換效果變得生硬，在切換過程中采用了透明度與彈性縮放，讓其過渡的相對柔和。在細(xì)節(jié)的處理上也是非常用心，每個圖標(biāo)都帶有笑臉的形狀，間接的給用戶傳達(dá)“笑臉”信息，在選取標(biāo)簽時內(nèi)部形狀會輕微晃動。整體來看汽車之家的標(biāo)簽動效雖然偏向嚴(yán)謹(jǐn)，但是在細(xì)節(jié)上也給予用戶傳達(dá)了更多的情感。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：黑獅力 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ì)公司
一.什么是選擇器
選擇器是一個輸入字段， 用戶必須在其中選擇一個（或多個）選項(xiàng)，這與文本字段中用戶可以自由使用的輸入?yún)^(qū)不同。選擇器具有各種不同的形狀和形式。下拉菜單，復(fù)選框，切換按鈕，滑塊等都是不同類型的選擇器，但它們看起來彼此并不相似。這些類型的選擇器之間的主要功能差異是用戶可以選擇的選項(xiàng)數(shù)量：一個或多個。
二.選擇器的類別
-單選選擇器
-多選選擇器
1.單選選擇器
單選選擇器按效果又可以分為：點(diǎn)擊選擇器、滑動選擇器、多聯(lián)動選擇器、開關(guān)選擇器、可搜索效果的選擇器、地圖選擇器。
特點(diǎn)：同一時間只能選擇一個選項(xiàng)，當(dāng)你已經(jīng)選擇完一項(xiàng)后，準(zhǔn)備選取另一項(xiàng)，那么后選的一項(xiàng)會立刻使先選的一項(xiàng)被取消選擇。
1-1點(diǎn)擊選擇器
點(diǎn)擊選擇器可分為兩種狀態(tài)，狀態(tài)一為立即觸發(fā)，當(dāng)你點(diǎn)擊后會立即跳到下一步操作；狀態(tài)二為再次確認(rèn)觸發(fā)，當(dāng)選中某項(xiàng)時，不會立即觸發(fā)操作，而是需要再點(diǎn)擊別的觸發(fā)類組件（如保存按鈕）后，再執(zhí)行操作。
-立即觸發(fā)式：
特點(diǎn)：直接進(jìn)入，并沒有再次確認(rèn)的按鈕，可以讓你快速到達(dá)想要的目的。
建議：雖然目的能快速達(dá)到，不過也很可能會造成誤操作，所以在設(shè)定這類選擇器時要多考慮手指的觸碰區(qū)域以及每個選擇元素的距離，同時正因?yàn)槭侵苯犹D(zhuǎn)，所以應(yīng)當(dāng)加入一些操作提示。
舉例：汽車之家在用戶選擇二手車時就會出現(xiàn)此選擇器，當(dāng)我在汽車之家想要選擇二手車時，它會彈出立即觸發(fā)式選擇器控件，我們在控件上可以看到有7個圓形選項(xiàng)，分別為：汽車之家誠信聯(lián)盟、準(zhǔn)新車、奧迪、奔馳、寶馬、三廂轎車、分期購車，當(dāng)我點(diǎn)擊“奧迪”選項(xiàng)時就會立即跳轉(zhuǎn)選擇后的頁面，為了讓用戶知道自己選擇后的狀態(tài)，在跳轉(zhuǎn)頁面時還會彈出非模態(tài)彈窗的文字提示“共找到1943輛車”。
-再次確認(rèn)觸發(fā)式：
特點(diǎn)：這是最為常見的選擇器類型，當(dāng)所在選項(xiàng)選上，除了選擇另一個選項(xiàng)之外，便沒法取消選中狀態(tài)。（選且只能選擇一個選項(xiàng)）
建議：在設(shè)定此類選擇器時我們應(yīng)該從產(chǎn)品的角度去考慮是否給用戶一個默認(rèn)選項(xiàng)，甚至是否考慮給出一個重置按鈕。
舉例：我剛注冊小紅書時，在小紅書填寫信息頁面中，它的默認(rèn)選項(xiàng)是“男”，我點(diǎn)擊“女”，則會自動取消掉“男”，它們兩者并不能同時存在，并且只有我點(diǎn)擊下一步按鈕時才會正式確認(rèn)我選擇完成。
1-2滑動選擇器
特點(diǎn)：滑動選擇器是將需要選中的內(nèi)容滑動至中部，然后點(diǎn)擊確認(rèn)按鈕確認(rèn)選中后返回選中內(nèi)容。大多數(shù)運(yùn)用在選擇時間或地址上。
建議：滑動選擇器的展示區(qū)域有限，部分選項(xiàng)會被隱藏，最好是當(dāng)用戶對所有選項(xiàng)都比較熟悉、有預(yù)期的時候，才使用它。為了保證手機(jī)屏幕觸控精度，以免發(fā)生誤觸，滾輪選擇器建議控制在5列以內(nèi)。
舉例：在小紅書填寫年齡信息時，我們只需用手指在區(qū)域內(nèi)滑動即可選擇想要的選項(xiàng)。
1-3多聯(lián)動選擇器
特點(diǎn)：多聯(lián)動選擇器是由兩個或兩個以上的中繼器制作而成，第一個中繼器選擇后，一般會對第二個中繼器進(jìn)行篩選，不過因?yàn)轱@示的區(qū)域有限，所以當(dāng)你要切換時，還只能挨個切換，效率低下。
建議：可以通過數(shù)據(jù)以及功能來減少選擇時間，例如在選擇地區(qū)時，根據(jù)當(dāng)前GPS定位地理位置，定位相關(guān)省級信息及名稱，減少滑動操作。
舉例：如下，當(dāng)我選擇了內(nèi)蒙古自治區(qū)，那么2級內(nèi)容就應(yīng)該篩選掉內(nèi)蒙古以外的城市，比較適用于省份-城市或者品牌-產(chǎn)品這種類似的選擇，當(dāng)然下面第一張多聯(lián)動選擇器也結(jié)合了滑動選擇器。
多聯(lián)動選擇器展示的方式非常多，不僅可以用滑動形式展示，還可以用點(diǎn)擊、平鋪列表等形式展示。
在左圖選擇城市時，我們必須要先選擇省份，再選擇城市，最后才能選擇縣；
右圖則沒有先后順序，不過當(dāng)你首先選擇顏色時，如果沒有相同尺碼的衣服，缺貨的尺碼則不會被選中，先選擇尺碼也是相同道理。
1-4切換開關(guān)選擇器
特點(diǎn)：切換開關(guān)選擇器有且只有兩種選項(xiàng)，用來在開和關(guān)兩種狀態(tài)之間切換。開關(guān)屬于觸發(fā)類組件，撥動開關(guān)時，它所指揮的某個操作會立即生效，常見的使用就是授權(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)按鈕需要打開時，必須要提前告知用戶。
舉例：當(dāng)我打開UC瀏覽器的設(shè)置時，它的輔助功能就使用了切換開關(guān)選擇器，切換的開關(guān)只需要點(diǎn)擊即可。
1-5可搜索選擇器
特點(diǎn)：可搜索選擇器一般用于選擇項(xiàng)較多時，特別是對于電商購物類的APP搜索選擇器是必不可少的，搜索選擇器會根據(jù)用戶輸入的內(nèi)容，對中繼器進(jìn)行模糊的搜索，讓用戶快速找到并選擇內(nèi)容。
建議：在搜索區(qū)域輸入文字時，可給予用戶更多的文字提示以及以及引導(dǎo)類信息。
舉例：小紅書在搜索時就會出現(xiàn)數(shù)字化的信息提示，這樣能夠很好的引導(dǎo)用戶進(jìn)入到想要的搜索結(jié)果：筆記或者商品頁面。
1-6地圖選擇器
特點(diǎn)：作為最特別的選擇器，它的功能是復(fù)雜的，它的操作方式也是多樣化的，地圖選擇器的操作可點(diǎn)擊、可拖拽、可放大縮小等等，它多用于生活類APP。
建議：可以在選擇器中加入更多趣味、互動、可感知的設(shè)計(jì)，如加入過節(jié)元素、車輛行駛路徑、熱門區(qū)域、甚至選取后手機(jī)的震動等。
舉例：
打車類APP必用的地圖選擇器，滴滴出行的用戶可以實(shí)時看到車輛信息，可以采用點(diǎn)擊、拖拽、放大等操作來選取上車地點(diǎn)，選取后還有文字信息提示，讓用戶確認(rèn)操作是否正確。
貝殼APP則用地圖選擇器來讓用戶選擇二手房，同時也采用了聯(lián)動式的效果，第一步是查看區(qū)域，可以明確看到區(qū)域的售房套數(shù)，點(diǎn)擊選擇區(qū)域后我們可以看到每個路段的房子套數(shù)，點(diǎn)擊路段后就可以看到每個樓盤的套數(shù)以及均價，直到點(diǎn)擊樓盤就會彈出詳細(xì)信息框。這樣有助于用戶在選擇二手房時從大數(shù)據(jù)分析二手房的情況，有更好的對比性與選擇性。
2.多選選擇器
當(dāng)單選選擇器不能滿足用戶需要時，這時我們就可以采用多選選擇器，一般常用的多選選擇器都是采用點(diǎn)擊的方式，當(dāng)然也有滑動類型的多選選擇器。
2-1點(diǎn)擊多選選擇器
特點(diǎn)：當(dāng)用戶想要選擇多個類別的情況下，我們就可以用點(diǎn)擊多選選擇器來展示提供給用戶選擇，通過屏幕點(diǎn)擊選中或取消選中該選項(xiàng)，它不會立即觸發(fā)操作，需要再點(diǎn)擊別的觸發(fā)類組件（如保存按鈕）后，再執(zhí)行操作。
建議：從用戶的角度來講盡量不要強(qiáng)制用戶選擇數(shù)量或者默認(rèn)全部數(shù)量；多選項(xiàng)時觸碰區(qū)域不能太小，以免造成誤操作。
舉例：小紅書在選擇感興趣的內(nèi)容時就采用了點(diǎn)擊多選選擇器，不過在選擇興趣時它就強(qiáng)制用戶至少關(guān)注4個興趣，而對于單興趣或者少興趣的用戶來講，這無疑會造成用戶體驗(yàn)的不佳，被逼再次從中選擇次要的興趣。
2-2滑動多選選擇器
特別注明：從用戶的角度來看，它可以選擇多個區(qū)域段的內(nèi)容，所以我把它分為多選選擇器中。
特點(diǎn)：當(dāng)系統(tǒng)給出的選項(xiàng)不在自己的選擇區(qū)間時，可以很好的自定義選擇區(qū)間，把定義權(quán)限交在用戶手里。同樣，它需要再點(diǎn)擊別的觸發(fā)類組件（如保存按鈕）后，再執(zhí)行操作。
建議：在用戶滑動操作期間要有明確的操作提示，讓用戶時刻感知目前處于的狀態(tài)；滑動區(qū)域盡量不要超過100刻度，如果刻度距離太小，用戶在滑動時也很難精準(zhǔn)的選擇范圍。
舉例：在汽車之家APP中，當(dāng)我要選擇汽車價格范圍時就會出現(xiàn)此選擇器，我們可以用手指滑動來選取它的價格區(qū)間，相對于上半部分的單選價格拓展性更強(qiáng)，用戶可以自行選擇上半部分的單選選擇器，也可以選擇滑動多選選擇器，給予用戶更多的選擇。
三、選擇器的十大應(yīng)用要點(diǎn)
1、簡單易懂
標(biāo)題易懂：
在選擇器中標(biāo)題一定要簡單明了，很快的讓用戶知道他在為什么做選擇（如：當(dāng)你關(guān)注某烹飪的APP后，它會讓你勾選喜歡的菜譜，你的標(biāo)題就可以用“選擇菜譜”四個字，簡單明了）
文字標(biāo)簽易懂：
一般使用短語而不是句子，也并不需要用標(biāo)點(diǎn)符號來結(jié)尾。（如：當(dāng)選擇想要的菜譜時，菜譜后的文字不需要加入標(biāo)點(diǎn)符號）
選取狀態(tài)易懂：
用戶能夠明確感知什么是選中狀態(tài)，什么是未選中狀態(tài)，什么是禁用狀態(tài)。（如：選中狀態(tài)為高亮顯示，未選中為普通顯示，禁用狀態(tài)為灰度顯示）
反饋提示易懂：
當(dāng)你在選擇中遇到選項(xiàng)限制或是否需要確認(rèn)操作時，反饋提示一定要一目了然。（如：當(dāng)你選擇某衣服時，S碼不能選擇，則會用灰度顯示的文字代替，甚至可以用中橫線劃過文字，明確告訴用戶不能選擇）
2、基本排序
從邏輯順序：
邏輯排序能讓用戶很快很準(zhǔn)的找到自己需要的選項(xiàng)，特別是對于選擇地址/時間/個數(shù)等常規(guī)的選項(xiàng)時，可以按照字母/遠(yuǎn)近/大小來進(jìn)行排序。例如下面在選擇地址時，就是按照A-Z字母排序，這樣可以大大節(jié)省用戶選擇的時間。
從產(chǎn)品利益角度排列順序：
當(dāng)然為了產(chǎn)品自身的利益也可以自己優(yōu)化排序方式，選項(xiàng)的順序可以說服用戶進(jìn)行選擇，用戶可能因?yàn)榈谝粋€選項(xiàng)在列表中的位置而選擇了第一個選項(xiàng)；可以輔助用戶，也可以讓用戶向著產(chǎn)品所希望的方向傾斜。例如你在選擇菜譜時，產(chǎn)品為了讓用戶選擇更加優(yōu)質(zhì)的菜譜，就會把用戶評價高的菜譜放在前列；當(dāng)然商家也會這么做，例如你要去買某款商品，商家會在選項(xiàng)中把熱門、優(yōu)質(zhì)的產(chǎn)品放在最上方，讓你優(yōu)先選擇。
從用戶體驗(yàn)排列順序：
從用戶角度來說哪些對用戶體驗(yàn)好，那么就把它排在前面。例如汽車之家在進(jìn)行車輛類別的排序中就把用戶量最多的轎車排在第一位，而把用戶量最少的輕客放在了最后一位；同樣它在汽車品牌選擇中，單獨(dú)列出了熱門品牌把它放在前列，讓用戶進(jìn)行快速選擇。
3、一致性
視覺布局一致：
每個元素之間的對齊、元素與元素之間的間距、按鈕不同狀態(tài)的視覺體現(xiàn)。一般情況下移動端更傾向于左對齊，這樣有利于快速讀取選擇內(nèi)容，可以提高用戶的瀏覽效率并減少錯誤。
圖片/插畫風(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)，特別是對于選擇年齡、生日這些個人隱私信息，系統(tǒng)也沒有辦法進(jìn)行默認(rèn)選擇。
默認(rèn)選中其中一個選項(xiàng)：
要想默認(rèn)其中一項(xiàng)，必須考慮兩點(diǎn)因素，因素一：你想要潛意識的像用戶傳達(dá)信息，在單選選擇器中默認(rèn)選擇一項(xiàng)后，就可以潛意識的向用戶傳遞信息必須要在這組單選項(xiàng)之中選擇一個。因素二就是產(chǎn)品的傾向，例如此產(chǎn)品的性別9成都是女性，那么建議默認(rèn)選項(xiàng)為女性。
默認(rèn)選中全部：
其實(shí)默認(rèn)選中全部在用戶體驗(yàn)上來講真的不是那么的友好，例如微博這個選擇器界面，剛進(jìn)這個界面時已經(jīng)全部勾選中，并且當(dāng)你沒注意習(xí)慣性的點(diǎn)擊下面的按鈕時會生立即效，沒有返回的余地。（吐槽：有些APP甚至沒有一鍵取消功能，要一個個的點(diǎn)擊取消...）這也是為了產(chǎn)品犧牲掉了部分用戶體驗(yàn)吧！
5、給用戶更多選擇
單選選擇器的更多選擇：
如果用戶不想做出選擇，那么應(yīng)該提供一個中立選項(xiàng)，為用戶提供一個明確的方向，中立選項(xiàng)比勉強(qiáng)選擇要好。例如在選擇行業(yè)領(lǐng)域時，以上并沒有你所處的領(lǐng)域或你不確定你的領(lǐng)域，你就可以選擇“不限”或“其他”。
多選選擇器的更多選擇：
在多選選擇器中，如果不能把控到用戶的準(zhǔn)確選項(xiàng)區(qū)間，那么可以考慮滑動多選選擇器，讓用戶有更多的選擇區(qū)間，不管是汽車之家還是懂車帝在選擇車輛價格上兩者都是采用的相同方式。
6、控件狀態(tài)
選擇控件在操作過程中必須更改其狀態(tài)/外觀，要明確讓用戶知道是否能選中，是否被選中?？丶顟B(tài)一般分為三種：未選中、選中、禁用。
未選中
選擇器的開始狀態(tài)，向用戶表明，可對該選擇控件進(jìn)行操作。
選中
用戶操作選取狀態(tài)，選擇控件處于被選中的狀態(tài)。
禁用
一般情況會為灰色顯示，用戶將無法與選項(xiàng)進(jìn)行交互。
7、操作提示
指的是用戶在操作中讓用戶得到相應(yīng)的反饋，用戶根據(jù)這些反饋可以判斷當(dāng)前狀態(tài)以及操作后狀態(tài)。在選擇器中，操作提示一般用輔助文案提示及非模態(tài)彈窗提示。
輔助文案提示（選擇前與選擇中）：
輔助文案指的是在選擇控件主體之外另外放置一些文案信息來充當(dāng)說明，例如下面是地區(qū)選擇，我在選擇不同層級的區(qū)域時，它的上方會出現(xiàn)輔助提示文案，讓你明確的知道你上一層級選擇的是什么。
同樣，當(dāng)我在選擇價格區(qū)間時，滑動選擇器的左上方一樣有文字類的提示：
非模態(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ū)域：
在選取按鈕類的操作時，容易出現(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ū)域，例如在選擇城市/品牌時，我們可以做A-Z index式字母交互區(qū)，幫助用戶快速找到想要的選項(xiàng)。
9、趣味性
讓用戶選擇本來就是一件枯燥乏味的事情，如果讓這件事變得有趣那么會極大的提升用戶體驗(yàn)。
從文本層面：
例如當(dāng)用戶填寫性別信息時，你給予用戶的文字信息并不是“男”/“女”，而是“帥氣的boy”與“酷酷的girl”，這樣會讓用戶覺得這是一件比較有趣的事情，而不是被動選擇。（注：這樣的取名一定要符合產(chǎn)品的特性）
從視覺層面：
加入可玩兒性的選項(xiàng)，例如汽車之家的頭像切換，可以選擇自己喜歡的頭像。（頭像并不是強(qiáng)制選擇的，如果不進(jìn)行操作則是默認(rèn)選項(xiàng)）
從交互層面：
讓用戶去享受選擇。例如Soul的星球首頁就做的非常棒，在未選擇狀態(tài)他的人物會360度圍繞著轉(zhuǎn)動，當(dāng)然你也可以快速拖拽，或者放大縮小，可玩兒性十足，并且在內(nèi)部設(shè)定了最匹配/新人的高亮顯示，協(xié)助用戶去選擇。
10、合理使用選擇器
不同的產(chǎn)品在使用選擇器時都各有不同，因?yàn)槊總€選擇器都有他的利弊，而真正要怎么去選擇還要根據(jù)產(chǎn)品本身來定。
那么我就拿目前市面上最常見的5個地址選擇器的類型來分析一下利弊：
1/多聯(lián)動選擇器（平鋪式）
貨車幫采用的是多聯(lián)動平鋪式選擇器，它最大的特點(diǎn)就是能夠一眼就看清楚所有地址，不過地址多時需要花時間去找，只是當(dāng)你經(jīng)常使用此功能時便會形成記憶，再此搜索的時候就能形成記憶點(diǎn)擊，效率很高，并且在操作外還有路徑提示，不僅可以幫助你記住層級選項(xiàng)，還可以實(shí)時返回路徑進(jìn)行重新選擇。
手勢操作：點(diǎn)－點(diǎn)－點(diǎn)
2/多聯(lián)動選擇器（列表跳轉(zhuǎn)式）
閑魚采用的是多聯(lián)動列表跳轉(zhuǎn)式選擇器，這個選擇器最大的缺陷就是選擇三級之后用戶可能會忘了上一級的內(nèi)容，那么就又要切換到上一級，閑魚采用它的原因是因?yàn)樗挥卸壜?lián)動，不存在遺忘現(xiàn)象，不過這樣列表式的選擇效率并沒有平鋪的效率高，人眼習(xí)慣掃視橫向內(nèi)容，所以橫向的內(nèi)容獲取往往要比縱向的多，在地址選擇器上我個人是不太建議采用多聯(lián)動列表跳轉(zhuǎn)式，因?yàn)椴⒉桓咝б膊恢庇^。
手勢操作：滑－點(diǎn)－點(diǎn)
3/多聯(lián)動選擇器（列表式）
轉(zhuǎn)轉(zhuǎn)采用的是多聯(lián)動列表式選擇器，它的優(yōu)點(diǎn)是可以根據(jù)右側(cè)字母來找城市，數(shù)據(jù)偏大也能夠很快的查找。不過如果在層級的選項(xiàng)中出現(xiàn)錯誤，同樣就要切換到上一級，并且在操作中沒有輔助信息提示。
手勢操作：滑/點(diǎn)－滑/點(diǎn)
4/多聯(lián)動選擇器（下滑式）
安居客采用的是多聯(lián)動下滑式選擇器，這種形式的選擇器不會遮擋后面的主要內(nèi)容信息，在選擇完地址之后能立即看到地址的篩選結(jié)果。優(yōu)點(diǎn)是能快速選擇多級地址，并且層級分明，擴(kuò)展性較強(qiáng)可以做成地址多選。缺點(diǎn)是不適合3個層級以上的地址選擇。
手勢操作：點(diǎn)－滑/點(diǎn)－點(diǎn)
5/地圖選擇器
美團(tuán)外賣采用的是地圖選擇器，這個選擇器一般用在需要精準(zhǔn)定位的生活類APP中，它的優(yōu)點(diǎn)就是能夠快速精準(zhǔn)定位，并且自動錄取定位信息，它的缺點(diǎn)也顯而易見，不能含帶層級并且對范圍也有約束。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：黑獅力 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ā)平臺”的助力。作為分發(fā)平臺，為了滿足C端用戶的多元化需求，必然要在供給端市場上爭奪優(yōu)質(zhì)B端商戶。為衡量分發(fā)平臺對B端商戶的吸引力，需要用一套完善的評估機(jī)制。
這種評估的衡量主體不再是我們熟悉的C端用戶產(chǎn)品，衡量范疇也不應(yīng)僅局限在功能易用、體驗(yàn)流暢等傳統(tǒng)用戶產(chǎn)品體驗(yàn)維度上；而是轉(zhuǎn)化到平臺與B端的生態(tài)視角，分析內(nèi)容或服務(wù)供給者與分發(fā)平臺之間合作流程、合作意愿，以及分發(fā)平臺的生態(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ā)平臺上服務(wù)或內(nèi)容資源的供給方，最核心的訴求是以其獨(dú)特的服務(wù)或內(nèi)容資源，在分發(fā)平臺獲取對應(yīng)的流量，從而產(chǎn)生訂單、廣告線索等商業(yè)利益。體驗(yàn)不再是唯一重要的評價維度，有時甚至?xí)屛挥趯ι虡I(yè)利益的考量。同時分發(fā)平臺為獲取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ù)中商戶與平臺間的利益共贏的底層邏輯，并通過對行業(yè)中多類B端分發(fā)生態(tài)產(chǎn)品的評估體系進(jìn)行桌面研究及規(guī)律總結(jié)，我們認(rèn)為以下三個鏈條可以描述B端分發(fā)生態(tài)產(chǎn)品的復(fù)雜結(jié)構(gòu)：
1、流程操作層：“賬號入駐-上線&迭代-數(shù)據(jù)分析-信息互動等”的操作鏈條，指向商戶日常運(yùn)營操作的CRM系統(tǒng)，建設(shè)目標(biāo)是流程順暢、操作便捷；
2、規(guī)則秩序?qū)樱?/strong>“審核要求-規(guī)范建議-等級體系-權(quán)益激勵”的秩序鏈條，表現(xiàn)了平臺意志及價值觀，定義了商戶做什么被獎勵，做什么被懲罰，構(gòu)建了以權(quán)益為中心的成長激勵體系，形成了獎懲規(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)平臺的實(shí)際吸引力。
由上，依照上述三個鏈條，對應(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ī)范建議的適用性等。
如錯邀決策層回答執(zhí)行層面問題，將無法得到細(xì)節(jié)問題的癥結(jié)所在；如果錯邀執(zhí)行層回答決策布局問題，也不可能得到準(zhǔn)確全面的答案。因此明確“誰”能回答“什么”問題至關(guān)重要。
同時，決策層會依據(jù)分發(fā)平臺提供的商業(yè)價值，對比所付出的執(zhí)行成本，確定是否繼續(xù)投入。因此兩者間的信息存在相互驗(yàn)證關(guān)系，引入多角色評估有利于得到更全面的視角。
| 做好抽樣方案：長尾分布下分群抽樣
B端商戶作為生態(tài)中的供給“群體”，具有內(nèi)在群體結(jié)構(gòu)，每個商戶為生態(tài)提供的價值并不均勻，在生態(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ù)情況下只能自生自滅。雖然長尾商戶個體對平臺價值貢獻(xiàn)很少，但群體數(shù)量巨大，種類繁多，可保障平臺供給的多樣性，滿足用戶多元長尾的需求，因此也是生態(tài)中必不可少的供給者。
因此，考慮到兩個群體在生態(tài)內(nèi)價值的差異，評估需分別取樣，并對兩個亞群各自賦予結(jié)構(gòu)權(quán)重，以便將各自評估得分?jǐn)M合為統(tǒng)一得分。
對于具體結(jié)構(gòu)權(quán)重?cái)M定方式，則需依據(jù)平臺不同發(fā)展階段的目標(biāo)重點(diǎn)而定，如發(fā)展初期依賴行業(yè)頭部資源保障用戶體驗(yàn)，則頭部權(quán)重更高；而發(fā)展成熟期依賴大量長尾商戶保障供給的多樣性和豐富度，則長尾商戶更高。
///
3、『評出啥』評估結(jié)果分析
接下來，我們將引入兩個例子介紹評估結(jié)果的落地應(yīng)用。
| 分析各板塊得分差異
在不同發(fā)展階段，平臺生態(tài)建設(shè)的目標(biāo)重點(diǎn)也不同。通過橫向?qū)Ρ雀髦笜?biāo)差異，能夠判斷出現(xiàn)階段短板問題，確定后續(xù)優(yōu)化方向。
如上圖1，有大量體驗(yàn)問題暴露在“流程操作層”，導(dǎo)致該維度得分低，這是一個典型的處于發(fā)展初期的平臺生態(tài)特征：其基礎(chǔ)功能尚未完善，商戶入駐/上線等流程操作體驗(yàn)不佳；但早期受益于流量扶持等優(yōu)待政策，外加開發(fā)者尚處于平臺摸索期，其對規(guī)則秩序和資源能力的滿意度相對較高。當(dāng)前階段，平臺應(yīng)將精力重點(diǎn)投入在基礎(chǔ)流程的建設(shè)上，優(yōu)化基礎(chǔ)體驗(yàn)問題，以加速生態(tài)規(guī)模的擴(kuò)大。
如圖2，當(dāng)基礎(chǔ)流程逐步建設(shè)成熟后，開發(fā)者對于平臺的各類分發(fā)場景、運(yùn)營規(guī)則有一定的實(shí)踐經(jīng)驗(yàn)后，更容易挑戰(zhàn)“規(guī)則秩序”和“資源功能”等板塊的得分，此時說明分發(fā)平臺已經(jīng)進(jìn)入細(xì)致打磨分發(fā)場景、運(yùn)營工具、獎懲規(guī)則及權(quán)益體系階段，精力重點(diǎn)應(yīng)該放在深入理解不同類型的行業(yè)打法，拓展分發(fā)場景并配以適合的運(yùn)營玩法的獎懲規(guī)則及權(quán)益體系，以提升開發(fā)者的主動運(yùn)營意愿。
| 關(guān)注不同生態(tài)群體得分差異
平臺發(fā)展初期往往需要扶持頭部開發(fā)者，打造標(biāo)桿案例吸引更多開發(fā)者入駐，因此這一階段頭部得分往往高于腰尾部。而隨著生態(tài)進(jìn)一步完善，腰尾部逐漸找到生存方式，逐漸縮小與頭部的差距。而如果腰尾部得分持續(xù)低迷，則說明平臺后續(xù)的發(fā)展?jié)摿Σ蛔恪Ｍ瑯?，如果頭部從始至終都沒有腰尾部得分高，說明示范作用沒樹立起來，優(yōu)質(zhì)資源有流失的風(fēng)險。這兩種都是生態(tài)健康度不佳的表現(xiàn)，需要業(yè)務(wù)加強(qiáng)警惕。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ì)師不會把所有字母都設(shè)計(jì)得一樣高。他們會注意到人類視覺的特殊性，所以他們會使用光學(xué)技巧創(chuàng)造一個和諧的、可讀的、平衡的字體。
在上圖中，一個正方形、一個三角形和一個圓在幾何上是相等的。然而，我們的眼睛卻認(rèn)為三角形和圓形偏小。這是因?yàn)檫@三種形狀有不同的重量。從字體上講，就是黑色的數(shù)量分布并不均勻。
有兩種方式能夠使得它們保持視覺平衡：
A. 計(jì)算兩個形狀的面積，并保持它們相等
我不喜歡使用這種方法，因?yàn)樗贿m用于簡單的形狀，如三角形、圓形和菱形。這種方法對于復(fù)雜的視覺效果不太有效。
B. 使尺寸更大、超出和模糊形狀是測試視覺重量最簡單的方法
現(xiàn)在你應(yīng)該明白了為什么非方形/圖標(biāo)看起來比方形小，讓我們看看真正的圖標(biāo)和 UI 元素如何使用這些光學(xué)原理變得更好。
在設(shè)計(jì)整套圖標(biāo)時，確保它們的平衡是至關(guān)重要的。為了保持平衡，在圖標(biāo)背板和圖標(biāo)區(qū)域之間留出額外的空間，并允許非方形圖標(biāo)超出圖標(biāo)區(qū)域。
另一個例子是一個矩形的UI元素和一個圓形按鈕放在一起。如果圓形按鈕的高度與矩形UI元素相同，那么圓形按鈕看起來會更小。基于光學(xué)校正原理，你需要區(qū)別對待這兩個元素。
看看下面的例子，WhatsApp，三星消息，和Swiggy支持聊天。你覺得哪一個更正確?請?jiān)诹粞詤^(qū)發(fā)表你的看法。
還有比正方形更正方形的嗎?
我們的眼睛有古怪的視覺感知，我們看到的事物與現(xiàn)實(shí)不同。下面是一個類似的小測試，你覺得哪個圓和哪個方更標(biāo)準(zhǔn)?
在這些橢圓和矩形中，一個是正圓，一個是正正方形。我已經(jīng)修改了正確的，但他們似乎更對稱了，這是因?yàn)榇怪?水平錯覺。(彩云注：右邊是調(diào)整過的，看起來會更圓和更正)
大多數(shù)幾何字體不是幾何圖形。字體設(shè)計(jì)師通過牢記人類的視覺感知來設(shè)計(jì)高質(zhì)量的字體。他們幾乎在每個字母中都使用光學(xué)原理，以使字體保持平衡。
你從上面的測試中應(yīng)該明白了我的意思。要了解更多，請看下面的圖片。我把字母“O”從幾何字體Futura放在一個完美的圓圈旁邊。你覺得哪一個看起來更對稱?
你甚至在底部文字出現(xiàn)之前就猜到了，對吧?來自Futura的字母“O”比完美的圓更寬，但看起來更對稱。原因是，我們的眼睛傾向于看到的垂直區(qū)域比水平區(qū)域要長，即使它們是相同的。
讓我們看看這個錯覺是如何出現(xiàn)在字母“T”上的。
在上圖中，水平筆畫的粗細(xì)要小于垂直筆畫的粗細(xì)，以避免產(chǎn)生錯覺。你可以在設(shè)計(jì)方形圖標(biāo)、方形背景或頭像邊框等時使用這個技巧。
如何使駕駛盡可能平穩(wěn)?
設(shè)計(jì)字體字形就像開車。當(dāng)我們開車時，如果已經(jīng)在彎道的起點(diǎn)時，我們不會轉(zhuǎn)動方向盤，只是在到達(dá)彎道前稍作自然轉(zhuǎn)彎，以免發(fā)生意外。
字體設(shè)計(jì)者不依賴于圖形編輯軟件的預(yù)設(shè)弧度。他們會調(diào)整曲線使其更平滑，因?yàn)樗麄冎廊搜劭梢粤⒓醋⒁獾街本€突然變成曲線的點(diǎn)。
讓我們看看這兩種曲線：純幾何和微調(diào)。試著觀察哪一個干擾了你的眼睛，哪一個是光滑的。
讓我們看看在UI設(shè)計(jì)中我們可以在哪些地方融入這種學(xué)習(xí)。
你可能已經(jīng)注意到右邊的按鈕、圖標(biāo)和框架看起來更賞心悅目。而左邊的曲線有一個很硬的從直線到曲線的過渡。
我們?nèi)绾涡拚€呢?在設(shè)計(jì)時，可以進(jìn)入形狀編輯模式，手動調(diào)整曲線手柄的大小，如下圖所示。
為什么眼睛的判斷比數(shù)值參數(shù)更重要?
間距是字體設(shè)計(jì)中最關(guān)鍵的部分。字體設(shè)計(jì)師根據(jù)字母的形狀對字母進(jìn)行組合，并以不同的間距排列字母。例如，字母A和V是三角形的，包含更多的外部空白。所以，如果它們一起出現(xiàn)，那么它們之間的間距會有點(diǎn)寬，需要減少間距。這有助于形成和諧的字體。
字體來源:Ek Mukta，作者:Girish Dalvi博士和Yashodeep Gholap
現(xiàn)在，讓我們看看如何將這個知識點(diǎn)運(yùn)用到視覺設(shè)計(jì)的其他方面。你可能已經(jīng)注意到，在圓形或矩形容器中放置三角形圖標(biāo)會使圖標(biāo)顯得不協(xié)調(diào)。這僅僅是因?yàn)楫?dāng)用軟件來對齊的容器中，三角形的面積兩邊是不相等的。看看下面的圖片，可以用視覺解釋來理解它。
為了使三角形在其容器內(nèi)具有光學(xué)中心，我們需要平衡兩邊的重量。對于三角形，你可以找到質(zhì)心，并將其與容器的中心對齊?，F(xiàn)在，如果三角形是用形狀工具創(chuàng)建的，Adobe Illustrator會提供質(zhì)心的提示。
如果沒有看到質(zhì)心提示，也不要擔(dān)心。質(zhì)心可以通過簡單地畫線從任何兩個邊的中心到它們對面的頂點(diǎn)來定位。查看下面的圖片來更好地理解它。
這種方法只適用于幾何形狀。對于其他更復(fù)雜的形狀，你需要依靠你的眼睛判斷，而不是數(shù)學(xué)參數(shù)。
需要記住的是:如果你為開發(fā)者切圖時，你需要在圖標(biāo)周圍保留一些區(qū)域，這樣他們就可以將圖標(biāo)放在背景的中央。
從圖標(biāo)的質(zhì)心畫一個圈，留下它周圍的額外區(qū)域。
讓我們檢查一下，可以在留言區(qū)討論下到底哪個公司使用了錯誤的資源？
如何平衡?
你有沒有仔細(xì)注意過字母“B”?它的底部被設(shè)計(jì)得比頂部大。如果我們設(shè)計(jì)的兩個半圓在數(shù)學(xué)上是相等的，它會看起來不平衡(檢查左圖)。這是因?yàn)槲覀冞M(jìn)化到從“視角”的概念來處理物理世界，在這個概念中，遠(yuǎn)處的物體看起來比附近的物體更小。（彩云注：可以理解為當(dāng)你在山腳時看到的山腳物體要比看山頂?shù)囊螅敢曉恚?
在印刷中，這意味著要使字體同樣平衡，就需要在底部畫得更重。
讓我們通過翻轉(zhuǎn)字體中的幾個字母來看到明顯的區(qū)別。
字體來源:Ek Mukta，作者:Girish Dalvi博士和Yashodeep Gholap
同樣的概念適用于其他水平對稱的字母形式，甚至在字母“H”的交叉杠是放在實(shí)際的中心以上，使它看起來更平衡。
所以，下次當(dāng)你設(shè)計(jì)一個水平的圖標(biāo)或標(biāo)志時，使用這種底部重的技巧來讓它在視覺上更加平衡。
這種錯覺也被稱為“波根多夫錯覺”( Poggendorff illusion)，這是一種奇怪的現(xiàn)象，會扭曲我們對形狀相交角度不是90°的感知。出于某種原因，我們的大腦很難推斷出一條被其他形狀部分覆蓋的線，從而導(dǎo)致連續(xù)性的中斷。為了更好地理解它，先看看下面例子中的左邊的圖，看看哪條線是連續(xù)的，A還是B?然后檢查我縮小了封面線的右邊的圖片。我希望你明白我的意思。
在拉丁字體中，' X '或' x '就是這種錯覺的受害者，需要特殊處理使其看起來更自然。字體設(shè)計(jì)者稍微偏移對角線，以矯正X或X的光學(xué)效果。(彩云注：右邊是調(diào)整后的，視覺上看更加連續(xù))
如果你在為其他語言設(shè)計(jì)字體或?yàn)锳PP設(shè)計(jì)圖標(biāo)集時遇到類似的問題，你可以嘗試像在字母“X”中那樣偏移斜線。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：彩云Sky 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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)自身的目的，比如雙擊，滑動，常按等，而操作一般建立在產(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.「微信」公眾號文章在看-讓你看個夠
066.「QQ音樂」跑步電臺-讓枯燥的運(yùn)動變的更有趣
067.「騰訊視頻」暖心的提示建立信任的橋梁
068.「躺平」動態(tài)IP插圖-促使用戶進(jìn)一步行動
069.「愛奇藝閱讀」會“冒泡”的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)時，系統(tǒng)會自動選擇事先設(shè)置好的類型，依次對訂單金額使用優(yōu)惠券進(jìn)行減免。
設(shè)計(jì)思考：
只要我們出門走上街頭，就會看到各種各樣的優(yōu)惠券在向我們招手，逛一圈回來，手里能攥一大把優(yōu)惠券。即便是在家，樓梯道、門把手上、門縫下面都會有優(yōu)惠券塞進(jìn)來，多券在手，我們總是會去琢磨怎么花費(fèi)最劃算。不只是線下如此，線上更是夸張，每注冊一個電商平臺，都能收到一堆優(yōu)惠卡券，而且還是日更新的。
商家都知道，在打折促銷日漸平常的今天，消費(fèi)者很難會再有強(qiáng)烈的購物沖動，單純的打折降價已經(jīng)不能給消費(fèi)者直觀的感受了，額外的優(yōu)惠才能對消費(fèi)者更有吸引力。為了提高店鋪轉(zhuǎn)化率，吸引流量，商家或平臺都會發(fā)放一些優(yōu)惠券，讓消費(fèi)者有“實(shí)惠”的感覺，更有利于拉動二次進(jìn)店，以驅(qū)動用戶買下更多的商品。其實(shí)優(yōu)惠券發(fā)放給消費(fèi)者之后并非不聞不問，還需要考慮通過何種方式發(fā)放、如何提醒、如何促進(jìn)消費(fèi)轉(zhuǎn)化都值得深究，如果優(yōu)惠券過期，表面上看是用戶的損失，實(shí)際真正得到損失的是平臺/商家。
在淘寶的紅包卡券功能里，可設(shè)置優(yōu)惠券的使用優(yōu)先級，便于用戶在下單時按照自己想要的方式讓優(yōu)惠券合理化依次使用，比如依據(jù)過期時間的先后、優(yōu)惠力度的大小等，便于達(dá)到最大化利用。在消費(fèi)者的心里，優(yōu)惠的金額即自己賺到的金額，不僅能讓其感受到優(yōu)惠的強(qiáng)度，還能有效避免優(yōu)惠券的浪費(fèi)，有利于平臺/商家發(fā)放的優(yōu)惠券最大程度的使用，提高消費(fèi)下單轉(zhuǎn)化率，達(dá)到消費(fèi)者、平臺、商家三方共贏的目的。
（PS：如果每次都是平臺默認(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)往四周拖動，就會變換各種不同的小表情，俏皮可愛的表情非常有趣。
設(shè)計(jì)思考：
Tab欄的作用主要是做內(nèi)容分類，節(jié)省設(shè)備的空間，在用戶需要的時候隨時可以點(diǎn)擊。可以想象一下，如果沒有tab欄給大的模塊分類，應(yīng)用的功能全面鋪開，就像進(jìn)入了一個大型垃圾場（輕量型應(yīng)用除外），亂糟糟的感覺。Tab欄本身就是承載多個功能集合的一個入口，其點(diǎn)擊量影響著用戶的使用頻率和操作深度，直接關(guān)聯(lián)著轉(zhuǎn)化率的問題，所以很多應(yīng)用也會在視覺呈現(xiàn)樣式、交互手勢、情感化、微動效等方向下功夫，用來吸引用戶去點(diǎn)擊，為其增加點(diǎn)擊量及操作頻率。
QQ的Tab欄消息圖標(biāo)就使用了趣味化的微動效樣式，雙擊、或輕觸圖標(biāo)往四周摸一下，圖標(biāo)就會變換各種不同的小表情，真的是讓網(wǎng)友震驚了，通過趣味性的表情變化，也可讓用戶的心理情緒也隨之改變，俏皮可愛的圖標(biāo)樣式在保證識別性的前提下增加了親和力和趣味性，拉近與用戶之間的距離。趣味化的表現(xiàn)方式且與年輕人生活圈接軌，體現(xiàn)用戶時尚潮流的文化基因，時刻用戶保持著新鮮感。
（PS：上圖中只是舉例了其中幾個表情，如果想了解更多，請進(jìn)入QQ應(yīng)用中體驗(yàn)）
063.「百度地圖」未來出行-提前規(guī)劃行程變得輕而易舉
產(chǎn)品體驗(yàn)：
①、使用百度地圖自駕出行，選中其中一條路線后，點(diǎn)擊左下方的出行建議，設(shè)定出行日期及時間，系統(tǒng)以每15分鐘為一個時間段，計(jì)算出每個時間段出行預(yù)估的耗時，并推薦最優(yōu)出行線路。
②、選擇公交/地鐵出行時，除了應(yīng)有的路線指引，還提示了未來的時間段用該出行方式存在的故障及延時信息。
設(shè)計(jì)思考：
出行駕車如何避開堵車高峰？如何選擇合適的時間打車？公交/地鐵常用線路何時會出現(xiàn)特殊情況停運(yùn)晚點(diǎn)等，這些很多無法確定的時間經(jīng)常困擾著大家。眼看著春節(jié)假期就來臨了，這么好的旅游機(jī)會可不能在家中“躺尸”式的荒廢度過，想必有很多人已經(jīng)相約著去游玩一番的準(zhǔn)備，不過經(jīng)常會碰到途中堵車、路線封閉、交通工具停運(yùn)等問題的出現(xiàn)，真的是讓人“頭大”。
①、百度地圖的“未來出行”功能，自駕可提前設(shè)定出行時間，查看未來出發(fā)時刻的相應(yīng)耗時，未來時刻以每15分鐘為間隔，滑動時間柱就能了解哪個時間點(diǎn)出發(fā)耗時最短，還可以向下滑動頁面，進(jìn)一步了解每一段路程的詳細(xì)用時，讓周末出游的用戶，提前規(guī)劃行程變得輕而易舉。
②、還可以精準(zhǔn)預(yù)估“地鐵進(jìn)站”、“公交候車”的耗時，以及預(yù)估公交地鐵的擁擠情況，讓用戶出行更添安全感，提前了解未來搭乘公交、地鐵時已確定會出現(xiàn)的突發(fā)狀況，便于提早預(yù)算換乘交工工具，節(jié)約出行時間，提高出行效率，還能方便用戶下班回家避開晚高峰。
064.「高德地圖」出行前-人性化的天氣提醒
產(chǎn)品體驗(yàn)：
進(jìn)入高德地圖首頁，如果是雨天，頁面視覺會顯得比較暗，能看到烏云及明顯的雨滴落下，3秒后回到正常狀態(tài)。
設(shè)計(jì)思考：
不知小伙伴們是否碰到過這種情況，帶著雨傘從來不下雨，下雨的時候都是沒有帶雨傘；打車后前往上車地點(diǎn)發(fā)現(xiàn)在下雨，要么取消訂單，要么去買雨傘，總是那么的事與愿違。變化不定的天氣是最為影響出行的一項(xiàng)因素。而面對忽晴忽雨的天氣，如何才能順利出行呢？
使用高德地圖，進(jìn)入地圖首頁時，界面會出現(xiàn)天氣動效，提示實(shí)時的天氣狀況，尤其是下雨天，可以提醒用戶出門記得帶雨傘，還便于用戶根據(jù)實(shí)際的天氣狀況選擇合適的交通工具出行，不論是打車、公交還是騎行，都可以隨意調(diào)整，在用戶出行之前通過視覺強(qiáng)調(diào)提醒，非常實(shí)用。
065.「微信」公眾號文章在看-讓你看個夠
產(chǎn)品體驗(yàn)：
在微信公眾號的文章底部，點(diǎn)擊在看，底部會展開一個新版塊“喜歡此內(nèi)容的人還喜歡”，給用戶推薦相似文章。
設(shè)計(jì)思考：
閱讀量怎么樣，要看標(biāo)題起的吸不吸引人，文章內(nèi)容質(zhì)量怎么樣，要看轉(zhuǎn)發(fā)量的多少。我們都知道，微信有很多公眾號都會產(chǎn)出質(zhì)量較高的文章，所以也被譽(yù)為繼線上看書之后的又一個知識發(fā)源地。將公眾號的文章拉到底部之后，“在看”也是一個不錯的數(shù)據(jù)統(tǒng)計(jì)，點(diǎn)擊過“在看”的讀者，不僅預(yù)示著對文章的肯定，同時也能增加文章的閱讀量，形成二次傳播，
在微信公眾號的文章底部點(diǎn)擊“在看”后，會出現(xiàn)新增的相關(guān)文章推薦版塊，并提供公眾號名稱、文章標(biāo)題、點(diǎn)贊數(shù)和文章封面圖片等，對公眾號主和自媒體的人來講，文章曝光和閱讀量的提升又多了一成機(jī)會，為讀者推薦與原文相似或者同頻的文章類型，既能滿足引導(dǎo)用戶繼續(xù)探索的目的，還能通過所有公眾號相互串聯(lián)，讓其他公眾號的文章都有機(jī)會增加曝光和展示，進(jìn)行流量分發(fā)，兩全其美。
066.「QQ音樂」跑步電臺-讓枯燥的運(yùn)動變的更有趣
產(chǎn)品體驗(yàn)：
在QQ音樂的設(shè)置里，通過跑步電臺選擇適合自己跑步速度頻率對應(yīng)類型的歌曲播放，一邊跑步一邊聽歌，為自己提供跑步節(jié)奏和堅(jiān)持的動力。
設(shè)計(jì)思考：
基于現(xiàn)在快節(jié)奏的生活狀況，很多年輕人在午餐后直接睡覺、晚飯后常坐不起，這就是大批年輕人無法控制自己身體、越來越胖的原因?！跋矚g”跑步的的人群越來越多，但眾所周知，跑步需要極強(qiáng)的耐力和自律來控制自己堅(jiān)持下去，但大部分人都挨不過三分鐘熱度，定下跑步目標(biāo)時來勢洶洶，放棄時就借口連連。
如果在跑步過程中感到非常無聊，就不妨用下QQ音樂的跑步電臺，選擇一首適合自己跑步的神曲吧。QQ音樂的跑步電臺根據(jù)自己跑步的頻率推薦適合的音樂，有適合慢跑的、快跑的、節(jié)奏感強(qiáng)烈的、專業(yè)人士的推薦......再加上QQ音樂本身帶強(qiáng)大的歌曲庫，在跑步過程中可以聽到不同曲風(fēng)的好歌，讓跑步停不下來。用戶在跑步之前一般都會設(shè)定時間或距離目標(biāo)，在跑步時不停的查看數(shù)據(jù)（類似小時候在學(xué)校上著40分鐘的一節(jié)課，經(jīng)常查看還剩幾分鐘下課），播放著跑步電臺的音樂，能引導(dǎo)用戶的思維偏離設(shè)最初計(jì)定的目標(biāo)，將部分思維想法轉(zhuǎn)換到音樂的節(jié)奏中，給自己提供更多的跑步動力，則堅(jiān)持的更久。另外，還可以設(shè)置“按步頻匹配音樂”，免去手選，系統(tǒng)根據(jù)實(shí)時的運(yùn)動頻率，自動為用戶精準(zhǔn)推薦符合該頻率的歌曲，讓原本枯燥的運(yùn)動變的更加有趣。
067.「騰訊視頻」暖心的提示建立信任的橋梁
產(chǎn)品體驗(yàn)：
在零點(diǎn)以后打開騰訊視頻，橫屏觀看影片，頂部以“夜深了”溫馨的提醒，暗示“熬夜黨”以身體健康為重，放下手機(jī)早點(diǎn)休息。
設(shè)計(jì)思考：
在幾年以前，就報(bào)道過關(guān)于網(wǎng)吧通宵熬夜猝死的新聞。而如今互聯(lián)網(wǎng)時代，基于電腦、智能手機(jī)的普及，去網(wǎng)吧上網(wǎng)的人的確少了，但相同的悲劇新聞卻更多了，比如躺在床上熬夜逛淘寶、刷抖音、嗨聊、追劇等，一夜過去就沒再醒過來（這絕不是玩笑，可能就發(fā)生在我們身邊），只不過換了種方式，去的很“安逸”而已。
使用騰訊視頻觀看影片，在橫屏狀態(tài)下，到了深夜零點(diǎn)以后，屏幕上方會顯示“夜深了”，通過暖心的文案提醒用戶放下手機(jī)早點(diǎn)休息，表達(dá)出對用戶的關(guān)切之意。語言是情感化設(shè)計(jì)最直接的利器，這種提示雖然沒有直接中斷用戶觀看視頻，卻很直接的將用戶線上思維轉(zhuǎn)換至現(xiàn)實(shí)的場景之中，充分的考慮到用戶的身心健康，以情感化的方式引起用戶警覺，促使用戶結(jié)束觀看，表面上看似縮短了該用戶的使用時長，實(shí)則跟用戶之間建起了一座相互信任的橋梁，以提升用戶后續(xù)的使用粘性，增減其忠誠度。
068.「躺平」動態(tài)IP插圖-促使用戶進(jìn)一步行動
產(chǎn)品體驗(yàn)：
進(jìn)入躺平APP關(guān)注（首頁）頁，當(dāng)頁面數(shù)據(jù)為為空時，Tab欄上方會出現(xiàn)IP插圖，通過動態(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ù)信息，會導(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ù)為空時，通過動態(tài)IP插圖明確的行動指令引導(dǎo)用戶去關(guān)注躺友，以獲得數(shù)據(jù)內(nèi)容，能讓用戶快速地進(jìn)入到產(chǎn)品使用中，減少用戶的疑惑和焦慮感。同時，動態(tài)的表現(xiàn)方式更具點(diǎn)擊欲望，讓交互行為更加活潑有趣，不僅能正確的引導(dǎo)用戶，也是轉(zhuǎn)化用戶進(jìn)一步操作好方法。
069.「愛奇藝閱讀」會“冒泡”的TabBar欄
產(chǎn)品體驗(yàn)：
點(diǎn)擊愛奇藝閱讀Tab欄的冒泡圖標(biāo)，除頁面切換之外，圖標(biāo)還會向上冒著氣泡，動態(tài)呈現(xiàn)方式非常有趣。
設(shè)計(jì)思考：
APP的Tab欄作為第一觸點(diǎn)，對整個應(yīng)用模塊的分類起著不可替代的作用，還能檢驗(yàn)應(yīng)用整體的設(shè)計(jì)是否精致，其重要性不言而喻。很多設(shè)計(jì)師都會在圖標(biāo)風(fēng)格及造型上下很大的功夫，但卻常常忽視另外的一個關(guān)鍵點(diǎn)，即tab觸發(fā)時的動效設(shè)計(jì)，合理的動畫效果，能起到畫龍點(diǎn)睛的作用，但在設(shè)計(jì)過程中一定要考慮什么樣的動畫效果更符合該產(chǎn)品的調(diào)性，傳達(dá)出設(shè)計(jì)品牌及理念。
點(diǎn)擊愛奇藝閱讀APP底部tab欄的“冒泡”圖標(biāo)，圖標(biāo)以動效方式呈現(xiàn)，其上方還會冒著氣泡，2秒后自動消失，能降低頁面切換后、內(nèi)容刷新時需要等待的枯燥感，提升用戶操作的愉悅度，且動態(tài)的表現(xiàn)方式相比靜態(tài)更吸引眼球，以趣味化的方式增加視覺關(guān)注度，因此在切換 tab 時具有更強(qiáng)的視覺沖擊力。動態(tài)的氣泡結(jié)合tab欄“冒泡”標(biāo)題，則更加真實(shí)形象，更好的傳達(dá)寓意，也能給用戶留下深刻的印象。
070.「美團(tuán)」更明確的視覺傳達(dá)-減少用戶思考
產(chǎn)品體驗(yàn)：
使用美團(tuán)酒店/住宿選擇入住時間，在日歷中設(shè)定好起止日期后，除起止日期用了明顯的提示外，中間夾帶的時間也用了淺色填充提示，截止時間上方還提示了入住天數(shù)統(tǒng)計(jì)。
設(shè)計(jì)思考：
在我們外出需要入住酒店時，選擇住店截止日期是必不可少的一步，因目前可供住宿的應(yīng)用比比皆是，在用戶體檢方面稍不留神，用戶就可能選擇其他應(yīng)用。設(shè)計(jì)師需要在設(shè)計(jì)時下功夫，比如減少操作路勁、節(jié)約用戶時間成本、明確的視覺傳達(dá)等，只要多站在用戶的角度思考，都能帶來更好的用戶體驗(yàn)。
在美團(tuán)APP上使用住宿，選擇起止時間時，并非常規(guī)的設(shè)置好起止時間就完事兒了。在起止日期范圍內(nèi)的時間里，系統(tǒng)使用了淡淡的底色填充顯示在日歷中，用更明顯的視覺傳達(dá)，讓用戶更明確自己所選擇的日期及范圍。截止時間上方統(tǒng)計(jì)了用戶的入住天數(shù)，因?yàn)樯婕敖疱X成本，在用戶可能會自己計(jì)算的情況下，系統(tǒng)已經(jīng)通過自動統(tǒng)計(jì)時間來減少用戶的思考，節(jié)約時間成本，便于用戶在更快的時間內(nèi)做出決策，達(dá)到轉(zhuǎn)化的目的。
071.「網(wǎng)易云音樂」遇見陌生人-聽歌交友
產(chǎn)品體驗(yàn)：
使用網(wǎng)易云音樂的一起聽功能，除了能分享給好友外，還可以選擇“遇見陌生人”，系統(tǒng)自動匹配興趣相投的陌生人并添加進(jìn)來一起聽歌。
設(shè)計(jì)思考：
自網(wǎng)易云音樂“一起聽”上線以來，深受廣大用戶的好評，原來聽著寂寞的歌曲并不會寂寞?；诓煌男枨?，心情不好時，邀請閨蜜一起聽；有新歌發(fā)行時，邀興趣相投的好友一起聽.....，但是，并非每次都那么方便，需要好友資源、相同時間、同一個音樂應(yīng)用等諸多條件，有時候邀請發(fā)出去之后，收到的只有尷尬。
網(wǎng)易云音樂的一起聽最新版本上線了“遇見陌生人”功能，這個功能能夠讓兩個彼此之間不認(rèn)識的人同時收聽一首歌曲，對于有很多心事的人而言，這的確是一個可以讓你袒露心聲的好機(jī)會。和陌生人一起聽歌，還能通過聽歌來交友，實(shí)現(xiàn)了更多有趣的交流模式，讓用戶在聽歌的過程中找到志同道合的好友，不得不說，這個功能真的很貼心。
072.「酷狗音樂」再也不用死死盯著歌詞頁面了
產(chǎn)品體驗(yàn)：
在酷狗音樂設(shè)置中可開啟桌面歌詞，按住歌詞卡片拖動調(diào)整擺放位置（限設(shè)備四角），還可以通過滑動使其吸附在設(shè)備兩側(cè)，待需要時再拖出來，點(diǎn)擊卡片關(guān)閉按鈕，歌詞關(guān)閉，歌曲也隨之停止播放。
設(shè)計(jì)思考：
曾幾何時，智能手機(jī)還未普及，我們偶爾聽到一首喜歡的歌曲，趕緊回去打開電腦，開著桌面歌詞，跟著學(xué)了起來?？粗烂娓柙~，跟隨節(jié)奏，可能是學(xué)歌最快的方式了，在KTV看著屏幕唱歌就是最好的例子。隨著后來智能手機(jī)的普及，聽歌/學(xué)歌確實(shí)方便多了，任何地方、任何環(huán)境（耳機(jī)）隨時打開APP就行，不知大家有沒有發(fā)現(xiàn)，雖然聽歌的次數(shù)、時間都增加了，很多歌都能哼上幾首，但正經(jīng)起來，好像什么歌都不會唱，要想學(xué)還得盯著APP播放頁的歌詞，太過局限，很多人都不想浪費(fèi)這個時間。
酷狗音樂的桌面歌詞就方便了很多。從設(shè)置中開啟桌面歌詞，用戶在聽著歌曲時逛淘寶、聊天、看書都可以隨時瀏覽歌詞，如果歌詞卡片遮擋了手機(jī)內(nèi)容，拖到邊緣隱藏即可，非常方便有查看、摘錄歌詞的需求的用戶使用，同一時間做著幾件事情，省時省力，何樂而不為呢？
073.「微信」8.0浮窗-沒有最好、只有更好
產(chǎn)品體驗(yàn)：
微信上線8.0版本，浮窗由之前的“邊緣吸附-只顯示標(biāo)題”調(diào)整到了“左上角-顯示網(wǎng)頁預(yù)覽圖”，多個浮窗更清晰。
設(shè)計(jì)思考：
記得以前，使用微信瀏覽網(wǎng)頁時，如果中途退出，下次就得重新打開，真心麻煩，用戶在此痛點(diǎn)的訴求下，浮窗功能便誕生了，從此，聊天/刷朋友圈、看文章不再艱難，中途停止，用浮窗掛在屏幕邊緣就行了，其方便程度自然不用多說。
微信一直致力于用戶體驗(yàn)而不停的探索，正所謂沒有最好，只有更好，即使上線了某個能讓用戶開心尖叫出來的功能，其團(tuán)隊(duì)也不會止步于此。微信8.0版本在上了一波“吊炸天”的功能后，也順帶優(yōu)化了浮窗功能，不得不說：比以前好用多了。入口固定在了左上角，解決了之前懸浮設(shè)備兩側(cè)遮擋內(nèi)容需要拖來拖去的問題，有多個浮窗時，也不用花太多時間回想哪個是自己想要的網(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ù)。不管在一個企業(yè)做了多么久，只要實(shí)力相當(dāng)，跳槽漲薪遠(yuǎn)比待在一個公司提薪來的快，這是一個被業(yè)界公認(rèn)又不會被挑明的真相?；诒旧砭驮诠ぷ鞯脑?，求職不會那么的明顯，投遞簡歷之后，更不會長時間停留在求職應(yīng)用里，等到下班去看時，因?yàn)殚L時間未回復(fù)消息導(dǎo)致機(jī)會稍縱即逝。
Boss直聘的微信“代收消息”能幫助用戶解決這個難題。通過設(shè)置中的消息與提醒，綁定微信，方便用戶能通過微信及時收到重要的求職溝通信息，再也不用擔(dān)心錯過重要消息了，十分方便，為心中有“小九九”的求職者提供了很大的便利。
075.「QQ」自習(xí)室-換種方式學(xué)習(xí)，不一樣的收獲
產(chǎn)品體驗(yàn)：
在QQ的“動態(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)持不下去了，沒有意志力，整個人總是陷入焦慮的狀況，放棄，又不甘心，重新開始又放棄，這樣的惡性循環(huán)持續(xù)下去，可還是在原地打轉(zhuǎn)，有沒有想過換種方法試試。
進(jìn)入QQ的自習(xí)室，我們就可以和更多小伙伴一起學(xué)習(xí)學(xué)習(xí)交流、互相鼓勵，雖然是在線上，感覺有些虛擬，但針對自制力不強(qiáng)的同學(xué)卻能起到獲得堅(jiān)持下去的動力，一群人在一起學(xué)習(xí)比一個人更有學(xué)習(xí)氛圍和儀式感。
（不要抬杠，報(bào)過網(wǎng)課同學(xué)都清楚，看直播課通常會有更強(qiáng)的吸收能力，而課后看回播不僅會把時長翻上兩倍，其吸收能力也比較差，直到看不下去放棄為止，少數(shù)自制力很強(qiáng)的除外。同樣的道理，在圖書館看書比在家看書的效率也能翻上好幾倍）
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：大漠飛鷹 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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.「高德地圖」減少思考時間的AR實(shí)景導(dǎo)航
111.「搜狗輸入法」復(fù)雜/生僻字-貼心的拼音合并功能
112.「得物」3D空間-720度無死角瀏覽商品
113.「馬蜂窩」趣味且炫酷的連擊點(diǎn)贊
114.「真快樂」中斷登錄流程-最后的彈窗挽留
115.「網(wǎng)易云音樂」是如何降低用戶取關(guān)成功幾率的？
116.「中國農(nóng)業(yè)銀行」啟動頁-連貫性的故事場景
117.「訊飛輸入法」詞窮-空格聯(lián)想關(guān)鍵字助力完善
118.「微信」群內(nèi)發(fā)專屬紅包-沒有“中間商”
119.「網(wǎng)易云音樂」不會放過任何展示品牌的機(jī)會
120.「淘寶」引流無處不在-訂單列表夾帶常購好貨
106.「微信」公眾號取消關(guān)注-潛在的門檻
產(chǎn)品體驗(yàn)：
微信公眾號的取消關(guān)注在改版后更換了樣式，由之前非常明顯的按鈕弱化為小頭像圖標(biāo)，并置于右上角。
設(shè)計(jì)思考：
我們經(jīng)常穿行于各大微信公眾號之間，其目的主要在于閱覽各種軟文，一方面增加我們對自身、周邊事物的了解，另一方面提高自己的眼界?；诠娞枖?shù)量的龐大，其內(nèi)容、質(zhì)量也是參差不齊，總會挑選一些自認(rèn)為質(zhì)量不錯的公眾號進(jìn)行關(guān)注，根據(jù)時間流逝，對公眾號的類型及質(zhì)量要求在不停的變化，取消關(guān)注、來回切換也是常有的事?？勺詮纳洗胃轮?，很多用戶在公眾號歷史消息頁面找不到取消關(guān)注的入口了。
微信公眾號之前在歷史消息頁面有一個醒目“不再關(guān)注”按鈕，隨時清晰可見。改版之后，將“不再關(guān)注”按鈕換成了一個非常小的“頭像圖標(biāo)”，調(diào)整到了右上角位置，圖標(biāo)的樣式且與取消關(guān)注毫無關(guān)聯(lián)，如果不通過試錯操作則很難發(fā)現(xiàn)。微信這樣調(diào)整的目的主要在于增加用戶取消操作的成本，也是為了保護(hù)公眾號的利益。公眾號只是平臺推出的一個版塊或子產(chǎn)品，其真實(shí)運(yùn)作起來，作者、讀者缺一不可，增加取消關(guān)注的難度，總會有部分用戶知難而退或延時取關(guān)，很大程度上降低了公眾號的掉粉率，隨著掉粉率的降低或穩(wěn)定，有一種對原創(chuàng)作者的內(nèi)容肯定、認(rèn)可的錯覺，潛在的鼓勵作者創(chuàng)作出質(zhì)量更高的內(nèi)容，同時可能會吸引更多的用戶關(guān)注，如此良性循環(huán)下去，三方共贏。弱化取消關(guān)注入口，看似很小的改動，或許有用戶會抱怨，但對產(chǎn)品的穩(wěn)定和提升起到的很大的作用。
107.「高德地圖」視覺障礙模式-色盲/色弱用戶的福星
產(chǎn)品體驗(yàn)：
在高德地圖的地圖設(shè)置中開啟視覺障礙模式，道路交通擁堵情況的色彩提示，會替換成一套色盲/色弱用戶的專屬配色，幫助其更輕松的使用地圖導(dǎo)航。
設(shè)計(jì)思考：
首先，我們在考駕照之前，都會被要求去對應(yīng)機(jī)構(gòu)體檢，其中就包括視覺檢查，如果是色盲/色弱用戶則很難按照正常流程去考駕照，但不排除原本沒有問題、在拿到駕照之后，逐漸出現(xiàn)色盲/色弱的情況（例如：曾經(jīng)有人眼睛里進(jìn)了一只蚊子，揉過之后就出現(xiàn)視覺障礙），但依然有自駕出行的需求。除此之外，還有部分并無自駕需求的色盲/色弱用戶，會查看地圖導(dǎo)航，根據(jù)實(shí)際路況來選擇出行工具，此時這類人群對常規(guī)的路況色彩提示并不能準(zhǔn)確的辨識，因而陷入不知所措的狀態(tài)。
高德地圖增加了視覺障礙功能，在設(shè)置中開啟后，路況的顏色提示會變成色盲/色弱用戶的專屬配色，其設(shè)置中有色彩對應(yīng)的代表說明，便于此類型用戶能輕松掌握路況信息。高德的這種思考方式是讓任何人在任何情況下都能平等地、方便地、無障礙地使用地圖導(dǎo)航，不得不說，產(chǎn)品團(tuán)隊(duì)真的是有心了。
108.「小宇宙」紙杯電話-滿滿的回憶殺
產(chǎn)品體驗(yàn)：
小宇宙APP在網(wǎng)絡(luò)出現(xiàn)故障時，會以“紙杯電話”的樣式作為缺省頁插圖，提醒網(wǎng)絡(luò)壞了，喚醒兒時記憶。
設(shè)計(jì)思考：
現(xiàn)在的孩童時光，大多數(shù)的業(yè)余時間除了學(xué)習(xí)之外，就是在電視機(jī)前看動畫片或玩手機(jī)。但在80后那個沒有網(wǎng)絡(luò)的年代，信息都是通過跑腿或信件傳遞，為了豐富自己的兒童時光，其中也自制了一些印象較為深刻的簡易玩具，包括最早的手機(jī)“紙杯電話”。把兩個紙杯底部分別扎一個小孔，用毛線從小孔穿過連接起來并拉直，一人說話一人聽，就能完成“打電話”的過程。
小宇宙APP在網(wǎng)絡(luò)出現(xiàn)故障時，就利用“紙杯電話”的插圖樣式作為斷網(wǎng)缺省頁，首先能明確告知用戶當(dāng)前頁面的信息狀態(tài)出現(xiàn)了什么問題，并引導(dǎo)用戶進(jìn)行解決操作；其次，利用故障定位出該狀態(tài)的格調(diào)和氣氛，與用戶建立情感連接，通過情感化的方式喚起用戶的童年記憶，此時，不管頁面出了什么問題，都可以加深對產(chǎn)品的印象，為用戶的再次訪問埋下伏筆。
109.「叮咚買菜」猜你喜歡-“找相似”讓你更加喜歡
產(chǎn)品體驗(yàn)：
叮咚買菜首頁“猜你喜歡”版塊，如果對當(dāng)前商品不滿意，長按彈出找相似入口，進(jìn)入即可瀏覽與之相似的商品。
設(shè)計(jì)思考：
平時我們在沒事的時候，拿起手機(jī)在某些電商平臺，一逛就是一個小時，眼花繚亂的看著各種商品，即使不準(zhǔn)備買，也是在下單的邊緣瘋狂試探。基于用戶的瀏覽記錄、時長、頻率，直接提高了“猜你喜歡”內(nèi)容的精準(zhǔn)度，根據(jù)用戶心理特征做出背后策略并在后續(xù)不同程度的再次呈現(xiàn)給用戶，即有幾率再次促進(jìn)轉(zhuǎn)化。
叮咚買菜同樣在首頁推出了猜你喜歡版塊，但如何利用用戶心理把可轉(zhuǎn)化率提升到最高呢？其實(shí)，不難看出，用戶對部分商品的多次瀏覽，除了少部分只是路過外，其主要原因還是在價格（經(jīng)濟(jì)許可）、口碑、品牌或主圖/詳情的誘惑力上產(chǎn)生顧慮，如果在變化不大的情況下多次推薦給用戶，作用微乎其微。
長按叮咚買菜“猜你喜歡”的商品區(qū)域，從彈出的找相似入口進(jìn)入，系統(tǒng)會從商品庫匹配類似的商品或相同的商品在不同的店鋪呈現(xiàn)給用戶，其價格、口碑等這些可能會影響用戶顧慮的條件都會有不同程度的變化，以最大力度改變用戶的想法，當(dāng)解決了用戶的部分顧慮后，有可能再次勾起下單的欲望，間接促成用于下單提升轉(zhuǎn)化。
110.「高德地圖」減少思考時間的AR實(shí)景導(dǎo)航
產(chǎn)品體驗(yàn)：
使用高德地圖導(dǎo)航時，將手機(jī)與地面形成垂直角度，界面會變成AR實(shí)景導(dǎo)航，相比普通導(dǎo)航更真實(shí)，各種指示和預(yù)警更加清晰可見，手機(jī)置于水平角度后，界面還原。
設(shè)計(jì)思考：
出行時，尤其是自駕，地圖應(yīng)用就是我們最好的向?qū)?，但它畢竟是一個軟件，并非萬能。比如：遇到錯綜復(fù)雜的道路且有多條進(jìn)/出口時，一不留神，駛錯車道就在轉(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)航時，手機(jī)呈垂直角度即可自動切換AR實(shí)景導(dǎo)航，非常直觀的體驗(yàn)。傳統(tǒng)導(dǎo)航通常都是經(jīng)過語音或圖像的傳達(dá)，接受到信息后用戶會思考幾秒，很容易出錯且存在安全隱患，而AR導(dǎo)航利用攝像頭將前方道路的真實(shí)場景實(shí)時捕捉下來，再結(jié)合汽車當(dāng)前定位、地圖導(dǎo)航信息以及場景 AI 識別，生成虛擬的導(dǎo)航指引并疊加到真實(shí)道路上，創(chuàng)建出更貼近駕駛者真實(shí)視野的導(dǎo)航畫面，箭頭會無縫貼合在于真實(shí)場景，只需要跟著箭頭走，就能進(jìn)入正確道路，相比傳統(tǒng)地圖導(dǎo)航更加精細(xì)，提供了更加安全、舒適的駕駛體驗(yàn)。
111.「搜狗輸入法」復(fù)雜/生僻字-貼心的拼音合并功能
產(chǎn)品體驗(yàn)：
使用搜狗輸入法，當(dāng)遇到生僻/復(fù)雜文字不會打拼音時，不妨試試將文字的偏旁部首拆開分別拼音，或許有你想要的結(jié)果。
設(shè)計(jì)思考：
中華文明五千年歷史，從甲骨文算起，漢字已經(jīng)3000多年的歷史，雖然我們天天接觸漢字，但基于目前科技普遍，電子設(shè)備多的數(shù)不勝數(shù)，很多情況下直接減少了我們對漢字的接觸和溫故，然而有時候打字卻遇到部分比較復(fù)雜的漢字突然不知道怎么拼，尤其是工作所需或需要緊急回復(fù)時，“認(rèn)字認(rèn)一半”可能無法快速解決當(dāng)前問題，到底是感慨中華文化博大精深、還是尷尬呢？
使用搜狗輸入法打字，如遇到較為復(fù)雜/生僻字不會打拼音時，可直接拆分其偏旁部首分別拼音，在右側(cè)即會出現(xiàn)拼音疊加的單個文字，再配合“認(rèn)字認(rèn)一半”方法，雖然不能解決所有類似的需求，但能滿足大部分用戶所碰到的問題，減少因不會拼音帶來的困擾，兼顧了特殊用戶對打字使用體驗(yàn)的關(guān)照，貼心的拼音合并方式操作簡單，這是一個非常實(shí)用但容易被忽視的好功能。
112.「得物」3D空間-720度無死角瀏覽商品
產(chǎn)品體驗(yàn)：
在得物APP瀏覽商品時，可從詳情頁主圖進(jìn)入3D空間，通過上下、前后左右拖動360度無死角預(yù)覽、放大縮小讓細(xì)節(jié)清晰可見，使之購買前對商品更加了解。
設(shè)計(jì)思考：
得物（毒）APP名字雖然沒那么響亮，但作為定向的電商平臺，在自己所在的圈子里還是小有名氣，如果你是喜歡潮流、運(yùn)動的人群，那一定知道“毒”，即現(xiàn)在的得物。此App聚集了一大批熱愛球鞋、潮品穿搭和潮流文化的愛好者，其平臺商品上架的標(biāo)準(zhǔn)也極為嚴(yán)格，其用戶體驗(yàn)更是不必多說。
得物APP的3D空間算是用戶體驗(yàn)非常好的一個黑科技了，通過詳情頁主圖的3D空間進(jìn)入，在這里，部分商品能進(jìn)行可操控式自轉(zhuǎn)，用戶通過翻轉(zhuǎn)、放大、縮小等操作來查看商品的材質(zhì)、圖案、紋理、細(xì)節(jié)等，真正實(shí)現(xiàn)了可交互式互動，堪稱360°x2無死角預(yù)覽。得物利用3D空間黑科技為用戶帶來更為便利、有趣、流暢的購物體驗(yàn)，打造了真正科技感的沉浸式購物。
113.「馬蜂窩」趣味且炫酷的連擊點(diǎn)贊
產(chǎn)品體驗(yàn)：
在馬蜂窩的游記中，對網(wǎng)友們曬出的攻略、心得贊善有加時，多次點(diǎn)擊左下角的“頂”，頁面中會以“喜歡”的手勢圖標(biāo)從底部直奔頭像，并用“連擊”樣式的數(shù)字累計(jì)，以及代表作者心情的回應(yīng)。
設(shè)計(jì)思考：
《羞羞的鐵拳》電影中有一段讓我印象非常深刻，記著馬小在“鐵鍋燉自己”時說了聲：老鐵們禮物刷起來，666走起來，當(dāng)時被滿屏覆蓋的666應(yīng)該讓很多屏幕的觀者都興奮不已?，F(xiàn)如今，各種產(chǎn)品的線上內(nèi)容也都加入了喜歡、點(diǎn)贊、推薦等操作，樣式和原理基本大同小異，大部分都是通過心/星型圖標(biāo)，點(diǎn)擊選中、再次點(diǎn)擊取消，有點(diǎn)復(fù)選框的感覺，其實(shí)可以根據(jù)產(chǎn)品的屬性及受眾用戶的性格延伸出多種樣式，比如情感、個性、趣味等，以此給用戶帶去不同的心理感受。
馬蜂窩游記詳情頁左下角的頂（又名：點(diǎn)贊）存在連續(xù)點(diǎn)擊時，會出現(xiàn)一連串“喜歡”的手勢圖標(biāo)并從底部快速移動至作者頭像，頭像且以閃動的效果+文案做出回應(yīng)，配合數(shù)字累加和抖動效果，著實(shí)炫酷，算是狠狠的秀了一把，有種直播禮物滿天飛的既視感。我們都知道，點(diǎn)贊不光是對作者的認(rèn)可，其不同的視覺效果還能表達(dá)自己對作者的贊美程度和內(nèi)心的滿足感。另外，動態(tài)視覺效果大大提高了趣味性，就一個點(diǎn)贊功能，活生生整出了打游戲砍怪時的連擊效果，利用非常炫酷有趣樣式，提升用戶對產(chǎn)品的滿意度。
114.「真快樂」中斷登錄流程-最后的彈窗挽留
產(chǎn)品體驗(yàn)：
真快樂使用第三方應(yīng)用登錄授權(quán)成功后，需要綁定手機(jī)號碼，如果此時返回，系統(tǒng)通過彈窗配合警告性質(zhì)的文案對用戶流失前做出最后一步挽留。
設(shè)計(jì)思考：
登錄是用戶轉(zhuǎn)化最關(guān)鍵的一環(huán)，沒有用戶量再好的產(chǎn)品也是空談，因?yàn)檫@涉及產(chǎn)品的用戶量、使用粘性及企業(yè)的利益，所以有很多產(chǎn)品想盡一切辦法促使用戶注冊，哪怕是“僵尸”也在所不惜，一旦用戶注冊成功，平臺就會抓取用戶的隱私信息、操作數(shù)據(jù)等，便于日后對癥下藥用來促進(jìn)用戶轉(zhuǎn)化和喚醒“僵尸”用戶。這個隨時都有可能把用戶阻擋在門外的登錄門檻，是無法越過的，只能通過不同的手段來提升注冊量。
真快樂APP使用第三方賬號授權(quán)成功后，用戶若在綁定手機(jī)號碼環(huán)節(jié)操作退出/返回時，系統(tǒng)會利用彈窗對用戶做出操作警告，提醒用戶退出頁面可能帶來的影響和后果（無法購物），對用戶的返回流程制造難度，讓用戶思考 當(dāng)前的退出決策是否正確，畢竟相對于‘收獲’來說，‘損失’更讓人在乎某事物。針對此種情況，必定有極少部分用戶難而退，從而繼續(xù)完成登錄注冊的流程，一旦用戶登錄，就準(zhǔn)備接受平臺層出不窮的轉(zhuǎn)化手段吧。
（有人會說，大家都會反感這種阻擾操作流程的做法，但站在平臺的角度所設(shè)計(jì)，你都要離開我了，可能會是永久，我還在乎這個彈窗會對你造成反感嗎，畢竟你不回來，總會有其他人被我拉回來）
115.「網(wǎng)易云音樂」是如何降低用戶取關(guān)成功幾率的？
產(chǎn)品體驗(yàn)：
在網(wǎng)易云音樂取消關(guān)注其他用戶時，系統(tǒng)通過彈窗提醒關(guān)注時長、取消后的損失，并刻意混淆主次操作按鈕提高用戶操作失誤的可能性，以此達(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)致流失，而損失最大的一定是平臺。很簡單的道理，你辛辛苦苦在抖音埋頭苦干了幾個月，結(jié)果發(fā)現(xiàn)自己的粉絲只有兩位數(shù)，要么更加努力苦逼支撐，要么棄坑，所以說粉絲就是創(chuàng)作者最大的精神支柱，一點(diǎn)都不為過。
網(wǎng)易云音樂APP用戶之間的相互關(guān)注，利用社交的因素將用戶進(jìn)行潛在的捆綁，以提高用戶的使用粘性，針對脫粉的情況做了一定的預(yù)防措施。當(dāng)用戶存在取消關(guān)注（脫粉）行為時，系統(tǒng)通過彈窗挽留，利用關(guān)注的天數(shù)提醒取消關(guān)注后將重新計(jì)算的損失來增強(qiáng)說服力，促使用戶放棄脫粉行為。另外，用戶取消關(guān)注時，根據(jù)行為召喚主行動按鈕應(yīng)為取消，然而此彈窗則弱化取消、強(qiáng)化繼續(xù)關(guān)注按鈕來達(dá)到混淆主次操作的目的，利用大家對于一些習(xí)慣性的操作完全就是下意識、且無需思考的慣性思維，引導(dǎo)其操作主按鈕，用戶誤以為取關(guān)成功，平臺則潛在的為其他用戶留下了粉絲，從而為后續(xù)的互惠互利得到了保障。如果用戶發(fā)現(xiàn)被誤導(dǎo)，可能出現(xiàn)再次脫粉動機(jī)，但勢必要付出更多的操作/時間成本，相關(guān)數(shù)據(jù)表明，每提升一次用戶的成本，用戶放棄操作的可能性就越大。
116.「中國農(nóng)業(yè)銀行」啟動頁-連貫性的故事場景
產(chǎn)品體驗(yàn)：
初次進(jìn)入農(nóng)業(yè)銀行，系統(tǒng)將多張圖片拼合在一起、制作出一個連貫的故事場景作為新手引導(dǎo)頁，左右勻速滑動，就像看著一整張圖片或看小視頻的感覺。
設(shè)計(jì)思考：
不知大家是否還記得2017年的“百雀羚1931”廣告，上線當(dāng)天的瀏覽量就破410萬，且一天時間就為公眾號帶來5萬粉絲。其設(shè)計(jì)風(fēng)格上保持著經(jīng)典的傳統(tǒng)，讓人們有難忘回憶的感覺，結(jié)合講故事的形式，從1931年百雀羚成立開始，用一張長圖逐漸穿破時間線，形成一個完成的故事場景，雖然后來針對設(shè)計(jì)和營銷方面存在很大爭議，但這則廣告在上半年一直都是翹楚的存在，并不是沒有原因。
農(nóng)業(yè)銀行的引導(dǎo)頁結(jié)合多張圖片形成一個完整的故事場景，用戶左右勻速滑動時，就像在看影片一樣。連貫性的故事場景能用戶帶來共鳴，就比如用戶在看這則啟動頁時，有些場景總是好像在那里見過，而等我們看到最后一個場景時，直接拍手叫好，這就是共鳴。農(nóng)業(yè)銀行通過產(chǎn)生的共鳴抓住用戶這一剎那的感覺，給用戶留下深刻的印象，從而提升看到它的用戶衍生出想要傳播的欲望。
117.「訊飛輸入法」詞窮-空格聯(lián)想關(guān)鍵詞助力完善
產(chǎn)品體驗(yàn)：
在訊飛輸入法的輸入設(shè)置中，開啟“空格提交聯(lián)想詞”功能打字時，點(diǎn)擊空格鍵后，系統(tǒng)會根據(jù)已錄入的內(nèi)容聯(lián)想，自動匹配較為連貫的文字組合成完整的句子。
設(shè)計(jì)思考：
因?yàn)檫M(jìn)入社會已久，書本知識基本與大腦分離，很多時候在和朋友交流時想說幾句漂亮話，可苦于表達(dá)能力有限，只能支支吾吾這個......那個......的糊弄過去。線下的即時交流沒辦法解決，那么到了線上就好說了，例如在社交軟件聊天時，因不受時間的限制，可利用各種智能輔助組織語言，實(shí)在不行百度復(fù)制粘貼，分分鐘給對方一種“江南才子”的趕腳，就連吵架都能不帶一個臟字兒的分分鐘把對方嚇“尿”。不過話說回來，我們在打字聊天時，不管出于什么目的，好的文采（語言組織）的確能給對方不一樣的感覺，提升自己的形象。
訊飛輸入法的空格聯(lián)想功能，根據(jù)已錄入的內(nèi)容，自動匹配文字并組合成連貫的句子，當(dāng)用戶在卡殼或詞窮時，不妨多按幾次空格鍵，會有意想不到的結(jié)果，或許能夠解決不時之需。如果行之有效，不僅能減少用戶去其他地方搜尋的次數(shù)，還 能滿足用戶的虛榮心，以獲得他人的認(rèn)同感， 從而得到一種榮耀感和心理上的滿足。
118.「微信」群內(nèi)發(fā)專屬紅包-沒有“中間商”
產(chǎn)品體驗(yàn)：
如果在微信群需要給指定的成員發(fā)紅包，點(diǎn)擊左上角的類型選擇“專屬紅包”，紅包發(fā)出后只有被指定的人才能成功領(lǐng)取，能有效防止被冒領(lǐng)的可能性。
設(shè)計(jì)思考：
大部分微信用戶都存在多個群聊，因?yàn)橛脩袅康凝嫶?，我們不可能將群里的所有人都加為好友，但因特殊原因需要把紅包發(fā)給群里的指定成員，當(dāng)紅包發(fā)出后發(fā)現(xiàn)被冒領(lǐng)了，經(jīng)過自己的一番游說，冒領(lǐng)的用戶（A-B-C-......N）輪番多次退會，最終才到指定的用戶手中，真心不容易啊，收個紅包，簡直比“20世紀(jì)的郵政”還要慢。
還有很多用戶不知道微信的專屬紅包功能，其實(shí)早已解決了這個問題。通過發(fā)專屬紅包，在微信群里快速的將紅包發(fā)給指定的群員，有效避免被冒領(lǐng)而耽誤太多時間和不必要的溝通，還能防止陌生人領(lǐng)取紅包后立即退群導(dǎo)致金額無法追回，給自己帶來經(jīng)濟(jì)損失。
119.「網(wǎng)易云音樂」不會放過任何展示品牌的機(jī)會
產(chǎn)品體驗(yàn)：
下載網(wǎng)易云音樂后，首次進(jìn)入，直接以動態(tài)的宣傳語和logo代替引導(dǎo)頁，用最大化的力度進(jìn)行品牌傳播。
設(shè)計(jì)思考：
曾有人斷言：”即使一把火把可口可樂的所有資產(chǎn)燒光，可口可樂憑著其商標(biāo)，就能重新起來”，可想而知，logo就是產(chǎn)品形象最直接的代言人。在日常經(jīng)營活動、廣告宣傳、文化建設(shè)、對外交流中，是必不可少的元素，通過logo在有限的空間內(nèi)準(zhǔn)確傳達(dá)出品牌的特點(diǎn)，在用戶心中留下深刻的記憶，每當(dāng)看到logo時，自然的產(chǎn)生聯(lián)想，從而對企業(yè)產(chǎn)生認(rèn)同，所以產(chǎn)品不會放過任何一個展示logo的機(jī)會。
網(wǎng)易云音樂則直接將logo加宣傳語代替用戶首次打開時的引導(dǎo)頁并以動態(tài)的方式呈現(xiàn)，是一個很好的植入品牌的觸點(diǎn)。其主要目的是利用logo強(qiáng)化品牌感，傳達(dá)品牌定位、格調(diào)和氣氛并與用戶建立情感連接，便于用戶進(jìn)入產(chǎn)品的第一印象就知道當(dāng)前使用的是什么產(chǎn)品；其次，直接使用具有品牌調(diào)性色彩（網(wǎng)易紅），能強(qiáng)化品牌在用心中的認(rèn)知度，提高記憶印象；再者，動態(tài)方式讓logo的表現(xiàn)更為柔和，更具有親和力，且動態(tài)比靜態(tài)更加吸引眼球，增加用戶的視覺關(guān)注度，還可以提升界面的趣味性。
120.「淘寶」引流無處不在-訂單列表夾帶常購好貨
產(chǎn)品體驗(yàn)：
在淘寶的全部訂單中查看記錄時，系統(tǒng)會在第二個訂單下方推送曾經(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)想法的商品，都不遺余力的無限次推薦給用戶，什么猜你喜歡、你可能想買等都是如出一轍，只要有可能，平臺會想盡一切辦法、用盡一切手段促進(jìn)用戶二次轉(zhuǎn)化。
曾經(jīng)有人說：在淘寶看了剃須刀，結(jié)果不管是抖音還是支付寶，走到哪里都是剃須刀的影子，手機(jī)頂部通知欄的推送也是大量的剃須刀，就連短信都沒有放過，還收到了剃須刀商家的電話，“求求你放過我吧，我特么錯了還不行嗎？”。一個小小的剃須刀尚且如此，那如果是···商品呢，可能連最基本的購物隱私也暴露在廣眾之下了。
淘寶在商品推送這方面做的可謂是無人能及。在消費(fèi)者的訂單列表中，第一屏的最下方也變成了推送廣告位，將用戶最近購買過的商品二次呈現(xiàn)，比如紙巾、零食等日常消耗類的商品。進(jìn)入訂單列表，系統(tǒng)通過行為預(yù)判猜測用戶可能尋找買過的商品會再次下單的可能性，便提前將部分商品在此處推薦出來以供用戶瀏覽，如有類似需求，則促成用戶再次下單。在推薦的商品中，也許是曾經(jīng)買過但被遺忘的商品，此時呈現(xiàn)可能會引起用戶的注意從而產(chǎn)生新的需求，繼而提升下單轉(zhuǎn)化率。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：大漠飛鷹CYSJ 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ì)公司
如何讓自己的產(chǎn)品在保證基本的可用性和易用性的同時，還能讓界面看起來柔和、更富有親和力？一個產(chǎn)品能留住用戶的雖然是內(nèi)容本身的質(zhì)量與吸引力，但一個小小的細(xì)節(jié)卻能夠阻止用戶的流失，成為內(nèi)容轉(zhuǎn)化的最后一道防線，讓人眼前一亮，值得借鑒。
076.「百度地圖」出行前的“極端”天氣預(yù)報(bào)
077.「搜狗輸入法」“跨界”復(fù)制/粘貼
078.「支付寶」螞蟻森林/莊園-模擬現(xiàn)實(shí)世界的自然規(guī)律
079.「躺平」趣味化的“擊掌”點(diǎn)贊
080.「QQ音樂」導(dǎo)入外部歌單-不同的設(shè)備/賬號歌單無縫對接
081.「微信」簡便且高效的圖片翻譯功能
082.「橙」不一樣的的登錄方式
083.「高德地圖」桌面一鍵導(dǎo)航-出行更高效
084.「愛奇藝閱讀」性別選擇-更明確的指引和提示
085.「餓了么」合適的時間、合適的提醒
086.「搜狗輸入法」教你少打字、多開掛
087.「美團(tuán)」垃圾分類-解決餐后垃圾分類之憂
088.「優(yōu)酷」個性化彈幕設(shè)置-看劇調(diào)侃兩不誤
089.「隨便走」AR導(dǎo)航-“傻瓜”式操作，老少皆宜
090.「微信讀書」模擬現(xiàn)實(shí)的行為動作
076.「百度地圖」出行前的“極端”天氣預(yù)報(bào)
產(chǎn)品體驗(yàn)：
使用百度地圖，導(dǎo)航路線規(guī)劃后，會出現(xiàn)當(dāng)日的天氣提醒，點(diǎn)擊進(jìn)入即可查看每個時段的天氣預(yù)報(bào)。
設(shè)計(jì)思考：
“賭博看運(yùn)氣，出行看天氣”，任何時候，大家如果優(yōu)先知道天氣情況就可以提前做好準(zhǔn)備，這對人們的生活方便起到很大的作用。尤其是出行，天氣的變化是影響我們是否攜帶雨傘、交通工具選擇、保暖問題的重要因素，所以提前預(yù)知天氣的重要性可想而知。
使用百度地圖APP，導(dǎo)航路線規(guī)劃后，出行方式的下方會提示最近可能影響到出行問題的天氣變化，便于用戶選擇更合理的出行方式及交通工具，避免受到惡劣天氣變化的影響。還可以通過點(diǎn)擊進(jìn)入，查看每個小時的天氣詳情，對于時間不是很敏感的用戶來說，為了錯開惡劣的天氣，提前或延遲出行也是一種不錯的選擇。
077.「搜狗輸入法」“跨界”復(fù)制/粘貼
產(chǎn)品體驗(yàn)：
電腦和移動端都使用搜狗輸入法，且在同一個賬號登錄的情況下，電腦端出現(xiàn)文字復(fù)制的操作后，可在移動端設(shè)備任何位置的輸入框內(nèi)直接粘貼，非常便捷。
設(shè)計(jì)思考：
輸入法給大部分用戶的第一感覺就是用來輸入文字的，哪個好用用哪個，一旦習(xí)慣了使用某個輸入法，基本就成了忠實(shí)用戶，不會隨意去改變。不過有時候輸入法只是輔助作用，并不需要直接使用，比如：我們在電腦網(wǎng)頁看到自己喜歡的文案語錄時，想發(fā)個朋友圈，就需要先復(fù)制，再用電腦端微信發(fā)到手機(jī)微信，最后從手機(jī)微信復(fù)制再到朋友圈粘貼，雖然很麻煩，用戶還是可以接受的，不然通過自己碼字就會浪費(fèi)大量的時間。
搜狗輸入法的黑科技一直都很多，比如圖片英文翻譯、智能助手、文字掃描提取等，都是非常實(shí)用的功能。最近發(fā)現(xiàn)了一個新的設(shè)計(jì)細(xì)節(jié)，讓人驚呼。當(dāng)電腦和手機(jī)端都使用搜狗輸入法且登錄同一個賬號時，在電腦端復(fù)制文字后，打開手機(jī)端任何輸入窗口，即可看到在電腦上復(fù)制的文字，直接粘貼即可，由被動輔助變?yōu)橹鲃訑z取，再也不用通過聊天工具發(fā)送到手機(jī)端進(jìn)行二次復(fù)制的繁瑣操作了，實(shí)現(xiàn)“跨界”復(fù)制/粘貼，非常方便?？梢钥闯鰣F(tuán)隊(duì)站在用戶體驗(yàn)的角度上，對于輸入法使用場景的串聯(lián)考慮是非常貼心的，不僅能再次俘獲一大批新用戶的芳心，也能提升老用戶的使用忠誠度。
078.「支付寶」螞蟻森林/莊園-模擬現(xiàn)實(shí)世界的自然規(guī)律
產(chǎn)品體驗(yàn)：
在支付寶螞蟻森林/莊園里，白天和夜晚分別使用了不同的場景，模擬現(xiàn)實(shí)世界中的自然規(guī)律，白天晴空萬里、且有陽光照射，夜晚滿天繁星、且有流星劃過，頗具真實(shí)感。
設(shè)計(jì)思考：
幾年前QQ牧場養(yǎng)殖、農(nóng)場偷菜，如今演變卻變成了支付寶的螞蟻莊園養(yǎng)小雞、森林偷能量，將以前的純游戲思維轉(zhuǎn)變成了如今的游戲+公益的形式，不僅滿足了用戶小游戲的需求，還能促進(jìn)公益事業(yè)的發(fā)展，同時用戶也會得到心理上的滿足和成就感。螞蟻森林/莊園小游戲?qū)τ脩舢a(chǎn)生的粘性除了其模式的新穎，也離不開產(chǎn)品團(tuán)隊(duì)日夜刻苦鉆研所提升的用戶體驗(yàn)。
螞蟻森林/莊園的視覺場景跟隨著白天、夜晚的環(huán)境變化，產(chǎn)品遵循現(xiàn)實(shí)世界慣例來呈現(xiàn)信息，更具真實(shí)感，便于用戶在使用中將現(xiàn)實(shí)中的體驗(yàn)不經(jīng)意間帶入到游戲場景，可使其更加投入，通過用戶的現(xiàn)有認(rèn)知，以促成情感化的體驗(yàn)，使產(chǎn)品更具親和力。
079.「躺平」趣味化的“擊掌”點(diǎn)贊
產(chǎn)品體驗(yàn)：
在躺平APP對其他用戶的發(fā)表的動態(tài)推薦時，使用了擊掌圖標(biāo)，且有光彩線條圍繞著掌心向四周擴(kuò)散的動效樣式，趣味性十足。
設(shè)計(jì)思考：
推薦是對其事件/事務(wù)認(rèn)可的一種表達(dá)行為，最早可追溯到上古時代的堯舜禹時期，那時候如果對某件事或人，高度認(rèn)可時就使用鼓掌（慢速且有節(jié)奏）的方式來表達(dá)；到后面慢慢演變成了簡單的一個字“彩”；再到如今皆可用鼓掌、豎大拇指或直接言語...表達(dá)?；诨ヂ?lián)網(wǎng)的發(fā)達(dá)，為了讓更多人發(fā)現(xiàn)其內(nèi)容資源的優(yōu)質(zhì)性，80%以上直接沿用了豎大拇指樣式來表達(dá)對內(nèi)容的認(rèn)可及贊許，即使有區(qū)別于其他產(chǎn)品，也是在局部或動效樣式上做出一點(diǎn)改變。
躺平APP的點(diǎn)贊樣式較為新穎，使用了擊掌的圖標(biāo)，并且使用了光彩線條圍繞掌心向四周擴(kuò)散的動效樣式，相比豎起大拇指則更加強(qiáng)烈，意味著喝彩，表達(dá)了對內(nèi)容的高度認(rèn)可，相較于同質(zhì)化嚴(yán)重的情況下作出了創(chuàng)新， 在過渡的時間差中，進(jìn)行了趣味化的表達(dá)，更具視覺沖擊力。
（“擊掌”的點(diǎn)贊方式適合用于類似躺平、動漫、B站等二次元或個性化的產(chǎn)品中，如果用于工具、新聞、電商等類型產(chǎn)品，可能會對用戶產(chǎn)生干擾，慎用）
080.「QQ音樂」導(dǎo)入外部歌單-不同的設(shè)備/賬號歌單無縫對接
產(chǎn)品體驗(yàn)：
在QQ音樂我的頁面，使用“導(dǎo)入外部歌單”功能，根據(jù)提示，即可把其他音樂應(yīng)用里歌曲添加到QQ音樂歌單。
設(shè)計(jì)思考：
現(xiàn)在聽歌早已不像以前，一張內(nèi)存卡或一根數(shù)據(jù)線就可以把手機(jī)里的歌曲轉(zhuǎn)移它處?；谌藗兩钏降奶岣?，數(shù)據(jù)流量套餐相比以前更是翻了百倍不止，WiFi基本人手普及，所以大家更傾向于在線聽歌，無需下載（除非深山老林或地洞沒有信號）占用手機(jī)內(nèi)存，創(chuàng)建一個歌單，把自己喜歡的收藏起來，即時聽歌，非常方便，如果沒有特別的情況，成為了一款音樂應(yīng)用的忠實(shí)用戶后，基本不會頻繁轉(zhuǎn)移。
QQ音樂的導(dǎo)入外部歌單功能，可將其他音樂APP的歌單添加到QQ音樂自己的歌單里。對于導(dǎo)入外部歌曲，很多用戶沒有什么概念，感覺自己用不上，別忘了蝦米音樂“尸骨未寒”，很多事情不是沒有可能發(fā)生，當(dāng)一旦需要時，這個功能就是“救命稻草”，可以想象，如果通過手動把以前的幾百首歌曲一首一首的添加到歌單，不知道會不會“抽筋”。除此之外，還可以將歌單在朋友之間相互分享添加，這也是一種不錯的音樂交友方式，實(shí)現(xiàn)不同設(shè)備、賬號的音樂歌單無縫對接。
081.「微信」簡便且高效的圖片翻譯功能
產(chǎn)品體驗(yàn)：
在微信的聊天對話框中打開英文圖片，點(diǎn)擊下方的翻譯功能按鈕，即可翻譯圖片上的外文，并以中文顯示。
設(shè)計(jì)思考：
在我們的生活中，有時候多多少會遇到一些英文，比如進(jìn)口食品包裝、藥物說明、護(hù)膚品等，其中就有一部分是純英文說明，無論自己多么博學(xué)多才，但不見得都能理解英文。記得之前有一次，我自己的電腦藍(lán)屏，出現(xiàn)的全是英文，雖然自己也是一直提倡用互聯(lián)網(wǎng)解決問題，且也有一些拍譯軟件，但一想著需要下載注冊，沒準(zhǔn)兒還要先看廣告或收費(fèi)，且天生對英文有一種與生俱來陌生感，還未開始便放棄了，于是成了伸手黨，去請求別人幫助。
微信的圖片翻譯功能就是專為解決這一問題而生。通過在對話框中點(diǎn)擊圖片直接翻譯，看到一道綠色的光由上而下掃過之后，圖片中的英文就變成了中文，著實(shí)方便，比起以前通過第三方或先提取圖片中的文字來翻譯，操作簡單且效率還提升了很多，可以說是一個非常實(shí)用的小功能。
082.「橙」不一樣的的登錄方式
產(chǎn)品體驗(yàn)：
在橙APP的登錄頁面，區(qū)別了常見的登錄界面樣式，使用對話聊天的方式按流程提示用戶完成登錄，界面流程方式新穎，濃厚的社交行業(yè)屬性。
設(shè)計(jì)思考：
在任何應(yīng)用中，要想有自己的“私密”領(lǐng)地，都繞不開登錄/注冊的流程，但凡手持智能手機(jī)又想玩的開的用戶，對登錄的流程是非常熟悉的，比如手機(jī)號+驗(yàn)證碼、一鍵登錄、第三方登錄，無外乎這幾種常規(guī)的登錄方式，如果想來點(diǎn)“刺激”的，無非就是加個logo、貼個插圖、來點(diǎn)動效等，見怪不怪了。
橙APP的登錄方式雖然同樣是手機(jī)號+驗(yàn)證碼登錄，但在流程樣式上卻非常新穎。鑒于應(yīng)用本身屬于社交行業(yè)，通過對話詢問的方式讓用戶按照流程輸入了手機(jī)號和驗(yàn)證碼，給用戶造成這不是對使用該APP設(shè)置門檻的錯覺，降低用戶的防備心理（很多產(chǎn)品用戶量的增長都被擋在了登錄之門外），讓用戶不知不覺在聊天過程中完成了登錄流程操作，其方式非常友好且登錄的過程是愉快的，同時還兼帶了濃濃的社交行業(yè)屬性，通過更直觀的登錄場景感受，拉近用戶跟產(chǎn)品之間的距離，使用戶的印象更加深刻。
083.「高德地圖」桌面一鍵導(dǎo)航-出行更高效
產(chǎn)品體驗(yàn)：
通過高德地圖的收藏夾，點(diǎn)擊收藏地址右側(cè)的功能菜單，在彈窗中將該地址“添加快捷導(dǎo)航到桌面”，后續(xù)就不用每次輸入常用的目的地了，直接通過桌面的圖標(biāo)入口即可一鍵導(dǎo)航。
設(shè)計(jì)思考：
對于在外的工作人員，導(dǎo)航算是手機(jī)必備的軟件，以前只是純粹的導(dǎo)航認(rèn)路，而隨著汽車量的增長，各地交通逐漸開始變得緊張，那么不管我們是否知道路線，駕駛之前都會習(xí)慣性打開地圖導(dǎo)航，隨時觀察路線擁堵情況來思考是否有更換更優(yōu)路線的需求，于是就按照慣例打開導(dǎo)航、錄入目的地、選擇路線......等一系列的常規(guī)操作，日復(fù)一日，似乎沒有覺得什么不妥。
高德地圖的桌面一鍵導(dǎo)航功能，為長期有駕駛需求的用戶提供了更為便捷的操作，將經(jīng)常使用的目的地添加的收藏夾，再添加到桌面以生成目的地導(dǎo)航便捷入口，有需要時桌面點(diǎn)擊即可，系統(tǒng)將自動規(guī)劃最優(yōu)路線，通過最便捷的方式一鍵導(dǎo)航，再也不用日復(fù)一日的重復(fù)之前的操作了。站在設(shè)計(jì)師的角度，在解決用戶需求時，操作越復(fù)雜、步驟越多，用戶的選擇條件、視覺負(fù)擔(dān)及時間成本就越多，出錯的情況也越多，故而用戶流失的可能性就越大。高德地圖通過一鍵導(dǎo)航簡化操作流程，通過合理的操作路徑，降低用戶時間成本，有效提升了使用頻率及粘性。
084.「愛奇藝閱讀」性別選擇-更明確的指引和提示
產(chǎn)品體驗(yàn)：
首次進(jìn)入愛奇藝閱讀APP，在性別選擇頁面中，男生和女生的頭像通過動畫的形式反復(fù)左右替換，用強(qiáng)視覺提醒的方式推動用戶進(jìn)行選擇操作，以便于提供更匹配的內(nèi)容資源。
設(shè)計(jì)思考：
大部分新聞或閱讀類型的APP，在用戶首次進(jìn)入應(yīng)用時，都有類似性別、行業(yè)、愛好之類的選擇，其主要目的是確定用戶的屬性，并提供更加匹配該屬性的內(nèi)容資源來提升用戶的滿意度。其流程也是千篇一律，以建議性的提醒用戶去做選擇，如無需要直接跳過即可。
愛奇藝閱讀首次即進(jìn)入APP時，以動態(tài)的性別頭像插圖反復(fù)左右切換的動效方式來提示有用戶選擇性別，相比常見的靜態(tài)按鈕直接顯示在那里會更加友好，不會過于生硬、冷冰冰，其動畫視覺樣式給予明確的指引和提示，更能引起用戶的注意，通過強(qiáng)烈的視覺提醒促使用戶更高效的完成當(dāng)前任務(wù)。
類似這種選擇且非強(qiáng)制性的前置頁面，很多設(shè)計(jì)師只是按部就班當(dāng)做一個流程，其實(shí)要想做好并非僅僅如此，可以通過趣味化、情感化、動效等方式增強(qiáng)用戶去選擇的欲望，以提高操作幾率，用戶一旦選擇，進(jìn)入應(yīng)用之后所看的內(nèi)容定然更符合自身的需求，也能提高用戶的滿意度，其滿意度的高低能決定用戶的去留及轉(zhuǎn)化，所以應(yīng)用中，用戶的前置選擇對產(chǎn)品的重要性可想而知。
085.「餓了么」合適的時間、合適的提醒
產(chǎn)品體驗(yàn)：
如果在餓了么有正在進(jìn)行中的訂單，再次進(jìn)入應(yīng)用時，右下角會提供一個查看的快捷入口，點(diǎn)擊可快速進(jìn)入該訂單查看進(jìn)度或騎手配送狀態(tài)。
設(shè)計(jì)思考：
隨著外賣行業(yè)的普及，給我們的生活帶來了很大的便利，尤其是一日三餐，我們只需花幾分鐘的時間在外賣平臺上下單，其他的事情交給商家和外賣小哥，很大程度上縮短了我們?nèi)サ晖局泻偷昀锏牡却龝r間，特別是對上班族來說，真的是太便利了。不過外賣平臺不像京東淘寶-人們可以無憂無慮的逛上幾個小時，通常都是目標(biāo)明確的用戶，在短時間內(nèi)完成自己的需求，要么下單、要么查看配送進(jìn)度。
如果在餓了么有訂單存在，再次進(jìn)入首頁，右下角會提示配送信息，點(diǎn)擊直接進(jìn)入查看詳情。從表面上看，右下角的入口雖然提供了快捷通道，但似乎不太友好，總是會遮擋部分內(nèi)容。其實(shí)并非如此，是因產(chǎn)品根據(jù)用戶的使用場景進(jìn)行行為預(yù)判而設(shè)計(jì)的快捷入口，在正常情況下，從下單到完結(jié)一般在30分鐘左右，如果用戶存在未完結(jié)訂單且在短時間內(nèi)再次進(jìn)入平臺，80%以上的用戶此時需求為查詢配送進(jìn)度，因此，右下角的進(jìn)度提示正是在合適的時間給予用戶合適的提醒，根據(jù)用戶的場景需求提供了最為便捷的解決方案，由此可見、利大于弊。
086.「搜狗輸入法」教你少打字、多開掛
產(chǎn)品體驗(yàn)：
進(jìn)入搜狗輸入法的設(shè)置中，可開啟開掛模式，里面的三連發(fā)、回聲、重要的事情說三遍分別對應(yīng)不同的效果。
設(shè)計(jì)思考：
搜狗輸入法在業(yè)界雖不敢說是最牛，但一定是數(shù)一數(shù)二的存在，發(fā)展至今，不僅僅是在滿足用戶的基本需求，還提供了讓用戶感到驚喜的功能，而現(xiàn)在更是研發(fā)了很多“黑科技”。
從搜狗輸入法左側(cè)的logo中進(jìn)入工具選項(xiàng)，在設(shè)置中即可選擇開掛模式（真實(shí)效果見上圖）。正如字面的意思，搜狗輸入法通過智能幫助用戶自動完成一些列的復(fù)制粘貼工作，瞬間讓打字刷屏的手速快到逆天，且操作簡單、輕松完成，方便用戶在開懟、賣萌、刷屏過程中直接碾壓對方的打字速度。開掛功能可謂是實(shí)用性與趣味性兼?zhèn)?，讓我們在日常中，面對不同的社交需求時帶來貼心的改變。
（凡事有一個度，刷屏如果沒有用對場景，可能會遭到對方的反感，事在人為。就像之前的“拍一拍”功能面世，卻有人在上班時間拿去拍領(lǐng)導(dǎo)、拍老板，后果就不說了，刀可切菜亦可傷人）
087.「美團(tuán)」垃圾分類-解決餐后垃圾分類之憂
產(chǎn)品體驗(yàn)：
美團(tuán)我的頁面，推薦工具的“垃圾分類”功能，能幫助我們進(jìn)行識別因外賣產(chǎn)出的垃圾類型，便于跟線下對應(yīng)的垃圾桶“對號入座”，減少不必要的垃圾混合而增加清潔工人的工作量。
設(shè)計(jì)思考：
外賣平臺的興起，給我們的生活帶來了很大的便利，同時也產(chǎn)生了一些危害，首當(dāng)其沖就是環(huán)境的污染。比如包裝盒、包裝袋、餐具等大量生活垃圾的產(chǎn)出，確實(shí)在外賣行業(yè)普及后，亂扔垃圾的情況跟隨著瘋速增長，雖然這些屬于個人情況，但也有部分用戶因不知垃圾如何分類，而將所有垃圾聚集在一起，然后就成清潔工的事情，最終無端增加垃圾分類的工作難度。
美團(tuán)的“垃圾分類”功能對衛(wèi)生環(huán)保方面增添了一份力量，當(dāng)用戶不知道自己產(chǎn)出的生活垃圾是何種類型時，可通過查看常見垃圾類型提示或搜索來確定類型，方便用戶按類型將垃圾丟入對應(yīng)的垃圾桶，解決餐后垃圾分類之憂，幫助養(yǎng)成良好的垃圾分類習(xí)慣，助力垃圾分類落地。還能消除用戶對“外賣垃圾分類麻煩”的顧慮，利用線上垃圾類型的普及，為綠色發(fā)展及環(huán)境保護(hù)貢獻(xiàn)自己的一份力量。
088.「優(yōu)酷」個性化彈幕設(shè)置-看劇互動兩不誤
產(chǎn)品體驗(yàn)：
在優(yōu)酷APP開著彈幕看片時，可通過彈幕設(shè)置調(diào)整字體的不透明度、行數(shù)、大小及速度來設(shè)定最適合自己樣式。
設(shè)計(jì)思考：
彈幕，用戶非常熟悉的一個詞，很多時候在看影片時，彈幕里面的內(nèi)容遠(yuǎn)遠(yuǎn)要比影片帶來的樂趣多很多，除了能從中獲得群眾的陪伴增加愉悅感外，還可以帶動視頻的觀看氛圍，讓活躍的用戶有了表達(dá)自我的動力和熱情。但對于“鍵盤俠”來說，僅僅在上方顯示的幾行彈幕根本無法滿足自己看影片互動及調(diào)侃的需求。
優(yōu)酷的彈幕設(shè)置中，可以根據(jù)自己的實(shí)際需求對彈幕字體大小、透明度、區(qū)域等參數(shù)進(jìn)行設(shè)置，針對喜好調(diào)侃互動的用戶來說，使用滿屏半透明度字體樣式的彈幕無疑是最好的選擇，互動看片兩不誤。
089.「隨便走」AR導(dǎo)航-“傻瓜”式操作，老少皆宜
產(chǎn)品體驗(yàn)：
使用隨便走導(dǎo)航，全程利用AR實(shí)景，通過3D立體形式的方向引導(dǎo)，幫助我們找到周邊的任何一個地方。
設(shè)計(jì)思考：
導(dǎo)航是我們出行必備的工具，目前高德和百度在該領(lǐng)域各自獨(dú)霸一方，看似很牛叉，但并不是萬能的。比如老人操作起來有一定的難度，經(jīng)常各種功能找不到還說不好用；又比如我們在陌生的重慶市，可能你從這南面1樓進(jìn)去，北面就在20樓，毫不夸張，如果通過常規(guī)的地圖導(dǎo)航去找人，我建議你最好吃個早餐再出去，等找到人之后就可以吃夜宵了；再比如......不比了。
隨便走APP是一款便捷式輕量導(dǎo)航工具，主打“讓生活樂趣一目了然”。利用“AR全息實(shí)景”的展現(xiàn)方式，改變了必須要有地圖的模式，對于我們找周邊的美食、酒店、公交、廁所、景點(diǎn)等需求，進(jìn)行穿透式3D立體指引，操作簡單，不管前、后、左、右、上、下都有非常明顯的視覺引導(dǎo)，只有你想不到，沒有它找不到，對于長期生活在大城市的用戶，交通復(fù)雜、道巷縱橫，很可能我就在你“隔壁”，你卻找不到我“老王”。此外，隨便走APP操作簡單，學(xué)習(xí)成本基本為零，對家中老人而言，也是一款不錯的導(dǎo)航工具。
090.「微信讀書」模擬現(xiàn)實(shí)的行為動作
產(chǎn)品體驗(yàn)：
在微信讀書的書架頁面，點(diǎn)擊書籍以及書本翻頁，都使模擬了現(xiàn)實(shí)生活中較為自然且真實(shí)的從書架拿書、及各個角度翻頁的效果。
設(shè)計(jì)思考：
看書APP雖然眾多，但真正能堅(jiān)持下去、養(yǎng)成習(xí)慣的沒有幾個人能做到，站在平臺的角度思考，畢竟書本的內(nèi)容是平臺無法修改的，除了提供優(yōu)質(zhì)的資源并給予方向指引外，其他便是通過設(shè)計(jì)體驗(yàn)來提升用戶的好感度了，
微信讀書APP從書架的拿書動作到書本的翻頁，都模擬了現(xiàn)實(shí)生活中用戶看書的行為動作，大家都知道，真正喜歡閱讀的人，是不會在意這些所謂的橫豎及交互效果的，但前面都說了，這種人畢竟在于少數(shù)。因?yàn)槭鼙姷牟顒e，模擬現(xiàn)實(shí)其最主要的作用就是為了吸引眼球，模擬用戶的實(shí)際行為，將其代入真實(shí)的情境中，使用戶對產(chǎn)品產(chǎn)生深刻的認(rèn)同感，則看著更加舒心，待用戶提升忠誠且養(yǎng)成看書習(xí)慣之后，這些作用就會慢慢變得微不足道。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：大漠飛鷹CYSJ 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ì)或者用戶研究經(jīng)常會借鑒心理學(xué)/社會學(xué)的研究方法去應(yīng)用成熟的理論模型甚至建立模型、去“玩概念”，但可惜的是咱這一行大多數(shù)設(shè)計(jì)師都沒有這樣的教育背景，就算是所謂的“大廠公眾號出品”，也難免會有思慮不周的時候（對，我說的就是ISUX那篇熵減思維）。
但是從另一方面來講，現(xiàn)在的這個越來越卷的行業(yè)形勢，也的確在不斷地要求交互設(shè)計(jì)師提升自己的思考維度，往更系統(tǒng)化、更結(jié)構(gòu)化的方向去走。雖然我經(jīng)常說我不是一個喜歡玩概念的人，我也非常不鼓勵不推薦大家一點(diǎn)小破事就上綱上線去整模型做PPT，但客觀來講，學(xué)會玩概念是交互設(shè)計(jì)師的一個高階能力，是思維邏輯的技能化體現(xiàn)。
那么，如何能夠合理地、有理有據(jù)地玩概念？什么情況下需要我們?nèi)ネ娓拍睿勘酒恼聦⒔鉀Q你的這方面疑惑。
社會學(xué)教科書會告訴你：“理論是以一種系統(tǒng)化的方式，將經(jīng)驗(yàn)世界中某些被挑選的方面概念化，并組織起來的一組內(nèi)在相關(guān)的命題?！钡蹅儾挥眠@么文縐縐，簡單來講理論就是抽象地、高度概括地解釋一些在生活中的現(xiàn)象。
比如說你是一個貓奴，在和你的貓朝夕相處之后，你覺得養(yǎng)貓好像有助于你的身心健康，于是你提出來一個概念叫“小貓可愛度”，這個“小貓可愛度”受三個因素影響：貓的毛色、貓的眼睛大小、貓的性格，并且假設(shè)小貓可愛度越高，對人的心理健康正面影響越大。那也可以說你就創(chuàng)建了一個理論叫“小貓可愛論”。
而什么是“模型”呢？這個問題比較難說明，咱不搞學(xué)術(shù)研究也沒有必要展開來講。這個詞匯和“理論”有一定的重疊，但一般我們在工作中講“模型”時，往往指的是構(gòu)成某個概念的因素之間的關(guān)系，以及其測量方式。比如我們設(shè)計(jì)師酷愛搞的體驗(yàn)度量，也可以算作是一種模型的建設(shè)。
圖片來源：https://www.xiaohongshu.com/discovery/item/6285d9360000000021034b22?share_from_user_hidden=true&xhsshare=WeixinSession&appuid=5bcbe6f0f8462700015da647&apptime=1654249488
研究一個問題時我們會用到兩種最基本的思路：歸納和演繹。前者是自下而上的、由具體現(xiàn)象抽象形成理論假設(shè)，后者是自上而下的、由抽象理論具像化到個例。
比如我們剛才的“小貓可愛論”，就是基于日常的觀察抽象得出的結(jié)論，使用的是歸納的方法。而假如現(xiàn)在已經(jīng)有一個成熟理論，叫做”地球貓貓論“，它發(fā)現(xiàn)貓對于人類社會有方方面面的影響。而基于“地球貓貓論”的已知研究結(jié)論，我們著重去關(guān)注貓咪外觀造型對人身心的影響，猜測外觀越可愛的貓貓可能對人心理的正面影響越大。那么這就是使用了演繹的方法來推導(dǎo)假設(shè)。
當(dāng)我們應(yīng)用一個模型或理論時，就是在基于這個抽象的理論做演繹推導(dǎo)。我們期待這個理論能夠?qū)ξ覀兊脑O(shè)計(jì)問題作出解釋、對設(shè)計(jì)方案給出指導(dǎo)方向，這是最最重要的。有很多剛?cè)胄械脑O(shè)計(jì)師容易被一些花里胡哨的文章晃了眼睛，誤以為做設(shè)計(jì)和寫八股文似的，非要在具體設(shè)計(jì)之前拽一些大詞、拉出來一些貌似很厲害很科學(xué)的高深理論才能體現(xiàn)自己的邏輯性，并不是這樣的。我們使用的理論在多大程度上能解釋當(dāng)前面對的問題、它對于問題解決是不是不可或缺，這才是衡量設(shè)計(jì)師思維能力的標(biāo)準(zhǔn)。
另一方面，當(dāng)我們面對的問題非常聚焦、非常情景化的時候，單純靠演繹推導(dǎo)就沒有辦法支持了。比如B端設(shè)計(jì)的領(lǐng)域差異都特大，有人設(shè)計(jì)倉庫貨架動線，有人設(shè)計(jì)鉆井鉆頭。這些千奇百怪的場景都有各自特性的問題，不是拿出來一個尼爾森的可用性十原則就能盡數(shù)解釋的。因此為了提煉出整個業(yè)務(wù)的運(yùn)行方式、為了表現(xiàn)出當(dāng)下設(shè)計(jì)發(fā)力點(diǎn)，或者為了拆解影響體驗(yàn)的構(gòu)成要素，就需要進(jìn)行觀察和歸納，從而構(gòu)建模型。
構(gòu)建模型是一個很麻煩的事情，本篇不打算展開，下次一定吧。
咱們做設(shè)計(jì)對理論的要求其實(shí)很低。以下兩點(diǎn)是我覺得重要、最基礎(chǔ)的：
1.貼合設(shè)計(jì)問題
在我的其他文章里里提過，理論它有理論層次和對應(yīng)的解釋范圍，只有理論貼合設(shè)計(jì)問題，才能完美地解答設(shè)計(jì)問題。不是說名氣越大的理論就越好用，也幾乎不存在從雞毛蒜皮到家國大事都能完美解釋的理論。
比如有些互聯(lián)網(wǎng)從業(yè)者很喜歡拿“人是貪婪的”說事，只要講個啥和促銷/轉(zhuǎn)化沾點(diǎn)邊的事情，就必要講“因?yàn)槿诵允秦澙返?，所以我們這里要這樣……”，先不提這個“人性貪婪論”它能不能證偽、是不是科學(xué)，它首先是在講人類、人的本性這個層面的事情。你怎么就知道這個用戶在用你這個軟件的時候，他貪婪的人性就會占領(lǐng)理智的上風(fēng)呢？可能他本性是貪婪，但他在使用你這款軟件的時候，更多地受軟件好不好用、折扣看起來真實(shí)不真實(shí)、像不像詐騙這些因素影響。就算他貪婪，他也不是傻子，不可能看見個金幣/紅包就去點(diǎn)。這就是“理論”和研究問題風(fēng)馬牛不相及。
那么如何叫理論貼合問題？我今天準(zhǔn)備拿一篇google發(fā)在USENIX Security 21年的會議文章來介紹，這篇文章叫“噓，安靜！減少在chrome瀏覽器中的非必要信息提示”（“Shhh...be quiet!” Reducing the Unwanted Interruptions of Notification Permission Prompts on Chrome），有興趣的同學(xué)可以在Google research上下載到PDF，鏈接：https://research.google/pubs/pub49767/
各位在用Chrome瀏覽器（桌面端或安卓端）的時候，應(yīng)該都見過這個通知提示。當(dāng)網(wǎng)站準(zhǔn)備給你彈窗的時候，chrome會彈出來一個這樣的非模態(tài)小提示窗口（學(xué)名叫prompt）詢問你是否愿意被彈窗，假如你無視這個彈窗、沒做出任何表示，那么下次你進(jìn)入這個頁面時還會再彈。
但這個提示窗口對體驗(yàn)有沒有影響呢？是不是會很煩人？怎么樣能迭代這個窗口的樣式和生效邏輯，從而減少對用戶的打斷，提升用戶體驗(yàn)?zāi)?？——這篇文章就研究這個。
這個問題顯然是一個芝麻大點(diǎn)的問題，恐怕在座各位做需求的時候遇到這種問題都懶得寫設(shè)計(jì)分析。也因此，如此微觀的研究問題，就應(yīng)該搭配微觀的、著眼于用戶具體行為的理論。
這個項(xiàng)目要研究的是三個主題：權(quán)限控制、彈窗提醒和打斷、移動端和PC端差異，所以它首先引用了心理學(xué)和人機(jī)交互交叉領(lǐng)域的期刊上最直接相關(guān)的研究成果：之前的研究發(fā)現(xiàn)，在PC或移動端場景下當(dāng)用戶在完成主任務(wù)時被打斷會非常焦慮、難受，此時對用戶進(jìn)行觸達(dá)也沒什么效果，而當(dāng)用戶在任務(wù)之間的間隙被打斷時則沒那么難受，觸達(dá)有效程度也會提升。
這些研究通過實(shí)驗(yàn)的形式去探討幾個概念之間的關(guān)系：打斷、工作流、心理感受或工作表現(xiàn)。非常微觀、簡單，甚至可能無法形成一個我們普遍理解的、帶名字的“理論”。但它們非常貼合這個研究的主題，基于這些研究結(jié)論可以合理地推導(dǎo)出這篇文章的后續(xù)設(shè)計(jì)策略：針對不同場景、任務(wù)，做差異化的權(quán)限觸達(dá)體系——這不比拿著馬斯洛需求層次模型往自己的設(shè)計(jì)上生搬硬套強(qiáng)多了。
2.對設(shè)計(jì)有指導(dǎo)
咱們做設(shè)計(jì)不是做純粹研究，最終所有的研究和推理，都要落到對設(shè)計(jì)行為的指導(dǎo)性上。不要一通分析猛如虎，最后得不出有價值的結(jié)論，或者只能得到解釋性的結(jié)論，而無法對未來行為做出建議。
在這里我們又要請出ISUX的新文章做例子：
「互動儀式」一詞最早來源于美國社會學(xué)家戈?duì)柭?，是指一種表達(dá)意義性的程序化活動（大到特殊節(jié)日舉行的大型慶典，小到定期的家庭聚會、公司團(tuán)建等活動）。這類活動對個體在群體中的參與感及群體生活的團(tuán)結(jié)性來說具有重要意義?！富觾x式」理論給出了一個分析社會活動的理論模型，幫助我們具體觀察群體活動的現(xiàn)象，觀察群體從聚集到產(chǎn)生情感符號的整體過程。那么如何將「互動儀式鏈」理論轉(zhuǎn)化為具體可執(zhí)行的設(shè)計(jì)方法？
——ISUX設(shè)計(jì)，公眾號：騰訊ISUX 互動儀式鏈 | 直播情感化互動體驗(yàn)設(shè)計(jì)
這篇文章用一個傳播學(xué)的經(jīng)典理論“互動儀式鏈”來解釋騰訊的直播場景的產(chǎn)品服務(wù)鏈條。文章本身是很規(guī)范的，使用“互動儀式鏈”來解釋直播也很符合這個理論的解釋范圍。
但是，“互動儀式鏈”更偏向于解釋一個現(xiàn)象的成因。也就是說假如我們是一個傳播學(xué)的學(xué)者，你老板讓你去解釋為什么直播間那么火爆、里面的觀眾那么多那么活躍、他們?yōu)樯兑M成家族要打榜，你用“互動儀式鏈”來解釋，這很合理。但現(xiàn)在我們是設(shè)計(jì)師，我們要解答的問題不僅是直播間作為社會現(xiàn)象為什么會火，而是騰訊直播之后直播要往哪里發(fā)展？我們要做哪些具體的設(shè)計(jì)動作來增強(qiáng)這個群體之間的共鳴？從這個圖里面是看不出來的，太抽象了。
當(dāng)然本文是很希望讀者相信騰訊直播的產(chǎn)品搭建是基于理論有理有據(jù)地去構(gòu)建的，比如下面這個圖就是“「互動儀式鏈」理論中引申出的設(shè)計(jì)方法”，但是話說，我覺得非常有以果推因的嫌疑，難道沒有“互動儀式鏈”，騰訊直播會不搞粉絲團(tuán)/家族，會不辦主題賽事？假如這些產(chǎn)品動作都是我們已知的或者行業(yè)常規(guī)的，那貼上一個「互動儀式鏈」的皮，對設(shè)計(jì)的幫助和指導(dǎo)就很小了。
當(dāng)然，ISUX為了建立自己的品牌影響力可以寫這種文章，但咱自己做作品集的時候還是要心里有數(shù)，注意你采納的、特意提到的所有理論都要和最終的設(shè)計(jì)手段有緊密的因果推導(dǎo)關(guān)系。
那話說回來，我們能從哪里獲得這些和人機(jī)交互直接相關(guān)的研究成果？我建議大家多關(guān)注人機(jī)交互本領(lǐng)域的期刊，或者和心理學(xué)相關(guān)的期刊/會議。比如google這篇文章援引的CHI，就是人機(jī)交互領(lǐng)域下最知名的、影響力最大的期刊。根據(jù)google scholar的統(tǒng)計(jì)，HCI（人機(jī)交互）領(lǐng)域下的前10期刊排名如下：
地址：https://scholar.google.com/citations?view_op=top_venues&hl=en&vq=eng_humancomputerinteraction
除了CHI和上述排名的期刊之外，我們還可以關(guān)注ACM（美國計(jì)算機(jī)協(xié)會）旗下的其他相關(guān)會議和期刊。比如google的這篇論文就援引了另一個會議MOBILEHCI的文章。最后，除了人機(jī)交互領(lǐng)域，我們也可以多去關(guān)注心理學(xué)和人機(jī)交互的交叉期刊，比如本篇引用的Computers in Human Behavior，其他和心理學(xué)相關(guān)的研究可以從美國心理學(xué)會（APA）的數(shù)據(jù)庫中檢索。
ACM協(xié)會：https://dl.acm.org/journals
APA協(xié)會：https://psycnet.apa.org/
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：白話說交互 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ì)公司
首先要說明一點(diǎn)：模態(tài)modals和模式modes盡管都有個“模”字，但在界面設(shè)計(jì)上指的是不一樣的東西。前者是我們一般說的“帶黑色遮罩的彈窗或者頁面”，后者則指“同一個操作在不同的情況下，帶來不同的效果”，比如Photoshop提供的各種工具就是模式切換的隱喻式說法。
在photoshop中，用戶點(diǎn)擊一下“套索工具”然后按住鼠標(biāo)左鍵，就可以在畫布上勾選一個范圍，點(diǎn)擊鼠標(biāo)右鍵則可以對這個范圍進(jìn)行操作。而點(diǎn)擊一下“畫筆工具”，盡管同樣是在畫布上按住鼠標(biāo)左鍵，效果則變成了使用筆刷在畫布上畫出痕跡，這就是“共用同一個操作但效果不同”的模式切換。
此外，界面設(shè)計(jì)中還有一個和“模式”有點(diǎn)像的概念“視圖”view。通常來說，同一個界面與操作產(chǎn)生不同效果的稱為模式；同一套數(shù)據(jù)展示方式有差異的稱為視圖。這個就下次再聊了。
盡管在圖形化用戶界面的發(fā)展中，模式這個概念曾經(jīng)被各路交互/界面設(shè)計(jì)師充分討論過，但實(shí)際上它并不是一個人機(jī)交互原生的概念，我個人推測“模式”的產(chǎn)生恰巧與非界面的產(chǎn)品設(shè)計(jì)有脫不開的關(guān)系。許多生活中的產(chǎn)品出于安全性、效率或者成本的考量會把屏幕設(shè)計(jì)的很小或者干脆沒有屏幕，人和機(jī)器進(jìn)行交互的方式也很簡單（一般是通過按鈕），這就導(dǎo)致這些產(chǎn)品能夠展示的信息很有限。那么為了能夠區(qū)隔用戶的不同任務(wù)/意圖，用有限的按鈕實(shí)現(xiàn)不同功能，就采用了“模式”這種設(shè)計(jì)方式。
比如很多多功能的手表既可以展示當(dāng)前時間也可以拿來當(dāng)鬧鐘或者計(jì)時器，那么為了能在這么小一點(diǎn)的屏幕上實(shí)現(xiàn)這么多的功能，就需要一個“模式”按鈕來進(jìn)行功能切換。切換模式后點(diǎn)擊調(diào)整時間按鈕，則可以達(dá)到選擇鬧鐘時間/調(diào)整計(jì)時時長/調(diào)整當(dāng)前時間等不同的效果。
除了上述手表的例子以外，“模式”還廣泛存在在各種簡單或復(fù)雜的民用/商用產(chǎn)品中，比如汽車的速度控制，就是一種速度與檔位協(xié)同完成的模式；而飛機(jī)的駕駛艙里也有一個“模式操縱面板”，能讓飛機(jī)駕駛員在高度保持/垂直導(dǎo)航等模式中切換，對飛機(jī)的飛行高度/速度等作出調(diào)整?？傊诋a(chǎn)品設(shè)計(jì)的世界中“模式”的應(yīng)用案例又多又復(fù)雜，相比之下界面交互中的“模式”就非常精簡好理解了。
02模式在界面設(shè)計(jì)的興衰
在圖形化界面發(fā)展之初“模式”這個概念就被帶入了界面設(shè)計(jì)領(lǐng)域。也許是沒有跳脫產(chǎn)品設(shè)計(jì)的影響，此時的“模式”傾向于用硬件按鈕來解決問題，而沒有完全轉(zhuǎn)向界面操作。比如我們上次講過的Xerox Star就設(shè)計(jì)了一個奇怪的“移動模式”，假如用戶想要移動一個文件到另一個文件夾，那么他需要做以下幾步：
現(xiàn)在來看這個“模式”設(shè)計(jì)真是既反直覺效率又低下，因當(dāng)時此很多設(shè)計(jì)師也在思考界面設(shè)計(jì)是否真的需要“模式”這個東西。和屏幕有限、交互方式有限的產(chǎn)品設(shè)計(jì)不同，電腦有鼠標(biāo)有大屏幕，一方面用戶在同一個場景下可做的事情大大增多，另一方面設(shè)計(jì)師也可以通過拆分界面、增加功能入口的方式來讓用戶聚焦當(dāng)前任務(wù)而沒必要采用模式。因此蘋果在1992年發(fā)布的Macintosh人機(jī)界面指南中開始將“無模式”modelessness作為蘋果產(chǎn)品的一大賣點(diǎn)。用戶能在任何情況下完成任何行為，而不必要進(jìn)入某個特殊的“模式”。比如我們上面提到的“移動”操作，在Mac中就變成了我們熟悉的按下拖動，簡單快捷。
然而“模式”是不是完全過時了、完全不適合界面設(shè)計(jì)？也不盡然。首先，在一些和實(shí)物產(chǎn)品相關(guān)的地方，模式還是留下了它的痕跡。比如我們現(xiàn)在電腦鍵盤上的大小寫鎖定按鈕也是個“模式”設(shè)計(jì)。當(dāng)用戶按下這個鍵的時候，電腦進(jìn)入大寫模式，鍵盤打出來的字都是大寫的；再次按下這個按鈕則退出此模式。另外在界面設(shè)計(jì)領(lǐng)域也有設(shè)計(jì)師對模式持不同態(tài)度，比如寫可用性十原則的那個尼爾森，就在1996年寫了一篇文章談到他對“模式”這個東西不一樣的觀點(diǎn)。在他看來，“模式”這個東西的本意是“聚焦用戶的注意力、減少用戶可以做的操作，以便于用戶能更快捷地找到在當(dāng)下具體場景中所需的操作與信息”，并且模式思維其實(shí)天然存在在人的日常生活中，比如一個人在廚房里做的事肯定和在游泳池里做的事不一樣。
這篇文章有興趣可見：https://www.nngroup.com/articles/anti-mac-interface/
盡管如此，尼爾森也承認(rèn)當(dāng)時的“模式”具有一個很討人厭的問題：模式的切換很麻煩，用戶也總是忘記自己身處某個模式下，因此可能會做出此模式無效的錯誤操作。所以為了解決這個問題，尼爾森覺得采用彈簧模式（ spring-loaded modes ）作為普通模式的替代品更好。這種模式最廣泛的應(yīng)用就是鍵盤上的shift鍵：按下shift時多選模式生效，此時可以點(diǎn)選多個文件，一旦松開shift則馬上退出多選模式，這樣一來用戶就不會忘記自己身處某個模式下了。
03作為模式的批量操作
盡管模式在界面設(shè)計(jì)中存在感越來越弱，但除了PS“工具”之外，仍然有兩個非常廣泛存在的模式設(shè)計(jì)：查看/編輯模式、批量操作模式。今天咱們會主要聊批量操作模式。嚴(yán)格來講“批量操作”即同時對多個對象進(jìn)行操作，它可用多種方式實(shí)現(xiàn)而并不局限于“模式”，但是現(xiàn)在市面上比較通行的處理辦法或多或少還是采用了模式的思路，因此我把這兩個東西放在一起說。
我這里舉個例子：比如說你是一個賣海鮮的小店主，為了讓自己店里的海鮮賣的好點(diǎn)，你決定上抖音給你的海鮮打廣告。但打廣告這個東西得多試，哪條廣告語、哪個產(chǎn)品能火很難說，所以你在抖音的廣告系統(tǒng)上新建了60條廣告，每條用的廣告視頻和標(biāo)題都有些差異，這樣最后哪條廣告火你就繼續(xù)投哪條，不火的就下掉不燒錢了。
但是這么多的廣告管理起來很不方便。比如經(jīng)過你的一番研究，發(fā)現(xiàn)抖音的受眾好像都比較喜歡大蝦的廣告，對螃蟹圖片不怎么感冒，轉(zhuǎn)化數(shù)據(jù)很難看。所以你打算把所有帶了螃蟹圖片的20條廣告都關(guān)閉投放。那我們能怎么做呢？
1.隱式模式
按照傳統(tǒng)的模式思維，我們可以像Xerox Star一樣，通過某種辦法讓用戶進(jìn)入多選模式，在這個模式下用戶可以進(jìn)行一些特定的操作，比如批量刪除。然后在批量模式打開的狀態(tài)下，出現(xiàn)多選模式需要用到的組件：多選框與多選操作欄。此時其他和多選模式無關(guān)的操作，比如“新建廣告”則被置灰，除非用戶退出模式，否則不可點(diǎn)擊。
這樣設(shè)計(jì)相信很多同學(xué)能馬上看出問題：操作效率太低了。打開模式按鈕以后，還需要進(jìn)行多選操作，然后選擇對應(yīng)批量操作。其實(shí)假如用戶選擇了多個項(xiàng)，我們就可以預(yù)判這個用戶是想要對這多個項(xiàng)進(jìn)行操作，沒必要要求用戶先打開一個批量模式開關(guān)
因此，為了解決這個問題，在保持表格復(fù)雜性可以容忍的條件下，大多數(shù)平臺會將模式的進(jìn)入方式設(shè)計(jì)得比較含蓄：只要用戶選中了多選框，就進(jìn)入多選模式——我把這種設(shè)計(jì)叫做隱式模式。比如最近比較火的產(chǎn)品cubox，就采用了這樣的模式設(shè)計(jì)。除去進(jìn)入模式的方式不同，其他的設(shè)計(jì)點(diǎn)和60年前的Xerox Star差異不大。
同樣的隱式模式，google mail就做得更加精簡一些。用戶仍然通過點(diǎn)擊多選框進(jìn)入多選模式，但是只禁用了“刷新”這個會清除所有多選狀態(tài)的操作，其他的大部分操作仍然可用。同時也不再提供退出模式的選擇。
那是不是隱式模式相比起來就更好，模式按鈕就不能再用了呢？也不是。咱們之前提過，“批量操作模式”之所以可以做成隱式的，是因?yàn)楫?dāng)用戶選擇多個項(xiàng)時，其意圖就已經(jīng)很明確了。但某些時候，我們無法清晰捕捉到用戶的意圖，所以還得用戶自己手動把模式打開。比如假如這個廣告投放的列表是有優(yōu)先級排序的，在頁面中排序越高的廣告就能得到越多的用戶預(yù)算（這句話我瞎說的，知道什么意思就行）。但之前的廣告表格已經(jīng)非常復(fù)雜了，再插入一套排序組件會讓整個頁面的復(fù)雜程度再上一個臺階，那此時應(yīng)該怎么辦？
此時我們的“排序功能”仍然是用模式實(shí)現(xiàn)的，但要求用戶先點(diǎn)擊一下排序觸發(fā)模式。這樣做雖然操作效率上不如隱式模式，但有效降低了頁面復(fù)雜度，并且也能讓新用戶意識到這個功能的存在，保證功能的可見性。
2.彈簧模式
我們上面介紹過了，電腦的設(shè)計(jì)本身自帶了一個彈簧模式設(shè)計(jì)：shift鍵。按下shift鍵之后用戶可以選中列表中的一個范圍，而不需要一個個地去點(diǎn)選。因此我們在做表格批量操作的時候也可以考慮支持這個鍵控，方便有批量操作訴求的用戶批量進(jìn)行選中。
3.不使用模式
雖然我們?nèi)荚谥v模式，但實(shí)際上批量操作不用模式也能做。不用模式的時候一般有兩種情況：第一，盡管使用模式區(qū)隔使用場景、隱藏一部分功能的設(shè)計(jì)方式保證了頁面的簡潔，但也帶來了另一個問題：可見性低。在沒有進(jìn)入批量操作模式之前，用戶不清楚自己能做什么多選操作。在咱們抖音投廣告的案例中只有“刪除”、“下線”兩個操作，所以這個問題體現(xiàn)的不太明顯。但有些場景下，列表中的項(xiàng)有非常多的屬性，所以可能可做的批量操作很多。比如用戶可能會需要批量改廣告標(biāo)題、改出價、改投放時段等等。因此用戶思考的順序是：我需要做某批量操作->我觀察到系統(tǒng)提供了這個操作功能->我開始進(jìn)行這個操作。
因此，對于一些注重操作效率、用戶專業(yè)程度高的系統(tǒng)來說，為了能夠讓用戶能夠在進(jìn)入本頁面時就能進(jìn)行所有操作，愿意犧牲一部分頁面簡潔性去換取更高的操作效率。這樣的系統(tǒng)往往選擇直接將批量相關(guān)的操作直接暴露在頁面中，因此對于設(shè)計(jì)師的排版技能有更高的要求。
在上面兩種樣式中，多選/批量操作都直接放在頁面中，不再使用模式呈現(xiàn)。因此當(dāng)頁面上按鈕比較多的時候，一般會將所有批量操作收起來做成下拉菜單。
第二，注意到我們上面所有說的批量操作都比較簡單，比如“刪除”、“下線”一步即可完成，因此用戶主要的心理成本和操作成本都壓在多選操作上，也就是操作本身不難，只是操作的對象很多。但有些批量操作本身非常復(fù)雜、需要花費(fèi)很多時間，那么再通過為一個管理列表添加模式來解決問題，就不太合理。比如假如我們的“抖音廣告”新出了一個功能，允許用戶自己創(chuàng)作新的圖片，然后把創(chuàng)作出來的圖片批量應(yīng)用在已經(jīng)有的廣告上。此時顯然我們再要求用戶先從廣告列表中選擇廣告，就不現(xiàn)實(shí)了。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：白話說交互 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ì)公司
從紙質(zhì)閱讀到屏幕閱讀，通過理解用戶從紙質(zhì)到屏幕閱讀行為的轉(zhuǎn)變，我們從傳統(tǒng)中文排印經(jīng)驗(yàn)中吸取對字體、間距、標(biāo)點(diǎn)的處理方式，跨越平面與UI不同終端的設(shè)計(jì)規(guī)范和實(shí)現(xiàn)手段。在UI設(shè)計(jì)的語境中調(diào)整中文排版策略，優(yōu)化手機(jī)百度圖文閱讀場景設(shè)計(jì)，提升手百用戶的閱讀體驗(yàn)。
· 屏幕閱讀與紙質(zhì)閱讀不同
人的閱讀習(xí)慣會根據(jù)閱讀環(huán)境而改變，包括文本的書寫格式、文本的媒介、語言符號等?；谄聊坏拈喿x行為，往往表現(xiàn)了如下特征：很少人會一字一句閱讀頁面，更多的是在瀏覽、關(guān)鍵詞確認(rèn)、非線性閱讀、有選擇性的閱讀。
· 設(shè)計(jì)差異點(diǎn)
UI設(shè)計(jì)與書籍排版不同之處在于：
第一、屏幕上可以實(shí)現(xiàn)更多的交互功能，增強(qiáng)了閱讀的沉浸感和交互體驗(yàn)。
第二、UI設(shè)計(jì)不可控因素更多。平面排版紙張和內(nèi)容固定可控，可以保證設(shè)計(jì)的精準(zhǔn)展示。但在UI設(shè)計(jì)中，想讓頁面達(dá)到和原本設(shè)計(jì)一模一樣的效果幾乎是不可能的，顯示屏幕尺寸的碎片化、內(nèi)容的靈活可變，都讓最后的展示效果多了很多不可預(yù)期。這就是為什么會有很多排版優(yōu)秀的印刷品設(shè)計(jì)，但UI中優(yōu)秀的排版設(shè)計(jì)卻特別少。
因此，針對屏幕閱讀的設(shè)計(jì)要注意：不能照搬文字排版規(guī)則，更要充分考慮屏幕與內(nèi)容的靈活可變，確保設(shè)計(jì)方案可實(shí)際落地。
· 明確設(shè)計(jì)目標(biāo)
本次設(shè)計(jì)改版主要針對手機(jī)百度——圖文落地頁部分，希望通過優(yōu)化文字展現(xiàn)、內(nèi)容排版提升閱讀體驗(yàn)。
CEA閱讀體驗(yàn)?zāi)Ｐ蛯⒂脩舻拈喿x體驗(yàn)分為舒適、效率、吸引三個緯度。
舒適（Comfort)：視覺負(fù)擔(dān)低，信息適量，看著不累、沒有信息壓迫感
效率（Efficiency）：重點(diǎn)信息突出，直觀性強(qiáng)，容易識別
吸引（Attraction）：頁面設(shè)計(jì)美觀，有吸引力
基于此模型，此次優(yōu)化方案中我們確定的設(shè)計(jì)目標(biāo)是：優(yōu)化內(nèi)容可讀性；提升閱讀效率；提升頁面美觀度。
· 優(yōu)化內(nèi)容可讀性
· 選擇屏顯友好字體
屏顯字體與印刷用字體最大的不同在于，屏顯字體受限于分辨率，無法做到印刷字體那么多細(xì)節(jié)的設(shè)計(jì)。目前屏顯漢字的設(shè)計(jì)方式一般是：
1、從字體的結(jié)構(gòu)入手，擴(kuò)大中宮的設(shè)計(jì)，字形設(shè)計(jì)看起來舒適放松，提升辨識度，相較于中宮內(nèi)縮的字體，呈現(xiàn)現(xiàn)代的明亮感。
2、字形簡潔，平直少細(xì)節(jié)的筆畫有助于提高字體本身的辨識。
遍歷手百用戶常用手機(jī)的默認(rèn)字體，系統(tǒng)默認(rèn)字體都是使用屏顯友好字體。
· 選擇字重更全的字體
與紙質(zhì)閱讀相比，用戶在在屏幕閱讀中，會經(jīng)常進(jìn)行掃讀、關(guān)鍵詞確認(rèn)，而不是像在紙質(zhì)書上一字一句的讀。
目前我們提供給作者的能夠做重點(diǎn)信息區(qū)別的方式包括：文字加粗、風(fēng)格化二級標(biāo)題。但我們發(fā)現(xiàn)目前在一些安卓手機(jī)上，一些字體在增加字重后出現(xiàn)沾粘情況，不能保證可讀性。
字重，即字形的重量，字重的等級用來標(biāo)明同一字體家族不同粗細(xì)筆畫的字形。
但通常一個特定的字體家族僅會包含少數(shù)的可用重量。若一個指定的字重不存在時，CSS會就近匹配其他字重：較重的字重映射到更重的重量、較輕的字重會映射到更輕的重量。
目前落地頁代碼中字體的設(shè)置，安卓使用的第一順位的字體字重僅2檔字重，所以在小字場景和分辨率較低的安卓機(jī)型上，會匹配到更粗的字重，出現(xiàn)文字沾粘的情況。
我們調(diào)整了font-family中的字體適配順位，在安卓端優(yōu)先適配字重更全的字體，保證安卓端加粗字體的展現(xiàn)，優(yōu)化內(nèi)容可讀性。
· 提升閱讀效率
· 優(yōu)化字間距和行間距
閱讀場景下，文字的間距是影響閱讀效率的關(guān)鍵。文字的間距包括兩部分，第一是橫向字與字的間距；其次是縱向行與行的間距。
根據(jù)當(dāng)前現(xiàn)狀，再結(jié)合行業(yè)設(shè)計(jì)經(jīng)驗(yàn)，我們選擇了字號與行高倍數(shù)組合的一系列方案，進(jìn)行了眼動實(shí)驗(yàn)和用戶訪談，確定用戶可接受的行間距為1.50-1.70的范圍，再通過對比不同機(jī)型下的屏幕顯示效果，以及不同檔位字體顯示效果、閱讀效率，最后確定了圖文落地頁正文文字在當(dāng)前方案基礎(chǔ)上縮字間距為0，擴(kuò)大行間距1.70倍行號的設(shè)計(jì)方案。
· 段落間距適配字號
圖文落地頁的定位是長文閱讀場景，作者發(fā)文長度的中位數(shù)是600-700字的范圍，以目前用戶使用量最多的iPhone11舉例，600-700字的文章長度為2屏（純文字，無圖情況）。
對于長文閱讀，用戶往往是缺乏耐心的。為讓用戶減少對長文的“畏懼感”，調(diào)整文章段落間距，一篇長文通過合理的分段，成為一段一段的短文，每結(jié)束一段短文，用戶都有機(jī)會進(jìn)行休息并獲得滿足感。
出于屏效考慮，當(dāng)前圖文落地頁段落間距不論用戶使用哪一檔字號，都為一個固定值。所以在調(diào)大字號的模式下，段落間距小，用戶難以區(qū)分；在小字模式下，段落間距又太大，降低了屏效。
優(yōu)化段落間距的設(shè)定，段落間距應(yīng)隨著字號的變化對應(yīng)做出變大或變小的調(diào)整。調(diào)整后的最大字號與最小字號段落間距都更合適，閱讀節(jié)奏更好。
· 頁面美觀，提升吸引力
書籍排版中“微觀字體排印”中一直都關(guān)注字距、行距、標(biāo)點(diǎn)符號等排版調(diào)整，這些排印規(guī)則大部分源于文字本身的規(guī)律，排版風(fēng)格和規(guī)范，并不隨著設(shè)計(jì)潮流而輕易改變，是需要在所有媒介上都應(yīng)遵循的規(guī)則。但是現(xiàn)在的UI排版中幾乎都沒有遵循，這也是我們經(jīng)常覺得UI頁面上的中文排版看起來不精致的原因。
通過學(xué)習(xí)W3C《中文排版需求》《中華人民共和國國家標(biāo)準(zhǔn)-標(biāo)點(diǎn)符號的用法》等中文排版規(guī)范文檔中對標(biāo)點(diǎn)等微觀排版的調(diào)整思路，并結(jié)合UI場景落地，希望從細(xì)節(jié)處提升頁面美觀度和吸引力。
· 優(yōu)化標(biāo)題，突出內(nèi)容
在標(biāo)點(diǎn)使用規(guī)范中對標(biāo)題中標(biāo)點(diǎn)符號的使用有嚴(yán)格的定義：標(biāo)題的作用是概括表明文章內(nèi)容，一般標(biāo)題中除書名號、引號等表示專用名詞的符號外，不應(yīng)該出現(xiàn)標(biāo)點(diǎn)符號，題中停頓可用空格表示。如確實(shí)因需要表明語意而必須使用標(biāo)點(diǎn)符號時，應(yīng)使用同號的半角標(biāo)點(diǎn)，標(biāo)題末尾除問號或嘆號外，一般不使用其他標(biāo)點(diǎn)符號。
但在實(shí)際UI界面中，我們無法在生產(chǎn)端對作者使用的不規(guī)范標(biāo)點(diǎn)符號進(jìn)行逐一的確認(rèn)、修正。UI需要的是展示規(guī)則，保證多種內(nèi)容最后都能有良好的視覺呈現(xiàn)。
在不修改作者不規(guī)范標(biāo)點(diǎn)使用的前提下，優(yōu)化標(biāo)題中標(biāo)點(diǎn)符號的寬度：將標(biāo)題中引號、書名號使用半角標(biāo)點(diǎn)；連續(xù)標(biāo)點(diǎn)將前一位標(biāo)點(diǎn)使用半角標(biāo)點(diǎn)，其余標(biāo)點(diǎn)不變，目的是在保持標(biāo)題基本閱讀節(jié)奏感的同時，減少標(biāo)點(diǎn)在標(biāo)題中的占位，突出標(biāo)題內(nèi)容。
· 標(biāo)點(diǎn)首尾禁則
在中文排版規(guī)則中，為了保持閱讀順暢、體例一致，多數(shù)標(biāo)點(diǎn)符號的位置有限制，通常一個標(biāo)點(diǎn)符號依其性質(zhì)，禁止出現(xiàn)在行首或行尾。這項(xiàng)規(guī)則自活字排版時代開始通行。在中文排版里面這項(xiàng)標(biāo)點(diǎn)規(guī)則叫“標(biāo)點(diǎn)首尾禁則”。
如何執(zhí)行這種標(biāo)點(diǎn)規(guī)避，平面排版中處理遵守“先推入，后推出”原則，即不希望標(biāo)點(diǎn)符號出現(xiàn)在行首時，應(yīng)在已經(jīng)標(biāo)點(diǎn)擠壓的基礎(chǔ)上再次檢查是否有機(jī)會將其擠到前一行，如沒有擠壓機(jī)會再從前一行取最后一個字至下一行。前行多出來的空間需按照優(yōu)先順序拉伸，最后沒有拉伸機(jī)會再按平均拉大字距的方式處理。
但“先推入，后推出”原則在UI場景中實(shí)現(xiàn)難度太大，意味著在判斷每個標(biāo)點(diǎn)位置的時候，還需要進(jìn)行多次邏輯判斷，技術(shù)成本太高。因此我們以效率優(yōu)先，將“先推入，后推出”原則修改為“推出式標(biāo)點(diǎn)避頭尾”，即從上一行推出一個字排在下行的行首，避免行首、行末出現(xiàn)禁排的標(biāo)點(diǎn)符號。
雖然由“先推入，后推出”退階為“僅推出式標(biāo)點(diǎn)避頭尾”，但整體文章還是避免了標(biāo)點(diǎn)出現(xiàn)在行首尾情況，遵循了中文排版基礎(chǔ)規(guī)范。
· 連續(xù)標(biāo)點(diǎn)擠壓
中文的標(biāo)點(diǎn)符號通常占1個字符寬度，便于識別、配置和排版，但當(dāng)頁面中連續(xù)出現(xiàn)2個及以上的標(biāo)點(diǎn)符號的時候，文章上會出現(xiàn)一塊空白，這些空洞會使在閱讀時候增加文字間距，使文字過于跳躍，增加讀者理解內(nèi)容的時間，造成腦眼勞累；同時會造成版心灰度的不均衡，影響視覺美感。
標(biāo)點(diǎn)符號字面分為“可調(diào)整”和“不可調(diào)整”兩類，“可調(diào)整”的標(biāo)點(diǎn)符號標(biāo)點(diǎn)本身在字面左、字面右、字面居中，可縮減掉標(biāo)點(diǎn)不占位部分的空間。
不可調(diào)整的標(biāo)點(diǎn)包括：半字連接號、間隔號、分隔號，因?yàn)檫@幾個標(biāo)點(diǎn)固定半個字寬。
在《中文排版標(biāo)準(zhǔn)》里面說明：當(dāng)文中出現(xiàn)連續(xù)標(biāo)點(diǎn)符號排列時，為了使文字更加緊湊、易讀，應(yīng)該對標(biāo)點(diǎn)符號的寬度進(jìn)行調(diào)整。如果兩個符號占用2個字寬，應(yīng)當(dāng)縮減成1.5個字寬。在此原則上，允許排版風(fēng)格進(jìn)一步調(diào)整讓兩個符號只占1個字寬。擠壓方向應(yīng)該是標(biāo)點(diǎn)符號緊靠內(nèi)容，擠壓掉離內(nèi)容遠(yuǎn)的空間。
根據(jù)這一原則，我們在代碼中設(shè)置當(dāng)連續(xù)出現(xiàn)兩個及以上的標(biāo)點(diǎn)時，擠壓第二位及以后的標(biāo)點(diǎn)為半角，縮減連續(xù)標(biāo)點(diǎn)時的占位，減少閱讀時候的視覺跳躍，減少文章中出現(xiàn)的“空洞”。
· 完整設(shè)計(jì)方案
回顧整個設(shè)計(jì)方案，包括了3個部分：
1、對比屏顯字體與印刷字體，結(jié)合字體的字重，優(yōu)化字體家族選擇范圍與展示順位，優(yōu)化內(nèi)容可讀性。
2、通過眼動實(shí)驗(yàn)、可用性測試調(diào)整字間距、行間距和段落間距，優(yōu)化閱讀節(jié)奏，提升閱讀效率。
3、學(xué)習(xí)W3C《中文排版標(biāo)準(zhǔn)》等規(guī)范，吸取中文排印優(yōu)良傳統(tǒng)，通過對內(nèi)容中標(biāo)點(diǎn)符號等微觀細(xì)致的調(diào)整。使正文區(qū)頁面能夠保持字距均勻，版面齊整、灰度均衡。從標(biāo)點(diǎn)細(xì)節(jié)提升頁面美觀度和吸引力。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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://m.yvirxh.cn