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

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

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

在線下場景中的物料、機(jī)具尺寸是依據(jù)人體工程學(xué)為參考，不同位置、不同距離、不同角度下，物料類型 、版面結(jié)構(gòu)、文字層級、字號、字間距等，都影響著對使用者的信息傳遞。

一、原則

1. 動態(tài)與靜態(tài)

人在線下環(huán)境對信息內(nèi)容閱讀分為靜態(tài)與動態(tài)。當(dāng)處于不同的閱讀距離時，觀看物料的角度也會有所不同。

根據(jù)「人體工程學(xué)」及「福格行為模型」的數(shù)據(jù)：當(dāng)人從動態(tài)視距進(jìn)入到靜態(tài)視距的紅點(diǎn)位置，即人眼看清一個目標(biāo)并獲得視覺印象，平均時間是170毫秒，單個字是250毫秒。

行進(jìn)速度增加，視角會隨增加幅度減小。因此，運(yùn)動狀態(tài)下的快速閱讀要避免讓用戶產(chǎn)生「回視」或「眼跳」。

回視：人們在閱讀過程中，當(dāng)碰到不理解的內(nèi)容時，迅速且無意識地回顧前面的內(nèi)容。

眼跳：在閱讀過程中，眼睛的黃斑中心凹在從一個字移到另一個字時，其眼簾發(fā)生的0.1秒突然震顫。

在「動態(tài)與靜態(tài)」原則下，我們需要區(qū)分物料與人接收信息的狀態(tài)和時間，如「遠(yuǎn)距離＋高視角＋且多在運(yùn)動狀態(tài)下觀看的」 大型橫幅豎幅就禁止呈現(xiàn)多信息。

2. 視角與視距

靜止?fàn)顟B(tài)下，人的水平視覺焦點(diǎn)約介于 3°－10°之間。眼睛最佳轉(zhuǎn)動在水平線以上25°，以下35°左右位置。

在此視圓錐之外的影像（灰色部分）是由周邊視覺搜尋，靠余光感受到的區(qū)域，其范圍介于水平視角以上 60°、以下 70°。

以平均身高1米6的女性用戶為例，在其最佳視角下不同視距的三種物料（臺卡、海報、易拉寶）傳遞的信息范圍是不一樣。當(dāng)視距為0.5米的情況下，結(jié)合前面的「視野分布圖」，我們大約可得出其視覺盲區(qū)：地平線以上0.35米。

這三種「代表物料」是依據(jù)目前支付寶線下各行業(yè)線物料分類篩選得出，總體兩大類：固定類與移動類，其中固定類中又可細(xì)分為5類：地面類、桌面類、墻面類、落地類、懸掛類。

把所有這些物料放入十字象限中，從 「地面」往上到 「桌面 墻面 頂面 」，再看目前聚焦在：桌面類、墻面類、落地類三類物料，而這三類中最具代表的分別是：臺卡、海報、易拉寶。所以，后面的「原則&規(guī)范 」將重點(diǎn)以這三類為案例做分析。

3. 順序與節(jié)奏

從結(jié)論－功能－詳細(xì)說明「倒金字塔型」結(jié)構(gòu)，在線下場景中能短時間內(nèi)快速、有效的將資訊傳達(dá)給用戶。將資訊群組化，且依重要性程度排序，資訊更易傳遞。

以海報級別的物料為例，其版面應(yīng)具備三種訊息級別：「最高級別的大標(biāo)題——中等級別的流程圖、功能圖——低級別的使用說明 」 按序有節(jié)奏的遞減；各級別間的差異可能異常明顯，主要取決于物料種類（版面大小），某個級別可能非常巨大，而另一個級別可能極其微小。

4. 可辨與易讀

中英文字體分別是等寬字型和比例字型（文字寬度不同）。比例字型的文字有各自不同寬度，輸入時會自動調(diào)整字距。因此在編排數(shù)字（英文）字體時：

• 不允許用中文字體輸入；
• 在相同字號下，數(shù)字會比中文小，根據(jù)「易讀」原則，需調(diào)整至高度一致的視覺平衡。

5. 平衡與對比

方正蘭亭系列的字體家族至少提供了10種不同字重的字體。我們使用字體家族既可以維持平衡，又可以通過不同字重的強(qiáng)弱關(guān)系 ，產(chǎn)生對比強(qiáng)調(diào)（對比）的部分與協(xié)調(diào)（平衡）的部分共存在相同版面中，可使用粗細(xì)比例具有共通性「字體家族」。

如圖所示，越往上越有明亮、輕快、都會、摩登的感覺，越往下越呈現(xiàn)出穩(wěn)定說服力、厚重感。

設(shè)定不同的文字大小時，若困惑于該呈現(xiàn)多少差距時，可從「等比」、「等差」或「斐波那契」去思考。

這三種對比可以幫助我們?nèi)ニ伎荚摮尸F(xiàn)哪種差距的關(guān)系，當(dāng)需要使正副標(biāo)題具有明確大小差異時 ，可以采用差距最大的「等比數(shù)列」。

6. 對齊與留白

文本可以不同的對齊方式來設(shè)置：

• 左對齊：以各行的行首對齊
• 右對齊：以各行的行末對齊
• 居中對齊：使軸線位于段落寬度的中間位置

居中對齊后留下的負(fù)空間若處理不當(dāng)，易形成不連續(xù)且中斷的灰度值外觀。因此將文本設(shè)置成「兩端對齊」能產(chǎn)生整潔、幾何形的版式效果。遵循規(guī)范二的「字距」或規(guī)范七的「圖示法」均有助于可規(guī)避。

依據(jù)前述的線下字體應(yīng)用的「六大原則」，我們分別細(xì)化成：字號、字距、行距、標(biāo)點(diǎn)等的七條規(guī)范。

二、規(guī)范

1. 字號

根據(jù)「原則一」中提及的人體工程學(xué)及福格行為模型的數(shù)據(jù)，設(shè)定可參考數(shù)據(jù)如下圖。

以最常用的幾種物料舉例：

• 大標(biāo)題：字號依照文字個數(shù)不定，一行標(biāo)題不超過5個字獲取信息最佳；禁止超過9字。
• 內(nèi)文：手冊、單頁、DM 的常用字級不小于7.5-9pt；海報的常用字級不小于17-23pt；易拉寶的常用字級不小于24-28pt。

2. 字距

• 中文：當(dāng)把單字寬度設(shè)為一個 a 時，建議字間距的最大極限不要超過1／2a。
• 數(shù)字：有些數(shù)字的前后會出現(xiàn)「空洞」或「擁擠」的狀況，必須以目測方式作適度調(diào)整。
• 標(biāo)點(diǎn)：如「引號」間會有極大空白，破壞整體間隙，亦需按實(shí)際情況以目測方式縮小至
  視覺協(xié)調(diào)。

3. 行距

• 內(nèi)文的最佳行距為字號的1.5-2倍左右。
• 如果物料版面緊張、信息量特別大（如活動規(guī)則、說明等），可適當(dāng)縮小至字號的1.2-1.5倍。

4. 禁則文字符號

• 行頭禁則中包括的主要文字與符號：句號、逗號、頓號、連字符、分號、冒號、感嘆號、問號、（各種）反括號。
• 分離禁則中包括的主要文字與符號：（各種）正括號。
• 行末禁則中包括的主要文字與符號：兩倍破折號、兩倍省略號。

5. 躍動比

從字體家族中分別選取字重大且適合閱讀的方正蘭亭大黑與刊黑、細(xì)黑、黑做對比，其躍動比值分別為：

• 黑 vs 大黑：1.83
• 刊黑 vs 大黑：2.95
• 細(xì)黑 vs 大黑：2.04

相同字號下的正副標(biāo)題，采用最佳躍動率為1：2的方正蘭亭細(xì)黑&方正蘭亭大黑；當(dāng)不同字號時（副標(biāo)題字號小于正標(biāo)題），亦可選用方正蘭亭準(zhǔn)黑（黑）&方正蘭亭大黑。

6. 兩端對齊

在遵循字號、字間距的基礎(chǔ)上，以大標(biāo)題寬度為基準(zhǔn)進(jìn)行校正。

依照物料種類，海報、易拉寶上大標(biāo)題（一行）中文字?jǐn)?shù)5字以內(nèi)最佳；禁止超過9字。

標(biāo)題在做兩端對齊校正時，如已達(dá)到「字距」最大極限（規(guī)范二），還可加入「圖示化」手法（規(guī)范七）。

7. 圖示化

三種最常用的方式：

• 方式一：把須傳達(dá)的文字框起來
• 方式二：數(shù)字使用英文字體放大表示；整合成單一個體來配置
• 方式三：增加圖形符號

呼應(yīng) 「原則六」中「居中對齊」后的負(fù)空間處理，除了「字距調(diào)整， 增加圖形裝飾」等方法調(diào)整至「兩端對齊」。

「這些技法幫你做出優(yōu)秀字體」

• 《設(shè)計(jì)神器Fontlab！讓手殘黨也能自己DIY字體》
• 《想做好字體設(shè)計(jì)，先掌握這3個字體結(jié)構(gòu)法則》
• 《講道理，這些都是最基礎(chǔ)的字體設(shè)計(jì)知識》
• 《學(xué)會這簡單幾招，字體設(shè)計(jì)也能萌萌噠！》
• 《想做出中國風(fēng)的字體設(shè)計(jì)？我總結(jié)了4個規(guī)律！》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com