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