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