界面視覺設計要素 字體篇

UI設計教程   /  UI教程     

uimaker
UI設計師 / 江蘇 南京

來源:網絡   作者:佚名

字體是界面設計中最重要的構成要素之一,它能輔助信息的傳遞,是文字的外在表現形式;字體可以通過其獨有的藝術魅力,表達情感體驗,并塑造品牌形象。本文介紹了字體設計的重要性、界面常用字體推薦,以及國內外權威設計體系中對字號、行高、字重的選擇和設置。文末還為大家整理了常用精品字體的下載方式,勿錯過~

一、字體 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 Neue。DIN 起源于 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 作為系統英文字體,包含了以下幾種字號的文本樣式:

11 / 12pt Caption (說明文字)

13pt Footnote (腳注)

15pt Subhead (副標題)

16pt Callout (標注)

17pt Body / Headline (正文 / 模塊標題)

20 / 22 / 28pt Title (頁面標題)

34pt Large Title (頁面大標題)

界面視覺設計要素 字體篇

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

Material Design 字號規則

12sp 小字提示

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

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

20sp Appbar 文字

24sp 大標題

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

界面視覺設計要素 字體篇

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

Ant Design 字號規則

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

界面視覺設計要素 字體篇


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

三、行高 1. 關于行高

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

界面視覺設計要素 字體篇


參考 W3C 原理,眼睛到屏幕的距離為 25cm 。西文的基本行高通常是字號的 1.2 倍左右。而中文因為字符密實且高度一致,沒有西文的升部和降部來創造行間空隙,所以一般行高需要更大,根據不同人群的特點 (兒童、年輕人、老年人) 以及使用環境,可達到 1.5 至 2 倍甚至更大。

2. 行高的設置 iOS 行高設置Apple 官方的 iOS 字號與行高對應關系如下(@1x倍率): 文本類型 字號 (pt) 行高 (pt)
Caption   11/12   13/16  
Footnote   13   18  
Subhead   15   20  
Callout   16   21  
Body / Headline   17   22  
Title   20 / 22 / 28   25 / 28 / 34  
Large Title   34   41  
Fluent Design 行高設置Microsoft 官方的 Fluent Design 字號與行高對應關系如下 (使用字體 Segoe UI): 文本類型 字號 (px) 行高 (px)
Caption   12   14  
Body   15   20  
Base   15   20  
Subtitle   20   24  
Title   24   28  
Subheader   34   40  
Header   46   56  
Ant Design 行高設置螞蟻金服的 Ant Design 字號與行高對應關系如下 (單位 px): 字號 12 14 16 20 24 30 38 46 56
行高   20   22   24   28   32   38   46   54   64  
行高計算公式: 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;18-24pt 時,使用 Light;24-32pt 時,使用 Thin;當字號大小超過 32pt 時,建議使用 Ultralight。以上都是建議值,具體可以根據產品定位和用戶特點來設置。

福利時間

為感謝大家對彭彭的支持,文中推薦的所有字體已全部分類整理好,在我的公眾號 (彭彭設計筆記) 會話頁回復關鍵詞:字體下載,即可獲取。

界面視覺設計要素 字體篇


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

原文地址:彭彭設計筆記(公眾號)

作者:彭彭

界面視覺設計要素 字體篇

 收藏
闪电之神电子 3d开奖预测最准确 重庆幸运农场最近500期 免费平码高手论坛精选 大众麻将胡牌牌型图解 辽宁快乐十二开奖结 3d过滤器手机版缩水工具 广东11选5*助手 虎扑nba比分 云南11选五走势图昨天 多乐彩山东11选5 曾经下载过的神来棋牌 快乐十分陕西开奖结 秒速牛牛登录 云南酒店小姐服 2014甘肃快3走势图 最新街机捕鱼现金版