一、版式设计基础

版式设计属于平面设计范畴，平面设计是一个重要的设计知识体系，在UI设计中，平面设计是基础，也是在其他设计领域中必备的能力，所以只有打牢基础，才能在各个设计领域，快速更好的成长和发展。

1、平面构成

平面构成的原理就是运用点、线、面和律动组成结构严谨，富有极强的抽象性和形式感的的设计原理。

平面构成的要素：点的构成形式、线的构成形式、面的构成形式。

平面构成的构成形式主要以下几种：

二、版式ACRP原则

1、对齐（Alignment）

在设计中任何元素都应该有它的对齐方式，比如一个元素的上下左右间距应该有它的统一性对齐的，每个元素都应当与页面上的另一个元素有着某种联系，这样才能建立一个精致合理有逻辑的页面设计。

对齐小结

页面中每个元素应当与某个元素存在某种视觉联系。要让页面上所有元素看上去统一、有联系而且彼此相关。

根本目的

对齐的根本目的是使页面统一而且有条理。

如何实现

在页面中找出与其有关系的元素建立对齐亲密关系

需避免的问题

避免在同一个页面使用多种对齐方式。

2、对比（Cotrast)

在同一视觉页面内，页面上的元素要避免太过相似，如果元素有所区别，对比度就要强烈，这样就可以有效的分清主次关系，突出重点，让次要元素弱化后退。

对比的方式主要有：颜色对比、大小对比、形状对比、空间对比等。

下面左图的主要问题是文字和背景的对比不够，大标题与描述的文字大小对比不够，造成了冲突，不易阅读。

对比小结

要实现有效的对比，这两个元素必须截然不同，对比必须强烈。

根本目的

对比的根本目的有两方面，一是增强页面的效果；二是有助于信息组织。这两方面方面相辅相成不能分开。

如何实现

可以通过字体、线宽、颜色、形状、大小、空间等等来增加对比。增加对比很容易，有很多途径可以实现，但重要的是对比一定要强烈。

需避免的问题

对比一定要强烈，要避免对比度小，造成相似性的冲突。

3、重复（Repetition）

某一视觉元素在整个作品中重复出现，可以重复颜色、形状、线宽、字体和图片等等。这样既能增加设计的条理性，也可以加强整个设计的统一性。在一个级别或一个逻辑系统中尽量使用一种设计逻辑来保持用户的认知，这样可以起到引导用户的作用。

重复原则就是“设计的某些元素需要在整个作品中重复”。重复元素可能是一种粗字体、一条粗线，某个项目符号、颜色、设计要素，某种格式、空间关系等。重复不仅有助于信息组织，建立一种连续性，还会为作品带来统一的秩序性。

重复小结

视觉元素的重复可以将作品中的各部分连在一起，从而统一并增强整个作品，否则这些部分只是彼此孤立的单元。

根本目的

重复的目的就是统一，并增强视觉效果，让页面更易阅读。

如何实现

页面中有可用的元素去让它重复当然好，如果没有合适用的元素，就增加一些纯粹为建立重复而设计的元素。

需避免的问题

重复要适当，不可过量，重复太多会让人有厌烦心理，要注意对比的价值。

4、亲密性（Proximity）

有关系的两个元素应当组成整体，如果多个元素之间相互存在很近的亲密关系，它们就会成为一个视觉单元，而不是多个孤立存在的元素，这有有助于组织信息，减少混乱，为用户提供清晰的设计结构。

下面左图中的主要问题就是元素太散乱，页面上的每个元素都与其它元素没有关联，这样就造成了阅读障碍，不知道开始从哪里读，也不知道从哪里结束。

亲密性原则指的是某些元素存在关联，那么这些元素在视觉上也应当存在关联，除此之外其它孤立的元素应保持距离，因为元素间的距离是体现是否存在亲密关系的重要因素。

版式设计中文字是重要的信息来源，可以说是优先级最高的内容，所以首先要保证文字的可读性，把信息准确的传达给用户，在排版中控制好文本的长度、字距、行距、段落与对齐方式，就能有效的提高文字阅读的流畅性和可读性。

下面左图的主要问题是文本字间距太大，字太小，不仅亲密性不够，而且对比对也不够。

合理的行间距和字间距也是亲密性原则的体现形式，间距小会显的紧凑，视觉上给人一种紧张感，间距适当大些，可以增加页面放松感，可以根据页面实际情况去考虑增加间距，增加文字的呼吸感。

亲密性小结

元素之间存在亲密性，它们会形成一个视觉单元，而不是多个孤立存在的元素。应当有意识设置视觉浏览顺序，用设计布局来引导用户浏览

根本目的

亲密性的根本目的是实现组织性。

如何实现

统计视觉区域内有多少元素，使孤立的元素与其有亲密关系的元素分组建立更近的亲密性，让它们形成一个视觉单元。

需避免的问题

避免一个页面上有太多孤立的元素，造成散乱的点。

每个视觉单元，间距要做出区别。

三、版式页面构成

1、版面率

版面占据整体尺寸的比例就叫做版面率，设定页面四周的留白来安排页面的排版非常必要，由于版面率不同，版式设计的效果也会不同。

2、低版面率、高留白率

页边距留白扩大，版面就会缩小，版面率越低，留白率越高，这样页面的版面率会不断降低，如果版面率降低，页面就会更雅致，更安静典雅，更有格调跟品质感，但亲和力稍弱。

3、高版面率、低留白率

页边距留白缩小，版面率越高，留白率越低，视觉张力就越大，版面也会更活泼与热闹，页面更丰富，亲和力也更强。

4、图版率

图版率就是指页面中的图片所占“页面总面积”的比率，页面中的图片越多或者面积越大，图版率就越高，这是对页面产生巨大影响的关键因素。

通过图片的数量和尺寸来控制图版率

图片的数量和尺寸是控制图版率的要素，在下面两个例子中，图版率相同，图片数量不同。

页面底色会改变图版率的视觉效果

用提高图版率来提升页面效果，但文字数量又过多，那图片所占的空间必然会缩小，对于这种情况下，无论如何也要增加图版率效果，那可以试试通过对页面底色调整，也可以达到与提高图版率相似的效果，从而改变页面的视觉效果。

5、区分内容的先后顺序

当页面中的内容有先后顺序时，设计处理这种顺序起到引导用户的作用，通过设计达到有顺序的阅读，有许多不同的处理方法，比如利用、大小、形状、颜色、深浅等。

通过图片大小来区分

通过文字大小来区分

区别文字内容先后顺序时，可以通过调整文字的大小差别来处理，文字调整不能过大也不能过小，文字加粗可以突出，但是太粗也会造成字体间隙太挤而造成的阅读不便，所以一切的调整以实际情况适宜为准。

通过颜色来区分

通过颜色来区分阅读先后顺序，纯度越高的颜色比纯度低的颜色更加显眼和突出，通过颜色来调整的方式中，最重要的是“差别化概念”，在这样的情况下视觉上就起到引导作用，突出的颜色部分自然就会是重点。

通过形状来区分

通过形状来区分先后顺序的方法也是一样的，做到差别化，特殊的形状容易引起人们的注意力，突出成为重点，这个形状就会吸引注意力，成为焦点，对该内容起到强调作用。

阅读顺序引导视线浏览方向

在版式设计中，用户的视线移动方向的设置也是非常重要的，在设计页面中加入引导用户浏览的元素，合理引导元素，能更易于阅读。

下面列举的几个浏览定律，是基于人文环境，人们天然习惯得出的浏览顺序。

通过内容安排来引导阅读顺序

在设计页面的时候，需要注意不要让内容妨碍浏览顺序。文字行列以及段落的划分这些布局方式，都会造成一定程度上的视线移动的中断，所以这一点要十分注意。

以开始位置文字作引导

为了正确的阅读顺序，就必须明确突出正文开始的位置，代表性做法是加大正文第一个字的字号、改变字体或者颜色，同样，小标题等也可以起到引导作用。

6、有目的的留白设计

除了文字和图片，留白也是构成页面版式的重要因素之一。有目的灵活的运用页面的空白，设计恰当的页面留白，设计出来的页面会呈现出更美观的视觉效果。

减轻页面压迫感

页面完全没有任何空白、灰暗的图片或者颜色深且厚重的字体所占比重比较大的时候，会给用户带来一种压迫感和紧张感，常常让人视觉疲劳。因此，可以通过有目的的留白设计来得到一个放松且安静的页面。

改变页面形式

通过增加留白来使页面的版式发生变化，从一开始就抱有“破局”想法，抱有为了使页面发生一些变化而设计的一些留白。

扩展页面空间

如果在页面边缘位置安排留白，会形成向外扩展的一种宽松感，如果把这留白放置在被其它内容包围的中间位置，那这个留白就可能会形成封闭的紧张感的危险，如果就是有特殊需求，为了制造封闭紧张感，这种方法也可以适用，所以要紧密的结合实际设计目的来考虑处理方式。

7、版式内容的区分

把相同意思的内容集中成组，明确的区分出来，为了达到这个目的，调整不同内容的间距以及对它们进行区分，是版面设计的一个重要因素。

内容就近原则

相对较远的内容，临近的内容更能让人感到这种强烈的亲密性的结合感，所以整合的第一步就是将希望呈现的内容就近安排，而将不同内容安排在较远的位置上，这是一种很有效的处理方式。

边框与底色

灵活的运用边框或者底色对页面进行区分的处理，在使用边线的情况下，实线区分的更加明显更加彻底，而虚线会区分的柔和一些，边线的颜色和粗细要处理得当；另一方面，在运用底色的时候，要确保内容的可辨识度。

8、版式中的边线

当页面中有很多形状元素的时候，如果没有统一的边线，那就很难表达它们之间的关系，调整页面中内容的垂直边线、水平边线，也能带来页面视觉统一的效果。

图片与文字的边线

图片和文字这种不同内容的边线进行统一，可以形成井然有序的视觉效果，当利用段组的方式来进行排版时，以个段落的宽度和长度为标准来安排图片位置，图片和文字部分的边线比较容易统一。

图片的边线

对于多张图片的情况来说，有时候会因为图片的尺寸不同或者纵横位置不同，而不能全部整合到一起，这样的话，整合边线的统一，可以大幅度的减轻散乱的感觉。

9、统一元素的间距

在版式设计中，间距这个概念也是非常重要的版面构成要素，各部分内容之间的间距类型不要太多，这样就可以设计出井然有序的页面效果。

图片的间距

图片的间距能有效的表现出各图片之间的关联性，以及彼此之间结合的强弱，因此在安排图片间的间距的时候应该设置一定的标准，还可以将两张图片重叠设置，使其成为一体，以表现出较强的结合关系，提高各部分内容的可识别性。

文字的间距

文字之间的间距，在基本方法上与其他排版要素是一样的，包括确保内容的可读性的间距和表示内容之间相关性的相间距两种，把握好这两种间距的平衡尤为重要。

图片与文字的间距

图片和文字两个排版要素，按照统一的标准间距来表现彼此之间的关系很重要，统一的间距是首先要考虑的重要问题，平衡两者之间的关系很重要。

四、视觉心理的运用

由于视觉心理发生一定的作用，就会造成视觉上有一定的偏差，所以在版式设计中要注意这一点，要注意平衡实际情况和视觉效果的平衡。

1、居中的视觉偏差

在页面”天地“的中间位置安排文字，把文字直接放在中间区域，那在视觉效果上就会感觉文字是偏下的，因此将文字放置于实际尺寸的中间偏上一点的位置，这样处理就会在视觉效果上是居中位置，因此在设计中，应该优先考虑外观效果，而不是严格按照物理尺寸数据来做设计。

2、形状的视觉偏差

内容有统一的间距，但因为形状的不同，间距也会造成视觉上的偏差，因此，为了让这样的间距视觉上相同，就有必要将圆形之间的间距略微缩小一些，所以不能过于简单的依赖物理数据，更重要的是视觉上的效果。

五、黄金比例的运用

1、黄金分割的运用

黄金比例约为： 0.618:1

把一条线段分割为两部分，较短部分与较长部分长度之比等于较长部分与整体长度之比，其比值是一个无理数，取其前三位数字的近似值是0.618。

2、黄金分割线构图

页面的长宽比不同，黄金分割线的位置也有所不同，在移动端主流尺寸中，iOS尺寸使用750*1334，安卓尺寸使用1080*1920。这俩个尺寸正好等同于一倍图375*667的比例。

不同长宽比的画面我们按照0.618:1的比例，一个画面可以切割出4条黄金分割线，上分割线/下分割线/左分割线/右分割线。

3、简化的黄金分割线-三分线

黄金分割线不不易定位，所以简化分割线就很有必要了，这就是三分线，摄影中也有“三分构图法”其实也是一个简化的黄金分割线，就是把拍摄区域横竖三等分，相交的点就是画面中最自然的焦点，同样这种构图被用到视觉设计中它就是“三分线”，但将它运用到比例接近1:168的矩形中，将会得到一个非常接近黄金比例的构图。

4、黄金矩形的运用

运用黄金比例分割的长方形，这个比例运用到版式设计中，能够设计出更完美的页面，另外，以黄金比例为标准，比黄金比例更细长的矩形是一种端庄女性的图形，与之相反，随着它逐渐的趋向于正方向，这个矩形就会变成更加男性的构图。

六、总结概述

涵盖知识点

平面构成基础、ACRP原则、页面构成知识、视觉心理以及黄金比例等知识点。

知识点的运用

在页面设计中可能运用的不只是一个单独的知识点，运用理论知识应灵活变通，根据实际情况做出合适的处理，也许是很多知识点交叉并用然后得出的更加科学合理的页面，要想更好的提升自己，还需要进一步了解设计背后的科学方法论，不仅要在视觉上突破，更要在设计方法论上得到求证，让自己做出的设计作品科学合理有理有，希望此次分享能对大家有所帮助，谢谢！

Powered by Froala Editor