UI設(shè)計(jì)規(guī)范之線上字體篇

時(shí)間：2023-09-14 21:12:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-14 21:12:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

UI設(shè)計(jì)規(guī)范之線上字體篇：

一、字體設(shè)計(jì)的價(jià)值

文字是圖像記憶的一種衍生方式，人們?yōu)榱撕?jiǎn)明地表達(dá)事情、物品、人物等情景畫(huà)面，而演變出的簡(jiǎn)明的記載方式。文字作為圖片的衍生，也是品牌形象的重要元素。而字體則是文字信息的外在表達(dá)方式，不同的字體不僅能影響排版，更會(huì)極大反應(yīng)品牌的性格。如果說(shuō)圖形和色彩是品牌的皮膚和血肉，那字體則是品牌的內(nèi)在骨骼。

1. 信息呈現(xiàn)

文字是信息最直接最清晰的表達(dá)方式，而字體則直接決定了文字信息能否正確、準(zhǔn)確地傳達(dá)，不清晰、難以辨認(rèn)的字體會(huì)極大地削弱文字的表達(dá)。

2. 情感表達(dá)

文字本質(zhì)上也是一種圖形，而字體則是這種圖形的外在形式。字體能在文字所表達(dá)的信息被理解之前，給人最直接的情感沖擊。

3. 個(gè)性塑造

不同的字體對(duì)應(yīng)著不同的個(gè)性，比如圓潤(rùn)的字體代表和藹可親，而潑墨的書(shū)法字體傳達(dá)了狂放不羈，正確的字體的選擇才能更好地配合其他元素來(lái)塑造品牌的性格。

二、字體的選用

字體是影響品牌形象的一種基本元素，只有使用合適的字體去搭配品牌圖形，才能讓品牌形象的整體效果最大化。







因此，在字體選擇上，最關(guān)鍵的就是根據(jù)由品牌特性推導(dǎo)出來(lái)的關(guān)鍵詞來(lái)找到字體的基本原則，最終我們確定了四個(gè)基本原則，即：端莊勻稱、筆畫(huà)嚴(yán)謹(jǐn)、清晰可讀、風(fēng)格現(xiàn)代。







根據(jù)字體選用的原則，符合以上特點(diǎn)的可用字體有：微軟雅黑、思源黑體、華為黑體、蘋方、方正蘭亭黑、FF DIN 和 Helvetica Neue。這些字體都是相對(duì)常見(jiàn)，而且容易獲取版權(quán)的現(xiàn)代風(fēng)格的字體。

三、中文字體的選用

1. 字體的對(duì)比

思源和冬青斜的筆畫(huà)末端會(huì)有變化，蘋方、微軟雅黑、蘭亭黑都是嚴(yán)格的橫平豎直，但在線條的寬度上有區(qū)別。微軟雅黑最粗，小字號(hào)閱讀會(huì)較為吃力。方正蘭亭黑從微軟雅黑派衍生出來(lái)，最顯著的變化是其字面字身比下調(diào)到正常的92%，縮減5%的寬度讓字形更修長(zhǎng)，更寬大的字距讓文面更寬松易讀。這些改變讓蘭亭黑得以更好地適應(yīng)其他應(yīng)用場(chǎng)合。







2. 方正蘭亭黑的優(yōu)勢(shì)

方正「蘭亭黑」是國(guó)內(nèi)第一套為屏幕設(shè)計(jì)，并由此衍生出的家族系列字體。蘭亭黑的設(shè)計(jì)彌補(bǔ)了現(xiàn)有黑體的不足，它追求字體的整體形式美，強(qiáng)調(diào)文字設(shè)計(jì)的審美性和文化性。結(jié)構(gòu)嚴(yán)謹(jǐn)、講究，禁得住仔細(xì)推敲琢磨，更注重字的「形象」；黑白調(diào)節(jié)均勻，重心一致，排列整齊；筆劃制作精良，線條剛?cè)嵯酀?jì)，富有彈性。閱讀舒適流暢，有鮮明的時(shí)代感。

支付寶作為互聯(lián)網(wǎng)金融公司，致力于打造「專業(yè)、信任，簡(jiǎn)單」的形象。目前主流的無(wú)襯線中文字體中，方正蘭亭黑端正勻稱、設(shè)計(jì)嚴(yán)謹(jǐn)、易識(shí)別、文字線條粗細(xì)均衡，且為了適應(yīng)激烈的競(jìng)爭(zhēng)不斷在進(jìn)化，這樣字體設(shè)計(jì)更符合這一形象。

四、英文和數(shù)字字體的選用

FF Din 和 Helvetica Neue 的對(duì)比

FF Din DIN 是德國(guó)標(biāo)準(zhǔn)協(xié)會(huì)，Deutsches Institut für Normung 的首字母縮寫(xiě)。起源自德國(guó)鐵路的字體，Albert-Jan Pool 于1995年設(shè)計(jì)發(fā)行的民用字體。無(wú)襯線字體，易用耐看，字形開(kāi)放，代表了德國(guó)設(shè)計(jì)。是設(shè)計(jì)師最愛(ài)的幾類字體之一。

Helvetica 是瑞士設(shè)計(jì)師馬克斯．米耶丁格設(shè)計(jì)的現(xiàn)代主義風(fēng)格字體，中性，無(wú)襯線。字體末端嚴(yán)格保持橫平豎直，性格嚴(yán)謹(jǐn)、保守，沒(méi)有任何的修飾，適合不同分辨率的顯示器。而 Helvetica Neue 則是原來(lái)字體的升級(jí)版本，擁有更多的字重，更易于不同場(chǎng)合的應(yīng)用。







DIN 的字形比較瘦長(zhǎng)，會(huì)很適合顯示比較長(zhǎng)的數(shù)字，但是小字號(hào)的情況下識(shí)別度較低。Helvetica Neue 的字形則相對(duì)偏胖，筆畫(huà)更清晰，而且小字號(hào)的情況下可讀性也很高。 考慮到支付寶作為一款全民使用的、偏金融和支付屬性的 APP，我們選擇中性的、可讀性高的 Helvetica Neue 作為英文和數(shù)字的品牌字體。







綜上所述，我們確定以方正蘭亭黑作為整個(gè)支付寶品牌的中文字體，適用于所有線下文字信息的表達(dá)和部分線上內(nèi)容的展示。同時(shí)確定以Helvetica Neue作為支付寶品牌的英文和數(shù)字字體，適用于所有線上線下英文和數(shù)字的展示。

五、線上字體規(guī)范

1. 線上字體的選用

雖然根據(jù)支付寶的品牌特性我們確認(rèn)下來(lái)以方正蘭亭黑作為品牌字體，但是在線上環(huán)境（移動(dòng)端如 iOS 和安卓系統(tǒng)）中，字體的使用會(huì)強(qiáng)烈受到系統(tǒng)的限制。

因此規(guī)定，在 iOS 系統(tǒng)中，中文字體使用蘋方，英文字體使用 San Francisco；在安卓系統(tǒng)中，中文字體使用思源黑體，英文使用 Roboto；與此同時(shí)，數(shù)字采用 Helvetica Neue 這一跨平臺(tái)的字體。







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

字號(hào)的原理

在界面設(shè)計(jì)中，文字字號(hào)的大小決定了信息的層次和權(quán)重。整齊而又層次分明的不同字號(hào)大小的排列會(huì)讓整體的設(shè)計(jì)變得更加清晰有序。

不同的操作系統(tǒng)有自己特有的 UI 規(guī)格，但是在整體上，不管是 iOS 還是安卓系統(tǒng)都采用了以2的倍數(shù)的柵格系統(tǒng)。在移動(dòng)端，不管是 UI 的尺寸還是間距，都應(yīng)該為4的倍數(shù)。因此，我們規(guī)定在移動(dòng)端，字號(hào)也是以2為基本進(jìn)制單位，將字號(hào)大小從最小的20pt以4的倍數(shù)延續(xù)到40px。

同時(shí)針對(duì)一些特殊的大金額數(shù)字的展示，特別以16作為進(jìn)制單位規(guī)定了從64px到112px的規(guī)范字號(hào)。







字號(hào)的使用

根據(jù)定下的字號(hào)，我們將支付寶 app 內(nèi)部的信息分為7個(gè)層級(jí)，其中最高的為重要金額、數(shù)字的顯示，其字號(hào)區(qū)間為64~112px（在2x圖設(shè)計(jì)模式下），最低為輔助說(shuō)明信息，其字號(hào)為20px。具體的建議使用方式如圖：







△ * 星號(hào)部分的字號(hào)僅限于特定場(chǎng)合的使用

參考案例：

六、行高規(guī)范

1. 行高的原理

參考 w3c，眼睛到屏幕的距離25cm，目前通用的做法是，西文的基本行高通常是字號(hào)的1.2倍左右，而中文因?yàn)樽址軐?shí)且高度一致，沒(méi)有西文的上伸部（ascender）和下延部（descender）來(lái)創(chuàng)造行間空隙，所以一般行高需要更大，根據(jù)閱讀人群劃分（兒童、年輕人、老年人），可達(dá)到 1.5 至 2 倍甚至更大。







2. 行高的規(guī)范

結(jié)合前面推導(dǎo)的字號(hào)和行高原理，對(duì)目前規(guī)范的每一個(gè)字體配上相應(yīng)的行高，不管是在設(shè)計(jì)時(shí)還是進(jìn)行開(kāi)發(fā)實(shí)現(xiàn)，都必須遵從這一規(guī)范。

七、字重規(guī)范

1. 字重的規(guī)則

字重是指字體筆畫(huà)的粗細(xì)，一般在字體家族名后面注明的「Thin」「Light」「Regular」「Book」「Bold」「Black」「Heavy」等都是字重名稱。由于在一種字體可能用在標(biāo)題、段落甚至海報(bào)，單一的字重可能并不會(huì)很好的適應(yīng)這些場(chǎng)景，于是衍生出了同一個(gè)字體的不同字重。

在移動(dòng)端頁(yè)面設(shè)計(jì)中，為了簡(jiǎn)化字重的選擇，統(tǒng)一整體的效果，因此指定在不同的系統(tǒng)或字體中，限制設(shè)計(jì)中的字重使用。即：在蘋方中選擇「纖細(xì)」作為輕的字重，「中粗」為重的字重；思源黑體中選擇「細(xì)體」為輕的字重，「黑體」作為重的字重；Helvetica Neue選擇「Thin」為輕的字重，「Bold」為重的字重。







2. 字重的使用

同一個(gè)字體的不同字重能傳達(dá)不同的信息權(quán)重和情緒。細(xì)的字體給人以細(xì)膩、輕快的感覺(jué)，而粗體則給人著重和嚴(yán)肅的認(rèn)知。因此適合的場(chǎng)景使用合適的字重非常重要。