1. 版式 概述 版式设计原则 原则⼀ 原则⼆ 原则三 原则四 版式设计规范 线下物料规范 线上版式规范 概述 根据⽀付宝品牌DNA，我们重新探索了版式设计原则。利⽤数列的计算⽅法，对线下物料的留⽩、基本布 局、对⻬⽅式、字体使⽤等进⾏了重新规范并给出相应的使⽤⽅法。线上版⾯的设计规范，⼀⽅⾯借鉴了 数列计算，另⼀⽅⾯参考了Mat erial Desig n和io s Develo p er Guid es，主要规定了间距和布局两部分。 品牌DNA五个关键词是：信赖、专业、便捷、安全感和想象⼒。 根据格式塔⼼理学中有关“视觉认知”原理的阐述，在⼀个格式塔（即⼀个单⼀视场）内，眼睛的能⼒只能 接受少数⼏个不相关联的整体单位。如果⼀个格式塔中包含了太多的互不相关的单位，眼脑⽆法将其简化 组合，整体形象将继续呈现⽆序状态或混乱，从⽽⽆法被正确认知。[1]因此，在⼀个视场内，元素排列有 序才能更好地被眼脑正确知觉到，阅读才能更加便捷。这种整洁有序同时也增强了信息的可靠性。运⽤科 学的计算⽅式创造的有序排列，是经得起推敲的，体现了设计的专业性。所以，版式想要带给受众信赖、 专业、便捷和安全感，⾸先就要遵循有序性原则。 在美学理论中，节奏是使⽣产、⽣活和不同对象从其具体形态中抽离出来⽽均等化，同质化，从⽽建⽴秩 序的基本形式。符合视觉规律的节奏感能使⼈产⽣愉悦的刺激感。[2]因此在版⾯中利⽤对⽐创造出⼀定的 节奏感，能够让受众更便捷的获得信息，与此同时能够创造⼀定的想象空间。 视知觉理论中提出连续率的概念：在知觉过程中，⼈们往往倾向于使知觉对象的直线继续成为直线，使曲 线继续成为曲线。[3]在版式设计中，将元素进⾏对⻬，符合受众的认知特性，从⽽带来安全可靠的感觉。 视觉重量理论指出：留⽩的空间呈现出空的状态，不具任何视觉重量。因此，放在留⽩空间中的物体在周 围环境的衬托下显得更具重量。视觉⽅向理论指出：空⽩的位置也存在⼒场，可以引导受众的视线。[4]因 此合理的使⽤留⽩，可以突出主题，引导受众阅读，创造⼀定的想象空间 综上所述：⽀付宝版式设计的关键词可提炼为有序、对⽐、对⻬以及留⽩。 ⽀付宝版式设计的关键词可提炼为有序、对⽐、对⻬以及留⽩。 1 |

2. 版式设计原则 原则⼀ 有序性原则——版⾯内的元素排列应遵循⼀定规律，整⻬有序 ⽅法：1、运⽤规律性的排列分布⽅式，创造版⾯的有序感，⽐如按数列排版 2、利⽤接近、相似、闭合等⽅式将信息进⾏群组化处理 信息群组化处理配图.p ng 原则⼆ 节奏感原则——灵活运⽤对⽐，创造合适的版⾯跳跃率 ⽅法：运⽤科学的计算⽅式，在版⾯内创造合理的跳跃率 2 |

3. 数列配图.p ng 原则三 对⻬原则——保证视觉的连续性，引导视觉流向 ⽅法：运⽤⽹格或辅助线，保证版⾯内的元素对⻬ ⽹格、辅助线配图.p ng 原则四 3 |

4. 有⽬的留⽩原则——利⽤合理的留⽩来衬托主题，引导视线，创造想象空间 ⽅法：运⽤科学的计算⽅式，在版⾯内创造合理的留⽩率 版式设计规范 以四⼤原则为指导，在实际设计中，我们将运⽤数列计算来控制视觉元素的排布组合。科学的计算⽅法可 以创造出⼀种紧凑的、清晰易懂的、整洁有序的设计，这种整洁有序同时也增强了信息的可靠性。在排版 时，清晰、逻辑地呈现主标题、副标题、⽂本、插图和图注等信息，不仅可以使阅读变得更快捷和更容 易，还可以让信息更容易被理解和记忆。 数列在排版中的应⽤意味着： 1、系统化和清晰化 2、⽤客观取代主观 3、理性地去看待设计的过程 ⼀、版式设计数列的选择 等差数列：跳跃率较低，信息层级⽆法清晰拉开，受众很难快速清楚地理解信息。与品牌“便捷”的DNA相 等差数列： 违背；（X） 等⽐数列：跳跃率过⾼，版⾯⾥⾯出现过⼤的抑扬，受众的⼼理起伏会⽐较⼤。与品牌“安全”的DNA相违 等⽐数列 背;（X） 斐波那契数列：跳跃率适中，受众在阅读时会感到⽐较舒适，可以拉开重点和⾮重点，提⾼版⾯的易读 斐波那契数列： 性，与品牌DNA相对契合。（○） ⼆、⽀付宝版式设计推算基础 斐波那契数列（⻩⾦分割数）：⻩⾦⽐被认为是“上帝规定的⽐例”。上世纪德国实验美学家费希纳实验的 结果发现，⼈对艺术形式的⻩⾦⽐选择和健康⼈的脑电波振荡之间有⼀种契合性。⻩⾦率是⼀种“内在尺 度”，指⼈的内⼼⼼理图示。[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*） 4 |

5. 数列集合配图.p ng ⻩⾦矩形 随着斐波那契数列项数的增加，前⼀项与后⼀项之⽐越来越逼近⻩⾦分割的数值0.6180339887…… ⻩⾦矩形配图.p ng 线下物料规范 ⽬前线下物料分为基础物料、活动物料和⾏业物料三种。这⾥我们主要探索活动物料和⾏业物料的版式。 标题、要素补充、细则以及品牌展示区域是物料上的基本内容构成，根据不同的物料类型，这些内容的⽐ 5 |

6. 重会发⽣相应的调整。线下物料的类型五花⼋⻔，本⽂中主要选择了海报、展架和地贴这三类有代表性的 物料进⾏探索。探索的流程如下： 1、确定品牌展示区域⾼度 2、确定版⼼ 3、确定元素布局 4、确定元素对⻬⽅式 5、确定⽂字排版形式（此部分请⻅字体使⽤规范⽂档） 线下物料分析配图.p ng 规范⼀ 物料品牌展示区域⾼度以等宽的⻩⾦矩形的品牌展示区域⾼度为基准。 6 |

7. 品牌展示区域配图1.p ng 当物料⾼度恒定时，品牌展示区域的⾼度恒定不变。当物料⾼度发⽣变化时，品牌展示区域的⾼度按照⽐ 例调节。这个⽐例是根据物料的原⾼度与等宽⻩⾦矩形的⾼度的⽐值计算得出的。 品牌展示区域配图2.p ng 计算公式： 物料⾼度=H1 物料品牌展示区⾼度=H2 与物料等宽的⻩⾦矩形⾼度=h1 7 |

8. 与物料等宽的⻩⾦矩形品牌展示区⾼度=h2 H2=h2*（H1/h1） 品牌展示区域配图3.p ng 特殊情况： 在线下活动物料设计过程中，当⾼宽⽐超过1:2时，会出现品牌展示区域右置的情况。 设物料宽度为w，根据斐波那契数列计算，当1:4≤⾼宽⽐≤1:2时建议品牌展示区域宽度为2/8w，当⾼宽⽐ ＜1:4时，建议品牌展示区域宽度为1/5w，如下图所示： 品牌展示区域右置配图.p ng 规范⼆ 8 |

9. 品牌展示区域布局按斐波那契数列划分 将品牌展示区域的⾼度按5:3划分，上下留⽩分别是5/16，lo g o ⾼度为3/8。lo g o 居中摆放。lo g o 之间的 连接符⾼度为3/8的⽀付宝lo g o ⾼度。连接符到lo g o 之间的间距等于连接符的⾼度。如下图所示： 品牌展示区域划分配图.p ng 规范三 物料的版⼼设定以物料的宽度为基准，利⽤斐波那契数列计算出四周留⽩的区域。 版⼼设定——竖版海报 设海报的宽度为w，根据数列计算得出留⽩的宽度a=1/8w。⻩⾦矩形的宽⾼⽐为8：5，因此顶边的留⽩⾼ 度为5/8a。海报顶部的内容需要重点突出，所以需要更多的留⽩空间去衬托，⽽底部原本就有⼀个留⽩较 多的品牌展示区域，因此底边的留⽩⾼度设定为3/8a。如下图所示： 9 |

10. 版⼼设定——竖版海报配图.p ng 版⼼设定——展架 展架的版⼼设定⽅法与竖版海报相同。设展架的宽度为w，留⽩的宽度a=1/8w,顶边的留⽩⾼度为5/8a， 底边的留⽩⾼度为3/8a。 版⼼设定——展架配图.p ng 版⼼设定——横版海报 由于横版海报的宽度较⻓。因此，横版海报的宽度设为w，留⽩的宽度a=1/13w,顶边的留⽩⾼度为5/8a， 底边的留⽩⾼度为3/8a。 10 |

11. 版⼼设定——横版海报配图.p ng 版⼼设定——地贴 设地贴的直径为R，留⽩的宽度a=1/8R,顶边的留⽩⾼度为5/8a，底边的留⽩⾼度为3/8a。 版⼼设定——地贴配图.p ng 留⽩宽度的推算 留⽩的宽度取决于物料的宽度。设留⽩宽度为a，物料宽度为w，a=n*w。n的值会随着物料⾼宽⽐的变化 ⽽发⽣相应变化。当物料的⾼宽⽐⼤于1:1时，n=1/8，当⾼宽⽐为5:8～1:1之间时，n=1/13，当⾼宽⽐ ⼩于5:8时，n=1/21 11 |

12. 留⽩宽度推算配图.p ng 落地物料的视觉盲区计算 在实际设计过程中，落地展架这类物料的底部会有⼀定的视觉盲区，如果视觉样式和海报类⼀样，品牌展 示部分就会被忽视。因此，我们规定了落地物料的视觉盲区⾼度。取受众平均身⾼160cm ，落地展架的观 看视距为500cm ，根据我的视野⻆度计算，可以得出视觉盲区的⾼度为30cm 。 此类有视觉盲区的物料，lo g o 在品牌展示区域的摆放位置由居中对⻬调整为底边对⻬。 视觉盲区⾼度配图.p ng 规范四 12 |

13. 利⽤斐波那契数列划分版⼼⾼度，以此规定物料中的元素布局 元素布局——竖版海报1（活动海报） 版⼼的⾼度为h，划分为16⼩份，按照5/16、8/16和3/16⽐例分为三⼤份，当主图较⼤时，标题占 5/16，主图占8/16，细则占3/16。如下图所示： 元素布局——竖版海报1（活动物料）配图.p ng 元素布局——竖版海报2（活动海报） 版⼼的⾼度为h，划分为16⼩份，按照5/16、8/16和3/16的⽐例分为三⼤份，当标题内容较多时，标题占 8/16，主图占5/16，细则占3/16。 元素布局——竖版海报2（活动物料）配图.p ng 13 |

14. 元素布局——竖版海报（⾏业物料） 版⼼的⾼度为h，划分为16⼩份，按照5/16、8/16和3/16的⽐例分为三⼤份，⾏业物料的标题内容相对较 单纯，没有过多的视觉修饰，⽽引导性的细则内容⽐较多。因此，标题占3/16，主图占8/16，细则占 5/16。 元素布局——竖版海报（⾏业物料）配图.p ng 元素布局——展架（⾏业物料） 版⼼的⾼度为h，划分为16份，按照5/16、8/16和3/16的⽐例分为三份，展架的尺⼨偏细⻓，细则内容可 以竖版排列。因此，标题占3/16，主图占5/16，细则占8/16。 元素布局——展架（⾏业物料）配图.p ng 14 |

15. 元素布局——横版活动海报 版⼼的宽度为w，划分为8⼩份，按照5/8和3/8的⽐例分为两份，标题区域占5/8，主图占3/8。 元素布局——横版海报（活动物料）配图.p ng 元素布局——地贴 版⼼的⾼度为h，划分为16⼩份，按照5/16、8/16和3/16的⽐例分为三⼤份，标题占8/16，主图占 5/16，细则占3/16。 元素布局——地贴（活动物料）配图.p ng 15 |

16. 规范五 为了让版⾯整体呈现规整的视觉效果，元素按照左右对⻬的⽅式进⾏排版 对⻬⽅式配图1.p ng 对⻬⽅式配图2.p ng 线上版式规范 ⽬前⽀付宝钱包内，不同的⻚⾯中，元素之间的间距五花⼋⻔，元素排版布局也没有规律可⾔。因此多个 版⾯放在⼀起⽐较时，会发现较为混乱，因此我们在这⾥统⼀了元素间距以及给出了⼏套布局⽐例的建 议。 16 |

17. 规范⼀ 元素之间的间距 io s的最⼩点击区域是44p x。那是因为苹果在纵向尺⼨上，把11p x作为⼀个基础单元，物理尺⼨上，最⼩ 空间的⾼度为11*4=88p x，为⼿指触摸最⼩的⾼度。同时，io s的所有组件规格都是4的倍数，因此在io s中 不管是元素还是间距，都应该⽤4的倍数。⼀般⻚⾯会使⽤2、4、8作为栅格的基数，考虑到2的颗粒度较 ⼩，⻚⾯布局会显得细碎，⽽8的颗粒度⼜过⼤，不够灵活。综上所述，我们规定⻚⾯中的元素间距都为4 的倍数。 1、元素之间的间隔为4的倍数 ⻚⾯中元素间⾃定义间距选择4p x的倍数，以依次类推 元素间距配图.p ng 2、⻚⾯内容离画⾯边缘的距离为32p x（18d p ） 注：特殊⻚⾯可使⽤24p x（12d p ） 17 |

18. 边缘间距配图.p ng 3、卡⽚上下间距为16p x（8d p ），列表上下间距为32p x（16d p ） 元素上下间距配图.p ng 规范⼆ 元素宽度与⾼度的⽐例（称为宽⾼⽐），可以同时应⽤于UI元素和屏幕尺⼨。根据斐波那契数列计算，推 荐的宽⾼⽐为： 8：5 ， 8：3 ， 4：1 ， 8：1 18 |

19. （1、通过⽐例计算的⾼度，取4能整除的近似值；2、当以下⽐例不能满⾜⻚⾯需求时，可以⽤4p x为基 准，通过增加其倍数，来调节尺⼨，⽐如⾼度增加20p x、32p x、36p x等） 元素宽⾼⽐配图1.p ng 元素宽⾼⽐配图2.p ng 规范三 通⽤banner规范 根据斐波那契数列，b anner位推荐的宽⾼⽐为 8：3 和4：1（通过⽐例计算的⾼度，取4能整除的近似 值）。元素布局有两种，左右排列和居中排列。 19 |

20. b anner版式配图1.p ng b anner版式配图2.p ng 规范四 ⽣活盒⼦card版式规范 ⽣活盒⼦card 主要有七种样式，这⾥规范了card 的信息结构以及版式布局，如下图所示： 20 |

21. ⽣活盒⼦card 样式01、样式02配图.p ng ⽣活盒⼦card 样式01、样式02示例配图.p ng 21 |

22. ⽣活盒⼦card 样式03、样式04配图.p ng ⽣活盒⼦card 样式03、样式04示例配图.p ng 22 |

23. ⽣活盒⼦card 样式05、样式06配图.p ng ⽣活盒⼦card 样式05、样式06示例配图.p ng 23 |

24. ⽣活盒⼦card 样式07配图.p ng ⽣活盒⼦card 样式07示例配图.p ng 消息中⼼⾸⻚card 主要有五种样式，这⾥规范了card 的信息结构以及版式布局，如下图所示： 24 |

25. 消息中⼼⾸⻚card 样式01配图.p ng 消息中⼼⾸⻚card 样式01示例配图.p ng 25 |

26. 消息中⼼⾸⻚card 样式02、样式03配图.p ng 消息中⼼⾸⻚card 样式02、样式03示例配图.p ng 26 |

27. 消息中⼼⾸⻚card 样式04配图.p ng 消息中⼼⾸⻚card 样式04示例配图.p ng 27 |

28. 消息中⼼⾸⻚card 样式05配图.p ng 消息中⼼⾸⻚card 样式05示例配图.p ng 参考⽂献 [1]库尔特·考夫卡. 格式塔⼼理学原理[M].浙江:浙江教育出版社,1997.13-16 ,119 [2]李泽厚. 美学四讲[M].北京:三联书店,1999,74 [3][4]鲁道夫·阿恩海姆. 艺术与视知觉[M].四川:四川⼈⺠出版社,2001,20-28 [5]春⼭茂雄，⽵村健⼀，萧志强（译）.脑内⾰命的活动[M].台北：星光出版社，1998,113 28 |