在 B 端設(shè)計(jì)當(dāng)中，字體往往是出現(xiàn)頻率最高的一個(gè)“原子”。因其擁有不同的渲染方式(設(shè)計(jì)軟件渲染與瀏覽器渲染)并且在 Web 設(shè)計(jì)當(dāng)中，會(huì)出現(xiàn)兩大桌面操作系統(tǒng)的情況(Windows 與 Mac OS)也就造成在 B 端設(shè)計(jì)當(dāng)中的字體，往往存在著許多“變數(shù)”。

[[425221]]

而在查看很多設(shè)計(jì)師的稿件過后，會(huì)發(fā)現(xiàn)他們往往存在許多頁(yè)面問題：缺少層級(jí)、頁(yè)面發(fā)灰。

缺少層級(jí)

缺少視覺層級(jí)，這往往是作為一個(gè)設(shè)計(jì)師的主觀感受。

在課上，我有和大家聊過：作為一名 B 端設(shè)計(jì)師，其實(shí)我們更像一個(gè)版式設(shè)計(jì)師。因?yàn)樵谝苿?dòng)端到桌面端，交互面積增大的同時(shí)，也會(huì)帶來信息區(qū)域的劃分，視覺動(dòng)線的引導(dǎo)。

而缺少層級(jí)往往就像我們?nèi)ふ页隹跁r(shí)，遇到了讓人迷惑的“標(biāo)識(shí)引導(dǎo)系統(tǒng)”，在一個(gè)版式上為你平鋪密密麻麻展示所有信息。所以說設(shè)計(jì)本身，其實(shí)也是相通的。

頁(yè)面發(fā)灰

頁(yè)面發(fā)灰一詞其實(shí)源于“美術(shù)專業(yè)”，通常用于評(píng)價(jià)一副美術(shù)作品缺乏 重色或者重色比例過低，你也可以理解為頁(yè)面當(dāng)中往往找不到重點(diǎn)。因此頁(yè)面發(fā)灰往往是字體重色缺失所導(dǎo)致。

字體 Family

字體 Famliy，也叫做字體回退。是瀏覽器常見的字體 CSS 屬性。

其目的是保證字體在不同的平臺(tái)及瀏覽器內(nèi)，都有著良好的適應(yīng)性和可讀性。

現(xiàn)實(shí)情況是因?yàn)樽鳛槲覀冏鳛?B 端產(chǎn)品提供方，不知道真實(shí)用戶究竟在電腦中安裝了哪些字體，而通過字體回退，來保證頁(yè)面顯示的最佳效果。

字體 Family 是需要在項(xiàng)目之初就能有所明確，因?yàn)樽煮w最為 B 端頁(yè)面當(dāng)中最 基礎(chǔ)/底層 的原子，如果隨意變化，全局的設(shè)計(jì)方案都會(huì)受到波及，因此風(fēng)險(xiǎn)較大。

比如常見的字體 Family：

• Mac OS 下 英文使用：San Francisco、中文使用：Ping Fang SC
• Windows 系統(tǒng)下 英文使用：Segoe UI、中文使用：Microsoft YaHei

顯然這些字體不是一成不變，你可以根據(jù)實(shí)際用戶的情況進(jìn)行相應(yīng)調(diào)整：

字體回退究竟如何確定?

• 檢查截取競(jìng)品的 font-family 代碼，通過研究競(jìng)品的退回機(jī)制，確立一個(gè)基本的產(chǎn)品回退方案。
• 將方案交付給前端進(jìn)行調(diào)試，通過調(diào)試結(jié)果確定方案(設(shè)計(jì)軟件與前端實(shí)現(xiàn) 的渲染方式不同，建議實(shí)機(jī)進(jìn)行判斷)

字號(hào)與行高

字號(hào)與行高是一對(duì)綁定的關(guān)系

對(duì)于字號(hào)，瀏覽器一直都有一個(gè)最小限制，為了保證用戶的閱讀，字體的最小字號(hào)為 12px

在實(shí)際項(xiàng)目中，我們會(huì)設(shè)定有：12 px、14 px、16 px、18px… 等高度，而行高會(huì)是字體的1.5-1.6倍，因此我將常見的字體與行高做了一份表格

最后我們?cè)僬f說，行高在 B 端項(xiàng)目當(dāng)中的重要性

這是一位同學(xué)問我的問題，大家可以想想究竟是藍(lán)色還是黃色?

正確答案是黃色。因?yàn)樾懈叩某霈F(xiàn)，他代表著文字有著更為統(tǒng)一的高度，并且在實(shí)際間距的測(cè)量中，必須把行高算為字體內(nèi)部的元素當(dāng)中

字重

字體字重分別有 ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy，當(dāng)然它還有一個(gè)數(shù)字名稱：100、200、300、400、500…

我們可以通過字重來改變頁(yè)面層級(jí)。因?yàn)樽煮w越粗，代表閱讀視線更加注意，整個(gè)信息層級(jí)會(huì)發(fā)生較大變化。而粗字體通常表示我們的標(biāo)題，也就意味著你的標(biāo)題是概括下面的所有信息內(nèi)容。因此通過良好的字重管理，能夠幫助我們進(jìn)行信息層級(jí)的區(qū)分

字體灰色

字體灰色的色階會(huì)直接影響頁(yè)面是否發(fā)灰，我們先來看看頁(yè)面發(fā)灰的頁(yè)面所存在的問題

雖然“發(fā)灰”是一種我們?cè)O(shè)計(jì)師的主觀感受，但是想要深究其中的邏輯，我們可以通過 WCAG 規(guī)范當(dāng)中找到更為合適的解答

這里我們將常見的中性色進(jìn)行平鋪，可以根據(jù) HSB 色值當(dāng)中的明度得出一個(gè)折線圖，因?yàn)樽煮w使用往往都在后三個(gè)色階，顏色的色值走向也相對(duì)更陡

色階相對(duì)更陡的邏輯其實(shí)都是源于中性色的使用場(chǎng)景。淺灰色部分主要是以「背景區(qū)分、分割線、輸入框描邊」為主，通過淺灰色來實(shí)現(xiàn)對(duì)于頁(yè)面布局的關(guān)系

深灰色則主要用于「文字、標(biāo)題、正文排版」它需要拉開明度的變化來引導(dǎo)視覺關(guān)系，進(jìn)而營(yíng)造界面的整體層次感

而對(duì)于淺灰色與深灰色，行業(yè)當(dāng)中往往存在著一種說法，即「字體灰色可以通過透明度進(jìn)行控制變化，比如使用 #000 然后將透明度進(jìn)行隨意降低增加」

當(dāng)我深究這個(gè)問題，發(fā)現(xiàn)好像在各大系統(tǒng)當(dāng)中都會(huì)存在這樣說法，這，真的對(duì)嗎?

通過查看 SAP、Lightning、Ant Design、Element、Clarity Design 等設(shè)計(jì)規(guī)范，對(duì)比發(fā)現(xiàn)這種說法主要源自 國(guó)內(nèi) Clarity Design 與 Ant Design 兩家，不清楚規(guī)范的小伙伴可以查閱 B 端設(shè)計(jì)指北 (youthce.com)

Clarity Design 確實(shí)有描述關(guān)于字體透明度的問題的一段話

“我們使用透明度來區(qū)分字體層級(jí)。當(dāng)字體應(yīng)用于淺色背景時(shí)，以 #000 為基礎(chǔ)來調(diào)整透明度;當(dāng)應(yīng)用于深色背景時(shí)，以 #FFF 為基礎(chǔ)。”

仔細(xì)閱讀可以理解到其核心在于表達(dá)字體層級(jí)關(guān)系，讓大家能夠快速理解層級(jí)的概念而并非教唆大家使用透明度進(jìn)行字體的使用

我們?cè)倏?Ant Design，如果只看配圖，好像表達(dá)的含義確實(shí)是通過透明度控制文本顏色和背景顏色 之間的關(guān)系，但是看一下旁邊的描述文字

“文本顏色如果和背景顏色太接近就會(huì)難以閱讀。考慮到無障礙設(shè)計(jì)的需求，我們參考了 WCAG 的標(biāo)準(zhǔn)，將正文文本、標(biāo)題和背景色之間保持在了 7:1 以上的 AAA 級(jí)對(duì)比度。”

但是仔細(xì)閱讀你會(huì)發(fā)現(xiàn)，它也只是通過透明度表達(dá)層級(jí)關(guān)系。我去翻看了 阿里云、語(yǔ)雀、Teambition 等線上產(chǎn)品，發(fā)現(xiàn)他們均沒有使用透明度的方式

那透明度究竟適用嗎?使用透明度的字體會(huì)有以下三點(diǎn)問題：

1. 字體適應(yīng)場(chǎng)景不多：

當(dāng)字體在一個(gè)圖片或者有紋理的背景圖上，一個(gè)帶有 65%透明度的字體明顯會(huì)出現(xiàn)字體無法控制的問題

2. 增加渲染負(fù)擔(dān)：

使用透明度進(jìn)行渲染，會(huì)增加瀏覽器的負(fù)擔(dān)，而作為一個(gè)全局使用的內(nèi)容，在可以不使用的情況下，便盡可能不要使用，以免增加不必要的負(fù)擔(dān)

3. 維護(hù)困難

因?yàn)樽煮w顏色采取透明度，本身就跳脫顏色規(guī)范的范疇當(dāng)中，因此需要單獨(dú)維護(hù)一套字體 Color 的組件庫(kù)。

如果你之前有原子設(shè)計(jì)、Design Token 相關(guān)經(jīng)驗(yàn)，你一定會(huì)知道，顏色與字體本身就屬于兩類不同原子，因此字體顏色一般適用中性色當(dāng)中的色值即可。

關(guān)于規(guī)范，我一直給同學(xué)講的是維護(hù)，這里給大家放一個(gè)關(guān)于設(shè)計(jì)系統(tǒng)沒有維護(hù)的小彩蛋：

什么是信息密度?

前面為大家講到了 字號(hào)、行高這一概念，但是隱藏其背后，有著十分復(fù)雜的設(shè)計(jì)邏輯，通過字號(hào)和行高，我們可以清晰的了解到不同信息間的密度關(guān)系;通過信息密度可以決定信息間的易讀性。今天我就拋磚引玉，簡(jiǎn)單聊聊，頁(yè)面信息密度背后的邏輯。

信息密度，可以理解為頁(yè)面當(dāng)中你所展示的信息數(shù)量?通常給人們的直觀感受就是視覺閱讀更為舒適、或者更為緊湊。

比如我們?cè)谝粋€(gè) 固定信息量的表格當(dāng)中進(jìn)行繪制，可以通過字號(hào)、行高、行間距 來控制其展示的信息量，進(jìn)而可以產(chǎn)生在視覺上完全不同的三個(gè)信息展示維度：寬敞、舒適、緊湊。

寬敞：我們以字號(hào) 14px、行高 20px 為例，寬敞的定義為上下均為一個(gè)文字的整體高度，也就是 20px * 3 =60px。

舒適：對(duì)舒適的定義為上下均為半個(gè)文字的整體高度，也就是 20px * 2=40px。

緊湊：緊湊相對(duì)于信息密度是最高，高度基本上是，行高的 0.6 倍左右 20 * 1.6=32px。

當(dāng)然對(duì)于密度的定義，并沒有統(tǒng)一的標(biāo)準(zhǔn)，可以根據(jù)自身的產(chǎn)品特性進(jìn)行相應(yīng)調(diào)整。不過要記好三個(gè)的維度，文字后半部分會(huì)用到。

而在實(shí)際工作當(dāng)中，我們會(huì)去強(qiáng)調(diào)屏效這一概念。

這個(gè)屏效與餐飲行業(yè)當(dāng)中的坪效類似，目的都是用于單位面積當(dāng)中能夠衡量屬性的一個(gè)具體指標(biāo)。而我們便可用它來衡量整個(gè)寬敞、舒適、緊湊的具體指數(shù)，以及表格外其他因素的干擾。

通過 信息面積/表格面積 * 100% 就能夠得出整個(gè)表格的“屏效”。

“屏效”這一理念之后可以用在許多許多其他組件，去尋找規(guī)律。咱們后續(xù)再聊。

什么是易讀性?

通俗一點(diǎn)來說，就是你在這個(gè)頁(yè)面當(dāng)中能否一眼就看清文字，能夠讓用戶快速找到。它與我們上面說到的信息密度是一個(gè)反比的關(guān)系，也就是信息密度越高，易讀性也會(huì)隨之降低。

但我們?cè)诠ぷ鳟?dāng)中，對(duì)接客戶需求時(shí)，客戶往往都會(huì)更去在乎信息密度，而忽視易讀性。比如：

• “能不能再多一點(diǎn)?”
• “展示得能不能再密一些?”
• “這里感覺可以加更多的信息。”

面對(duì)這樣的一些問題，相信你也會(huì)時(shí)常問自己，需求是否合理?

避開場(chǎng)景去談需求都是在耍流氓，對(duì)于上訴的問題，我們可以這樣去思考場(chǎng)景：

假如現(xiàn)在字節(jié)不動(dòng)公司的“張老板”，作為老板，你每天重要的工作就是查看公司的整體狀態(tài)。然后打開管理后臺(tái)點(diǎn)擊數(shù)據(jù)看板，發(fā)現(xiàn)數(shù)據(jù)看板都是非常大的卡片，但作為你自己而言，是不需要這么大的字體，因?yàn)檫@個(gè)內(nèi)容只針對(duì)你看，所以你提出讓設(shè)計(jì)師去做相應(yīng)調(diào)整。

假如小張是一名銷售基層員工，每天的工作都是打開軟件對(duì)客戶數(shù)據(jù)進(jìn)行操作，隨著小張業(yè)務(wù)不斷熟練，他就想能夠在一個(gè)頁(yè)面當(dāng)中展示更多的信息用于數(shù)據(jù)操作。因此想讓設(shè)計(jì)師對(duì)信息的密度進(jìn)行修改

看上去他們的訴求都有自己的道理，對(duì)于這些情況，建議大家可以采取不同方式來進(jìn)行展示。

我們現(xiàn)在去處理小張的需求，產(chǎn)品涉及到的用戶人群較大，針對(duì)于基層員工的工作需求，我們應(yīng)該去考慮將特殊的喜好努力抽象成為通用的邏輯，適用到系統(tǒng)當(dāng)中。比如在表格底部設(shè)定表格的不同高度：“寬敞、舒適、緊湊”這樣的維度，通過較為通用的方式，來滿足用戶的需求，而不是單獨(dú)為此用戶進(jìn)行調(diào)整。

針對(duì)老板的特定需求，或許整個(gè)功能/產(chǎn)品就是為他設(shè)計(jì)，因此對(duì)于這樣的“老板需求”我們則可以根據(jù)他的具體使用習(xí)慣進(jìn)行調(diào)整，所以設(shè)計(jì)師應(yīng)該多從特定人群的實(shí)際環(huán)境出發(fā)進(jìn)行思考。

當(dāng)然如果除了老板之外的其他角色也需要去使用這個(gè)功能，我們同樣可以根據(jù)“視圖、分類、篩選”等功能，將不同類型的角色進(jìn)行定義。

而在頁(yè)面信息舒適性和密度之間究竟應(yīng)該如何權(quán)衡?我確實(shí)不能給到你一個(gè)萬(wàn)能的公式，能幫助到你的還是只能通過需求真實(shí)的 場(chǎng)景/行業(yè) 出發(fā)，對(duì)于整個(gè)影響范圍進(jìn)行綜合考慮。

最后關(guān)于行高，會(huì)出現(xiàn)很多奇奇怪怪的問題，比如 在微軟雅黑 字體當(dāng)中，由于本身基準(zhǔn)線的緣故，微軟雅黑字體本身是靠下進(jìn)行展示。而我們?cè)?圖標(biāo) 文字 混排時(shí)，就會(huì)出現(xiàn)錯(cuò)亂的情況，我們?cè)谠u(píng)論區(qū)探討探討，這種情況你是如何處理的?