比如以登錄為例，當你把密碼輸錯后，網站清空你剛剛才填好的表單，是不是非常讓你崩潰？刪除所有數據對用戶來說很煩人，這會讓你必須重新輸入用戶名和密碼，即便只是拼錯了密碼而已。

因此，任何專業的用戶體驗設計師不僅應該考慮順利的流程情況，還應該考慮失敗時應該怎么辦。

一、錯誤提示

錯誤提示應該讓用戶容易找到原因并方便理解。否則，他們可能沒辦法解決這些錯誤。所以對于設計師來說，一個非常重要的目標是要設計出一個易于解決錯誤的流程。一個錯誤信息應該能清晰的解釋到底發生了什么，如果可能的話，最好也提供解決方案。

左邊的錯誤信息很清晰的解釋了發生的問題，右邊的錯誤信息對用戶來說非常困惑。

1.1什么時候告知用戶發生了錯誤比較好？

當用戶出錯后，首先要考慮的事情就是應該在用戶填表時提醒還是最后通知用戶。錯誤預警中有三種常見模式：

• 內聯/實時：在輸入時或移開焦點后立即提供反饋。
• 提交后/客戶端：當用戶點擊提交按鈕之后
• 服務器端：當請求發送到服務器后再返回反饋給用戶

這些方法中的每一種都有其優點和缺點。

1.2內聯驗證

一般來說，當表單非常短小時用內聯驗證，因為它允許在內存中的數據仍然最新時更正錯誤。

你可以用內聯驗證立即告訴用戶哪里錯了。

”盡可能的進行內聯驗證“”這種類型的錯誤消息很容易被察覺“，此外，輸入完成后立即告知錯誤，對用戶的交互成本最低——UX專家Rachel Krause

另一位專家Luke Wroblewski建議，當問題的答案不明顯時，可以使用內聯驗證。例如，在選擇用戶名時，用戶可能不知道哪些用戶名可用。在這種情況下，在用戶輸入數據時立即告知錯誤可能會有所幫助。

1.3提交后驗證

另一方面，當表單很大且需要保持關注時，你希望幫助用戶保持專注，而不是通過不斷顯示錯誤來打斷他們。

“使用內聯驗證，用戶必須在兩種截然不同的思維模式之間反復切換:填寫表單和糾正錯誤。這減慢了用戶的速度，增加了認知努力，通常會降低用戶的滿意度?！盝essica Enders在她的書《設計UX:表單》中寫道

1.4服務器端驗證

服務器端驗證是最不友好的方式，但卻為網站提供了很高的穩定性。當需要二次檢查用戶的數據時，這種方法最有效。

1.5如何提示用戶錯誤？

錯誤提示告訴用戶他們做錯了，但是他們究竟做錯了什么，要如何修復它？很顯然，清楚地說明錯誤，而不僅僅是顯示Error:90803，對用戶有很大幫助。

使用用戶能理解的話，而不是用專業術語

1.6使用積極語言而不是消極語言

錯誤提示措辭要使用積極語言而不是消極語言。例如，如果用戶遺漏了一個字段，與其說”該字段不應該是空的“，不如說”請填寫此字段“。當使用積極語言時，用戶不會因為一個錯誤而受到責備，這能減少用戶的焦慮感，減少流失。

1.7必要時提供幫助

在某些情況下，用戶無法自己修復錯誤，他需要額外的幫助。例如，當用戶無法登錄時，大多數應用只提供找回密碼，而沒有找回用戶名。但事實上，用戶名和密碼都可能會忘記。因此，在這種情況下，嘗試提供所有必要的操作和信息資源來幫助用戶解決問題。

二、標簽

標簽是表單可用性最關鍵的組成部分。如果標簽不清晰，那么其他元素就算把可用性做得再好也沒意義。所以，不要讓用戶來猜測這里面到底要填什么內容。

不要用一些模棱兩可的詞，比如”數字“可能會讓人感到困惑，一定要明確意思。

2.1將標簽放在輸入字段的頂部

許多研究表明，將標簽放置在輸入字段的頂部可以幫助用戶更快地填寫表單，因為它允許用戶遵循一條垂直線而不是Z模式。但是，如果它占用太多的垂直空間，您也可以使用浮動標簽。因此，如果你希望用戶更快地填充表單，請將他們放置在字段的頂部。

將標簽放置在字段的頂部和使用浮動標簽，這兩種方式都很有效

2.2將標簽放在輸入字段的左側

另一方面，當你詢問用戶比較復雜的問題，用戶需要更多時間思考問題答案的時候，研究表明將標簽放在輸入框的左側會比較好。

當用戶需要思考答案時，將標簽放在輸入框的左側會更好

2.3標簽應該是可見的，無論什么輸入狀態

無論你用什么方式，確保當用戶填完內容后，標簽是可見的。因為，當用戶需要再次確認表單內容的時候，他們不用刪除填好的數據來查看系統需要他們填什么。

不管輸入狀態如何，標簽都應該是可見的

2.4減少不必要的輸入項

要填的表單越多，用戶就不愿意填完它。所以盡可能地為用戶減少不必要的輸入項。如果實在做不到，可以將必填和非必填的字段區分開，減少用戶的負擔。

2.5可見性

不管狀態如何，字段都應該是清晰可辨的。此外，活動字段和非活動字段之間的區別應該要明顯。

輸入字段應該有高對比度，在所有狀態下都是可見的。

2.6自動激活PC端表單的第一個字段

自動激活表單的第一個字段，這可以提高處理效率，避免用戶額外點擊。

2.7幫用戶預先填好

在某些情況下，你可以幫用戶預先填好字段。例如，可以很容易地檢測到郵政編碼，或者某些數值可能是頻繁的。在這些情況下，為用戶填充字段。

2.8格式

含有大量小數的數字很難讀懂。因此，當要求較大的數字時，需要考慮添加格式以支持可讀性。例如，在詢問卡號時，使用自動格式化:讀取5678-9876-9738-8394比讀取5678987697388394容易得多。

此外，當請求需要特定格式化數據時，要包含一個實例，讓用戶準確理解要填什么。

幫助用戶了解如何格式化數據

2.9表單區域大小

輸入框的大小應該要與所填的內容長度相匹配。比如，當要用戶填寫用戶名時，如果顯示的填寫區域是一個長段輸入框會讓用戶感到困惑。另一方面，如果你希望用戶寫一些反饋，但只能看到所寫內容的最后一小段，那就很難用了。（彩云注：我就經常在一些體驗不好的產品上碰到過這種情況，簡直太難受了。）

如果你不能準確預測信息的長短，比如留言反饋，建議表單區域最好是能在用戶填寫內容觸碰邊界時，自動變高。

輸入字段的大小應該與它預期的數據大小相對應

2.10為桌面系統設計靈活的表單

在鍵盤和鼠標之間切換很煩人。在理想的情況下，用戶應該只使用一種媒介來填寫表單，但有時，這是不可能實現的。因此，如果用戶需要多種媒介來填寫表單，至少要盡量減少切換。為此，將需要同一種工具的輸入組合在一起。

另外，當創建一個網頁表單時，要確保用戶可以只使用鍵盤來瀏覽表單——使用TAB和方向鍵。

2.11為移動端系統設計靈活的表單

當在移動設備上時，將你顯示的鍵盤與用戶必須輸入的數據相匹配。我們經?？吹叫枰獢底宙I盤的輸入可以很好地實現這一點，但幾乎很少有APP顯示支持輸入電子郵件地址的鍵盤。

支持通過顯示正確的鍵盤輸入電子郵件

三、下拉菜單vs單選按鈕

下拉框的使用比單選按鈕更有挑戰性，因為它需要額外的點擊來打開它們。此外，用戶無法提前看到選項，這可能會讓他們感到困惑。因此，如果你只有少量的選項，使用單選按鈕。如果選項的數量超過4個，下拉菜單的效果會更好。

3.1復選框

通過勾選復選框，用戶應該是同意某些內容。我的意思是，他們應該說，“是的，我想要這個”，而不是，“是的，我不想要這個”。不幸的是，我經?？吹接姓`導性的復選框試圖在創建賬戶時欺騙人們訂閱他們的產品。當你不想訂閱他們的通訊時，你又必須勾選復選框，像這樣的伎倆對信譽是不合適的，所以不要動心使用它們。

通過勾選復選框，用戶應該同意某些內容，而不是確認他們不同意。

四、結構

一個結構充分的表單就像一個與用戶的良好對話。所以記住這一點，仔細規劃結構。

4.1從簡單的問題開始

從簡單的問題開始，從用戶已經很清楚知道答案的問題開始，像名字、郵件這類。然后再循序漸進問稍微復雜的問題，像賬戶信息之類的。

首先，一個很自然的順序，當你第一次見某些人的時候，你會找一些比較好切入的問題，比如叫什么名字啊之類的。其次，當用戶已經填了一些字段之后，那么之后會增加他填完表單的機會。

4.2創建邏輯信息塊

將不相關的信息按邏輯分組。例如，你可以將結帳表單分為“個人信息”和“帳戶信息”組，將信息分組可以幫助用戶一次只考慮一個主題。

通過對相關信息進行分組，使表單可被快速掃描

4.3單步VS多步表單

當你有很多問題要問的時候，你可能想知道哪一個最有效：單步流程還是多步流程。一般來說，單步表單的轉化率更高，因為它看起來更小，而且不會勸退用戶。如果你詢問基本信息并希望用戶快速填寫表單，單步表單就非常不錯。

當用戶被要求必須填寫更多復雜信息時，多步表單會更好。為了幫助用戶在進行多步驟填寫時不至于失去耐心，可以給到進度條，提示還剩多少步。

4.4單列vs多列布局

一般來說，用單列布局會更好，因為可以幫助用戶更好地掃描，也可以盡量減少用戶遺漏填寫。

但當用戶多次填寫同一個表單時，他們更喜歡多列表單，因為這樣不會浪費時間滾動。一般來說，在B端應用中這種多列表單會比較合適。

五、按鈕

設計可用的按鈕對提高轉化率至關重要。如果按鈕上的文字內容比較模糊，會容易勸退新手用戶。

根據用戶按下按鈕會發生什么來命名按鈕

5.1提高用戶的容錯率

對于更復雜的表單來說，按鈕最重要的一點是，應該有提交和取消表單的單一方法。用戶應該至少有補救的機會。舉個例子，如果用戶點了在線幫助時，他已經填好的數據不應該被丟失。或者，如果用戶由于意外點擊了按鈕，請求不應該被提交。

5.2主要按鈕和次要按鈕應該很容易區分

為了避免點擊錯誤的按鈕，用戶應該能比較容易地區分主要和次要按鈕。另外，最好不要只依賴顏色，樣式上最好有比較大的差異。

讓主要和次要的按鈕樣式上有比較大的區分度

5.3正確的標簽按鈕

按功能明確地標注按鈕。例如，如果按一個按鈕可以創建一個賬戶，在按鈕上的文案叫”創建賬戶”要好過“提交”

總結

當用戶打開表單時，他首先肯定是想要填完它的。嘗試幫助他們而不是用糟糕的設計給他們設置障礙。

不幸的是，這里面提到的許多錯誤，并不需要多么高級的技巧，而是因為設計沒有同理心。仔細思考你的設計流程，檢查是否能讓所有內容對不同背景和專業知識的人都是清晰的。

通常來說，一般要達到以下目的，大多數指導原則都來自這些規則：

• 用戶應該只輸入一次數據
• 用戶應該填盡可能少的信息
• 用戶應該只需要記住少量的信息
• 用戶檢查和恢復錯誤內容應該要很容易

原文地址：彩云譯設計（公眾號）

作者：彩云Sky

轉載請注明：學UI網》想把表單設計做到極致，居然有這么多細節需要注意，學到了！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

話說自從著名資本家胡曉波先生對訓練營的同學下達堅持打卡兩年送一臺蘋果手機的許諾之后，同學們紛紛戰意滿滿，激情四設，每天就是手機碎片+1，手機碎片+1 的做練習…而本意是激勵大家好好練習的波哥，整日憂心忡忡，省吃儉用…好怕自己兩年后被原地榨干…

為了更好的協助大家吸資本家的血，豐富自己的武器庫。本次教程整理了八個由易到難的 LOGO 設計方向與相應的 Ai 技法，大家可以用闖關的方式一各一個的逐個攻破，體驗感會更好哦！話不多說，我們開始吧！

文章末尾另附視頻版本，對步驟有疑惑的同學可以跟著一起實操一遍，嗯，是真的想教會你呢。

PS：本文所有案例均來源于網絡，只用作分析技法。

首先出場的是一個雪花造型的 logo，復雜的線條紋路讓它看起來既神秘又迷人，雖然看起來很麻煩，但其實我們很容易就能發現它的規律性：

1. 由六個相同的單一元素旋轉復制得到；

2. 線條傾斜角度均為 60 度。

OK，掌握了這個規律，我們用網格大法很輕易就可以將它繪制出來，來，上步驟！

首先我們先畫出網格，用幾條等距的直線，然后群組整體旋轉 60 度復制左右兩組，即可得到。

想要做這種傾斜角度相同的線條，網格可以幫助你更好的進行規范。

然后我們沿著網格將單一元素的路徑用鋼筆工具繪制出來，這里需要注意兩點：一是每一個端點處最好對齊網格的點；二是有轉折的地方要一筆連過來，方便后面加圓角處理。

畫好路徑后我們將它轉曲，然后添加圓角，注意添加圓角的規律，一般外圓角會比內圓角大一些，而且相同的角度一定要設定相同大小的圓角。

單一元素處理好之后，我們把它沿著中心點旋轉復制 60 度繞一圈，就可以得到我們想要的圖形了，一般操作就是復制一個然后 CTRL+D 進行重復即可。

最后添加顏色和排版就可以了。

一般越復雜的 logo 想要做的出彩，往往都需要一些規則性在里面，而網格能夠很好的幫助我們去實現這種規則性。

這是今年意大利申辦 2030 年世博會的 LOGO，整體造型由羅馬古城門向內進行線條發散組合而成，寓意各國文化的友好交流。這種線條混合發散的 LOGO 既簡單又出效果，用混合工具即可輕松完成，下面我們來看一下在制作過程中有哪些需要注意的點。

首先我們將需要混合的部件準備好，也就是建筑的外輪廓以及大門的外輪廓。注意一定要保證左右對稱，否則混合起來會十分混亂，然后下面的底部先不要連接上。

這一步需要注意下面連接處不要合并，不然會出 bug。

選擇混合工具，分別點擊城堡和大門，將指定步數改為一定的數值，數值越大，越密集，這里設定為 35。然后就得到了向內混合發散的感覺了！

混合完成之后我們擴展出來，將最外圈輪廓直接向外擴大復制出輪廓線即可。

最后我們整體進行轉曲，然后添加顏色就搞定了！可能有的同學會覺得這種多線混合的 logo 過于復雜，會不會不太好應用，但其實這種屬于活動型 logo，并不需要用個五年十載，活動型 logo 更著重考慮當下，可以做得更個性，一切以視覺為出發點！

看完了國外的，再來欣賞一下這個極具中國風的湖州城市 LOGO。這個 LOGO 的亮點在于它的正形背景部分是由不規則的水墨感條紋組合而成的，文化氣息拉滿的同時讓圖形更加活力生動，我們來看看這種非對稱條紋該怎么繪制。

首先我們將橢圓部分的線畫出來，第一步找到最高點和最低點，然后用混合工具進行混合，得到由曲線逐漸變成直線的過程線段。

然后手動的將各個線條擴大到橢圓輪廓的位置，并調整好粗細和間距。

到了最關鍵的一步了！我們將每條線的描邊配置改為這個不規則的樣式，在描邊窗口最下面就可以找到，記得適當調整粗細保持過渡自然。

然后我們把每一條線都改成這個描邊樣式，并將下半部分水波紋的地方也繪制出來，注意下面的地方描邊可以調的細一些。

畫好背景后，我們將負形部分的塔形建筑放到條紋的中間，并居中對齊，改為白色。

光變成白色肯定不行！我們要的是鏤空！這里直接選擇所有圖形，然后用路徑查找器里面的分割，可以將所有圖形分隔開，然后用魔棒工具選擇白色部分，直接 Del 刪除即可。

最后加入漸變色！效果就拉滿了！這種非對稱式的線條相較于普通的線條，更加靈活生動，也天生自帶中式筆觸的感覺，以后大家碰到中式 logo 的命題，可以考慮嘗試一下這個風格。

這個 LOGO 在 2D 平面的基礎上，融入了褶皺感 3D 立體的感覺，同時它的組合結構是類似于飄帶這種飄逸柔和的造型，比普通的方形更加優美。下面我們來看看如何做這種飄逸的結構以及如何進行視覺 3D 化的實現。

其實如果你的鋼筆工具玩的 6 的話，直接畫也是可以的，但是相信在座的各位鋼筆都不太行，甚至很多同學經常被只會 Flash 的胡曉波嘲諷，那能忍嗎？這里教大家一個曲線救國之路，先畫一條直線，然后選擇扭曲和變換里的波紋效果，大小設為 100，隆起數改為 1，就得到了一個…emmmm，優美又不太對勁的曲線。

將這個波紋線砍掉一半，嗯，總算正常一些了。

把它向下復制為六個，并適當調整一下間距。

將組合好的圖形向右鏡像復制一個，然后放到它的下面，對齊左邊的端點并連接，形成一個翅膀的感覺。

然后再次左右鏡像復制一遍，基本的造型就出來了。

選擇實時上色工具，分別按路徑填充黑色部分。

最后刪除掉多余的描邊，并合并黑色部分，效果就出來啦！用這個方法可以做出來很多種曲折線，大家可以嘗試一下，肯定可以組合出各種好玩的樣式出來。

像素化風格的 LOGO 也是常年比較流行的，不光光是游戲行業，其實很多企業類的 LOGO 也可以非常好的利用像素化進行視覺呈現，很多同學只聞其名，不懂其法。下面我們用這個案例來看一下像素化 LOGO 的設計步驟。

由于是企業類的 logo，在造型上就相對嚴謹一些，除了正常的方形，這里再給大家介紹幾個常用的比例（如上圖），經過比較，發現青銅比較接近于原 logo…那我們就用青銅的比例，做出王者的效果。

繪制網格有兩種方法，一個是畫好矩形之后，選擇對象→路徑→分割為網格，二是直接用矩形網格工具繪制。這里因為我們提前畫好了矩形，所以直接用第一種方法，行數和列數分別設為 52 和 11。

畫好網格之后，就可以請出我們的老朋友實時上色工具，在網格中揮灑你的創意。

用實時上色工具畫好之后，需要擴展一下，才能提取出畫出來的部分。

最后我們將網格線刪除，就可以得到我們畫好的圖形了！純純矢量的像素化就這么搞出來了！這個方法是通用的，你可以通過改變不同的網格數量，來繪制不同像素塊造型的圖案，比如你想繪制常規的正方形像素塊，那行數和列數設為相同的即可，之后就在里面進行填充色塊，真真正正體驗到畫畫的快樂！

平面構成作為設計學的基礎學科，通過點、線、面三者規則或不規則的編排和組合，形成極強的抽象性和形式感，它在 LOGO 的實際應用中也非常容易出效果。這個 LOGO 就是通過線與面的結合來進行抽象創作，下面我們來看一下具體的實操過程。

第一步我們先把六邊形輪廓和中間的三角形畫出來，其實就相當于我們新建一張畫板，在里面進行設計是一個道理。

第二步我們畫三條輔助線來方便后續的操作，注意這里的線都是有規律的，比如最下面的線是與三角形形成 90 度相交，而另外兩條線都是沿著三角形的邊進行延伸。

第三步我們將下半部分的線繪制出來，具體操作如下：

1. 沿中心畫一條直線，再沿六邊形邊畫一條直線；

2. 兩者進行混合，步數設為 24；

3. 左右進行鏡像對稱復制；

PS：這一步其實也是在畫輔助線。

第四步我們接著用實時上色工具，將我們需要的部分提取出來，這里實時上色工具其實就是充當了馬克筆的作用，大家可以想象一下，這樣比較好理解。

畫好其中一個部分了，剩下的我們直接旋轉 120 度復制出來就可以，這里也是軟件操作的方便之處，比在紙上快多了，容錯率也高。

旋轉之后我們發現左半邊部分黑色會大出來一塊，所以我們需要取消編組后，將這個部分單獨置于底層，就可以了。

繪制這類 LOGO 的核心要素就是畫好輔助線，同時特別鍛煉人的思維和創意能力，它更像一件數學與美術結合的藝術品，當你成功完成之后，一定會成就感滿滿。

這一趴給大家帶來的是蘋果 2022 發布會 LOGO 中多層彩色混合漸變設計小技巧。既然大家都是即將擁有 iphone16 的人，那實時掌握自己手機的未來動向也是必須要做的事情。來吧！學起！

第一步肯定是要先畫好基本造型，不管是蘋果也好，是梨也好，造型畫不好，再好看的漸變也救不了你??！

然后我們先給它添加漸變色，這個大家應該都會。

接著我們需要給它添加一個描邊，這里要把透明度模式由正常改為柔光，并適當降低透明度，這樣外輪廓不會過于生硬，能夠更好的與圖形漸變進行過渡。

到了最關鍵的一步，我們將圖形向內縮小復制一個，給它填充上黑色，然后用混合工具將兩者進行混合，就可以得到一個由外向內逐漸消失的漸變效果了。

然后我們選擇比例縮放工具，向內縮小 80% 并復制出來，接著按 CTRL+D 重復復制即可。

其他幾個蘋果只需要更改相應的漸變配色就可以啦。

身體做完了，上面的小葉子也是用同樣的方法就可以搞定了，右下角另一個版本的用相同的做法也同樣能夠實現，但是想要完全還原它的投影效果可能要用到 AE 插件來完成，這里挖個小坑，感興趣的同學可以嘗試一下。

東京奧運會作為史上極具爭議的一屆奧運，帶來了不少熱點和話題。相較于它鬼畜的開幕式和一些莫名其妙的的比賽細節，它的 logo 卻實實在在的堪稱頂尖硬貨。由很多很多不規則的小方塊堆積而成，看似瑣碎無章法，但其實擁有極強的數學邏輯和藝術美感，下面我們就來看一下它的設計過程。

看到這個圖，是不是就能瞬間明白一些東西了？原來確確實實是有規律的，所以我們只需嘗試畫出其中一個部分，剩下的重復復制即可。

先畫出一個十二邊形，然后復制一個旋轉 90 度，將它們進行居中對齊，這里需要手動調整一下大小，保證里面的頂點對齊到外面的邊上，中間我們畫一個小圓，方便后面找到中心點。

這一步我們先在最上面畫出三個菱形，具體操作如圖。

然后再找到中間部分，一樣通過已經存在的三角形來進行旋轉 180 度復制，之后合并出新的菱形。

和之前一樣的手法，一樣的配方，繼續畫菱形…

繼續拼貼菱形，不過新加入的紅色部分和之前的黃色部分是重復的，所以我們直接復制過來就可以了。

繼續增加紅色部分菱形，具體操作步驟如圖。

右邊再添加最后一塊菱形，這一部分就算完成了！

下一步我們需要找到各個邊的中心點，將它們進行連接，這里給大家安利一個比較常見的小插件（百度搜索 Ai 插件很多下載地點，由于版權問題就不直接分享了）里面的等分路徑可以快速幫你定位到線段的中心點。另外里面還有很多其他的野路子，大家可以自己慢慢玩。

找到中心點之后（如上圖左）就可以將它們分別連接起來，畫出方塊！如果說之前的幾步完全不知道在干嘛的話，那么到這一步是不是有種豁然開朗的感覺？

后將畫好的部分繞中心旋轉一圈，再刪除掉外輪廓線，終于完成了…頭發掉了好多…向大師們致敬，salute！這個方法其實也是平面構成中的一種，大家可以跟著自己做一遍，一定會有自己的收獲。

Okkkkk，那么今天的教程到這里也就結束了，不知道你們能攻克到第幾關呢？臨摹不是目的，學會舉一反三才是最重要的。覺得意猶未盡的朋友抓緊跟著下方視頻版本再來溫習一遍??！總之，是很感謝今晚的相伴，感謝三連支持，朋友們，giao 辭！

▼ 點擊圖片前往原文觀看視頻版

原文地址：胡曉波工作室（公眾號）

作者：告白天

轉載請注明：學UI網》探索優秀LOGO背后的技法與思路！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

前言

刷新在產品中屬于基礎功能，方便用戶獲取最新動態，是普及度較高的基礎功能之一。在設計表達時有系統級表達、自定義設計、多功能結合等，設計發揮的可控性較大。

今天黑馬哥就結合一些優秀的線上案例，和大家聊一下關于產品刷新設計的千奇百態，希望拋磚引玉，和大家一起進步。

分享目錄

一、關于刷新設計

二、刷新的設計形式

三、線上優秀案例分析

四、總結

一、關于刷新設計

在產品中刷新對于用戶來說并不陌生，是經常使用的基礎功能，便于用戶獲取新動態。在一些可以提供內容更新的產品中，刷新獲取內容變動是較為常見的形式。

大家都習慣將刷新稱呼為下拉刷新，其實刷新的動作不僅限于下拉手勢交互，也有產品采用單擊和上滑等手勢交互實現刷新動作。比如一些產品在滑動瀏覽內容時，底部標簽欄首頁圖標會變為刷新的操作，通過點擊實現頁面內容的刷新；也有產品在上滑頁面時實時加載完成刷新，就像很多影視類產品或者瀑布流設計的產品。

刷新動作不僅可以滿足用戶的求知欲，也能通過源源不斷的內容增加用戶黏性，提高用戶的使用體驗。

二、刷新的設計形式

簡單的刷新動作已經不是簡單的設計了，在產品設計師的創新中呈現出了眾多的優秀案例，下面為大家梳理一下不同的設計表達形式。

2.1、系統級表達

系統級表達是采用系統默認的一些處理形式，類似于花瓣循環的動態形式，屬于比較常規的表達。也有很多產品采用系統級形式，用戶理解度較高，設計創新的角度來說欠缺一些，表現形式比較生硬。

2.2、情感化文案表達

為了帶給用戶更有溫度的設計，除了在圖形層面進行情感化設計發揮，在文案上面也可以更加情感化。有產品使用俏皮可愛的話術，每次用戶刷新都呈現不同的文案，與用戶產生情感共鳴。

2.3、動態形式結合

刷新的動態表達形式非常普遍，圖形動效和動作演變等，能夠體現出加載的動作。動態形式結合可以使得趣味性更強，動畫演變的過程也能降低加載等待過程中的焦慮感。

2.4、IP 形象結合

IP 形象結合到 UI 場景中不僅可以強化品牌感，也能帶來更加情感化的體驗。IP 形象結合到刷新設計中，伴隨著動態演變，以此來體現加載的過程。設計形式動感化，趣味性強且感官體驗較佳。

2.5、品牌基因結合

立足于品牌做設計，品牌感可以帶來差異化的設計表達，也能提高用戶對品牌的記憶度。很多產品將品牌 LOGO 圖形、輔助圖形、品牌字體、品牌風格特征等融入到刷新設計中，帶來差異化的刷新體驗。

2.6、業務屬性結合

根據業務特征設計刷新圖形，讓用戶在刷新的過程中感知產品的業務屬性，也是強化記憶點的有效形式。

2.7、多功能結合

刷新設計更多的還是為了給用戶提供更多動態內容，除了這個底層需求以外，也有產品結合了多功能設計。比如下拉刷新到一定距離可以激活“二層樓”，進入活動空間或者其他功能模塊，也有結合瀏覽記錄等展示。多功能結合賦予了刷新更多玩法，在有限的資源空間發揮更多操作價值。

2.8、其他設計形式

隨著體驗的重要性升級，產品設計師會在更細微之處探索出更優的解決方案，做出差異化的體驗設計。而刷新功能也將會呈現更豐富的設計，從感官層面帶來更多視覺感的表現，從體驗層面結合更多輔助功能或者業務，發揮更多使用價值。

三、線上優秀案例分析

通過以上的梳理我們對刷新設計有了深入的了解，下面通過一些優秀的線上案例來進行分析，輔助大家掌握更多差異化的設計表達。

3.1、情感化的文案設計

刷新除了在圖形設計和動效層面發揮以外，多功能結合和文案設計也是差異化表達的方向。文案提示的設計相對比較特殊，通過不同的文案來打動用戶的體驗。

喜馬拉雅 APP 每次下拉刷新時，都會顯示不同的文案內容，有功能引導的提示文案，也有與用戶共鳴的溫馨提示等。情感化的文案設計讓刷新更有溫度，不失為一種差異化的功能設計探索。

3.2、動態化 IP 形象

針對下拉刷新這一常規操作，設計形式也是豐富多樣。結合 IP 形象進行動態演變完成刷新動作，被很多產品設計師所采納。

美團外賣就將品牌 IP 形象結合得恰到好處，下拉刷新時兩只耳朵搖擺非常俏皮可愛，松開后 IP 形象露出，還配合眨眼睛等可愛的表情動效。情感化設計結合動態表現，拉近與用戶之間的親和力，帶給用戶更人性化的使用體驗。

3.3、刷新帶來美食誘惑

在完成刷新功能屬性的同時，還能將產品的屬性或者服務賣點強化出來，賦予了常規操作更多的功能價值。

麥當勞在麥麥商城欄目的下拉刷新設計中，采用漢堡形象結合層級動效進行表達，讓人眼前一亮。動效拉長的漢堡不僅體現出份量感，激發用戶的食欲；漢堡形象就十分麥當勞，展現出品牌關聯性。

3.4、趣味化 IP 形象

IP 形象結合到刷新設計中的案例非常多，不僅可以帶來情感化的體驗，也能增加功能操作的趣味性。半次元在下拉刷新時不僅結合 IP 形象，還通過下拉的程度將形象拉長，最后再配合表情和動態營造出趣味性。

3.5、動態 IP 完美結合

轉轉的 IP 形象頭部的轉動條是其特征所在，在下拉刷新過程中完美的結合了轉動條，還伴隨著裝飾符號散開的效果。不僅貼切的結合了 IP 形象的特點，裝飾元素的動態效果也強化了氛圍感，非常符合產品的屬性，是一個不錯的刷新設計案例。

3.6、品牌化路徑動效

刷新設計中采用路徑動效的表現形式比較多，主要集中在圖形路徑動效和品牌文字路徑動效，圖形通常是品牌 LOGO 為主，這一類比較適合圖形趨近于線性的表達中。鏈家 APP 的下拉刷新就是 LOGO 圖形進行路徑動效，完美的匹配了圖形輪廓，動效的流暢度也比較自然。

從品牌層面著手于刷新設計，如果放棄圖形層面的元素選擇，品牌字體的選擇也是一個思路。得物 APP 將品牌名稱的字體直接運用到刷新設計中，以路徑動效的形式進行表達，最終將筆畫打散散開。設計表達依然延續了品牌感，也區別于其他產品的刷新設計，在差異化方面呈現出了自身的品牌特征。

3.7、一路騎行的芒果崽

芒果 TV 的下拉刷新設計結合了吉祥物芒果崽，下拉刷新的過程就是一路騎行的芒果崽。騎行的沿途中有眾多地標建筑的剪影，下拉不松手就會一直處于騎行狀態，下拉的反饋體驗度做得很好。

3.8、漫步的卡通形象

利用動態卡通形象作為刷新設計案例較多，特別是行走和跑步，這一類都比較貼合刷新這一動態表達。比如在少年得到 APP 中，在下拉刷新過程中以一個背著書包漫步的卡通形象進行表達，流暢的動效完美的呈現了學生放學或者上學時，背著書包漫步的場景。這樣的呈現方式不僅貼合功能含義，也能與用戶產生更好的情感共鳴。

3.9、業務化的 3D 圖標

友啥 APP 利用 3D 圖標進行循環切換代表刷新過程，帶有業務屬性的圖標不僅可以直觀的突出產品特性，3D 圖標化之后視覺感十足。圖標切換帶來的動效流暢自然，匹配刷新動作的差異化也非常明顯。

3.10、刷新動作下的多功能結合

刷新已經不局限于內容更新這一單一需求，一些電商類產品也賦予了刷新多功能的屬性，帶來更多樣化的操作體驗。

比如淘寶 APP 首頁下拉刷新時，短距離下拉依然屬于刷新范圍，繼續下拉則會提示釋放進入淘寶二樓。在保持刷新基礎功能的前提下，融入了多功能場景，開發出功能或者活動的全新曝光入口。

在商品詳情頁時下拉則無法提供刷新服務，為了給予更好的反饋設計，下拉動作便會顯示我的足跡。不僅可以在用戶習慣性操作時給予反饋，足跡的提供也更方便用戶做出選擇。

同一個產品也并非只能呈現出一種刷新設計方案，不同的業務場景可以使用不同的表達。淘寶 APP 里面便根據場景的不同提供了多種刷新方案。常規界面的刷新便以品牌字“淘”作為設計出發點，刷新的過程以動態形式表達品牌字，簡單粗暴的傳遞出品牌感。

3.11、結合 Slogan 完成刷新

刷新不僅只是內容的更新，產品設計中呈現出更豐富的表達，比如輔助傳播活動、宣傳品牌形象和 Slogan 等。產品設計師都在賦予單一功能多重使命，帶來豐富多樣的使用體驗。

58 同城首頁在下拉刷新時，除了體現刷新動態以外，也展示了 Slogan “讓生活簡單美好”。借助刷新入口的曝光度，更快的將產品的定位傳遞給用戶，增加用戶對產品的好感度。

3.12、保持格調一致的設計

很多小眾的產品在設計上面呈現出比較有格調的設計，區別于常規的氛圍營造，設計風格更加簡約大氣。

屋顏 APP 整體的設計風格就屬于比較簡約文藝，在下拉刷新的設計中也保持了這個風格特征。以生活物品演變出的線形圖標體現刷新的過程，整體的過度和銜接也恰到好處。

3.13、探索式的刷新設計

刷新設計除了圖形、動效、文案等層面發揮以外，背景層發揮的案例相對較少，除了配合傳播性質的設計。

AcFun 在下拉刷新時，背景層設計成類似于宇宙空間的插畫場景，刷新的過程就像探索一樣。配合卡通形象左顧右盼的動效，帶來的感官效果也是非常不錯的。

關于刷新設計的優秀案例很多，這里就不一一例舉了，以上案例僅作為拋磚引玉形式的引導。大家根據這個框架多多體驗產品，總結更多的優秀案例。

四、總結

刷新設計作為產品中使用較為頻繁的基礎功能，與用戶的接觸也是非常密切的，設計的重要性因此不言而喻。無論是突出品牌感、趣味性、差異化還是強化感官層面的體驗，或者是多功能結合等，都是產品設計師重點發揮的模塊之一。

本文以案例分析為引導，為大家梳理了刷新設計的形式與思路，希望可以拋磚引玉，帶給大家更多的設計靈感?？偨Y觀點屬于個人理解后的呈現，如有欠缺大家選擇性吸收和修正補全。

原文地址：黑馬家族（公眾號）

作者：黑馬青年

轉載請注明：學UI網》刷新設計的千奇百態（UI設計）

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

在UI設計中，95%以上的應用會涉及到頭像元素，例如消息列表、個人中心/主頁、會員服務、評價、排行榜等功能版塊，明明用昵稱或幾個文字就能說清楚的地方，偏偏設計了一個頭像、而且還占據該信息組的主視覺。那么，看起來簡簡單單、或方或圓的小頭像到底還有哪些我們不知道的細節知識，今天筆者就通過這篇文章跟大家聊聊頭像元素的方方面面，希望對大家有所幫助，歡迎共同探討，相互交流。

一、頭像在UI界面中的作用

1. 多賬號區分

出于特殊原因，很多銷售、客服等職業，在同一個應用中可能會存在多個賬號，需要確認自己當前登錄的是哪個賬號時，查看頭像就是最好的區分（需設置不同的頭像）方式，當然也有一些非正常需要的用戶有另外的小號，相信頭像也會有所區別，其作用這里不便多說，避免「社死」。另外，如QQ登錄、微信賬號切換頁面，也會利用突出的頭像來快速區分賬號信息。

2. 凸顯自身形象

某個用戶使用了一張成熟穩重、端莊得體的形象照作為個人頭像時，在大多數情況下，這個人一定不是個動不動就爆粗口的鍵盤俠或網絡噴子，雖然“隔著屏幕你又打不到我”，但在發表內容時會注意自己的措辭，潛意識的維護自己的網絡形象（頭像），這就是現實與網絡中頭像的人格映射。當碰到匿名社交時，為自己戴上面具后就會變得肆無忌憚，與前者相比，至少不再那么約束。

3. “面對面”溝通代表

很多時候，不管是跟好友聊天、還是在不同的應用中留言評論，有頭像的用戶總感覺是在進行平等交流，這么說感覺很抽象，下面舉個例子：

如果是一個單身男性，當社交應用中有人加好友或請教問題時，針對有美女頭像的用戶，其響應效率、質量都會比其他頭像的用戶要高，這是不爭的事實（別杠，我們不談個例），這也說明自己時刻都在注意在對方心中的形象，總擔心被對方看“穿”。

二、各場景中的頭像類型

1. 默認頭像

非強制登錄的應用，切換到個人中心時，一般會有一個默認頭像占位，可以是人物形象剪影或品牌吉祥物，以確保用戶在登錄之前保持頁面的完整性。另外，即便用戶登錄后有上傳自己的頭像，但遇到網絡延遲、頭像加載失敗、匿名操作等情況，系統默認頭像都可起到臨時替補的作用。常見的默認頭像有灰色、彩色兩種色彩模式，其二者各有利弊。

1）灰色頭像

灰色頭像色彩感較弱，可能會導致視覺不平衡，打破畫面的美感，但也正好通過這一絲的不和諧，用一種明顯且突兀的方式提醒用戶去更換頭像，強迫癥患者幾乎無法抵抗。

2）彩色頭像

絕大多數是結合品牌色、吉祥物等進行展示，還能起到豐富畫面、增加趣味性的作用，相比灰色頭像則更加生動，不管用戶是否登錄、有無更換頭像，都能保持界面的視覺平衡，唯一的缺點可能降低用戶更換頭像的欲望。

2. 系統推薦頭像

1）用戶選擇

大家早期接觸的QQ就是最典型的案例，系統提供了多種頭像以供用戶選擇，甚至將部分頭像納入了QQ會員功能，當用戶沒有合適的圖片作為頭像且難以抉擇時，使用系統推薦的頭像不僅能降低用戶的選擇成本，還能滿足部分個性化需求。如果默認頭像跟產品相關聯，也可作為品牌傳播途徑，兩全其美的選擇。

另外，最近很火的匿名社交應用Soul 只能使用系統頭像（可自定義調整），不允許上傳圖片，這源于平臺希望用戶拋開顏值，通過不同的個體審美、價值觀等進行心靈交流，找到真正的靈魂伴侶。同時，因為龐大的用戶量，圖片是否合法、質量的好壞帶來了一系列的監管問題，使用系統推薦頭像，在很大程度上能降低圖片管理成本。

（PS：強制使用系統頭像跟產品定位有著絕對的關系，并非拍腦門決定）

2）系統選擇

注冊成功后，系統會隨機匹配個人頭像，相比用戶自己在列表手動選擇，則多了一份神秘感與期待感，讓頭像的設置變的更有趣，例如小紅書、B站等應用。

3. 文字頭像

常出現在移動辦公類應用中，由系統自動處理，基于OA類應用社交屬性并不強，大多用于內部團隊工作中的溝通交流，例如釘釘、紛享銷客、飛書等。為了更清晰的獲取對方個人信息，這類產品頭像更傾向于上傳自己的真實照片（部分企業強制），在用戶未上傳照片的情況下，系統會提取中文名字中的后兩個字（兩個字的全名顯示）、英文名字前兩個字母作為個人頭像使用，方便團隊成員更好的辨認。

4. 群組頭像

只出現在群聊中，由多個群成員的頭像組合而成，不同的應用對頭像上限的設定不同，最為常見的是4個、9個兩種。群組頭像大多數不支持自定義上傳，會根據當前群成員的數量（1-4人、1-9人）進行宮格排列，且不會超出設定的上限，例如釘釘群、微信群、QQ群等。

5. 用戶頭像組

在部分應用場景中，產品將多個用戶頭像堆疊組合在一起，通過“羊群效應”引導后續用戶產生從眾心理，以提高轉化率，例如有多少用戶已購買、多少用戶已中獎等。另外，視頻平臺的直播間也會將排名靠前的用戶頭像組合排列并展示出來，吸引其他用戶關注。

6. 歷史頭像

1）同平臺

QQ會將用戶之前使用過的頭像搜集起來并單獨提供一個入口，用戶需要換頭像時，可再次選擇使用，雖然重新使用的幾率并不高，但也不失為一種情懷，用戶能清楚知道頭像更換的歷史軌跡，滿滿的回憶感。

設置微信頭像時，也可選擇使用上一張頭像，方便用戶設置新頭像后反悔，可以理解為撤銷本次更換操作，如果需要對圖片進行裁切，也方便用戶跟上一張頭像反復對比。

2）跨平臺

第三方登錄的標配，用戶無需重新編輯，就可以無差別繼承第三方賬號的頭像、昵稱等信息，節省了大量的時間及操作成本，例如微信、QQ、支付寶、微博授權登錄等。

7. 其他頭像

除了上述頭像類型外，還有如視頻頭像、GIF頭像、輪播頭像等，這些并不常用，了解一下就好。另外就是之前刮起的一陣虛擬形象社交風潮而爆火的捏臉頭像，極具針對性的新型頭像類型，如果感興趣，可以去下載Soul、崽崽APP體驗，這里不多做贅述。

三、頭像狀態與附加操作

1. 不同的用戶狀態

用彩色頭像和黑白頭像來區分用戶是否在線是最直觀的表現方式，例如打開QQ好友列表，對方當前是否在線一目了然。除此之外，QQ的在線狀態還延展了多種子級狀態，例如：離開、忙碌、聽歌中、請勿打擾…等，設置成功后，會以小圖標的樣式重疊在頭像右下角，好友看到后能清晰感知當前狀態下是否可以立即聯系你。抖音采用了較為簡單的方式，頭像右下角有綠色小圓點顯示表示在線，沒有則代表離線。

2. 事件通知

常用于非社交類應用（社交應用有更專業的處理方式）的未讀消息/事件通知，顯示在頭像右上角，點擊查看后會消失?？稍O計不同的樣式以體現視覺的強弱關系，對用戶產生不同程度的引導。

• 弱提示：小圓點提示，填充紅色或主體色，提示程度較弱；
• 中等提示：白色圓形+數字提示，數字色彩可以是紅色或主體色；
• 強提示：圓形白色描邊及紅色填充+數字反白，較突兀的提示方式。

3. 掛件/裝飾

很多掛件只是純粹的裝飾品，能起到美化、娛樂、趣味性的作用；增值服務、特權服務、認證類的標識更是一種身份的象征，體現出榮譽、尊貴的感覺；有小部分應用將用戶的勛章標識重疊在頭像某個位置，時刻給用戶帶來一種堅持完成任務之后的成就感，滿足其虛榮心的表現。

4. 交互操作

在很多應用中，個人中心頁面的頭像區域隱藏了設置功能，點擊后會進入到個人主頁、個人信息頁或更換頭像頁面。還有一些無實際功能作用、純趣味化的交互，例如雙擊微信好友的頭像“拍一拍”、拖動即刻個人中心頭像會出現一個紅心等，不同程度的給用戶制造意外驚喜。

還有部分應用，在頭像右下角通過有明確指向含義的圖標引導用戶操作。例如在完成表單過程中需要添加頭像，上傳成功后，頭像右下角會出現刪除圖標；Soul個人中心頭像右下角增加了個性商城入口；QQ、即刻則通過相機圖標提示用戶點擊可直接更換頭像，這種引導性的圖標都相對較小，需要精準點擊，為避免無效操作，在不影響其他交互的情況下，請盡量擴大圖標熱區范圍。

四、方形與圓形的定義

雖然我們用過、研究過大量的互聯網產品，但也許真的沒怎么關注過頭像的形狀，以當前幾個主流的產品為例，QQ、抖音是圓形頭像，而微信、釘釘則是方形（圓角）頭像，如果真的要分出個勝負，那么很明顯，大部分產品使用的都是圓形。方形和圓形到底有什么區別？設計時該如何選擇？下面我們就一起來嘮一嘮。

• 方形頭像對照片的空間利用率更高、降低空間損失，圓形通過裁剪讓空間更平衡、看起來更精致；
• 方形對四角、中心點均可構成聚焦區域，使用靈活，圓形則邊界完美，沒有聚焦沖突，可突出核心；
• 古埃及曾認為圓形是神賜予人們的神圣圖形，因圖形邊界完美，能給人公正、信任感，但矩形卻能給人一種專業、穩定的感覺；
• 圓形被認為是活潑，方形則顯得比較嚴肅；
• QQ團隊曾給出答案，因產品定位就要是給人一種年輕化、活躍的感覺，且人的臉也接近圓形，裁切后更能凸顯人的臉部特征（看臉時代），明顯使用圓形更適合。微信設計師的說法是圖片本來就是方形（扯遠了），方形頭像能最大程度的降低圖片損失，而且微信的定位相對成熟，方形還能給用戶一種穩定可靠的感覺，更符合用戶習慣，如果一定要用圓形，將頭像處理成圓形即可，方/圓兼具；
• ……

說了這么多，依然不知道如何選擇，那么筆者將根據一些常用到頭像的三個模塊給你一些建議：

• 個人中心/主頁：如無特別需要，大部分情況下使用圓形，不會出錯；
• 消息列表/即時會話：根據產品定位、上述的參考比較后決定，沒有明確的要求，使用其中一種形狀后，在其他同等級頁面統一即可；
• 評論/交流區：直接圓形，沒有為什么。頭像本來就小，裁切掉無關信息會更聚焦。

五、頭像設置步驟

1. 頭像來源

用移動端設備上傳頭像時，來源主要為系統推薦、歷史頭像、從相冊選擇、拍照這幾種方式，電腦端因設備限制等原因，一般只有系統推薦和上傳本地圖片。

2. 上傳限制

上傳圖片時，一般會對圖片的格式（JPG/PNG/GIF等）、尺寸（寬*高）、文件大?。ǘ嗌貹B/M）作出限制，這些需要給予明確的提示，避免用戶因操作多次失敗而受挫離開，同時也能避免因用戶不知道平臺可使用GIF、視頻等頭像格式，而雪藏了產品的多元化服務。

3. 圖片裁剪

因圖片來源、拍攝手法不一，針對橫圖、豎圖，系統會貼著邊緣（避免壓縮/拉伸）先進行一次自動裁剪進行取方，然后用戶可自行調整大小，選取最佳位置。

4. 效果預覽

需要給用戶提供真實的效果預覽圖，避免用戶因操作失誤或對處理后的頭像不滿意再次重復整個更換流程。所見即所得，通過降低用戶重復操作的概率也是提升用戶滿意度的方式之一。

六、引導用戶上傳頭像

1. 文案引導

當產品要求用戶組做某件事情時，即便是為用戶考慮，也需要給予一個合理的理由，可使用趣味、情感化或鼓勵性質的文案引導用戶主動上傳頭像，例如社交類應用“一切都很完美、就差一個帥氣的頭像了”、“換個好頭像會讓更多人認識你”等。或者用戶在編輯個人信息時給予鼓勵“恭喜你，只差最后一步了，換個頭像就十分完美了”。

2. 第三方授權

前面講到過第三方登錄的方式，相信這也是對懶癌癥患者上傳頭像最直接粗暴的方式了。

3. 納入注冊流程

部分社交類應用將上傳頭像作為注冊流程中的必選步驟，任何用戶都無法跳過，切記這種方式非必要不可濫用/亂用，這相當于對用戶注冊增加了門檻，任何產品每多一點操作成本，都會有一批用戶離開，需根據產品定位以及強制上傳頭像的重要性來決定，避免得不償失。

七、結語

「無頭像不社交」，在設計界面之前，設計師應該考慮清楚產品社交屬性的等級，再來決定頭像在界面中的權重、占比，至于如何使用，還需根據產品的實際情況并結合用戶頭像的基礎知識合理的做出判斷。

「麻雀最小、五臟俱全」，頭像看似一個很簡單的UI元素，但在設計過程中需考慮的知識點還是有很多，這就需要我們平時不斷的積累、探索，并多多總結，再融合到實際的UI設計中，做出有理有據的設計。

最后，分享一個圖片轉插畫頭像的工具：https://newprofilepic.com，非常好用，如果感興趣就試試吧！

原文地址：能量眼球

作者：大漠飛鷹CYSJ

轉載請注明：學UI網》頭像篇 | 幫你快速掌握頭像基礎設計知識！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

一、表單的構成

1、表單的組成

按照原子理論，表單應該屬于一種“組織”。包括了以下組成部分：

• 標簽

主要是用來說明表單數據域的含義和填寫內容；當標簽無法明確引導用戶或者具有一定的內容限制時，需要增加幫助或者說明信息，方便用戶更好地填寫內容。

• 表單數據域

通常是數據錄入型組件，需要用戶以填寫、選擇的方式完成內容輸入。

• 操作按鈕

用來提交、保存數據信息，完成表單操作。

2、表單的類型

在B端產品審批流程中，不同的用戶會面對不同的表單形式。

對于流程發起者，需要填寫內容后提交審批，這類表單偏向于任務操作，也是我們最常見、最典型的表單形式。

而對于審批者而言，表單主要是傳遞信息，審批人依據內容做出審批決策，這類表單偏向于信息展示。由于審批類的表單相對簡單，所以我們將主要的精力放在操作型表單上。

二、表單的設計關注點

1、表單布局

表單存在兩種布局方式：單列布局和多列布局。

• 單列布局

單列布局信息自上而下，用戶視覺動線更加穩定，橫向的視覺跨度更短。所以信息閱讀和填寫的效率更高，是首選的布局方式。但是在長表單場景下，用戶需要滾動屏幕才能查看完整的表單信息。

• 多列布局

多列布局下，一屏可以容納更多信息、屏效更高，有效地避免出現滾動條。對于高頻的長表單操作，采用多列布局的方式，可以減少滾動條帶來的用戶困擾。

當然多列布局表單信息密度也更大。一般為左右兩列布局，列數最好不要超過2列，否則會影響用戶的填寫效率。

常見的搜索表單大都與表格寬度一致，可以容納3列或4列。主要是搜索關鍵詞與表格一致，業務屬性不強，并且表單項沒有強制性，用戶可以自由填寫，不會存在漏填的情況。采用多列布局對用戶操作影響不大。

2、標簽排列

標簽排列方式歷來都是設計師比較糾結的問題，常見的標簽有3種：左對齊標簽、右對齊標簽、頂部標簽。另外還有內聯標簽、浮動標簽等形式。

先看閱讀效率數據。

2006年，有專家就對3種對齊方式進行了眼動儀數據分析。研究結論表明，頂部標簽移動到輸入框效率最高，只要 50 毫秒；右對齊標簽次之，需要 240 毫秒左右；而左對齊需要消耗“500 毫秒”，效率最低。單從效率上來說，肯定首選頂部標簽。但是面對不同的場景，需要選擇合理的排列方式。

• 頂部標簽

（圖片來源于網絡）

頂部標簽的排列方式符合用戶自上而下的瀏覽習慣，標簽與輸入域聯系更加緊密，視覺橫向移動距離小。所以信息讀取的效率更高。

另外標簽單獨占據一行空間，信息擴展性更強。問題也顯而易見，標簽擠占了縱向空間，會增加表單的總體長度。

所以我個人認為，頂部標簽更適合信息量不大、簡單的表單場景。例如登錄、注冊等。

• 右對齊標簽

（圖片來源于網絡）

右對齊布局拉近了標簽與表單域的距離，并形成固定間距。但是由于標簽的長度不同，視線起始點會發生跳躍，從而影響用戶的閱讀效率。

不過對于普通表單，右對齊標簽可以兼顧效率和頁面空間，因此在B端產品中應用比較廣泛。

• 左對齊標簽

（圖片來源于網絡）

從整體性上來看，左對齊視覺結構性更強，有利于標簽信息閱讀。用戶視線不會受到輸入框的干擾，可以非常順暢地掃視標簽，方便用戶快速搜尋必填項。

但是由于標簽長度不一，為了保證所有標簽都可以正常顯示，會增加標簽與表單域的間距，導致信息讀取效率偏低。

左對齊標簽可以用在復雜場景中，減緩用戶的填寫速度，尤其是那些有大量可選輸入框，結合必*標識符快速定位必填項。或者在高級設置的場景中，字段信息對用戶相對比較陌生時，讓用戶可以仔細考慮表單中的每個信息項。

• 內聯標簽

內聯標簽是將標簽放在輸入域內顯示，標簽代替了占位提示文字，告訴用戶應該填寫什么內容。常見于注冊登錄頁，如下圖。

內聯標簽解決了標簽文字過長的問題，并且可以降低表單的視覺信息量。

但是這也帶來了另一個問題，就是內置的標簽信息會隨著內容信息輸入而消失。通常僅用于登錄頁面，因為用戶對登錄頁的內容模式已經非常熟悉了，學習成本很低，不會帶給用戶困擾。

如果用在其他類型的表單頁面，就容易讓用戶產生疑惑。特別是出錯的場景下，信息提醒不到位，很容易增加用戶的理解成本和使用難度。

• 浮動標簽

浮動標簽是指用戶在錄入時，內部標題（輸入性提示信息）進行浮動位移。這在一定程度上彌補了內聯標簽消失的問題。不過需要額外的開發工作量，并且拓展性不強，不適合作為主要的標簽形式應用在業務表單中。

一個系統中最好采用相對一致、穩定的標簽排列方式，否則頻繁變化的對齊方式也容易讓用戶無所適從。

三、表單的存在形式

表單信息量可大可小。有的可能只有一個字段，有的可能是包含多層卡片內容，甚至是相互嵌套。不同的表單信息有著不同的存在形式，梳理歸納后，主要有以下5種。

1、即時表單

常見于表格或者詳情頁面，通過編輯或新增功能觸發。即時表單與原有內容保持一致，更強調操作的快捷性。

2、浮層表單

同樣是一種輕量化的表單方式，一般用于定向修改特定內容。通常浮層空間較小，不用來承載大量的信息內容。另外浮層緊隨修改內容，操作效率更高。

3、彈窗表單

在抽屜組件出現之前，彈窗應該是最為常見的表單交互形式。相比頁面跳轉，彈窗操作成本更低，但是空間比較受限，應對大表單信息會有一定的難度。另外表單填寫時，可能會出現多層彈窗的情況。

4、抽屜

抽屜組件既可以承載較多的表單信息量，又可以和彈窗一樣在當前頁面完成操作，并且相對于居中彈窗，不會對頁面核心內容造成過多遮擋。因此在B端產品中應用越來越廣泛。

5、頁面

頁面表單通常用于信息量較多的場景。一般會增加頁頭明確告知用戶在做什么，同時也要配置返回按鈕，方便用戶退出表單頁面。

以上就是表單基礎知識的解析。

下期我們來分析下表單設計的技巧~

原文地址：子牧UXD（公眾號）

作者：子牧先生

轉載請注明：學UI網》設計基礎(6): 表單基礎知識解析

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

工業制造場景下的B端軟件設計有什么特點？

要了解行業KNOW HOW，光坐在辦公室自我分析和信息檢索是遠遠不夠的。于是我們實地進入了多家工廠，與用戶進行一對多的調研，輸出了多份調研報告，整理了工廠用戶的一些共性特征及問題。

1. 多角色協同的網狀結構

C端場景中的客戶就是最終用戶，是單線程的線性關系。而在B端場景中，跑通整條鏈路需要從前期的數據創建，到過程中的生產操作，再到最終數據結果采集和分析。涉及到的用戶角色就可能達到十幾種，不同行業從業者會帶有自己的認知習慣，不同角色之間多訴求也存在較大差異。

2.端側載體多樣化

B端用戶觸點已由原來中心化的WEB端，擴展到各式各樣的終端智能，彼此之間進行著協同的服務。在工業場景中，電腦端作為管理員做工單創建和任務查看等功能的工作后臺。手持的掃碼智能終端承擔著每道工序的過站任務，穿戴設備手表接收任務并給一線工人下派任務，PAD端用來給車間主任查看任務排版和首件檢測的載體等。

3.鏈路長且場景差異大

工業場景的完整使用鏈路往往都較長，以工廠的一個基礎工單流程舉例，完成周期從幾個小時到幾個月不等。每一個鏈路對應的線下場景也是不同的：有些可以坐在辦公室內用電腦完成，有些是站立在車間某個機器上或是一些貨物倉庫中完成。環境，噪音，光照，用戶站立的位置等等都會對信息吸收造成影響，忽略場景做設計，容易出現很多無意義的產品功能。

物聯網技術特征下的體驗精益化設計

1.真實場景決定一切

在剛開始做工業SaaS設計時，由于對于行業領域了解不夠深入，也走過不少彎路。以工單報工舉例，我們參考了部分競品，設計了一套比較通用的報工流程：通過手機獲取到工人的工單數據，然后在手機端填寫整套的報工流程：點開工單——找到對應工序——填寫數據數量——填寫和拍攝不良品照片——點擊報工按鈕——完成報工。

設計完成后，當我們去多家無塵車間調研時發現，手機是不允許被帶進車間的，等到工人交接班時再拿出手機去報工，已經是一個非常延時的信息了。其次工人日常會帶著硅膠紙套，在使用軟件屏幕時是不太方便操作的。同時在工廠內工人的穿著對于感知會有一定影響，所以在這樣的場景中手機的報工方案是不會被采用的。

繼續觀察發現，“掃碼終端PDA”是工人每天用的次數最多且非常頻繁的手持端，我們通過PDA上“掃碼過站”的功能，直接在后臺自動判斷道用戶是否做完某道工序，獲取對應人員信息/完成數/良品率等信息后，在后臺完成提交。讓用戶無感知的完成了報工流程。優化后的流程至少節省了用戶5個步驟?？蛻羰褂煤?，也非常滿意這次報工方式的優化，所以對于行業屬性強領域深的，充分調研至關重要。

2.結合多端特征，增大信息感知

想象你來到一個車間，周圍沖刺著嘈雜的機械制造聲、各類報警設備的閃爍、頻繁執行著的機械動作、獲取的軟件信息受限于眼前這臺機器上的屏幕，不同設備的性能不同也進一步導致你在接觸信息的效率是在逐漸衰減的。如何能確保自己能在一堆信息中快速獲取有效信息并且完成工作呢？

我們將信息分為三類：

(1) “強感知”類：判斷為重要狀態需要第一時間被察覺的數據。比如設備狀態，待辦通知，任務計時等。

(2) “可感知”類：容易被查詢到的信息，必要的操作功能等。比如掃碼操作，過站的數據等。

(3) “無感知”類：非必要且較為繁瑣的次要交互行為。這類信息需要被“隱身”，為用戶吸收信息減負。比如按鍵輸入替換成掃碼輸入，手動報工替換由掃碼報工等。

以手表舉例：作為最貼近用戶的穿戴設備，可以配合硬件的振動觸感快速傳遞數據，主要完成“消息下發的接收”，“任務開始的計時”，發生“危險情況的快速上報”等。當后臺推送一個任務給用戶，在手表桌面會出現任務計時器，當用戶逾期未完成，那么任務計時器將提醒用戶逾期時間，在順利完成任務后用戶能獲得對應的績效獎勵，對于重要信息做強感知的展示，保證工單的實效性和完成率，也能調動用戶的積極性。

作為手持掃碼終端的PDA：用戶的使用場景集中在工序的“掃碼過站”上，用戶每天掃碼次數非常頻繁，最多一次高達幾百次，我們著重在引導用戶使用“批量掃碼”過站，通過掃碼槍依次掃碼進入列表頁，一次性掃批量掃入，大幅減低手工操作的頻次。過站的狀態在PDA上的狀態欄采取非常醒目的色系+標識做展示，每個產品的詳細信息在同一屏內的下半部分同時呈現出來，讓用戶易感知到。

3.結合多角色，以任務效率為中心

和物聯網場景下C端應用作對比，其用戶是單線程的，以單點查看和控制設備為目的，家庭用戶需要控制的智能設備數量基本不會太多，如果做了錯誤的操作，造成的后果相對不會太高。產品功能對于用戶來說認知門檻也相對較低。所以在整體體驗上對娛樂性要求更高。

再來看看工業場景，用戶從D端的開發者到B端管理者、決策人員再到一線工人，角色之間同樣是相互影響的，工廠設備數量非常多，一旦操作失誤可能會造成不可逆的影響，所以用戶對產品的訴求更注重效率的穩定性和操作的正確性。再加上行業屬性的復雜程度，對于用戶來說上手有一定的使用門檻。

所以在B端場景中，我們定義為以任務效率為中心的設計。對于信息的展示，工業場景需要更關注在重要數據透傳上，一定要保證信息是明確，完整且精準的。在設備狀態傳遞上更要保證時效性和高透傳性，而對于需要用戶操控的區域，需要提供足夠的引導和提示，減少誤操作的可能性。

不同角色對數據展示的訴求也是不同的，比如在同一個數據分析屏中，對于一線工人，他所關心的是當前這個設備的狀態和工單任務任務等具體的數據，車間主任最關心的則是這個車間整體設備是否運行正常及不良品率，而工廠管理層則是關心整個工廠的能耗/人效/產能等。當確定不同用戶群體的需求后，針對每一類群體采取對應的數據分層方式，最終完成多套數據展示方案。

在物聯網新技術的加持下，制造工藝越來越精益化，工廠職能分工也越加明確，對于過程體驗也會有更精細的要求。

從多角色，多端側，長鏈路等幾個方面，可以看出B與C端很明顯的差異性，基于這些物聯網的特征，通過精益化設計思路去打磨B端場景，達到較好的用戶體驗：

(1) 對于不熟悉的行業領域，需要深入理解行業，洞察問題，真實場景決定了產品的最終形態。

(2) 對于端側的多樣化，合理的運用各個端的優勢，保證信息傳遞的有效性，進行結構化的設計.

(3) 對于多角色多場景相互關聯的數據網絡，針對不同角色的需求做出對應的方案。以用戶任務效率為中心。

后續我們也會繼續在人，場，設備，數據四個方向，去完善從（設備）上云到（產線）全貌化展示再到（人員）效能的精益化管理，最終（數據）可視化做全方位的數字化升級的理想閉環。

IoT讓我們開始重構人與物，物與物的關系， 好的產品體驗也就必然需要做到更好的設計品質，更高效的體驗流程，并且能在同質化嚴重的B端產品中，贏得用戶認可或好的口碑。

原文地址：AlibabaDesign （公眾號）

作者：阿里云loT

轉載請注明：學UI網》生產力體驗—多端多角色的精益協作

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

RULE 1 斷根

「斷根」是指將發生錯誤的原因從根本上排除，不給用戶犯錯的機會。在交互設計中，最常見的設計方法就是使用置灰 / 禁用效果。

  案例 1    美團外賣對于在休息 / 暫不接單的店鋪，除了使用「休息中」的 Tag 進行標注，還使用置灰的效果，讓用戶對于店鋪營業情況一目了然，不會誤點進入：

  案例 2     支付寶理財產品閱讀協議，在用戶勾選前一直會顯示「請勾選」，頁面的確定按鈕在協議簽署前為不可點擊狀態：

案例 3     用戶用 Gmail 寫郵件時，可以設置郵件為「保密郵件」，收件人將無法進行轉發、復制、下載或打印郵件；也可以設定保密郵件的可讀時間，到期后郵件內容會自動消失，來確保信息的保密性：

RULE 2 保險

「保險」是指按照順序運行兩個以上的動作才能完成操作，多加一步操作步驟，給用戶創造更多的思考機會和時間。在交互設計中的典型用法是增加彈窗、鏈接等形式提供更多信息，讓用戶進一步確認。

案例 1     微信轉賬，連續轉給好友同樣金額的兩筆錢，且第一筆好友未接收，系統會發出提醒，讓用戶再次確認，避免重復打款：

案例 2     被從微信群踢出的用戶，如果再次申請加入該群，該群的管理員可以在申請中查看 ta 曾經在群中的聊天記錄，判斷 ta 是否適合入群：

案例 3     在一些重要的決策或不可逆的操作行為中，二次彈窗確認尤為常見。比如當用戶在填寫信息時點擊「作廢」，系統會給出提示讓用戶再次考慮：

RULE 3 標示

「標示」是指運用線條粗細、形狀、顏色等區別以方便識別，提高易識別度。交互設計中多以顏色鮮亮的小色塊、圓點等進行示意。

案例 1     釘釘的圖片保存到本地的功能，做了很好的提示，下載過的圖片會帶有綠色的「對勾」，避免用戶多次重復保存圖片：

案例 2     微信發朋友圈的分組功能，你可以選擇「誰可以看」和「誰不可看」，可以看用的是綠色字，不可以看用的是紅色字，很易于區分，不用擔心會搞混或錯用：

案例 3     釘釘的會議未按時參會的提醒，用紅色標簽對時間進行重點標示：

案例 4     使用 Sketch 導出同名同格式的文件時，系統會在彈窗中將「取消」作為主按鈕的形式呈現，避免用戶因為忘記重命名而覆蓋之前的導出的同名文件：

案例 5     釘釘和阿里的出差系統打通，當員工提交了出差申請，到了出差的那一天，釘釘上狀態會自動切換成 「??出差中」，方便其他同事了解你的狀態：

案例 6     Google 的標簽頁，可以被分組，標記顏色和重命名，可以一定程度上緩解因標簽頁開得太多而找不到的情況：

案例 7     疫情期間，很多小區的大門僅供行人通行，只有個別大門是行人和車輛都可通行。高德地圖 App 會給每個小區的門標注好通行權限，方便開車的用戶選擇合適的門進入小區，不過個人感覺這個信息可以標注得更明顯一些：

RULE 4 警告

「警告」是指將不正?；蚣磳⒁鰡栴}的情況，通過顏色、燈光、聲音、動效等明顯、特殊的方式進行警告，提醒用戶及時修正錯誤。交互設計可以借鑒工業設計中的報警器等產品的功能，用彈窗、燈光和聲音等對用戶進行提示。

案例 1     在鐵路 12306 上購票時，如果選的列車時間距離現在 1 小時內，會彈出彈窗提示發車時間與現在較近，提醒用戶注意行程時間：

案例 2     京東 App 會在用戶使用移動網絡播放的環境下，提示用戶注意流量損耗：

案例 3     上海的買菜 App 在疫情期間菜不好搶，盒馬會在你加購每一件商品的過程中，都提示運力不足，讓用戶再做考慮：

原文鏈接：長弓小子（公眾號）

作者：元堯

轉載請注明：學UI網》案例錦囊｜交互設計中「防呆手法」的巧妙應用！

共分為方法和案例兩篇。本篇為方法篇。

無論是發現了問題進行集中地優化，還是作為一種優化制度持續優化，優化專項持續的時間都不會太短。為保證順利進行，在前期需要作出明確的規劃。

規劃需要結合產品的目標與規劃，與產品側形成合力。所以規劃要與產品、技術共同制定。

制定體驗規劃的五個要素

一般需要明確以下內容：優化范圍、問題獲取、優化目標、參與人員、時間節點。

體驗專項的五個階段

需要注意的是，規劃要清晰、明確、可執行。

可以將整個項目劃分為前期啟動、問題獲取、方案產出、需求落地、項目復盤五個階段。

每個階段均需明確：「時間」、「人物」、「任務」、「產出」。

在這個環節，我們需要整理已有的體驗問題，并在必要時進行補充調研，對問題有更全面、更細節的認識。

如何獲得體驗問題？

體驗問題通常來自五個方面：用戶挖掘、設計走查、競品參考、老板反饋和產品提供。

如何使用這些方法？

以上方法可以綜合使用，例如用戶反饋某個功能有問題，可以設計自查看問題是否清晰，可以做用戶觀察看實際使用情況，可以通過數據分析獲取操作細節，也可以參考競品了解不同的解決方案。

將方法按照使用場景、問題的指向性和結論類型進行分類，大家可以根據具體情況靈活選擇：

區分壞點、優化點和需求點

首先我們來明確三個概念：

壞點：有明顯體驗問題的問題點，體驗層面。

優化點：針對一個或多個壞點的解決方案，設計層面。

需求點：一個或多個相關優化點組成的需求點，或目前沒有滿足的需求，產品層面。

從問題解決角度來說，它們不僅僅是不同階段的產物：

我們獲得問題的最初，壞點、優化點、需求點可能同時出現在各種信息源中，混雜在一起。后續需要把壞點轉化為優化點，成為問題解決方案。解決方案再拆分整合成為一個個需求點，進入產品計劃，推動落地。

而且對于把握問題的本質，也至關重要：

優化點、需求點，如果追根溯源，都可以對應到體驗上的壞點。我們收集到的優化點和需求點，可能并不是當前最好的解決方案，需要挖掘出對應的壞點，制定最優方案。

如何還原為壞點——追問法

只要不斷地追問，就可以挖掘出壞點。

例如在審批流程中：

用戶：我想要個點一下系統就能發通知給處理人提醒TA審批的功能。（這顯然是個需求，需要還原為壞點）

追問：什么情況下要提醒TA審批？

用戶：有時候時間緊迫，不審批就耽誤事了；有時候雖然不耽誤事，可領導沒批感覺心里不踏實。

追問：什么時候比較緊迫？

用戶：比如考勤，我今天請假，但明天就是考勤截止日了，必須立即批才行。

追問：為什么想要系統發通知？

用戶：因為如果我直接提醒老板，我不太好意思，感覺系統提醒能好一些。

ok，至此，我們基本明確了用戶的體驗壞點：部分緊急流程需要及時去提醒審批，部分流程審批人想盡快結束，但申請人又不想以個人身份去提醒。

這個壞點需要深入洞察審批人未及時審批的原因，再給出解決方案很多，且不一定要采用用戶提出的解決方案，而應該綜合考慮，選用最佳方案。

歸類—推導—轉化

1.將問題點歸類

分組是為了把同類或者相關的問題點聚合，尋找系統性的解決方案，而不是「頭疼醫頭，腳疼醫腳」。

舉個例子：

可按照不同頁面、控件、功能、流程、系統來進行歸類，如：申請表（頁面）、目錄樹（控件）、收藏（功能）、審批單（流程）、導航（系統）。

2.推導出優化方案

這個也是設計師最拿手的議題——「如何解決問題」，即針對一個/組用戶痛點去設計方案。這里可以應用平時方案產出的各種推導方法，包括創意方法。

同時應該注意到，問題也許不能僅通過設計手段解決，所以此過程需要產研同學參與，確保方案有效且可實現。

3.轉化為具體需求

方案只有轉化為具體需求，才能進入產品規劃、落地上線。這也是重要的一步。

優化方案和需求的粒度不同：有時候需要把優化方案拆成不同的需求分拆上線，有時候一個需求又能同時涵蓋多個優化方案。這需要根據優先價值，結合產品側的規劃進行。

如何判斷優化價值

每個問題優化價值是不同的，我們可以從產品側、用戶側、數據側三個方面去衡量：

產品側：看可行性。是否契合產品的中長期目標？是否符合產品的發展節奏？是否易于技術實現？時間資源成本如何？

用戶側：看影響力。是否是用戶使用的核心流程、關鍵頁面？影響的用戶范圍多大？用戶角色的權重（主要指B端）是否較大？

設計側：看價值感。設計的ROI如何？能否體現設計的專業度？能否提升設計的話語權？

設計師雖然主導了體驗優化專項，但又不掌握開發資源，如何更好地推動落地呢？需要掌握一些技巧。

推動落地中的四個對齊

對齊是為了及時對齊信息，減少團隊中的信息差，使團隊成員互通有無。不但可以提升協作效率，還能使大家感到被尊重和需要，使大家擰成一股繩。

四個對齊包括目標對齊、進度對齊、方案對齊和效果對齊。

目標對齊：確保在項目啟動和各個階段產品、設計、技術各方達成統一的目標?？梢酝ㄟ^啟動會和重要節點會議進行對齊。

進度對齊：項目周期比較長時，需要注意各階段的進度對齊，掌握進度和風險。方式有排期進度表、定期例會、定期郵件等。

方案對齊：這是比較容易忽略的一點。需要產品、設計、技術甚至用戶做方案對齊。我們目標明確，是為了切實解決用戶的體驗問題的，方案一定要有效，且可以實現。所以要關注方案是否能解決用戶問題（方案評估、測試）、是否能夠技術實現（方案評審）、方案實現效果（方案驗收）。這點做得不好，優化效果就要大打折扣。

效果對齊：上線后需要針對兩個效果進行對齊：一是優化效果如何、是否達成了目標（效果評估）。二是項目運行得如何，有什么經驗和教訓（復盤總結）。及時的團隊復盤，有利于大家揚長避短、取得更好的成績。

形成長期的體驗優化機制

對于體驗問題，我們不能寄希望于體驗優化專項「畢其功于一役」，而是要建立長期的體驗優化機制。

包括：定期整理用戶反饋、定期走查、定期與產品技術溝通優化計劃、階段性復盤等，建立良好的體驗優化通路。

相信看完文章后，大家對「主導和推進體驗優化專項」的方法有了一定了解。后續我們將會發布實戰篇，分享具體實例。

原文地址： 58UXD（公眾號）

作者：環鐵藝術家

轉載請注明：學UI網》設計驅動！體驗UP！高手設計師必備工具包

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

本篇文章將圍繞單選、復選、撥動開關三種選項元素的設計細節及使用場景展開分析，希望能幫助新手設計師避開選項設計的誤區，為用戶打造出更好的操作體驗。

一、單選：獨一無二

1.什么是單選？

單選按鈕最早來源于老式的汽車收音機上的電臺頻道的切換按鍵，按下其中的一個按鍵就成為了被選中狀態，其他就會被彈出，用戶可通過這種方式快速切換不同的電臺。

在UI設計中，單選是指當界面中存在兩個或以上的選項時，且各項之間相互排斥，用戶僅能在選項列表中選擇其中的一個來使用，即便反復選擇，最終的結果始終獨一無二。單選框有選中、未選中兩種狀態（極少數不可選），主要通過填充和描邊互換的樣式將當前狀態反饋給用戶。

單選是一種較為精簡的模式，它至少包含兩個選項，為了提升操作效率，需要盡可能的將所有選項展示給用戶，無需多余的操作和思考，即能快速完成任務。如果是必填選項，最好提供一個與當前用戶較匹配或選中率最大的一個選項作為默認值，即便默認值有誤，對用戶也不會有什么影響，因為用戶本來就需要去操作，可一旦匹配到對應的用戶，就能免去這一步的作，且默認值是經過多方面分析、反復推敲后才進行預設，只會是有益無害。

2.單選組件樣式

1）按鈕式

按鈕樣式適合用在選項不多、文案不長的場景，可平鋪在界面中或以彈窗的方式呈現。例如，購買衣服時，品牌、尺碼、顏色都可以設計成按鈕樣式。

2）圓形組合

未選中都是淺灰色描邊的圓形，選中后，Android常見的是描邊變主色+內圓點填充，而iOS更多則是描邊變填充+對勾圖標組合。其實這些不重要，真的沒必要糾結是用圓點組合還是對勾組合樣式，只要在同一個產品中統一樣式即可，用戶不會因為這兩種表現方式的不同而影響后續的操作。

3）對鉤

對勾樣式經常出現在彈窗列表選項中，只有選中后才會有“?”標記，相比圓形組合，給用戶的引導性更強。

在單個任務中，首次進入選擇頁面時，列表中沒有任何標記（有默認選項除外），選中條件后，標記對勾的同時，無需其他操作即自動進入下一步任務流程，再次回到選項列表時，系統會標記上次的選擇作為參考。另外，這種樣式不會太過于局限選項的數量和字數。

4）選擇器

通常作為表單項以彈窗的形式出現，適合二級、三級聯動選項。例如：選擇地址（省/市/區）、日期（年/月/日）、時間（時/分/秒）等選項較多且具有關聯性的選項組。

3.單選的使用準則

首先要確保單選組件的可用性，所有單選項需要清晰的呈現給用戶，避免嵌套或隱藏二級單選，否則會影響結構的識別性。

其次為確?？勺x性，單選組件的布局要符合用戶認知。選項較少且標簽較短時，使用多行多列的按鈕式布局比較常見，例如電商APP的商品屬性選擇等；標簽較長則使用圓形圖標、對鉤樣式單列多行顯示，例如選擇退款原因；聯動選項需根據關聯的等級數量，在選擇器中多列顯示，例如三級聯動地址，省、市、區三列并行。如果將選項毫無章法的平鋪、標簽/圖標上下排布，會造成視覺動線混亂、內容緊湊及一些不可預知的問題出現。

4.提供默認選項

如果可以的話，盡量給用戶提供一個默認選項，這并非隨意設定，需要經過多方面分析綜合決定。舉個例子，你的產品屬社交類型，大多數為男性用戶，那么將男性設定為默認的性別選擇，這類用戶就可以直接跳過這一步，節約了大量用戶的操作成本，即便面對的是女性用戶，這也不影響原本就需要手動選擇的步驟。默認選項需合理設定，切不可亂用，否則一些“偷懶”的用戶并不會更換默認選項，導致后續數據分析的精準度。

二、復選：循環往復

1.什么是復選？

復選操作不會像單選那樣出現信息阻隔，也沒有撥動開關那么強的視覺干擾，通常包含一個或多個選項供用戶選擇，其選項條件不是互斥的，用戶可從中選擇一項或者多項，具體情況則根據選項條件的限制而定。

1）選擇一項

一些設計師將復選理解為多選，且先不論對錯，筆者想說明的是，多選只不過是復選的一種選擇方式。在真實的設計中，有很多場景是不設限的，我們可以將選中/未選中理解為“是/否、同意/不同意、開啟/關閉……”等意思。例如，注冊頁面中必定存在的「用戶服務協議」，單個選項可反復操作；管理系統或B端的批量操作、權限設置等，選擇其中的一項也可進入下一步操作流程。

2）選擇多項

強制多選一般會設定需選擇數量的下限和上限。例如：首次進入某些APP時，需選擇個性化定制標簽，通常最少不低于3項，最多不超過6項；還有，在填寫調查問卷的多項選擇時，最少選中兩項、不設上限等，這些就是復選中真正意義上的多選。

2.復選的使用準則

相比單選，復選需要配備提交按鈕，提交后才會記錄被選中的信息。對于批量性的選項操作，復選框的操作效率比撥動開關要高出許多，例如，在某些頁面開啟/關閉幾個權限，每個權限用單獨的撥動開關進行控制，完全沒問題，但涉及到幾十個權限的控制，這種批量操作使用復選框一定是最佳的選擇，只要用戶能清楚操作之后會發生什么即可。

3.常見的使用場景

1）標簽選擇

個性化標簽選擇中最為常見，在標簽文字、選項數量較少的情況下，使用外觀大小完全相同的標簽按鈕多列顯示，有助于用戶瀏覽，還能節約頁面縱向空間，用淺色描邊/主色填充或明暗等級來區分選中/未選中狀態，部分產品還會在選中的狀態上增加一個小圖標（?、+/-），區分會更加明顯。這種方式切記標簽不能過長，否則可能會導致文字折行或容器內很擁擠，不利于用戶閱讀。

2）列表選擇

當選項過多、標簽長短不一時，適合使用列表式選擇。WEB端常見的是圓角矩形勾選填充，例如管理系統的商品列表；移動端更多則是原型勾選填充，例如購物車，當然并沒有明顯的界定，所有頁面統一樣式即可。

4.未定狀態

與單選視覺樣式唯一不同的是多了一個未定狀態。常見于管理系統或B端，當選項存在多個子級時，只是某些子級被選中，但并未全部選中，這時父級狀態尚不確定，即為未定狀態。

三、撥動開關：白天與黑夜

1.什么是撥動開關？

撥動開關就像生活中控制燈泡的開關，它是在兩個互斥的選項中始終存在默認值、且操作會立即生效的按鈕，操作后必定是對立的選項，例如開啟/關閉、是/否、同意/不同意等。

2.撥動開關的使用準則

撥動開關必須表意明確，用戶在操作之前就能清楚操作后會發生什么，使用時，需遵循以下原則：

• 用于操作后立即生效的場景；
• 標簽和按鈕是兩個分離的視覺焦點，當用戶有可能產生疑惑、或標簽不足以言明時，需增加輔助文字予以說明；
• 主要用于控制全局，權重較高，針對單個任務流程的控制，請使用單選/復選；
• 默認就是開啟/關閉狀態，若存在子級，父級關閉的同時將子級隱藏（避免置灰）；
• 當操作有風險時，必須給予明確的提示；
• 避免大面積使用，如果存在太多需要開啟/關閉的條件，建議使用復選；

3.背景與文案

撥動開關的背景通常只介于兩種狀態，關閉狀態下為置灰（全服通用），開啟后為綠色，也有很多產品將其設定為品牌色，統一顏色樣式即可。

輔助文案常見有兩種類型，第一種為當前狀態反饋，例如：獲取設備通知權限“消息推送已開啟/關閉”，這種反饋在應用中可靈活運用，尤其是在關閉狀態下，可起到一定的引導作用。第二種為標簽輔助提示，例如：操作后的好處或風險，告知用戶會發生什么，提前讓用戶有一定的心理預期。

四、單選控件的糾葛

1.單選框vs復選框

是用單選框還是用復選框，似乎是最好界定的，筆者查閱了很多資料，得到的信息是“需選擇一個選項用單選、多個選項用復選”，答案出奇的一致，這好像什么都說了（確實如此）、又好像什么都沒說（是個設計師都懂），當我們仔細分析之會發現，并非僅僅如此。

在PC端遇到兩個對立的選項（如：是/否、同意/不同意、通過/不通過）時，除了用兩個單選項之外，也可以使用復選框，尤其是在權限控制中，必定是復選。另外，移動端注冊登錄流程中，用戶服務協議也是最具代表性的復選框（同意/不同意二選一）使用案例。除去這些特殊的使用場景，其他大部分就直接單選。

2.單選框vs撥動開關

僅存在兩個選項時，單選與撥動開關的使用，有一些設計師就將其混淆了。筆者曾遇到過這樣的設計案例，有產品將性別（男/女）、O2O取貨方式（送貨上門/到店自?。┲挥袃蓚€選項的任務用撥動開關來呈現，操作后，通過開關上的滑塊左右移動+文案輔助來確定當前選中的條件。筆者認為，這種方式不可取，最大的弊端就是在當前狀態下，用戶并不知道另一個選項是什么，需要通過猜測或試錯來確定，無疑讓增加了任務的完成難度，也打破了用戶對常用操作的固有認知。

至于什么時候需要用撥動開關，上述3-2《撥動開關的使用準則》中有詳細說明，除此之外使用單選框，能解決設計中80%的單選與撥動開關的選擇性問題。

3.單選框vs下拉列表

選項較少可直接在當前頁面用單選框（選擇性別）、按鈕（標簽）呈現，當用戶需要在大量的選項中進行選擇時，PC端可使用下拉列表，移動端更多使用的是操作欄彈窗或跳轉到新頁面讓用戶操作。其實這方面沒有明確的界限，需根據使用場景以及選項的屬性根據實際情況靈活變動。

五、必備常識和使用技巧

1.選項的幾種狀態

單選、復選、撥動開關各自都有不同的狀態，在設計之前，設計師需要清楚地知道這些狀態所代表的含義以及不同的使用場景，避免后續在使用中給用戶造成困擾。

2.符合用戶認知的控件樣式

首先，選項框樣式應符合用戶認知，不能為了所謂的差異化、個性化打破用戶固有認知，而帶來額外的認知負擔。例如單選/復選常見的是圓形填充+對鉤（PC端）、圓角矩形填充+對鉤（移動端）兩種方式，雖然這并不是唯一，但至少不會出錯。雖然鼓勵跳出常規的設計思維做出改變，但一切都以不增加用戶使用難度、提供更好的用戶體驗為出發點，不然還不如不變。

3.注意對齊方式

按鈕式不用多說，文字跟容器上下左右居中。列表中的對齊方式無非兩種，選項框在前，文字和選項框都是左對齊，單選/復選均可采用這種方式；選項框在后，則文字左對齊、選項框右對齊，采用這種方式的單選居多；撥動開關則是全網統一，標簽左對齊，開/關右對齊。

4.清晰簡短的標簽

選項標簽需清晰簡短、直接表達核心含義，盡量避免否定的表達方式，以免用戶產生誤解。像撥動開關這種兩極分化的選項，當用戶不清楚對立的選項內容時，可以使用副標題進行描述，讓用戶在操作之前有一定的心理預期。

5.批量選擇、節約操作成本

雖然都是將選擇權交給用戶，但面對不同的場景，需提供一個「全選」操作，幫助用戶一次完成多個重復的操作，降低操作成本。

例如：B端的內容管理，批量操作能節省很多時間，還能降低因多次重復操作產生的失誤概率；C端最具代表性的有購物車、以及初次進入部分應用時的個性化標簽選擇。

6.觸控熱區的設定

針對移動端，點擊區域切勿直接使用選項框的范圍大小，需單獨設定熱區范圍。大家都知道，大拇指在移動端應用中使用頻率是最高的，相對來說，要有足夠大（非絕對）的操作區域以供手指進行精準交互，以免無效操作或操作失誤。需要將文本標簽、選項框以及各選項區域均分后四周的留白都作為觸動熱區，操作起來就會輕松很多。

六、結語

本文筆者主要總結了單選、復選、撥動開關的使用規范及常見問題，不過設計規范只是基于產品本身構建的一個標準，為了約束后續的視覺統一而存在的規范參考。在真實的設計中，這些設計規范并不是唯一，需要根據產品的特點和使用場景進行靈活變動，設計出最適合自身產品的控件才是最重要的。

遵循設計規范只是最基礎的標準，遵循的同時跳出規范的束縛才會有創意，這就離不開我們平時的積累，鉆研各產品中優秀的設計細節，通過查漏補缺、揚長避短，在其他產品的亮點中找到與自身產品的平衡點并將其融合，這才是我們學習和總結的最終目的。

原文地址：能量眼球

作者：大漠飛鷹CYSJ

轉載請注明：學UI網》選項篇 | 單選/復選/撥動開關的使用小技巧！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

背景

百度搜索作為傳統搜索引擎，內容瀏覽框架與內容消費體驗都更符合圖文類資源的特點。在視頻化趨勢下，用戶搜索、瀏覽、消費視頻的需求日益增長，原有的瀏覽框架導致用戶在搜索后難以觸達視頻結果、消費時難以切換不同場景。此外在視頻消費體驗上還存在播放流暢性不佳、視頻品質感較差等問題，用戶感知未到達最佳水平。故我們綜合百度自身特點與用戶使用習慣，從強化認知、提升品質兩方面出發，升級視頻搜索全鏈路框架，提升搜索視頻體驗及品質。

一、升級視頻搜索全鏈路框架

在對百度搜索所有視頻場景梳理的過程中，我們發現用戶篩選與消費視頻的過程中存在篩選效率低、消費不暢快等問題：在綜合搜索結果頁由于其他資源類型的存在，用戶很難暢快消費視頻；視頻結果頁雖能滿足用戶消費視頻的訴求，但該路徑的用戶認知較弱，操作成本也較高；此外橫豎不同形態的視頻各有獨立的結果頁與落地頁，消費場景割裂。為強化用戶對視頻搜索的認知，降低視頻觸達成本，我們對視頻搜索全鏈路框架進行了升級。

1.【負一樓框架】前置滿足，暢快瀏覽

綜合搜索結果頁是用戶最先觸達的場景，為平衡用戶暢快瀏覽視頻與消費綜合搜索結果的訴求，我們開拓了負一樓平行框架，即上層頁面展示綜合結果，下層負一樓頁面展示視頻結果。當用戶搜索與視頻關聯度較高的搜索詞時會自動進入負一樓頁面，用戶可上滑瀏覽視頻，也可上拉或點擊上層面板返回綜合結果。設計實施過程中，我們圍繞“打造可暢快瀏覽的視頻消費框架”的目標，第一步定義頁面框架結構，第二步打磨感知體驗，第三步輔助用戶認知。

1-1 定義框架結構

首先明確頁面層級，從下至上分別為視頻結果層、綜合搜索結果層與全局框架層。接著劃定視頻結果與綜合結果的布局占比，用戶消費視頻結果的速度與滑動頻率均高于綜合結果，為保證視頻瀏覽的順暢感與操作效率，需保證視頻占比盡可能更多。所以綜合結果面板僅露出tab，不展示搜索結果，讓用戶的注意力更聚焦于視頻內容的同時保證用戶可以來去自由。

1-2 打磨感知體驗

確定框架結構后我們分別從視覺層與觸覺層打磨感知體驗。歷史實驗數據表明，深色系的背景色比淺色系的背景色更能幫助用戶聚焦于視頻內容本身，從而提升視頻消費數量與時長，于是我們在負一樓通過較深的氛圍底色帶給用戶更沉浸的消費感知，同時也與綜合結果形成對比差異，加深用戶記憶。在手勢切換框架的過程中存在觸發框架移動的臨界值，當拖動位置到達臨界值時會產生1次震動反饋，提示用戶此時松手后框架自動切換，以降低用戶認知成本。

1-3 輔助用戶認知

為輔助用戶建立對負一樓新框架的認知，我們通過三階引導在不同時機引導用戶進行不同操作。當一個新用戶進入負一樓后【引導1】會通過面板上下彈動的效果引導用戶上拉面板，幫助用戶理解框架結構，引導用戶進入綜合結果；進入綜合結果后【引導2】通過頁面自動下拉的效果幫用戶認知返回路徑；當用戶重新進入負一樓且一段時間內無操作【引導3】會引導用戶上滑瀏覽視頻。這三個引導緊密配合，有效輔助用戶快速建立全新的使用習慣。

2.【五合框架】強化認知，操作提效

為養成用戶視頻垂直搜索的認知，縮短綜合結果頁到視頻tab的路徑，我們將原有的19個tab框架，精簡為僅外露5個tab的五合框架，同時視頻tab固定在各頻道首位，形成強聚焦，減少信息干擾，降低篩選成本；新增橫劃切tab手勢交互，用戶在搜索結果頁輕松一滑，即可快速觸達視頻tab。雙管齊下降低用戶視頻搜索成本，養成百度視頻搜索認知。

3.【融合框架】橫豎融合，場景打通

在不同資源的分發方式上我們也做了一些改變，過去橫版視頻由【視頻結果頁】承載，豎版視頻由【小視頻結果頁】承載，需手動點擊tab進行切換，而對應的2個落地頁也分別獨立，互不打通。隨著中視頻的發展，橫豎視頻的時長與內容類型越來越接近，消費場景也逐步趨近。而原有框架消費場景割裂，操作成本高，消費路徑長，已不足以支撐用戶便捷篩選瀏覽的需求。于是我們將兩個獨立的tab合并為視頻頻道下二級tab，并將兩個獨立的落地頁進行融合。

3-1 融合結果頁

場景融合后二級tab供用戶初步資源篩選；接下來新增排序功能，供用戶進一步針對時效、熱度篩選；最后tag search供用戶深度精細化篩選，最終通過三層遞進式篩選得到精準的需求滿足。同時加入智能化交互反饋，跟隨用戶手勢預判當前階段用戶訴求，決定二級tab、排序、tag search功能的展開收起。

3-2 融合落地頁

結果頁通過合并二級tab有效縮短了用戶路徑，而落地頁作為視頻消費的主要場景也存在著消費場景割裂的問題。于是我們將原有的兩個落地頁進行了打通融合，用戶可在一個落地頁混合瀏覽視頻，此外還拓展了橫屏分發新場景，用戶在橫屏也可上滑瀏覽推薦視頻。經過以上一系列升級，搜索視頻的分發效率進一步提升。

二、提升搜索視頻體驗及品質

百度搜索結果為多類型資源混排構成，隨搜索視頻化戰略轉型，視頻資源在結果頁占比大幅提升，視頻既需遵循整頁基礎設計規范，保障用戶搜索體驗一致性；同時又需持續打磨，提升視頻資源獨有的播放體驗品質感。所以如何在保障整頁消費體驗基礎上，最大限度的提升視頻品質感是我們面對的一大難題?；诖宋覀儾捎脙刹阶叽蚍?，第一步視頻資源播出來，第二步品質體驗提起來。

第一步：視頻資源播出來

原搜索結果頁各類資源采用統一模版結構，資源展示趨同，視頻相關正向描述元素不突出，用戶快速篩選、識別視頻資源的成本較高，視頻播放器較小且不支持自動播放，需點擊進入落地頁觀看消費，整體操作成本較高，導致用戶消費路徑變長，效率降低。我們將問題歸納分為3類，并逐一擊破。

1. 強化視頻展示

為解決視頻展示不突出，用戶難以在眾多資源中快速識別的問題，我們優化視頻資源卡結構，將播放器按照百度搜索柵格規范放至最大化，強化視頻展示。

2. 視頻自動播放

同時引入視頻自動播放能力，將消費場景前置，縮短路徑，使用戶方便快捷的在當前頁觀看視頻。

3. 信息合理布局

視頻能力升級后，多個引入視頻載體的業務同步升級。首先我們對引入視頻資源的11個業務進行全面摸底，將信息歸納為兩大類：1、通用基礎信息   2、定制化信息。接下來制定信息展示原則：通用基礎信息為必備，保證視頻核心信息傳達完整性；定制化信息根據各業務需求自選，確認特殊訴求兼容性。最后根據用戶觀看和使用習慣將功能、信息進行分區，保障用戶統一認知，提升多業務引用效率及后續可拓展性。

第二步：品質體驗提起來

視頻升級為自動播放后，用戶對視頻播放、瀏覽體驗的要求隨之提高，細微的不順暢也會被肉眼放大為強烈的卡頓感。故此時升級視頻播放品質變得至關重要。我們根據用戶消費行為，將優化分為兩個維度：單一播放和聯動瀏覽。再將兩個維度細分為三種場景：1、單一視頻在單頁面內的播放；2、單一視頻跨頁面瀏覽；3、多視頻在單頁面輪換瀏覽。最終確認兩大優化方向：播放體驗流暢性提升、瀏覽體驗順暢性升級，并制定針對性解法。

1. 播放體驗流暢性-信息交互動效升級

數據研究表明，用戶觀看視頻的深入程度，可劃分為3個階段，我們針對不同階段精準匹配信息交互規則。第一階段視頻未播放，用戶在眾多結果中粗略篩選，應盡可能全面的展示信息，輔助用戶決策。第二階段視頻起播用戶開始觀看，此時展示操作功能，并突出展示正向信息，吸引用戶點擊。第三階段視頻播放5秒以上，用戶進入沉浸觀看狀態，此時各類信息退化，保證清爽、沉浸的消費體驗。最后增加信息精細化動效，規避卡頓感，保證視頻播放流暢性。

2. 瀏覽體驗流暢性

針對單一視頻跨頁面消費場景，續播精準度和銜接順暢性至關重要。針對單一頁面內多個視頻輪換播放，如何在不影響用戶瀏覽其他資源的前提下，保證多視頻輪換播放順暢性也是重中之重。視覺和聽覺是用戶獲取視頻內容的感官，所以視頻播放畫面、聲音順暢性成為了瀏覽流暢性的關鍵因素。所以我們從體驗視角出發，建立搜索場景各頁面播放、聲音雙聯動機制。

2-1 視頻播放聯動

首先是視頻播放聯動，我們將視頻播放拆分為起播、續播、連播3部分，分析現狀并找出核心問題點。由于頁面資源混排，視頻化未發力前遺留一系列問題：視頻起播門檻高、優先播放邏輯混亂、同一視頻播放進度各頁面不聯動，視頻消費不連貫等，已嚴重影響視頻搜索體驗與品質感。

• 降低起播條件，視頻外露比例由70%降低為超過30%，播放器可視區域滿足用戶可真實觀看條件即起播，強化視頻搜索認知；
• 升級優先播邏輯，當頁面存在多個視頻時，播放器外露比例PK，外露比例大的優先播放，符合用戶預期保障觀看體驗；
• 新增手勢聯動，當頁面存在多個外露比例相同的視頻時，根據手勢滑動方向判斷視頻播放情況，智能預判用戶觀看意圖；
• 優化續播交互，支持視頻暫停在當前幀，二次起播不再展示封面；點擊跳轉落地頁后返回精準續播點擊過的視頻，提高消費及分發效率；
• 新增自動連播，在純視頻瀏覽態場景下，當前視頻完播后自動連播下一條，減少操作步長保障視頻消費流暢性。

2-2 視頻聲音聯動

然后是聲音聯動，原搜索場景內各頁面以及搜索結果頁各視頻，聲音狀態各自獨立互不影響，而聲音作為視頻傳達的核心內容之一，狀態不聯動導致用戶針對聲音頻繁重復操作，各場景割裂感強烈，視頻瀏覽體驗極差，故在視頻搜索場景下升級聲音聯動機制。

• 分場景定狀態：綜合搜索結果頁為篩選瀏覽場景默認無聲狀態，融合落地頁為沉浸消費場景默認有聲；
• 交互智能響應：用戶有對聲音的主動交互行為（佩戴耳機、調節物理聲音按鍵、點擊聲音按鈕）后，切換為有聲播放；

• 頁面聲音聯動：在綜合搜索結果頁、視頻結果頁任一頁面調節聲音后，頁面發生滑動或跳轉，聲音狀態聯動跟隨。

寫在最后

在搜索視頻化進擊的過程中，我們從體驗視角出發，通過對視頻搜索全鏈路框架的升級，強化了用戶視頻搜索認知，降低了視頻觸達成本。通過對視頻自動播能力升級、播放器信息布局的統一、播放與瀏覽體驗流暢性的打磨，搜索視頻品質感全面升級，用戶體驗也更加細膩、流暢、自然。經過以上一系列優化后，用戶瀏覽消費視頻的數量和時長等指標均顯著增長。未來視頻化方向的角逐會愈發激烈，我們將進一步探索百度搜索自身特色，以期做體驗最好的視頻搜索。

原文地址：百度MEUX（公眾號）

作者：百度APP用戶體驗

轉載請注明：學UI網》視頻搜索體驗價值論

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司