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

因此，任何專業(yè)的用戶體驗(yàn)設(shè)計(jì)師不僅應(yīng)該考慮順利的流程情況，還應(yīng)該考慮失敗時(shí)應(yīng)該怎么辦。

一、錯(cuò)誤提示

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

左邊的錯(cuò)誤信息很清晰的解釋了發(fā)生的問題，右邊的錯(cuò)誤信息對(duì)用戶來說非常困惑。

1.1什么時(shí)候告知用戶發(fā)生了錯(cuò)誤比較好？

當(dāng)用戶出錯(cuò)后，首先要考慮的事情就是應(yīng)該在用戶填表時(shí)提醒還是最后通知用戶。錯(cuò)誤預(yù)警中有三種常見模式：

• 內(nèi)聯(lián)/實(shí)時(shí)：在輸入時(shí)或移開焦點(diǎn)后立即提供反饋。
• 提交后/客戶端：當(dāng)用戶點(diǎn)擊提交按鈕之后
• 服務(wù)器端：當(dāng)請(qǐng)求發(fā)送到服務(wù)器后再返回反饋給用戶

這些方法中的每一種都有其優(yōu)點(diǎn)和缺點(diǎn)。

1.2內(nèi)聯(lián)驗(yàn)證

一般來說，當(dāng)表單非常短小時(shí)用內(nèi)聯(lián)驗(yàn)證，因?yàn)樗试S在內(nèi)存中的數(shù)據(jù)仍然最新時(shí)更正錯(cuò)誤。

你可以用內(nèi)聯(lián)驗(yàn)證立即告訴用戶哪里錯(cuò)了。

”盡可能的進(jìn)行內(nèi)聯(lián)驗(yàn)證“”這種類型的錯(cuò)誤消息很容易被察覺“，此外，輸入完成后立即告知錯(cuò)誤，對(duì)用戶的交互成本最低——UX專家Rachel Krause

另一位專家Luke Wroblewski建議，當(dāng)問題的答案不明顯時(shí)，可以使用內(nèi)聯(lián)驗(yàn)證。例如，在選擇用戶名時(shí)，用戶可能不知道哪些用戶名可用。在這種情況下，在用戶輸入數(shù)據(jù)時(shí)立即告知錯(cuò)誤可能會(huì)有所幫助。

1.3提交后驗(yàn)證

另一方面，當(dāng)表單很大且需要保持關(guān)注時(shí)，你希望幫助用戶保持專注，而不是通過不斷顯示錯(cuò)誤來打斷他們。

“使用內(nèi)聯(lián)驗(yàn)證，用戶必須在兩種截然不同的思維模式之間反復(fù)切換:填寫表單和糾正錯(cuò)誤。這減慢了用戶的速度，增加了認(rèn)知努力，通常會(huì)降低用戶的滿意度。”Jessica Enders在她的書《設(shè)計(jì)UX:表單》中寫道

1.4服務(wù)器端驗(yàn)證

服務(wù)器端驗(yàn)證是最不友好的方式，但卻為網(wǎng)站提供了很高的穩(wěn)定性。當(dāng)需要二次檢查用戶的數(shù)據(jù)時(shí)，這種方法最有效。

1.5如何提示用戶錯(cuò)誤？

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

使用用戶能理解的話，而不是用專業(yè)術(shù)語

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

錯(cuò)誤提示措辭要使用積極語言而不是消極語言。例如，如果用戶遺漏了一個(gè)字段，與其說”該字段不應(yīng)該是空的“，不如說”請(qǐng)?zhí)顚懘俗侄巍啊．?dāng)使用積極語言時(shí)，用戶不會(huì)因?yàn)橐粋€(gè)錯(cuò)誤而受到責(zé)備，這能減少用戶的焦慮感，減少流失。

1.7必要時(shí)提供幫助

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

二、標(biāo)簽

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

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

2.1將標(biāo)簽放在輸入字段的頂部

許多研究表明，將標(biāo)簽放置在輸入字段的頂部可以幫助用戶更快地填寫表單，因?yàn)樗试S用戶遵循一條垂直線而不是Z模式。但是，如果它占用太多的垂直空間，您也可以使用浮動(dòng)標(biāo)簽。因此，如果你希望用戶更快地填充表單，請(qǐng)將他們放置在字段的頂部。

將標(biāo)簽放置在字段的頂部和使用浮動(dòng)標(biāo)簽，這兩種方式都很有效

2.2將標(biāo)簽放在輸入字段的左側(cè)

另一方面，當(dāng)你詢問用戶比較復(fù)雜的問題，用戶需要更多時(shí)間思考問題答案的時(shí)候，研究表明將標(biāo)簽放在輸入框的左側(cè)會(huì)比較好。

當(dāng)用戶需要思考答案時(shí)，將標(biāo)簽放在輸入框的左側(cè)會(huì)更好

2.3標(biāo)簽應(yīng)該是可見的，無論什么輸入狀態(tài)

無論你用什么方式，確保當(dāng)用戶填完內(nèi)容后，標(biāo)簽是可見的。因?yàn)椋?dāng)用戶需要再次確認(rèn)表單內(nèi)容的時(shí)候，他們不用刪除填好的數(shù)據(jù)來查看系統(tǒng)需要他們填什么。

不管輸入狀態(tài)如何，標(biāo)簽都應(yīng)該是可見的

2.4減少不必要的輸入項(xiàng)

要填的表單越多，用戶就不愿意填完它。所以盡可能地為用戶減少不必要的輸入項(xiàng)。如果實(shí)在做不到，可以將必填和非必填的字段區(qū)分開，減少用戶的負(fù)擔(dān)。

2.5可見性

不管狀態(tài)如何，字段都應(yīng)該是清晰可辨的。此外，活動(dòng)字段和非活動(dòng)字段之間的區(qū)別應(yīng)該要明顯。

輸入字段應(yīng)該有高對(duì)比度，在所有狀態(tài)下都是可見的。

2.6自動(dòng)激活PC端表單的第一個(gè)字段

自動(dòng)激活表單的第一個(gè)字段，這可以提高處理效率，避免用戶額外點(diǎn)擊。

2.7幫用戶預(yù)先填好

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

2.8格式

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

此外，當(dāng)請(qǐng)求需要特定格式化數(shù)據(jù)時(shí)，要包含一個(gè)實(shí)例，讓用戶準(zhǔn)確理解要填什么。

幫助用戶了解如何格式化數(shù)據(jù)

2.9表單區(qū)域大小

輸入框的大小應(yīng)該要與所填的內(nèi)容長(zhǎng)度相匹配。比如，當(dāng)要用戶填寫用戶名時(shí)，如果顯示的填寫區(qū)域是一個(gè)長(zhǎng)段輸入框會(huì)讓用戶感到困惑。另一方面，如果你希望用戶寫一些反饋，但只能看到所寫內(nèi)容的最后一小段，那就很難用了。（彩云注：我就經(jīng)常在一些體驗(yàn)不好的產(chǎn)品上碰到過這種情況，簡(jiǎn)直太難受了。）

如果你不能準(zhǔn)確預(yù)測(cè)信息的長(zhǎng)短，比如留言反饋，建議表單區(qū)域最好是能在用戶填寫內(nèi)容觸碰邊界時(shí)，自動(dòng)變高。

輸入字段的大小應(yīng)該與它預(yù)期的數(shù)據(jù)大小相對(duì)應(yīng)

2.10為桌面系統(tǒng)設(shè)計(jì)靈活的表單

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

另外，當(dāng)創(chuàng)建一個(gè)網(wǎng)頁表單時(shí)，要確保用戶可以只使用鍵盤來瀏覽表單——使用TAB和方向鍵。

2.11為移動(dòng)端系統(tǒng)設(shè)計(jì)靈活的表單

當(dāng)在移動(dòng)設(shè)備上時(shí)，將你顯示的鍵盤與用戶必須輸入的數(shù)據(jù)相匹配。我們經(jīng)常看到需要數(shù)字鍵盤的輸入可以很好地實(shí)現(xiàn)這一點(diǎn)，但幾乎很少有APP顯示支持輸入電子郵件地址的鍵盤。

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

三、下拉菜單vs單選按鈕

下拉框的使用比單選按鈕更有挑戰(zhàn)性，因?yàn)樗枰~外的點(diǎn)擊來打開它們。此外，用戶無法提前看到選項(xiàng)，這可能會(huì)讓他們感到困惑。因此，如果你只有少量的選項(xiàng)，使用單選按鈕。如果選項(xiàng)的數(shù)量超過4個(gè)，下拉菜單的效果會(huì)更好。

3.1復(fù)選框

通過勾選復(fù)選框，用戶應(yīng)該是同意某些內(nèi)容。我的意思是，他們應(yīng)該說，“是的，我想要這個(gè)”，而不是，“是的，我不想要這個(gè)”。不幸的是，我經(jīng)?？吹接姓`導(dǎo)性的復(fù)選框試圖在創(chuàng)建賬戶時(shí)欺騙人們訂閱他們的產(chǎn)品。當(dāng)你不想訂閱他們的通訊時(shí)，你又必須勾選復(fù)選框，像這樣的伎倆對(duì)信譽(yù)是不合適的，所以不要?jiǎng)有氖褂盟鼈儭?

通過勾選復(fù)選框，用戶應(yīng)該同意某些內(nèi)容，而不是確認(rèn)他們不同意。

四、結(jié)構(gòu)

一個(gè)結(jié)構(gòu)充分的表單就像一個(gè)與用戶的良好對(duì)話。所以記住這一點(diǎn)，仔細(xì)規(guī)劃結(jié)構(gòu)。

4.1從簡(jiǎn)單的問題開始

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

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

4.2創(chuàng)建邏輯信息塊

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

通過對(duì)相關(guān)信息進(jìn)行分組，使表單可被快速掃描

4.3單步VS多步表單

當(dāng)你有很多問題要問的時(shí)候，你可能想知道哪一個(gè)最有效：?jiǎn)尾搅鞒踢€是多步流程。一般來說，單步表單的轉(zhuǎn)化率更高，因?yàn)樗雌饋砀?，而且不?huì)勸退用戶。如果你詢問基本信息并希望用戶快速填寫表單，單步表單就非常不錯(cuò)。

當(dāng)用戶被要求必須填寫更多復(fù)雜信息時(shí)，多步表單會(huì)更好。為了幫助用戶在進(jìn)行多步驟填寫時(shí)不至于失去耐心，可以給到進(jìn)度條，提示還剩多少步。

4.4單列vs多列布局

一般來說，用單列布局會(huì)更好，因?yàn)榭梢詭椭脩舾玫貟呙?，也可以盡量減少用戶遺漏填寫。

但當(dāng)用戶多次填寫同一個(gè)表單時(shí)，他們更喜歡多列表單，因?yàn)檫@樣不會(huì)浪費(fèi)時(shí)間滾動(dòng)。一般來說，在B端應(yīng)用中這種多列表單會(huì)比較合適。

五、按鈕

設(shè)計(jì)可用的按鈕對(duì)提高轉(zhuǎn)化率至關(guān)重要。如果按鈕上的文字內(nèi)容比較模糊，會(huì)容易勸退新手用戶。

根據(jù)用戶按下按鈕會(huì)發(fā)生什么來命名按鈕

5.1提高用戶的容錯(cuò)率

對(duì)于更復(fù)雜的表單來說，按鈕最重要的一點(diǎn)是，應(yīng)該有提交和取消表單的單一方法。用戶應(yīng)該至少有補(bǔ)救的機(jī)會(huì)。舉個(gè)例子，如果用戶點(diǎn)了在線幫助時(shí)，他已經(jīng)填好的數(shù)據(jù)不應(yīng)該被丟失?；蛘撸绻脩粲捎谝馔恻c(diǎn)擊了按鈕，請(qǐng)求不應(yīng)該被提交。

5.2主要按鈕和次要按鈕應(yīng)該很容易區(qū)分

為了避免點(diǎn)擊錯(cuò)誤的按鈕，用戶應(yīng)該能比較容易地區(qū)分主要和次要按鈕。另外，最好不要只依賴顏色，樣式上最好有比較大的差異。

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

5.3正確的標(biāo)簽按鈕

按功能明確地標(biāo)注按鈕。例如，如果按一個(gè)按鈕可以創(chuàng)建一個(gè)賬戶，在按鈕上的文案叫”創(chuàng)建賬戶”要好過“提交”

總結(jié)

當(dāng)用戶打開表單時(shí)，他首先肯定是想要填完它的。嘗試幫助他們而不是用糟糕的設(shè)計(jì)給他們?cè)O(shè)置障礙。

不幸的是，這里面提到的許多錯(cuò)誤，并不需要多么高級(jí)的技巧，而是因?yàn)樵O(shè)計(jì)沒有同理心。仔細(xì)思考你的設(shè)計(jì)流程，檢查是否能讓所有內(nèi)容對(duì)不同背景和專業(yè)知識(shí)的人都是清晰的。

通常來說，一般要達(dá)到以下目的，大多數(shù)指導(dǎo)原則都來自這些規(guī)則：

• 用戶應(yīng)該只輸入一次數(shù)據(jù)
• 用戶應(yīng)該填盡可能少的信息
• 用戶應(yīng)該只需要記住少量的信息
• 用戶檢查和恢復(fù)錯(cuò)誤內(nèi)容應(yīng)該要很容易

原文地址：彩云譯設(shè)計(jì)（公眾號(hào)）

作者：彩云Sky

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》想把表單設(shè)計(jì)做到極致，居然有這么多細(xì)節(jié)需要注意，學(xué)到了！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

話說自從著名資本家胡曉波先生對(duì)訓(xùn)練營(yíng)的同學(xué)下達(dá)堅(jiān)持打卡兩年送一臺(tái)蘋果手機(jī)的許諾之后，同學(xué)們紛紛戰(zhàn)意滿滿，激情四設(shè)，每天就是手機(jī)碎片+1，手機(jī)碎片+1 的做練習(xí)…而本意是激勵(lì)大家好好練習(xí)的波哥，整日憂心忡忡，省吃儉用…好怕自己兩年后被原地榨干…

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

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

PS：本文所有案例均來源于網(wǎng)絡(luò)，只用作分析技法。

首先出場(chǎng)的是一個(gè)雪花造型的 logo，復(fù)雜的線條紋路讓它看起來既神秘又迷人，雖然看起來很麻煩，但其實(shí)我們很容易就能發(fā)現(xiàn)它的規(guī)律性：

1. 由六個(gè)相同的單一元素旋轉(zhuǎn)復(fù)制得到；

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

OK，掌握了這個(gè)規(guī)律，我們用網(wǎng)格大法很輕易就可以將它繪制出來，來，上步驟！

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

想要做這種傾斜角度相同的線條，網(wǎng)格可以幫助你更好的進(jìn)行規(guī)范。

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

畫好路徑后我們將它轉(zhuǎn)曲，然后添加圓角，注意添加圓角的規(guī)律，一般外圓角會(huì)比內(nèi)圓角大一些，而且相同的角度一定要設(shè)定相同大小的圓角。

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

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

一般越復(fù)雜的 logo 想要做的出彩，往往都需要一些規(guī)則性在里面，而網(wǎng)格能夠很好的幫助我們?nèi)?shí)現(xiàn)這種規(guī)則性。

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

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

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

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

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

最后我們整體進(jìn)行轉(zhuǎn)曲，然后添加顏色就搞定了！可能有的同學(xué)會(huì)覺得這種多線混合的 logo 過于復(fù)雜，會(huì)不會(huì)不太好應(yīng)用，但其實(shí)這種屬于活動(dòng)型 logo，并不需要用個(gè)五年十載，活動(dòng)型 logo 更著重考慮當(dāng)下，可以做得更個(gè)性，一切以視覺為出發(fā)點(diǎn)！

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

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

然后手動(dòng)的將各個(gè)線條擴(kuò)大到橢圓輪廓的位置，并調(diào)整好粗細(xì)和間距。

到了最關(guān)鍵的一步了！我們將每條線的描邊配置改為這個(gè)不規(guī)則的樣式，在描邊窗口最下面就可以找到，記得適當(dāng)調(diào)整粗細(xì)保持過渡自然。

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

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

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

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

這個(gè) LOGO 在 2D 平面的基礎(chǔ)上，融入了褶皺感 3D 立體的感覺，同時(shí)它的組合結(jié)構(gòu)是類似于飄帶這種飄逸柔和的造型，比普通的方形更加優(yōu)美。下面我們來看看如何做這種飄逸的結(jié)構(gòu)以及如何進(jìn)行視覺 3D 化的實(shí)現(xiàn)。

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

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

把它向下復(fù)制為六個(gè)，并適當(dāng)調(diào)整一下間距。

將組合好的圖形向右鏡像復(fù)制一個(gè)，然后放到它的下面，對(duì)齊左邊的端點(diǎn)并連接，形成一個(gè)翅膀的感覺。

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

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

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

像素化風(fēng)格的 LOGO 也是常年比較流行的，不光光是游戲行業(yè)，其實(shí)很多企業(yè)類的 LOGO 也可以非常好的利用像素化進(jìn)行視覺呈現(xiàn)，很多同學(xué)只聞其名，不懂其法。下面我們用這個(gè)案例來看一下像素化 LOGO 的設(shè)計(jì)步驟。

由于是企業(yè)類的 logo，在造型上就相對(duì)嚴(yán)謹(jǐn)一些，除了正常的方形，這里再給大家介紹幾個(gè)常用的比例（如上圖），經(jīng)過比較，發(fā)現(xiàn)青銅比較接近于原 logo…那我們就用青銅的比例，做出王者的效果。

繪制網(wǎng)格有兩種方法，一個(gè)是畫好矩形之后，選擇對(duì)象→路徑→分割為網(wǎng)格，二是直接用矩形網(wǎng)格工具繪制。這里因?yàn)槲覀兲崆爱嫼昧司匦?，所以直接用第一種方法，行數(shù)和列數(shù)分別設(shè)為 52 和 11。

畫好網(wǎng)格之后，就可以請(qǐng)出我們的老朋友實(shí)時(shí)上色工具，在網(wǎng)格中揮灑你的創(chuàng)意。

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

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

平面構(gòu)成作為設(shè)計(jì)學(xué)的基礎(chǔ)學(xué)科，通過點(diǎn)、線、面三者規(guī)則或不規(guī)則的編排和組合，形成極強(qiáng)的抽象性和形式感，它在 LOGO 的實(shí)際應(yīng)用中也非常容易出效果。這個(gè) LOGO 就是通過線與面的結(jié)合來進(jìn)行抽象創(chuàng)作，下面我們來看一下具體的實(shí)操過程。

第一步我們先把六邊形輪廓和中間的三角形畫出來，其實(shí)就相當(dāng)于我們新建一張畫板，在里面進(jìn)行設(shè)計(jì)是一個(gè)道理。

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

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

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

2. 兩者進(jìn)行混合，步數(shù)設(shè)為 24；

3. 左右進(jìn)行鏡像對(duì)稱復(fù)制；

PS：這一步其實(shí)也是在畫輔助線。

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

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

旋轉(zhuǎn)之后我們發(fā)現(xiàn)左半邊部分黑色會(huì)大出來一塊，所以我們需要取消編組后，將這個(gè)部分單獨(dú)置于底層，就可以了。

繪制這類 LOGO 的核心要素就是畫好輔助線，同時(shí)特別鍛煉人的思維和創(chuàng)意能力，它更像一件數(shù)學(xué)與美術(shù)結(jié)合的藝術(shù)品，當(dāng)你成功完成之后，一定會(huì)成就感滿滿。

這一趴給大家?guī)淼氖翘O果 2022 發(fā)布會(huì) LOGO 中多層彩色混合漸變?cè)O(shè)計(jì)小技巧。既然大家都是即將擁有 iphone16 的人，那實(shí)時(shí)掌握自己手機(jī)的未來動(dòng)向也是必須要做的事情。來吧！學(xué)起！

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

然后我們先給它添加漸變色，這個(gè)大家應(yīng)該都會(huì)。

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

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

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

其他幾個(gè)蘋果只需要更改相應(yīng)的漸變配色就可以啦。

身體做完了，上面的小葉子也是用同樣的方法就可以搞定了，右下角另一個(gè)版本的用相同的做法也同樣能夠?qū)崿F(xiàn)，但是想要完全還原它的投影效果可能要用到 AE 插件來完成，這里挖個(gè)小坑，感興趣的同學(xué)可以嘗試一下。

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

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

先畫出一個(gè)十二邊形，然后復(fù)制一個(gè)旋轉(zhuǎn) 90 度，將它們進(jìn)行居中對(duì)齊，這里需要手動(dòng)調(diào)整一下大小，保證里面的頂點(diǎn)對(duì)齊到外面的邊上，中間我們畫一個(gè)小圓，方便后面找到中心點(diǎn)。

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

然后再找到中間部分，一樣通過已經(jīng)存在的三角形來進(jìn)行旋轉(zhuǎn) 180 度復(fù)制，之后合并出新的菱形。

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

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

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

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

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

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

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

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

▼ 點(diǎn)擊圖片前往原文觀看視頻版

原文地址：胡曉波工作室（公眾號(hào)）

作者：告白天

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》探索優(yōu)秀LOGO背后的技法與思路！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

前言

刷新在產(chǎn)品中屬于基礎(chǔ)功能，方便用戶獲取最新動(dòng)態(tài)，是普及度較高的基礎(chǔ)功能之一。在設(shè)計(jì)表達(dá)時(shí)有系統(tǒng)級(jí)表達(dá)、自定義設(shè)計(jì)、多功能結(jié)合等，設(shè)計(jì)發(fā)揮的可控性較大。

今天黑馬哥就結(jié)合一些優(yōu)秀的線上案例，和大家聊一下關(guān)于產(chǎn)品刷新設(shè)計(jì)的千奇百態(tài)，希望拋磚引玉，和大家一起進(jìn)步。

分享目錄

一、關(guān)于刷新設(shè)計(jì)

二、刷新的設(shè)計(jì)形式

三、線上優(yōu)秀案例分析

四、總結(jié)

一、關(guān)于刷新設(shè)計(jì)

在產(chǎn)品中刷新對(duì)于用戶來說并不陌生，是經(jīng)常使用的基礎(chǔ)功能，便于用戶獲取新動(dòng)態(tài)。在一些可以提供內(nèi)容更新的產(chǎn)品中，刷新獲取內(nèi)容變動(dòng)是較為常見的形式。

大家都習(xí)慣將刷新稱呼為下拉刷新，其實(shí)刷新的動(dòng)作不僅限于下拉手勢(shì)交互，也有產(chǎn)品采用單擊和上滑等手勢(shì)交互實(shí)現(xiàn)刷新動(dòng)作。比如一些產(chǎn)品在滑動(dòng)瀏覽內(nèi)容時(shí)，底部標(biāo)簽欄首頁圖標(biāo)會(huì)變?yōu)樗⑿碌牟僮?，通過點(diǎn)擊實(shí)現(xiàn)頁面內(nèi)容的刷新；也有產(chǎn)品在上滑頁面時(shí)實(shí)時(shí)加載完成刷新，就像很多影視類產(chǎn)品或者瀑布流設(shè)計(jì)的產(chǎn)品。

刷新動(dòng)作不僅可以滿足用戶的求知欲，也能通過源源不斷的內(nèi)容增加用戶黏性，提高用戶的使用體驗(yàn)。

二、刷新的設(shè)計(jì)形式

簡(jiǎn)單的刷新動(dòng)作已經(jīng)不是簡(jiǎn)單的設(shè)計(jì)了，在產(chǎn)品設(shè)計(jì)師的創(chuàng)新中呈現(xiàn)出了眾多的優(yōu)秀案例，下面為大家梳理一下不同的設(shè)計(jì)表達(dá)形式。

2.1、系統(tǒng)級(jí)表達(dá)

系統(tǒng)級(jí)表達(dá)是采用系統(tǒng)默認(rèn)的一些處理形式，類似于花瓣循環(huán)的動(dòng)態(tài)形式，屬于比較常規(guī)的表達(dá)。也有很多產(chǎn)品采用系統(tǒng)級(jí)形式，用戶理解度較高，設(shè)計(jì)創(chuàng)新的角度來說欠缺一些，表現(xiàn)形式比較生硬。

2.2、情感化文案表達(dá)

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

2.3、動(dòng)態(tài)形式結(jié)合

刷新的動(dòng)態(tài)表達(dá)形式非常普遍，圖形動(dòng)效和動(dòng)作演變等，能夠體現(xiàn)出加載的動(dòng)作。動(dòng)態(tài)形式結(jié)合可以使得趣味性更強(qiáng)，動(dòng)畫演變的過程也能降低加載等待過程中的焦慮感。

2.4、IP 形象結(jié)合

IP 形象結(jié)合到 UI 場(chǎng)景中不僅可以強(qiáng)化品牌感，也能帶來更加情感化的體驗(yàn)。IP 形象結(jié)合到刷新設(shè)計(jì)中，伴隨著動(dòng)態(tài)演變，以此來體現(xiàn)加載的過程。設(shè)計(jì)形式動(dòng)感化，趣味性強(qiáng)且感官體驗(yàn)較佳。

2.5、品牌基因結(jié)合

立足于品牌做設(shè)計(jì)，品牌感可以帶來差異化的設(shè)計(jì)表達(dá)，也能提高用戶對(duì)品牌的記憶度。很多產(chǎn)品將品牌 LOGO 圖形、輔助圖形、品牌字體、品牌風(fēng)格特征等融入到刷新設(shè)計(jì)中，帶來差異化的刷新體驗(yàn)。

2.6、業(yè)務(wù)屬性結(jié)合

根據(jù)業(yè)務(wù)特征設(shè)計(jì)刷新圖形，讓用戶在刷新的過程中感知產(chǎn)品的業(yè)務(wù)屬性，也是強(qiáng)化記憶點(diǎn)的有效形式。

2.7、多功能結(jié)合

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

2.8、其他設(shè)計(jì)形式

隨著體驗(yàn)的重要性升級(jí)，產(chǎn)品設(shè)計(jì)師會(huì)在更細(xì)微之處探索出更優(yōu)的解決方案，做出差異化的體驗(yàn)設(shè)計(jì)。而刷新功能也將會(huì)呈現(xiàn)更豐富的設(shè)計(jì)，從感官層面帶來更多視覺感的表現(xiàn)，從體驗(yàn)層面結(jié)合更多輔助功能或者業(yè)務(wù)，發(fā)揮更多使用價(jià)值。

三、線上優(yōu)秀案例分析

通過以上的梳理我們對(duì)刷新設(shè)計(jì)有了深入的了解，下面通過一些優(yōu)秀的線上案例來進(jìn)行分析，輔助大家掌握更多差異化的設(shè)計(jì)表達(dá)。

3.1、情感化的文案設(shè)計(jì)

刷新除了在圖形設(shè)計(jì)和動(dòng)效層面發(fā)揮以外，多功能結(jié)合和文案設(shè)計(jì)也是差異化表達(dá)的方向。文案提示的設(shè)計(jì)相對(duì)比較特殊，通過不同的文案來打動(dòng)用戶的體驗(yàn)。

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

3.2、動(dòng)態(tài)化 IP 形象

針對(duì)下拉刷新這一常規(guī)操作，設(shè)計(jì)形式也是豐富多樣。結(jié)合 IP 形象進(jìn)行動(dòng)態(tài)演變完成刷新動(dòng)作，被很多產(chǎn)品設(shè)計(jì)師所采納。

美團(tuán)外賣就將品牌 IP 形象結(jié)合得恰到好處，下拉刷新時(shí)兩只耳朵搖擺非常俏皮可愛，松開后 IP 形象露出，還配合眨眼睛等可愛的表情動(dòng)效。情感化設(shè)計(jì)結(jié)合動(dòng)態(tài)表現(xiàn)，拉近與用戶之間的親和力，帶給用戶更人性化的使用體驗(yàn)。

3.3、刷新帶來美食誘惑

在完成刷新功能屬性的同時(shí)，還能將產(chǎn)品的屬性或者服務(wù)賣點(diǎn)強(qiáng)化出來，賦予了常規(guī)操作更多的功能價(jià)值。

麥當(dāng)勞在麥麥商城欄目的下拉刷新設(shè)計(jì)中，采用漢堡形象結(jié)合層級(jí)動(dòng)效進(jìn)行表達(dá)，讓人眼前一亮。動(dòng)效拉長(zhǎng)的漢堡不僅體現(xiàn)出份量感，激發(fā)用戶的食欲；漢堡形象就十分麥當(dāng)勞，展現(xiàn)出品牌關(guān)聯(lián)性。

3.4、趣味化 IP 形象

IP 形象結(jié)合到刷新設(shè)計(jì)中的案例非常多，不僅可以帶來情感化的體驗(yàn)，也能增加功能操作的趣味性。半次元在下拉刷新時(shí)不僅結(jié)合 IP 形象，還通過下拉的程度將形象拉長(zhǎng)，最后再配合表情和動(dòng)態(tài)營(yíng)造出趣味性。

3.5、動(dòng)態(tài) IP 完美結(jié)合

轉(zhuǎn)轉(zhuǎn)的 IP 形象頭部的轉(zhuǎn)動(dòng)條是其特征所在，在下拉刷新過程中完美的結(jié)合了轉(zhuǎn)動(dòng)條，還伴隨著裝飾符號(hào)散開的效果。不僅貼切的結(jié)合了 IP 形象的特點(diǎn)，裝飾元素的動(dòng)態(tài)效果也強(qiáng)化了氛圍感，非常符合產(chǎn)品的屬性，是一個(gè)不錯(cuò)的刷新設(shè)計(jì)案例。

3.6、品牌化路徑動(dòng)效

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

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

3.7、一路騎行的芒果崽

芒果 TV 的下拉刷新設(shè)計(jì)結(jié)合了吉祥物芒果崽，下拉刷新的過程就是一路騎行的芒果崽。騎行的沿途中有眾多地標(biāo)建筑的剪影，下拉不松手就會(huì)一直處于騎行狀態(tài)，下拉的反饋體驗(yàn)度做得很好。

3.8、漫步的卡通形象

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

3.9、業(yè)務(wù)化的 3D 圖標(biāo)

友啥 APP 利用 3D 圖標(biāo)進(jìn)行循環(huán)切換代表刷新過程，帶有業(yè)務(wù)屬性的圖標(biāo)不僅可以直觀的突出產(chǎn)品特性，3D 圖標(biāo)化之后視覺感十足。圖標(biāo)切換帶來的動(dòng)效流暢自然，匹配刷新動(dòng)作的差異化也非常明顯。

3.10、刷新動(dòng)作下的多功能結(jié)合

刷新已經(jīng)不局限于內(nèi)容更新這一單一需求，一些電商類產(chǎn)品也賦予了刷新多功能的屬性，帶來更多樣化的操作體驗(yàn)。

比如淘寶 APP 首頁下拉刷新時(shí)，短距離下拉依然屬于刷新范圍，繼續(xù)下拉則會(huì)提示釋放進(jìn)入淘寶二樓。在保持刷新基礎(chǔ)功能的前提下，融入了多功能場(chǎng)景，開發(fā)出功能或者活動(dòng)的全新曝光入口。

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

同一個(gè)產(chǎn)品也并非只能呈現(xiàn)出一種刷新設(shè)計(jì)方案，不同的業(yè)務(wù)場(chǎng)景可以使用不同的表達(dá)。淘寶 APP 里面便根據(jù)場(chǎng)景的不同提供了多種刷新方案。常規(guī)界面的刷新便以品牌字“淘”作為設(shè)計(jì)出發(fā)點(diǎn)，刷新的過程以動(dòng)態(tài)形式表達(dá)品牌字，簡(jiǎn)單粗暴的傳遞出品牌感。

3.11、結(jié)合 Slogan 完成刷新

刷新不僅只是內(nèi)容的更新，產(chǎn)品設(shè)計(jì)中呈現(xiàn)出更豐富的表達(dá)，比如輔助傳播活動(dòng)、宣傳品牌形象和 Slogan 等。產(chǎn)品設(shè)計(jì)師都在賦予單一功能多重使命，帶來豐富多樣的使用體驗(yàn)。

58 同城首頁在下拉刷新時(shí)，除了體現(xiàn)刷新動(dòng)態(tài)以外，也展示了 Slogan “讓生活簡(jiǎn)單美好”。借助刷新入口的曝光度，更快的將產(chǎn)品的定位傳遞給用戶，增加用戶對(duì)產(chǎn)品的好感度。

3.12、保持格調(diào)一致的設(shè)計(jì)

很多小眾的產(chǎn)品在設(shè)計(jì)上面呈現(xiàn)出比較有格調(diào)的設(shè)計(jì)，區(qū)別于常規(guī)的氛圍營(yíng)造，設(shè)計(jì)風(fēng)格更加簡(jiǎn)約大氣。

屋顏 APP 整體的設(shè)計(jì)風(fēng)格就屬于比較簡(jiǎn)約文藝，在下拉刷新的設(shè)計(jì)中也保持了這個(gè)風(fēng)格特征。以生活物品演變出的線形圖標(biāo)體現(xiàn)刷新的過程，整體的過度和銜接也恰到好處。

3.13、探索式的刷新設(shè)計(jì)

刷新設(shè)計(jì)除了圖形、動(dòng)效、文案等層面發(fā)揮以外，背景層發(fā)揮的案例相對(duì)較少，除了配合傳播性質(zhì)的設(shè)計(jì)。

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

關(guān)于刷新設(shè)計(jì)的優(yōu)秀案例很多，這里就不一一例舉了，以上案例僅作為拋磚引玉形式的引導(dǎo)。大家根據(jù)這個(gè)框架多多體驗(yàn)產(chǎn)品，總結(jié)更多的優(yōu)秀案例。

四、總結(jié)

刷新設(shè)計(jì)作為產(chǎn)品中使用較為頻繁的基礎(chǔ)功能，與用戶的接觸也是非常密切的，設(shè)計(jì)的重要性因此不言而喻。無論是突出品牌感、趣味性、差異化還是強(qiáng)化感官層面的體驗(yàn)，或者是多功能結(jié)合等，都是產(chǎn)品設(shè)計(jì)師重點(diǎn)發(fā)揮的模塊之一。

本文以案例分析為引導(dǎo)，為大家梳理了刷新設(shè)計(jì)的形式與思路，希望可以拋磚引玉，帶給大家更多的設(shè)計(jì)靈感?？偨Y(jié)觀點(diǎn)屬于個(gè)人理解后的呈現(xiàn)，如有欠缺大家選擇性吸收和修正補(bǔ)全。

原文地址：黑馬家族（公眾號(hào)）

作者：黑馬青年

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》刷新設(shè)計(jì)的千奇百態(tài)（UI設(shè)計(jì)）

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

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

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

1. 多賬號(hào)區(qū)分

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

2. 凸顯自身形象

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

3. “面對(duì)面”溝通代表

很多時(shí)候，不管是跟好友聊天、還是在不同的應(yīng)用中留言評(píng)論，有頭像的用戶總感覺是在進(jìn)行平等交流，這么說感覺很抽象，下面舉個(gè)例子：

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

二、各場(chǎng)景中的頭像類型

1. 默認(rèn)頭像

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

1）灰色頭像

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

2）彩色頭像

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

2. 系統(tǒng)推薦頭像

1）用戶選擇

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

另外，最近很火的匿名社交應(yīng)用Soul 只能使用系統(tǒng)頭像（可自定義調(diào)整），不允許上傳圖片，這源于平臺(tái)希望用戶拋開顏值，通過不同的個(gè)體審美、價(jià)值觀等進(jìn)行心靈交流，找到真正的靈魂伴侶。同時(shí)，因?yàn)辇嫶蟮挠脩袅?，圖片是否合法、質(zhì)量的好壞帶來了一系列的監(jiān)管問題，使用系統(tǒng)推薦頭像，在很大程度上能降低圖片管理成本。

（PS：強(qiáng)制使用系統(tǒng)頭像跟產(chǎn)品定位有著絕對(duì)的關(guān)系，并非拍腦門決定）

2）系統(tǒng)選擇

注冊(cè)成功后，系統(tǒng)會(huì)隨機(jī)匹配個(gè)人頭像，相比用戶自己在列表手動(dòng)選擇，則多了一份神秘感與期待感，讓頭像的設(shè)置變的更有趣，例如小紅書、B站等應(yīng)用。

3. 文字頭像

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

4. 群組頭像

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

5. 用戶頭像組

在部分應(yīng)用場(chǎng)景中，產(chǎn)品將多個(gè)用戶頭像堆疊組合在一起，通過“羊群效應(yīng)”引導(dǎo)后續(xù)用戶產(chǎn)生從眾心理，以提高轉(zhuǎn)化率，例如有多少用戶已購買、多少用戶已中獎(jiǎng)等。另外，視頻平臺(tái)的直播間也會(huì)將排名靠前的用戶頭像組合排列并展示出來，吸引其他用戶關(guān)注。

6. 歷史頭像

1）同平臺(tái)

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

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

2）跨平臺(tái)

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

7. 其他頭像

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

三、頭像狀態(tài)與附加操作

1. 不同的用戶狀態(tài)

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

2. 事件通知

常用于非社交類應(yīng)用（社交應(yīng)用有更專業(yè)的處理方式）的未讀消息/事件通知，顯示在頭像右上角，點(diǎn)擊查看后會(huì)消失?？稍O(shè)計(jì)不同的樣式以體現(xiàn)視覺的強(qiáng)弱關(guān)系，對(duì)用戶產(chǎn)生不同程度的引導(dǎo)。

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

3. 掛件/裝飾

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

4. 交互操作

在很多應(yīng)用中，個(gè)人中心頁面的頭像區(qū)域隱藏了設(shè)置功能，點(diǎn)擊后會(huì)進(jìn)入到個(gè)人主頁、個(gè)人信息頁或更換頭像頁面。還有一些無實(shí)際功能作用、純?nèi)の痘慕换?，例如雙擊微信好友的頭像“拍一拍”、拖動(dòng)即刻個(gè)人中心頭像會(huì)出現(xiàn)一個(gè)紅心等，不同程度的給用戶制造意外驚喜。

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

四、方形與圓形的定義

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

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

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

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

五、頭像設(shè)置步驟

1. 頭像來源

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

2. 上傳限制

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

3. 圖片裁剪

因圖片來源、拍攝手法不一，針對(duì)橫圖、豎圖，系統(tǒng)會(huì)貼著邊緣（避免壓縮/拉伸）先進(jìn)行一次自動(dòng)裁剪進(jìn)行取方，然后用戶可自行調(diào)整大小，選取最佳位置。

4. 效果預(yù)覽

需要給用戶提供真實(shí)的效果預(yù)覽圖，避免用戶因操作失誤或?qū)μ幚砗蟮念^像不滿意再次重復(fù)整個(gè)更換流程。所見即所得，通過降低用戶重復(fù)操作的概率也是提升用戶滿意度的方式之一。

六、引導(dǎo)用戶上傳頭像

1. 文案引導(dǎo)

當(dāng)產(chǎn)品要求用戶組做某件事情時(shí)，即便是為用戶考慮，也需要給予一個(gè)合理的理由，可使用趣味、情感化或鼓勵(lì)性質(zhì)的文案引導(dǎo)用戶主動(dòng)上傳頭像，例如社交類應(yīng)用“一切都很完美、就差一個(gè)帥氣的頭像了”、“換個(gè)好頭像會(huì)讓更多人認(rèn)識(shí)你”等?；蛘哂脩粼诰庉媯€(gè)人信息時(shí)給予鼓勵(lì)“恭喜你，只差最后一步了，換個(gè)頭像就十分完美了”。

2. 第三方授權(quán)

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

3. 納入注冊(cè)流程

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

七、結(jié)語

「無頭像不社交」，在設(shè)計(jì)界面之前，設(shè)計(jì)師應(yīng)該考慮清楚產(chǎn)品社交屬性的等級(jí)，再來決定頭像在界面中的權(quán)重、占比，至于如何使用，還需根據(jù)產(chǎn)品的實(shí)際情況并結(jié)合用戶頭像的基礎(chǔ)知識(shí)合理的做出判斷。

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

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

原文地址：能量眼球

作者：大漠飛鷹CYSJ

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》頭像篇 | 幫你快速掌握頭像基礎(chǔ)設(shè)計(jì)知識(shí)！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

一、表單的構(gòu)成

1、表單的組成

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

• 標(biāo)簽

主要是用來說明表單數(shù)據(jù)域的含義和填寫內(nèi)容；當(dāng)標(biāo)簽無法明確引導(dǎo)用戶或者具有一定的內(nèi)容限制時(shí)，需要增加幫助或者說明信息，方便用戶更好地填寫內(nèi)容。

• 表單數(shù)據(jù)域

通常是數(shù)據(jù)錄入型組件，需要用戶以填寫、選擇的方式完成內(nèi)容輸入。

• 操作按鈕

用來提交、保存數(shù)據(jù)信息，完成表單操作。

2、表單的類型

在B端產(chǎn)品審批流程中，不同的用戶會(huì)面對(duì)不同的表單形式。

對(duì)于流程發(fā)起者，需要填寫內(nèi)容后提交審批，這類表單偏向于任務(wù)操作，也是我們最常見、最典型的表單形式。

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

二、表單的設(shè)計(jì)關(guān)注點(diǎn)

1、表單布局

表單存在兩種布局方式：?jiǎn)瘟胁季趾投嗔胁季帧?

• 單列布局

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

• 多列布局

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

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

常見的搜索表單大都與表格寬度一致，可以容納3列或4列。主要是搜索關(guān)鍵詞與表格一致，業(yè)務(wù)屬性不強(qiáng)，并且表單項(xiàng)沒有強(qiáng)制性，用戶可以自由填寫，不會(huì)存在漏填的情況。采用多列布局對(duì)用戶操作影響不大。

2、標(biāo)簽排列

標(biāo)簽排列方式歷來都是設(shè)計(jì)師比較糾結(jié)的問題，常見的標(biāo)簽有3種：左對(duì)齊標(biāo)簽、右對(duì)齊標(biāo)簽、頂部標(biāo)簽。另外還有內(nèi)聯(lián)標(biāo)簽、浮動(dòng)標(biāo)簽等形式。

先看閱讀效率數(shù)據(jù)。

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

• 頂部標(biāo)簽

（圖片來源于網(wǎng)絡(luò)）

頂部標(biāo)簽的排列方式符合用戶自上而下的瀏覽習(xí)慣，標(biāo)簽與輸入域聯(lián)系更加緊密，視覺橫向移動(dòng)距離小。所以信息讀取的效率更高。

另外標(biāo)簽單獨(dú)占據(jù)一行空間，信息擴(kuò)展性更強(qiáng)。問題也顯而易見，標(biāo)簽擠占了縱向空間，會(huì)增加表單的總體長(zhǎng)度。

所以我個(gè)人認(rèn)為，頂部標(biāo)簽更適合信息量不大、簡(jiǎn)單的表單場(chǎng)景。例如登錄、注冊(cè)等。

• 右對(duì)齊標(biāo)簽

（圖片來源于網(wǎng)絡(luò)）

右對(duì)齊布局拉近了標(biāo)簽與表單域的距離，并形成固定間距。但是由于標(biāo)簽的長(zhǎng)度不同，視線起始點(diǎn)會(huì)發(fā)生跳躍，從而影響用戶的閱讀效率。

不過對(duì)于普通表單，右對(duì)齊標(biāo)簽可以兼顧效率和頁面空間，因此在B端產(chǎn)品中應(yīng)用比較廣泛。

• 左對(duì)齊標(biāo)簽

（圖片來源于網(wǎng)絡(luò)）

從整體性上來看，左對(duì)齊視覺結(jié)構(gòu)性更強(qiáng)，有利于標(biāo)簽信息閱讀。用戶視線不會(huì)受到輸入框的干擾，可以非常順暢地掃視標(biāo)簽，方便用戶快速搜尋必填項(xiàng)。

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

左對(duì)齊標(biāo)簽可以用在復(fù)雜場(chǎng)景中，減緩用戶的填寫速度，尤其是那些有大量可選輸入框，結(jié)合必*標(biāo)識(shí)符快速定位必填項(xiàng)?；蛘咴诟呒?jí)設(shè)置的場(chǎng)景中，字段信息對(duì)用戶相對(duì)比較陌生時(shí)，讓用戶可以仔細(xì)考慮表單中的每個(gè)信息項(xiàng)。

• 內(nèi)聯(lián)標(biāo)簽

內(nèi)聯(lián)標(biāo)簽是將標(biāo)簽放在輸入域內(nèi)顯示，標(biāo)簽代替了占位提示文字，告訴用戶應(yīng)該填寫什么內(nèi)容。常見于注冊(cè)登錄頁，如下圖。

內(nèi)聯(lián)標(biāo)簽解決了標(biāo)簽文字過長(zhǎng)的問題，并且可以降低表單的視覺信息量。

但是這也帶來了另一個(gè)問題，就是內(nèi)置的標(biāo)簽信息會(huì)隨著內(nèi)容信息輸入而消失。通常僅用于登錄頁面，因?yàn)橛脩魧?duì)登錄頁的內(nèi)容模式已經(jīng)非常熟悉了，學(xué)習(xí)成本很低，不會(huì)帶給用戶困擾。

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

• 浮動(dòng)標(biāo)簽

浮動(dòng)標(biāo)簽是指用戶在錄入時(shí)，內(nèi)部標(biāo)題（輸入性提示信息）進(jìn)行浮動(dòng)位移。這在一定程度上彌補(bǔ)了內(nèi)聯(lián)標(biāo)簽消失的問題。不過需要額外的開發(fā)工作量，并且拓展性不強(qiáng)，不適合作為主要的標(biāo)簽形式應(yīng)用在業(yè)務(wù)表單中。

一個(gè)系統(tǒng)中最好采用相對(duì)一致、穩(wěn)定的標(biāo)簽排列方式，否則頻繁變化的對(duì)齊方式也容易讓用戶無所適從。

三、表單的存在形式

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

1、即時(shí)表單

常見于表格或者詳情頁面，通過編輯或新增功能觸發(fā)。即時(shí)表單與原有內(nèi)容保持一致，更強(qiáng)調(diào)操作的快捷性。

2、浮層表單

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

3、彈窗表單

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

4、抽屜

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

5、頁面

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

以上就是表單基礎(chǔ)知識(shí)的解析。

下期我們來分析下表單設(shè)計(jì)的技巧~

原文地址：子牧UXD（公眾號(hào)）

作者：子牧先生

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》設(shè)計(jì)基礎(chǔ)(6): 表單基礎(chǔ)知識(shí)解析

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

工業(yè)制造場(chǎng)景下的B端軟件設(shè)計(jì)有什么特點(diǎn)？

要了解行業(yè)KNOW HOW，光坐在辦公室自我分析和信息檢索是遠(yuǎn)遠(yuǎn)不夠的。于是我們實(shí)地進(jìn)入了多家工廠，與用戶進(jìn)行一對(duì)多的調(diào)研，輸出了多份調(diào)研報(bào)告，整理了工廠用戶的一些共性特征及問題。

1. 多角色協(xié)同的網(wǎng)狀結(jié)構(gòu)

C端場(chǎng)景中的客戶就是最終用戶，是單線程的線性關(guān)系。而在B端場(chǎng)景中，跑通整條鏈路需要從前期的數(shù)據(jù)創(chuàng)建，到過程中的生產(chǎn)操作，再到最終數(shù)據(jù)結(jié)果采集和分析。涉及到的用戶角色就可能達(dá)到十幾種，不同行業(yè)從業(yè)者會(huì)帶有自己的認(rèn)知習(xí)慣，不同角色之間多訴求也存在較大差異。

2.端側(cè)載體多樣化

B端用戶觸點(diǎn)已由原來中心化的WEB端，擴(kuò)展到各式各樣的終端智能，彼此之間進(jìn)行著協(xié)同的服務(wù)。在工業(yè)場(chǎng)景中，電腦端作為管理員做工單創(chuàng)建和任務(wù)查看等功能的工作后臺(tái)。手持的掃碼智能終端承擔(dān)著每道工序的過站任務(wù)，穿戴設(shè)備手表接收任務(wù)并給一線工人下派任務(wù)，PAD端用來給車間主任查看任務(wù)排版和首件檢測(cè)的載體等。

3.鏈路長(zhǎng)且場(chǎng)景差異大

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

物聯(lián)網(wǎng)技術(shù)特征下的體驗(yàn)精益化設(shè)計(jì)

1.真實(shí)場(chǎng)景決定一切

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

設(shè)計(jì)完成后，當(dāng)我們?nèi)ザ嗉覠o塵車間調(diào)研時(shí)發(fā)現(xiàn)，手機(jī)是不允許被帶進(jìn)車間的，等到工人交接班時(shí)再拿出手機(jī)去報(bào)工，已經(jīng)是一個(gè)非常延時(shí)的信息了。其次工人日常會(huì)帶著硅膠紙?zhí)?，在使用軟件屏幕時(shí)是不太方便操作的。同時(shí)在工廠內(nèi)工人的穿著對(duì)于感知會(huì)有一定影響，所以在這樣的場(chǎng)景中手機(jī)的報(bào)工方案是不會(huì)被采用的。

繼續(xù)觀察發(fā)現(xiàn)，“掃碼終端PDA”是工人每天用的次數(shù)最多且非常頻繁的手持端，我們通過PDA上“掃碼過站”的功能，直接在后臺(tái)自動(dòng)判斷道用戶是否做完某道工序，獲取對(duì)應(yīng)人員信息/完成數(shù)/良品率等信息后，在后臺(tái)完成提交。讓用戶無感知的完成了報(bào)工流程。優(yōu)化后的流程至少節(jié)省了用戶5個(gè)步驟?？蛻羰褂煤?，也非常滿意這次報(bào)工方式的優(yōu)化，所以對(duì)于行業(yè)屬性強(qiáng)領(lǐng)域深的，充分調(diào)研至關(guān)重要。

2.結(jié)合多端特征，增大信息感知

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

我們將信息分為三類：

(1) “強(qiáng)感知”類：判斷為重要狀態(tài)需要第一時(shí)間被察覺的數(shù)據(jù)。比如設(shè)備狀態(tài)，待辦通知，任務(wù)計(jì)時(shí)等。

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

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

以手表舉例：作為最貼近用戶的穿戴設(shè)備，可以配合硬件的振動(dòng)觸感快速傳遞數(shù)據(jù)，主要完成“消息下發(fā)的接收”，“任務(wù)開始的計(jì)時(shí)”，發(fā)生“危險(xiǎn)情況的快速上報(bào)”等。當(dāng)后臺(tái)推送一個(gè)任務(wù)給用戶，在手表桌面會(huì)出現(xiàn)任務(wù)計(jì)時(shí)器，當(dāng)用戶逾期未完成，那么任務(wù)計(jì)時(shí)器將提醒用戶逾期時(shí)間，在順利完成任務(wù)后用戶能獲得對(duì)應(yīng)的績(jī)效獎(jiǎng)勵(lì)，對(duì)于重要信息做強(qiáng)感知的展示，保證工單的實(shí)效性和完成率，也能調(diào)動(dòng)用戶的積極性。

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

3.結(jié)合多角色，以任務(wù)效率為中心

和物聯(lián)網(wǎng)場(chǎng)景下C端應(yīng)用作對(duì)比，其用戶是單線程的，以單點(diǎn)查看和控制設(shè)備為目的，家庭用戶需要控制的智能設(shè)備數(shù)量基本不會(huì)太多，如果做了錯(cuò)誤的操作，造成的后果相對(duì)不會(huì)太高。產(chǎn)品功能對(duì)于用戶來說認(rèn)知門檻也相對(duì)較低。所以在整體體驗(yàn)上對(duì)娛樂性要求更高。

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

所以在B端場(chǎng)景中，我們定義為以任務(wù)效率為中心的設(shè)計(jì)。對(duì)于信息的展示，工業(yè)場(chǎng)景需要更關(guān)注在重要數(shù)據(jù)透?jìng)魃?，一定要保證信息是明確，完整且精準(zhǔn)的。在設(shè)備狀態(tài)傳遞上更要保證時(shí)效性和高透?jìng)餍?，而?duì)于需要用戶操控的區(qū)域，需要提供足夠的引導(dǎo)和提示，減少誤操作的可能性。

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

在物聯(lián)網(wǎng)新技術(shù)的加持下，制造工藝越來越精益化，工廠職能分工也越加明確，對(duì)于過程體驗(yàn)也會(huì)有更精細(xì)的要求。

從多角色，多端側(cè)，長(zhǎng)鏈路等幾個(gè)方面，可以看出B與C端很明顯的差異性，基于這些物聯(lián)網(wǎng)的特征，通過精益化設(shè)計(jì)思路去打磨B端場(chǎng)景，達(dá)到較好的用戶體驗(yàn)：

(1) 對(duì)于不熟悉的行業(yè)領(lǐng)域，需要深入理解行業(yè)，洞察問題，真實(shí)場(chǎng)景決定了產(chǎn)品的最終形態(tài)。

(2) 對(duì)于端側(cè)的多樣化，合理的運(yùn)用各個(gè)端的優(yōu)勢(shì)，保證信息傳遞的有效性，進(jìn)行結(jié)構(gòu)化的設(shè)計(jì).

(3) 對(duì)于多角色多場(chǎng)景相互關(guān)聯(lián)的數(shù)據(jù)網(wǎng)絡(luò)，針對(duì)不同角色的需求做出對(duì)應(yīng)的方案。以用戶任務(wù)效率為中心。

后續(xù)我們也會(huì)繼續(xù)在人，場(chǎng)，設(shè)備，數(shù)據(jù)四個(gè)方向，去完善從（設(shè)備）上云到（產(chǎn)線）全貌化展示再到（人員）效能的精益化管理，最終（數(shù)據(jù)）可視化做全方位的數(shù)字化升級(jí)的理想閉環(huán)。

IoT讓我們開始重構(gòu)人與物，物與物的關(guān)系， 好的產(chǎn)品體驗(yàn)也就必然需要做到更好的設(shè)計(jì)品質(zhì)，更高效的體驗(yàn)流程，并且能在同質(zhì)化嚴(yán)重的B端產(chǎn)品中，贏得用戶認(rèn)可或好的口碑。

原文地址：AlibabaDesign （公眾號(hào)）

作者：阿里云loT

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》生產(chǎn)力體驗(yàn)—多端多角色的精益協(xié)作

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

RULE 1 斷根

「斷根」是指將發(fā)生錯(cuò)誤的原因從根本上排除，不給用戶犯錯(cuò)的機(jī)會(huì)。在交互設(shè)計(jì)中，最常見的設(shè)計(jì)方法就是使用置灰 / 禁用效果。

  案例 1    美團(tuán)外賣對(duì)于在休息 / 暫不接單的店鋪，除了使用「休息中」的 Tag 進(jìn)行標(biāo)注，還使用置灰的效果，讓用戶對(duì)于店鋪營(yíng)業(yè)情況一目了然，不會(huì)誤點(diǎn)進(jìn)入：

  案例 2     支付寶理財(cái)產(chǎn)品閱讀協(xié)議，在用戶勾選前一直會(huì)顯示「請(qǐng)勾選」，頁面的確定按鈕在協(xié)議簽署前為不可點(diǎn)擊狀態(tài)：

案例 3     用戶用 Gmail 寫郵件時(shí)，可以設(shè)置郵件為「保密郵件」，收件人將無法進(jìn)行轉(zhuǎn)發(fā)、復(fù)制、下載或打印郵件；也可以設(shè)定保密郵件的可讀時(shí)間，到期后郵件內(nèi)容會(huì)自動(dòng)消失，來確保信息的保密性：

RULE 2 保險(xiǎn)

「保險(xiǎn)」是指按照順序運(yùn)行兩個(gè)以上的動(dòng)作才能完成操作，多加一步操作步驟，給用戶創(chuàng)造更多的思考機(jī)會(huì)和時(shí)間。在交互設(shè)計(jì)中的典型用法是增加彈窗、鏈接等形式提供更多信息，讓用戶進(jìn)一步確認(rèn)。

案例 1     微信轉(zhuǎn)賬，連續(xù)轉(zhuǎn)給好友同樣金額的兩筆錢，且第一筆好友未接收，系統(tǒng)會(huì)發(fā)出提醒，讓用戶再次確認(rèn)，避免重復(fù)打款：

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

案例 3     在一些重要的決策或不可逆的操作行為中，二次彈窗確認(rèn)尤為常見。比如當(dāng)用戶在填寫信息時(shí)點(diǎn)擊「作廢」，系統(tǒng)會(huì)給出提示讓用戶再次考慮：

RULE 3 標(biāo)示

「標(biāo)示」是指運(yùn)用線條粗細(xì)、形狀、顏色等區(qū)別以方便識(shí)別，提高易識(shí)別度。交互設(shè)計(jì)中多以顏色鮮亮的小色塊、圓點(diǎn)等進(jìn)行示意。

案例 1     釘釘?shù)膱D片保存到本地的功能，做了很好的提示，下載過的圖片會(huì)帶有綠色的「對(duì)勾」，避免用戶多次重復(fù)保存圖片：

案例 2     微信發(fā)朋友圈的分組功能，你可以選擇「誰可以看」和「誰不可看」，可以看用的是綠色字，不可以看用的是紅色字，很易于區(qū)分，不用擔(dān)心會(huì)搞混或錯(cuò)用：

案例 3     釘釘?shù)臅?huì)議未按時(shí)參會(huì)的提醒，用紅色標(biāo)簽對(duì)時(shí)間進(jìn)行重點(diǎn)標(biāo)示：

案例 4     使用 Sketch 導(dǎo)出同名同格式的文件時(shí)，系統(tǒng)會(huì)在彈窗中將「取消」作為主按鈕的形式呈現(xiàn)，避免用戶因?yàn)橥浿孛采w之前的導(dǎo)出的同名文件：

案例 5     釘釘和阿里的出差系統(tǒng)打通，當(dāng)員工提交了出差申請(qǐng)，到了出差的那一天，釘釘上狀態(tài)會(huì)自動(dòng)切換成 「??出差中」，方便其他同事了解你的狀態(tài)：

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

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

RULE 4 警告

「警告」是指將不正?；蚣磳⒁鰡栴}的情況，通過顏色、燈光、聲音、動(dòng)效等明顯、特殊的方式進(jìn)行警告，提醒用戶及時(shí)修正錯(cuò)誤。交互設(shè)計(jì)可以借鑒工業(yè)設(shè)計(jì)中的報(bào)警器等產(chǎn)品的功能，用彈窗、燈光和聲音等對(duì)用戶進(jìn)行提示。

案例 1     在鐵路 12306 上購票時(shí)，如果選的列車時(shí)間距離現(xiàn)在 1 小時(shí)內(nèi)，會(huì)彈出彈窗提示發(fā)車時(shí)間與現(xiàn)在較近，提醒用戶注意行程時(shí)間：

案例 2     京東 App 會(huì)在用戶使用移動(dòng)網(wǎng)絡(luò)播放的環(huán)境下，提示用戶注意流量損耗：

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

原文鏈接：長(zhǎng)弓小子（公眾號(hào)）

作者：元堯

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》案例錦囊｜交互設(shè)計(jì)中「防呆手法」的巧妙應(yīng)用！

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

無論是發(fā)現(xiàn)了問題進(jìn)行集中地優(yōu)化，還是作為一種優(yōu)化制度持續(xù)優(yōu)化，優(yōu)化專項(xiàng)持續(xù)的時(shí)間都不會(huì)太短。為保證順利進(jìn)行，在前期需要作出明確的規(guī)劃。

規(guī)劃需要結(jié)合產(chǎn)品的目標(biāo)與規(guī)劃，與產(chǎn)品側(cè)形成合力。所以規(guī)劃要與產(chǎn)品、技術(shù)共同制定。

制定體驗(yàn)規(guī)劃的五個(gè)要素

一般需要明確以下內(nèi)容：優(yōu)化范圍、問題獲取、優(yōu)化目標(biāo)、參與人員、時(shí)間節(jié)點(diǎn)。

體驗(yàn)專項(xiàng)的五個(gè)階段

需要注意的是，規(guī)劃要清晰、明確、可執(zhí)行。

可以將整個(gè)項(xiàng)目劃分為前期啟動(dòng)、問題獲取、方案產(chǎn)出、需求落地、項(xiàng)目復(fù)盤五個(gè)階段。

每個(gè)階段均需明確：「時(shí)間」、「人物」、「任務(wù)」、「產(chǎn)出」。

在這個(gè)環(huán)節(jié)，我們需要整理已有的體驗(yàn)問題，并在必要時(shí)進(jìn)行補(bǔ)充調(diào)研，對(duì)問題有更全面、更細(xì)節(jié)的認(rèn)識(shí)。

如何獲得體驗(yàn)問題？

體驗(yàn)問題通常來自五個(gè)方面：用戶挖掘、設(shè)計(jì)走查、競(jìng)品參考、老板反饋和產(chǎn)品提供。

如何使用這些方法？

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

將方法按照使用場(chǎng)景、問題的指向性和結(jié)論類型進(jìn)行分類，大家可以根據(jù)具體情況靈活選擇：

區(qū)分壞點(diǎn)、優(yōu)化點(diǎn)和需求點(diǎn)

首先我們來明確三個(gè)概念：

壞點(diǎn)：有明顯體驗(yàn)問題的問題點(diǎn)，體驗(yàn)層面。

優(yōu)化點(diǎn)：針對(duì)一個(gè)或多個(gè)壞點(diǎn)的解決方案，設(shè)計(jì)層面。

需求點(diǎn)：一個(gè)或多個(gè)相關(guān)優(yōu)化點(diǎn)組成的需求點(diǎn)，或目前沒有滿足的需求，產(chǎn)品層面。

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

我們獲得問題的最初，壞點(diǎn)、優(yōu)化點(diǎn)、需求點(diǎn)可能同時(shí)出現(xiàn)在各種信息源中，混雜在一起。后續(xù)需要把壞點(diǎn)轉(zhuǎn)化為優(yōu)化點(diǎn)，成為問題解決方案。解決方案再拆分整合成為一個(gè)個(gè)需求點(diǎn)，進(jìn)入產(chǎn)品計(jì)劃，推動(dòng)落地。

而且對(duì)于把握問題的本質(zhì)，也至關(guān)重要：

優(yōu)化點(diǎn)、需求點(diǎn)，如果追根溯源，都可以對(duì)應(yīng)到體驗(yàn)上的壞點(diǎn)。我們收集到的優(yōu)化點(diǎn)和需求點(diǎn)，可能并不是當(dāng)前最好的解決方案，需要挖掘出對(duì)應(yīng)的壞點(diǎn)，制定最優(yōu)方案。

如何還原為壞點(diǎn)——追問法

只要不斷地追問，就可以挖掘出壞點(diǎn)。

例如在審批流程中：

用戶：我想要個(gè)點(diǎn)一下系統(tǒng)就能發(fā)通知給處理人提醒TA審批的功能。（這顯然是個(gè)需求，需要還原為壞點(diǎn)）

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

用戶：有時(shí)候時(shí)間緊迫，不審批就耽誤事了；有時(shí)候雖然不耽誤事，可領(lǐng)導(dǎo)沒批感覺心里不踏實(shí)。

追問：什么時(shí)候比較緊迫？

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

追問：為什么想要系統(tǒng)發(fā)通知？

用戶：因?yàn)槿绻抑苯犹嵝牙习澹也惶靡馑?，感覺系統(tǒng)提醒能好一些。

ok，至此，我們基本明確了用戶的體驗(yàn)壞點(diǎn)：部分緊急流程需要及時(shí)去提醒審批，部分流程審批人想盡快結(jié)束，但申請(qǐng)人又不想以個(gè)人身份去提醒。

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

歸類—推導(dǎo)—轉(zhuǎn)化

1.將問題點(diǎn)歸類

分組是為了把同類或者相關(guān)的問題點(diǎn)聚合，尋找系統(tǒng)性的解決方案，而不是「頭疼醫(yī)頭，腳疼醫(yī)腳」。

舉個(gè)例子：

可按照不同頁面、控件、功能、流程、系統(tǒng)來進(jìn)行歸類，如：申請(qǐng)表（頁面）、目錄樹（控件）、收藏（功能）、審批單（流程）、導(dǎo)航（系統(tǒng)）。

2.推導(dǎo)出優(yōu)化方案

這個(gè)也是設(shè)計(jì)師最拿手的議題——「如何解決問題」，即針對(duì)一個(gè)/組用戶痛點(diǎn)去設(shè)計(jì)方案。這里可以應(yīng)用平時(shí)方案產(chǎn)出的各種推導(dǎo)方法，包括創(chuàng)意方法。

同時(shí)應(yīng)該注意到，問題也許不能僅通過設(shè)計(jì)手段解決，所以此過程需要產(chǎn)研同學(xué)參與，確保方案有效且可實(shí)現(xiàn)。

3.轉(zhuǎn)化為具體需求

方案只有轉(zhuǎn)化為具體需求，才能進(jìn)入產(chǎn)品規(guī)劃、落地上線。這也是重要的一步。

優(yōu)化方案和需求的粒度不同：有時(shí)候需要把優(yōu)化方案拆成不同的需求分拆上線，有時(shí)候一個(gè)需求又能同時(shí)涵蓋多個(gè)優(yōu)化方案。這需要根據(jù)優(yōu)先價(jià)值，結(jié)合產(chǎn)品側(cè)的規(guī)劃進(jìn)行。

如何判斷優(yōu)化價(jià)值

每個(gè)問題優(yōu)化價(jià)值是不同的，我們可以從產(chǎn)品側(cè)、用戶側(cè)、數(shù)據(jù)側(cè)三個(gè)方面去衡量：

產(chǎn)品側(cè)：看可行性。是否契合產(chǎn)品的中長(zhǎng)期目標(biāo)？是否符合產(chǎn)品的發(fā)展節(jié)奏？是否易于技術(shù)實(shí)現(xiàn)？時(shí)間資源成本如何？

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

設(shè)計(jì)側(cè)：看價(jià)值感。設(shè)計(jì)的ROI如何？能否體現(xiàn)設(shè)計(jì)的專業(yè)度？能否提升設(shè)計(jì)的話語權(quán)？

設(shè)計(jì)師雖然主導(dǎo)了體驗(yàn)優(yōu)化專項(xiàng)，但又不掌握開發(fā)資源，如何更好地推動(dòng)落地呢？需要掌握一些技巧。

推動(dòng)落地中的四個(gè)對(duì)齊

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

四個(gè)對(duì)齊包括目標(biāo)對(duì)齊、進(jìn)度對(duì)齊、方案對(duì)齊和效果對(duì)齊。

目標(biāo)對(duì)齊：確保在項(xiàng)目啟動(dòng)和各個(gè)階段產(chǎn)品、設(shè)計(jì)、技術(shù)各方達(dá)成統(tǒng)一的目標(biāo)。可以通過啟動(dòng)會(huì)和重要節(jié)點(diǎn)會(huì)議進(jìn)行對(duì)齊。

進(jìn)度對(duì)齊：項(xiàng)目周期比較長(zhǎng)時(shí)，需要注意各階段的進(jìn)度對(duì)齊，掌握進(jìn)度和風(fēng)險(xiǎn)。方式有排期進(jìn)度表、定期例會(huì)、定期郵件等。

方案對(duì)齊：這是比較容易忽略的一點(diǎn)。需要產(chǎn)品、設(shè)計(jì)、技術(shù)甚至用戶做方案對(duì)齊。我們目標(biāo)明確，是為了切實(shí)解決用戶的體驗(yàn)問題的，方案一定要有效，且可以實(shí)現(xiàn)。所以要關(guān)注方案是否能解決用戶問題（方案評(píng)估、測(cè)試）、是否能夠技術(shù)實(shí)現(xiàn)（方案評(píng)審）、方案實(shí)現(xiàn)效果（方案驗(yàn)收）。這點(diǎn)做得不好，優(yōu)化效果就要大打折扣。

效果對(duì)齊：上線后需要針對(duì)兩個(gè)效果進(jìn)行對(duì)齊：一是優(yōu)化效果如何、是否達(dá)成了目標(biāo)（效果評(píng)估）。二是項(xiàng)目運(yùn)行得如何，有什么經(jīng)驗(yàn)和教訓(xùn)（復(fù)盤總結(jié)）。及時(shí)的團(tuán)隊(duì)復(fù)盤，有利于大家揚(yáng)長(zhǎng)避短、取得更好的成績(jī)。

形成長(zhǎng)期的體驗(yàn)優(yōu)化機(jī)制

對(duì)于體驗(yàn)問題，我們不能寄希望于體驗(yàn)優(yōu)化專項(xiàng)「畢其功于一役」，而是要建立長(zhǎng)期的體驗(yàn)優(yōu)化機(jī)制。

包括：定期整理用戶反饋、定期走查、定期與產(chǎn)品技術(shù)溝通優(yōu)化計(jì)劃、階段性復(fù)盤等，建立良好的體驗(yàn)優(yōu)化通路。

相信看完文章后，大家對(duì)「主導(dǎo)和推進(jìn)體驗(yàn)優(yōu)化專項(xiàng)」的方法有了一定了解。后續(xù)我們將會(huì)發(fā)布實(shí)戰(zhàn)篇，分享具體實(shí)例。

原文地址： 58UXD（公眾號(hào)）

作者：環(huán)鐵藝術(shù)家

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》設(shè)計(jì)驅(qū)動(dòng)！體驗(yàn)UP！高手設(shè)計(jì)師必備工具包

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

本篇文章將圍繞單選、復(fù)選、撥動(dòng)開關(guān)三種選項(xiàng)元素的設(shè)計(jì)細(xì)節(jié)及使用場(chǎng)景展開分析，希望能幫助新手設(shè)計(jì)師避開選項(xiàng)設(shè)計(jì)的誤區(qū)，為用戶打造出更好的操作體驗(yàn)。

一、單選：獨(dú)一無二

1.什么是單選？

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

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

單選是一種較為精簡(jiǎn)的模式，它至少包含兩個(gè)選項(xiàng)，為了提升操作效率，需要盡可能的將所有選項(xiàng)展示給用戶，無需多余的操作和思考，即能快速完成任務(wù)。如果是必填選項(xiàng)，最好提供一個(gè)與當(dāng)前用戶較匹配或選中率最大的一個(gè)選項(xiàng)作為默認(rèn)值，即便默認(rèn)值有誤，對(duì)用戶也不會(huì)有什么影響，因?yàn)橛脩舯緛砭托枰ゲ僮?，可一旦匹配到?duì)應(yīng)的用戶，就能免去這一步的作，且默認(rèn)值是經(jīng)過多方面分析、反復(fù)推敲后才進(jìn)行預(yù)設(shè)，只會(huì)是有益無害。

2.單選組件樣式

1）按鈕式

按鈕樣式適合用在選項(xiàng)不多、文案不長(zhǎng)的場(chǎng)景，可平鋪在界面中或以彈窗的方式呈現(xiàn)。例如，購買衣服時(shí)，品牌、尺碼、顏色都可以設(shè)計(jì)成按鈕樣式。

2）圓形組合

未選中都是淺灰色描邊的圓形，選中后，Android常見的是描邊變主色+內(nèi)圓點(diǎn)填充，而iOS更多則是描邊變填充+對(duì)勾圖標(biāo)組合。其實(shí)這些不重要，真的沒必要糾結(jié)是用圓點(diǎn)組合還是對(duì)勾組合樣式，只要在同一個(gè)產(chǎn)品中統(tǒng)一樣式即可，用戶不會(huì)因?yàn)檫@兩種表現(xiàn)方式的不同而影響后續(xù)的操作。

3）對(duì)鉤

對(duì)勾樣式經(jīng)常出現(xiàn)在彈窗列表選項(xiàng)中，只有選中后才會(huì)有“?”標(biāo)記，相比圓形組合，給用戶的引導(dǎo)性更強(qiáng)。

在單個(gè)任務(wù)中，首次進(jìn)入選擇頁面時(shí)，列表中沒有任何標(biāo)記（有默認(rèn)選項(xiàng)除外），選中條件后，標(biāo)記對(duì)勾的同時(shí)，無需其他操作即自動(dòng)進(jìn)入下一步任務(wù)流程，再次回到選項(xiàng)列表時(shí)，系統(tǒng)會(huì)標(biāo)記上次的選擇作為參考。另外，這種樣式不會(huì)太過于局限選項(xiàng)的數(shù)量和字?jǐn)?shù)。

4）選擇器

通常作為表單項(xiàng)以彈窗的形式出現(xiàn)，適合二級(jí)、三級(jí)聯(lián)動(dòng)選項(xiàng)。例如：選擇地址（省/市/區(qū)）、日期（年/月/日）、時(shí)間（時(shí)/分/秒）等選項(xiàng)較多且具有關(guān)聯(lián)性的選項(xiàng)組。

3.單選的使用準(zhǔn)則

首先要確保單選組件的可用性，所有單選項(xiàng)需要清晰的呈現(xiàn)給用戶，避免嵌套或隱藏二級(jí)單選，否則會(huì)影響結(jié)構(gòu)的識(shí)別性。

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

4.提供默認(rèn)選項(xiàng)

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

二、復(fù)選：循環(huán)往復(fù)

1.什么是復(fù)選？

復(fù)選操作不會(huì)像單選那樣出現(xiàn)信息阻隔，也沒有撥動(dòng)開關(guān)那么強(qiáng)的視覺干擾，通常包含一個(gè)或多個(gè)選項(xiàng)供用戶選擇，其選項(xiàng)條件不是互斥的，用戶可從中選擇一項(xiàng)或者多項(xiàng)，具體情況則根據(jù)選項(xiàng)條件的限制而定。

1）選擇一項(xiàng)

一些設(shè)計(jì)師將復(fù)選理解為多選，且先不論對(duì)錯(cuò)，筆者想說明的是，多選只不過是復(fù)選的一種選擇方式。在真實(shí)的設(shè)計(jì)中，有很多場(chǎng)景是不設(shè)限的，我們可以將選中/未選中理解為“是/否、同意/不同意、開啟/關(guān)閉……”等意思。例如，注冊(cè)頁面中必定存在的「用戶服務(wù)協(xié)議」，單個(gè)選項(xiàng)可反復(fù)操作；管理系統(tǒng)或B端的批量操作、權(quán)限設(shè)置等，選擇其中的一項(xiàng)也可進(jìn)入下一步操作流程。

2）選擇多項(xiàng)

強(qiáng)制多選一般會(huì)設(shè)定需選擇數(shù)量的下限和上限。例如：首次進(jìn)入某些APP時(shí)，需選擇個(gè)性化定制標(biāo)簽，通常最少不低于3項(xiàng)，最多不超過6項(xiàng)；還有，在填寫調(diào)查問卷的多項(xiàng)選擇時(shí)，最少選中兩項(xiàng)、不設(shè)上限等，這些就是復(fù)選中真正意義上的多選。

2.復(fù)選的使用準(zhǔn)則

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

3.常見的使用場(chǎng)景

1）標(biāo)簽選擇

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

2）列表選擇

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

4.未定狀態(tài)

與單選視覺樣式唯一不同的是多了一個(gè)未定狀態(tài)。常見于管理系統(tǒng)或B端，當(dāng)選項(xiàng)存在多個(gè)子級(jí)時(shí)，只是某些子級(jí)被選中，但并未全部選中，這時(shí)父級(jí)狀態(tài)尚不確定，即為未定狀態(tài)。

三、撥動(dòng)開關(guān)：白天與黑夜

1.什么是撥動(dòng)開關(guān)？

撥動(dòng)開關(guān)就像生活中控制燈泡的開關(guān)，它是在兩個(gè)互斥的選項(xiàng)中始終存在默認(rèn)值、且操作會(huì)立即生效的按鈕，操作后必定是對(duì)立的選項(xiàng)，例如開啟/關(guān)閉、是/否、同意/不同意等。

2.撥動(dòng)開關(guān)的使用準(zhǔn)則

撥動(dòng)開關(guān)必須表意明確，用戶在操作之前就能清楚操作后會(huì)發(fā)生什么，使用時(shí)，需遵循以下原則：

• 用于操作后立即生效的場(chǎng)景；
• 標(biāo)簽和按鈕是兩個(gè)分離的視覺焦點(diǎn)，當(dāng)用戶有可能產(chǎn)生疑惑、或標(biāo)簽不足以言明時(shí)，需增加輔助文字予以說明；
• 主要用于控制全局，權(quán)重較高，針對(duì)單個(gè)任務(wù)流程的控制，請(qǐng)使用單選/復(fù)選；
• 默認(rèn)就是開啟/關(guān)閉狀態(tài)，若存在子級(jí)，父級(jí)關(guān)閉的同時(shí)將子級(jí)隱藏（避免置灰）；
• 當(dāng)操作有風(fēng)險(xiǎn)時(shí)，必須給予明確的提示；
• 避免大面積使用，如果存在太多需要開啟/關(guān)閉的條件，建議使用復(fù)選；

3.背景與文案

撥動(dòng)開關(guān)的背景通常只介于兩種狀態(tài)，關(guān)閉狀態(tài)下為置灰（全服通用），開啟后為綠色，也有很多產(chǎn)品將其設(shè)定為品牌色，統(tǒng)一顏色樣式即可。

輔助文案常見有兩種類型，第一種為當(dāng)前狀態(tài)反饋，例如：獲取設(shè)備通知權(quán)限“消息推送已開啟/關(guān)閉”，這種反饋在應(yīng)用中可靈活運(yùn)用，尤其是在關(guān)閉狀態(tài)下，可起到一定的引導(dǎo)作用。第二種為標(biāo)簽輔助提示，例如：操作后的好處或風(fēng)險(xiǎn)，告知用戶會(huì)發(fā)生什么，提前讓用戶有一定的心理預(yù)期。

四、單選控件的糾葛

1.單選框vs復(fù)選框

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

在PC端遇到兩個(gè)對(duì)立的選項(xiàng)（如：是/否、同意/不同意、通過/不通過）時(shí)，除了用兩個(gè)單選項(xiàng)之外，也可以使用復(fù)選框，尤其是在權(quán)限控制中，必定是復(fù)選。另外，移動(dòng)端注冊(cè)登錄流程中，用戶服務(wù)協(xié)議也是最具代表性的復(fù)選框（同意/不同意二選一）使用案例。除去這些特殊的使用場(chǎng)景，其他大部分就直接單選。

2.單選框vs撥動(dòng)開關(guān)

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

至于什么時(shí)候需要用撥動(dòng)開關(guān)，上述3-2《撥動(dòng)開關(guān)的使用準(zhǔn)則》中有詳細(xì)說明，除此之外使用單選框，能解決設(shè)計(jì)中80%的單選與撥動(dòng)開關(guān)的選擇性問題。

3.單選框vs下拉列表

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

五、必備常識(shí)和使用技巧

1.選項(xiàng)的幾種狀態(tài)

單選、復(fù)選、撥動(dòng)開關(guān)各自都有不同的狀態(tài)，在設(shè)計(jì)之前，設(shè)計(jì)師需要清楚地知道這些狀態(tài)所代表的含義以及不同的使用場(chǎng)景，避免后續(xù)在使用中給用戶造成困擾。

2.符合用戶認(rèn)知的控件樣式

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

3.注意對(duì)齊方式

按鈕式不用多說，文字跟容器上下左右居中。列表中的對(duì)齊方式無非兩種，選項(xiàng)框在前，文字和選項(xiàng)框都是左對(duì)齊，單選/復(fù)選均可采用這種方式；選項(xiàng)框在后，則文字左對(duì)齊、選項(xiàng)框右對(duì)齊，采用這種方式的單選居多；撥動(dòng)開關(guān)則是全網(wǎng)統(tǒng)一，標(biāo)簽左對(duì)齊，開/關(guān)右對(duì)齊。

4.清晰簡(jiǎn)短的標(biāo)簽

選項(xiàng)標(biāo)簽需清晰簡(jiǎn)短、直接表達(dá)核心含義，盡量避免否定的表達(dá)方式，以免用戶產(chǎn)生誤解。像撥動(dòng)開關(guān)這種兩極分化的選項(xiàng)，當(dāng)用戶不清楚對(duì)立的選項(xiàng)內(nèi)容時(shí)，可以使用副標(biāo)題進(jìn)行描述，讓用戶在操作之前有一定的心理預(yù)期。

5.批量選擇、節(jié)約操作成本

雖然都是將選擇權(quán)交給用戶，但面對(duì)不同的場(chǎng)景，需提供一個(gè)「全選」操作，幫助用戶一次完成多個(gè)重復(fù)的操作，降低操作成本。

例如：B端的內(nèi)容管理，批量操作能節(jié)省很多時(shí)間，還能降低因多次重復(fù)操作產(chǎn)生的失誤概率；C端最具代表性的有購物車、以及初次進(jìn)入部分應(yīng)用時(shí)的個(gè)性化標(biāo)簽選擇。

6.觸控?zé)釁^(qū)的設(shè)定

針對(duì)移動(dòng)端，點(diǎn)擊區(qū)域切勿直接使用選項(xiàng)框的范圍大小，需單獨(dú)設(shè)定熱區(qū)范圍。大家都知道，大拇指在移動(dòng)端應(yīng)用中使用頻率是最高的，相對(duì)來說，要有足夠大（非絕對(duì)）的操作區(qū)域以供手指進(jìn)行精準(zhǔn)交互，以免無效操作或操作失誤。需要將文本標(biāo)簽、選項(xiàng)框以及各選項(xiàng)區(qū)域均分后四周的留白都作為觸動(dòng)熱區(qū)，操作起來就會(huì)輕松很多。

六、結(jié)語

本文筆者主要總結(jié)了單選、復(fù)選、撥動(dòng)開關(guān)的使用規(guī)范及常見問題，不過設(shè)計(jì)規(guī)范只是基于產(chǎn)品本身構(gòu)建的一個(gè)標(biāo)準(zhǔn)，為了約束后續(xù)的視覺統(tǒng)一而存在的規(guī)范參考。在真實(shí)的設(shè)計(jì)中，這些設(shè)計(jì)規(guī)范并不是唯一，需要根據(jù)產(chǎn)品的特點(diǎn)和使用場(chǎng)景進(jìn)行靈活變動(dòng)，設(shè)計(jì)出最適合自身產(chǎn)品的控件才是最重要的。

遵循設(shè)計(jì)規(guī)范只是最基礎(chǔ)的標(biāo)準(zhǔn)，遵循的同時(shí)跳出規(guī)范的束縛才會(huì)有創(chuàng)意，這就離不開我們平時(shí)的積累，鉆研各產(chǎn)品中優(yōu)秀的設(shè)計(jì)細(xì)節(jié)，通過查漏補(bǔ)缺、揚(yáng)長(zhǎng)避短，在其他產(chǎn)品的亮點(diǎn)中找到與自身產(chǎn)品的平衡點(diǎn)并將其融合，這才是我們學(xué)習(xí)和總結(jié)的最終目的。

原文地址：能量眼球

作者：大漠飛鷹CYSJ

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》選項(xiàng)篇 | 單選/復(fù)選/撥動(dòng)開關(guān)的使用小技巧！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

背景

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

一、升級(jí)視頻搜索全鏈路框架

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

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

綜合搜索結(jié)果頁是用戶最先觸達(dá)的場(chǎng)景，為平衡用戶暢快瀏覽視頻與消費(fèi)綜合搜索結(jié)果的訴求，我們開拓了負(fù)一樓平行框架，即上層頁面展示綜合結(jié)果，下層負(fù)一樓頁面展示視頻結(jié)果。當(dāng)用戶搜索與視頻關(guān)聯(lián)度較高的搜索詞時(shí)會(huì)自動(dòng)進(jìn)入負(fù)一樓頁面，用戶可上滑瀏覽視頻，也可上拉或點(diǎn)擊上層面板返回綜合結(jié)果。設(shè)計(jì)實(shí)施過程中，我們圍繞“打造可暢快瀏覽的視頻消費(fèi)框架”的目標(biāo)，第一步定義頁面框架結(jié)構(gòu)，第二步打磨感知體驗(yàn)，第三步輔助用戶認(rèn)知。

1-1 定義框架結(jié)構(gòu)

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

1-2 打磨感知體驗(yàn)

確定框架結(jié)構(gòu)后我們分別從視覺層與觸覺層打磨感知體驗(yàn)。歷史實(shí)驗(yàn)數(shù)據(jù)表明，深色系的背景色比淺色系的背景色更能幫助用戶聚焦于視頻內(nèi)容本身，從而提升視頻消費(fèi)數(shù)量與時(shí)長(zhǎng)，于是我們?cè)谪?fù)一樓通過較深的氛圍底色帶給用戶更沉浸的消費(fèi)感知，同時(shí)也與綜合結(jié)果形成對(duì)比差異，加深用戶記憶。在手勢(shì)切換框架的過程中存在觸發(fā)框架移動(dòng)的臨界值，當(dāng)拖動(dòng)位置到達(dá)臨界值時(shí)會(huì)產(chǎn)生1次震動(dòng)反饋，提示用戶此時(shí)松手后框架自動(dòng)切換，以降低用戶認(rèn)知成本。

1-3 輔助用戶認(rèn)知

為輔助用戶建立對(duì)負(fù)一樓新框架的認(rèn)知，我們通過三階引導(dǎo)在不同時(shí)機(jī)引導(dǎo)用戶進(jìn)行不同操作。當(dāng)一個(gè)新用戶進(jìn)入負(fù)一樓后【引導(dǎo)1】會(huì)通過面板上下彈動(dòng)的效果引導(dǎo)用戶上拉面板，幫助用戶理解框架結(jié)構(gòu)，引導(dǎo)用戶進(jìn)入綜合結(jié)果；進(jìn)入綜合結(jié)果后【引導(dǎo)2】通過頁面自動(dòng)下拉的效果幫用戶認(rèn)知返回路徑；當(dāng)用戶重新進(jìn)入負(fù)一樓且一段時(shí)間內(nèi)無操作【引導(dǎo)3】會(huì)引導(dǎo)用戶上滑瀏覽視頻。這三個(gè)引導(dǎo)緊密配合，有效輔助用戶快速建立全新的使用習(xí)慣。

2.【五合框架】強(qiáng)化認(rèn)知，操作提效

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

3.【融合框架】橫豎融合，場(chǎng)景打通

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

3-1 融合結(jié)果頁

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

3-2 融合落地頁

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

二、提升搜索視頻體驗(yàn)及品質(zhì)

百度搜索結(jié)果為多類型資源混排構(gòu)成，隨搜索視頻化戰(zhàn)略轉(zhuǎn)型，視頻資源在結(jié)果頁占比大幅提升，視頻既需遵循整頁基礎(chǔ)設(shè)計(jì)規(guī)范，保障用戶搜索體驗(yàn)一致性；同時(shí)又需持續(xù)打磨，提升視頻資源獨(dú)有的播放體驗(yàn)品質(zhì)感。所以如何在保障整頁消費(fèi)體驗(yàn)基礎(chǔ)上，最大限度的提升視頻品質(zhì)感是我們面對(duì)的一大難題。基于此我們采用兩步走打法，第一步視頻資源播出來，第二步品質(zhì)體驗(yàn)提起來。

第一步：視頻資源播出來

原搜索結(jié)果頁各類資源采用統(tǒng)一模版結(jié)構(gòu)，資源展示趨同，視頻相關(guān)正向描述元素不突出，用戶快速篩選、識(shí)別視頻資源的成本較高，視頻播放器較小且不支持自動(dòng)播放，需點(diǎn)擊進(jìn)入落地頁觀看消費(fèi)，整體操作成本較高，導(dǎo)致用戶消費(fèi)路徑變長(zhǎng)，效率降低。我們將問題歸納分為3類，并逐一擊破。

1. 強(qiáng)化視頻展示

為解決視頻展示不突出，用戶難以在眾多資源中快速識(shí)別的問題，我們優(yōu)化視頻資源卡結(jié)構(gòu)，將播放器按照百度搜索柵格規(guī)范放至最大化，強(qiáng)化視頻展示。

2. 視頻自動(dòng)播放

同時(shí)引入視頻自動(dòng)播放能力，將消費(fèi)場(chǎng)景前置，縮短路徑，使用戶方便快捷的在當(dāng)前頁觀看視頻。

3. 信息合理布局

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

第二步：品質(zhì)體驗(yàn)提起來

視頻升級(jí)為自動(dòng)播放后，用戶對(duì)視頻播放、瀏覽體驗(yàn)的要求隨之提高，細(xì)微的不順暢也會(huì)被肉眼放大為強(qiáng)烈的卡頓感。故此時(shí)升級(jí)視頻播放品質(zhì)變得至關(guān)重要。我們根據(jù)用戶消費(fèi)行為，將優(yōu)化分為兩個(gè)維度：?jiǎn)我徊シ藕吐?lián)動(dòng)瀏覽。再將兩個(gè)維度細(xì)分為三種場(chǎng)景：1、單一視頻在單頁面內(nèi)的播放；2、單一視頻跨頁面瀏覽；3、多視頻在單頁面輪換瀏覽。最終確認(rèn)兩大優(yōu)化方向：播放體驗(yàn)流暢性提升、瀏覽體驗(yàn)順暢性升級(jí)，并制定針對(duì)性解法。

1. 播放體驗(yàn)流暢性-信息交互動(dòng)效升級(jí)

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

2. 瀏覽體驗(yàn)流暢性

針對(duì)單一視頻跨頁面消費(fèi)場(chǎng)景，續(xù)播精準(zhǔn)度和銜接順暢性至關(guān)重要。針對(duì)單一頁面內(nèi)多個(gè)視頻輪換播放，如何在不影響用戶瀏覽其他資源的前提下，保證多視頻輪換播放順暢性也是重中之重。視覺和聽覺是用戶獲取視頻內(nèi)容的感官，所以視頻播放畫面、聲音順暢性成為了瀏覽流暢性的關(guān)鍵因素。所以我們從體驗(yàn)視角出發(fā)，建立搜索場(chǎng)景各頁面播放、聲音雙聯(lián)動(dòng)機(jī)制。

2-1 視頻播放聯(lián)動(dòng)

首先是視頻播放聯(lián)動(dòng)，我們將視頻播放拆分為起播、續(xù)播、連播3部分，分析現(xiàn)狀并找出核心問題點(diǎn)。由于頁面資源混排，視頻化未發(fā)力前遺留一系列問題：視頻起播門檻高、優(yōu)先播放邏輯混亂、同一視頻播放進(jìn)度各頁面不聯(lián)動(dòng)，視頻消費(fèi)不連貫等，已嚴(yán)重影響視頻搜索體驗(yàn)與品質(zhì)感。

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

2-2 視頻聲音聯(lián)動(dòng)

然后是聲音聯(lián)動(dòng)，原搜索場(chǎng)景內(nèi)各頁面以及搜索結(jié)果頁各視頻，聲音狀態(tài)各自獨(dú)立互不影響，而聲音作為視頻傳達(dá)的核心內(nèi)容之一，狀態(tài)不聯(lián)動(dòng)導(dǎo)致用戶針對(duì)聲音頻繁重復(fù)操作，各場(chǎng)景割裂感強(qiáng)烈，視頻瀏覽體驗(yàn)極差，故在視頻搜索場(chǎng)景下升級(jí)聲音聯(lián)動(dòng)機(jī)制。

• 分場(chǎng)景定狀態(tài)：綜合搜索結(jié)果頁為篩選瀏覽場(chǎng)景默認(rèn)無聲狀態(tài)，融合落地頁為沉浸消費(fèi)場(chǎng)景默認(rèn)有聲；
• 交互智能響應(yīng)：用戶有對(duì)聲音的主動(dòng)交互行為（佩戴耳機(jī)、調(diào)節(jié)物理聲音按鍵、點(diǎn)擊聲音按鈕）后，切換為有聲播放；

• 頁面聲音聯(lián)動(dòng)：在綜合搜索結(jié)果頁、視頻結(jié)果頁任一頁面調(diào)節(jié)聲音后，頁面發(fā)生滑動(dòng)或跳轉(zhuǎn)，聲音狀態(tài)聯(lián)動(dòng)跟隨。

寫在最后

在搜索視頻化進(jìn)擊的過程中，我們從體驗(yàn)視角出發(fā)，通過對(duì)視頻搜索全鏈路框架的升級(jí)，強(qiáng)化了用戶視頻搜索認(rèn)知，降低了視頻觸達(dá)成本。通過對(duì)視頻自動(dòng)播能力升級(jí)、播放器信息布局的統(tǒng)一、播放與瀏覽體驗(yàn)流暢性的打磨，搜索視頻品質(zhì)感全面升級(jí)，用戶體驗(yàn)也更加細(xì)膩、流暢、自然。經(jīng)過以上一系列優(yōu)化后，用戶瀏覽消費(fèi)視頻的數(shù)量和時(shí)長(zhǎng)等指標(biāo)均顯著增長(zhǎng)。未來視頻化方向的角逐會(huì)愈發(fā)激烈，我們將進(jìn)一步探索百度搜索自身特色，以期做體驗(yàn)最好的視頻搜索。

原文地址：百度MEUX（公眾號(hào)）

作者：百度APP用戶體驗(yàn)

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》視頻搜索體驗(yàn)價(jià)值論

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司