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

一、概述

根據(jù)付出寶品牌 DNA，我們重新探索了版式設(shè)計(jì)原則。行使數(shù)列的計(jì)算方法，對(duì)線下物料的留白、基本布局、對(duì)齊體例、字體使用等進(jìn)行了重新規(guī)范并給出響應(yīng)的使用方法。線上版面的設(shè)計(jì)規(guī)范，一方面借鑒了數(shù)列計(jì)算，另一方面參考了 Material Design 和 ios Developer Guides，重要規(guī)定了間距和布局兩部分。

品牌 DNA 五個(gè)關(guān)鍵詞是：相信、專業(yè)、便捷、安全感和想象力。

根據(jù)格式塔生理學(xué)中有關(guān)「視覺認(rèn)知」原理的闡述，在一個(gè)格式塔（即一個(gè)單一視場(chǎng)）內(nèi)，眼睛的能力只能接受少數(shù)幾個(gè)不相干聯(lián)的團(tuán)體單位。假如一個(gè)格式塔中包含了太多的互不相干的單位，眼腦無法將其簡(jiǎn)化組合，團(tuán)體形象將繼承呈現(xiàn)無序狀況或紊亂，從而無法被精確認(rèn)知?！?」因此，在一個(gè)視場(chǎng)內(nèi)，元素排列有序才能更好地被眼腦精確知覺到，閱讀才能更加便捷。這種整齊有序同時(shí)也加強(qiáng)了信息的可靠性。運(yùn)用科學(xué)的計(jì)算體例創(chuàng)造的有序排列，是經(jīng)得起推敲的，表現(xiàn)了設(shè)計(jì)的專業(yè)性。所以，版式想要帶給受眾相信、專業(yè)、便捷和安全感，首先就要遵循有序性原則。

在美學(xué)理論中，節(jié)奏是使生產(chǎn)、生活和不同對(duì)象從其詳細(xì)形態(tài)中抽離出來而均等化，同質(zhì)化，從而建立秩序的基本情勢(shì)。吻合視覺規(guī)律的節(jié)奏感能使人產(chǎn)生愉悅的刺激感?！?」因此在版面中行使對(duì)比創(chuàng)造出肯定的節(jié)奏感，能夠讓受眾更便捷的獲得信息，與此同時(shí)能夠創(chuàng)造肯定的想象空間。

視知覺理論中提出延續(xù)率的概念：在知覺過程中，人們每每?jī)A向于使知覺對(duì)象的直線繼承成為直線，使曲線繼承成為曲線?！?」在版式設(shè)計(jì)中，將元素進(jìn)行對(duì)齊，吻合受眾的認(rèn)知特征，從而帶來安全可靠的感覺。

視覺重量理論指出：留白的空間呈現(xiàn)出空的狀況，不具任何視覺重量。因此，放在留白空間中的物體在四周環(huán)境的襯托下顯得更具重量。視覺方向理論指出：空白的位置也存在力場(chǎng)，可以指導(dǎo)受眾的視線。「4」因此合理的使用留白，可以凸起主題，指導(dǎo)受眾閱讀，創(chuàng)造肯定的想象空間

綜上所述：付出寶版式設(shè)計(jì)的關(guān)鍵詞可提煉為有序、對(duì)比、對(duì)齊以及留白。

二、版式設(shè)計(jì)原則

1. 原則一

有序性原則——版面內(nèi)的元素排列應(yīng)遵循肯定規(guī)律，劃一有序

方法：

• 運(yùn)用規(guī)律性的排列分布體例，創(chuàng)造版面的有序感，比如按數(shù)列排版；
• 行使接近、相似、閉合等體例將信息進(jìn)行群組化處理。

△ 信息群組化處理

2. 原則二

節(jié)奏感原則——天真運(yùn)用對(duì)比，創(chuàng)造合適的版面跳躍率

方法：運(yùn)用科學(xué)的計(jì)算體例，在版面內(nèi)創(chuàng)造合理的跳躍率。

△ 數(shù)列

3. 原則三

對(duì)齊原則——保證視覺的延續(xù)性，指導(dǎo)視覺流向

方法：運(yùn)用網(wǎng)格或輔助線，保證版面內(nèi)的元素對(duì)齊。

△ 網(wǎng)格、輔助線

4. 原則四

有目的留白原則——行使合理的留白來襯托主題，指導(dǎo)視線，創(chuàng)造想象空間

方法：運(yùn)用科學(xué)的計(jì)算體例，在版面內(nèi)創(chuàng)造合理的留白率。

三、版式設(shè)計(jì)規(guī)范

以四大原則為引導(dǎo)，在現(xiàn)實(shí)設(shè)計(jì)中，我們將運(yùn)用數(shù)列計(jì)算來控制視覺元素的排布組合?？茖W(xué)的計(jì)算方法可以創(chuàng)造出一種緊湊的、清晰易懂的、整齊有序的設(shè)計(jì)，這種整齊有序同時(shí)也加強(qiáng)了信息的可靠性。在排版時(shí)，清晰、邏輯地呈現(xiàn)主題目、副題目、文本、插圖和圖注等信息，不僅可以使閱讀變得更快捷和更容易，還可以讓信息更容易被理解和記憶。

數(shù)列在排版中的應(yīng)用意味著：

• 體系化和清晰化
• 用客觀庖代主觀
• 理性地去看待設(shè)計(jì)的過程

1. 版式設(shè)計(jì)數(shù)列的選擇

• 等差數(shù)列：跳躍率較低，信息層級(jí)無法清晰拉開，受眾很難快速清楚地理解信息。與品牌「便捷」的 DNA相違反；（X）
• 等比數(shù)列：跳躍率過高，版面里面出現(xiàn)過大的抑揚(yáng)，受眾的生理起伏會(huì)比較大。與品牌「安全」的 DNA 相違反;（X）
• 斐波那契數(shù)列：跳躍率適中，受眾在閱讀時(shí)會(huì)感到比較舒適，可以拉開重點(diǎn)和非重點(diǎn)，進(jìn)步版面的易讀性，與品牌 DNA 相對(duì)契合。（○）

2. 付出寶版式設(shè)計(jì)推算基礎(chǔ)

斐波那契數(shù)列（黃金分割數(shù)）：黃金比被認(rèn)為是「天主規(guī)定的比例」。上世紀(jì)德國(guó)實(shí)驗(yàn)美學(xué)家費(fèi)希納實(shí)驗(yàn)的效果發(fā)現(xiàn)，人對(duì)藝術(shù)情勢(shì)的黃金比選擇和健康人的腦電波振蕩之間有一種契合性。黃金率是一種「內(nèi)在尺度」，指人的心里生理圖示?！?」

斐波那契數(shù)列

1、1、2、3、5、8、13、21、34……

推演公式 F(0)=0，F(xiàn)(1)=1，F(xiàn)(n)=F(n-1)+F(n-2)（n>=2，n∈N*）

△ 數(shù)列薈萃

黃金矩形

隨著斐波那契數(shù)列項(xiàng)數(shù)的增長(zhǎng)，前一項(xiàng)與后一項(xiàng)之比越來越逼近黃金分割的數(shù)值0.6180339887……

△ 黃金矩形

3. 線下物料規(guī)范

目前線下物料分為基礎(chǔ)物料、活動(dòng)物料和行業(yè)物料三種。這里我們重要探索活動(dòng)物料和行業(yè)物料的版式。題目、要素增補(bǔ)、細(xì)則以及品牌展示區(qū)域是物料上的基本內(nèi)容構(gòu)成，根據(jù)不同的物料類型，這些內(nèi)容的比重會(huì)發(fā)生響應(yīng)的調(diào)整。線下物料的類型八門五花，本文中重要選擇了海報(bào)、展架和地貼這三類有代表性的物料進(jìn)行探索。探索的流程如下：

• 確定品牌展示區(qū)域高度
• 確定版心
• 確定元素布局
• 確定元素對(duì)齊體例
• 確定筆墨排版情勢(shì)（此部分請(qǐng)見字體使用規(guī)范文檔）

△ 線下物料分析

規(guī)范一

物料品牌展示區(qū)域高度以等寬的黃金矩形的品牌展示區(qū)域高度為基準(zhǔn)。

△ 品牌展示區(qū)域

當(dāng)物料高度恒準(zhǔn)時(shí)，品牌展示區(qū)域的高度恒定不變。當(dāng)物料高度發(fā)生轉(zhuǎn)變時(shí)，品牌展示區(qū)域的高度按照比例調(diào)節(jié)。這個(gè)比例是根據(jù)物料的原高度與等寬黃金矩形的高度的比值計(jì)算得出的。

△ 品牌展示區(qū)域

計(jì)算公式：

• 物料高度=H1
• 物料品牌展示區(qū)高度=H2
• 與物料等寬的黃金矩形高度=h1
• 與物料等寬的黃金矩形品牌展示區(qū)高度=h2
• H2=h2*（H1/h1）

△ 品牌展示區(qū)域

特別情況：

在線下活動(dòng)物料設(shè)計(jì)過程中，當(dāng)高寬比超過1:2時(shí)，會(huì)出現(xiàn)品牌展示區(qū)域右置的情況。

設(shè)物料寬度為 w，根據(jù)斐波那契數(shù)列計(jì)算，當(dāng)1:4≤高寬比≤1:2時(shí)建議品牌展示區(qū)域?qū)挾葹?/8w；當(dāng)高寬比＜1:4時(shí)，建議品牌展示區(qū)域?qū)挾葹?/5w，如下圖所示：

△ 品牌展示區(qū)域右置

規(guī)范二

品牌展示區(qū)域布局按斐波那契數(shù)列劃分。

將品牌展示區(qū)域的高度按5:3劃分，上下留白分別是5/16，logo 高度為3/8。logo 居中擺放。logo 之間的連接符高度為3/8的付出寶 logo 高度。連接符到 logo 之間的間距等于連接符的高度。如下圖所示：

△ 品牌展示區(qū)域劃分

規(guī)范三

物料的版心設(shè)定以物料的寬度為基準(zhǔn)，行使斐波那契數(shù)列計(jì)算出周圍留白的區(qū)域。

版心設(shè)定——豎版海報(bào)：設(shè)海報(bào)的寬度為 w，根據(jù)數(shù)列計(jì)算得出留白的寬度 a=1/8w。黃金矩形的寬高比為8：5，因此頂邊的留白高度為5/8a。海報(bào)頂部的內(nèi)容必要重點(diǎn)凸起，所以必要更多的留白空間去襯托，而底部本來就有一個(gè)留白較多的品牌展示區(qū)域，因此底邊的留白高度設(shè)定為3/8a。如下圖所示：

△ 版心設(shè)定——豎版海報(bào)

版心設(shè)定——展架：展架的版心設(shè)定方法與豎版海報(bào)雷同。設(shè)展架的寬度為 w，留白的寬度 a=1/8w，頂邊的留白高度為5/8a，底邊的留白高度為3/8a。

△ 版心設(shè)定——展架

版心設(shè)定——橫版海報(bào)：因?yàn)闄M版海報(bào)的寬度較長(zhǎng)，因此，橫版海報(bào)的寬度設(shè)為 w，留白的寬度 a=1/13w，頂邊的留白高度為5/8a，底邊的留白高度為3/8a。

△ 版心設(shè)定——橫版海報(bào)

版心設(shè)定——地貼：設(shè)地貼的直徑為 R，留白的寬度 a=1/8R，頂邊的留白高度為5/8a，底邊的留白高度為3/8a。

△ 版心設(shè)定——地貼

留白寬度的推算：留白的寬度取決于物料的寬度。設(shè)留白寬度為a，物料寬度為 w，a=n*w。n 的值會(huì)隨著物料高寬比的轉(zhuǎn)變而發(fā)生響應(yīng)轉(zhuǎn)變。當(dāng)物料的高寬比大于1:1時(shí)，n=1/8，當(dāng)高寬比為5:8～1:1之間時(shí)，n=1/13，當(dāng)高寬比小于5:8時(shí)，n=1/21

△ 留白寬度推算

落地物料的視覺盲區(qū)計(jì)算：在現(xiàn)實(shí)設(shè)計(jì)過程中，落地展架這類物料的底部會(huì)有肯定的視覺盲區(qū)，假如視覺樣式和海報(bào)類一樣，品牌展示部分就會(huì)被忽視。因此，我們規(guī)定了落地物料的視覺盲區(qū)高度。取受眾平均身高160cm，落地展架的觀看視距為500cm，根據(jù)我的視野角度計(jì)算，可以得出視覺盲區(qū)的高度為30cm。

此類有視覺盲區(qū)的物料，logo 在品牌展示區(qū)域的擺放位置由居中對(duì)齊調(diào)整為底邊對(duì)齊。

△ 視覺盲區(qū)高度

規(guī)范四

行使斐波那契數(shù)列劃分版心高度，以此規(guī)定物料中的元素布局。

元素布局——豎版海報(bào)1（活動(dòng)海報(bào)）：版心的高度為 h，劃分為16小份，按照5/16、8/16和3/16比例分為三大份，當(dāng)主圖較大時(shí)，題目占5/16，主圖占8/16，細(xì)則占3/16。如下圖所示：

△ 元素布局——豎版海報(bào)1（活動(dòng)物料）

元素布局——豎版海報(bào)2（活動(dòng)海報(bào)）：版心的高度為 h，劃分為16小份，按照5/16、8/16和3/16的比例分為三大份，當(dāng)題目?jī)?nèi)容較多時(shí)，題目占8/16，主圖占5/16，細(xì)則占3/16。

△ 元素布局——豎版海報(bào)2（活動(dòng)物料）

元素布局——豎版海報(bào)（行業(yè)物料）：版心的高度為 h，劃分為16小份，按照5/16、8/16和3/16的比例分為三大份，行業(yè)物料的題目?jī)?nèi)容相對(duì)較單純，沒有過多的視覺修飾，而指導(dǎo)性的細(xì)則內(nèi)容比較多。因此，題目占3/16，主圖占8/16，細(xì)則占5/16。

△ 元素布局——豎版海報(bào)（行業(yè)物料）

元素布局——展架（行業(yè)物料）：版心的高度為 h，劃分為16份，按照5/16、8/16和3/16的比例分為三份，展架的尺寸偏頎長(zhǎng)，細(xì)則內(nèi)容可以豎版排列。因此，題目占3/16，主圖占5/16，細(xì)則占8/16。

△ 元素布局——展架（行業(yè)物料）

元素布局——橫版活動(dòng)海報(bào)：版心的寬度為 w，劃分為8小份，按照5/8和3/8的比例分為兩份，題目區(qū)域占5/8，主圖占3/8。

△ 元素布局——橫版海報(bào)（活動(dòng)物料）

元素布局——地貼：版心的高度為 h，劃分為16小份，按照5/16、8/16和3/16的比例分為三大份，題目占8/16，主圖占5/16，細(xì)則占3/16。

△ 元素布局——地貼（活動(dòng)物料）

規(guī)范五

為了讓版面團(tuán)體呈現(xiàn)規(guī)整的視覺結(jié)果，元素按照左右對(duì)齊的體例進(jìn)行排版。

△ 對(duì)齊體例配圖1

△ 對(duì)齊體例配圖2

4. 線上版式規(guī)范

目前付出寶錢包內(nèi)，不同的網(wǎng)頁中，元素之間的間距八門五花，元素排版布局也沒有規(guī)律可言。因此多個(gè)版面放在一路比較時(shí)，會(huì)發(fā)現(xiàn)較為紊亂，因此我們?cè)谶@里同一了元素間距以及給出了幾套布局比例的建議。

規(guī)范一：元素之間的間距

iOS 的最小點(diǎn)擊區(qū)域是44px。那是由于蘋果在縱向尺寸上，把11px作為一個(gè)基礎(chǔ)單元，物理尺寸上，最小空間的高度為11*4=88px，為手指觸摸最小的高度。同時(shí)，iOS 的所有組件規(guī)格都是4的倍數(shù)，因此在 iOS 中不管是元素照舊間距，都應(yīng)該用4的倍數(shù)。一樣平常網(wǎng)頁會(huì)使用2、4、8作為柵格的基數(shù)，考慮到2的顆粒度較小，網(wǎng)頁布局會(huì)顯得零碎，而8的顆粒度又過大，不夠天真。綜上所述，我們規(guī)定網(wǎng)頁中的元素間距都為4的倍數(shù)。

元素之間的間隔為4的倍數(shù)：網(wǎng)頁中元素間自定義間距選擇4px的倍數(shù)，以依次類推。

△ 元素間距

網(wǎng)頁內(nèi)容離畫面邊緣的距離為32px（18dp）；注：特別網(wǎng)頁可使用24px（12dp）。

△ 邊緣間距

卡片上下間距為16px（8dp），列表上下間距為32px（16dp）。

△ 元素上下間距

規(guī)范二

元素寬度與高度的比例（稱為寬高比），可以同時(shí)應(yīng)用于 UI 元素和屏幕尺寸。根據(jù)斐波那契數(shù)列計(jì)算，保舉的寬高比為：8：5 ， 8：3 ， 4：1 ， 8：1

• 通過比例計(jì)算的高度，取4能整除的近似值；
• 當(dāng)以下比例不能知足網(wǎng)頁需求時(shí)，可以用4px為基準(zhǔn)，通過增長(zhǎng)其倍數(shù)，來調(diào)節(jié)尺寸，比如高度增長(zhǎng)20px、32px、36px等。

△ 元素寬高比1

△ 元素寬高比2

規(guī)范三：通用 banner 規(guī)范

根據(jù)斐波那契數(shù)列，banner 位保舉的寬高比為 8：3 和4：1（通過比例計(jì)算的高度，取4能整除的近似值）。元素布局有兩種，左右排列和居中排列。

△ banner 版式1

△ banner 版式2

規(guī)范四：生活盒子 card 版式規(guī)范

生活盒子 card 重要有七種樣式，這里規(guī)范了 card 的信息結(jié)構(gòu)以及版式布局，如下圖所示：

△ 生活盒子 card 樣式01、樣式02

△ 生活盒子 card 樣式01、樣式02示例

△ 生活盒子 card 樣式03、樣式04

△ 生活盒子 card 樣式03、樣式04示例

△ 生活盒子 card 樣式05、樣式06

△ 生活盒子 card 樣式05、樣式06示例

△ 生活盒子 card 樣式07

△ 生活盒子 card 樣式07示例

新聞中間首頁 card 重要有五種樣式，這里規(guī)范了 card 的信息結(jié)構(gòu)以及版式布局，如下圖所示：

△ 新聞中間首頁 card 樣式01

△ 新聞中間首頁 card 樣式01示例

△ 新聞中間首頁 card 樣式02、樣式03

△ 新聞中間首頁 card 樣式02、樣式03示例

△ 新聞中間首頁 card 樣式04

△ 新聞中間首頁 card 樣式04示例

△ 新聞中間首頁 card 樣式05

△ 新聞中間首頁 card 樣式05示例

參考文獻(xiàn)

• 「1」庫爾特·考夫卡. 格式塔生理學(xué)原理[M].浙江：浙江教育出版社，1997.13-16 ,119
• 「2」李澤厚. 美學(xué)四講[M].北京：三聯(lián)書店，1999，74
• 「3」「4」魯?shù)婪颉ぐ⒍骱Ｄ? 藝術(shù)與視知覺[M].四川：四川人民出版社，2001，20-28
• 「5」春山茂雄，竹村健一，蕭志強(qiáng)（譯）.腦內(nèi)革命的活動(dòng)[M].臺(tái)北：星光出版社，1998，113