大家好，我是彩云。在做UI界面設(shè)計(jì)時(shí)，有時(shí)候看著設(shè)計(jì)出來的界面總覺得不大好，但又不知道問題出在哪，這里其實(shí)考驗(yàn)的就是設(shè)計(jì)觀察力。資深設(shè)計(jì)師之所以強(qiáng)，往往就是強(qiáng)在對設(shè)計(jì)細(xì)節(jié)的把握能力，他們總能找到你所看不到的細(xì)節(jié)問題。大的問題往往一眼就能看出來，但設(shè)計(jì)品質(zhì)高低往往就藏在這些設(shè)計(jì)細(xì)節(jié)中。觀察力的提升也是來自于平時(shí)項(xiàng)目中的經(jīng)驗(yàn)積累，為此，彩云圍繞設(shè)計(jì)細(xì)節(jié)計(jì)劃出一個(gè)系列文章，今天這篇文章是第一期，感興趣的同學(xué)保持關(guān)注，后續(xù)會(huì)有更多設(shè)計(jì)細(xì)節(jié)干貨文章連載更新，保證看完就能用到自己的工作中。
當(dāng)你在設(shè)計(jì)一個(gè)高效、美觀的UI界面時(shí)，有時(shí)只需要一些小的調(diào)整，就能快速提高設(shè)計(jì)的品質(zhì)。有時(shí)候僅僅是簡單的調(diào)整就能設(shè)計(jì)出讓客戶、用戶和你自己真正滿意的界面。
在這篇文章中，我整理了一些小的設(shè)計(jì)技巧，來幫助你快速改進(jìn)自己的設(shè)計(jì)，提高用戶體驗(yàn)。
1.適當(dāng)使用文本裝飾元素
有些人會(huì)拿極簡設(shè)計(jì)出來說事，認(rèn)為不應(yīng)該加多余的文字干擾 ，界面上的內(nèi)容都應(yīng)該遵循有意義這個(gè)原則，這沒有問題。但有時(shí)候增加文本的目的只是簡單的為了“裝飾”，這樣是可以的。我們不希望所有的設(shè)計(jì)都變得平平無奇。
純粹出于裝飾原因而加入一些比較特別的元素也完全沒問題，它可以不遵循可訪問性標(biāo)準(zhǔn)，比如顏色對比度特別淺，看不清都沒關(guān)系。只要這些元素不影響用戶體驗(yàn)就可以。
2.UI界面中的不同元素要有區(qū)分度
按鈕、通知（文字鏈接）是用戶界面中兩個(gè)獨(dú)立又重要的元素。如果可以的話，一定要確保用戶在瀏覽你的網(wǎng)站或應(yīng)用時(shí)能夠快速且輕松地將它們區(qū)分開來。
按鈕，在大多數(shù)情況下都是最重要的，所以在界面中一定要確保是最突出，并且很容易區(qū)分其他元素（例如：文本鏈接）。
3.使用更自然的投影
設(shè)計(jì)過程中我們通常都會(huì)用到投影。投影的恰當(dāng)使用，可以有效提高視覺品質(zhì)。在設(shè)計(jì)界面時(shí)，避免使用比較重的投影，降低不透明度，讓界面看著更加自然。
4.使用讓視覺更加清晰的字體
在設(shè)計(jì)中，字體適當(dāng)都使用大寫也是很不錯(cuò)的。它可以幫助你在設(shè)計(jì)中實(shí)現(xiàn)元素之間的多樣性和對比度，提高視覺的整體效果。但要確保選擇是合適的字體，行高和字重粗細(xì)，確保給用戶呈現(xiàn)的內(nèi)容清晰度。
5.面包屑導(dǎo)航設(shè)計(jì)要便于用戶理解
導(dǎo)航的設(shè)計(jì)無處不在，通常會(huì)應(yīng)用在內(nèi)容比較多的網(wǎng)站上，但有時(shí)很難理解它所表達(dá)的意思。如果將字體顏色和粗細(xì)稍微調(diào)整下， 就可以讓用戶快速確定自己所在站點(diǎn)中的位置，以及他們可能需要去的其他地方。
例如：如果他們通過搜索跳轉(zhuǎn)到某個(gè)站點(diǎn)的某個(gè)位置，這就特別有用。像上圖中的設(shè)計(jì)一樣，始終讓導(dǎo)航鏈接中的最后一項(xiàng)讓它在視覺上與其他有明顯區(qū)別，這樣用戶更加容易理解。
6.少用過高飽和度的顏色
高飽和度的顏色（明亮的藍(lán)色、紅色、綠色等）在網(wǎng)站上是挺有視覺沖擊力，并能吸引用戶的注意的。但是如果過度使用它們可能會(huì)讓用戶的眼睛感到疲勞，尤其是結(jié)合文本內(nèi)容一起使用的時(shí)候。
盡量少地使用高飽和的顏色，你可以嘗試把飽和度降低，增加顏色中的灰度來使顏色變淡，這樣不僅能避免用戶視覺疲勞，還能更加突出重點(diǎn)內(nèi)容，讓用戶閱讀起來更加方便且不被視覺干擾。
7.使用用戶熟悉便于識(shí)別的圖標(biāo)
在設(shè)計(jì)中使用圖標(biāo)時(shí)，最好使用用戶熟悉并便于識(shí)別的圖標(biāo)，讓用戶能快速理解使用它能做什么。使用不能傳達(dá)正確含義的圖標(biāo)，只會(huì)變成視覺噪音，引起用戶混淆，成為用戶的認(rèn)知障礙。
8.使用親密性原則來表達(dá)元素之間的關(guān)系
版式設(shè)計(jì)四大基本原則：對比，重復(fù)，對齊，親密性，其中親密性原則是把畫面中相關(guān)元素進(jìn)行分類，建立某種視覺上的關(guān)聯(lián)，實(shí)現(xiàn)頁面整體結(jié)構(gòu)清晰度，加快用戶在瀏覽網(wǎng)站或應(yīng)用時(shí)的認(rèn)知。
9. 使用4pt基線網(wǎng)格+8pt網(wǎng)格來做字體排版
進(jìn)行文字排版時(shí)，將 4pt 基礎(chǔ)網(wǎng)格 與 8pt 網(wǎng)格 一起使用可以為設(shè)計(jì)帶來更加和諧的垂直節(jié)奏。
你只需要使用 4 的倍數(shù)（16、20、24、28 等）的行高值將字體與 4 的基線網(wǎng)格對齊。為什么是 4？ 好吧，就我個(gè)人而言，我發(fā)現(xiàn)在處理某些文本大小時(shí)，過去以 8 的倍數(shù)進(jìn)行縮放并不是那么通用。
10. 減少標(biāo)題的行高
冗長的正文需要足夠的行高來增加可讀性，而標(biāo)題通常要短得多，所以你可以稍微減少間距。
標(biāo)題的推薦行高通常是文本大小的1 – 1.3倍，標(biāo)題文字越大，需要的行高就越少。
11. 使用色輪上的鄰近色不容易出錯(cuò)
鄰近色，是最和諧的配色方案之一，當(dāng)你在挑選顏色遇到困難時(shí)，它能給你很大的幫助。
一組由“主”、“次”、“再次”組成的鄰近色可以幫你快速構(gòu)建一個(gè)簡單的、不會(huì)出錯(cuò)的配色方案。
12. 在設(shè)計(jì)中最大化信噪比
設(shè)計(jì)中的清晰度和可用性可以通過“最大化信號(hào)”和“最小化噪音”來實(shí)現(xiàn)，這反過來又產(chǎn)生了高信噪比。
你可以通過確保相關(guān)信息(信號(hào))有效地呈現(xiàn)，而不相關(guān)的信息(噪聲)被完全減少或刪除來實(shí)現(xiàn)這一點(diǎn)。剪掉絨毛。使事情更加清晰，刪減無關(guān)信息，強(qiáng)化重要信息，提高信噪比達(dá)到提高界面設(shè)計(jì)品質(zhì)的目的。
彩云注：由于篇幅有限，今天是設(shè)計(jì)細(xì)節(jié)系列文章的第一期，下一篇會(huì)繼續(xù)更新更多設(shè)計(jì)細(xì)節(jié)，感興趣的同學(xué)保持關(guān)注，保證看完就能用到自己的工作中。如覺得有學(xué)到，一定要給彩云點(diǎn)個(gè)贊，我會(huì)更有動(dòng)力，哈哈~
本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）
原文地址：mediue
作者：Marc Andrew
譯文地址：彩云譯設(shè)計(jì)（公眾號(hào)）
譯者：彩云Sky
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》UI設(shè)計(jì)細(xì)節(jié)連載系列① | 讓設(shè)計(jì)細(xì)節(jié)更高級的12個(gè)實(shí)用小技巧
文章來源：站酷 作者：陳皮Celia
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)