做爰三级在线播放_又大又粗又猛又舒服又爽_暖暖www免费高清视频最新期_午夜精品aaa国产福利

界面視覺設(shè)計 5 要素之字體篇

2018-7-12    資深UI設(shè)計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里


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

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

一、字體

1. 字體設(shè)計的重要性

輔助信息傳遞

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

表達情感體驗

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

塑造品牌形象

不同字體有著不同的風(fēng)格特征: 有的字體優(yōu)美清新、線條流暢;有的字體造型規(guī)整、充滿張力;還有的字體生動活潑、色彩明快……根據(jù)產(chǎn)品的屬性選擇正確的字體,便能有效地塑造品牌形象。

2. 界面常用字體推薦

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

中文字體推薦

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

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

英文字體推薦

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

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

作為一款經(jīng)典的無襯線字體,Helvetica 在平面設(shè)計和商業(yè)上非常普及和成功,被認為是現(xiàn)代主義設(shè)計理念的典范,其簡潔樸素的線條風(fēng)格非常受追捧。

數(shù)字字體推薦

線上數(shù)字字體推薦使用 DIN、Core Sans D、Helvetica Neue。

DIN 起源于1995年的德國,無襯線字體,易用耐看、字形開放,是設(shè)計師最愛的幾類字體之一,適合顯示比較長的大號數(shù)字,但是小字號的情況下識別度較低。

Core Sans D 是由韓國設(shè)計師設(shè)計的一款無襯線字體,支持 Thin、Light、Regular、Medium、Bold 等類型字重,對大號數(shù)字的顯示效果不錯,不過它是收費字體。

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

二、字號

1. 關(guān)于字號

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

2. 字號的選擇

字號的選擇,可以遵循 iOS 、Material Design、Ant Design 等國內(nèi)外權(quán)威設(shè)計體系中的字號規(guī)則,也可以根據(jù)產(chǎn)品的特點自行定義。

iOS 字號規(guī)則

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

  • 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 字號規(guī)則

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

  • 12sp 小字提示
  • 14sp(桌面端 13sp)正文 / 按鈕文字
  • 16sp(桌面端 15sp)小標題
  • 20sp Appbar 文字
  • 24sp 大標題
  • 34sp / 45sp / 56sp / 112sp 超大號文字

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

Ant Design 字號規(guī)則

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

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

Kiwi 字號規(guī)則

Kiwi 是餓了么的中后臺設(shè)計語言,致力于打造出能夠「了解、洞察、溫暖、激勵用戶」的產(chǎn)品。

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

三、行高

1. 關(guān)于行高

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

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

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

2. 行高的設(shè)置

iOS 行高設(shè)置

Apple 官方的 iOS 字號與行高對應(yīng)關(guān)系如下(@1x倍率):


Fluent Design 行高設(shè)置

Microsoft 官方的 Fluent Design 字號與行高對應(yīng)關(guān)系如下(使用字體 Segoe UI):

Ant Design 行高設(shè)置

螞蟻金服的 Ant Design 字號與行高對應(yīng)關(guān)系如下(優(yōu)先使用系統(tǒng)默認字體):

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

四、字重

1. 關(guān)于字重

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

不同的字重體現(xiàn)不同的層級關(guān)系和情緒感受,細的字體給人以細膩、輕盈的感覺,而粗體則給人莊重和嚴肅的感受,所以在定義字體規(guī)范時候需要考慮什么場景用什么字重,從而保持良好閱讀體驗。

2. 字重的設(shè)置

字重的設(shè)置同樣基于秩序、穩(wěn)定、克制的原則。為了統(tǒng)一整體效果,一般情況下使用兩種字重為佳,例如只出現(xiàn) Regular 以及 Medium 這兩種字體粗細,特殊情況下可以使用更粗或更細的字重進一步拉開信息層級。

當字號大小為 12-18pt 時,使用 Regular;20-26pt 時,使用 Light;28-34pt 時,使用 Thin;當字號大小超過 34pt 時,建議使用 Ultralight。

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

藍藍設(shè)計91whvog3.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計  cs界面設(shè)計  ipad界面設(shè)計  包裝設(shè)計  圖標定制  用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://91whvog3.cn

存檔