創(chuàng)建漂亮且足夠?qū)嵱玫?UI 需要花費(fèi)很多時(shí)間,并且在這個(gè)過程中,需要進(jìn)行多次修改,這都是正常的。但是我注意到一件事情,就是有很多常見的問題,只需要進(jìn)行適當(dāng)?shù)男薷?,就可以達(dá)到相當(dāng)不錯(cuò)的效果。

接下來,我們詳細(xì)看看這次增加的 7 個(gè)實(shí)用技巧~

1、為了更好的字體組合,選擇「超大字體家族」吧!

第三波!提升 UI 界面排版的 7 個(gè)實(shí)用小技巧

在成千上萬的字體當(dāng)中尋找合適的組合是一件非常艱難的事情。如果你也為之苦惱,那么試試「超大字體家族」吧!

通常所說的「超大字體家族」(SuperFamily)其實(shí)指的是一組被打包到一起可以互相搭配的襯線和非襯線體,它們風(fēng)格和細(xì)節(jié)不一樣,但是互相搭配效果是頗為不錯(cuò)的。

我個(gè)人強(qiáng)力推薦的是 Merriweather 和 Merriweather Sans、Roboto 以及 Roboto Slab 這樣的搭配。

「超大字體家族」最大的優(yōu)勢在于,它是已經(jīng)被驗(yàn)證過的優(yōu)質(zhì)組合,用的時(shí)候不用擔(dān)心~

2、減小標(biāo)題文本字間距,視覺平衡更好

第三波!提升 UI 界面排版的 7 個(gè)實(shí)用小技巧

在標(biāo)題文本中使用較大的字間距,是排版設(shè)計(jì)中最常見的禁忌之一!

在放大文本的時(shí)候,常規(guī)比例下的字間距會(huì)顯得更加明顯,視覺上會(huì)顯得有點(diǎn)「稀疏」,減小字間距能夠讓標(biāo)題文本更加緊湊,在視覺上更加平衡,通常會(huì)讓人更加愉悅。

3、注意縱向行間距和段落間距的節(jié)奏感

第三波!提升 UI 界面排版的 7 個(gè)實(shí)用小技巧

當(dāng)你想讓整體排版的節(jié)奏感足夠好的時(shí)候,有必要針對性地重新調(diào)整行間距和段間距。

你需要根據(jù)靠近原則,讓相互關(guān)聯(lián)的標(biāo)題和正文之間的段間距更加靠近一點(diǎn),讓不相關(guān)的內(nèi)容塊互相之間分開,間距拉遠(yuǎn),從而自然而然地進(jìn)行區(qū)分。

通常而言,你可以讓標(biāo)題上方的留白更大一些,標(biāo)題下方的留白更小一些,這樣就可以了。

4、如果標(biāo)題很短,可以試著使用全部大寫

第三波!提升 UI 界面排版的 7 個(gè)實(shí)用小技巧

在英文為主的頁面當(dāng)中,全大寫的文本辨識(shí)度其實(shí)相對更低的一些,較長的標(biāo)題文本使用大寫字母更是難于辨認(rèn)。不過對于僅有一兩個(gè)單詞的短標(biāo)題而言,就容易識(shí)別多了。

另一方面,短標(biāo)題使用小寫字母會(huì)顯得不夠飽滿,這個(gè)時(shí)候使用大寫字母能夠讓它在視覺上更加突出。

相應(yīng)的,在使用全大寫的短標(biāo)題當(dāng)中,適當(dāng)?shù)乩_字間距,能夠增加呼吸感,降低壓迫感。

5、如果能讓你的標(biāo)題更加簡短明了……那么就這么做吧!

第三波!提升 UI 界面排版的 7 個(gè)實(shí)用小技巧

如果可以的話,標(biāo)題盡量簡短有力一些。

比如「It’s your style, and your way」這樣的標(biāo)題可以直接濃縮為「Your style. Your way.」。

這樣的標(biāo)題更容易閱讀,也更加有力,更容易被消化和感知到。

當(dāng)然,這樣的文案設(shè)計(jì)技巧是需要根據(jù)行業(yè)和領(lǐng)域進(jìn)行優(yōu)化的,這個(gè)方法并不適用于全部領(lǐng)域。

6、選字體的時(shí)候,盡量選擇有很多不同字重的

第三波!提升 UI 界面排版的 7 個(gè)實(shí)用小技巧

你所下載或者購買的字體,是否有很多不同的粗細(xì)/字重/樣式供你選擇?

如果你有的選,盡量購買或者選擇那種有很多不同字重的字體族。如果這款字體只有一種字重,建議你盡量避開它。

在很多不同的設(shè)計(jì)項(xiàng)目當(dāng)中,不同的場合可能會(huì)用到不同的字重,如果它只有一種字重,那么你要么只能選擇別的字體,要么就需要額外購買,很麻煩。

即使這款字體包含兩三種不同的樣式或者字重,也足以應(yīng)對很多不同的需求,創(chuàng)造出有韻律感的設(shè)計(jì)了。

7、選擇貼合設(shè)計(jì)風(fēng)格和氣質(zhì)的字體

第三波!提升 UI 界面排版的 7 個(gè)實(shí)用小技巧

不同的字體有不同的風(fēng)格。有的字體粗壯有力,有的柔和自然,有的現(xiàn)代而規(guī)整,有的友好而舒適,有的則有趣且俏皮,等等等等。

每種字體都有不同的氣質(zhì),你需要把握字體的氣質(zhì)特征,有意識(shí)地總結(jié)這些屬性,當(dāng)你在應(yīng)對不同的設(shè)計(jì)項(xiàng)目的時(shí)候,能夠快速找到氣質(zhì)貼合的字體。

這似乎是一項(xiàng)艱巨的任務(wù),但是從長遠(yuǎn)來看,能夠幫你更快地搞定各種設(shè)計(jì)問題。

結(jié)語

很多技巧都不復(fù)雜,甚至稱得上是微不足道。但是如果用好這些小技巧,能夠讓你的設(shè)計(jì)事半功倍。