1.為錯誤狀態添加圖標

帶有錯誤提示的圖標有助于用戶更快地識別錯誤的位置。輸入信息時，在有限的空間內，錯誤提示往往被設計的非常有限。

常見的錯誤提示的結構是文字+顏色：告知用戶錯誤的原因并改變輸入框的顏色狀態。在這個基礎上，再添加錯誤圖標，構成文字+顏色+圖標的提示結構，可以讓整個提示狀態更全面，用戶也能快速明確地感知到問題的所在。

2.引導用戶而不是顯示錯誤

常見的錯誤提示只是單純地告知用戶做錯了什么，并不能告知用戶應該怎么做才正確，這也是令很多用戶頭疼的地方。

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

當用戶創建密碼失敗后，如果只告訴用戶密碼創建失敗這樣一個結果會讓用戶感到很疑惑。比起結果，用戶更想知道的是應該怎么創建才是正確的，通過給出明確的引導，讓用戶知道應該輸入什么才是應該重點考慮的地方。

3.給灰色加一點顏色

左側頁面的背景為純灰色(242，242，242)，右側背景色為藍灰色(228、235、242)。

通過對比能夠發現，藍灰色調對我們的眼睛來說更自然。在設計中，盡可能讓頁面背景的灰色偏冷或偏暖，而不是使用純灰色，這樣設計的頁面看起來會更舒服。

4.使用不同的復選框狀態

復選框(Checkboxes)通常有一個或者多個選項供用戶選擇，用戶可以選擇一個也可以選擇多個。

這里需要注意的細節是選項有全選中和未全選中兩個狀態：

如果里面的選項沒有被全選中，復選框需要有一個和選項不同的狀態提示，告知用戶框內有未選擇的選項；當選項全被選中時，可以用統一的標識來告知用戶。

5.突出顯示搜索內容

搜索是產品必備功能之一，功能強大且方便。

當我們輸入內容進行搜索時，搜索框會聯想一些關聯的關鍵詞供我們參考和使用，這樣的提示可以提升用戶的搜索效率，節省輸入時間。

在關鍵詞聯想的基礎上，我們可以把搜索體驗做的更好！在聯想關鍵詞的同時，突出顯示輸入的內容，這樣就可以快速識別提示的其他內容，既突出重點又節省時間。

6.將插圖添加到空狀態

出現空狀態時，沒有要求頁面必須是空白的?？梢赃m當添加一些元素，如插畫、動效等，讓用戶感覺更舒服。

如果想讓空狀態變得更好，可以給出具體的操作提示，告知用戶如何進行下一步，嘗試引導用戶到正確的地方。

7.為消息添加合理的狀態

上圖兩個彈窗看起來很相似，唯一的區別是狀態圖標的不同。左邊的圖標是通用性的，右邊的更符合當前的狀態。

交流和溝通不僅僅只通過文字。圖像、圖標或插圖都有助于用戶識別所執行操作的狀態。

8.為面包屑導航添加顏色

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

9.避免使用默認陰影

很多設計軟件中預設的默認陰影看起來都不是很舒服，需要我們自己來設計一些柔和的陰影效果。

要始終秉持對設計作品負責的態度，不能為了方便而使用了糟糕的陰影效果，這樣帶來的后果可能是整個作品的不規范，得不償失。

10.同一個方案采用相同的色調

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

在整個設計中保持相同色調的中性色，可以將顏色選擇器切換到HSB模式，通過改變數值能很方便地調節顏色關系。

最后

通過這些實用性的設計細節，希望能對你的工作帶來切實的幫助。在設計中想的更多、更全面一點，不僅能提升自己思考的維度和深度，還可能讓產品和體驗上升層次。

原文地址：CLIP設計夾（公眾號）

作者：Clippp

轉載請注明：學UI網》細節見真章！有效提升設計體驗的10個細節

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

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

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