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

2018/4/20 9:42:48來源：互聯(lián)網(wǎng)

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

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

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

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

1. 信息呈現(xiàn)

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

2. 情感表達(dá)

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

3. 個(gè)性塑造

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

二、字體的選用

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

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

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

三、中筆墨體的選用

1. 字體的對(duì)比

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

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

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

付出寶作為互聯(lián)網(wǎng)金融公司，致力于打造「專業(yè)、信賴，簡單」的形象。目前主流的無襯線中筆墨體中，方正蘭亭黑正直勻稱、設(shè)計(jì)嚴(yán)謹(jǐn)、易識(shí)別、筆墨線條粗細(xì)均衡，且為了適應(yīng)激烈的競爭賡續(xù)在進(jìn)化，如許字體設(shè)計(jì)更吻合這一形象。

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

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

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

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

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

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

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

1. 線上字體的選用

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

因此規(guī)定，在 iOS 體系中，中筆墨體使用蘋方，英筆墨體使用 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ì)模式下），最低為輔助說明信息，其字號(hào)為20px。詳細(xì)的建議使用體例如圖：

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

參考案例：

六、行高規(guī)范

1. 行高的原理

參考 w3c，眼睛到屏幕的距離25cm，目前通用的做法是，西文的基本行高通常是字號(hào)的1.2倍左右，而中文由于字符密實(shí)且高度同等，沒有西文的上伸部（ascender）和下延部（descender）來創(chuàng)造行間閑暇，所以一樣平常行高必要更大，根據(jù)閱讀人群劃分（兒童、年輕人、老年人），可達(dá)到 1.5 至 2 倍甚至更大。

2. 行高的規(guī)范

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

七、字重規(guī)范

1. 字重的規(guī)則

字重是指字體筆畫的粗細(xì)，一樣平常在字體家族名后面注明的「Thin」「Light」「Regular」「Book」「Bold」「Black」「Heavy」等都是字重名稱。因?yàn)樵谝环N字體可能用在題目、段落甚至海報(bào)，單一的字重可能并不會(huì)很好的適應(yīng)這些場景，于是衍生出了統(tǒng)一個(gè)字體的不同字重。

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