第三波!提升UI 界面排版的7 個實用小技巧

第三波!提升UI 界面排版的7 個實用小技巧

編者按:這篇來自Mark Andrew 的文章梳理了7 個實用性很強的UI 效果提升小技巧,這篇文章最早發佈於marcandrew.me,快來看看吧。創建漂亮且足夠實用的UI 需要花費很多時間,並且在這個過程中,需要進行多次修改,這都是正常的。但是我注意到一件事情,就...

編者按:這篇來自Mark Andrew的文章梳理了7個實用性很強的效果提升小技巧,這篇文章最早發佈於marcandrew.me ,快來看看吧。

創建漂亮且足夠實用的UI 需要花費很多時間,並且在這個過程中,需要進行多次修改,這都是正常的。但是我注意到一件事情,就是有很多常見的問題,只需要進行適當的修改,就可以達到相當不錯的效果。

在之前的系列文章當中,我已經梳理出一些技巧:

接下來,我們詳細看看這次增加的7 個實用技巧~

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

第三波!提升 UI 界面排版的 7 个实用小技巧

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

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

我個人強力推薦的是Merriweather 和Merriweather Sans、Roboto 以及Roboto Slab 這樣的搭配。

「超大字體家族」最大的優勢在於,它是已經被驗證過的優質組合,用的時候不用擔心~

2、減小標題文本字間距,視覺平衡更好

第三波!提升 UI 界面排版的 7 个实用小技巧

在標題文本中使用較大的字間距,是設計中最常見的禁忌之一!

在放大文本的時候,常規比例下的字間距會顯得更加明顯,視覺上會顯得有點「稀疏」,減小字間距能夠讓標題文本更加緊湊,在視覺上更加平衡,通常會讓人更加愉悅。

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

第三波!提升 UI 界面排版的 7 个实用小技巧

當你想讓整體排版的節奏感足夠好的時候,有必要針對性地重新調整行間距和段間距。

你需要根據靠近原則,讓相互關聯的標題和正文之間的段間距更加靠近一點,讓不相關的內容塊互相之間分開,間距拉遠,從而自然而然地進行區分。

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

4、如果標題很短,可以試著使用全部大寫

第三波!提升 UI 界面排版的 7 个实用小技巧

在英文為主的頁面當中,全大寫的文本辨識度其實相對更低的一些,較長的標題文本使用大寫字母更是難於辨認。不過對於僅有一兩個單詞的短標題而言,就容易識別多了。

另一方面,短標題使用小寫字母會顯得不夠飽滿,這個時候使用大寫字母能夠讓它在視覺上更加突出。

相應的,在使用全大寫的短標題當中,適當地拉開字間距,能夠增加呼吸感,降低壓迫感。

5、如果能讓你的標題更加簡短明了……那麼就這麼做吧!

第三波!提升 UI 界面排版的 7 个实用小技巧

如果可以的話,標題盡量簡短有力一些。

比如「It's your style, and your way」這樣的標題可以直接濃縮為「Your style. Your way.」。

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

當然,這樣的設計技巧是需要根據行業和領域進行優化的,這個方法並不適用於全部領域。

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

第三波!提升 UI 界面排版的 7 个实用小技巧

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

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

在很多不同的設計項目當中,不同的場合可能會用到不同的字重,如果它只有一種字重,那麼你要么只能選擇別的字體,要么就需要額外購買,很麻煩。

即使這款字體包含兩三種不同的樣式或者字重,也足以應對很多不同的需求,創造出有韻律感的設計了。

7、選擇貼合設計風格和氣質的字體

第三波!提升 UI 界面排版的 7 个实用小技巧

不同的字體有不同的風格。有的字體粗壯有力,有的柔和自然,有的現代而規整,有的友好而舒適,有的則有趣且俏皮,等等等等。

每種字體都有不同的氣質,你需要把握字體的氣質特徵,有意識地總結這些屬性,當你在應對不同的設計項目的時候,能夠快速找到氣質貼合的字體。

這似乎是一項艱鉅的任務,但是從長遠來看,能夠幫你更快地搞定各種設計問題。

結語

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

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。