字體的粗細和大小在信息分級中扮演著重要的角色。尤其在作品集排版時，我們往往需要花費大量時間去尋找適用于不同信息層級的字體樣式，從而確保信息傳達地足夠清晰。???今天 UXD 將與大家分享一些技巧，利用?Material Design 和 Figma，在短時間內輕松創(chuàng)建一套字體樣式！抓緊來看??！

??Typography in Material

01-什么是Type Scale？

（先來了解下Material Design的排版系統(tǒng)：

Material Design 的排版系統(tǒng)以?Type?Scale?為核心。Type?Scale?是一組可以在應用程序中重復使用的字體樣式，提供了足夠的風格靈活性以適應一系列的目的，并保持一致和可識別性。

Material Design 的 Type Scale 包括一系列可重復使用的樣式，從標題到說明文字，還包括專門為按鈕等組件設計的樣式。

當改變一個字體樣式時，變化會反映到所有使用該樣式的組件中。例如，更改“按鈕”樣式將影響使用按鈕字體樣式的所有組件，如對話框、擴展的懸浮操作按鈕和選項卡標簽。

其他樣式則更加靈活。例如，Type?Scale?包括多種標題樣式，以適應豐富的信息層次結構，并提供多種選項來呈現(xiàn)標題內容。

Fortnightly 的封面主要采用了 H4 標題樣式。較小的標題樣式適用于這里，因為有許多文章標題需要閱讀，所以空間和注意力非常寶貴。但是在單獨的文章頁面上，如上圖，卻用到了更具表現(xiàn)力的 H3 樣式。它比封面上的樣式更大、更粗、更有主見，因為文章有足夠的空間來表達更生動的內容。

在呈現(xiàn)具有不同目的或含義但大小相似的內容時，擁有多個正文樣式會更方便。在 Fortnightly 中，「正文1」的樣式用于文章文本，而「正文2」則用于補充文章文本的附加信息。

Fortnightly 使用了兩種字體的組合——Libre Franklin和 Merriweather，在標題和正文風格中都有出現(xiàn)。雖然基本字體是以 Roboto 為基礎的，但添加第二種字體可以創(chuàng)造更多的區(qū)別層次。以這種方式搭配字體可以幫助用戶了解他們在整個 APP 中看到的內容類型，并更方便地拆解這些信息。

在上面的例子中，文本 "US – Poverty "被設置為 Libre Franklin，從而區(qū)別于周圍的 Merriweather 文本，這種區(qū)別有助于用戶認識到它是文章內容的次要部分，是導航性質的，而不是說明或標題的一部分。

??Creating your type theme

02-字體風格應該如何拿捏？

（以內容和基調為準：

如何為你的 APP 建立品牌字體風格？與創(chuàng)建顏色主題類似，一個好的起點是思考你的 APP 的性質和語氣。具體來說，你需要考慮 APP 所呈現(xiàn)的內容，以及它是如何促進 APP 的個性和聲音的。在其他的 Material Studies 中，你可以看到基于內容和個性的各種字體風格。

你的 App 是否像電子郵件 App Reply 一樣：基于任務，希望讓用戶盡可能有效地使用他們的收件箱？建議使用適合閱讀的字體的?Type?Scale，利用單一字體系列的多種樣式，以一致的方式呈現(xiàn)內容，避免干擾。

你的 App 是否有要表達的編輯意見，就像新聞 App Fortnightly？那么你可以考慮在應用程序的關鍵時刻和內容中，將高度可讀的字體與更具表現(xiàn)力的字體搭配起來。

如果你的 App 通過顏色和圖像有非常強烈的視覺表達，就像教育應用程序 Owl 一樣，你可以使用一個可讀的字體，并保持一些俏皮感。Owl 在整個?Type?Scale?上使用較重的 Rubik，模仿其 LOGO 中的形狀，同時保持簡單和可預測性。

如果你的 App 的聲音和內容想要傳達優(yōu)雅和現(xiàn)代感，就像購物 App Shrine 一樣，那么你要選擇的 Type Scale 需要側重于較大尺寸的較輕字重，同時確保正文、標題和副標題樣式的可讀性。

在尋找可使用的字體時，可以考慮從 Google Fonts 開始，里面有數(shù)以千計的免費字體可供使用。

●?如何選擇配對字體？

如果你已經找到了適合你的 App 的字體，但想用另一種字體來擴大你的 Type Scale，一種技巧是把它們想象成存在于一個色輪之上。

試著尋找一種與你的第一種字體相鄰或相關的特征（例如相似的末端形狀或字形），或者一種與這些特征形成對比的字體（例如將有襯線字體和無襯線字體配對，或者將一種人性化的、富有表現(xiàn)力的字體與更理性的內容配對）。

??下面我們來看一下如何快速創(chuàng)建一整套適用于不同信息層級的字體樣式：


????????

??Create your type scale

03-創(chuàng)建你的Type Scale

（從Material Design中獲取數(shù)據(jù)：

如果你使用?Google Fonts，你可以點擊進入下方的網址，快速創(chuàng)建一個?Type Scale，只需要在右邊的面板上選擇你想要用的字體（輸入字體的名稱可以自動完成）。這一技巧可以幫助你探索字體在排版中的合理樣式。

??Visualizing your theme

04-視覺化你的主題

（用Figma進行測試：

在有了可能的 Type Scale 之后，你可以在設計環(huán)境中對此進行可視化。首先，復制 Figma Community 中的?Material 2 Design Kit。在 Material Theme 頁面上，你會看到一個名為 Typography 的畫框，它全面展示了你的 Type Scale。

接下來，你可以在右側的 Text Styles 中，參考上一步在 material.io 上的字體比例，在相應樣式中復制每一個數(shù)值。

這樣?Stickersheet 頁面上的每個組件中的字體形式都會同步修改，可以幫助你做一個全面的效果測試。

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

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

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

本文版權歸UXD尤克斯所有

部分圖片來自于網絡

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