成人网ww555视频免费看,精品动漫av,国产综合av一区二区三区

一、概述

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

品牌 DNA 五個關鍵詞是：信賴、專業、便捷、安全感和想象力。

根據格式塔心理學中有關「視覺認知」原理的闡述，在一個格式塔（即一個單一視場）內，眼睛的能力只能接受少數幾個不相關聯的整體單位。如果一個格式塔中包含了太多的互不相關的單位，眼腦無法將其簡化組合，整體形象將繼續呈現無序狀態或混亂，從而無法被正確認知。「1」因此，在一個視場內，元素排列有序才能更好地被眼腦正確知覺到，閱讀才能更加便捷。這種整潔有序同時也增強了信息的可靠性。運用科學的計算方式創造的有序排列，是經得起推敲的，體現了設計的專業性。所以，版式想要帶給受眾信賴、專業、便捷和安全感，首先就要遵循有序性原則。

在美學理論中，節奏是使生產、生活和不同對象從其具體形態中抽離出來而均等化，同質化，從而建立秩序的基本形式。符合視覺規律的節奏感能使人產生愉悅的刺激感。「2」因此在版面中利用對比創造出一定的節奏感，能夠讓受眾更便捷的獲得信息，與此同時能夠創造一定的想象空間。

視知覺理論中提出連續率的概念：在知覺過程中，人們往往傾向于使知覺對象的直線繼續成為直線，使曲線繼續成為曲線。「3」在版式設計中，將元素進行對齊，符合受眾的認知特性，從而帶來安全可靠的感覺。

視覺重量理論指出：留白的空間呈現出空的狀態，不具任何視覺重量。因此，放在留白空間中的物體在周圍環境的襯托下顯得更具重量。視覺方向理論指出：空白的位置也存在力場，可以引導受眾的視線。「4」因此合理的使用留白，可以突出主題，引導受眾閱讀，創造一定的想象空間

綜上所述：支付寶版式設計的關鍵詞可提煉為有序、對比、對齊以及留白。

二、版式設計原則

1. 原則一

有序性原則——版面內的元素排列應遵循一定規律，整齊有序

方法：

運用規律性的排列分布方式，創造版面的有序感，比如按數列排版；
利用接近、相似、閉合等方式將信息進行群組化處理。

內部教程！超詳細的支付寶設計規范之版式篇

△ 信息群組化處理

2. 原則二

節奏感原則——靈活運用對比，創造合適的版面跳躍率

方法：運用科學的計算方式，在版面內創造合理的跳躍率。

內部教程！超詳細的支付寶設計規范之版式篇

△ 數列

3. 原則三

對齊原則——保證視覺的連續性，引導視覺流向

方法：運用網格或輔助線，保證版面內的元素對齊。

內部教程！超詳細的支付寶設計規范之版式篇

△ 網格、輔助線

4. 原則四

有目的留白原則——利用合理的留白來襯托主題，引導視線，創造想象空間

方法：運用科學的計算方式，在版面內創造合理的留白率。

三、版式設計規范

以四大原則為指導，在實際設計中，我們將運用數列計算來控制視覺元素的排布組合。科學的計算方法可以創造出一種緊湊的、清晰易懂的、整潔有序的設計，這種整潔有序同時也增強了信息的可靠性。在排版時，清晰、邏輯地呈現主標題、副標題、文本、插圖和圖注等信息，不僅可以使閱讀變得更快捷和更容易，還可以讓信息更容易被理解和記憶。

數列在排版中的應用意味著：

系統化和清晰化
用客觀取代主觀
理性地去看待設計的過程

1. 版式設計數列的選擇

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

2. 支付寶版式設計推算基礎

斐波那契數列（黃金分割數）：黃金比被認為是「上帝規定的比例」。上世紀德國實驗美學家費希納實驗的結果發現，人對藝術形式的黃金比選擇和健康人的腦電波振蕩之間有一種契合性。黃金率是一種「內在尺度」，指人的內心心理圖示。「5」

斐波那契數列

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

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

內部教程！超詳細的支付寶設計規范之版式篇

△ 數列集合

黃金矩形

隨著斐波那契數列項數的增加，前一項與后一項之比越來越逼近黃金分割的數值0.6180339887……

內部教程！超詳細的支付寶設計規范之版式篇

△ 黃金矩形

3. 線下物料規范

目前線下物料分為基礎物料、活動物料和行業物料三種。這里我們主要探索活動物料和行業物料的版式。標題、要素補充、細則以及品牌展示區域是物料上的基本內容構成，根據不同的物料類型，這些內容的比重會發生相應的調整。線下物料的類型五花八門，本文中主要選擇了海報、展架和地貼這三類有代表性的物料進行探索。探索的流程如下：

確定品牌展示區域高度
確定版心
確定元素布局
確定元素對齊方式
確定文字排版形式（此部分請見字體使用規范文檔）

內部教程！超詳細的支付寶設計規范之版式篇

△ 線下物料分析

規范一

物料品牌展示區域高度以等寬的黃金矩形的品牌展示區域高度為基準。

內部教程！超詳細的支付寶設計規范之版式篇

△ 品牌展示區域

當物料高度恒定時，品牌展示區域的高度恒定不變。當物料高度發生變化時，品牌展示區域的高度按照比例調節。這個比例是根據物料的原高度與等寬黃金矩形的高度的比值計算得出的。

內部教程！超詳細的支付寶設計規范之版式篇

△ 品牌展示區域

計算公式：

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

內部教程！超詳細的支付寶設計規范之版式篇

△ 品牌展示區域

特殊情況：

在線下活動物料設計過程中，當高寬比超過1:2時，會出現品牌展示區域右置的情況。

設物料寬度為 w，根據斐波那契數列計算，當1:4≤高寬比≤1:2時建議品牌展示區域寬度為2/8w；當高寬比＜1:4時，建議品牌展示區域寬度為1/5w，如下圖所示：

內部教程！超詳細的支付寶設計規范之版式篇

△ 品牌展示區域右置

規范二

品牌展示區域布局按斐波那契數列劃分。

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

內部教程！超詳細的支付寶設計規范之版式篇

△ 品牌展示區域劃分

規范三

物料的版心設定以物料的寬度為基準，利用斐波那契數列計算出四周留白的區域。

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

內部教程！超詳細的支付寶設計規范之版式篇

△ 版心設定——豎版海報

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

內部教程！超詳細的支付寶設計規范之版式篇

△ 版心設定——展架

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

內部教程！超詳細的支付寶設計規范之版式篇

△ 版心設定——橫版海報

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

內部教程！超詳細的支付寶設計規范之版式篇

△ 版心設定——地貼

留白寬度的推算：留白的寬度取決于物料的寬度。設留白寬度為a，物料寬度為 w，a=n*w。n 的值會隨著物料高寬比的變化而發生相應變化。當物料的高寬比大于1:1時，n=1/8，當高寬比為5:8～1:1之間時，n=1/13，當高寬比小于5:8時，n=1/21

內部教程！超詳細的支付寶設計規范之版式篇

△ 留白寬度推算

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

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

內部教程！超詳細的支付寶設計規范之版式篇

△ 視覺盲區高度

規范四

利用斐波那契數列劃分版心高度，以此規定物料中的元素布局。

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

內部教程！超詳細的支付寶設計規范之版式篇

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

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

內部教程！超詳細的支付寶設計規范之版式篇

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

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

內部教程！超詳細的支付寶設計規范之版式篇

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

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

內部教程！超詳細的支付寶設計規范之版式篇

△ 元素布局——展架（行業物料）

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

內部教程！超詳細的支付寶設計規范之版式篇

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

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

內部教程！超詳細的支付寶設計規范之版式篇

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

規范五

為了讓版面整體呈現規整的視覺效果，元素按照左右對齊的方式進行排版。

內部教程！超詳細的支付寶設計規范之版式篇

△ 對齊方式配圖1

內部教程！超詳細的支付寶設計規范之版式篇

△ 對齊方式配圖2

4. 線上版式規范

目前支付寶錢包內，不同的頁面中，元素之間的間距五花八門，元素排版布局也沒有規律可言。因此多個版面放在一起比較時，會發現較為混亂，因此我們在這里統一了元素間距以及給出了幾套布局比例的建議。

規范一：元素之間的間距

iOS 的最小點擊區域是44px。那是因為蘋果在縱向尺寸上，把11px作為一個基礎單元，物理尺寸上，最小空間的高度為11*4=88px，為手指觸摸最小的高度。同時，iOS 的所有組件規格都是4的倍數，因此在 iOS 中不管是元素還是間距，都應該用4的倍數。一般頁面會使用2、4、8作為柵格的基數，考慮到2的顆粒度較小，頁面布局會顯得細碎，而8的顆粒度又過大，不夠靈活。綜上所述，我們規定頁面中的元素間距都為4的倍數。

元素之間的間隔為4的倍數：頁面中元素間自定義間距選擇4px的倍數，以依次類推。

內部教程！超詳細的支付寶設計規范之版式篇