編輯導(dǎo)語：有時(shí)候，一點(diǎn)小小的細(xì)節(jié)變化，能給用戶帶來不一樣的體驗(yàn)。本文作者分享了12個(gè)易于實(shí)踐的UI/UX小技巧，幫助我們改善設(shè)計(jì)與用戶體驗(yàn)，希望能給你帶來幫助。

每天進(jìn)步一點(diǎn)點(diǎn)，與大家分享一些易于實(shí)踐的UI/UX小技巧，可以幫助我們改善設(shè)計(jì)與用戶體驗(yàn)。

01 幫助用戶以最快的方式獲取相關(guān)內(nèi)容

頁面內(nèi)鏈接/跳轉(zhuǎn)鏈接，如果應(yīng)用得當(dāng)，當(dāng)涉及到單個(gè)頁面上的冗長內(nèi)容時(shí)，它們可以顯著改善用戶體驗(yàn)。

例如，在一篇很長的文章中，就是一個(gè)有很多部分的文章，每個(gè)部分都有很多內(nèi)容，擁有大綱目錄可以幫助用戶快速導(dǎo)航到他們需要的部分，而不用無需無休止的滾動(dòng)。

頁內(nèi)鏈接應(yīng)用得當(dāng)，可以為用戶提供感興趣內(nèi)容的快速訪問，并大大提高你的內(nèi)容的可發(fā)現(xiàn)性和參與度。

02 在表格輸入中，盡量減少冗余任務(wù)

有些表格輸入內(nèi)容項(xiàng)可能會(huì)很長，為用戶簡化并盡量減少冗余任務(wù)，例如輸入送貨地址的詳細(xì)信息，這在大多數(shù)情況下都是相同的。因此，使用簡單的復(fù)選框讓用戶減少耗時(shí)，讓他們可以復(fù)制之前輸入的數(shù)據(jù)、預(yù)填充字段并在表單中快速移動(dòng)。

03 始終將標(biāo)簽放在較長輸入框的上方

對(duì)于簡短的表單，遵循Z模式并將標(biāo)簽放置在字段左側(cè)是可行的，因?yàn)闆]有太多要掃描的內(nèi)容，但對(duì)于類目較多的表單，請(qǐng)始終將這些標(biāo)簽放在頂部。

尤其是那些類目比較多的表單，使用更常見的F模式，允許用戶以更自然的方式掃描表單并更快地完成表單。

04 避免使用“超極簡”外觀

當(dāng)涉及到一些UI元素時(shí)，尤其是像下載按鈕之類的，使用超極簡的外觀并不合適，尤其是在PC上。嘗試通過使用顏色、百分比數(shù)字（在更大的屏幕上，更是如此）來顯示當(dāng)前進(jìn)度和一個(gè)簡單的圖標(biāo)來實(shí)現(xiàn)隨時(shí)取消該過程。

05 在表單輸入后提供即時(shí)反饋

當(dāng)涉及到很多的輸入字段組成的表單，可以鼓勵(lì)用戶在完成輸入的時(shí)候看到及時(shí)反饋。及時(shí)反饋，只需讓用戶了解與特定字段的交互是否成功。

一個(gè)簡單的圖標(biāo)，在某些情況下，一個(gè)簡短的文本提示就足以提供大大改進(jìn)的可訪問性。

06 如何快速地選擇配色？

鄰近色，是色盤上彼此相鄰的三種（也可以選擇更多的）顏色，由一種主色組成，然后輔助顏色在兩邊。

使用鄰近顏色可以幫助你快速找到一種和諧的配色方案，使你的設(shè)計(jì)看起來統(tǒng)一、一致。

07 保持搜索字段的完整性

在條件允許的情況，搜索框區(qū)域足夠大，以容納用戶的完整搜索查詢。

沒有人喜歡看到他們的查詢消失在搜索區(qū)域的邊緣。只需單擊一個(gè)搜索圖標(biāo)，當(dāng)單擊該圖標(biāo)時(shí)，會(huì)顯示一個(gè)搜索區(qū)域，足以容納用戶的完整搜索查詢。

08 選擇合適的控件

當(dāng)涉及到產(chǎn)品列表時(shí)，單選按鈕還是下拉菜單？

在電商類應(yīng)用中，屏幕空間非常緊張，避免用戶信息過載，單選按鈕適用于四個(gè)或更少的選項(xiàng)，四個(gè)以上的選項(xiàng)，與下拉菜單一起使用。

09 讓設(shè)計(jì)看起來更“真實(shí)”的陰影選擇

在彩色畫布上處理元素時(shí)，盡量避免使用黑色陰影。在現(xiàn)實(shí)世界中，如果你將一個(gè)元素放置在彩色背景之上，那么該元素投射的陰影將與背景顏色滲出。

所以要避免那些看起來很假的陰影，并在混合中加入一點(diǎn)背景顏色，讓設(shè)計(jì)看起來更“真實(shí)”。

10 關(guān)于暗黑主題設(shè)計(jì)中的白色

正如在上面一組技巧中提到的，在創(chuàng)建深色主題設(shè)計(jì)時(shí)永遠(yuǎn)不要選擇純黑色，因?yàn)樗鼤?huì)影響許多用戶的可用性，盡可能弱化黑色。

每當(dāng)你決定將白色元素添加到深色設(shè)計(jì)中時(shí)，都適用類似的規(guī)則。

如果使用的白色是純白色，它們可能會(huì)在與黑暗主題元素的映襯下刺眼，并造成糟糕的視覺體驗(yàn)，因此需要弱化這些白色，并降低它們的對(duì)比度，以使用戶的眼睛更容易看到。

11 表單中的錯(cuò)誤狀態(tài)不要只要靠顏色

當(dāng)涉及到表單的可訪問性時(shí)，不要僅僅依靠顏色來向用戶傳達(dá)不同的狀態(tài)。

例如，對(duì)于錯(cuò)誤提示，如果僅靠顏色進(jìn)行提示，那么對(duì)患有色盲的很不友好?？梢越Y(jié)合圖標(biāo)和某種形式的錯(cuò)誤消息來幫助輔助功能，讓用戶得到正確的提示。

12 使用示例來改進(jìn)表單的用戶體驗(yàn)

事實(shí)證明，在表單字段中使用正確占位符，例如選擇“輸入您的電子郵件”之類的占位符副本，不如提供一個(gè)真實(shí)的示例，即；’hello@hotmail.com’，以改善用戶體驗(yàn)，并按照預(yù)期的方式使用占位符。

本文由 @Color可樂 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議