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

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

1、 在 APP 當(dāng)中保證底部標(biāo)簽欄內(nèi)容不變

在目前絕大多數(shù) APP 都會(huì)采用底部標(biāo)簽欄作為主要的導(dǎo)航模塊，那么在設(shè)計(jì)的時(shí)候，要確保這個(gè)部分的功能上固定且明確的，不會(huì)消失，不會(huì)變化，不會(huì)給用戶帶來挫敗感。

2、只需用字重字號(hào)變化即可構(gòu)建層次

只需要使用字重和字號(hào)變化即可做到這一點(diǎn)!

在絕大多數(shù)的文本排版當(dāng)中，只需要使用單一的字體即可實(shí)現(xiàn)層次頗為豐富的信息層級(jí)，你需要根據(jù)文本內(nèi)容的重要性和優(yōu)先級(jí)進(jìn)行排列，優(yōu)先級(jí)越高的文本字號(hào)越大，字重也越大。

另外要注意疏密排列，確?？勺x性和相關(guān)性更高的文本塊更靠近。

3、在移動(dòng)端 UI 上使用更大的可點(diǎn)擊區(qū)域

雖然這個(gè)道理顯而易見，但是總是在進(jìn)行具體的界面設(shè)計(jì)的時(shí)候容易忘記這個(gè)重要的點(diǎn)。在 iOS 上，可點(diǎn)擊的最小區(qū)域?yàn)?44×44 pt，在 Android 上則是 48×48 pt。

有時(shí)候，控件看起來可能較小，可以讓觸發(fā)區(qū)域盡量大一點(diǎn)。

4、使用盡量統(tǒng)一的導(dǎo)航設(shè)計(jì)

導(dǎo)航構(gòu)成了用戶探索網(wǎng)站和 APP 最為主要的行為路徑，確保導(dǎo)航的一致性確保用戶在后續(xù)的交互過程中不會(huì)感到疑惑和沮喪。

所以，在迭代升級(jí)過程中，即便是最微小的改變，也盡量在系統(tǒng)層級(jí)上保持統(tǒng)一。對(duì)于重要的、關(guān)鍵性的、破壞性的操作，可以做一些明顯的差異化。

5、對(duì)于內(nèi)容豐富的網(wǎng)站，讓搜索功能凸顯

如果有可能，對(duì)于內(nèi)容較多的網(wǎng)站，盡量讓搜索按鈕被凸顯出來，在觸手可及的位置。盡量不要將搜索按鈕隱藏在下拉菜單之類的地方，因?yàn)樗赡苁怯脩舻诌_(dá)目標(biāo)的主要方式甚至可能上唯一方式。

6、不要隨意選擇字號(hào)

文本在頁面當(dāng)中字號(hào)到底要多大?在很多地方，字號(hào)的選擇上其實(shí)是有完整的解決方案和處理技巧的。比如使用 TypeScale。

通常而言，讓不同信息層級(jí)的文本大小保持 1.25 的倍率即可達(dá)到頗為不錯(cuò)的視覺效果和體驗(yàn)。而 TypeScale 可以基于基本的文本字體尺寸即 18px 按照 1.25 的比率進(jìn)行縮放，從而幫你生成 H1、H2、H3 等不同層級(jí)文本的尺寸大小。

使用 TypeScale 生成的文本能夠?yàn)槟愕呐虐鎺碜匀?、舒適的節(jié)奏和體驗(yàn)。