1.牢記最關(guān)鍵的「接近原則」并用好它

在以上的兩個(gè)設(shè)計(jì)范例當(dāng)中， 一個(gè)元素之間的間距太遠(yuǎn)，另一個(gè)元素之間間距則相對(duì)合理。

「接近原則」可能是眾多設(shè)計(jì)原則當(dāng)中最容易忽略的一個(gè)，但是它可以幫助你為用戶制作出視覺(jué)排版邏輯更加清晰、更強(qiáng)大的 UI 界面。

根據(jù)人類的認(rèn)知習(xí)慣，將相關(guān)的設(shè)計(jì)元素放在一起，我們會(huì)更容易認(rèn)為它們之間有關(guān)聯(lián)性。這種距離昭示了元素與元素之間的關(guān)系，所以在「接近原則」的加持之下，用戶在使用網(wǎng)站和 APP 時(shí)，可以更加輕松地理解和認(rèn)知。

時(shí)常使用，經(jīng)常使用，習(xí)慣使用「接近原則」來(lái)審視設(shè)計(jì)，是確確實(shí)實(shí)能讓設(shè)計(jì)更好。

2、始終在視覺(jué)上將 UI 元素的功能區(qū)分開(kāi)

在以上的兩個(gè)設(shè)計(jì)示例當(dāng)中， 一個(gè)按鈕和標(biāo)識(shí)看起來(lái)過(guò)于相似，另一個(gè)則更容易區(qū)分彼此的功能性。

UI 中的基本元素，視覺(jué)特征和實(shí)際功能應(yīng)該是對(duì)應(yīng)的，不能在視覺(jué)上混淆才行，這是保持整體用戶體驗(yàn)的一致可用的重要前提。

以按鈕（Buttons） 和通知（Notifications）為例，在大多數(shù)情況下，按鈕在視覺(jué)功能上都要更加優(yōu)先，因此，在外觀的視覺(jué)吸引力上應(yīng)該是最突出對(duì)勁兒，同時(shí)，應(yīng)該在外觀輪廓上和約定俗成的造型保持一致，讓它可以和其他組件（例如通知）區(qū)分開(kāi)來(lái)，方便用戶識(shí)別。

上圖是一組規(guī)整和且具有良好泛用性的無(wú)襯線字體，內(nèi)容為「力量強(qiáng)大」。

在APP 和網(wǎng)站當(dāng)中，可以選用的英文字體要比中文字體多太多。而在泛用性上，非襯線字體又比襯線字體更強(qiáng)一點(diǎn)，它們既可以作為標(biāo)題又可以用于正文，甚至可以用于輔助性的功能性的元素當(dāng)中。

相對(duì)而言，襯線字體細(xì)節(jié)更多，但是泛用性相對(duì)而言沒(méi)有無(wú)襯線字體那么強(qiáng)，但是在合適的場(chǎng)合選用漂亮的襯線字體能夠讓文本的可讀性適度提升，并且在閱讀的體驗(yàn)感上再提升一下，尤其是在展示性大標(biāo)題和長(zhǎng)篇幅的正文當(dāng)中。

現(xiàn)在你可以在 Fonts.adobe.com 上找到上圖中所推薦的諸多英文字體。

而相對(duì)更加復(fù)雜的中文字體，在可用的字體類型上則相對(duì)較少，一方面是字體本身的研發(fā)成本更高，更實(shí)際的問(wèn)題則是中文字庫(kù)的文件尺寸更大，不過(guò)隨著網(wǎng)絡(luò)帶寬的增長(zhǎng)，這個(gè)問(wèn)題會(huì)在某種程度上有所緩解。

邏輯上和英文字體類似，無(wú)襯線字體會(huì)比襯線字體的泛用性更強(qiáng)。如果僅僅只是用于標(biāo)題或者視覺(jué)設(shè)計(jì)，這些免費(fèi)的字體值得嘗試：

4. 想快速找到對(duì)的的字體組合？使用超大字體家族

以上是兩個(gè)設(shè)計(jì)范例，其中一個(gè)字體組合看起來(lái)不搭，另一個(gè)字體組合則顯得好很多。

通常所說(shuō)的「超大字體家族」（SuperFamily）其實(shí)指的是一組被打包到一起可以互相搭配的襯線和非襯線體，它們風(fēng)格和細(xì)節(jié)不一樣，但是互相搭配效果是頗為不錯(cuò)的。如果希望在 UI 當(dāng)中使用足夠協(xié)調(diào)漂亮的字體組合，但是又暫時(shí)沒(méi)有想法，不妨選一款「超大字體家族」入手，直接使用其中的字體來(lái)做搭配。

或者你也可以參考這篇文章來(lái)來(lái)自行搭配：

5、陰影最好還是微妙一點(diǎn)

在上面的設(shè)計(jì)示例當(dāng)中， 一個(gè)使用了非常重的陰影，另一個(gè)則更加微妙。

在二維的 UI 界面當(dāng)中，陰影是讓元素「凸顯」出來(lái)的重要手段，作為一種強(qiáng)調(diào)的視覺(jué)元素，陰影很容易顯得過(guò)于「明顯」。實(shí)際上，現(xiàn)實(shí)當(dāng)中的陰影大都是不那么引人矚目的，因此需要避免設(shè)計(jì)陰影的時(shí)候用力過(guò)猛。完成陰影的設(shè)計(jì)之后，最好回看一下，往回拉一下，控制好程度。

6、深色模式下降低文本對(duì)比

其實(shí)這個(gè)點(diǎn)于我個(gè)人而言意義更大，因?yàn)槲业难劬Υ嬖凇干⒐狻沟膯?wèn)題，這使得強(qiáng)對(duì)比度下文本所帶來(lái)的「暈影」更加明顯，這種「暈影」的視覺(jué)效果其實(shí)是普遍存在的，只是不同用戶眼中強(qiáng)弱不同，嚴(yán)重的甚至?xí)霈F(xiàn)閃爍的效果。

所以，這個(gè)時(shí)候如果使用白色文本和黑色背景，盡量降低兩者的對(duì)比度，避免使用純白的文本和純黑的背景。

盡量不要讓圖標(biāo)獨(dú)立存在于 UI 界面當(dāng)中，因?yàn)閱渭円曈X(jué)化的圖標(biāo)是存在誤讀的問(wèn)題，帶有標(biāo)簽文本的圖標(biāo)通常會(huì)好很多，它能幫助用戶更輕松準(zhǔn)確地理解信息，理解這些按鈕都代表著什么，無(wú)需猜測(cè)。

文章來(lái)源：優(yōu)設(shè)網(wǎng)：陳子木

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)