版式设计篇

xhw99

北京/设计爱好者/8年前/962浏览

版权

版式设计篇

xhw99

本章从UI设计的角度来讲解版式设计，使大家了解UI设计中常见的版式布局和表现手法，为大家在今后的实际项目中打下一个坚实的基础

第二章版式设计篇

目录：

第一节：方寸之间的版式

一、解读点、线、面

二、UI中的点、线、面

三、移动端布局分析

1、网格布局

2、列表视图

3、F式布局

第二节：版式构图分析

一、上下分割型

二、左右对称型

三、倾斜型构图

第三节：版式常见表现手法

一、留白的艺术

二、主体的表现

三、对比的手法

引语：

设计从平面延伸到UI，从纸质媒体跨越到如今的移动终端，其表现形式也发生了很大的变革，最有感触的应该就是从平面转到UI设计的同学们，他们通过不断的学习来适应这种变化，而作为一个UI设计师，需要具备平面、网页、UI的综合设计能力，版式设计是这一切的基础，因此了解版式是UI设计师绕不过去的槛。

本章将理论结合大量实际案例，从UI设计的角度来讲解有关于版式设计的知识，带领大家了解UI设计中常见的版式布局和表现手法，为大家在今后的实际项目中打下一个坚实的基础，下面就让我们开始一趟崭新的版式旅程吧！

第一节方寸之间的版式

说到版式设计，其载体既有户外的大型广告，也有手中方寸之间的移动设备，跨度之大非常考验设计师的水平，随着设计的演变，常规的一些版式布局和表现手法也已经不适应互联网时代的设计需求，但是不管设计如何演变，版式设计中的一些核心表达方式是不变的，设计师会利用字体、图形、特殊符号等来表达想法，因此如何编排文本、处理图形元素、搭配颜色等等，都成了设计师最重要的工作，把这些不同风格的设计元素揉入到一个页面，版式设计显得尤为重要。

很多人看到好的作品都会禁不住发出赞叹之声，但是不清楚好在哪？或者如何去解读隐藏在作品背后的设计语言，这些都会影响大家汲取好作品的精华，接下来从版式入手，给大家分析UI界面设计所需要考虑的知识点。

一、解读点、线、面

点、线、面是构成视觉空间的基本元素，也是版式设计上的主要语言，页面如果没有这些元素做基础，是经不起推敲的。不管是传统的海报还是移动端的界面设计，都需要通过点、线面来协调页面关系，通过这些元素的不同组合，产生形式上的美感。

图1-1

图1-1是对点、线、面一个简略的解析，“点”既可以是一个抽象的“点”，也可以是一个具体的形状、文字，以此类推，“线”与“面”都可以延伸到设计元素中的方方面面，由此可以打开设计师的创作空间和思路，把我们生活中所能见到的各个物品都可以列入进来，下面我们来看几个案例：

图1-2

大家看图1-2，是一个社团话剧汇演的海报，画面中生动有趣，虽然看不到现实意义的“点、线、面”，但是点线面的关系非常明确，面积最大的人物作为“面”的存在，是画面的重心，中心线位置的四个广告文字具有连续性，形成了“线”的关系，而人物周边的生活用品则被设计师很好的安排成“线”的关系，使得画面整体非常生动有趣，让人过目不忘。

图1-3

大家看第二个案例图1-3所示，是一幅常规的海报设计作品，设计师在画面中使用很少的色彩和设计素材，而是巧妙的运用点、线、面来营造出一种设计氛围，画面中的小的英文字体和多个线形圆环及大面积的倾斜三角形，构成画面的主体，形成一种独特的时尚美感，这种画面的表达形式，比较适用于图片有限、素材少的设计项目，为了让版面看起来活跃，便可以利用点、线、面的灵动特征进行穿插组合，来达到设计师的目的。

二、UI中的点、线、面

在传统的平面设计中，像企业VI、户外广告、书籍印刷等等，多以“静态的视觉”呈现在公众面前，缺少有效的沟通互动，而在现如今的移动互联网时代，方寸之间展现的形式不光发生了根本的变化，同时考虑更多的是如何有效的与用户进行互动。

因此在更多的页面设计中，功能内容便充当起点线面的作用，被设计师巧妙的布局在页面中，使其内容和版式高度统一。

图1-4

大家看图1-4所示，是国外一款在线音乐播放器的UI界面设计，页面上半部分的“播放按钮和播放条”有序的布局在页面中，形成点线的关系。这些点和线有机的结合到界面功能中，每一个按钮、每一个箭头都充当起与用户交互沟通的作用，

下半部分则是图文结合的列表模式，点、线、面的感觉非常强烈，列表左侧的图片形成面的关系，其中的分割线即分隔了空间，也是设计中的线，右侧的播放箭头则起着引导用户点击的作用。

这是一个点、线、面与功能结合的比较好的案例，设计师利用页面的功能图形来进行布局设计，整个页面设计的错落有致，功能清晰明了，又兼顾了设计的美感。

在UI设计中，极简设计也开始盛行起来，页面通过一些简单的点线组合既可以传递出一种形式上的美感，由于视觉载体的不同，方寸之间能容纳的有效设计元素非常有限，这就要求设计师在元素上不断的做舍取，无效的图形元素和色彩将被舍弃。

图1-5

大家看另一个案例，如图1-5所示，是一款名叫iFASHION的APP产品，由中法共同合作打造的，中国首个以时尚视频与新闻为主的应用APP，现在大家看到的是之前的旧版设计，虽然已改版，但是笔者更喜欢旧版这种简洁的风格，界面整体采用简约的线条，同时借用内容本身的视频及图片元素，通过设计师的组合设计形成了一种时尚的美感。

页面中的视频和图片是产品的重点内容，也是设计元素中最大的“面”，这个“面”支撑起整个画面，是整个画面的重心，同时页面中的文字和小图标则作为元素“点”来进行搭配设计，配合简约的分隔线，使得整个产品没有过多的运用装饰元素，便达到了设计师的意图，即呈现出时尚、大气、现代的气息。

三、移动端布局分析

在移动互联网的时代，智能手机以它轻便、高效的优势逐步取代了台式电脑，成为人手一部的电子产品，尽管屏幕越做越大，但是相比台式显示器，手机里的屏幕只能容纳有限的信息，因此在手机里，一个界面的阅读体验好不好，很大部分取决于页面布局的合理性，设计师在产品策划阶段，就需要去了解产品最原始的布局。

特别是移动端界面设计，由于受到屏幕尺寸的限制，内容过多的产品不能很好的在一屏展示出来，并且容易导致页面信息杂乱无章，这种情况下如何提升阅读舒适感和流畅的用户体验？是UI设计师在设计之初就需要考虑的问题。大家看下面这个案例：

图1-6 图1-7

看图1-6和图1-7的对比，图1-6是电脑版的淘宝官网，由于是在台式显示器上面浏览，页面宽度基本不受屏幕分辨率的限制，在页面的信息量非常大的情况下，设计师也能游刃有余的考虑多样的版面布局，因此最终呈现在用户面前的是一个琳琅满目，充满各类商量的页面。

而图1-7是移动端的淘宝官网，通过对比，大家就能清晰的看出来，由于受到移动端小屏幕的限制，设计师在布局页面的时候，可考虑的版面形式非常有限，这就需要设计和产品经理从一个全新的角度来策划这个页面，需要考虑到用户的不同手机屏幕和分辨率、用户的交互行为，不同的用户体验等等，因此设计师在设计的时候完全抛弃了电脑版官网的版式，设计了全新的版面布局，以方便小屏幕和不同分辨率下的手机用户进行浏览。

以上只是举一个小例子，通过这个例子，大家能看出，UI设计跟网页设计相比，需要考虑的东西很多，就版面布局方面来说，区别还是非常大，首先在有限的范围内如何显示信息，就需要设计师对信息进行有效的组织，通过合理布局把信息展示给用户。合理的布局可以使页面信息变得有序，用户能很方便找到自己想要的信息，因此设计师很有必要去了解一些页面布局的基本模式，才能在将来的工作中会更得心应手，下面跟大家分析两种既实用又常见的布局模式：网格布局和列表视图：

网格布局列表布局

1. 网格布局

常规的布局就是对页面的文字、图形等设计元素进行编排设计，而网格布局就是根据页面的内容量，把界面划分为多个网格状的结构框架来展示内容，设计师可以根据设计好的网格，来有效的组织文字和图片的排布，所有的设计元素根据网格的位置摆放其中，简单且易于管理。

网格布局在传统的网页设计上被称为“栅格化布局”，就是把网页宽度分成固定的相同宽度，然后再组合出两栏布局或三栏布局的模式，方便在进一步设计的时候能快速的对页面进行布局。

图1-9

大家来看一个例子，图1-9是电脑版腾讯官网主界面，界面上已经用颜色划分出“栅格化”的主版块，能看出它是一个典型的“三栏式布局”，在这个基础之上，每个版块内部再进一步的细分小版块，由此整个界面的布局就确立起来了。这种布局非常适合呈现信息量大的页面，腾讯官网作为一个知名的门户网站，采用这种三栏式布局更有利于用户清晰的浏览自己想要的信息。

网格布局的特点是：在规定的间隔下用没有任何多余修饰的水平线和垂直线的交叉布局，通常我们会在展示类、博客和新闻相关的网站看到清晰的网格，像电商购物平台兴起之后，大家能发现，基本上电商类的页面设计都是使用网格型布局来展示商品，曾经有人说过，网格布局即拯救了电商网站，也成全了电商网站（分类展示信息；整合不同的部分同时能让他们自我独立开）。

图1-10 图1-11

图1-10是某个电商APP界面，这只是截取了首页中的一小部分，大家能看到，虽然页面上展现的商品比较多，但是并没有显得凌乱，而是显得非常井然有序，通过图1-11中的绿色网格线大家能看出其中的奥秘，绿色网格线把首页分割成左右平均的空间，每一个网格盛放一个或两个商品，这些商品图片都是有规律的摆放在网格中，虽然设计师弱化了网格线，但是页面依然会给用户带来良好的视觉体验。

从视觉层面上来说，网格布局更容易区分所呈现的内容，用户的注意力在每个网格间也能均匀的迁移。这就是为什么电商页面商品图片很多，但是用户视线依然不受其它商品的干扰，能够很准确清晰的找到自己想要的东西。

图1-12

图1-12是一款名为“Artand”的APP产品，一个为艺术家、收藏家提供的免费社交平台，艺术家可以快速创建个人主页、发表作品和文章，买家也可以通过这个平台去发现值得关注的新艺术家。

“Artand”的界面版式采用了网格化布局，整个产品界面设计的非常简洁，看作品的第一眼，能明显感觉到页面的图片和颜色非常丰富，如何处理好这些作品图片关系，摆在了设计师的面前，而网格化布局发挥了它的作用，把这些颜色丰富的图片有序的呈现在网格中，能更好的区分不同艺术家的作品，同时每个页面根据功能的不同，采用了不同方式的网格来呈现内容，是值得大家学习的。

2. 列表视图

列表视图是指在页面上垂直呈现多个连续的列表元素，是设计中最常用的布局，列表视图的内容呈现方法更符合人们自然的阅读模式，手机屏幕一般是竖屏显示，列表内容可以不受屏幕长度的限制，通过手指向下滑动，可以查看更多的内容，这种布局可以使用户在有限的范围内查看更多信息，也比较容易让用户接受。

图1-13 图1-14

图1-13和图1-14是豆瓣APP中的两个产品界面，虽然两个页面的内容和表现形式不同，但是它们都采用的是竖式列表来进行布局，图1-13是采用文字+图片的结合模式，再进一步向下循环，是一个典型的分类信息列表布局，这种列表布局在处理信息比较多、比较复杂的内容时可以采用，使得列表内容化繁为简，视觉上比较整齐美观，

图1-14也是典型的分类列表，但是三张图片并列再进行循环，使得不同的图片之间不会相互干扰，类别之间清晰明了，用户也很容易能找到自己感兴趣的信息。

通过上面两个案例的分析，能看出列表视图最适合用来处理同类型的信息，并易于人们的阅读理解，通过向下滚屏的方式，减少了页面的数量，使得整个产品用尽量少的页面展示更多的信息。

3. F式布局

说到F式布局，大家需要了解一个概念，那就是“视觉流程”，视觉流程是指版式设计中的文字、图形、色彩等元素在排列方式上形成一种先后顺序和主次关系，也是页面设计对于用户的视觉进行有顺序的引导，你的页面上哪些是重要信息，哪些是次要信息，用户先看什么，后看什么等等，这些都需要通过页面视觉流程的规划来实现。

视觉流程也是一种“空间的运动”，是人的视线随各元素在页面沿着一定轨迹运动的过程，通常情况下，视觉流程的形成是由人的视觉习惯决定的，人在浏览页面信息时，视线一般是按照“从上到下、从左至右、从动到静”的浏览习惯，这符合用户心理学的研究，心理学认为人的浏览顺序是 “从页面的左上角沿着弧线向右下角移动”，因此视觉流程也是人眼从一个视觉中心向另一视觉中心迁移的过程。

图1-15

大家看图1-15所示，属于常规的F型列表布局模式，在这个模式中，视线从左上角开始，向画布的右边移去，然后再向左下角移动，重复之前的移动模式，而一般这个模式就像字母F的形状。F型的视觉流程隐藏在页面设计中，能够很好的引导用户按照设计师的意图来进行浏览页面，

F式布局也是网页设计中传统的布局方式，设计师通过页面元素的布置，来引导用户的视觉路径，用户体验上更加自然友好，在网页设计中就大量运用了这种布局。

图1-16

大家看图1-16，是腾讯公司的的官网首页，页面使用了F型这种很科学的布局方法，依照视觉流程，用户先看页面的左上角，依次从左向右浏览，因此设计师习惯性的把重要元素，诸如品牌Logo，导航，标题等等，放在左边，由于用户不太注意右边的信息，因此在设计页面时，页面右侧不会下太大的功夫，大家能看到图中右侧放置的是固定导航和广告，内容不变以减少右侧的设计元素对访问者产生干扰。

接下来，用户的视线下移，开始阅读下一行的内容。其整体视觉顺序是按照字母F型的路径来进行浏览，设计师只有很好的了解这种布局方式，才能够化繁为简，建立起鲜明的秩序感。

第二节 版式构图分析

作为UI设计师，在设计的任务上不只是APP界面，还会接触到大量的市场活动页和电商广告的设计任务，活动页和电商广告在设计上有很多共同点，比如醒目的广告语、吸引眼球的高质量图片或相应的产品图形、以及符合主题的色彩等等，这些设计元素摆列在页面中，如何营造出页面的节凑感？

这就要求设计师需要掌握一定的版式构图知识，了解版式构图就等于打开了创意的源泉，灵活的构图可以适当地打破画面的僵板，平衡丰富页面的节奏感，因此我们在设计页面或广告的时候可以尝试多种不同的构图布局，多反复进行调整，直到找到最为合适的构图方式再往下添加设计元素，进行细化，丰富画面。下面给大家介绍几种广告设计中常见的版式构图：

一、上下分割型

上下分割型在广告设计中使用的频率比较多，是指把整个页面分为上下两个设计区域，两个区域间在内容上排列不同的设计元素，可以放置广告语、产品图形、符合主题的颜色等等，上下之间的元素不同，也形成了视觉上的一种对比，比如广告语在上半部，下半部则配置图片，这种上下图文结合的构图符合用户的视觉流程，是一种比较常见的构图，尤其是在电商广告设计中，为了更好的展示商品信息，设计师采用这种自上而下的浏览模式，减少了内容对用户产生的干扰，使画面一目了然。

图1-17

大家看图1-17，是一款运动鞋的广告，采用了上下分割型的构图方式，广告文字处于产品图形的上方，上下两块区域元素区分的比较明显，使得画面干净利索，用户很容易读取画面各自的信息。

上方的广告语整体设计成一个方形，理性中包含了很多细节变化，文字设计上采用了不同的颜色和大小之间的对比，来区分广告语的主次关系，同时产生视觉上的美感。

而下面的鞋子图片面积处理的比较大，加上醒目的红色，显得动感十足，使得整个广告画面感性而有活力，从视觉上来说外形方正的广告语与鞋子也形成“静与动”美的对比，也加深了用户对这款鞋子的印象。

不光是在网络广告中会运用到这种上下分割的构图，在如此大家见到包装设计中也会大量使用这种构图模式，大家看第二个例子，如下图1-18所示：

图1-18

图1-18是一款茶饮料的外包装设计，画面展示的视觉元素比较多，在不改变画面结构的情况下，如何来区分不同的口味？就需要设计师巧妙的来处理。

通过分析我们能看出，设计师采用这种上中下分割型的构图方式，三块区域之间的元素区分的比较明显，使得外包装的画面井然有序，并没有让用户产生凌乱的感觉。在包装的最上方，设计师增加了一个通栏的色块，通过运用不同的颜色块，来贴合相对应的饮料口味，同时不同的颜色也增加了包装的趣味性和用户的更多选择性。

在UI界面中，这种构图方式也经常用到，大家看下图1-19：

图1-19

二、左右对称型

左右对称型就是把整个版面分割为左右两个区域，并在区域内分别配置相应的设计元素，使得左右两边的元素大致对等，形成一种均衡有序的感觉，这种左右对称式的可为画面带来一种庄重肃穆的气氛，具有平衡稳定的特点，也符合人们的视觉习惯，成为广告设计中一种常见的表现形式，是大家最容易接受的一种构图模式。

图1-20

大家看图1-20所示，是一个时尚的杂志封面设计，第一眼能够明显的区分出左右两边是运用了不同的背景颜色，这种大面积的颜色对比，构成了视觉心理上的主体，而文字与模特放置在左右两个区域，也丰富平衡了整个画面，体现出年轻人一种活力四射、桀骜不驯的感受。

不过，左右对称型构图不能机械单纯的对等，如处理不好，会给人造成枯燥单调，缺少变化的感觉，设计师必须在对等之中有所变化，或者蕴含趣味性，否则就会平淡乏味。

而图1-20的画面整体不会让人觉得突兀，是因为设计师将中间分割线虚化处理，巧妙的使用文字与模特进行左右穿插结合，使得左右图文变得自然和谐。

图1-21

我们再看另一个案例，大家看图1-21所示，是一家公司的网站首页，属于左右非对称式的布局，为了体现出一种传统的儒雅风格，画面主体运用了中国茶的图片，占据了画面右侧大部分的位置，成为整个页面的绝对核心，大家能够发现，虽然右侧的图形占了大部分面积，但是用户还是会不自觉的把焦点注意到左侧的文字区域，这是因为设计师巧妙的运用了这左右非对称式的对比手法，在画面颜色最深的区域排列上文字，强烈的对比成功的吸引用户注意力，也平衡点缀了整个画面的气氛。

三、倾斜型构图

倾斜型构图是指版面主体元素或辅助元素做倾斜编排，造成版面强烈的动感和不稳定因素，常规来说，这些设计元素经过倾斜的构图处理，会给人带来一定的视觉冲击，这也是设计师所要达到的目的。

图1-22

大家看图1-22，是一个有一定知名度的运动品牌广告，画面元素运用的比较繁杂，但是并不凌乱，这是因为整个画面从地平线、文字、人物、背景都被刻意的处理成有一定角度的倾斜，具有统一的方向性，带给用户强烈的动感和视觉冲击，传达出一种运动感、活力感、节奏感。

图1-23

大家看图1-23，是一副汽车比赛的海报设计，属于典型的倾斜型构图，画面上的汽车图形和文字向左倾斜30度的角，营造出一种向上冲击的视觉感官，画面整体元素不多，但是由于采用这种倾斜的构图，使得画面整体风格非常新颖独特。

第三节 版式常见表现手法

电商广告的版式设计，就是将广告语、产品图片、辅助图形等信息元素在版面布局上调整位置、大小，使版面达到美观的视觉效果。

使用不同的构图方式，穿插性地将图片整合在构图的形状中，能让广告变得富有活跃性。这样的表现方式还能将产品的气质融入进去，淋漓尽致地得到展现。有节奏感的设计更为取巧地加强了版式效果。在电商广告中，图文的穿插可以引导用户的视线，让原本简单的内容变得有趣。在层次上，也可以区分内容的主次性，让阅读更加轻松。

灵活的构图可以适当地打破画面平衡丰富页面的节奏感，因此我们在设计广告的时候需要尝试多种不同的构图，可以反复进行调整，直到找到最为合适的构图方式再往下进行细化，添加元素，丰富画面。下面给大家介绍几种常见的版式表现手法。

一、留白的艺术

“留白”常指中国传统书画艺术创作中的手法，为使整个画面更具美的表现力，艺术家有意留下相应的空白，使作品具有独特的品质和气质。而如今随着UI设计的迅猛发展，设计师有意将这种艺术上的表现手法运用到页面设计中，通过页面上的留白，打造出一种简洁的设计效果。

设计师平时都会有收集设计素材的习惯，很多页面或多或少都会用到一些设计素材，其实一些有经验的设计师都很清楚，有时候留白也是最有力的设计素材，它使得文字清晰易读，将注意力吸引至某部分，并且有助于打造整体氛围，因此可以说有时最有效的设计技巧，就是什么也没有。

图1-24

大家来看一个案例，如图1-24所示，这是苹果官网的产品展示页面，画面元素不多，为了突出产品本身，北京采用了纯白色，没有任何多余的颜色和修饰图形，算是苹果公司一贯的极简化设计风格，这种留白配合产品本身丰富的颜色，使得画面整体不空洞，也非常富有时尚感，符合手环这块产品的科技感。

图1-25

我们再看另一个案例，如图1-25所示，这是一本杂志封面的设计，画面设计元素不多，背景采用淡灰色，除了文字、一个图加上日期，就没有多余的修饰，这种版式搭配起来，给人一种非常清新雅致的视觉感受，当我们手上拿着这本书的时候，那肯定是一种非常享受的时刻。

二、主体的表现

什么是主体呢？常规来说主体就是主角、重点、核心的意思。而从设计上来说，一个画面的主体也许是醒目的产品图形，或者是画面中最显眼的颜色，也可能是超大的广告文字等等。在常见的广告设计里，这些元素都有可能成为一个画面的主体，突出主体是更好的为这个产品进行宣传服务，最终目的：就是让这个主体产品引起用户的注意，同时也让用户更易于识别这个产品。

我认为的主体包含三层意思，第一层是页面要传达出的“主体思路”，这个思路决定了在页面设计上需要使用什么样的风格，运用什么样的色调、图形元素等等，设计师需要根据不同的主体思路而决定采用不同的设计方法。比如教育类的产品，没有具体的实物，如何传达出页面的气氛呢？这个时候可以利用孩子在学习的照片或相关素材来体现出教育或学习的主题，它们也就是画面的主体。

第二层意思就是从单纯从版式设计上来进行考虑，也就是“主体的表现手法”，这个表现手法也可以说是一种设计方法，也是设计师经常会运用到的技巧，如何运用和突出页面的主体也是一个设计师需要掌握的基本设计方法。

在版式设计中，最常用的主体表现方法大部分都是通过“面积对比”来达到突出产品主体的诉求效果，页面中面积最大的某一个元素（可能是最大的色块，或者是最突出的产品图形，或广告文字等等）是画面的绝对主体，通过这个设计元素的不同面积大小的对比，给用户

图1-26

大家看一个案例，如图1-26所示，这是一款VIVO手机的宣传广告图，投放的网易云音乐APP的启动页上，这种广告由于受到屏幕尺寸的限制和显示时间的限制（显示3秒左右），不利于用户仔细观看，这种情况下广告图如何利用有限的屏幕和时间抓住用户的眼球，是很考验设计的水平的，图1-25这个广告第一眼进入我们眼帘的就是占据画面大部分的手机图形，让用户第一眼就非常清楚这是一款手机宣传页面，同时在手机下面设计了超大的广告文字，除了手机本身的产品图形和广告文字，没有任何多余的设计元素来干扰画面，是一个非常简单粗暴，确非常有效果的广告设计。

通过图1-25的广告，我们能看出，主要的产品图形可根据需要放大它的面积，占据画面的大部分，从而让它成为整个页面最引人瞩目的元素，而次要的元素可缩小，来配合主体图形进行设计上的对比。

主体还有另一层意思就是这个画面传递最重要的信息是什么，如何来呈现，让用户第一时间能看到，这就是第三层的主体意思，即页面中最重要的位置可以放主体内容，在之前的章节中跟大家介绍过，人的浏览流程是从上至下，从左到右的顺序，设计师了解了人最基本的生理规律，就能够很好的利用这个规律让自己的页面达到很好的诉求效果，在常见的手机UI界面中，放在第一屏显示的内容就是一般是此产品重要的，可称之为核心内容的主体。

图1-27

大家看来一个案例，如图1-27所示，这是支付宝APP的首页，第一眼感觉没有什么主体和重点，其原因是此页面基本都是由各个小功能模块组成，没有大的图形和大色块来吸引用户，因此用户进到这个页面就像阅读书籍一样，自然而然会从页面的最上部开始浏览,因此支付宝把最重要的主体功能按顺序依次从上往下，从左到右进行排列，这也是符合我们最基本的浏览流程。

三、对比的手法

自然界的事物只有在对比中，才能产生美，红花配绿叶是大众心中一个约定俗成的审美观，如图1-28所示：大面积的绿色背景中点缀着一块红色，对比中产生了变化，这种变化既有来自于颜色的对抗，也有面积上的区别，这种低饱和的绿色背景，使得页面形成调和统一的关系，因此可以说大自然是我们最好的老师。

图1-28

对比也是版式设计中，最常用最重要的设计手法，想要使页面中的某个产品或图形突出，就必须有与之相对应的元素来进行比较，这个“元素的比较”手法很多，即可以是色彩上的比较，也可以是大小上的比较。还包括明暗的对比、质感的对比、位置的对比等等，这些种类繁多的对比手法，无一不被设计师绞尽脑汁的派上用场，同时也是设计师最需要掌握的基本设计能力。

图1-29

大家看一个案例，如图1-29所示，是一个国际旅行社的广告推销页面，页面上半部分的黄色跟下半部分大面积的蓝色形成一种鲜明的冷暖对比，增强了画面的节奏感，同时这两种颜色把画面分割成两块独立的区域，分别展示不同的功能内容，黄色的区域主导着页面的主题，变形的文字通过不同的排列组合富有很强的设计感，充满了活力也传达出一种热情奔放的气息，而版面下方的蓝色区域则是具体的内容，清凉的蓝色让人在一种冷静中阅读信息，这种通过冷暖色对比来划分版面的布局，给人产生一种既有激情，又有恬静淡雅的视觉冲击。

在视觉设计中，色彩的对比使用频率是最高的，设计师会根据作品采取不同的用色方式，比如，同一个色系，通过不同的明度和纯度之间的变换来产生节奏感，或者是同一种颜色，通过不同的位置、比例的分配来产生节奏感，通过色彩变换的节奏感与用户产生某个相同频率的共鸣时，作品的力量便显现出来，不光使人得到审美情趣的满足，也加大了产品的说服力和提升了产品自身的形象。

页面的颜色由很多元素组成，比如说产品的图形颜色、辅助色块、广告语颜色等等，如何让这些纷繁杂乱的的色彩元素组合成一个经典的作品，是需要设计师下功夫的。

图1-30

大家看另一个案例，如图1-30所示，这是一个利用保卫萝卜这款游戏，开发的在线制作萝卜饮食的H5小游戏主页面，页面整体风格比较Q，设计元素非常具有游戏化和卡通化，这个页面采用了突出画面色彩的对比，主要的产品颜色跟次要的辅助颜色进行区别开来，在整体橙色系的基础上，页面最重要的按钮，被设计成绿色，跟其它的元素颜色区分开来，让人在繁多的设计元素中能够一眼就识别出来，并且也成为了画面的核心，这种颜色面积的对比手法增强了画面的可读性，其目的就是把用户引导到游戏界面内，让更多的人参与进来。

在图1-30的案例中，即包含了色彩的对比，也包含了面积大小的对比，是大小对比的一个典型案例。在版式设计中，大小对比常用于表现出画面的主次关系，通过设计元素的主次来突出设计师所要传达的重点，在实际设计中，设计师经常会把主要的内容和比较突出的形象，处理的较大些，而次要的辅助信息，会弱化很多。