【UI】用戶交互界面中的文字使用 Typographic Elements in UI

處理好UI中文字的重要性就不用多說了，直接開始分享一些實用的經驗吧。在這篇里總結的經驗都是基於英文界面的，中文界面可以用來參考。

層次 Visual Hierarchy

用文字的不同屬性， 例如字體，字型大小，顏色，透明度，加粗／變細，斜體／下劃線...來創造視覺上的層次感非常重要。有了層次感才能體現信息不同的重要程度並且引導用戶去更加容易快捷地獲取信息。

字型大小Size

對於網頁上的文字來說，Smashing Magazine 整理了50個流行的大眾網站，總結出來一般標題大小在18～29pt，內容文本的大小一般在12～14pt之間。

對於移動客戶端中的文字來說，內容文字最小一般9～11pt。 最適合閱讀的內容文字大小一般在17pt～19pt之間；內容標題20pt～30pt。在IOS 11中，頁面標題是34pt，Bold。

對齊方式Alignment

• 居中Centered：居中看起來非常的正式和經典的感覺。可以通過使用居中來用文字塊創造有趣的形狀或者人為地分行斷句來創造特別的意境。但是，如果使用不當或者不符合整體氛圍的話，就會看起來很做作或者很沉悶。長段文字最好不要使用，會難以閱讀。
• Justified：justified文字可以在屏幕上創造一個很整齊的文字塊。使用時要注意防止因為強制讓一些文字佔滿一行而導致在字中間出現很醜的空隙們。Justified非常不常見。尤其是閱讀長段文字的時候，justified其實讀起來並不是很順暢，有時候會讓人覺得疲勞或者找不到自己讀到哪一行了。
• 左對齊 Left：最常見，最好用。如果不知道想不出來怎麼對齊好就先左對齊試試吧。左對齊會讓文字塊看起來和自然。需要注意的一點是如果使用左對齊，不要有單獨一個詞留在最後獨佔一行的情況。
• 右對齊 Right：右對齊並不常見，可以用於一些說明文字，side bar，或者其他的一些用於標註說明的文字。或者只有非常短的一小句想要創造一些不平衡來更有趣的時候可以嘗試使用。

字距和邊距 Spacing & Margin

適當的字距和邊距是讓文字變得可讀體現層次的重要元素。這裡總結了一些實用的例子：

• border和content之間至少8pt距離；
• 在同一個section里的不同內容之間保留5pt的距離；
• 不同的section之間至少保持10pt距離；
• ling height一般在120%～145%的字體大小之間；
• 每行一般保持在45～90的字數比較合適；

字體選擇Feel & Style

不同的字體有他們自己的性格和特點。找到符合氛圍和風格的字體、字體對非常重要。找到合適的字體需要充分地了解用戶、了解產品。人們對很多字體都有一些固有的印象，如果他們對字體的印象跟UI的功能不相稱的話，會讓用戶覺得困惑不舒服。

這裡有一些常用好用的字體：San Francisco, Helvetica, Helvetica Neue, Open Sans, Roboto, Proxima Nova, Source Sans Pro. 他們可以很簡單地Google Fonts, Typekit 或者其他網站找到下載。這些都是sans serif字體。如果不知道用什麼，這些都是很好用的選擇。

當然了，一些時尚、家居……品牌會喜歡用一些serif字體；一些遊戲會用神奇的各種其他字體，具體怎麼選擇還是要看產品的目的和功能本身。

極簡 Minimalism

每一個出現在UI上的文字都必須有意義。在設計時，不斷地問自己：

• 這句還可以用更簡單清晰的方式表達嗎？
• 這些字必要嗎？
• 有更好的詞替換嗎？
• 可以用icon來代替這些字嗎？有沒有合適的圖片替代？

如果今天看不出來，明天翻出來再看看是不是可以有的地方可以繼續簡化。不斷地濃縮簡化直到每一個字母都有自己存在的意義必不可少。

文字的更多趣味 Experimental

規則和經驗也都是用來打破的，所以除了上面的一些方便的使用經驗之外，如果出乎意料地重新打碎組合文字其實有時候也會有意想不到的效果。玩轉文字本身的很多不用property，本身其實就可以很有趣甚至用來替代圖片來講故事。在網頁設計中，玩味文字本身來創造有趣的效果非常常見，比如去Awwwards裡面隨便翻翻，會給你很多啟發。

困了，感覺寫字真累，就不再贅述了，平時使用各種UI時候多留意一下他們都是怎麼處理文字的，會發現很多需要學習或者要注意避免的地方～

附錄：

pt和px的換算

封面圖：Photo by 2Photo Pots on Unsplash https://designcode.io/ https://thenextweb.com/dd/2015/04/30/the-5-pillars-of-visual-hierarchy-in-web-design/ https://99designs.com/blog/tips/6-principles-of-visual-hierarchy/ https://www.webdesignerdepot.com/2013/05/dos-and-donts-of-typography/

推薦閱讀：