當你為你的項目創建有效的，可訪問的，漂亮的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中兩個獨立但重要的元素。如果可以的話，總是試著確保你的用戶能夠快速地將它們區分開來，輕松掃描您的網站或應用程序。按鈕，在大多數情況下，將優先，所以確保他們是最突出的。項目在屏幕上，并很容易區分其他元素。
只是一些細微的陰影，你所需要的。我們都喜歡陰影，對吧？它們可以作為微妙又很強大的視覺線索，在您的設計中使用要適度。現實世界中的陰影，在大多數情況下幾乎是不可察覺的，而且所以你應該在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咨詢、用戶體驗公司、軟件界面設計公司
設計不是拼圖，深入下去，有很多細節需要推敲，而這些細節的背后的邏輯與意義更值得關注。產品主要強調的是與人的交互，用戶通過對產品的操作來實現自身的目的，比如雙擊，滑動，常按等，而操作一般建立在產品的功能基礎上，產品的功能細節體現在產品的業務邏輯中，產品所提供的功能是否更好的滿足用戶的需求，操作細節與功能細節密不可分，功能影響著用戶的操作，而操作細節更多體現在用戶的感受。
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.「網易云音樂」遇見陌生人-聽歌交友
產品體驗：
使用網易云音樂的一起聽功能，除了能分享給好友外，還可以選擇“遇見陌生人”，系統自動匹配興趣相投的陌生人并添加進來一起聽歌。
設計思考：
自網易云音樂“一起聽”上線以來，深受廣大用戶的好評，原來聽著寂寞的歌曲并不會寂寞?；诓煌男枨螅那椴缓脮r，邀請閨蜜一起聽；有新歌發行時，邀興趣相投的好友一起聽.....，但是，并非每次都那么方便，需要好友資源、相同時間、同一個音樂應用等諸多條件，有時候邀請發出去之后，收到的只有尷尬。
網易云音樂的一起聽最新版本上線了“遇見陌生人”功能，這個功能能夠讓兩個彼此之間不認識的人同時收聽一首歌曲，對于有很多心事的人而言，這的確是一個可以讓你袒露心聲的好機會。和陌生人一起聽歌，還能通過聽歌來交友，實現了更多有趣的交流模式，讓用戶在聽歌的過程中找到志同道合的好友，不得不說，這個功能真的很貼心。
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應該讓很多屏幕的觀者都興奮不已?，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咨詢、用戶體驗公司、軟件界面設計公司
大家可以觀察到做交互設計或者用戶研究經常會借鑒心理學/社會學的研究方法去應用成熟的理論模型甚至建立模型、去“玩概念”，但可惜的是咱這一行大多數設計師都沒有這樣的教育背景，就算是所謂的“大廠公眾號出品”，也難免會有思慮不周的時候（對，我說的就是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盡管都有個“?！弊郑诮缑嬖O計上指的是不一樣的東西。前者是我們一般說的“帶黑色遮罩的彈窗或者頁面”，后者則指“同一個操作在不同的情況下，帶來不同的效果”，比如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咨詢、用戶體驗公司、軟件界面設計公司
作者：謝普·?？希⊿hep Hyken）
推薦理由：該書以當今客戶服務同質化嚴重、客戶對價格敏感等經濟環境為背景，深度解析為何客戶體驗是企業想脫穎而出的最佳工具。提出7步創造卓越客戶服務體驗的戰略。任何企業都可以運用這些戰略來提高客戶和員工的忠誠度，從而提供超越預期的服務。這樣可以幫助企業塑造優質形象，迅速形成優質口碑；創造獨特競爭優勢，超越簡單價格競爭；提高客戶忠誠，讓客戶購買得更多；讓員工和客戶都引以為傲。
作者：[澳] 羅伯特·杜（Robert·Dew）
推薦理由：本書出發點在于幫助企業如何實施、落地以及長期維持，如何獲取長久的市場競爭優勢，帶領讀者思考何為客戶體驗、客戶體驗為何重要，以及企業六大競爭優勢的基礎上從如何評估你的客戶體驗、如何打造遞增性客戶體驗升級、如何養成或改變你的客戶體驗三大方面進行詳實具體的介紹和分析，結合諸多案例，圍繞客戶體驗痛點解決的成功的和不太成功的案例，為讀者提供了一個豐富而實用的案例庫、工具包。
作者：李瀟
推薦理由：該書涉及的話題既有屬于基礎的根需求、功能架構、信息架構、交互設計、UI設計，也有更進一步的HC X（知識型UGC和信息型UGC）、HH X（人與人的交互體驗）、HB X（人與品牌的交互體驗），具有追求深度、追求卓越、展望未來、兼顧大小的特色，用戶即人，談用戶體驗，自然離不開對人的關注， 作為人的互聯網從業者，在打造產品時，如何在兼顧商業化的同時，用更溫暖的方式去打動人？用戶利益與企業利益的權衡，是一些產品正在面臨的問題，也是所有產品都難以回避的問題，作者選擇聚焦于“人”，這本書的文字能為身處困境的你帶來有溫度的思考。
作者：[美]肯·布蘭佳(Ken Blanchard)、[美]凱西·卡夫(Kathy Cuff)、[美]維基·哈爾西(Vick Halseyi)
推薦理由：該書作者肯·布蘭佳博士被譽為當今商界洞察力和思想深度的人之一，而他的著作非常貼近商業現實，往往是通過真實的商業故事呈現現實情景，闡述其深邃的商業理念和獨到的管理見解，令讀者在閱讀過程中不知不覺領悟到其中精髓。此次肯·布蘭佳博士在其新作《極致服務——如何創造不可思議的客戶體驗》中依然采用嫻熟的商業故事敘述手法，讓讀者在故事閱讀中領悟極致服務的理念價值。 極致服務是指要始終如一地提供理想服務留住顧客，從而提高企業的競爭力。簡單來說，就是企業通過一系列舉措令顧客感覺到備受關注，以此實現極致服務。
當我們設計Web表單時，往往用最直覺的設計經驗本能驅動我們去解決一些看似在界面設計中最簡單的問題，但每每到細微之處，又會有無數疑問從細節中冒出來給我們的設計造成困擾。
例如：在表單界面Label（標簽） 和 Input（輸入框） 上下還是左右排列合理、Label要不要加冒號、輸入框到底多寬合適等等......
以上這類問題看起來并不影響用戶完成任務，很久以來也少有人關心這些細微之處會不會對用戶有什么影響。
以至于，我表達想寫一篇探究這些細節的文章時，同事會偷笑說：你都開始研究標簽末尾要不要加冒號了嗎......，太冷了——真是個冷知識！
確實如此，這些偏門、細碎的內容，鮮少有人會去留意和思考。因此我在寫下這些分享內容時期望可以達到目標是：“冷知識雖然冷，但有用”。用我了解的這些表單設計冷知識：啟發你的冷思維、引出你的熱思考。
話不閑聊，我們開始討論第一個問題：
///
01.標簽末尾要加冒號嗎
有個表單細節不知道你有沒有想過，標簽末尾是否要加冒號？
這個問題在我前團隊發生過激烈爭論，有同事說：“不要加，占用間距，而且沒人會留意它......”,也有人說：“要加，從含義上講，冒號的作用就是提示上下文或總結上下文的停頓。加上之后能更好表示標簽與輸入域的關聯......."。
聽起來好像都有些道理，那到底誰更對呢！
首先，我們追溯一下 Web 發展史，早期可訪問性核對清單中通常堅持要標簽帶冒號，因為屏幕閱讀器一度必須依賴各種技巧才能理解標記不明的表單。
而隨著技術發展，Web表單使用“label”標簽（tag）可以做正確的標記，那么屏幕閱讀器就能通過標記（markup）把標簽（label）和相應的字段對應起來則無需再借助冒號。
不過在客戶端又有些意外！曾經 Windows Vista 指南中明確要求使用冒號， Mac Aqua 也有此要求但規則會稍靈活一些。這種情況是因為某些情況下屏幕閱讀器在桌面環境與可閱讀源代碼的網頁標記相比會遇到一些困難，桌面環境不會直接顯示代碼。也是這個歷史原因，造成 Vista 和 Aqua 各自都有大量其標簽包含冒號的歷史表單。因為實在沒有必要把它們全部改掉，直到今天客戶端的表單依舊延續這一規則。
通過Web發展史我們明白表單標簽帶冒號的產生是為了解決早期屏幕閱讀器的識別，如今的屏幕閱讀器技術已轉變為識別標簽的底層代碼，無需借助這種形式了。所以從這點來看要求標簽帶冒號已經站不住腳了。
那從情感角度分析標簽帶冒號的是否對用戶體驗有影響呢？
回到最開始，我和同事們的爭論……
先簡單說下答案，無任何影響！
在《Web表單設計·創建高可用性的網頁表單》中，作者（卡羅琳·賈雷特）曾經做過大量的表單測試，最終證明從未有一名用戶談論冒號是否出現，即使是有些在其他環境中很介意標點符號的人似乎在線上表單中也未曾注意到。
從以上兩個角度不難發現，無論是從技術發展還是情感體驗，都證明可不必要求表單帶冒號；因為可用性訪問清單不再有這樣的要求，用戶研究也證明幾乎沒有人會留意表單冒號是否出現。
這樣的結論，看似表單帶冒號是失敗了……，但這并不妨礙它作為一種習慣或傳統延續至今，無論在客戶端還是Web設計系統中仍然常見。例如：蘋果電腦的Mac系統，國內阿里的Ant Design Web設計系統。
因此，得到以下幾點建議：
如果你希望自己的網頁表單與流行的桌面環境保持一致，請使用冒號。
如果你已有大量使用冒號的表單，請保持繼續使用下去。
如果你在建立一個新的系統，你也可以索性拋硬幣決定，不過要嚴格遵循一種方法。
///
02.哪種標簽對齊方式更好
在表單中標簽與表單域的對齊方式，如果你的團隊已有明確的規范和使用場景，你只要拿來主義即可?？扇绻程煊赡阒鲗Фx一個新的表單規范時，不知道你會不會重新考慮哪種標簽對齊方式更好，怎樣區分使用場景！
通過科學實驗發現，無論是在眼動儀的熱圖，還是在許多可用性測試的觀察結果中，用戶在填寫網頁表單時視線主要集中在輸入框的左側。他們的視線幾乎不會落到輸入框的右側，甚至都不會瞟上一眼。
以此為基礎，我們在網頁表單設計中有3種最常見的標簽對齊方式：頂對齊標簽、右對齊標簽和左對齊標簽。你可能會說還有混合對齊標簽、內聯標簽、圖標標簽等，這些確實存在但并不是最核心的幾種對齊方式，它們基本是在這3種形式上變化，不脫離本質。
下面我們逐個分析一下：
1.頂對齊標簽：
馬泰奧·彭佐從2006年7月進行眼動研究發現，從標簽移動到輸入框只需50毫秒。比左對齊標簽快了10倍，后者需要500毫秒；比右對齊標簽方式快2倍，后者高達240秒。能迅速填完頂對齊標簽表單的原因之一，是因為眼球只需要在標簽和輸入框之間進行上下單向運動。
優勢：
最利于減少表單填寫時間（標簽和輸入框位置最為靠近）；用戶視線固定，動線一直向下（清晰的完成路徑）；節省大量橫向空間（可用于以多種方式組合的相關輸入框）。
劣勢：
占用額外的垂直空間（如果可提供使用的垂直屏幕空間較小，應當謹慎使用頂對齊標簽）；建議使用輸入框50%至75%的高度作為相鄰輸入框間距。
適用場景：
希望用戶快速填寫表單，完成任務；同時，當輸入項存在主次之分時，對標簽擴展性要求高。
2.右對齊標簽：
如果要盡量減少表單占用垂直屏幕空間，右對齊能提供快速完成時間。馬泰奧·彭佐的眼動研究發現，專家用戶和新手用戶掃視（眼睛運動）右對齊標簽表單的標簽和輸入框的平均時間分別在170毫秒和240毫秒，而填寫完成時間比左對齊快2倍。
優勢：
標簽與輸入框相鄰（方便快速填寫）。
劣勢：
右對齊布局造成左側不齊，影響了快速游覽表單的效率問題；若標簽文字寬度變寬，右對齊還存在靈活度問題。
適用場景：
既要減少垂直空間，又要加快填寫速度的場景。
3.左對齊標簽：
在頂、右、左三種方案中，左對齊表單填寫速度最慢。因為左對齊表單解析問題時眼球定位次數最多，用戶一般情況下都能將左對齊布局中的標簽和輸入框聯系起來，只是花費時間較長。根據馬泰奧·彭佐的研究，典型掃視時間為500毫秒，很長說明用戶經歷了沉重的認知壓力。
優勢：
容易游覽標簽；占用垂直空間較少。
劣勢：
標簽和輸入框的相鄰間距增大；適合于用戶不熟悉表單要收集的數據或問題無法分成易處理的內容組，左對齊標簽游覽表單問題會更容易。用戶只要上上下下閱讀標簽左欄，不會被輸入框打斷。
適用場景：
表單中存在較多的復雜或敏感信息，希望用戶放慢速度、仔細思考（在一些注冊類表單中較多使用）。
單從效率角度看，頂對齊標簽>右對齊>左對齊，但是根據應用場景，效率快并不是我們選擇標簽對齊方式的唯一的指標。
因此，得到以下幾點建議：
如果你希望用戶放慢速度，仔細思考表單中每個表單項，左對齊標簽是個好選擇，特別是含有大量可選輸入框或高級設置的陌生數據時；
而頂對齊標簽在一些國際化產品的表單設計時，會有更好的延展性；
至于，右對齊標簽雖然與表單域聯系緊密，便于用戶填寫，但是要考慮好標簽的長短不齊如何解決。能否精簡標簽內容，以及確定好表單與界面的邊距。
///
03.標記必填與可選字段的困惑
許多表單設計中，有個常見問題：是否應該標記必填字段？如果表單中的大多數字段或全部都是必填的，我們是否仍然應該標記它們？
先簡單回答：是肯定的，用戶有時需要通過必填標記來評估工作量，了解輸入信息量的最低限度。我會在下面具體解釋原因。
了解不標記必填字段的誘惑
通常，設計師會覺得每個必填字段都有一個標記是重復的、丑陋的、占空間，而且干擾界面，甚至可能看起來很擾亂（有認知負擔！）。因此通常采取以下一種或兩種策略：
1.在表單頂部顯示說明，說明中除非另有解釋，否則所有字段都是必填；
2.只標記可選字段，因為它們通常較少；
3.在某些特殊情況下，也會什么都不做：相信用戶會神奇地知道需要填寫什么字段；如果不知道，那么只需要點擊提交報錯即可。
這些方法有什么問題？如果你這樣想，我來告訴你
1.用戶一般不喜歡閱讀表單頂部說明。不難想象，用戶不太可能閱讀表單頂部的說明。表單字段需要自給自足，畢竟，每個字段都有特定指令——它的標簽，為什么用戶需要閱讀其他任何東西來填寫它呢？
2.即使用戶閱讀了說明，也可能忘記。你可能會說：用戶閱讀了頂部的說明，怎么就會忘記——這么簡單的事情？
的確容易忘記，特別是當表單很長或填寫表單被打斷時（這種情況在移動端很常見）。即使用戶記得，但這占用了工作記憶，增加了認知負荷。換句話說，你讓用戶完成任務更難了。填寫表單本身對用戶來說就相當有挑戰性——為什么要讓它更具有挑戰性？
3.用戶必須掃描表單以確定是否為必填字段。不難發現，無論是否在表單頂部包含說明，結果都可能相同，用戶會忽略或忘記。他們會掃視表單，找到一個標記為必填或可選的標識。
而且有些用戶甚至不會費心去環顧四周，他們只會做出假設。他們會想——“嗯，郵箱——不需要我的郵箱吧？先空著呢”。即使用戶沒有留空，也不得不暫停來思考一個字段是否需要填寫，減慢交互速度并使過程看起來更長、更乏味。
想要解決以上問題很簡單：標記所有必填字段。盡量明確和清晰展示每個必填字段，并標記它。當然，就像有些設計師所說：界面出現大量必填標識（紅色星號*）確實會增加視覺噪聲。甚至重復的星號 * 會帶來一些認知恐慌。但相比之下，兩害取其輕，這些負面因素是輕微的。
如何標記必填字段？
這里包含至少有兩種方式：星號*（紅色）和“必填”提示。星號*在網頁上已經很常見，用戶熟悉其含義。優點是它不占用太多空間，也看起來與標簽文字足夠不同，所以使用它。
可以使用其他標記形式嗎？當然可以，但是最好遵循市面上常見的形式（雅各布定律），這樣更符合用戶認知。
星號應該在字段標簽之前還是在字段標簽之后？
這不一定有實際影響，但將其放在標簽之前的一個原因是，只需掃視標簽的最左邊字符，就能輕松定位必填哪些字段。
星號*是一種視覺標記，應當仔細考慮表單中的標識位置。標識在標簽左邊能指引用戶迅速瀏覽界面，并判斷出必填項。如果在右側由于輸入框形式、長度各不相同，標識和輸入框對齊會導致難以瀏覽和判斷。
是否也應該標記可選字段？
雖然這不是強制性的，但標記可選字段確實減輕了用戶思考：如果沒有這個標識，用戶要環顧四周，并根據其他標記字段推斷該字段是可選的。如果“非必填”在字段標簽旁邊，那該任務會變得更容易。不描述可選字段，這沒問題，但這樣做會是一個很好的額外幫助。
為什么登錄表單沒有標記必填？
登錄表單很短，一般由兩個字段組成：用戶名和密碼，這兩個字段總是必填的。如果使用星號*，標記這些字段的成本很低，并不會出錯。但是，絕大多數用戶都使用過很多登錄表單，他們是知道要登錄需要輸入郵箱/用戶名和密碼的。所以，在登錄表單中，可以省略這種形式。
而在注冊表中不標記必填字段是危險的。注冊表單因產品而異——不同公司在創建帳戶時需要不同類型的信息。它不僅僅包含用戶名和密碼，所以請標記所有必填字段（包括用戶名和密碼）。
因此，提出以下幾點建議：
基礎前提，盡量去除任何不需要回答的問題，特別是涉及到用戶隱私的內容。可以更容易讓用戶填完表單。
為了增加表單填寫的機會，請盡量減少用戶需要付出的努力和他們需要記住的信息。有很多方面有助于解決這些問題，但標記必填字段（以及可選字段）是最容易的方法之一。
///
04.表單域提供一些默認值有必要嗎
先給出答案：這是肯定的！
在《選擇的悖論》一書中，作者巴里·施瓦茨討論了生活中選擇過多的影響。并提出策略應付無處不在的過多選擇。他特別敘述了智能默認的能量——即在滿足多數人需要的地方放置選擇——來幫助人們做出明智的選擇。
而在Web表單中也有很多地方能利用智能默認減少不必要的選擇次數或輸入，加速表單完成過程。所以，只要合適就在表單域中預先為用戶填寫你認為他們想要的輸入值。
通過提供合理的默認，能有效節省用戶時間，就是這么簡單。應用分擔了用戶思考或輸入答案的工作。填寫表單永遠不是一件有趣的事情，如果這個模式能把表單填寫的時間減少一半，用戶會非常感激。
你可能會問：默認值不是用戶想要的，誤導用戶怎么辦？
在設計有默認值的表單域時，你要思考默認值是否是大多數用戶可以接受的答案，如果不確信可以先去做一下用戶調研，了解用戶的心聲。
就算默認值真的不是用戶想要的，至少你也為他提供了一個示例來告訴用戶答案應該是什么樣子的。這一點也可以節省用戶幾秒的思考時間——或避免一條錯誤信息。
但并不代表所有的表單域都要給出默認值，我們只是盡可能的讓用戶節省時間。
如何使用：
在第一次向用戶顯示表單時，用一個合理的默認值預先填寫文本框、組合框或者其他控件。也可以使用用戶之前提供給應用的信息來動態地給出默認值（例：通過身份證自動識別出生日期；利用郵編，推導出對應省/市）。
如果只是因為你覺得不應該留下空白的輸入域，那么不要使用默認模式。只有當你有理由確信絕大部分用戶，在絕大多數情況下，不會修改這個取值時才提供默認值——否則，這將會給用戶帶來額外的工作！
///
05.輸入框的寬度如何設定
有一個容易被忽視但實則舉重若輕的問題，表單中輸入框寬度如何設定？
在表單設計中，對于 Checkbox、Radio 等控件，很明確必須跟隨內容自適應處理。但對于Input、Select等你會不會產生困惑，是定寬處理還是跟隨內容更好。
不知道你是否試圖這么理解過？輸入框作為用戶填寫信息的主要方式，其表現形式是否可以提供給用戶填寫表單的有用線索。
唐納德·諾曼的著作《設計心理學》中詳細講解過心理暗示方面的內容。而寬度的變化就是一種有效暗示。
在真實場景中，大部分輸入框是存在理想長度的，那么就應該向用戶暗示所需輸入內容的長度來減輕判斷負擔。
下圖就是典型案例，一個實際不需要花多少錢的金額輸入框在左圖中進行等寬處理，反而容易誤導用戶對輸入金額的判斷，造成一種不安全感。
表現形式要為用戶填寫提供有用線索，采用不同長度的文本框提供了暗示；這種暗示是一種有用線索，當輸入框長度長短不定時，用戶會很自然地思考為什么這樣；填寫輸入框時會自然考慮這些線索。
請注意！保證暗示效果的同時，不要設定太多的寬度，反而會讓表單顯得凌亂；太少又會讓表單看起來都像四四方方的盒子。最佳方法是找到適合產品的最佳模度值和數量。
什么是模度值和數量呢！
落在具體設計上要先梳理產品中常見的表單類型，然后設置一個默認寬度。以此為基礎來有規律的增加長度，并考慮清楚它們的適用場景；從而定義出不同的模度，最終制定出整潔有序的模度規范。這樣就可以讓一線的設計師們跳過部分繁瑣磨人的細節思考，快速搭建出合適的表單寬度并合理有效。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
設計語言最底層是項目設計語言，具有典型特征和主題，比如醫療項目凸顯專業冷靜，節日項目凸顯熱鬧氛圍。往上一層是產品設計語言，強調個性品牌，比如小視頻的設計深色更沉浸，電商從結構到色彩都凸顯熱鬧。很多產品隨著發展，形成一些系列平臺服務，平臺設計語言確保服務“統一規范”。最頂層是生態設計語言，跨設備跨平臺和硬件呈現的設計語言。
設計動手前，按照風格基調具象化拆解分析必不可少，每一個元素的表達手法都要定位清晰。
圖標體系化，多場景驗證一致性，發現方案一不夠極致，造型復雜；方案二具備良好的一致性，但破壞了物體固有的結構，影響識別度。
在一致性的前提下，嘗試簡化、提高識別度。巧妙的將光影和結構交匯，極簡到2個圖層呈現主體；語義清晰識別度高；角度漸變光影帶來舒適親和感，15°x角度的精準把控傳達專業的品牌特性。因此總結出圖標繪制要遵循的法則為識別性、品牌性、愉悅性、一致性。
初期直播品牌色繼承百度App品牌色，隨著業務逐漸中臺化，需要專屬直播色。運用色彩心理學傳遞給人不同的情緒及心理感受，尋找直播的專屬色相，而活力、溫暖的紅色色調，更能體現親和有力的產品氣質。
紅色也有冷暖之分，此時提高色相、飽和度的顆粒度，H色相以350°為起點，以2°遞增或遞減，S飽和度以5°為階梯，生成更多色階（保持相同B明度100），在多界面和真機驗證，得出直播專屬紅（H350 S80 B100），冷暖適中符合平臺屬性。
這種量身打造的稀缺材質運用在運營玩法上，如紅包雨玩法，即能凸顯平臺專業用心的態度，又能強化用戶消費行為轉化，助力變現增長。
用戶激勵體系，采用3D玉石潤澤質感+動態折射光影，體現有內涵不張揚的泛知識調性，凸顯用戶獨特身份感。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：百度MEUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
常規工作中，需求往往由PM發起，UE團隊到底如何跟PM、FE等團隊成員協同，達成目標共識，是我們值得討論的。
因此建立一套科學的模型，通過對目標的設定來倒推過程，結合定性和定量研究，與項目組就目標可以達成共識，并且更加準確的反應出產品目標中的用戶體驗質量，這套模型就是GSM模型。
///
GSM模型的簡介與定義
“GSM”是Google提出的一種自上而下度量用戶行為的方法，通常用于衡量產品/項目目標的實現程度。通過對目標的設定來倒推過程，精準設定指標體系的一種量化研究方法。適用于產品設計中的各個角色。
目標：需要解決的問題，通過對產品（項目）目標拆解推導出用戶體驗目標，體驗目標輔助產品目標達成；
信號：設計目標實現后所產生出的現象，設計目標是信號的必要條件；
指標：是對用戶現象的量化，也就是信號所得出的可衡量的數據化現象。
///
GSM模型的使用場景
GSM模型可適用于產品設計中的各個角色，對交互設計師尤為重要，交互設計師作為連接產品、用戶、設計的中間一環，不斷在業務和體驗之間博弈，尋找平衡點。
通過GSM模型對產品目標進行分析，結合業務目標與用戶需求，找到改進機會點，在設計中幫我們斧正設計思路，對方案不斷優化，上線后進行方案效果回收。
GSM模型帶來的價值
綜上所述，GSM模型基于項目目標，找出設計目標。并且可以辨別設計的優良。
///
GSM模型的具體實施步驟
通過對目標的設定來倒推過程，并精準設定指標體系。
| step 1 識別并明確目標（Goal）
業務目標、用戶目標、設計目標是什么？
用戶要完成什么任務？我們希望他們按照什么路線走？希望他們執行什么操作？
這里以手機百度APP智能小程序業務端——創建小程序表單項目改版為例，提高表單審核通過率是整個項目目標，通過拆分項目，設計目標為表單填寫更快速和表單填寫更準確。通過確定設計目標繼續推到用戶表現。
| step 2 推導目標對應的表現（Signal）
什么用戶行為/態度指示了目標達成？什么樣的感受與目標失敗/成功相關？
從目標——信號可以是一對多的關系，根據用 戶行為在不同的行為階段會有不同的信號表現，以用戶不同階段觀測用戶的不同行為表現。
進入 —— 通過各種途徑進入頁面
發現 —— 在該頁面中瀏覽、查找自己所需要的信息
辨別 —— 然后通過圖片、標題等內容以及設計形式來識別有效信息
行動 —— 找到后用戶想了解詳情，點擊鏈接進入
這里還以手機百度APP智能小程序業務端——創建小程序表單項目改版為例，將設計目標轉化為用戶行為。
| step 3 找出關鍵的數據指標（Metric）
依照用戶的行為表現，觀測對應的數據指標，通過這些可量化、可衡量的數據指標進行數據分析并指導下一步的優化迭代。
1. 進入 —— 作為用戶進入的頁面，在這一步經常發生的問題是退出，往往會產生兩個對應的指標
a. 作為用戶在網站或APP的著陸頁，用戶離開為跳出
b. 非網站或APP的著陸頁，用戶離開為退出
往往，在這一行為中“跳出”指標可以衡量頁面內容傳達與用戶目的匹配程度，是否符合用戶的心理模型，這也是絕大多數網站首頁最重要的數據指標之一。
2. 發現 —— 用戶來到頁面中都要先瀏覽的過程
在這一步，設計師關注的問題是頁面中的用戶視覺流，關鍵信息能否被用戶快速鎖定。
關于識別性的指標，歸納出3點來進行衡量：
c.人均點擊次數（適用特殊控件，如篩選器等）
4. 行動 —— 用戶在站內內容的點擊
在首頁的分流數據中，作為設計師主要關注兩個指標：
a.不同內容的點擊占比
b.其后續路徑中的目標轉化質量
再次回到我們的工作案例中，根據用戶行為表現拆分成數據指標。
綜上所示，通過表單可視化、精準引導、組件升級的方式，完成項目與設計目標，最終改版成功。
///
結語
GSM模型是一種綜合數據驗證模型，在使用過程中可以結合頭腦風暴、市場調研、可行性測試等方式共同使用。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
業務性強，內容復雜度高是To B產品的典型特征。新用戶需要快速認知平臺能力并順利上手，老用戶則需感知信息的變化、功能的拓展并迅速響應。體系化的幫助是通過在操作的不同階段提供差異化的引導及反饋，助力用戶在應用中成長。
通過大量的案例積累及系統調研，發現“幫助”并不是單一的某個功能，而是一種體系化的能力，需要通過不同手段來實現。概括來說就是“在產品使用不同階段為用戶提供恰當的提示與指引，通過組件的靈活應用及能力創新，幫助用戶降低認知成本，提升操作效率?！?
用戶對產品的應用周期經歷前、中、后三個階段，每個階段的設計目標都各不相同：操作前注重提升用戶的全局認知，深化理解，助力精準觸達；操作中助力提效，讓用戶知道做什么，怎么做；操作后明確反饋，幫助用戶明確結果。
用戶有新老之分，對系統的熟悉程度及應用訴求不同。因此針對不同用戶各階段的使用訴求進行場景化的拆分，提供差異化幫助。
我們到陌生的地方會找導視標識或者找人尋求幫助，新用戶到平臺內也會面臨同樣的困境，遇到問題無從下手時會尋找含有【幫助】【客服】字樣的內容，那么幫助中心、智能助手這類有明顯特性的功能則會成為用戶遇到問題時的第一選擇。通過業務思考及行業調研，以簡潔、高效、情感化為目標最大化的發揮其屬性優勢，讓用戶在使用過程中更易理解和接受，平穩有效的幫助用戶渡過新手期。
1、幫助中心
幫助中心，一個時常被忽略并被嚴重低估的功能。它是平臺全量信息集合地，不僅能幫助用戶系統了解平臺概況，也能引導用戶行為，樹立品牌形象。為保證用戶高效、便捷的獲取幫助信息，在頁面表現上需突出內容本身，忌過度裝飾。從設計角度來看，一個好的幫助中心應該符合以下條件：框架簡潔清晰、信息突出并輔以錨點定位。在框架設計上一般將頁面分為導航區、內容展現區兩部分，導航與幫助內容對應性強，層級簡單，能讓用戶在短時間內了解平臺能力構成；幫助文檔內容一般復雜冗長，錨點定位可以充當文章大綱，輔助用戶精準定位。
2、智能助手
通過內置的幫助和指導性說明來解答用戶使用產品過程中遇到的簡單、共性問題，降低人工客服響應成本。智能助手包含兩部分：入口與懸浮窗口。入口一般懸浮于頁面右下角，點擊后觸發懸浮窗口。
市面很多助手能力較單一，僅能機械處理通用問題，無法提供多樣化幫助，很容易讓人覺得是個沒啥用的擺設，對它慢慢失去信任。為重新喚起用戶的信任，需要在設計上注入一定的生命力，讓用戶覺得易接受、有選擇、有溫度，從而真正用起來。
1）懸浮窗口能力多元化。作為承載智能助手核心能力的懸浮窗口，優化方向有以下三點：首先，智能助手與用戶的交流不再局限于單純的問答，而是根據賬戶屬性向用戶提供高頻問題集合，并根據用戶的回應拓展更多問題，提供多維化的幫助。這個主動性的幫助不僅讓用戶感受平臺的溫度，無形中也降低了用戶的思考成本，更快的熟悉平臺能力。
其次，每個問題旁邊都提供“是否有用”的按鈕供用戶評判。此功能不僅為平臺答案提供了優化空間，也強化了用戶對平臺建設的參與度，讓助手與用戶共同成長。
最后，對話窗口也可拓展輔助能力，例如常見問題、快訊、快捷入口等，為用戶所想的同時也提供更便捷的站內流動通路。
2）入口形象IP化、情感化。除了自身能力外，入口的設計則會提升功能的存在感，從而吸引用戶的關注。首先品牌ip形象的植入會讓入口更生動，在喚起用戶注意的同時強化品牌印象。其次擬人化的主動問候能提升平臺的親切感，拉近與用戶的距離。
新用戶對平臺相對陌生，恰當的引導能讓他們快速關注重點。老用戶對平臺的定位及能力相對熟悉，目標性更強，但在應用同時也抱有更高期待。因此恰當的引導能幫助他們快速了解平臺變化并精準觸達。作為產品設計者，也希望對用戶行為進行有意識引導，讓用戶能發現、探索平臺新能力，或能夠按照我們的希望使用產品。公告彈窗、新手引導、全局提示這三類方法可幫助用戶高效獲取信息并助力精準觸達。
1、公告彈窗
常用于系統升級告知，以模態彈窗表達，讓用戶聚焦當前內容并支持跳轉了解詳情。公告樣式根據內容細分為三類：版本更新提示、重點升級告知、常規通告，不同類型需根據信息量多寡差異化表達。設計時可輔以插圖或其他視覺元素烘托氛圍，并在文案上注入情緒化的表達，從而提升用戶的關注度。
1）「版本更新提示」承載簡單介紹內容，讓用戶關注且快速獲取變更信息。
2）「重點升級」當有若干重要功能更新或新增時，可用此形式突出重點。
重點內容露出建議2-4組為佳，彈窗寬度可根據內容適配。
3）「常規通告」常用于文案較多的場景。設計上需要弱化視覺氛圍，突出內容本身。
2、引導類
針對局部功能升級的提示說明，一般與元素綁定關系較強，可讓用戶直觀了解關注點，提升功能觸達率。雖然此類引導輕量便捷，容易幫產品提升數據指標，但要注意適度應用。根據功能重要度、操作復雜度將引導總結為分步式、氣泡、閃點、操作示意4類。
1）「分步式引導」常用于頁面多個功能升級的引導組。當頁面有多個升級點，直接平鋪會讓頁面臃腫不聚焦。為了讓用戶高效獲取信息，建議一次僅顯示一條，通過「下一步」操作，逐步喚出剩余引導。為避免步驟過多導致用戶疲勞，建議最多不超過5步。
2）「氣泡式」相對輕量的引導，有足夠的提示性但不影響其他功能操作。
3）「閃點提示」微輔助型提示，常與氣泡引導配合使用。在需要關注的地方閃爍，點擊閃點后喚出關聯氣泡提示。不對用戶造成視覺干擾，又能引起一定的關注。
4）「操作示意」當無法用圖文清晰描述操作路徑時，以動態形式表達。
3、全局提示
重點信息的匯總或提示。此類提示完美融合于頁面，醒目且對操作無干擾，用戶可根據披露內容判斷是否處理。通過警示、徽標的應用向用戶傳達信息的變化并提供快速觸達的能力，無形中提升用戶響應效率。
1）「警示」不同顏色的提示條。常作為前置提示存在于頁面或模塊頂部，為用戶順利操作提供指引性幫助。既不打斷用戶當前操作，又足夠明顯，一般需手動關閉或事件結束后自行消失。不同顏色屬性不同：一般藍色代表消息通知、綠色代表成功、橙色代表警示、紅色代表錯誤或異常等情況。另外，也可作為反饋應用在一些需要明確指示的操作后場景，此處暫不展開討論。
2）「徽標」形態各異的小紅點。常出現在圖標、按鈕右上角的紅色圓點、數字或文字，簡單且醒目。表示內容更新或有待處理的信息，此類提示符合用戶心智，無需教育就能向用戶精準傳達提示意圖。
使用時注意無數字與有數字的應用場景。有數字的徽標給用戶帶來的心理壓力會更大，也會更吸引用戶注意力，同時需注意數字長度控制。
存在于操作的具體任務中，通過提示、推薦、預置信息等方式降低用戶的認知及操作成本，提升填單效率。
1、文案提示
平鋪在元素附近，對重點或復雜功能提供直觀描述或建議。帶有引導性的文案處理，會促進用戶優化填寫方案，輸入更合適的內容。應用類型有三：重點提示、輔助說明、占位提示。重點提示與輔助說明使用戶無需猜測；占位提示可使用戶能夠快速明確輸入規則。因表達側重不同，表單設計時三者搭配效果更佳。
2、工具提示
此類信息作為文本解釋層級較低，無需直接展示。通過懸浮或點擊元素觸發對應說明，以氣泡形式出現。觸發式的展現既能避免非必要信息堆疊導致的頁面臃腫，又能保證需要的時候有跡可循。
當一個系統背后的產品設計者考慮足夠全面，能夠預判用戶的預期，那么它就能主動的給用戶提供建議和幫助，甚至幫助用戶自動執行一些任務，最大化減輕用戶的決策壓力。但值得注意的是，“智能化”需要一定的產品能力及豐富的數據作為支撐，設計時需結合實際情況應用。
1、信息預置
系統根據賬戶屬性自動為用戶預置內容。如下左圖可見，僅需要填寫一條內容，其他對用戶利益無損的內容可通過預置選項來提升填單效率。
2、智能推薦
此類設計的前提是平臺有足夠的數據積累，通過大數據或業務特色為備選內容打標簽建標識。常用的設計方法有兩種-為用戶提供可視化標簽，助力用戶快速決策；交互手段簡化，由多信息錄入變為直接選擇，強化推薦內容展示性，從而降低操作中的思考和錄入成本。
場景一：「幫助決策」
表單中有大量需要用戶錄入的字段，在無任何參考的情況下用戶用于決策的時間及輸入內容的合規性無疑對填單效率造成一定影響。下圖可見推薦標簽能幫用戶提供方向及邊界，輔助用戶決策，降低思考成本。
場景二：「提升填單效率」
以單元創建為例，傳統路徑如下：新建>填寫表單>保存>再次新建>再次填寫表單…以此往復。用戶每建立一個單元均需要把同類型的內容填寫一遍，耗時費力。而智能推薦將常規表單輸入變為模版選擇，僅需2步就可完成多個內容創建：輸入關鍵詞>選擇模版。選擇和瀏覽的成本遠遠低于數據的頻繁輸入，模版設計則通過簡潔的樣式及內容層次化的展現提升信息獲取效率。通過路徑及交互方式的轉變，上線后數據反饋操作效率大幅提升。
3、預覽能力
當操作過程較為復雜或結果難以預測時，可視化的預覽可及時展現結果樣式，方便用戶實時調整，提升操作安全感。
及時響應操作成果，將功能的運行情況、數據的對錯反饋給用戶，及時有效的幫助修復輸入中的問題。常見的反饋有以下四類：toast、表單錯誤校驗、模態彈窗、獨占式頁面，每種樣式因干預強度不同而適用不同的場景。
1、Toast：一般3s左右消失，因體積小、展示位置靠上、自動消失等特點時常被用戶忽視。常用于操作結果、系統性等等無明確后續指引的反饋，例如“提交成功”、“操作失敗”、“服務器無反應”。
2、錯誤校驗：當表單出現輸入錯誤時，按照就近原則在錯誤附近為用戶展示明確的提示性消息，糾正和引導用戶的輸入內容。
3、彈窗提示：提示性和阻斷性都很強，能夠讓用戶聚焦信息本身。通常提示內容可為用戶提供指向性引導，需要強關注。
4、獨占式反饋：提交后頁面切變為獨立展示的頁面級狀態反饋。比彈窗的阻斷性更強，信息獲取更沉浸。在設計時建議搭配狀態插圖強化氛圍，并提供操作按鈕為用戶提供通路。
幫助體系的出發點就是在盡量降低人為干預的基礎上，減少用戶在不同使用階段中的刻意思考與尋找，從而提升操作的順暢性及用戶的認可度。綜上就是在不同操作階段可用到的設計方法，盡管有些手段并不起眼，但也正是這些點滴的聚集和系統的應用為用戶帶來無聲的幫助，讓B端產品使用體驗變得高效且富有溫度。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn