細節(jié)見真章!有效提升設計體驗的10個細節(jié)

2021-8-17    seo達人



1.為錯誤狀態(tài)添加圖標

圖片

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

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

 

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

圖片

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

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

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

 

3.給灰色加一點顏色

圖片

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

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

 

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

圖片

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

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

如果里面的選項沒有被全選中,復選框需要有一個和選項不同的狀態(tài)提示,告知用戶框內(nèi)有未選擇的選項;當選項全被選中時,可以用統(tǒng)一的標識來告知用戶。

 

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

圖片

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

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

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

 

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

圖片

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

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

 

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

圖片

上圖兩個彈窗看起來很相似,唯一的區(qū)別是狀態(tài)圖標的不同。左邊的圖標是通用性的,右邊的更符合當前的狀態(tài)。

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

 

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

圖片

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

 

9.避免使用默認陰影

圖片

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

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

 

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

圖片

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

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

 

最后

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


原文地址:CLIP設計夾(公眾號)

作者:Clippp

 

轉(zhuǎn)載請注明:學UI網(wǎng)》細節(jié)見真章!有效提升設計體驗的10個細節(jié)

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

截屏2021-05-13 上午11.41.03.png

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

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



分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://bouu.cn

存檔