设计和绘画一样，对需求和内容进行分析，采用适当的构图可以化繁为简，提高设计效率。构图的核心重点在于弄清楚产品的功能核心和卖点，把它们凸显出来，最终让用户获得更加舒服的体验。而杂乱无章的堆积会显得非常糟糕，甚至有时候用户会因为找不到自己想要的东西而马上离开，并留下非常不好的印象。通过前期构图可以节省时间，让设计更有条理。

1.什么是构图 构图就是在有限的画面中将各种元素进行合理的布局和安排，使图形和文字在画面中达到最佳位置，产生最优视觉效果。

构图是整个画面的“骨架”，决定了视觉营销界面是否能准确地 表达主题，吸引用户注意。

2.常见的构图方法

下面介绍几种界面中常用的构图方法。

九宫格构图

人们最常见的九宫格构图是手机的解锁界面，如图6‑1所示。这种构图主要运用在以分类为主的一级页面，起到功能分类的作用。

图6‑1 九宫格构图

通常在界面设计中我们会利用网格进行布局，根据水平方向和垂直方向划分构成的辅助线，设计会进行得非常顺利。在界面设计中，九宫格这种类型的构图更加规范和常用，用户在使用过程中非常方便，应用功能会显得格外明确和突出，如图6‑2所示。

图6‑2 九宫格界面设计

九宫格给用户一目了然的感觉，操作便捷是这种构图方式最重要的优势，灵活地运用九宫格辅助线区分出来的方块能够在有规律的设计方法中寻找突破。

在分配9个方块的时候不一定一个内容对应一个格子，也可以一对二、一对多，打破平均分割的习惯，增加留白，调整页面节奏，或者突出功能点或广告。各个方块的组成方式不同，页面的效果也会产生无数的变化，如图6‑3所示。

图6‑3 变化的九宫格

可以看出，这样的版式可以使界面变得非常灵活，内容简单、信息明了。

圆心点放射性构图

圆是有圆心的，在界面中往往通过构造一个大圆来起到聚焦、凸显作用。

放射性构图有凸显位于中间的内容或功能点的作用。在强调核心功能点的时候可以试着将功能以圆形排列到界面中间，以当前主要功能点为中心，将其他按钮或内容呈放射状排列起来。

将主要功能设置在版式的中间位置能引导用户的视线聚集在想要突出的功能点上，即使视线本来不在中间位置，也能引导用户再次回到中心的聚集处，如图6‑4所示。

图6‑4 圆心点放射性构图

在界面设计中，圆形的运用能使界面显得格外生动，在多数可操作的按钮上或交互动画中都能见到圆形的身影。

由于圆形具有灵动、活跃、有趣、可爱、多变的特点，在界面设计中常常将圆形设计与动画结合，从而让整个软件鲜活起来。界面中的圆形能集中用户的视线，引导用户进行点击操作，突出主要的功能点或数据，把产品核心展现出来，如图6‑5所示。

图6‑5 界面中的圆形

圆心点放射形设计会使软件显得更加智能化，包容万象。

如果要体现的功能点非常简单，只有几个功能按钮，可以尝试大圆的展示设计，突出最重要的功能，然后罗列并排出其他功能点。这种方式非常实用，就和画重点一样，圈出

三角形构图

这类构图方式主要运用在文字与图标的版式中，能让界面保持平衡、稳定。从上至下式的三角形构图能把信息层级罗列得更加规整和明确。

在界面中三角形构图大部分都是“图在上、字在下”，使人阅读起来更为舒服，有重点，

个人信息页常用三角形构图。头像明确了这个页面的内容，而下面的粉丝、喜欢等数据就是对本人的一个描述和介绍，如图6‑8所示。

如图6‑9所示，儿童卫士宝贝信息设置页面运用了三角形构图与圆

图6‑7 三角形构图

图6‑8 三角形构图

图6‑9 三角形构图与圆形构图结合

3.视线在界面中的构图法则

在设计实践中，如何引导读者视线对增强用户体验有重要作用。好的构图视线法则能够让用户获得非常舒服的阅读体验，而杂乱无章的构图往往让用户厌倦。

在进行界面设计的时候，对用户的视觉移动方向的预设是非常重要的。在界面中加入更为顺畅的构图设计引导用户视线移动的元素就能使用户更多地观察到产品的核心和产品的卖点。

视线流动的轨迹多是从上至下、从左到右移动，如果不能围绕这样的视线轨迹进行排版，用户在阅读的时候会显得很吃力，找不到重点，从而产生反感，所以在界面设计中需要格外注意这个地方。现在的界面一般是上下滑动的，负担和减轻用户的阅读疲劳。

界面中最基础的视线构图是S形视线构图，如图6‑10所示。

那么在界面中怎么运用S形视线构图呢？对于S形视线大家都懂，关键是如何运用S形视线来抓住用户眼球。

首先看一下视线的轨迹，在视线转角处视线轨迹最为密集，浏览更为集中在切换的地方，视线转折的地方停留时间最长，如图6‑11所示。所以应该把重要的、想要突出的产品或功能放在此处，这样更容易让用户记住产品的卖点。

此外，为了帮助视线移动方向，图片的处理也非常讲究。在如图6‑12所示的介绍中，第一张图片展开的效果用到了三角形构图，第一屏手机的展开方向与视线保持一致，强化了引导视线轨迹的指示性。同时多张图片借助手机排列方向引导到视线轨迹，很好地实现了图片—文字—图片之间的切换，将用户带入到整个产品画面中。

图6‑10 S形视线构图

图6‑11 视线转折处

图6‑12 构图

为了使用户的阅读更有推进性，在图片层次和空间上也需要注重用户的视线效果，将焦点调整到合理的视线位置上，产品正面方向对准视线的来源点。通过这些调整不仅能使阅读顺畅，更加强了界面的平衡性。

与左右构图相比，S形构图在上下滚动页面上优势非常明显。左右构图很容易给人疲劳感，而S形构图将图片和文字完美地结合在一起，配以大量的留白，如同山间的溪流，给人轻快、流畅的感觉，如图6‑13所示。

在如图6‑14所示的界面中，设计师很好地运用了S形视线构图，增强了穿插感和灵动性。人物的信息上下穿插布局，头像则成为视线的转折点，使这种双列模式的排版更有节奏。具体到每一部分，头像与内容采用了三角形构图，内容描述段落用到了文本居中式，画面显得稳定、和谐。

图6‑13 构图(www.daowen.com)

图6‑14 S形构图

在引导页中也常常用到S形构图。图文穿插布局，这样的构图层次感分明，动感十足，如图6‑15所示。

图6‑15 引导页

由图文版式布局还可以演变出F字形构图，这种类型的构图大部分运用在图文左右搭配图和Banner中，如图6‑16所示。使用F形构图能使图文搭配更有张力、更大气，使产品信息更为简单、明确。

图6‑16 图文左右搭配图

在F形构图中，主图为F的主干，右侧两行（或两部分）文字为辅，要注意合理分配图片和文字的占比，如图6‑17所示。

图6‑17 F形构图

F形构图用在Banner中能使标题更为突出、主题更加吸引视线，如图6‑18所示。

图6‑18 Banner中的F形构图

值得注意的是，要充分利用主图的画面的指向性。例如，主图是人物，可将文字放置在与其眼神、朝向、手势等对应的方向，加强视线引导；如果是产品图，则可以通过产品的朝向来引导,这样用户能最快速地关注到文本信息，加强认知度和购买度，如图6‑19所示。

图6‑19 指向性

4.构图原则 对用户行为的迎合和引导有一些既有原则和方法，基本原则如下。

公司/组织的图标（Logo）在所有页面中都处于同一位置。

用户所需的所有数据内容均按先后次序合理显示。

所有的重要选项都要在主页显示。

重要条目要始终显示。

重要条目要显示在页面的顶端中间位置。

必要的信息要一直显示。

消息、提示、通知等信息均出现在屏幕上容易看到的地方。

确保主页看起来像主页（使主页有别于其他二、三级页面）。

主页的长度不宜过长。

APP的导航尽量采用底部导航的方式。菜单数目以4～5个最佳。

每个APP页面长度要适当。

在长网页上使用可点击的“内容列表”。

专门的导航页面要短小（避免滚屏，以便用户一眼能浏览到所有的导航信息，有全局观）。

优先使用分页（而非滚屏）。

滚屏不宜太多（最长4个整屏）。

当需要仔细阅读理解文字时应使用滚屏（而非分页）。

为框架提供标题。

注意主页中面板块的宽度。

将一级导航放置在左侧面板。

避免水平滚屏。

文本区域的周围是否有足够的间隔。

各条目是否合理分类于各逻辑区，并运用标题将各区域进行清晰的划分。

这些APP界面布局原则可以保证页面在布局方面的最基本的可用性，非常适合APP设计新手来掌握。

5.构图的四项基本法则

四项法则分别为均衡、对比、律动、视点。

均衡

各元素在布局上保持视觉重量的平衡和匀称，从而使视觉界面具有平衡感和稳定性。对称是均衡的一种极端情况，平衡感和稳定性很强，适合于表现但局限性较大、缺乏变化，如图6‑20所示。

图6‑20 均衡

对比

在视觉界面中通过大小对比、字体大小、粗细对比、疏密对比、曲直对比等形式来突出和强化主题，引起用户关注，如图6‑21所示。

图6‑21 对比

律动

律动可以理解为有节奏、规律、跳跃、动感等元素，起引导用户的视觉轨迹的作用。研究表明，画面右上角最能吸引人的关注，而左下角对人的吸引力最小。律动能给人视觉上富有规律的节奏效果，进而吸引用户了解APP界面内容，如图6‑22所示。

图6‑22 律动

视点

视点即视觉的中心点或者是视觉焦点，也是视觉传达要素的核心点。构图的视觉中心一定是界面最重要的内容，也是必须让用户了解的内容。视觉中心常常在画面中518的地方，以此为基础进行视点构图更能突出表现视觉主题，并将用户的注意力集中到主要内容上，如图6‑23所示。

图6‑23 视点