內(nèi)部教程！超細(xì)致的付出寶設(shè)計(jì)規(guī)范之線(xiàn)上字體篇

付出寶設(shè)計(jì)規(guī)范往期回顧：

• 《內(nèi)部教程！超細(xì)致的付出寶設(shè)計(jì)規(guī)范之圖形圖案篇》
• 《內(nèi)部教程！超細(xì)致的付出寶設(shè)計(jì)規(guī)范之配色篇》

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

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

1. 信息呈現(xiàn)

筆墨是信息最直接最清晰的表達(dá)體例，而字體則直接決定了筆墨信息能否精確、正確地傳達(dá)，不清晰、難以辨認(rèn)的字領(lǐng)會(huì)極大地減弱筆墨的表達(dá)。

2. 情感表達(dá)

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

3. 個(gè)性塑造

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

二、字體的選用

字體是影響品牌形象的一種基本元素，只有使用合適的字體去搭配品牌圖形，才能讓品牌形象的團(tuán)體結(jié)果最大化。

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

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

三、中筆墨體的選用

1. 字體的對(duì)比

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

2. 方正蘭亭黑的上風(fēng)

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

付出寶作為互聯(lián)網(wǎng)金融公司，致力于打造「專(zhuān)業(yè)、信賴(lài)，簡(jiǎn)單」的形象。目前主流的無(wú)襯線(xiàn)中筆墨體中，方正蘭亭黑正直勻稱(chēng)、設(shè)計(jì)嚴(yán)謹(jǐn)、易識(shí)別、筆墨線(xiàn)條粗細(xì)均衡，且為了適應(yīng)激烈的競(jìng)爭(zhēng)賡續(xù)在進(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ú)襯線(xiàn)字體，易用耐看，字形開(kāi)放，代表了德國(guó)設(shè)計(jì)。是設(shè)計(jì)師最?lèi)?ài)的幾類(lèi)字體之一。

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

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

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

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

1. 線(xiàn)上字體的選用

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

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

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

字號(hào)的原理

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

不同的操作體系有本身特有的 UI 規(guī)格，但是在團(tuán)體上，不管是 iOS 照舊安卓體系都采用了以2的倍數(shù)的柵格體系。在移動(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ù)字的表現(xiàn)，其字號(hào)區(qū)間為64~112px（在2x圖設(shè)計(jì)模式下），最低為輔助說(shuō)明信息，其字號(hào)為20px。詳細(xì)的建議使用體例如圖：

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

參考案例：

六、行高規(guī)范

1. 行高的原理

參考 w3c，眼睛到屏幕的距離25cm，目前通用的做法是，西文的基本行高通常是字號(hào)的1.2倍左右，而中文由于字符密實(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」等都是字重名稱(chēng)。因?yàn)樵谝环N字體可能用在題目、段落甚至海報(bào)，單一的字重可能并不會(huì)很好的適應(yīng)這些場(chǎng)景，于是衍生出了統(tǒng)一個(gè)字體的不同字重。

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

2. 字重的使用

統(tǒng)一個(gè)字體的不同字重能傳達(dá)不同的信息權(quán)重和情緒。細(xì)的字體給人以精致、輕快的感覺(jué)，而粗體則給人偏重和嚴(yán)正的認(rèn)知。因此適合的場(chǎng)景使用合適的字重特別很是緊張。