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

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

一、概述

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

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

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

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

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

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

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

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

1. 原則一

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

方法：

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

△ 信息群組化處理

2. 原則二

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

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

△ 數(shù)列

3. 原則三

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

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

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

4. 原則四

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

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

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

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

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

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

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

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

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

斐波那契數(shù)列（黃金分割數(shù)）：黃金比被認(rèn)為是「天主規(guī)定的比例」。上世紀(jì)德國實驗美學(xué)家費希納實驗的效果發(fā)現(xiàn)，人對藝術(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ù)列項數(shù)的增長，前一項與后一項之比越來越逼近黃金分割的數(shù)值0.6180339887……

△ 黃金矩形

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

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

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

△ 線下物料分析

規(guī)范一

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

△ 品牌展示區(qū)域

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

△ 品牌展示區(qū)域

計算公式：

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

△ 品牌展示區(qū)域

特別情況：

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

設(shè)物料寬度為 w，根據(jù)斐波那契數(shù)列計算，當(dāng)1:4≤高寬比≤1:2時建議品牌展示區(qū)域?qū)挾葹?/8w；當(dāng)高寬比＜1:4時，建議品牌展示區(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ù)列計算出周圍留白的區(qū)域。

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

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

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

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

版心設(shè)定——橫版海報：因為橫版海報的寬度較長，因此，橫版海報的寬度設(shè)為 w，留白的寬度 a=1/13w，頂邊的留白高度為5/8a，底邊的留白高度為3/8a。

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

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

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

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

△ 留白寬度推算

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

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

△ 視覺盲區(qū)高度

規(guī)范四

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

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

△ 元素布局——豎版海報1（活動物料）

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

△ 元素布局——豎版海報2（活動物料）

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

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

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

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

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

△ 元素布局——橫版海報（活動物料）

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

△ 元素布局——地貼（活動物料）

規(guī)范五

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

△ 對齊體例配圖1

△ 對齊體例配圖2

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

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

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

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

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