神譯局是36氪旗下編譯團(tuán)隊(duì)，關(guān)注科技、商業(yè)、職場(chǎng)、生活等領(lǐng)域，重點(diǎn)介紹國(guó)外的新技術(shù)、新觀點(diǎn)、新風(fēng)向。

編者按：用戶對(duì)產(chǎn)品的體驗(yàn)來自直觀感受。所以UI/UX往往對(duì)產(chǎn)品的成敗有著直接的影響，糟糕的UI/UX體驗(yàn)會(huì)讓強(qiáng)大的功能失去效力。但怎么才能提高UI/UX設(shè)計(jì)的效果呢？不一定需要你掌握豐富全面的設(shè)計(jì)知識(shí)，有時(shí)候一點(diǎn)點(diǎn)的小改變就能令設(shè)計(jì)大為改觀。Marc Andrew總結(jié)了36個(gè)改進(jìn)UI/UX設(shè)計(jì)的小技巧，分成6篇系列文章刊出，此為第一篇，希望能夠幫助到你。原文發(fā)表在Medium上，標(biāo)題是：UI & UX micro-tips: Volume one。

這是兩個(gè)設(shè)計(jì)例子。一個(gè)背景色飽和度很高，一個(gè)使用了更為柔和的顏色

在為自己的下一個(gè)項(xiàng)目創(chuàng)作高效、美觀的 UI 時(shí)，有時(shí)只需一點(diǎn)小到不能再小的調(diào)整就可以幫助你快速改進(jìn)設(shè)計(jì)。

有時(shí)候你只需要簡(jiǎn)單的調(diào)整就可以制作出讓客戶、用戶和你自己真正滿意的東西。

在本文中，我整理了一些很小且容易付諸實(shí)踐的技巧，你可以不費(fèi)吹灰之力就能改進(jìn)設(shè)計(jì)和用戶體驗(yàn)。

閑話少說，我們就單刀直入吧……

1.偶爾用下純粹裝飾性的元素是完全可以的。

部分文本內(nèi)容為淺灰色的設(shè)計(jì)示例

是的。屏幕上絕大部分的文本內(nèi)容都應(yīng)該遵循可用性的最佳實(shí)踐。這一點(diǎn)毫無疑問。

但是。有時(shí)候你可能純粹是為了裝飾想加入一些文字，這種做法毫無問題。我們可不希望所有的設(shè)計(jì)都是千篇一律平淡無奇。

純粹出于裝飾的原因加入某些奇怪的元素，而且還不遵守可訪問性標(biāo)準(zhǔn)，這完全沒有問題……如果你不添加那個(gè)元素就會(huì)影響到用戶體驗(yàn)的話。

作品嘛，就得活出自我。

2. 讓UI 里面的元素可以互相區(qū)分。

兩個(gè)設(shè)計(jì)實(shí)例。左邊的通知和按鈕元素看起來類似，右邊則使用了更為多樣化的元素

按鈕。通知。這是UI 里面兩個(gè)獨(dú)立但都很重要的元素。

如果可以的話，始終都要努力確保用戶瞄一眼網(wǎng)站或app時(shí)就能夠快速、輕松地將他們區(qū)分開來。

大多數(shù)情況下都要優(yōu)先保證按鈕，所以請(qǐng)確保按鈕是屏幕上最突出的那個(gè)，并且很容易跟其他元素（比方說通知）區(qū)分開來。

3. 陰影一點(diǎn)點(diǎn)就行。

兩個(gè)設(shè)計(jì)實(shí)例。一個(gè)用了非常深色的陰影，另一個(gè)對(duì)陰影的使用就要含蓄得多

大家都喜歡好的陰影，對(duì)吧？

如果使用適度的話，投影可以在你的設(shè)計(jì)當(dāng)中發(fā)揮微妙但同時(shí)強(qiáng)大的視覺提示作用。

但是。微妙就是這里的關(guān)鍵。

大多數(shù)情況下，現(xiàn)實(shí)世界當(dāng)中的陰影幾乎都不明顯，所以你在 UI設(shè)計(jì)當(dāng)中也應(yīng)該模仿這種行為。

拋棄厚重暗黑的陰影，調(diào)低不透明度，從而獲得更微妙更逼真的效果。

4. 全部都用大寫？不妨選擇適合實(shí)現(xiàn)光學(xué)清晰度的字體。

兩個(gè)設(shè)計(jì)實(shí)例。一個(gè)用了比較細(xì)的字體，文字全部大寫，另一個(gè)則使用了比較粗的字體

在設(shè)計(jì)當(dāng)中全部文字都用大寫，只要適度使用的話都沒問題。

特定文字元素全部大寫可以幫助實(shí)現(xiàn)部分的多樣性，突出相關(guān)內(nèi)容，并增強(qiáng)你想要呈現(xiàn)的整體視覺效果。

如果你的確決定要好好用一用大寫來設(shè)計(jì)樣式的話，一定要盡量確保選擇合適的字體，字體的基本高度（x-height）一定要夠，字體也要夠粗，這樣用戶看起來才清晰。

5. 突出顯示面包屑導(dǎo)航條，要讓用戶易于理解。

兩個(gè)設(shè)計(jì)實(shí)例。左邊是面包屑導(dǎo)航設(shè)計(jì)的糟糕例子，另一個(gè)是對(duì)用戶友好的替代方案

面包屑，到處都是面包屑。

內(nèi)容豐富的網(wǎng)站經(jīng)常使用會(huì)面包屑，但未必總的得到它們應(yīng)得的討好。

不過只要進(jìn)行一點(diǎn)點(diǎn)的調(diào)整，你就可以確保用戶可以輕松地確定自己在網(wǎng)站的什么位置，以及接下來自己要去哪里。

比方說，如果他們是用同搜索跳轉(zhuǎn)到網(wǎng)站深處的某個(gè)地方的話，面包屑就顯得特別有用。

始終要確保鏈條里面最后一項(xiàng)在視覺上跟其它的條目以及鏈接有所不同，要努力讓它們看起來就有所不同。

給面包屑一些愛。

6. 用了高飽和度的顏色？不妨試試用明調(diào)（Tint） 或暗調(diào)（Shade）過的顏色。

兩個(gè)設(shè)計(jì)實(shí)例。一個(gè)背景用了高飽和度的顏色，另一個(gè)則使用了更為柔和的顏色

高飽和度的顏色（明亮的藍(lán)色、紅色、綠色等）用到網(wǎng)站上會(huì)很好看，但如果過度使用的話，這種顏色可能會(huì)讓用戶的眼睛感到疲勞，尤其是在應(yīng)用了大量文本內(nèi)容的時(shí)候。

盡可能適度使用，而且要試著用一些柔和的顏色（明調(diào)或暗調(diào)的漸變色）跟飽和色結(jié)合使用，這樣可以避免可怕的眼睛疲勞。

利用這種方法還可以把注意力集中在飽和色上，把最重要的內(nèi)容放到前面和中心的位置，更柔和的顏色承擔(dān)不那么突出的角色，讓用戶的眼睛得到一點(diǎn)休息。

就照顧一下那些怕光的人吧。

譯者：boxi。

本文來自翻譯, 如若轉(zhuǎn)載請(qǐng)注明出處。