內(nèi)部教程!超細(xì)致的付出寶設(shè)計規(guī)范之版式篇
一、概述
根據(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)的團體單位。假如一個格式塔中包含了太多的互不相干的單位,眼腦無法將其簡化組合,團體形象將繼承呈現(xiàn)無序狀況或紊亂,從而無法被精確認(rèn)知。「1」因此,在一個視場內(nèi),元素排列有序才能更好地被眼腦精確知覺到,閱讀才能更加便捷。這種整齊有序同時也加強了信息的可靠性。運用科學(xué)的計算體例創(chuàng)造的有序排列,是經(jīng)得起推敲的,表現(xiàn)了設(shè)計的專業(yè)性。所以,版式想要帶給受眾相信、專業(yè)、便捷和安全感,首先就要遵循有序性原則。
在美學(xué)理論中,節(jié)奏是使生產(chǎn)、生活和不同對象從其詳細(xì)形態(tài)中抽離出來而均等化,同質(zhì)化,從而建立秩序的基本情勢。吻合視覺規(guī)律的節(jié)奏感能使人產(chǎn)生愉悅的刺激感?!?」因此在版面中行使對比創(chuàng)造出肯定的節(jié)奏感,能夠讓受眾更便捷的獲得信息,與此同時能夠創(chuàng)造肯定的想象空間。
視知覺理論中提出延續(xù)率的概念:在知覺過程中,人們每每傾向于使知覺對象的直線繼承成為直線,使曲線繼承成為曲線。「3」在版式設(shè)計中,將元素進(jìn)行對齊,吻合受眾的認(rèn)知特征,從而帶來安全可靠的感覺。
視覺重量理論指出:留白的空間呈現(xiàn)出空的狀況,不具任何視覺重量。因此,放在留白空間中的物體在四周環(huán)境的襯托下顯得更具重量。視覺方向理論指出:空白的位置也存在力場,可以指導(dǎo)受眾的視線?!?」因此合理的使用留白,可以凸起主題,指導(dǎo)受眾閱讀,創(chuàng)造肯定的想象空間
綜上所述:付出寶版式設(shè)計的關(guān)鍵詞可提煉為有序、對比、對齊以及留白。
二、版式設(shè)計原則
1. 原則一
有序性原則——版面內(nèi)的元素排列應(yīng)遵循肯定規(guī)律,劃一有序
方法:
- 運用規(guī)律性的排列分布體例,創(chuàng)造版面的有序感,比如按數(shù)列排版;
- 行使接近、相似、閉合等體例將信息進(jìn)行群組化處理。
△ 信息群組化處理
2. 原則二
節(jié)奏感原則——天真運用對比,創(chuàng)造合適的版面跳躍率
方法:運用科學(xué)的計算體例,在版面內(nèi)創(chuàng)造合理的跳躍率。
△ 數(shù)列
3. 原則三
對齊原則——保證視覺的延續(xù)性,指導(dǎo)視覺流向
方法:運用網(wǎng)格或輔助線,保證版面內(nèi)的元素對齊。
△ 網(wǎng)格、輔助線
4. 原則四
有目的留白原則——行使合理的留白來襯托主題,指導(dǎo)視線,創(chuàng)造想象空間
方法:運用科學(xué)的計算體例,在版面內(nèi)創(chuàng)造合理的留白率。
三、版式設(shè)計規(guī)范
以四大原則為引導(dǎo),在現(xiàn)實設(shè)計中,我們將運用數(shù)列計算來控制視覺元素的排布組合??茖W(xué)的計算方法可以創(chuàng)造出一種緊湊的、清晰易懂的、整齊有序的設(shè)計,這種整齊有序同時也加強了信息的可靠性。在排版時,清晰、邏輯地呈現(xiàn)主題目、副題目、文本、插圖和圖注等信息,不僅可以使閱讀變得更快捷和更容易,還可以讓信息更容易被理解和記憶。
數(shù)列在排版中的應(yīng)用意味著:
- 體系化和清晰化
- 用客觀庖代主觀
- 理性地去看待設(shè)計的過程
1. 版式設(shè)計數(shù)列的選擇
- 等差數(shù)列:跳躍率較低,信息層級無法清晰拉開,受眾很難快速清楚地理解信息。與品牌「便捷」的 DNA相違反;(X)
- 等比數(shù)列:跳躍率過高,版面里面出現(xiàn)過大的抑揚,受眾的生理起伏會比較大。與品牌「安全」的 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è)物料的版式。題目、要素增補、細(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ī)范五
為了讓版面團體呈現(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ù),以依次類推。
△ 元素間距
網(wǎng)頁內(nèi)容離畫面邊緣的距離為32px(18dp);注:特別網(wǎng)頁可使用24px(12dp)。
△ 邊緣間距
卡片上下間距為16px(8dp),列表上下間距為32px(16dp)。
△ 元素上下間距
規(guī)范二
元素寬度與高度的比例(稱為寬高比),可以同時應(yīng)用于 UI 元素和屏幕尺寸。根據(jù)斐波那契數(shù)列計算,保舉的寬高比為:8:5 , 8:3 , 4:1 , 8:1
- 通過比例計算的高度,取4能整除的近似值;
- 當(dāng)以下比例不能知足網(wǎng)頁需求時,可以用4px為基準(zhǔn),通過增長其倍數(shù),來調(diào)節(jié)尺寸,比如高度增長20px、32px、36px等。
△ 元素寬高比1
△ 元素寬高比2
規(guī)范三:通用 banner 規(guī)范
根據(jù)斐波那契數(shù)列,banner 位保舉的寬高比為 8:3 和4:1(通過比例計算的高度,取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ù)婪颉ぐ⒍骱D? 藝術(shù)與視知覺[M].四川:四川人民出版社,2001,20-28
- 「5」春山茂雄,竹村健一,蕭志強(譯).腦內(nèi)革命的活動[M].臺北:星光出版社,1998,113
本文地址:http://pkvc.cn/tutorial/di3993.html