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

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

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

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

一、字體設(shè)計的價值

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

1. 信息呈現(xiàn)

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

2. 情感表達

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

3. 個性塑造

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

二、字體的選用

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

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

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

三、中筆墨體的選用

1. 字體的對比

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

2. 方正蘭亭黑的上風

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

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

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

FF Din 和 Helvetica Neue 的對比

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

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

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

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

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

1. 線上字體的選用

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

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

2. 字號規(guī)范

字號的原理

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

不同的操作體系有本身特有的 UI 規(guī)格，但是在團體上，不管是 iOS 照舊安卓體系都采用了以2的倍數(shù)的柵格體系。在移動端，不管是 UI 的尺寸照舊間距，都應該為4的倍數(shù)。因此，我們規(guī)定在移動端，字號也是以2為基本進制單位，將字號大小從最小的20pt以4的倍數(shù)連續(xù)到40px。

同時針對一些特別的大金額數(shù)字的展示，分外以16作為進制單位規(guī)定了從64px到112px的規(guī)范字號。

字號的使用

根據(jù)定下的字號，我們將付出寶 app 內(nèi)部的信息分為7個層級，其中最高的為緊張金額、數(shù)字的表現(xiàn)，其字號區(qū)間為64~112px（在2x圖設(shè)計模式下），最低為輔助說明信息，其字號為20px。詳細的建議使用體例如圖：

△ * 星號部分的字號僅限于特定場合的使用

參考案例：

六、行高規(guī)范

1. 行高的原理

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

2. 行高的規(guī)范

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

七、字重規(guī)范

1. 字重的規(guī)則

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

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