如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

文字是界面設(shè)計(jì)中最基本的構(gòu)成之一，如何定義網(wǎng)頁(yè)設(shè)計(jì)中的文字系統(tǒng)？可大體分為三步：

1. 系統(tǒng)全面地了解文字的基礎(chǔ)知識(shí)、顯示方式、影響因素及當(dāng)前網(wǎng)頁(yè)設(shè)計(jì)中適合的文字系統(tǒng)；
2. 梳理出自己團(tuán)隊(duì)所有產(chǎn)品文字使用情況；
3. 綜合第1步、第2步總結(jié)出適合團(tuán)隊(duì)業(yè)務(wù)的文字系統(tǒng)。

字符屏幕顯示原理

1. 字符

字符是指計(jì)算機(jī)中使用的字母、數(shù)字、標(biāo)點(diǎn)符號(hào)等等。

計(jì)算機(jī)最初發(fā)明出來(lái)是用來(lái)解決數(shù)字計(jì)算問(wèn)題的。

后來(lái)發(fā)現(xiàn)，計(jì)算機(jī)還可以做更多的事，例如文本處理。其實(shí)計(jì)算機(jī)挺笨的，它讀到的所有字符都是由1和0組成的字符串，因?yàn)橛?jì)算機(jī)電路只有兩種狀態(tài)，「開(kāi)」和「閉」，對(duì)應(yīng)「1」和「0」。計(jì)算機(jī)也只可以直接存儲(chǔ)和處理二進(jìn)制數(shù)字。

2. 二進(jìn)制

「二進(jìn)制」是數(shù)字世界里的基本規(guī)則。

下面這些不同格式的文件，在本質(zhì)上都是一串由1和0組成的代碼，要了解這些文件首先要了解二進(jìn)制。人有十根手指頭，但計(jì)算機(jī)電路只有「開(kāi)」和「閉」兩種狀態(tài)，所以滿十進(jìn)一位的計(jì)數(shù)方式更適合人類計(jì)算，而滿二進(jìn)一的二進(jìn)制更適合計(jì)算機(jī)。計(jì)算機(jī)只需要1和0這兩個(gè)數(shù)字就可以傳遞一切信息。

△ MP4

△ MP3

△ JPG

△ TXT

△ AVI

以圖像為例，我們用電腦或手機(jī)看到的圖像都是在某個(gè)角落里存儲(chǔ)著下面這樣的一串?dāng)?shù)據(jù)。開(kāi)頭的16位翻譯過(guò)來(lái)就是 BMP文件開(kāi)始的標(biāo)識(shí)。

BMP文件標(biāo)識(shí)后面的數(shù)字就是圖像的各項(xiàng)基本信息。

△ 圖像的各項(xiàng)基本信息

△ 顏色深度

最開(kāi)始的24位，都是1，像素顯示為紅、綠、藍(lán)三種顏色，相加后顯示為白色。

接下來(lái)的24位，前8位是1，后面都是0，像素顯示為紅色。

再后面24位的前16位都是1，最后8位為0，像素顯示紅、綠兩色，相加后顯示為黃色。

根據(jù)這樣的規(guī)則整個(gè)55×55的格子鋪滿顏色就得到一張完整的圖片。所以一個(gè) BMP圖像文件中的1和0就在逐個(gè)記錄圖像中每一個(gè)像素點(diǎn)的顏色。

△ 二進(jìn)制圖片生成方式

△ 色光三原色和顏料三原色區(qū)別

下面所有文件的顯示都和圖像顯示例子一樣，文件中的1和0按照人們事先設(shè)計(jì)好的規(guī)則排列好，只需要找到正確的打開(kāi)方式按照特定的規(guī)則來(lái)解讀這些數(shù)據(jù)，我們就可以獲得其中的信息。我們?cè)趺床拍苤滥骋粋€(gè)文件的1和0究竟是按什么規(guī)則排列的？我們又要用怎樣的方式來(lái)解讀？這就用到了擴(kuò)展名，在文件的名字后面加幾個(gè)特定的字符，就可以幫助系統(tǒng)辨別出文件的類型，從而提示電腦去按照某種特定的規(guī)則來(lái)正確解讀其中的信息。

△ MP4格式擴(kuò)展名

△ MP3格式擴(kuò)展名

△ JPG格式擴(kuò)展名

△ TXT格式擴(kuò)展名

△ AVI格式擴(kuò)展名

更多其他文件拓展名：

3. 字符編碼

為了在計(jì)算機(jī)上顯示字符，必須將字符轉(zhuǎn)換成二進(jìn)制數(shù)字。所以就有了統(tǒng)一、標(biāo)準(zhǔn)字符轉(zhuǎn)換規(guī)則，即字符編碼。字符編碼是給所有的漢字定一個(gè)的數(shù)字編號(hào)，并用1和0來(lái)表示這個(gè)數(shù)字編號(hào)。

文字的一個(gè)字符對(duì)應(yīng)一個(gè)編碼（碼點(diǎn)），而編碼對(duì)應(yīng)字符集里的一個(gè)「字」，字符通過(guò)字符集與「字」相連。像圖中所示Unicode、GB 2312、Shift_JIS 都是字符集，其主要作用是為每一個(gè)「字」分配一個(gè)編碼。

△ 文本編碼流程

字符集里的每一個(gè)編碼對(duì)應(yīng)的是一個(gè)「字」而不是「字形」，也就是一個(gè)「字」在不同的地區(qū)或標(biāo)準(zhǔn)中可能有不同的「字形」，但字符集中只能對(duì)其分配一個(gè)編碼（除非相差過(guò)大，比如簡(jiǎn)化字），要顯示其不同的「字形」要通過(guò)使用為不同地區(qū)或標(biāo)準(zhǔn)設(shè)計(jì)的字體來(lái)實(shí)現(xiàn)。

△ 字異形（左簡(jiǎn)體中文，右日文）

4. 編碼發(fā)展史

ASCII

ASCII（American Standard Code for Information Interchange，美國(guó)信息交換標(biāo)準(zhǔn)代碼）出現(xiàn)在上個(gè)世紀(jì)60年代的美國(guó)，ASCII 一共定義了128個(gè)字符，包括英文字母 A-Z，a-z，0-9，一些標(biāo)點(diǎn)符號(hào)和控制符號(hào)。ASCII 采用的編碼模型是簡(jiǎn)單字符集，在英語(yǔ)系國(guó)家里 ASCII 標(biāo)準(zhǔn)很完美。但是世界上有好幾千種語(yǔ)言，其他語(yǔ)言系的國(guó)家想使用計(jì)算機(jī)，ASCII 就遠(yuǎn)遠(yuǎn)不夠了。所以編碼進(jìn)入了混亂的時(shí)代。

△ ASCII編碼

混亂時(shí)代

計(jì)算機(jī)的一個(gè)字節(jié)是8位，可以表示256個(gè)字符。ASCII 使用了7位，所以人們決定把剩余的1位也利用起來(lái)。人們對(duì)于 ASCII 已規(guī)定好的128個(gè)字符沒(méi)有異議，但是不同語(yǔ)系的人對(duì)于其他字符的需求不一樣，所以對(duì)于剩下的128個(gè)字符的擴(kuò)展千奇百怪。而且在亞洲語(yǔ)言系統(tǒng)中有更多的字符。于是就又產(chǎn)生了各種多字節(jié)表示一個(gè)字符的方法，每個(gè)語(yǔ)系都有自己特定的編碼頁(yè)（code pages），這就使整個(gè)局面更加混亂不堪。這時(shí) Unicode 出現(xiàn)了。

Unicode

Unicode 就是給計(jì)算機(jī)中所有的字符各自分配一個(gè)代號(hào)。Unicode 可以認(rèn)為是字符的編號(hào)，它為每種語(yǔ)言中的每個(gè)字符設(shè)定了統(tǒng)一并且唯一的二進(jìn)制編碼，Unicode 字符集和編碼方式解決了跨語(yǔ)言、跨平臺(tái)的交流問(wèn)題。但在 Unicode 里每一個(gè)字符都是用4個(gè)字節(jié)來(lái)編碼，原本英文字母僅需1個(gè)字節(jié)編碼，中文需2~3個(gè)字節(jié)編碼即可，這對(duì)于存儲(chǔ)或傳輸資源而言是很不劃算的。

UTF-8

UTF-8 基于 Unicode 編碼的一種節(jié)約字節(jié)的編碼，是一種可變長(zhǎng)度字符編碼方式。在UTF-8編碼中，英文字母是一個(gè)字節(jié)，中文（非生僻字）是2~3個(gè)字節(jié)。可以認(rèn)為， UTF-8 是對(duì) Unicode 的一種壓縮算法。UTF-8 等編碼方式有效的節(jié)約了存儲(chǔ)空間和傳輸帶寬，因而受到了極大的推廣應(yīng)用。并且 UTF-8 兼容 ASCII 字符集。

UTF：Unicode Transformation Format

5. 中文編碼類型

△ 中文編碼類型

文字基礎(chǔ)知識(shí)

1. 文字

「文字」是信息交流的工具，可讀性、易讀性至關(guān)重要。在網(wǎng)頁(yè)設(shè)計(jì)中文字使用需要考慮幾個(gè)要素：首先考慮字體，其次是字重、字號(hào)、行高、字間距、行間距、段間距等。

△ 字體、字重

△ 字間距、字號(hào)、行高

△ 行間距、段間距

2. 字體

「字體」是文字的外在形式特征，不同的字體有不同的性格。

字體種類

綜合中文、英文都適用的廣義分類。

襯線、無(wú)襯線

△ 襯線和無(wú)襯線差異1

△ 襯線和無(wú)襯線差異2

字體 – 中文

字體構(gòu)成：

△ 筆畫(huà)

中宮，是指等分成九個(gè)小方格最中間的那一格。

△ 中宮

△ 中宮和字體關(guān)系

△ 中宮緊湊、中宮松散

間架結(jié)構(gòu)，漢字種類眾多，筆劃不等，空間排布極為重要。字體的間架結(jié)構(gòu)可分為兩類：?jiǎn)误w字、合體字。

△ 單體字 間架結(jié)構(gòu)

△ 合體字 間架結(jié)構(gòu)

漢字字形眾多，有些字形會(huì)產(chǎn)生視覺(jué)大小變化，頂格、縮格、出格就是針對(duì)不同結(jié)構(gòu)的字體筆畫(huà)特征進(jìn)行微調(diào)，讓他們看起來(lái)更加均衡、等大、視覺(jué)更完整。

△ 調(diào)整前

△ 調(diào)整后

字形調(diào)整實(shí)例：

襯線、無(wú)襯線字形演變：

△ 襯線 字形演變

△ 無(wú)襯線 字形演變

字體對(duì)比：

微軟雅黑、方正蘭亭黑簡(jiǎn)體、思源黑體、蘋(píng)方-簡(jiǎn)，筆畫(huà)寬度均勻，橫平豎直。同一字號(hào)，微軟雅黑最粗，小字號(hào)時(shí)閱讀會(huì)較為吃力。方正蘭亭黑從微軟雅黑派衍生出來(lái)，可以更好地適應(yīng)其他應(yīng)用場(chǎng)合。

黑體、華文黑體、冬青黑體筆畫(huà)末端寬度不同。

字體 – 英文

「字谷」概念來(lái)自西文字母設(shè)計(jì)，字谷指字母中部分或完全封閉的空間，即字母當(dāng)中留白部分。

英文的字體結(jié)構(gòu)是由4條平行線組成，有時(shí)候是5條，但是一般大寫(xiě)線會(huì)忽略?！富€」在西文中是標(biāo)準(zhǔn)，單個(gè)字母的所有立腳點(diǎn)都是在這條線上（除了 g、j、p、y）。英文文字結(jié)構(gòu)多種多樣，4條平行線的位置也會(huì)發(fā)生改變。

升部：上緣線和主線之間的內(nèi)容。

降部：下緣線和基線之間的內(nèi)容。

字體對(duì)比：Helvetica Neue、Arial、DIN

Helvetica Neue：中性，無(wú)襯線，現(xiàn)代主義風(fēng)格字體。字體末端嚴(yán)格保持橫平豎直，性格嚴(yán)謹(jǐn)、保守，沒(méi)有任何的修飾，適合不同分辨率的顯示器。該字體是 Helvetica 字體的升級(jí)版本，擁有更多的字重，更易于不同場(chǎng)合的應(yīng)用。字形則相對(duì)偏胖，筆畫(huà)更清晰，而且小字號(hào)的情況下可讀性也很高。

Arial：Arial 是一套隨同多套微軟應(yīng)用軟件所分發(fā)，無(wú)襯線。該字體比例及字重和 Helvetica 極相似，其實(shí)是 Monotype Grotesque 系列的衍變。在字體及字距上都做了一些細(xì)微的調(diào)整和變動(dòng)，以增加它在電腦屏幕的不同分辨率的可讀性。

DIN：字形瘦長(zhǎng)，無(wú)襯線，適合顯示比較長(zhǎng)的數(shù)字，但是小字號(hào)的情況下識(shí)別度較低。DIN 字體在德國(guó)有著悠久歷史，是交通標(biāo)志、路牌、門牌和車牌的標(biāo)準(zhǔn)字體。雖然曾經(jīng)是德國(guó)納粹使用的字體，但是經(jīng)過(guò)設(shè)計(jì)和重新升級(jí)。DIN 在雜志、海報(bào)以及其他各種設(shè)計(jì)領(lǐng)域都被廣泛地使用。

Helvetica Neue、Arial、DIN 數(shù)字對(duì)比：

3. 字重

「字重」是同一種字體的不同字形粗細(xì)，即字體重量。字重的劃分根據(jù)不同字體廠商各有不同，不同的字重稱呼也可以不一樣，常見(jiàn)的劃分如下：

在排版中，一種字體會(huì)在標(biāo)題、正文、說(shuō)明注釋等不同內(nèi)容下使用，單一的字重不能很好適應(yīng)排版需求，于是衍生出了同一個(gè)字體的不同字重。

4. 字號(hào)

「字號(hào)」是字體的高度，不同平臺(tái)字號(hào)規(guī)范不同。

在界面設(shè)計(jì)中，文字字號(hào)決定了信息層次和權(quán)重。首先要設(shè)定基準(zhǔn)字號(hào)（最小字號(hào)），然后可依據(jù)一定規(guī)律設(shè)定導(dǎo)航、標(biāo)題等稍大字號(hào)。一般網(wǎng)頁(yè)基準(zhǔn)字號(hào)有12px、14px、16px等。

字號(hào)也受閱讀距離影響，眼睛到屏幕距離40~70cm，為較適合的閱讀距離。

Ant Design 定義的電腦顯示器閱讀距離（50 cm）從原先的12上升至14，以保證在多數(shù)常用顯示器上的用戶閱讀效率最佳。

5. 行高

「行高」可以理解為一個(gè)包裹在字體外面的無(wú)形的盒子。字號(hào)和行高決定著一套字體系統(tǒng)的動(dòng)態(tài)與秩序之美。

西文：西文基本行高是字號(hào)的1.2倍左右，字體有上伸部（ascender）和下延部（descender）可來(lái)創(chuàng)造行間空隙。

中文：中文因?yàn)樽址軐?shí)且高度一致，所以一般行高需要更大，根據(jù)不同人群的特點(diǎn)（兒童、年輕人、老年人）以及使用環(huán)境，可達(dá)到1.5~2倍甚至更大。

Ant Design 受到5音階以及自然律的啟發(fā)定義了10個(gè)不同字號(hào)以及與之相對(duì)應(yīng)的行高。

6. 字間距

「字間距」是指一組字母之間相互間隔的距離，受字偶距和字體影響。

字偶距：是指兩個(gè)字母（或其他字符，比如數(shù)字，標(biāo)點(diǎn)符號(hào)等）之間的空白。不同的字母有不同的外形，所以字體使用相等的字間距是不協(xié)調(diào)的。所以需要調(diào)整字偶距來(lái)提升可讀性。

按字間距可分類為：比例字體（Proportional）和等寬字體（Monospaced）。

比例字體：根據(jù)字符外形特點(diǎn)設(shè)置不同字距的字體，這種字體外形協(xié)調(diào)，可讀性好。

等寬字體：每個(gè)字符設(shè)置相同字距的字體，其優(yōu)點(diǎn)是可以很好的控制排版對(duì)齊。

7. 行間距

行間距（line spacing / leading）：行與行之間的距離，作為一段文本中的留白，行間距讓字與字之間有了可呼吸的空間，行間距對(duì)文章的易讀性有很大影響。

排版推薦使用行間距1.2~2倍。

如何設(shè)定行間距，如何規(guī)范行間距

行間距由行高決定，為了確保可讀性增加行間距，就需要增加行高。舉個(gè)例子：字號(hào)12，行高設(shè)定20，那么行間距=「（行高-字號(hào)）÷2」×2，除2又乘2，我就簡(jiǎn)單的簡(jiǎn)化成行間距 = 行高 – 字號(hào)，那么行間距就是20-12=8，并且可以將這個(gè)數(shù)值固定下來(lái)，重復(fù)使用。

注：至于為什么是20，因?yàn)樽畛跻粋€(gè)字節(jié)用8個(gè)二進(jìn)制位來(lái)表示，所以現(xiàn)在的很多網(wǎng)頁(yè)設(shè)計(jì)中常用到8。12+8=20，參考 Ant Design，網(wǎng)上有很多設(shè)計(jì)師總結(jié)的行間距計(jì)算方法，對(duì)于一個(gè)數(shù)學(xué)不好的我來(lái)說(shuō)，參考已有總結(jié)和經(jīng)驗(yàn)得出的數(shù)值，固定這個(gè)數(shù)值重復(fù)使用，這樣最簡(jiǎn)單。

8. 段間距

段間距（paragraphs spacing）：段落與段落之間的距離，可保持頁(yè)面節(jié)奏，與字體、行高相互關(guān)聯(lián)。為保證文章易讀性，正文段間距，可以簡(jiǎn)單地取一個(gè)空行（也就是一個(gè)行高），這是比較常規(guī)也比較合適的做法。舉個(gè)例子：字號(hào)12，行高設(shè)定20，段間距 = 行高 + 行間距。

小結(jié)

要設(shè)置「有節(jié)奏感的文本內(nèi)容」就要遵循這些規(guī)則：段間距大于行高，行高大于行間距，行間距大于字間距。

字體選用基礎(chǔ)原則

1. 網(wǎng)頁(yè)文字顯示方式

網(wǎng)頁(yè)設(shè)計(jì)內(nèi)容一般都是通過(guò)電腦各種瀏覽器來(lái)承載顯示的，瀏覽器顯示字體是直接讀取用戶操作系統(tǒng)里的字體。

2. 字體選用原則

字體是界面設(shè)計(jì)中最基本的構(gòu)成之一，科學(xué)的字體系統(tǒng)：始終保證信息具有優(yōu)秀的易讀可讀性，提升用戶的閱讀體驗(yàn)及工作效率。

• 原則一：字體優(yōu)先使用各操作系統(tǒng)默認(rèn)的字體。
• 原則二：有版權(quán)、筆畫(huà)嚴(yán)謹(jǐn)、清晰可讀、經(jīng)典。

3. 操作系統(tǒng)

下圖數(shù)據(jù)來(lái)源：世界互聯(lián)網(wǎng)市場(chǎng)份額統(tǒng)計(jì)網(wǎng)站 Net MarketShare。

△ 操作系統(tǒng)市場(chǎng)占有率 TOP10

各操作系統(tǒng)默認(rèn)字體：

4. 瀏覽器

電腦瀏覽器直接讀取用戶操作系統(tǒng)里的字體，不同瀏覽器對(duì)文字的渲染方式不同，因此了解市場(chǎng)瀏覽器使用情況很有必要。

下圖數(shù)據(jù)來(lái)源：世界互聯(lián)網(wǎng)市場(chǎng)份額統(tǒng)計(jì)網(wǎng)站 Net MarketShare

5. 字體版權(quán)

除了操作系統(tǒng)默認(rèn)字體，其次需要優(yōu)先選擇使用的就是已購(gòu)版權(quán)字體，如果沒(méi)有已購(gòu)買的字體，可考慮一些免費(fèi)字體，非免費(fèi)字體使用時(shí)需謹(jǐn)慎。

△ 公司常購(gòu)版權(quán)字體

文字規(guī)范

1. 字體規(guī)范

字體使用三原則

體系化：在同一個(gè)系統(tǒng)UI設(shè)計(jì)中先建立體系化的設(shè)計(jì)思路，對(duì)主、次、輔助、標(biāo)題、展示等類別的字體做統(tǒng)一的規(guī)劃，再落地到具體場(chǎng)景中進(jìn)行微調(diào)。建立體系化的設(shè)計(jì)思路有助于強(qiáng)化橫向字體落地的一致性，提高字體應(yīng)用的性價(jià)比，減少不必要的樣式浪費(fèi)。

重復(fù)：重復(fù)設(shè)計(jì)中出現(xiàn)的一個(gè)或多個(gè)內(nèi)容。任何事情都可以重復(fù)。字體、字重字號(hào)、顏色、一條線、各種形狀（如圓形、正方形或三角形）等。字體使用最好不要超過(guò)3種，一般同一個(gè)系統(tǒng)UI設(shè)計(jì)內(nèi)容的字體數(shù)量建議2種即可，中文一種、英文數(shù)字一種。且字體樣式上也遵循重復(fù)原則，避免毫無(wú)意義的使用大量字號(hào)、顏色、字重、行高等。

韻律：在需要拉開(kāi)差距的時(shí)候可以嘗試選擇對(duì)比大的字體字號(hào)，令字號(hào)之間產(chǎn)生一種微妙的韻律感。為保證良好的閱讀體驗(yàn)，每行保持適當(dāng)?shù)淖址麛?shù)量。每行上擁有適當(dāng)?shù)淖址麛?shù)量是文本可讀性的關(guān)鍵。如果每行文字太短，視線必須反復(fù)折回來(lái)，打破讀者的節(jié)奏。如果一行文字太長(zhǎng)，用戶的眼睛將很難專注于文本。英文無(wú)特殊要求避免使用全大寫(xiě)字符，因?yàn)闀?huì)大大延緩用戶掃描和閱讀的速度。

現(xiàn)有產(chǎn)品字體統(tǒng)計(jì)

字體規(guī)范

綜合考慮不同操作系統(tǒng)選用最佳字體體驗(yàn)。

代碼聲明：

• Font-family：Helvetica Neue, Helvetica, Arial, 「蘋(píng)方-簡(jiǎn)」, 「Microsoft YaHei」, 「微軟雅黑」, sans-serif。
• 英文字體：首先查找Helvetica Neue（Mac），然后查找Helvetica（Win），都找不到就用Arial（Mac&Win）；若是以上三者都缺失，則使用當(dāng)前默認(rèn)的sans-serif字體（操作系統(tǒng)或?yàn)g覽器指定）；
• 中文字體：選用平臺(tái)默認(rèn)中文字體 蘋(píng)方-簡(jiǎn)（Mac），微軟雅黑（Win）。

2. 字重規(guī)范

一般情況下會(huì)選用「一粗一細(xì)」兩種字重。

粗體：在視覺(jué)面積上較重，筆畫(huà)加粗，字腔（筆畫(huà)間空間）小，突出顯示，產(chǎn)生強(qiáng)調(diào)作用。常用于標(biāo)題和標(biāo)語(yǔ)。

細(xì)體：在視覺(jué)面積上較輕，筆畫(huà)輕細(xì)，字腔（筆畫(huà)間空間）大，結(jié)構(gòu)疏朗清透，閱讀時(shí)不會(huì)讓讀者產(chǎn)生壓迫感。常用于正文和說(shuō)明。

中文、英文推薦使用字重：

3. 字號(hào)規(guī)范

現(xiàn)有產(chǎn)品字號(hào)統(tǒng)計(jì)

字號(hào)規(guī)范

4. 行高規(guī)范

參考：Ant Design 受到5音階以及自然規(guī)律啟發(fā)定義了10個(gè)不同字號(hào)以及與之相對(duì)應(yīng)的行高。

5. 字間距規(guī)范

使用比例字體，根據(jù)字符外形特點(diǎn)設(shè)置不同字距的字體，這種字體外形協(xié)調(diào)，可讀性好。

6. 行間距規(guī)范

顏色規(guī)范

1. Ant Design 兩大色彩體系

Ant Design 兩大色彩體系：系統(tǒng)級(jí)、產(chǎn)品級(jí)。

系統(tǒng)級(jí)色彩體系

系統(tǒng)級(jí)色彩體系主要定義了螞蟻中臺(tái)設(shè)計(jì)中的基礎(chǔ)色板、中性色板和數(shù)據(jù)可視化色板。

• 基礎(chǔ)色板：12個(gè)主色（薄暮/火山/日暮/金盞花/日出/青檸/極光綠/明青/拂曉藍(lán)/極客藍(lán)/醬紫/法式洋紅）以及衍生色共120個(gè)顏色。
• 中性色板：黑、白、灰，從白到黑共10個(gè)顏色。
• 數(shù)據(jù)可視化色板：敬請(qǐng)期待。

產(chǎn)品級(jí)色彩體系

產(chǎn)品級(jí)色彩體系則是在具體設(shè)計(jì)過(guò)程中，基于系統(tǒng)色彩進(jìn)一步定義符合產(chǎn)品調(diào)性以及功能訴求的顏色。

• 品牌色應(yīng)用：品牌色取自基礎(chǔ)色板的藍(lán)色#1890FF，應(yīng)用場(chǎng)景包括：關(guān)鍵行動(dòng)點(diǎn)，操作狀態(tài)、重要信息高亮，圖形化等場(chǎng)景。
• 中性色：中性色主要應(yīng)用在文字部分，此外背景、邊框、分割線等場(chǎng)景中也非常常見(jiàn)。
• 功能色：功能色代表著明確的信息及狀態(tài)，如成功、出錯(cuò)、失敗、提醒、鏈接等。

2. 系統(tǒng)級(jí) 中性色

中性色包含了黑、白、灰。在網(wǎng)頁(yè)設(shè)計(jì)中被大量使用，合理的選擇中性色能夠令頁(yè)面信息具備良好的主次關(guān)系，助力閱讀體驗(yàn)。中性色板一共包含了從白到黑的10個(gè)顏色。

3. 產(chǎn)品級(jí) 中性色

Ant Design 的中性色主要應(yīng)用在文字、背景、邊框、分割線等場(chǎng)景中。產(chǎn)品中性色的定義需要考慮深色淺色背景的差異，同時(shí)結(jié)合 WCAG 2.0標(biāo)準(zhǔn)。中性色在落地的時(shí)候是按照「透明度」的方式實(shí)現(xiàn)。

VIP大數(shù)據(jù)用戶體驗(yàn)部 的中性色也是主要應(yīng)用在界面的文字、背景、邊框、分割線等場(chǎng)景中?？紤]到深淺色背景的差異，中性色根據(jù)設(shè)計(jì)需求在落地的時(shí)候可按照色值和透明度兩種方式實(shí)現(xiàn)，兩種方式優(yōu)先使用色值方式，盡量避免兩者混搭使用。

4. 產(chǎn)品級(jí) 功能色

功能色代表了明確的信息以及狀態(tài)，比如成功、警告、失敗、提醒、鏈接等。

功能色的選取需要遵守用戶對(duì)色彩的基本認(rèn)知。在一套產(chǎn)品體系下，功能色盡量保持一致，不要有過(guò)多的自定義干擾用戶的認(rèn)知體驗(yàn)。

文案

文案內(nèi)容來(lái)源于 Ant Design，一文一字之間可研究琢磨的空間還很大。

分享一個(gè)感觸很深的例子，里面有一個(gè)專業(yè)用語(yǔ)「閾yù值」和「閥fá值」，這兩個(gè)字一開(kāi)始我看了很久才看出來(lái)區(qū)別，查資料了解到，其實(shí)「閥fá值」在專業(yè)行業(yè)里是一個(gè)錯(cuò)別字，是一個(gè)錯(cuò)誤的用詞，其正確用法是「閾值」是所屬行業(yè)認(rèn)可通用詞?！搁搚ù值」又叫臨界值，是指一個(gè)效應(yīng)能夠產(chǎn)生的值或最高值。

所以精準(zhǔn)、清晰的語(yǔ)言會(huì)更容易讓用戶理解，合適的語(yǔ)氣更容易讓用戶建立信任感。因此在界面設(shè)計(jì)時(shí)，在使用和定義文案時(shí)要注意以下幾點(diǎn)：

• 從用戶角度出發(fā)；
• 表述一致；
• 重要的信息放在顯著位置；
• 專業(yè)、精準(zhǔn)、完整；
• 精簡(jiǎn)、友好、正面。

在有限的空間內(nèi)將重要的信息放在最前面，讓用戶第一眼看到最重要的內(nèi)容。（或通過(guò)高亮、留白等方式突出重要信息）。

結(jié)語(yǔ)

因?yàn)橛布浖恢痹谧兓?，設(shè)計(jì)規(guī)范和內(nèi)容也要定時(shí)更新，規(guī)范是為了在繁多復(fù)雜業(yè)務(wù)中尋求一種平衡，幫助各團(tuán)隊(duì)更的完成任務(wù)，有些內(nèi)容適合強(qiáng)制規(guī)定，有些內(nèi)容適合規(guī)范一個(gè)范圍，有些內(nèi)容適合制定一種規(guī)律方法……當(dāng)出現(xiàn)特殊情況時(shí)需要重新審視和不斷完善靈活使用。

藍(lán)藍(lán)設(shè)計(jì)( m.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn)、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。