如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
文字是界面設計中最基本的構成之一，如何定義網頁設計中的文字系統？可大體分為三步：
-
系統全面地了解文字的基礎知識、顯示方式、影響因素及當前網頁設計中適合的文字系統；
-
梳理出自己團隊所有產品文字使用情況；
-
綜合第1步、第2步總結出適合團隊業務的文字系統。
字符是指計算機中使用的字母、數字、標點符號等等。
計算機最初發明出來是用來解決數字計算問題的。
后來發現，計算機還可以做更多的事，例如文本處理。其實計算機挺笨的，它讀到的所有字符都是由1和0組成的字符串，因為計算機電路只有兩種狀態，「開」和「閉」，對應「1」和「0」。計算機也只可以直接存儲和處理二進制數字。
「二進制」是數字世界里的基本規則。
下面這些不同格式的文件，在本質上都是一串由1和0組成的代碼，要了解這些文件首先要了解二進制。人有十根手指頭，但計算機電路只有「開」和「閉」兩種狀態，所以滿十進一位的計數方式更適合人類計算，而滿二進一的二進制更適合計算機。計算機只需要1和0這兩個數字就可以傳遞一切信息。
△ MP4
△ MP3
△ JPG
△ TXT
△ AVI
以圖像為例，我們用電腦或手機看到的圖像都是在某個角落里存儲著下面這樣的一串數據。開頭的16位翻譯過來就是 BMP文件開始的標識。
BMP文件標識后面的數字就是圖像的各項基本信息。
△ 圖像的各項基本信息
△ 顏色深度
最開始的24位，都是1，像素顯示為紅、綠、藍三種顏色，相加后顯示為白色。
接下來的24位，前8位是1，后面都是0，像素顯示為紅色。
再后面24位的前16位都是1，最后8位為0，像素顯示紅、綠兩色，相加后顯示為黃色。
根據這樣的規則整個55×55的格子鋪滿顏色就得到一張完整的圖片。所以一個 BMP圖像文件中的1和0就在逐個記錄圖像中每一個像素點的顏色。
△ 二進制圖片生成方式
△ 色光三原色和顏料三原色區別
下面所有文件的顯示都和圖像顯示例子一樣，文件中的1和0按照人們事先設計好的規則排列好，只需要找到正確的打開方式按照特定的規則來解讀這些數據，我們就可以獲得其中的信息。我們怎么才能知道某一個文件的1和0究竟是按什么規則排列的？我們又要用怎樣的方式來解讀？這就用到了擴展名，在文件的名字后面加幾個特定的字符，就可以幫助系統辨別出文件的類型，從而提示電腦去按照某種特定的規則來正確解讀其中的信息。
△ MP4格式擴展名
△ MP3格式擴展名
△ JPG格式擴展名
△ TXT格式擴展名
△ AVI格式擴展名
更多其他文件拓展名：
為了在計算機上顯示字符，必須將字符轉換成二進制數字。所以就有了統一、標準字符轉換規則，即字符編碼。字符編碼是給所有的漢字定一個的數字編號，并用1和0來表示這個數字編號。
文字的一個字符對應一個編碼（碼點），而編碼對應字符集里的一個「字」，字符通過字符集與「字」相連。像圖中所示Unicode、GB 2312、Shift_JIS 都是字符集，其主要作用是為每一個「字」分配一個編碼。
△ 文本編碼流程
字符集里的每一個編碼對應的是一個「字」而不是「字形」，也就是一個「字」在不同的地區或標準中可能有不同的「字形」，但字符集中只能對其分配一個編碼（除非相差過大，比如簡化字），要顯示其不同的「字形」要通過使用為不同地區或標準設計的字體來實現。
△ 字異形（左簡體中文，右日文）
ASCII
ASCII（American Standard Code for Information Interchange，美國信息交換標準代碼）出現在上個世紀60年代的美國，ASCII 一共定義了128個字符，包括英文字母 A-Z，a-z，0-9，一些標點符號和控制符號。ASCII 采用的編碼模型是簡單字符集，在英語系國家里 ASCII 標準很完美。但是世界上有好幾千種語言，其他語言系的國家想使用計算機，ASCII 就遠遠不夠了。所以編碼進入了混亂的時代。
△ ASCII編碼
混亂時代
計算機的一個字節是8位，可以表示256個字符。ASCII 使用了7位，所以人們決定把剩余的1位也利用起來。人們對于 ASCII 已規定好的128個字符沒有異議，但是不同語系的人對于其他字符的需求不一樣，所以對于剩下的128個字符的擴展千奇百怪。而且在亞洲語言系統中有更多的字符。于是就又產生了各種多字節表示一個字符的方法，每個語系都有自己特定的編碼頁（code pages），這就使整個局面更加混亂不堪。這時 Unicode 出現了。
Unicode
Unicode 就是給計算機中所有的字符各自分配一個代號。Unicode 可以認為是字符的編號，它為每種語言中的每個字符設定了統一并且唯一的二進制編碼，Unicode 字符集和編碼方式解決了跨語言、跨平臺的交流問題。但在 Unicode 里每一個字符都是用4個字節來編碼，原本英文字母僅需1個字節編碼，中文需2~3個字節編碼即可，這對于存儲或傳輸資源而言是很不劃算的。
UTF-8
UTF-8 基于 Unicode 編碼的一種節約字節的編碼，是一種可變長度字符編碼方式。在UTF-8編碼中，英文字母是一個字節，中文（非生僻字）是2~3個字節。可以認為， UTF-8 是對 Unicode 的一種壓縮算法。UTF-8 等編碼方式有效的節約了存儲空間和傳輸帶寬，因而受到了極大的推廣應用。并且 UTF-8 兼容 ASCII 字符集。
UTF：Unicode Transformation Format
△ 中文編碼類型
「文字」是信息交流的工具，可讀性、易讀性至關重要。在網頁設計中文字使用需要考慮幾個要素：首先考慮字體，其次是字重、字號、行高、字間距、行間距、段間距等。
△ 字體、字重
△ 字間距、字號、行高
△ 行間距、段間距
「字體」是文字的外在形式特征，不同的字體有不同的性格。
字體種類
綜合中文、英文都適用的廣義分類。
襯線、無襯線
△ 襯線和無襯線差異1
△ 襯線和無襯線差異2
字體 – 中文
字體構成：
△ 筆畫
中宮，是指等分成九個小方格最中間的那一格。
△ 中宮
△ 中宮和字體關系
△ 中宮緊湊、中宮松散
間架結構，漢字種類眾多，筆劃不等，空間排布極為重要。字體的間架結構可分為兩類：單體字、合體字。
△ 單體字 間架結構
△ 合體字 間架結構
漢字字形眾多，有些字形會產生視覺大小變化，頂格、縮格、出格就是針對不同結構的字體筆畫特征進行微調，讓他們看起來更加均衡、等大、視覺更完整。
△ 調整前
△ 調整后
字形調整實例：
襯線、無襯線字形演變：
△ 襯線 字形演變
△ 無襯線 字形演變
字體對比：
微軟雅黑、方正蘭亭黑簡體、思源黑體、蘋方-簡，筆畫寬度均勻，橫平豎直。同一字號，微軟雅黑最粗，小字號時閱讀會較為吃力。方正蘭亭黑從微軟雅黑派衍生出來，可以更好地適應其他應用場合。
黑體、華文黑體、冬青黑體筆畫末端寬度不同。
字體 – 英文
「字谷」概念來自西文字母設計，字谷指字母中部分或完全封閉的空間，即字母當中留白部分。
英文的字體結構是由4條平行線組成，有時候是5條，但是一般大寫線會忽略?！富€」在西文中是標準，單個字母的所有立腳點都是在這條線上（除了 g、j、p、y）。英文文字結構多種多樣，4條平行線的位置也會發生改變。
升部：上緣線和主線之間的內容。
降部：下緣線和基線之間的內容。
字體對比：Helvetica Neue、Arial、DIN
Helvetica Neue：中性，無襯線，現代主義風格字體。字體末端嚴格保持橫平豎直，性格嚴謹、保守，沒有任何的修飾，適合不同分辨率的顯示器。該字體是 Helvetica 字體的升級版本，擁有更多的字重，更易于不同場合的應用。字形則相對偏胖，筆畫更清晰，而且小字號的情況下可讀性也很高。
Arial：Arial 是一套隨同多套微軟應用軟件所分發，無襯線。該字體比例及字重和 Helvetica 極相似，其實是 Monotype Grotesque 系列的衍變。在字體及字距上都做了一些細微的調整和變動，以增加它在電腦屏幕的不同分辨率的可讀性。
DIN：字形瘦長，無襯線，適合顯示比較長的數字，但是小字號的情況下識別度較低。DIN 字體在德國有著悠久歷史，是交通標志、路牌、門牌和車牌的標準字體。雖然曾經是德國納粹使用的字體，但是經過設計和重新升級。DIN 在雜志、海報以及其他各種設計領域都被廣泛地使用。
Helvetica Neue、Arial、DIN 數字對比：
「字重」是同一種字體的不同字形粗細，即字體重量。字重的劃分根據不同字體廠商各有不同，不同的字重稱呼也可以不一樣，常見的劃分如下：
在排版中，一種字體會在標題、正文、說明注釋等不同內容下使用，單一的字重不能很好適應排版需求，于是衍生出了同一個字體的不同字重。
「字號」是字體的高度，不同平臺字號規范不同。
在界面設計中，文字字號決定了信息層次和權重。首先要設定基準字號（最小字號），然后可依據一定規律設定導航、標題等稍大字號。一般網頁基準字號有12px、14px、16px等。
字號也受閱讀距離影響，眼睛到屏幕距離40~70cm，為較適合的閱讀距離。
Ant Design 定義的電腦顯示器閱讀距離（50 cm）從原先的12上升至14，以保證在多數常用顯示器上的用戶閱讀效率最佳。
「行高」可以理解為一個包裹在字體外面的無形的盒子。字號和行高決定著一套字體系統的動態與秩序之美。
西文：西文基本行高是字號的1.2倍左右，字體有上伸部（ascender）和下延部（descender）可來創造行間空隙。
中文：中文因為字符密實且高度一致，所以一般行高需要更大，根據不同人群的特點（兒童、年輕人、老年人）以及使用環境，可達到1.5~2倍甚至更大。
Ant Design 受到5音階以及自然律的啟發定義了10個不同字號以及與之相對應的行高。
「字間距」是指一組字母之間相互間隔的距離，受字偶距和字體影響。
字偶距：是指兩個字母（或其他字符，比如數字，標點符號等）之間的空白。不同的字母有不同的外形，所以字體使用相等的字間距是不協調的。所以需要調整字偶距來提升可讀性。
按字間距可分類為：比例字體（Proportional）和等寬字體（Monospaced）。
比例字體：根據字符外形特點設置不同字距的字體，這種字體外形協調，可讀性好。
等寬字體：每個字符設置相同字距的字體，其優點是可以很好的控制排版對齊。
行間距（line spacing / leading）：行與行之間的距離，作為一段文本中的留白，行間距讓字與字之間有了可呼吸的空間，行間距對文章的易讀性有很大影響。
排版推薦使用行間距1.2~2倍。
如何設定行間距，如何規范行間距
行間距由行高決定，為了確?？勺x性增加行間距，就需要增加行高。舉個例子：字號12，行高設定20，那么行間距=「（行高-字號）÷2」×2，除2又乘2，我就簡單的簡化成行間距 = 行高 – 字號，那么行間距就是20-12=8，并且可以將這個數值固定下來，重復使用。
注：至于為什么是20，因為最初一個字節用8個二進制位來表示，所以現在的很多網頁設計中常用到8。12+8=20，參考 Ant Design，網上有很多設計師總結的行間距計算方法，對于一個數學不好的我來說，參考已有總結和經驗得出的數值，固定這個數值重復使用，這樣最簡單。
段間距（paragraphs spacing）：段落與段落之間的距離，可保持頁面節奏，與字體、行高相互關聯。為保證文章易讀性，正文段間距，可以簡單地取一個空行（也就是一個行高），這是比較常規也比較合適的做法。舉個例子：字號12，行高設定20，段間距 = 行高 + 行間距。
要設置「有節奏感的文本內容」就要遵循這些規則：段間距大于行高，行高大于行間距，行間距大于字間距。
網頁設計內容一般都是通過電腦各種瀏覽器來承載顯示的，瀏覽器顯示字體是直接讀取用戶操作系統里的字體。
字體是界面設計中最基本的構成之一，科學的字體系統：始終保證信息具有優秀的易讀可讀性，提升用戶的閱讀體驗及工作效率。
-
原則一：字體優先使用各操作系統默認的字體。
-
原則二：有版權、筆畫嚴謹、清晰可讀、經典。
下圖數據來源：世界互聯網市場份額統計網站 Net MarketShare。
△ 操作系統市場占有率 TOP10
各操作系統默認字體：
電腦瀏覽器直接讀取用戶操作系統里的字體，不同瀏覽器對文字的渲染方式不同，因此了解市場瀏覽器使用情況很有必要。
下圖數據來源：世界互聯網市場份額統計網站 Net MarketShare
除了操作系統默認字體，其次需要優先選擇使用的就是已購版權字體，如果沒有已購買的字體，可考慮一些免費字體，非免費字體使用時需謹慎。
△ 公司常購版權字體
字體使用三原則
體系化：在同一個系統UI設計中先建立體系化的設計思路，對主、次、輔助、標題、展示等類別的字體做統一的規劃，再落地到具體場景中進行微調。建立體系化的設計思路有助于強化橫向字體落地的一致性，提高字體應用的性價比，減少不必要的樣式浪費。
重復：重復設計中出現的一個或多個內容。任何事情都可以重復。字體、字重字號、顏色、一條線、各種形狀（如圓形、正方形或三角形）等。字體使用最好不要超過3種，一般同一個系統UI設計內容的字體數量建議2種即可，中文一種、英文數字一種。且字體樣式上也遵循重復原則，避免毫無意義的使用大量字號、顏色、字重、行高等。
韻律：在需要拉開差距的時候可以嘗試選擇對比大的字體字號，令字號之間產生一種微妙的韻律感。為保證良好的閱讀體驗，每行保持適當的字符數量。每行上擁有適當的字符數量是文本可讀性的關鍵。如果每行文字太短，視線必須反復折回來，打破讀者的節奏。如果一行文字太長，用戶的眼睛將很難專注于文本。英文無特殊要求避免使用全大寫字符，因為會大大延緩用戶掃描和閱讀的速度。
現有產品字體統計
字體規范
綜合考慮不同操作系統選用最佳字體體驗。
代碼聲明：
-
Font-family：Helvetica Neue, Helvetica, Arial, 「蘋方-簡」, 「Microsoft YaHei」, 「微軟雅黑」, sans-serif。
-
英文字體：首先查找Helvetica Neue（Mac），然后查找Helvetica（Win），都找不到就用Arial（Mac&Win）；若是以上三者都缺失，則使用當前默認的sans-serif字體（操作系統或瀏覽器指定）；
-
中文字體：選用平臺默認中文字體 蘋方-簡（Mac），微軟雅黑（Win）。
一般情況下會選用「一粗一細」兩種字重。
粗體：在視覺面積上較重，筆畫加粗，字腔（筆畫間空間）小，突出顯示，產生強調作用。常用于標題和標語。
細體：在視覺面積上較輕，筆畫輕細，字腔（筆畫間空間）大，結構疏朗清透，閱讀時不會讓讀者產生壓迫感。常用于正文和說明。
中文、英文推薦使用字重：
現有產品字號統計
字號規范
參考：Ant Design 受到5音階以及自然規律啟發定義了10個不同字號以及與之相對應的行高。
使用比例字體，根據字符外形特點設置不同字距的字體，這種字體外形協調，可讀性好。
Ant Design 兩大色彩體系：系統級、產品級。
系統級色彩體系
系統級色彩體系主要定義了螞蟻中臺設計中的基礎色板、中性色板和數據可視化色板。
-
基礎色板：12個主色（薄暮/火山/日暮/金盞花/日出/青檸/極光綠/明青/拂曉藍/極客藍/醬紫/法式洋紅）以及衍生色共120個顏色。
-
中性色板：黑、白、灰，從白到黑共10個顏色。
-
數據可視化色板：敬請期待。
產品級色彩體系
產品級色彩體系則是在具體設計過程中，基于系統色彩進一步定義符合產品調性以及功能訴求的顏色。
-
品牌色應用：品牌色取自基礎色板的藍色#1890FF，應用場景包括：關鍵行動點，操作狀態、重要信息高亮，圖形化等場景。
-
中性色：中性色主要應用在文字部分，此外背景、邊框、分割線等場景中也非常常見。
-
功能色：功能色代表著明確的信息及狀態，如成功、出錯、失敗、提醒、鏈接等。
中性色包含了黑、白、灰。在網頁設計中被大量使用，合理的選擇中性色能夠令頁面信息具備良好的主次關系，助力閱讀體驗。中性色板一共包含了從白到黑的10個顏色。
Ant Design 的中性色主要應用在文字、背景、邊框、分割線等場景中。產品中性色的定義需要考慮深色淺色背景的差異，同時結合 WCAG 2.0標準。中性色在落地的時候是按照「透明度」的方式實現。
VIP大數據用戶體驗部 的中性色也是主要應用在界面的文字、背景、邊框、分割線等場景中?？紤]到深淺色背景的差異，中性色根據設計需求在落地的時候可按照色值和透明度兩種方式實現，兩種方式優先使用色值方式，盡量避免兩者混搭使用。
功能色代表了明確的信息以及狀態，比如成功、警告、失敗、提醒、鏈接等。
功能色的選取需要遵守用戶對色彩的基本認知。在一套產品體系下，功能色盡量保持一致，不要有過多的自定義干擾用戶的認知體驗。
文案內容來源于 Ant Design，一文一字之間可研究琢磨的空間還很大。
分享一個感觸很深的例子，里面有一個專業用語「閾yù值」和「閥fá值」，這兩個字一開始我看了很久才看出來區別，查資料了解到，其實「閥fá值」在專業行業里是一個錯別字，是一個錯誤的用詞，其正確用法是「閾值」是所屬行業認可通用詞。「閾yù值」又叫臨界值，是指一個效應能夠產生的值或最高值。
所以精準、清晰的語言會更容易讓用戶理解，合適的語氣更容易讓用戶建立信任感。因此在界面設計時，在使用和定義文案時要注意以下幾點：
-
從用戶角度出發；
-
表述一致；
-
重要的信息放在顯著位置；
-
專業、精準、完整；
-
精簡、友好、正面。
在有限的空間內將重要的信息放在最前面，讓用戶第一眼看到最重要的內容。（或通過高亮、留白等方式突出重要信息）。
因為硬件軟件一直在變化，設計規范和內容也要定時更新，規范是為了在繁多復雜業務中尋求一種平衡，幫助各團隊更的完成任務，有些內容適合強制規定，有些內容適合規范一個范圍，有些內容適合制定一種規律方法……當出現特殊情況時需要重新審視和不斷完善靈活使用。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗、交互設計、 網站建設 、平面設計服務。
