UI設計效果快速提升的6 個小技巧

在進行 UI 設計的時候，很多小技巧能夠恰到好處地提升界麵的設計視覺效果、用戶體驗。這篇來自Marc Andrew 的文章梳理了6個實用性很強的 UI 效果提升小技巧，是係列文章的十一篇，原文最早發布於 marcandrew.me 。

在創建實用、可訪問性良好且視覺效果頗為出彩的 UI 界麵的時候，我們大多隻需要進行有限度的微調，即可達到頗為不錯的效果。在之前，我已經撰寫了很多實用的 UI & UX 優化小貼士（看完文章在文末獲取），這篇文章繼續增加 6 條實用的建議，一起來看看吧！

1. 少用點色彩一樣可以讓視覺充滿凝聚力

在上方的兩個設計範例當中，左邊使用的配色明顯不搭，右邊則基於基礎色微調明度和飽和度來進行配色，更加協調。

如果你的設計項目可以讓你在顏色選擇方麵有更多的自由，不要總是傾向於用花哨的彩虹色來包裝它。

如果你沿著彩虹係的配色走下去，你可能會很快發現你所選取的色彩總會在視覺上顯得不那麼協調。

實際上，你隻需要基礎的色彩，然後基於這個顏色，借助微調明度和飽和度來拓展配色方案，就能夠得到更加均勻、更加具有凝聚力和專業感的外觀了，不需要閃亮的彩虹色和複雜的配色技巧，同樣能夠拿出好設計。

當然，基於基礎的顏色快速搭建出配色。

2.抓住用戶的注意力的技巧

在上麵的兩個設計範例當中， 一個菜單選項使用了簡單的方形選框，另一個使用了彩色的背景。

UI 可以是幹淨簡約又直觀的，但可用性和易用性更重要，不能以犧牲用戶體驗為代價。對於關鍵信息，UI元素需要有足夠的對比度，以抓住用戶的注意力。

對於像選項菜單這樣簡單的東西，請確保用戶在快速瀏覽的時候，能立刻注意到所選的項目。

相比於小巧的選框，使用彩色的背景來進行區分，會更加直覺，也更容易被用戶所識別出來。

3. 使用細文本的時候加深顏色

在上方的兩個設計範例中，一個文本使用淺灰色，另一個則使用了更深的黑色。

當涉及到長篇文本內容的時候，如果字體是普通粗細，使用可讀性有所保障的某種灰色是目前多數設計師的選擇，它相比於黑色更加優雅，不會顯得對比過於強烈導致視覺感知上的突兀。但是當字體文本非常細的時候，灰色的可讀性可能就存在問題了。

這個時候，可以通過使文本變暗，讓盡可能多的用戶在閱讀的時候不會出現可用性的問題。

4. 讓界麵上最重要的元素更加突出

在上麵的兩個設計範例當中，左邊的一個視覺層次較差，右邊的視覺層次則改善了很多。

在做 UI 設計的時候，你總會希望用戶的眼睛每次都能快速、高效地被關鍵的元素所吸引，並且隻需付出最少的認知努力，不會覺得費勁。

通過控製 字體大小、字重、顏色和布局等視覺層次，您可以輕鬆突出最重要的元素：重要的元素字體更大、字重更粗、顏色有差異、在排版的時候更加突出。

5. 打消用戶的顧慮，讓用戶放心點擊下一步

在上麵的兩個設計案例中， 一個僅僅隻使用了CTA按鈕，另一個則在此基礎上，提供了額外的說明，打消了用戶的顧慮。

當用戶在 UI 中需要進行重要操作的時候，尤其是麵對某些帶有號召性用語的按鈕，請確保用戶對於當前的局麵有充分的了解，不會對接下來可能發生的事情一無所知。對於一些常見的、可能普遍存在於用戶內心的顧慮，一定要提前考慮到，並提供說明。

改善用戶體驗的每一步，都不要讓用戶在交互的曆程中的任何環節產生質疑。

6. 請對 CTA 元素的設計「更自私」一點

在上方的兩個設計範例當中，一個 CTA 按鈕和其他元素使用了相同的顏色，另一個則做出了差異化，讓CTA 按鈕更突出。

引導用戶行為的 CTA 按鈕必須是屏幕上最關鍵的元素之一，它理應得到最高的視覺優先級，換句話說，就是應該盡可能「自私」一點，將最吸引人注意力的顏色分配給它，讓用戶不會將它和其他的 UI 控件在優先級上出現混淆。

當然，你也可以在尺寸、形狀等方麵更進一步設計，但 CTA 按鈕應該保持一種突出的顏色，僅此一項，就可以規避掉絕大部分的問題。

來源：優設網