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

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

一、原則

1. 動(dòng)態(tài)與靜態(tài)

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

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

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

回視：人們?cè)陂喿x過程中，當(dāng)碰到不理解的內(nèi)容時(shí)，迅速且無意識(shí)地回顧前面的內(nèi)容。

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

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

2. 視角與視距

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

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

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

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

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

3. 順序與節(jié)奏

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

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

4. 可辨與易讀

中英文字體分別是等寬字型和比例字型（文字寬度不同）。比例字型的文字有各自不同寬度，輸入時(shí)會(huì)自動(dòng)調(diào)整字距。因此在編排數(shù)字（英文）字體時(shí)：
不允許用中文字體輸入；
在相同字號(hào)下，數(shù)字會(huì)比中文小，根據(jù)「易讀」原則，需調(diào)整至高度一致的視覺平衡。

5. 平衡與對(duì)比

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

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

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

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

6. 對(duì)齊與留白

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

左對(duì)齊：以各行的行首對(duì)齊

右對(duì)齊：以各行的行末對(duì)齊

居中對(duì)齊：使軸線位于段落寬度的中間位置

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

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

二、規(guī)范

1. 字號(hào)

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

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

大標(biāo)題：字號(hào)依照文字個(gè)數(shù)不定，一行標(biāo)題不超過5個(gè)字獲取信息最佳；禁止超過9字。

內(nèi)文：手冊(cè)、單頁、DM 的常用字級(jí)不小于7.5-9pt；海報(bào)的常用字級(jí)不小于17-23pt；易拉寶的常用字級(jí)不小于24-28pt。

2. 字距

中文：當(dāng)把單字寬度設(shè)為一個(gè) a 時(shí)，建議字間距的最大極限不要超過1／2a。

數(shù)字：有些數(shù)字的前后會(huì)出現(xiàn)「空洞」或「擁擠」的狀況，必須以目測(cè)方式作適度調(diào)整。

標(biāo)點(diǎn)：如「引號(hào)」間會(huì)有極大空白，破壞整體間隙，亦需按實(shí)際情況以目測(cè)方式縮小至視覺協(xié)調(diào)。

3. 行距

內(nèi)文的最佳行距為字號(hào)的1.5-2倍左右。

如果物料版面緊張、信息量特別大（如活動(dòng)規(guī)則、說明等），可適當(dāng)縮小至字號(hào)的1.2-1.5倍。

4. 禁則文字符號(hào)

行頭禁則中包括的主要文字與符號(hào)：句號(hào)、逗號(hào)、頓號(hào)、連字符、分號(hào)、冒號(hào)、感嘆號(hào)、問號(hào)、（各種）反括號(hào)。

分離禁則中包括的主要文字與符號(hào)：（各種）正括號(hào)。

行末禁則中包括的主要文字與符號(hào)：兩倍破折號(hào)、兩倍省略號(hào)。

5. 躍動(dòng)比

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

黑 vs 大黑：1.83

刊黑 vs 大黑：2.95

細(xì)黑 vs 大黑：2.04

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

6. 兩端對(duì)齊

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

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

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

7. 圖示化

三種最常用的方式：

方式一：把須傳達(dá)的文字框起來

方式二：數(shù)字使用英文字體放大表示；整合成單一個(gè)體來配置

方式三：增加圖形符號(hào)

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