字體排版所涉及的不只是選擇出色的字體。使用有效的字體可以增強界面的可用性，可讀性，可訪問性和層次結(jié)構(gòu)。本文將會分享一些UI排版方面的技巧和行業(yè)標準。

01?印刷術(shù)語

了解印刷術(shù)語為我們的排版奠定了基礎。將諸如字距調(diào)整，色彩引導和字重之類的印刷術(shù)語視為杠桿，我們可以利用它們來創(chuàng)建更具可讀性和美觀性的界面設計。

?Tracking

Tracking或字母間距是指均勻增加或減少一系列字符之間的水平間距。

?Baseline

Baseline是一行文本所在的不可見行。

?Leading

Leading是兩種Baseline之間的垂直間距，通常被稱為行高。

?Weight

Weight是指字體筆劃的相對粗細。

?Serif/Sans?Serif

Serif是通常附著在特定字體、一系列字母或符號末尾的細線或筆畫，一般稱為襯線字體，而不包含襯線的字體是無襯線字體。

02?層次結(jié)構(gòu)

一般的界面都會有文字。大多數(shù)UI設計由一些標準元素組成：文本，矩形框，按鈕和圖標。我們使用這些元素可以創(chuàng)建或改造界面。

層次結(jié)構(gòu)可以讓用戶更容易快速地找到重要信息，從而提高界面的可掃描性和可讀性。例如：對于最重要的文本，我們可以使用更大膽的字體與排版方式來引起人們的關注；對于不太重要的信息，降低文本排序?qū)蛹墸褂幂^小、較淺的字號與色號是更好的選擇。

03?最佳行距

行距概念可以追溯到手動排版印刷時期。其專業(yè)名詞“l(fā)eading”本義是指分隔文本行的細鉛條。現(xiàn)在，行距對于確保我們的文本在不同設備上易于閱讀至關重要。以下是一些關于行距設定的啟發(fā)方法：

?在字體上測試不同的比例來尋找最佳的點。比如在130％-180％之間進行測試，來獲得區(qū)間內(nèi)最佳的可讀性和可訪問性。需要注意：若間距過大，會容易丟失閱讀連貫性；而間距太小則會很難閱讀。

?更改字體或大小時，需要檢查行距。不同的字體具有不同的最大高度，因此需要仔細檢查行間距以提高文本的可讀性。

?文本行長度。文本行長度不可過長，長行文本可能會使界面看起來很混亂。

?較小字體的排版。較小的字體應具有更大的間距，因為較小的字體更難閱讀，因此需要預留出額外的空間使其更易于解析。

04?優(yōu)先考慮可讀性

為確保我們的字體易于理解，并且適合視力障礙與聽力障礙等殘障人士使用，我們應該遵循Web Content Accessibility Guidelines（WCAG）的標準。

這里有一些標準可以優(yōu)化我們的UI的可讀性：

? 字號使用經(jīng)驗法則。字號大小至少應為16。顯然，這是針對于特定設備的標準，但它的使用頻率極高。而在電視界面上則文本應該更大。

??注意文本與背景間的顏色對比度。所有文本和背景之間的顏色對比度必須至少為4.5：1。

? 不要僅依靠顏色來傳達信息。例如，錯誤狀態(tài)不僅應顯示為紅色，還應使用警告圖標和描述性文字來告知發(fā)生的問題。

? 調(diào)整文字大小來進行查看。將文字調(diào)整為200％的大小，來確保不會影響閱讀的內(nèi)容與使用功能。

? 避免使用文字圖片。如非必要（例如徽標），盡量不要使用文字圖片。

05?限制字體數(shù)量

混合使用太多不同的字體可能會使我們的界面顯得支離破碎和草率。

不要在界面中引入新字體，而應使用字體系列。?同一家族的字體在共同使用時，可以使界面靈活又一致。

06?定義字體比例準則

要為UI項目創(chuàng)建排版時的比例準則，請按以下步驟操作：

??選擇要使用的字體。獲得高質(zhì)量UI字體的地方有Google字體或Adobe字體。

??確定基本字體大小。首先，為文本主體建立最常用的字體比例，例如16pt，然后確定合適的行高。

??行高。如前所述，為了獲得最佳可讀性，請在130％-180％之間進行測試。這個比率并不總是準確的，但是它是一個開始的參考，并可以根據(jù)需要進行調(diào)整。

??定義比例。比例可以為我們的排版提供一致性，節(jié)奏性和層次性。要為H1，H2，H3，正文，標題，按鈕等設置排版比例，我們需要用一個比例值乘以基本字體大小。常見的類型的縮放比例為1.250x，1.414x，1.5x，1.618x。

??在設備上測試。在多種設備上用不同的比例來測試字體，以決定正確的值。

07?使用可識別的單詞和短語

這些排版的規(guī)則和方法可以極大地提高界面的可讀性和美觀性。但是，如何讓界面中的遣詞造句更加通俗易懂呢？為了整合文本內(nèi)容，增強閱讀性與可理解性，我們需要遵循以下規(guī)則：

? 避免行話。在設計應用程序時需要考慮目標受眾，避免使用行業(yè)特定的術(shù)語，例如“緩沖”或“配置”等等。

? 使用現(xiàn)在時語法。例如：將“message has been sent”改為“message sent”。

? 保持精簡。審核、刪除界面中的不精簡的語術(shù)，使界面簡潔明了。例如：將“只有高級會員才能訪問此功能”改為“加入高級訪問權(quán)限”。

? 語句描述從目標開始。從目標開始，描述指令的目標以及實現(xiàn)目標所需要采取的行動。例如：將“將照片拖到垃圾箱中以將其從此相冊中刪除”改為“要將照片從此相冊中刪除，請將其拖至垃圾箱中”。

?保持稱謂一致。與用戶打交道時，請務必保持第一人稱或第二人稱。例如：將 “在我的帳戶編輯你的位置”改為“在你的帳戶編輯你的位置”。

08?強調(diào)重要信息

當一些文本比頁面上的其他文本更重要時，我們必須強調(diào)其重要性，從重量，大小，顏色或其他元素上將其突出區(qū)別出來。

我們可以通過顏色和視覺上的重量來展現(xiàn)版式的主次。通過使用較淺、較小的字體來承載次要的文本，從而將人們的注意力集中到更大膽，更生動的文本上。這樣能夠提高界面的可掃描性，并允許用戶可以不用思考的快速進行所需操作。

09?考慮語言支持

在UI排版中，不同的語言體系對于界面的文本的布局影響深遠。在應用界面的初始設計中，就要對不同的語言支持進行考慮。

??注意詞匯的長度。它可能會因語言而異，即使是類似字形的語言（如英語和德語）也可能有所不同。例如：英文中“ New”在法語中表達為“ Nouveau”，其字義相同，但字符空間就截然不同。

? 在某些語言中，對齊方式就顯得更為重要。例如阿拉伯語和希伯來語，因為它們以從右到左出現(xiàn)的字符顯示。在相同的字體大小下，這些字體可能看起來比拉丁字體小，因此需要調(diào)整行距和對齊方式，以使其在所有語言的UI中都能正常工作。

10?使用系統(tǒng)字體

排版通常很難做到完全準確，在對其產(chǎn)生疑問時，可以使用系統(tǒng)字體。iOS和Android具有支持各種權(quán)重，大小，樣式和語言的本機系統(tǒng)字體，因此我們可以在任何應用程序中使用它們來提升閱讀體驗。

在iOS上，他們有舊金山（SF）和紐約（NY）兩種通用字體。而在Android上，它們的主要字體是Roboto，Noto是Roboto未涵蓋的所有語言的默認字體。

當我們將文本樣式與系統(tǒng)字體一起使用時，我們還將獲得對“動態(tài)排版”和更多輔助功能的支持，這使讀者可以選擇自己喜歡的文本大小，從而提供了更大的靈活性。

更多知識干貨以及其他海外留學的資訊可以關注UXD交互工業(yè)產(chǎn)品設計分享或者添加小助手，還可獲取講座直播哦~

|福利大放送 | WELFARE?
對于設計初學者，完成從0開始創(chuàng)作幾乎是不可能的，就像學習過程中書讀百遍其義自見一樣。有了大量的積累，才能在腦海里建立素材庫，這些素材庫能幫助同學們完成最初的設計想法積累，基于這樣的基礎再進行個性化的創(chuàng)作，最終才能做出高質(zhì)量的作品集。全球院校最新作品集免費拿！添加小助手即可獲?。?/p>

UXD交互工業(yè)產(chǎn)品設計學院是尤克斯國際旗下的一家專注于交互、服務、工業(yè)、產(chǎn)品設計專業(yè)的頂級設計學院。除了一對一設計課、基礎技能課程、小組課題、設計評圖、聯(lián)合教學外，我們提供不定主題的公開課和內(nèi)部小組課，教學計劃課程由三大部分組成，包括基礎軟件技能教學、設計理論系統(tǒng)講座、申請必備知識解析等。

本文版權(quán)歸UXD尤克斯所有

部分圖片來自于網(wǎng)絡

如有侵權(quán)請與我們聯(lián)系