B端設(shè)計規(guī)范指南（二）：字體

時間：2023-10-01 04:00:02 | 來源：網(wǎng)站運營

時間：2023-10-01 04:00:02 來源：網(wǎng)站運營

B端設(shè)計規(guī)范指南（二）：字體：B端和C端的設(shè)計有很大不同。

本質(zhì)上的不同在于：C端的設(shè)計是有具體的規(guī)范和適應(yīng)性的，換句話說，其規(guī)范有一定的普適性；但是B端設(shè)計是“定制”的，意思就是其規(guī)范具有獨特性和單一性，其規(guī)范都是針對自己的產(chǎn)品。

筆者會出一個系列和大家交流B端設(shè)計的規(guī)范，那么這一篇所要分享的是：字體。

B端（Business）設(shè)計包含了非常多種面向企業(yè)、商業(yè)的客戶端類型，包括電腦、手機、平板、大屏等等，針對不同客戶端和系統(tǒng)，基礎(chǔ)規(guī)范都有一定的差異。規(guī)范分為了以下幾種：布局規(guī)范、色彩規(guī)范、字體規(guī)范、圖標規(guī)范、控件規(guī)范、表單規(guī)范、表格規(guī)范、動效規(guī)范。

文字的基本屬性

1. 字體選擇 （Font）

字體就是文字的不同風(fēng)格。在UI的字體應(yīng)用中，源文件字體正常顯示的條件，是我們開啟源文件的設(shè)備加載過對應(yīng)的字體文件，圖片格式除外。所以設(shè)計師也要多多考慮不兼容的的情況。

同理，我們想要設(shè)計一套 B 端界面，使用的字體不僅僅是要你自己電腦安裝過，還需要用戶的電腦也裝過。所以，B 端的設(shè)計中，字體必須有明確的規(guī)范。

比如說：中文字體通常是微軟雅黑、蘋方、宋體、思源黑體；英文字體通常是：Arial、Helvetical、Sans-serif。最通用的還是微軟雅黑和思源黑體（英文可以一并換），部分數(shù)字可以運用其他英文字體。這些字體所用到的字體不用考慮任何版權(quán)問題，可以直接網(wǎng)頁用。

2. 字號選擇

網(wǎng)頁中，字體大小根據(jù) px 單位來制定。

網(wǎng)頁設(shè)計的中文字體最小字號一般控制不小于 12px（有時候的ppt匯報里面可以用更小的字體，能夠看起來更精美，10px左右）。而純英文或數(shù)字文本最小字號則在 9px 左右。

很多設(shè)計師和學(xué)生都是做傳統(tǒng)平面設(shè)計的，傳統(tǒng)平面設(shè)計也包括海報和畫冊，這兩者在版式和設(shè)計思想上有著很大的相似之處，可是屏幕也就是多媒體設(shè)備使用時有要考慮具體的字號，這個字號和畫冊的字號有著很本質(zhì)的不同。

o 注釋英文、數(shù)字：9-11px

o 注釋、小段文本：12-13px

o 正文、小標題：14-16px

o 大標題和大數(shù)字：16-20px




3. 字重的選擇

字重是字體筆畫的粗細。一套完整成熟的字體會包含多個級別的字重（如蘋方）。

4. 字色的認識

在網(wǎng)頁設(shè)計中，特別是B端，要避免使用漸變色。

網(wǎng)頁色彩（RGB；用 16 進制代碼表達色彩）打印色彩(CMYK)

5. 文本樣式

除了這些選項外，最后再說一個，就是文本的樣式內(nèi)容。在網(wǎng)頁設(shè)計中，除了以上的文字屬性設(shè)置外，CSS 還可以為文本添加下面的效果：

文本的排版屬性

文本的頁面的布局和瀏覽的效果，是建立在上面幾點的基礎(chǔ)上的，也是最后呈現(xiàn)效果的決定性一環(huán)。

1. 文本區(qū)域

文字屬于網(wǎng)頁中的元素，這個元素是在網(wǎng)頁中出現(xiàn)，都包含著矩形（文本區(qū)域）。

文本區(qū)域分為水平適應(yīng)、定寬模式、固定尺寸三種。簡單說就是長不變、寬不變、固定比例變化。

我們首先是要判斷文本的類型，在選擇合適的進行設(shè)計。




2. 對齊模式

補充：如果一個文本區(qū)域大于文字的高度，那么文字就會水平方向居中。

在網(wǎng)頁內(nèi)容的范疇里，文本的對齊是很少使用兩端對齊的，也很少采用右對齊。一般采用左對齊、自然對齊、自動折行來展示。

注意：具體還是要看文本的屬性和所處的頁面環(huán)境狀態(tài)。




3. 行高 Line-height

行高是文本區(qū)域內(nèi)一行文字實際高度的數(shù)值，和字號不是同一個屬性。

行高是指文本行基線間的垂直距離。

要想理解這句話首先得了解幾個基本知識：

主要目的是為了讓多行文本的閱讀體驗?zāi)軡M足我們的需要。根據(jù)視覺的需求去進行數(shù)值的定義。大多數(shù)情況下，行高控制在字號的 1.2-2 倍之間，行高是要經(jīng)過一系列測試的。B端的規(guī)范一旦制定了，在做設(shè)計的時候就要留意去遵守。

4. 段間距

最后，在文字布局中軟件有提供給我們一個屬性，段間距，即段落之間的區(qū)域，通過增加留白來提升閱讀體驗。需要注意的事：盡量避免在 B 端設(shè)計中多段文本使用一個文本框，將每段獨立成一個文本框的設(shè)計，能最大化開發(fā)的效率。因為在更新迭代的過程之中，文本的內(nèi)容和字數(shù)會發(fā)生變化，這樣使開發(fā)端還需要花時間進行修改。如果一開始使用的是分塊文本框就可以避免很多不必要的情況出現(xiàn)。