1.為錯(cuò)誤狀態(tài)添加圖標(biāo)

帶有錯(cuò)誤提示的圖標(biāo)有助于用戶更快地識(shí)別錯(cuò)誤的位置。輸入信息時(shí)，在有限的空間內(nèi)，錯(cuò)誤提示往往被設(shè)計(jì)的非常有限。

常見(jiàn)的錯(cuò)誤提示的結(jié)構(gòu)是文字+顏色：告知用戶錯(cuò)誤的原因并改變輸入框的顏色狀態(tài)。在這個(gè)基礎(chǔ)上，再添加錯(cuò)誤圖標(biāo)，構(gòu)成文字+顏色+圖標(biāo)的提示結(jié)構(gòu)，可以讓整個(gè)提示狀態(tài)更全面，用戶也能快速明確地感知到問(wèn)題的所在。

2.引導(dǎo)用戶而不是顯示錯(cuò)誤

常見(jiàn)的錯(cuò)誤提示只是單純地告知用戶做錯(cuò)了什么，并不能告知用戶應(yīng)該怎么做才正確，這也是令很多用戶頭疼的地方。

在設(shè)置密碼時(shí)通常對(duì)密碼有一定的要求，例如至少8位數(shù)、包含大小寫字母、包含特殊符號(hào)等，這些復(fù)雜的提示往往會(huì)讓用戶摸不著頭腦，不能做到第一時(shí)間了解情況，造成密碼創(chuàng)建失敗。

當(dāng)用戶創(chuàng)建密碼失敗后，如果只告訴用戶密碼創(chuàng)建失敗這樣一個(gè)結(jié)果會(huì)讓用戶感到很疑惑。比起結(jié)果，用戶更想知道的是應(yīng)該怎么創(chuàng)建才是正確的，通過(guò)給出明確的引導(dǎo)，讓用戶知道應(yīng)該輸入什么才是應(yīng)該重點(diǎn)考慮的地方。

3.給灰色加一點(diǎn)顏色

左側(cè)頁(yè)面的背景為純灰色(242，242，242)，右側(cè)背景色為藍(lán)灰色(228、235、242)。

通過(guò)對(duì)比能夠發(fā)現(xiàn)，藍(lán)灰色調(diào)對(duì)我們的眼睛來(lái)說(shuō)更自然。在設(shè)計(jì)中，盡可能讓頁(yè)面背景的灰色偏冷或偏暖，而不是使用純灰色，這樣設(shè)計(jì)的頁(yè)面看起來(lái)會(huì)更舒服。

4.使用不同的復(fù)選框狀態(tài)

復(fù)選框(Checkboxes)通常有一個(gè)或者多個(gè)選項(xiàng)供用戶選擇，用戶可以選擇一個(gè)也可以選擇多個(gè)。

這里需要注意的細(xì)節(jié)是選項(xiàng)有全選中和未全選中兩個(gè)狀態(tài)：

如果里面的選項(xiàng)沒(méi)有被全選中，復(fù)選框需要有一個(gè)和選項(xiàng)不同的狀態(tài)提示，告知用戶框內(nèi)有未選擇的選項(xiàng)；當(dāng)選項(xiàng)全被選中時(shí)，可以用統(tǒng)一的標(biāo)識(shí)來(lái)告知用戶。

5.突出顯示搜索內(nèi)容

搜索是產(chǎn)品必備功能之一，功能強(qiáng)大且方便。

當(dāng)我們輸入內(nèi)容進(jìn)行搜索時(shí)，搜索框會(huì)聯(lián)想一些關(guān)聯(lián)的關(guān)鍵詞供我們參考和使用，這樣的提示可以提升用戶的搜索效率，節(jié)省輸入時(shí)間。

在關(guān)鍵詞聯(lián)想的基礎(chǔ)上，我們可以把搜索體驗(yàn)做的更好！在聯(lián)想關(guān)鍵詞的同時(shí)，突出顯示輸入的內(nèi)容，這樣就可以快速識(shí)別提示的其他內(nèi)容，既突出重點(diǎn)又節(jié)省時(shí)間。

6.將插圖添加到空狀態(tài)

出現(xiàn)空狀態(tài)時(shí)，沒(méi)有要求頁(yè)面必須是空白的。可以適當(dāng)添加一些元素，如插畫、動(dòng)效等，讓用戶感覺(jué)更舒服。

如果想讓空狀態(tài)變得更好，可以給出具體的操作提示，告知用戶如何進(jìn)行下一步，嘗試引導(dǎo)用戶到正確的地方。

7.為消息添加合理的狀態(tài)

上圖兩個(gè)彈窗看起來(lái)很相似，唯一的區(qū)別是狀態(tài)圖標(biāo)的不同。左邊的圖標(biāo)是通用性的，右邊的更符合當(dāng)前的狀態(tài)。

交流和溝通不僅僅只通過(guò)文字。圖像、圖標(biāo)或插圖都有助于用戶識(shí)別所執(zhí)行操作的狀態(tài)。

8.為面包屑導(dǎo)航添加顏色

這個(gè)方法常用于一些特定的解決方案上。通過(guò)在面包屑導(dǎo)航上添加顏色，可以告知用戶可點(diǎn)擊的導(dǎo)航類別，并提示用戶具體的位置，更加方便操作。

9.避免使用默認(rèn)陰影

很多設(shè)計(jì)軟件中預(yù)設(shè)的默認(rèn)陰影看起來(lái)都不是很舒服，需要我們自己來(lái)設(shè)計(jì)一些柔和的陰影效果。

要始終秉持對(duì)設(shè)計(jì)作品負(fù)責(zé)的態(tài)度，不能為了方便而使用了糟糕的陰影效果，這樣帶來(lái)的后果可能是整個(gè)作品的不規(guī)范，得不償失。

10.同一個(gè)方案采用相同的色調(diào)

中性色有助于在頁(yè)面中建立平衡，更具有吸引力，然而使用太多的灰色調(diào)卻很容易破壞頁(yè)面的這種和諧。

在整個(gè)設(shè)計(jì)中保持相同色調(diào)的中性色，可以將顏色選擇器切換到HSB模式，通過(guò)改變數(shù)值能很方便地調(diào)節(jié)顏色關(guān)系。

最后

通過(guò)這些實(shí)用性的設(shè)計(jì)細(xì)節(jié)，希望能對(duì)你的工作帶來(lái)切實(shí)的幫助。在設(shè)計(jì)中想的更多、更全面一點(diǎn)，不僅能提升自己思考的維度和深度，還可能讓產(chǎn)品和體驗(yàn)上升層次。

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

作者：Clippp

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》細(xì)節(jié)見(jiàn)真章！有效提升設(shè)計(jì)體驗(yàn)的10個(gè)細(xì)節(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)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.91whvog3.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ù)