藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
政府網站設計不等同于普通的企業網站設計，政府網站是向群眾發布政務信息，提供為人民網上辦事的窗口，所以政府網站最主要的目的也就是為人民服務，那所有網站在進入之后，首先最吸引我們的也就是網頁的界面，網頁的界面設計是從側面反映政府的形象，所以政府網站也不能像普通的網站那樣做的絢麗多彩，那一切設計都是有思路的，政府網站也要從網站的風格，色彩等方面著重策劃，以人為本，帶給用戶良好的體驗。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
當你為你的項目創建有效的，可訪問的，漂亮的ui時，只需要最小的調整來幫助快速改善你的設計。 努力創造。在這篇簡短且易于理解的指南中，我收集了一些容易放置的內容。在實踐中，這些小技巧可以毫不費力地幫助你改善你的設計，還有用戶體驗。
希望你喜歡！
用微妙的邊界定義。
使用多重陰影或非常微妙的邊界（只是一個陰影比你的實際影子）周圍的某些元素可以使這些元素出現
更清晰，更清晰，幫助你避免那些看起來泥濘的陰影。
標題給一個更好的光學范圍。減少長格式正文的字母間距？這是一個大大的“不”。但對于標題……我要說“是”!
你的標題很可能會比他們的標題更大，更重。相比于正文，字母之間的間距有時會出現視覺上更大，這并不是你想要的。減少字母間距，只是少量，可以使你的標題視覺平衡，更易于閱讀，通常更賞心悅目。
為了一致性，確保你的圖標具有相同的視覺風格。確保它們擁有相同的視覺風格;同樣的重量，要么填滿，要么秒變了。不要混搭。
只使用一種字體就很好。在設計時，使用單一字體是絕對沒問題的，這樣做實際上可以幫你產生更強、更持久的結果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量，大小和顏色，你仍然可以產生完美的可接受的結果。雖然只有一個單獨的字體。
留白是UI設計朋友。大膽的使用。適度的留白，即使是少量的白色物質，但要使用得當。能讓你的設計透氣，而且看起來更光亮。
創建長篇內容？給20 pt試試。對于長形式的內容（即微博文章，項目描述等等），試著這樣做20pt(甚至更多一點)為你的文本字號。當然，這取決于所選擇的字體，但大多數流行的字體在20pt時效果得很好，并帶來更好的閱讀體驗當你的用戶面對一堵文字墻的時候。18pt太過時了。
使用字體比例定義一個適合的字體大小集。使用字體比例可以幫助您輕松、實用地定義一組字體大小。顧名思義，Type Scale基于一個比例因子(比如1.25)工作的。從一個基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?，H?等)，或較低層次(即;標題、按鈕等)字體比例將幫助你產生看起來和諧的文本字號集。因為他們的大小根據設定的固定比例增加和減少。
選擇一個基本顏色，然后使用色彩和色調增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設計。如果項目允許，簡單地使用一個有限的調色板選擇一個基地顏色，然后使用你選擇的顏色的色調和陰影可以增加一致性以最簡單的方式來改變你的設計。
改善用戶登錄的體驗。記住拇指規則。允許用戶在任何時候跳過您的移動應用程序上線序列，并且放置跳過鏈接在拇指容易觸及的位置。只是一個簡單的調整，可以為你的用戶提供更好的體驗……
記住，拇指仍然是主宰！
你的影子來自其中一個光源對吧？確保你的影子總是來自一個光源。這是一個簡單的錯誤，但它可以讓你的設計看起來更拋光且統一。記住，我們不是生活在一個擁有一千個太陽的國度里。
使用更好的字體組合，效率會很很快。當你想要提高你的字體組合技巧的時候，當面對1000個字體選擇，只是去尋找對應的自己集合，效率會快很多。
文字和圖像與一個微妙的覆蓋。根據文本可能放置在圖像上方的位置，您可以選擇嘗試，并測試完整的圖像覆蓋，或更微妙的(從下到上，或從上到下)漸變疊加，以實現兩者之間的簡單對比。為了在你的文本之間形成良好的對比，不要太復雜的內容和圖片。
太多就會導致用戶體驗不合格。盡量只在標題和小段落中使用中心文字。對于幾乎所有其他內容，保持文本左對齊。你的用戶會感謝你的你。
當選擇一個多用途的文字，盡量找一個大量權重。你搜索的字體有很多選擇嗎？重量、風格？如果你打算在你的一些項目中使用它，請嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話，我建議你避開這些。當然也有例外，某些項目會要求“只有一種風格”
更精致的字體，但對于絕大多數項目，你想要的字體再多一點就能…嗯…選擇。即使你決定只使用兩種或三種重量或風格，希望你在設計過程的后期需要更多的空間。
想要創造更容易理解的界面，對吧？把你的文字調暗在光亮的背景上。在淺色背景下工作時，不要讓你的文本太亮。
當涉及到長形式的內容時，某些常規的粗細字體仍然可以看。但太重了，在屏幕上會很僵硬。你可以很容易地解決這個問題，選擇一些像深灰色（即#4F4F4F）的基調，把文字往下寫，讓眼睛更容易看。
總是通過icon最突出的內容。你認為這是常識，對嗎？我并不覺得。通過使用色彩對比度做區分，尺寸和標簽，確保盡可能突出。如果可以的話，不要總是只依賴圖標。如果可以使用文本標簽，那就使用它們，讓用戶更好地理解。
當你的字體變小時，請增加行高，以達到更好的通用性。這同樣適用于當你的字體大小增加。簡單地降低行高。
使用x-height來測試字體的可讀性?；旧?，x-height是一個小寫字母' x '相對于大寫字母高度 (T)的相同字體。如果你的字體有一個大的x高，通常有助于更好地閱讀，特別是在使用長形式的正文文本。另一種確定字體可讀性，并縮小范圍的方法如果你有一些無法選擇的字體，可以做這個測試，比較來自特定字體的三個字符：大寫字母I，小寫的L和數字1。
當設計一個在應用程序內部使用的菜單時，確保提供最多經常使用的動作（例如：上傳圖像，添加文件等)最突出的屏幕上。
顏色-從你的圖像中選擇，會給你的產品帶來生命。簡單地從你的產品圖片中選擇顏色，然后應用各種色調。你選擇的顏色陰影到你的背景，文字，圖標或更多，可以添加。你的設計具有豐富的視覺趣味和個性。
基于字體的x坐標，設置您的線高度。不同x高的字體需要不同的行高測量，實現文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即：18px)它們的x的高度可以有很大的不同，這在選擇正確的線的種類起著很大的作用高度來實現。
突出最重要的元素。通過使用字體大小，權重，顏色和布局的組合，可以很輕松的突出UI中最重要的元素。只是很簡單，但微妙的調整，讓用戶體驗更好一點。
操作錯誤的時候，添加一個額外的視覺輔助。在用戶剛剛采取的操作附近添加一個錯誤消息可以是簡單的形式，但很有幫助，當他們填寫任何形式的表格時額外的視覺輔助。
嘗試在移動端創建慷慨的熱區。當為移動設備設計時，嘗試創建足夠大的可點擊區域，是好的。對于只包含文本的按鈕和鏈接來說，這是很有挑戰性的，盡可能使用帶有標簽的圖標。
以下是iOS和Android的最小推薦點擊區域：
44 x 44pt用于iOS
48x48dp用于Android
在短標題上盡量使用全大寫。如果你想在標題上使用全大寫，請確保它們在任何時候都很短。有可能，最好是一行。將它們用于較長的文本是不好的。和之前的技巧一樣，在標題中添加少量的字母間距。能讓他們呼吸順暢，而且視覺效果更好。
在輕文本和圖像之間，保持可接受的對比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡單地應用一個稍微不透明的背景在你的文本后面將保持這些元素之間的對比度很好。
看看這些很棒的字體，用在標題非常好的。發現他們真的很適合標題，設計感很強。（我沒有推廣費用，請放心用）
看看這些很棒的字體，用于長文本是非常好的，強烈推薦使用。（我仍然沒有任何推廣費）。
標題和正文。當你想實現一個好的垂直節奏，以及一個強大的視覺之間，需要對文本元素排版、間距作設計。我見過許多設計，最常見的是在文章列表中，它們已經被應用標題的上下空白相等，這樣就失去了這種聯系在它下面有正文。在這種情況下，我總是會給我的標題更多的頂部邊距，而在底部，標題和下面的內容之間的連接是更強，有良好的垂直節奏，視覺層次保留在所有的文章之間。
對于下載指標，試著去做盡可能提供信息。對于用戶，嘗試使具有信息性的下載指示符對用戶很友好。你可以通過使用顏色來實現這一點，用百分數來顯示當前進度，一個簡單的圖標，讓他們可以在任何地方取消下載時間。
如果你能保持標題簡短，簡潔……“想做就做”。
如果可以，如果合適的話，保持標題簡短，時髦，切中要點。而不是“這是你的風格，你的方式”，簡單地使用像這樣的“你的風格。你的方式?！比藗儠g覽，保持這些標題簡短有力有助于他們更快地消化中的信息。
記住，這種方式可能會讓人感覺很突然，你需要考慮一下你所從事的項目類型，以及目標受眾來決定方法是合適的，相對于更標準的格式。
正確的設計“聲音”。在項目中處理文本時，選擇正確的字體將影響就像你說話的聲音一樣。要大聲，要柔和，要友好，要正式，要有趣。每一種字體都有自己獨特的聲音，關鍵在于找到合適的字體你正在做的項目的聲音。當你剛接觸字體時，這似乎是一項艱巨的任務，所以不要害怕從類似的項目中獲得靈感，并從這些項目中汲取靈感它們有助于影響你的決定，并提高你的理解什么是合適的。
你的正文，并提高可讀性處理正文文本，并試圖找到合適的行長度可能有點平衡。對于一個單獨的列頁面，45到75個字符被普遍認為是滿意的行長度，而行長度為66個字符(包括字母和空格)被發現是最佳位置。當然，字體大小和行高在決定可讀性時也起著重要作用，但是對于行長，保持在45到75個字符之間，就會更好了。
偶爾使用純裝飾的幽靈文字也可以，但要保留閱讀的問題。屏幕上的大部分文本內容應該堅持可用性最佳的做法是沒有問題的。但有時，希望添加純出于裝飾目的的文本，我們不希望所有的設計都落入乏味。如果沒有元素會以任何方式影響用戶體驗，那么出于裝飾的原因，插入奇怪的元素是可以的。
使用戶界面中的元素彼此區分。按鈕、通知，ui中兩個獨立但重要的元素。如果可以的話，總是試著確保你的用戶能夠快速地將它們區分開來，輕松掃描您的網站或應用程序。按鈕，在大多數情況下，將優先，所以確保他們是最突出的。項目在屏幕上，并很容易區分其他元素。
只是一些細微的陰影，你所需要的。我們都喜歡陰影，對吧？它們可以作為微妙又很強大的視覺線索，在您的設計中使用要適度?，F實世界中的陰影，在大多數情況下幾乎是不可察覺的，而且所以你應該在ui中模仿這種行為。放下沉重和黑暗的陰影并降低不透明度，以實現一些的東西更微妙和栩栩如生。
使用全部大寫？選擇適合的字體，能夠達到光學清晰度。在你的設計中適度使用“全部大寫”是很好的。選擇一個合適的字體與行高和較重的字重，使用戶的光學清晰度。
讓面包屑脫穎而出，易于為用戶解釋。面包屑無處不在，經常用于內容豐富的網站，通過最小的調整，你可以確保用戶能夠快速定位他們在一個網站上的位置以及他們可能需要去的其他地方。如果用戶已經通過使用跳轉到網站的某個深度，這一點尤其有用。
使用高度飽和的顏色?試一試用淺色調來緩和氣氛或者陰涼處。高度飽和的顏色(明亮的藍色、紅色、綠色等)可以讓網站看起來很棒，但是當過度使用時，它們會使使用者的眼睛疲勞，主要是在使用的時候的文字內容。盡可能使用時要適度，并盡量與柔和的顏色搭配顏色或色調變化)的飽和顏色，以避免可怕的眼睛疲勞。使用這種方法還可以直接注意到飽和的色彩和使最重要的內容前面和中心，與更柔和的顏色采取較少突出角色，讓用戶的眼睛休息一下。記住，在選擇顏色時，可讀性和可訪問性應該是最優先的。
在ui中使用已建立的圖標，為了避免給用戶造成混淆。在你的設計中添加圖標時，試著選擇一個有代表性的已建立的圖標。不要選擇一個能傳達正確含義和功能的圖標否則會引起困惑，成為用戶的認知障礙。不要在這些圖標上過于叛逆。
在眾多經過嘗試和測試的設計原則中，這里有一個是幫助您為用戶生成更清晰的ui的關鍵。接近只是確保相關設計元素放置在一起的過程，表明彼此之間的關系，這有助于加快用戶的認知。
4pt基線網格+ 8pt網格=單一網格。當使用類型時，8點網格旁邊使用4點基線
可以為你的設計帶來更和諧的垂直節奏。您需要對齊您的類型到基線網格4，使用的行高值為4的倍數（16、20、24、28等）
為什么4？我發現在過去使用特定的文本大小時，按8的倍數縮放是不太合適。
減少標題上的行高是很好的。與長形式的主體文本不同，它需要足夠的行高，以便折行易讀。標題的推薦行高通常約為1至1.3倍。
選顏色有困難計劃嗎？在顏色上進行類比論。類似的顏色，也被稱為相鄰或相鄰的色調，是其中之一最和諧的配色方案，可以大大幫助你，如果你有很難挑選出搭配得很好的顏色。由三原色、二原色和三原色組成的一組相鄰的色調幫助您創建一個簡單的，顏色方案快速。當你需要快速將顏色調和到混合中時，可以使用類似的方法。
在你的設計中盡量提高信噪比。你可以在你的設計中通過最大化信號來實現清晰和可用性最小化噪聲，從而產生高信噪比。您可以通過確保提供相關信息(信號)來實現這一點有效，不相關的信息(噪聲)被減少或完全刪除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式說話。語氣嗎？嘗試所有小寫字母。使用較重的字體和大寫會顯得有點正式和夸張。試著選擇全小寫和較輕的字體。在處理特定項目時，使用類似全小寫的拷貝可以呈現更非正式的、可接觸的信息。記住要在圖像之間使用某種顏色疊加與文字達到較強的對比。
當使用類型時，元素不需要尖叫“看看我!”一直如此但他們確實需要一個平衡的等級制度。只需通過重量、大小和顏色進行細微的調整就可以實現這一點。這樣做可以讓用戶掃描并找到必要的元素，避免在過程中產生任何混淆。
養肥了，字體大小為最佳易讀性。當設置暗色文字與淺色背景，選擇一個更輕的粗細。但是…反過來說:淺色文字>深色背景。最好是看一下增加一點字體重量，特別是對于長表單副本。以最佳的易讀性為目標，避免讓用戶的眼睛疲勞。
試著為你要呈現的內容選擇合適的字體。用戶是精明的，有一種直觀的感覺，當內容與他們交談當它不是。正確的字體選擇是至關重要的，使您的內容講給他們直率和情感的水平。
你是否使用全大寫的短行文本？嗯…這是一個好主意，增加這些字母之間的間距，以達到更好的用戶的易讀性。這樣做使單詞更容易閱讀和處理，因為字母更多彼此區分。字母之間的間距只要稍微增加一點就可以。
打開這些錯誤消息，您的表格有幫助。在使用表單時，請嘗試并確保錯誤消息得到解釋。出了什么問題，如何補救?？偸亲層脩袅私馇闆r，即使是像常規一樣常見的事情的形式。讓這些錯誤消息有用，不要讓您的用戶蒙昧。
試著向用戶保證在加載過程中會發生一些的事情你的應用程序。顯示應用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發生一些事情。系統狀態可見性是一個重要的原則要遵循，并允許用戶知道發生了什么。不要讓用戶從一開始玩猜謎游戲。
告訴用戶將要做什么如果他們應用了某個動作。在應用特定的操作之前，總是嘗試并詳細地告知用戶可以有結果。這尤其適用于具有不可逆轉后果的行為，如刪除某些東西。讓用戶知道將要發生什么，并在此之前要求他們進行確認。他們就會按下那個標有“刪除”的紅色大按鈕。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：卡洛設計鋪 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
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）和目標大?。⊿）有關。標簽欄作為向用戶展現產品框架的關鍵控件，熱點區域（可點擊區域范圍）的設定一定要合理。底部圖標尺寸較小，如果將圖標作為熱點區域，那么可點擊區域就偏小，很可能出現用戶點擊不到的情況，正確的做法是以標簽欄的布局作為基礎設定，在標簽相鄰的部分劃出一定區域作為不可點擊區域，以免用戶誤操作，參考如下，紅色為可熱點區域，藍色為不可點擊區域：
在產品設計中，不同樣式的圖標會給人不同的感受，隨著APP風格越來越簡潔化，標簽欄圖標風格緊緊地跟著界面的風格而改變。經過長時間的沉淀，標簽欄圖標常見的默認設計樣式一共可分為四類：線性圖標、面性圖標、線性+面性圖標、輕質感圖標。
線性圖標通過線來塑造輪廓，在圖標設計中使用的線有粗細之分，常用的App圖標設計線的粗細一般有2px、3px、4px，不同的線條粗細所帶來的視覺感受也不同，我在“如何讓你的圖標具有說服力”文章中提到過，線條越粗那么圖標的性格就越活潑、粗曠，線條越細圖標性格就越精致、商務，圖標使用描邊的粗細可以根據產品的氣質來決定。
選中狀態：當選中狀態為高亮線性圖標時，選中狀態的圖標顏色會與默認狀態的圖標顏色形成較強的反差，但由于線和線的差異性并不強，線性圖標沒有面性圖標更具吸引力（引導性），即使加入了高亮色識別度也不及面性強。airbnb在處理線性圖標選中狀態時就考慮到了這一點，選中狀態下不僅對圖標的顏色做了較大變化，還加大了圖標及文字的描邊粗細，從一定程度上加強了圖標的引導性。（注：線性狀態的圖標選中狀態也可以變為面性圖標或線性+面性圖標）
面性圖標是通過面來塑造形體的圖標，采用了剪影的設計形式，通過線或者面去切割基礎輪廓面，通過分型來塑造圖標的體積感，面性圖標的承載信息相對與線性圖標來說更重，更具有引導性。
選中狀態：面性圖標的選中狀態為高亮面性圖標，顏色可以為純色、也可以為漸變、透明。愛奇藝的選中狀態就采用了高亮面性圖標的展現方式，除了把圖標底色及文字的顏色加深以外，還加入了品牌色，甚至為了讓“會員”標簽更加突出，還單獨對“會員”標簽的顏色進行了修改。
線面結合圖標相較單一的線性圖標或單一的面性圖標樣式更加豐富、也更富有趣味性。從設計的角度上說，由于元素的多樣化，設計更容易獲得好的效果。相反，如果運用不當會顯得圖標非常雜亂，如何有效的把控好兩者之間的過度是關鍵。
選中狀態：線性圖標的選中狀可以為高亮的線性+面性圖標。懂車帝在處理標簽選中狀態時就把圖標底部加入了高亮黃色圓形塊狀，即保存了線性也添加了面，加深了選中狀態的視覺重量，更加明確的讓用戶感知自己所處的位置。
輕質感圖標層次簡單，用色素雅干凈，采用輕投影、輕漸變的方法設計，這類圖標具有一定的立體感，能給人輕盈、簡潔、精致的感覺。輕質感圖標在標簽欄中運用的較少，在特殊情況下才會使用，例如盒馬，就把輕質感圖標用在了首頁標簽與盒馬小鎮標簽，首頁標簽的引入是為了讓用戶加強對品牌形象的認知，而盒馬小鎮標簽的引入則是為了加強圖標的引導性。
*圖標樣式的常用變化（選中與未選中）
在我調研上百種應用程序中，發現主流的APP標簽欄樣式變化大致分為六種：線性-線性、線性-面性、線性-線+面、面性-面性、面性-線+面、線+面-線+面。雖然標簽的樣式變化繁多，但是使用率最多的是“由線性轉面性”標簽。
標簽欄的不同展示形式會給用戶帶來不同的使用習慣和使用感受，常見的標簽展示形式有四種：圖標+文字、純圖標、純文字、舵式。
圖標+文字是最常見的標簽展示形式，為了讓用戶能夠很好的明白圖標的意圖，所以在圖標下方會配有文字提示，這樣就能大大的降低誤讀的可能性。正因為有文字提示，所以沒有必要過于擔心圖標的識別性問題，那么圖標就可以得到更深的延展，可以做的更有趣，更具有產品氣質，甚至可以代入更深層次的動效。
例如東家·守藝人APP，專門售賣各種手藝人的親手制作的各種藝術品，面向的對象是喜歡傳統文化的人群，在這樣的背景下東家結合宋體的筆畫（筆畫拆分）把圖標設計的更加傳統、古樸，創造出具有東方韻味且極具形式感的圖標設計。
采用純圖標展示形式的產品比較少見，純圖標樣式的最大缺點就是識別性低，沒有文字說明會導致用戶很難找到自己想要去的位置，也不明確自己所處的狀態。所以我們如果要設計純圖標形式，那么必須要考慮到圖標的識別性問題，間接的舍棄掉圖標更多的延展性，讓圖標變得更規矩。（識別性的提升我之前寫的圖標文章中提到過，主要可以從大眾認知隱喻與真實世界映射兩個方向出發去提升）
使用純圖標樣式的產品特征：產品單一、領域垂直、小眾化、用戶群體接受度高。即使滿足這些條件下產品使用純圖標標簽，用戶第一次使用往往也是比較迷茫，需要等用戶熟悉后才會得到好轉，所以一定要慎用。除此之外不太建議用于電商、視頻、學習、社交等領域。
對于我們設計師來說使用純圖標樣式的產品中最為熟悉的就是花瓣了。
采用純文字展示形式能夠更直觀的讓用戶進行操作，遵循簡單易用的原則。適合用戶群體跨度較大的產品，多用于直播類、內容類、簡單工具類APP中。缺點也顯而易見，圖標樣式比較單一，沒法加入更多趣味化、具有產品特性的元素到標簽中。
采用純文字展示形式的產品有很多，最熟悉不過的就是抖音，抖音的標簽默認狀態下采用了純文字形式，選中狀態則把文字高亮顯示，并且底部加入了圓角矩形，對于用戶群體跨度較大的產品，這樣的展現形式再好不過了。（抖音在途中改用過圖標+文字格式，不過后面也放棄了，我當時用著圖標+文字類型的抖音，的確感覺太奇怪！）
舵式標簽可以看為底部標簽式導航的一種變體。它在后者的基礎上，突出強調了一個標簽并且放在中間的位置，樣子看起來像攢了一個舵，所以取名為舵式標簽。一般舵式標簽的顏色、大小等視覺表現會被設計得和其他普通標簽有所差異，通過視覺對比的方式吸引用戶關注。舵式標簽通常和產品框架體現無關，大多數應用程序使用舵式標簽是用來承載系統功能。起初是因為社區類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、控件狀態
選擇控件在操作過程中必須更改其狀態/外觀，要明確讓用戶知道是否能選中，是否被選中?？丶顟B一般分為三種：未選中、選中、禁用。
未選中
選擇器的開始狀態，向用戶表明，可對該選擇控件進行操作。
選中
用戶操作選取狀態，選擇控件處于被選中的狀態。
禁用
一般情況會為灰色顯示，用戶將無法與選項進行交互。
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元素相同，那么圓形按鈕看起來會更小。基于光學校正原理，你需要區別對待這兩個元素。
看看下面的例子，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音樂的設置里，通過跑步電臺選擇適合自己跑步速度頻率對應類型的歌曲播放，一邊跑步一邊聽歌，為自己提供跑步節奏和堅持的動力。
設計思考：
基于現在快節奏的生活狀況，很多年輕人在午餐后直接睡覺、晚飯后常坐不起，這就是大批年輕人無法控制自己身體、越來越胖的原因?！跋矚g”跑步的的人群越來越多，但眾所周知，跑步需要極強的耐力和自律來控制自己堅持下去，但大部分人都挨不過三分鐘熱度，定下跑步目標時來勢洶洶，放棄時就借口連連。
如果在跑步過程中感到非常無聊，就不妨用下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.「微信」公眾號取消關注-潛在的門檻
產品體驗：
微信公眾號的取消關注在改版后更換了樣式，由之前非常明顯的按鈕弱化為小頭像圖標，并置于右上角。
設計思考：
我們經常穿行于各大微信公眾號之間，其目的主要在于閱覽各種軟文，一方面增加我們對自身、周邊事物的了解，另一方面提高自己的眼界。基于公眾號數量的龐大，其內容、質量也是參差不齊，總會挑選一些自認為質量不錯的公眾號進行關注，根據時間流逝，對公眾號的類型及質量要求在不停的變化，取消關注、來回切換也是常有的事?？勺詮纳洗胃轮螅芏嘤脩粼诠娞枤v史消息頁面找不到取消關注的入口了。
微信公眾號之前在歷史消息頁面有一個醒目“不再關注”按鈕，隨時清晰可見。改版之后，將“不再關注”按鈕換成了一個非常小的“頭像圖標”，調整到了右上角位置，圖標的樣式且與取消關注毫無關聯，如果不通過試錯操作則很難發現。微信這樣調整的目的主要在于增加用戶取消操作的成本，也是為了保護公眾號的利益。公眾號只是平臺推出的一個版塊或子產品，其真實運作起來，作者、讀者缺一不可，增加取消關注的難度，總會有部分用戶知難而退或延時取關，很大程度上降低了公眾號的掉粉率，隨著掉粉率的降低或穩定，有一種對原創作者的內容肯定、認可的錯覺，潛在的鼓勵作者創作出質量更高的內容，同時可能會吸引更多的用戶關注，如此良性循環下去，三方共贏。弱化取消關注入口，看似很小的改動，或許有用戶會抱怨，但對產品的穩定和提升起到的很大的作用。
107.「高德地圖」視覺障礙模式-色盲/色弱用戶的福星
產品體驗：
在高德地圖的地圖設置中開啟視覺障礙模式，道路交通擁堵情況的色彩提示，會替換成一套色盲/色弱用戶的專屬配色，幫助其更輕松的使用地圖導航。
設計思考：
首先，我們在考駕照之前，都會被要求去對應機構體檢，其中就包括視覺檢查，如果是色盲/色弱用戶則很難按照正常流程去考駕照，但不排除原本沒有問題、在拿到駕照之后，逐漸出現色盲/色弱的情況（例如：曾經有人眼睛里進了一只蚊子，揉過之后就出現視覺障礙），但依然有自駕出行的需求。除此之外，還有部分并無自駕需求的色盲/色弱用戶，會查看地圖導航，根據實際路況來選擇出行工具，此時這類人群對常規的路況色彩提示并不能準確的辨識，因而陷入不知所措的狀態。
高德地圖增加了視覺障礙功能，在設置中開啟后，路況的顏色提示會變成色盲/色弱用戶的專屬配色，其設置中有色彩對應的代表說明，便于此類型用戶能輕松掌握路況信息。高德的這種思考方式是讓任何人在任何情況下都能平等地、方便地、無障礙地使用地圖導航，不得不說，產品團隊真的是有心了。
108.「小宇宙」紙杯電話-滿滿的回憶殺
產品體驗：
小宇宙APP在網絡出現故障時，會以“紙杯電話”的樣式作為缺省頁插圖，提醒網絡壞了，喚醒兒時記憶。
設計思考：
現在的孩童時光，大多數的業余時間除了學習之外，就是在電視機前看動畫片或玩手機。但在80后那個沒有網絡的年代，信息都是通過跑腿或信件傳遞，為了豐富自己的兒童時光，其中也自制了一些印象較為深刻的簡易玩具，包括最早的手機“紙杯電話”。把兩個紙杯底部分別扎一個小孔，用毛線從小孔穿過連接起來并拉直，一人說話一人聽，就能完成“打電話”的過程。
小宇宙APP在網絡出現故障時，就利用“紙杯電話”的插圖樣式作為斷網缺省頁，首先能明確告知用戶當前頁面的信息狀態出現了什么問題，并引導用戶進行解決操作；其次，利用故障定位出該狀態的格調和氣氛，與用戶建立情感連接，通過情感化的方式喚起用戶的童年記憶，此時，不管頁面出了什么問題，都可以加深對產品的印象，為用戶的再次訪問埋下伏筆。
109.「叮咚買菜」猜你喜歡-“找相似”讓你更加喜歡
產品體驗：
叮咚買菜首頁“猜你喜歡”版塊，如果對當前商品不滿意，長按彈出找相似入口，進入即可瀏覽與之相似的商品。
設計思考：
平時我們在沒事的時候，拿起手機在某些電商平臺，一逛就是一個小時，眼花繚亂的看著各種商品，即使不準備買，也是在下單的邊緣瘋狂試探。基于用戶的瀏覽記錄、時長、頻率，直接提高了“猜你喜歡”內容的精準度，根據用戶心理特征做出背后策略并在后續不同程度的再次呈現給用戶，即有幾率再次促進轉化。
叮咚買菜同樣在首頁推出了猜你喜歡版塊，但如何利用用戶心理把可轉化率提升到最高呢？其實，不難看出，用戶對部分商品的多次瀏覽，除了少部分只是路過外，其主要原因還是在價格（經濟許可）、口碑、品牌或主圖/詳情的誘惑力上產生顧慮，如果在變化不大的情況下多次推薦給用戶，作用微乎其微。
長按叮咚買菜“猜你喜歡”的商品區域，從彈出的找相似入口進入，系統會從商品庫匹配類似的商品或相同的商品在不同的店鋪呈現給用戶，其價格、口碑等這些可能會影響用戶顧慮的條件都會有不同程度的變化，以最大力度改變用戶的想法，當解決了用戶的部分顧慮后，有可能再次勾起下單的欲望，間接促成用于下單提升轉化。
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應該讓很多屏幕的觀者都興奮不已?，F如今，各種產品的線上內容也都加入了喜歡、點贊、推薦等操作，樣式和原理基本大同小異，大部分都是通過心/星型圖標，點擊選中、再次點擊取消，有點復選框的感覺，其實可以根據產品的屬性及受眾用戶的性格延伸出多種樣式，比如情感、個性、趣味等，以此給用戶帶去不同的心理感受。
馬蜂窩游記詳情頁左下角的頂（又名：點贊）存在連續點擊時，會出現一連串“喜歡”的手勢圖標并從底部快速移動至作者頭像，頭像且以閃動的效果+文案做出回應，配合數字累加和抖動效果，著實炫酷，算是狠狠的秀了一把，有種直播禮物滿天飛的既視感。我們都知道，點贊不光是對作者的認可，其不同的視覺效果還能表達自己對作者的贊美程度和內心的滿足感。另外，動態視覺效果大大提高了趣味性，就一個點贊功能，活生生整出了打游戲砍怪時的連擊效果，利用非常炫酷有趣樣式，提升用戶對產品的滿意度。
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咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn
