整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
輯導(dǎo)語(yǔ)：在B端設(shè)計(jì)中，字體是其中重要的組成部分。在設(shè)計(jì)字體需要考慮許多問(wèn)題，比如字體的布局、樣式等等。本篇文章中，作者詳細(xì)介紹B端設(shè)計(jì)中如何正確設(shè)計(jì)字體，快來(lái)學(xué)習(xí)一下吧。
在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ù)”。
而在查看很多設(shè)計(jì)師的稿件過(guò)后，會(huì)發(fā)現(xiàn)他們往往存在許多頁(yè)面問(wèn)題：缺少層級(jí)、頁(yè)面發(fā)灰。
缺少視覺(jué)層級(jí)，這往往是作為一個(gè)設(shè)計(jì)師的主觀感受。
在課上，我有和大家聊過(guò)：作為一名B端設(shè)計(jì)師，其實(shí)我們更像一個(gè)版式設(shè)計(jì)師。因?yàn)樵谝苿?dòng)端到桌面端，交互面積增大的同時(shí)，也會(huì)帶來(lái)信息區(qū)域的劃分，視覺(jué)動(dòng)線的引導(dǎo)。
而缺少層級(jí)往往就像我們?nèi)ふ页隹跁r(shí)，遇到了讓人迷惑的“標(biāo)識(shí)引導(dǎo)系統(tǒng)”，在一個(gè)版式上為你平鋪密密麻麻展示所有信息。所以說(shuō)設(shè)計(jì)本身，其實(shí)也是相通的。
頁(yè)面發(fā)灰一詞其實(shí)源于“美術(shù)專業(yè)”，通常用于評(píng)價(jià)一副美術(shù)作品缺乏 重色或者重色比例過(guò)低，你也可以理解為頁(yè)面當(dāng)中往往找不到重點(diǎn)。因此頁(yè)面發(fā)灰往往是字體重色缺失所導(dǎo)。
字體Family，也叫做字體回退。是瀏覽器常見(jiàn)的字體CSS屬性。
其目的是保證字體在不同的平臺(tái)及瀏覽器內(nèi)，都有著良好的適應(yīng)性和可讀性。
現(xiàn)實(shí)情況是因?yàn)樽鳛槲覀冏鳛锽端產(chǎn)品提供方，不知道真實(shí)用戶究竟在電腦中安裝了哪些字體，而通過(guò)字體回退，來(lái)保證頁(yè)面顯示的最佳效果。
字體Family是需要在項(xiàng)目之初就能有所明確，因?yàn)樽煮w最為B端頁(yè)面當(dāng)中最基礎(chǔ)/底層 的原子，如果隨意變化，全局的設(shè)計(jì)方案都會(huì)受到波及，因此風(fēng)險(xiǎn)較大。
顯然這些字體不是一成不變，你可以根據(jù)實(shí)際用戶的情況進(jìn)行相應(yīng)調(diào)整：
字號(hào)與行高是一對(duì)綁定的關(guān)系。
對(duì)于字號(hào)，瀏覽器一直都有一個(gè)最小限制，為了保證用戶的閱讀，字體的最小字號(hào)為12px。
在實(shí)際項(xiàng)目中，我們會(huì)設(shè)定有：12px、14px、16px、18px……等高度，而行高會(huì)是字體的1.5-1.6倍，因此我將常見(jiàn)的字體與行高做了一份表格。
最后我們?cè)僬f(shuō)說(shuō)，行高在B端項(xiàng)目當(dāng)中的重要性。這是一位同學(xué)問(wèn)我的問(wèn)題，大家可以想想究竟是藍(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……
我們可以通過(guò)字重來(lái)改變頁(yè)面層級(jí)。因?yàn)樽煮w越粗，代表閱讀視線更加注意，整個(gè)信息層級(jí)會(huì)發(fā)生較大變化。而粗字體通常表示我們的標(biāo)題，也就意味著你的標(biāo)題是概括下面的所有信息內(nèi)容。因此通過(guò)良好的字重管理，能夠幫助我們進(jìn)行信息層級(jí)的區(qū)分。
字體灰色的色階會(huì)直接影響頁(yè)面是否發(fā)灰，我們先來(lái)看看頁(yè)面發(fā)灰的頁(yè)面所存在的問(wèn)題。
雖然“發(fā)灰”是一種我們?cè)O(shè)計(jì)師的主觀感受，但是想要深究其中的邏輯，我們可以通過(guò)WCAG規(guī)范當(dāng)中找到更為合適的解答。
這里我們將常見(jiàn)的中性色進(jìn)行平鋪，可以根據(jù)HSB色值當(dāng)中的明度得出一個(gè)折線圖，因?yàn)樽煮w使用往往都在后三個(gè)色階，顏色的色值走向也相對(duì)更陡。
色階相對(duì)更陡的邏輯其實(shí)都是源于中性色的使用場(chǎng)景。淺灰色部分主要是以「背景區(qū)分、分割線、輸入框描邊」為主，通過(guò)淺灰色來(lái)實(shí)現(xiàn)對(duì)于頁(yè)面布局的關(guān)系。
深灰色則主要用于「文字、標(biāo)題、正文排版」它需要拉開(kāi)明度的變化來(lái)引導(dǎo)視覺(jué)關(guān)系，進(jìn)而營(yíng)造界面的整體層次感。
而對(duì)于淺灰色與深灰色，行業(yè)當(dāng)中往往存在著一種說(shuō)法，即「字體灰色可以通過(guò)透明度進(jìn)行控制變化，比如使用 #000 然后將透明度進(jìn)行隨意降低增加」。
當(dāng)我深究這個(gè)問(wèn)題，發(fā)現(xiàn)好像在各大系統(tǒng)當(dāng)中都會(huì)存在這樣說(shuō)法，這真的對(duì)嗎？
通過(guò)查看 SAP、Lightning、Ant Design、Element、Clarity Design 等設(shè)計(jì)規(guī)范，對(duì)比發(fā)現(xiàn)這種說(shuō)法主要源自 國(guó)內(nèi) Clarity Design 與 Ant Design 兩家，不清楚規(guī)范的小伙伴可以查閱 B端設(shè)計(jì)指北 (youthce.com)。
Clarity Design 確實(shí)有描述關(guān)于字體透明度的問(wèn)題的一段話：
“我們使用透明度來(lái)區(qū)分字體層級(jí)。當(dāng)字體應(yīng)用于淺色背景時(shí)，以 #000 為基礎(chǔ)來(lái)調(diào)整透明度；當(dāng)應(yīng)用于深色背景時(shí)，以 #FFF 為基礎(chǔ)。”
仔細(xì)閱讀可以理解到其核心在于表達(dá)字體層級(jí)關(guān)系，讓大家能夠快速理解層級(jí)的概念而并非教唆大家使用透明度進(jìn)行字體的使用。
我們?cè)倏?Ant Design ，如果只看配圖，好像表達(dá)的含義確實(shí)是通過(guò)透明度控制文本顏色和背景顏色 之間的關(guān)系，但是看一下旁邊的描述文字：
“文本顏色如果和背景顏色太接近就會(huì)難以閱讀。考慮到無(wú)障礙設(shè)計(jì)的需求，我們參考了 WCAG 的標(biāo)準(zhǔn)，將正文文本、標(biāo)題和背景色之間保持在了 7:1 以上的 AAA 級(jí)對(duì)比度。”
但是仔細(xì)閱讀你會(huì)發(fā)現(xiàn)，它也只是通過(guò)透明度表達(dá)層級(jí)關(guān)系。我去翻看了 阿里云、語(yǔ)雀、Teambition 等線上產(chǎn)品，發(fā)現(xiàn)他們均沒(méi)有使用透明度的方式。
那透明度究竟適用嗎？使用透明度的字體會(huì)有以下三點(diǎn)問(wèn)題：
當(dāng)字體在一個(gè)圖片或者有紋理的背景圖上，一個(gè)帶有65%透明度的字體明顯會(huì)出現(xiàn)字體無(wú)法控制的問(wèn)題。
使用透明度進(jìn)行渲染，會(huì)增加瀏覽器的負(fù)擔(dān)，而作為一個(gè)全局使用的內(nèi)容，在可以不使用的情況下，便盡可能不要使用，以免增加不必要的負(fù)擔(dān)。
因?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)沒(méi)有維護(hù)的小彩蛋：
其實(shí)關(guān)于字體，本身是一個(gè)特別簡(jiǎn)單內(nèi)容，但是其作為設(shè)計(jì)規(guī)范當(dāng)中的基礎(chǔ)“原子”，在設(shè)計(jì)上還是會(huì)存在許許多多的小問(wèn)題，你也可以說(shuō)說(shuō)，在B端設(shè)計(jì)當(dāng)中遇到了什么“字體相關(guān)的坑”。
作者：CE青年，2B行業(yè)的2B設(shè)計(jì)師；公眾號(hào)：CeDesign
本文由 @CE青年 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議。
果想開(kāi)發(fā)一個(gè)網(wǎng)站，除了要精通后端開(kāi)發(fā)語(yǔ)言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標(biāo)記語(yǔ)言，它包含有眾多的標(biāo)簽，我們可以通過(guò)這些標(biāo)簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個(gè)統(tǒng)一的文檔中，這就形成了我們可以看得見(jiàn)的網(wǎng)頁(yè)。那么，HTML都有哪些常用的標(biāo)簽?zāi)兀?/p>
html5文檔類型聲明：<!doctype html>
html4文檔類型聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這個(gè)標(biāo)簽是html最外層的標(biāo)簽，所有其它的HTML標(biāo)簽都要放在這個(gè)標(biāo)簽的內(nèi)部。
<html>
<head></head>
<body></body>
</html>
在HTML標(biāo)簽中，有的標(biāo)簽是成雙成對(duì)的，如：<html></html>（如下圖）；而有的標(biāo)簽是單個(gè)的，如：<hr>橫線標(biāo)簽。
head頭部有以下幾種常用標(biāo)簽：
meta：主要提供有關(guān)頁(yè)面的元信息。
link：用來(lái)定義文檔與外部資源的關(guān)系，最常用的是調(diào)用CSS樣式文件。
title：頁(yè)面標(biāo)題的標(biāo)簽。
script：用來(lái)調(diào)用JS文件或JS代碼。當(dāng)然，script標(biāo)簽也可以在body主體中使用。
1、塊級(jí)標(biāo)簽。
塊級(jí)標(biāo)簽的特性是：獨(dú)自占有一行；標(biāo)簽的高與寬、邊距可以修改；沒(méi)有設(shè)置寬與高時(shí)，默認(rèn)繼承父標(biāo)簽。例如：
<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
前端頁(yè)面顯示的效果如下圖：
常用的塊級(jí)標(biāo)簽有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。
2、內(nèi)聯(lián)標(biāo)簽。
內(nèi)聯(lián)標(biāo)簽與塊級(jí)標(biāo)簽不同，它不能獨(dú)自占有一行，會(huì)與其它內(nèi)聯(lián)標(biāo)簽在同一樣展示；內(nèi)聯(lián)標(biāo)簽的高與寬、上下邊距是不能修改的，它里面的文字或圖片有多高，它就是多高。例如如下代碼：
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>
CSS樣式代碼跟塊級(jí)標(biāo)簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒(méi)有效果。如下圖：
常用的內(nèi)聯(lián)標(biāo)簽有：span、a、b、strong、i、em 。
3、內(nèi)聯(lián)塊級(jí)標(biāo)簽。
內(nèi)聯(lián)塊級(jí)標(biāo)簽，既有一些內(nèi)聯(lián)標(biāo)簽的特性，也有一些塊級(jí)標(biāo)簽的特點(diǎn)：它不能獨(dú)自占有一行，但是可以修改它的寬度和高度。例如下面這段代碼：
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">
CSS樣式代碼跟塊級(jí)標(biāo)簽的那個(gè)例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個(gè)圖片不能獨(dú)自占有一行，而是在同一行。如下圖：
常用的內(nèi)聯(lián)塊級(jí)標(biāo)簽有：img、input、textarea。
4、區(qū)域標(biāo)簽。
所謂區(qū)域標(biāo)簽，就是主要用來(lái)劃分布局頁(yè)面區(qū)域的。如：頭部、主體內(nèi)容、側(cè)邊欄、底部。這樣劃分的好處是：讓頁(yè)面布局更加清晰明了。
常用的區(qū)域標(biāo)簽有：header（頭部）、footer（底部）、nav（導(dǎo)航）、aside（側(cè)邊欄）、section（主體）、article（獨(dú)立內(nèi)容）。
5、表單標(biāo)簽。
這個(gè)表單標(biāo)簽我們也是會(huì)經(jīng)常用到的，如：登錄網(wǎng)站的時(shí)候、提交數(shù)據(jù)的時(shí)候。如下圖的評(píng)論表單：
?表單常用的標(biāo)簽有：form、input、select、option、textarea 。
以上就是我們開(kāi)發(fā)網(wǎng)頁(yè)時(shí)，會(huì)常用到的HTML標(biāo)簽。當(dāng)然，HTML標(biāo)簽遠(yuǎn)不止這些，尤其是html5出來(lái)后，新增了許多的新標(biāo)簽。但是，有些標(biāo)簽在我們開(kāi)發(fā)中很少用到，所以，這里就沒(méi)有做相應(yīng)的介紹。
ont 屬性可以用來(lái)作為 font-style, font-variant, font-weight, font-size, line-height 和 font-family 屬性的簡(jiǎn)寫，或?qū)⒃氐淖煮w設(shè)置為系統(tǒng)字體。
font-family寫法示例：
<style>
p{
font-family: "幼圓";
}
</style>
</head>
<body>
<p>19級(jí)啟嘉班</p>
</body>效果：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
