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

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

一、錯誤提示

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

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

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提高用戶的容錯率

對于更復雜的表單來說，按鈕最重要的一點是，應該有提交和取消表單的單一方法。用戶應該至少有補救的機會。舉個例子，如果用戶點了在線幫助時，他已經填好的數據不應該被丟失?；蛘撸绻脩粲捎谝馔恻c擊了按鈕，請求不應該被提交。

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

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

四、總結

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

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

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

作者：黑馬青年

轉載請注明：學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端產品中應用比較廣泛。

• 左對齊標簽

（圖片來源于網絡）

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

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

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

• 內聯標簽

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

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

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

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

• 浮動標簽

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

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

三、表單的存在形式

表單信息量可大可小。有的可能只有一個字段，有的可能是包含多層卡片內容，甚至是相互嵌套。不同的表單信息有著不同的存在形式，梳理歸納后，主要有以下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咨詢、用戶體驗公司、軟件界面設計公司