界面设计之构图篇

收集于

Paste_Image.png

一、九宫格网格构图
这种版式主要运用在分类为主的一级页面，起到功能分类的作用，一目了然，操作便捷。

Paste_Image.png

Paste_Image.png

Paste_Image.png

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

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

Paste_Image.png

圆形具有灵动、活跃、有趣、可爱、多变的特质，界面中的圆形能集中用户的视线，引导点击操作，突出主要的功能点或数据，把产品核心展现出来。

Paste_Image.png

Paste_Image.png

三、三角形构图

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

在界面中三角形构图大部分都是图在上，字在下，阅读更为舒服，有重点有描述。

Paste_Image.png

Paste_Image.png

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

Paste_Image.png

当时在设计儿童卫士宝贝信息设置页时运用到了三角构图与圆形构图的结合。将体重刻度做成可滑动操作的方式，而卡通形象来突出设置的对象及这个页面的功能。

四、视线在界面中的构图法则（SF字形构图）

视线流动的轨迹多则是从上至下从左到右移动，界面中最基础的是S形视线构图

Paste_Image.png

在视线转角处视觉轨迹最为密集，浏览更为集中在切换的地方，视线转折的地方停留时间最长。

Paste_Image.png

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

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

Paste_Image.png

引导页中也会常常运用到S形的构图。图文进行穿插布局，这样的构图层次感分明，动感十足！

Paste_Image.png

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

Paste_Image.png

在F形构图的规律中，主图为F的主干，右侧两行（或两部分）文字为辅，要注意合理分配图片和文字的占比。
F形构图在banner中使用，能将标题更为突出，主题更加吸引视线。

Paste_Image.png

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

![Uploading Paste_Image_580834.png . . .]