編者按：在進(jìn)行 UI 設(shè)計(jì)的時(shí)候，很多小技巧能夠恰到好處地提升界面的設(shè)計(jì)視覺(jué)效果、用戶體驗(yàn)。這篇來(lái)自Mark Andrew 的文章梳理了 6 個(gè)實(shí)用性很強(qiáng)的 UI 效果提升小技巧，是系列文章的七篇，原文最早發(fā)布于 marcandrew.me 。

在創(chuàng)建實(shí)用、可訪問(wèn)性良好且視覺(jué)效果頗為出彩的 UI 界面的時(shí)候，我們大多只需要進(jìn)行有限度的微調(diào)，即可達(dá)到頗為不錯(cuò)的效果。在之前，我已經(jīng)撰寫(xiě)了很多實(shí)用的 UI & UX 優(yōu)化小貼士（看完文章在文末獲取），這篇文章繼續(xù)增加 6 條實(shí)用的建議，一起來(lái)看看吧！

1、以結(jié)果和目標(biāo)為導(dǎo)向來(lái)撰寫(xiě)文案

撰寫(xiě)文案的時(shí)候，始終以導(dǎo)向結(jié)果和目標(biāo)的方式來(lái)撰寫(xiě)，在結(jié)構(gòu)上，盡量以指向目標(biāo)的關(guān)鍵詞置于文案靠前的部位，這種方式能夠幫助用戶盡量清晰快速地理解要做什么，減少發(fā)生錯(cuò)誤的可能性。

2、確保投影的光源方向是一致的

雖然投影在 UI 界面當(dāng)中是相對(duì)不那么顯著的元素，但是當(dāng)投影效果不統(tǒng)一的時(shí)候，也容易讓人感到迷惑。在投影的設(shè)計(jì)上，經(jīng)常出現(xiàn)的錯(cuò)誤之一就是不同元素的投影角度、方向、距離不一樣，盡量讓投影的方向角度是一致的，確保整體體驗(yàn)和視覺(jué)邏輯的統(tǒng)一。

3、多用清晰的留白來(lái)實(shí)現(xiàn)視覺(jué)層次結(jié)構(gòu)

清晰的留白是呈現(xiàn)視覺(jué)和排版層級(jí)的關(guān)鍵，將文本按照信息層級(jí)的重要程度進(jìn)行排布之后，根據(jù)相關(guān)度進(jìn)行分組，這個(gè)時(shí)候，留白就顯得非常重要了。組內(nèi)的文本保持接近，而不同的組之間的的留白要足夠多，確保呼吸感，但是不能距離太遠(yuǎn)，否則不容易快速掃視閱讀。

4、為段落選擇合理的寬度

在處理閱讀的可讀性的時(shí)候，有很多講究，不僅行高和間距要平衡，也要控制段落的寬度來(lái)貼合用戶的閱讀習(xí)慣和節(jié)奏。

通常在西文為主的排版中，認(rèn)為每行 45 到 75 個(gè)字符是一個(gè)特別適合閱讀的寬度，這種限制讓每行不會(huì)太長(zhǎng)，足以呈現(xiàn)，但是也不會(huì)在掃讀過(guò)程中迷失。

5、在空狀態(tài)頁(yè)面中給用戶提示操作

空狀態(tài)是很多 UI 界面和流程的基礎(chǔ)組成部分，甚至很多時(shí)候就是初始狀態(tài)。空狀態(tài)是告訴用戶新功能、幫助用戶發(fā)現(xiàn)新功能的一個(gè)重要的渠道。不要讓用戶在空狀態(tài)下真的「空轉(zhuǎn)」，而是引導(dǎo)用戶去做有意義的事情。

6、根據(jù)文本的x高度來(lái)設(shè)置行高

在西文當(dāng)中，小寫(xiě)字母x的高度被稱為「x高度」，x高度決定了通常文本的視覺(jué)高度，基于文本的x高度來(lái)計(jì)算行高和行間距是最合理的基礎(chǔ)。x高度越大的字體，行高需要適當(dāng)調(diào)整得越高。在中文當(dāng)中通常不存在這樣的情況，不過(guò)中文當(dāng)中，行的寬度會(huì)影響到行高，通常每行字?jǐn)?shù)越多，行高需要相應(yīng)的更高一些，確?？勺x性。

作者：陳子木