超实用的界面设计构图原则！

昨天跟大家分享了界面构图中的圆心放射构图与三角形构图，今天就继续来说说S形构图与F形构图，让我们一起梳理梳理！

S形构图

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

在设计界面时，对用户视觉移动方向的预设是非常重要的。在界面中加入顺畅的构图设计作为引导用户视线移动的元素，就能让用户更多的观察到产品的核心和产品的卖点。视线移动的轨迹多数是从上到下或从左到右，如果不能围绕这样的视线轨迹进行排版，用户在阅读的时候会变得很吃力，找不到重点，使用户产生反感。所以在界面设计中需要格外注意轨迹的方向。现在界面一般是上下滑动的，做好视线引导，可以大大减轻用户的阅读疲劳感。

在界面中，引导读者视线最基础的构图方式是S形视线构图。S形视线大家都懂，关键是如何运用好S形视线来抓住用户的眼球。

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

案例分析

苹果官网便采用了S形视线构图进行引导阅读，大家可以去苹果官网好好体验一下。每个模块的图形进行穿插，可以起到帮助折回视线的作用，而产品图更多的作用是让用户去记忆，用这种设计来引导消费。此外，为了加强视线移动方向的引导，图片的处理也非常讲究。

在iPod touch 的介绍中，第一张图片的展示用到了三角形构图，强化了视线轨迹的引导。同时多张图片借助手机排列方向引导到视线轨迹，很好地实现了“图片→文字→图片”之间的切换，将用户带入到整个产品画面中。

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

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

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

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

F形构图

根据图文的版式布局，我们还可以演变出F形构图，这种类型的构图大部分运用在图文左右搭配的页面和Banner设计中。使用F形构图能让图文搭配更有张力，更大气，同时也可以让产品信息更为简单和明确。在F形构图的规律中，主图为F的主干，右侧两行（或两部分）文字为辅，要注意合理分配图片和文字的占比。

案例分析

将F形构图运用在Banner设计中，可以让标题显得更为突出，让主题更加吸引视线。

值得注意的是，要充分利用主图的画面指向性。

例如，主图是人物，可以将文字放置于人物视线方向或物体面向的位置，这样可以加强视线的引导性；如果是产品图，则可以通过产品的朝向来引导，这样不仅可以让用户以最快的速度关注到文本信息，还能加强认知度和购买度。