内部教程！超详细的支付宝设计规范之版式篇

前期回顾支付宝设计规范:

“内部教程！超详细的支付宝设计规范图形图案”和“内部教程！超详细的支付宝设计规范颜色匹配”和“内部教程！超详细的支付宝设计规范在线字体”和“内部教程！超详细的支付宝设计规范离线字体”

一、概述

根据支付宝品牌 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.618033987...

△ 黄金矩形

3. 线下材料规范

目前，线下材料分为三种：基础材料、活动材料和工业材料。在这里，我们主要探索活动材料和工业材料的布局。标题、元素补充、规则和品牌展示区域是材料的基本内容组成部分。这些内容的比例将根据不同的材料类型进行相应的调整。线下材料有多种类型。本文主要选择三种具有代表性的材料：海报、展览框架和地板贴纸进行探索。探索过程如下：

确定品牌展示区域高度，确定版本中心，确定元素布局，确定元素对齐，确定文本排版形式（请参阅本部分的字体使用规范文档）

△ 线下材料分析

规范一

物料品牌展示区高度以等宽金矩形品牌展示区高度为基准。

△ 品牌展区

当材料高度恒定时，品牌展示区域的高度恒定。当材料高度发生变化时，品牌展示区域的高度按比例进行调整。该比例根据材料的原始高度与等宽金矩形高度的比值计算。

△ 品牌展区

计算公式：

物料高度=H1物料品牌展区高度=H2、物料等宽金矩形高度=H1、物料等宽金矩形品牌展区高度=H2H2=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，材料宽度为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，按5/16分为16小部分、8/16和3/16的比例分为三部分。当主图较大时，标题占5/16，主图占8/16，细则占3/16。如下图所示:

△ 元素布局-垂直海报1(活动材料)

元素布局-垂直海报2(活动海报)：版心的高度为 h，按5/16分为16小部分、8/16和3/16的比例分为三部分。标题内容较多时，标题占8/16，主图占5/16，细则占3/16。

△ 元素布局-垂直海报2(活动材料)

元素布局-垂直海报(工业材料)：版心的高度为 h，按5/16分为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，按5/8和3/8的比例分为8小份，标题区占5/8，主图占3/8。

△ 元素布局-横版海报(活动材料)

元素布局-地贴:版心高度为 h，按5/16分为16小部分、8/16和3/16的比例分为三部分，标题为8/16，主图为5/16，细则为3/16。

△ 元素布局-地贴(活动材料)

规范五

为使整个布局呈现出规则的视觉效果，元素按左右对齐进行排版。

△ 对齐配图1

△ 对齐配图2

4. 在线布局规范

目前，在支付宝钱包中，不同页面的元素间距多种多样，元素排版布局不规则。因此，当多个布局放在一起进行比较时，我们会发现它们更加混乱。因此，我们在这里统一了元素间距，并提出了一些布局比例的建议。

规范1：元素之间的间距

iOS 最小点击区域为44px。这是因为苹果将11px作为垂直尺寸的基本单元。在物理尺寸上，最小空间的高度是11*4=88px，这是手指触摸的最小高度。同时，iOS 所有组件的规格都是4倍，所以在 iOS 无论是元素还是间距，都应该使用4倍数。一般页面使用2、4、8作为网格的基础，考虑到2的粒度较小，页面布局会显得细腻，8的粒度太大，不够灵活。综上所述，我们规定页面中的元素间距为4倍。

元素之间的间隔是4倍：页面中元素之间的自定义间距选择4px倍数，以此类推。

△ 元素间距

页面内容与图片边缘的距离为32px(18dp)；注：24px(12dp)可用于特殊页面。

△ 边缘间距

卡片上下间距为16px(8dp)，列表上下间距为32px(16dp)。

△ 元素上下间距

规范二

元素宽度与高度的比例(称为宽高比)可同时应用于 UI 要素和屏幕尺寸。根据斐波那契数列，推荐的宽高比为：8：5 ， 8：3 ， 4：1 ， 8：1

通过比例计算的高度取4个可以去除的近似值；当以下比例不能满足页面需求时，可以通过增加其倍数来调整尺寸，如高度增加20px、32px、36px等。

△ 元素宽高比1

△ 元素宽高比2

规范三:通用 banner 规范

根据斐波那契数列，banner 位置推荐的宽高比为 8：3 和4：1(通过比例计算的高度，取4个可以去除的近似值)。有两种元素布局，左右排列和中间排列。

△ banner 版式1

△ banner 版式2

规范四:生活盒 card 版式规范

生活盒子 card 主要有七种风格，这里是标准化的 card 信息结构和布局如下图所示：

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

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

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

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

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

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

△ 生活盒子 card 样式07

△ 生活盒子 card 样式07示例

主页的新闻中心 card 主要有五种风格，这里规范 card 信息结构及布局，如下图所示：

△ 主页的新闻中心 card 样式01

△ 主页的新闻中心 card 样式01示例

△ 主页的新闻中心 card 样式02、样式03

△ 主页的新闻中心 card 样式02、样式03示例

△ 主页的新闻中心 card 样式04

△ 主页的新闻中心 card 样式04示例

△ 主页的新闻中心 card 样式05

△ 主页的新闻中心 card 样式05示例

参考文献

「1」库尔特·考夫卡. 格式塔心理学原理[M].浙江：浙江教育出版社，1997.13-16 ,119「2」李泽厚. 美学四讲[M].北京：三联书店，1999，74「3」「4」鲁道夫·阿恩海姆. 艺术与视觉知觉[M].四川：四川人民出版社，2001年，20月28日「5」春山茂雄，竹村健一，萧志强(译).大脑革命活动[M].台北：星光出版社，1998，113

================推荐明星栏目================

优秀教程网: UiiiUiii.com 它是一个优质的中文教程网站，共享了大量的PS、AE、AI、C4D和其他中文教程也为零基础设计爱好者准备了亲密的知识树专栏。打开免费自学的新篇章，根据我们的专栏一步一步地学习，你可以快速开始并产生酷的视觉效果。

设计导航：中国最受欢迎的设计网站导航，设计师必须： http://hao.uisdc.com