:界面視覺設計要素 - 字體篇-PPT資訊免费ppt模版下载-道格办公

界面視覺設計要素 - 字體篇

在界面視覺設計中的重要要素和注意事項。 1. 字體分類:在界面設計中,常用的字體分類有無襯線字體(如Arial、Helvetica)和襯線字體(如Times New Roman、Georgia)。無襯線字體通常用於標題和大塊文字,因其簡潔、現代的外觀而廣泛使用。襯線字體則更適合長段落的正文,因其清晰的可讀性而被廣泛採用。 2. 字體風格:字體的風格可以影響整個界面的視覺氛圍。例如,粗體字給人以鮮明、強烈的感覺,適合強調重要信息;斜體字則常用於強調特定詞語或引用。此外,還可以選擇不同的字重(如輕、中、黑等)

字體是界面設計中重要的構成要素之一,它能輔助信息的傳遞,是文字的外在表現形式;字體還可以通過其獨有的藝術魅力,表達情感體驗,並塑造品牌形象。

本文總結了字體設計的重要性、界面常用字體推薦以及國內外權威設計體系中對字號、行高、字重的選擇和設置。如果你想對界面字體設計有更深一步地了解和運用,本文將會提供一些幫助。
---

一、字體

1. 字體設計的重要性

輔助信息傳遞

文字是信息內容的載體,是記錄思想、交流思想、承載語言的圖像或符號,而字體則是文字的外在形式特徵,是文字的視覺風格表現。合適的字體可以輔助文字,將信息清晰、準確地傳遞給用戶。

表達情感體驗

字體的藝術性體現在其完美的外在形式與豐富的內涵之中。在文字信息傳遞給用戶之前,人們首先感受到的是字體帶來的視覺魅力以及情感表達。

塑造品牌形象

不同字體有著不同的風格特徵: 有的字體優美清新、線條流暢;有的字體造型規整、充滿張力;還有的字體生動活潑、色彩明快... 根據產品的屬性選擇正確的字體,便能有效地塑造品牌形象。

2. 界面常用字體推薦

字體的選擇是由產品屬性或品牌特性的關鍵詞而決定。一般中文字體種類分為: 黑體、宋體、仿宋、楷體等;英文字體種類分為: 無襯線體、襯線體、意大利斜體、手寫體、黑字體等。

中文字體推薦


線上中文字體推薦使用 思源黑體、華文黑體、冬青黑體、微軟雅黑、蘋方-簡、黑體-簡、方正蘭亭黑。其中 iOS 系統默認中文字體是「蘋方 (PingFang)」,Android 系統中文字體使用「思源黑體 (Noto Sans CJK)」。

介紹下「思源黑體」這款字體,它是由Google 和Adobe 合作開發出來的,風格介於現代和傳統之間,可以廣泛用於多種途徑,比如手機、平板、桌面的用戶界面、網頁瀏覽或者電子書閱讀等。它為人們帶來了愉悅和高效的信息閱讀體驗,並且是免費的。


英文字體推薦


線上英文字體推薦使用 San Francisco、Helvetica Neue、Roboto、Avenir Next、Open Sans。其中 iOS 系統默認英文字體為「San Francisco」,Android 系統默認英文字體為「Roboto」。

Helvetica 是一種被廣泛使用的西文字體,1957 年由瑞士字體設計師設計,微軟常用的 Arial 字體也來自於它。

作為一款經典的無襯線字體,Helvetica 在平面設計和商業上非常普及和成功,被認為是現代主義設計理念的典範,其簡潔樸素的線條風格非常受追捧。


數字字體推薦

線上數字字體推薦使用DIN 、Core Sans D、Helvetica NeueDIN 起源於1995 年的德國,無襯線字體,易用耐看、字形開放,是設計師最愛的幾類字體之一,適合顯示比較長的大號數字,但是小字號的情況下識別度較低。 Core Sans D 是由韓國設計師設計的一款無襯線字體,支持Thin、Light、Regular、Medium、Bold 等類型字重,對大號數字的顯示效果不錯,不過它是收費字體。

Helvetica Neue 除了上文介紹的簡潔樸素、中性嚴謹、沒有多餘的修飾外,還是Helvetica 的升級版,擁有了更多的字重,可以作為iOS 和Android 跨平台數字字體使用。


二、字號

1. 關於字號

字號是界面設計中另一個重要的元素,字號大小決定了信息的層級和主次關係,合理有序的字號設置能讓界面信息清晰易讀、層次分明;相反,糟糕無序的字號使用會讓界面混亂不堪,影響閱讀體驗。

2. 字號的選擇

字號的選擇,可以遵循 iOS 、Material Design、Ant Design 等國內外權威設計體系中的字號規則,也可以根據產品的特點自行定義。

iOS 字號規則

在iOS11 系統中,使用San Francisco 作為系統英文字體,包含了以下幾種字號的文本樣式:

  • 11pt / 12pt Caption 說明文字

  • 13pt Footnote 腳註

  • 15pt Subhead 副標題

  • 16pt Callout 標註

  • 17pt Body / Headline 正文 / 模塊標題

  • 20pt / 22pt / 28pt Title 頁面標題

  • 34pt Large Title 頁面大標題


需要注意的是,San Francisco 字體有兩種模式: 文本模式 SF Pro Text 和展示模式 SF Pro Display,文本模式適用於字號小於 20pt 的文字,展示模式適用於字號大於等於 20pt 的文字。


Material Design 字號規則

在Material Design 設計體系中,使用Roboto 作為英文字體,規定了以下文字排版的常用字號:

  • 12sp 小字提示

  • 14sp (桌面端 13sp) 正文 / 按鈕文字

  • 16sp (桌面端 15sp) 小標題

  • 20sp Appbar 文字

  • 24sp 大標題

  • 34sp / 45sp / 56sp / 112sp 超大號文字


長篇幅正文,每行建議 60 字符左右,短文本建議每行 30 字符左右。


Ant Design 字號規則


Ant Design 受到 5 音階以及自然律的啟發定義了 10 種不同的字號,從小到大依次為: 12px、14px、16px、20px、24px、30px、38px、46px、56px、68px。

建議主要字號為 14px,其餘字號的選擇可根據具體情況進行自由的定義,盡量控制在 3-5 種之間,保持克制的原則。


Kiwi 字號規則

Kiwi 是餓了麼的中後台設計語言,致力於打造出能夠「了解、洞察、溫暖、激勵用戶」的產品。

在 Kiwi Web 中,規定最小字號為 12px,主要文本字號為 14px,最大字號為 46px。


三、行高

1. 關於行高

行高可以理解為一個包裹在字體外面的無形的框,字體距框的上下空隙為半行距。


參考 W3C 原理,眼睛到屏幕的距離 25cm 為最佳閱讀距離。

西文的基本行高通常是字號的 1.2 倍左右。而中文因為字符密實且高度一致,沒有西文的上伸部和下延部來創造行間空隙,所以一般行高需要更大,根據不同人群的特點(兒童、年輕人、老年人) 以及使用環境,可達到1.5 至2 倍甚至更大。

2. 行高的設置

iOS 行高設置

Apple 官方的iOS 字號與行高對應關係如下(@1x倍率):

文本類型字號(pt)< span >行高(pt)
Caption 11/1213/16
Footnote 1318
Subhead1520
Callout 1621
Body/Headline 1722
Title20/22/2825/28/34
Large Title3441


Fluent Design 行高設置

Microsoft 官方的Fluent Design 字號與行高對應關係如下(使用字體Segoe UI):

文本類型字號(px)< span >行高(px)
Caption 1214
Body< span >1520
Base1520
Subtitle 2024
Title2428
Subheader 3440
Header4656


Ant Design 行高設置

螞蟻金服的Ant Design 字號與行高對應關係如下(優先使用系統默認字體):

字號(px)1214162024303846 56
行高(px)20222428 323846< /td>5464
< blockquote >

行高計算公式: L = F + 8。其中 L 是行高 (Line Height),F 是字號 (Font Size) ,F ≥ 12。


四、字重

1. 關於字重

字重是指字體的粗細,一般在字體家族名後面註明的Thin、Light、Regular、Medium、Bold 、Heavy 等都是字重名稱。越來越多的產品界面需要通過字重來拉開信息層次,當下主流趨勢 iOS11 大標題風格就是通過字重來拉開信息層級的。

不同的字重體現不同的層級關係和情緒感受,細的字體給人以細膩、輕盈的感覺,而粗體則給人莊重和嚴肅的感受,所以在定義字體規範時候需要考慮什麼場景用什麼字重,從而保持良好閱讀體驗。

2. 字重的設置

字重的設置同樣基於秩序、穩定、克制的原則。為了統一整體效果,一般情況下使用兩種字重為佳,例如只出現 Regular 以及 Medium 這兩種字體粗細,特殊情況下可以使用更粗或更細的字重進一步拉開信息層級。 當字號大小為12-18pt 時,使用Regular;20-26pt 時,使用Light;28-34pt 時,使用Thin;當字號大小超過34pt 時,建議使用Ultralight 。

以上是按字號與字重反比的規則設置,即字號越大,字重越輕。當然也可以按正比的規則或者自定義規則,具體還是要根據產品的定位和用戶的特點來設置,以保證信息層級清晰明了為準。


---
本文到此就要告一段落了,如果對你有一點幫助就請點個贊吧~ 你也可以關注我的公眾號彭彭設計筆記,我會不定期更新UI/UX 設計類精品文章,感謝你的閱讀。





相關文章推薦:


《寫給設計師看的數據知識》

《超走心! APP 動效設計必備知識》

《超全面!界面視覺設計 5 要素》

《Design System 界面設計原則-視覺篇》


文章為用戶上傳,僅供非商業瀏覽。發布者:Lomu,轉轉請註明出處: https://www.daogebangong.com/zh-Hant/articles/detail/Interface%20Visual%20Design%20Elements%20%20Fonts.html

(810)
打賞 支付宝扫一扫 支付宝扫一扫
single-end

相關推薦