探讨手机界面设计的版式与布局

[摘 要]移动互联网时代，手机界面成为重要的设计门类，是科学和艺术完美结合的体现。手机界面设计在构图和布局上都遵循着一定的构图法则和布局原则。

[关键词]手机界面 构图 布局 用户体验

中图分类号：TP311.56 文献标识码：A 文章编号：1009-914X（2016）24-0180-01

移动互联网设计发展到今天，有很多传统的设计规律可以遵循，也提出了新的挑战。因为手持设备屏幕较小，如何在有限的页面内呈现或引导有效信息，又不显得杂乱臃肿，界面设计中蕴含着一些设计师需要了解的版式布局理念。

一、 界面布局与版式的重要性

设计和绘画一样，在进行界面设计的过程中，也需要对APP的需求和内容进行分析，并采用合适的界面布局，用这样的方法可以开拓思路，化繁为简，提高设计效率，探索出最为合适的布局方式后再进行细化，添加元素，丰富画面。

面对一个APP界面设计项目，作为设计师核心重点在于弄清楚产品的功能核心和卖点，并通过界面设计突显出来，最终让用户获得更为舒适的体验。界面上杂乱无章的堆积会掩埋功能重点，大大降低用户体验。在界面设计过程中，通过前期的构图，使设计更为清晰有条理、提高APP产品的合理性和用户体验性。

界面布局为设计提供了明确的思路和方向，不同的构图和布局可以产生的不同的交互效应，固定的界面布局并不会限制设计上的创造力，因为布局只是一个框架，即使构图类型相同，设计风格及设计的表现方式和元素也可以完全不同。灵活运用构图和布局更能使设计师把精力集中在元素和产品特色上。

二、 手机界面构图版式的类型

手机界面的构图版式按版面的形式可分为九宫格网格构图、放射形构图、三角形构图、SF字形构图。

1、九宫格网格构图

九宫格的布局形式主要运用在以分类为主的一级页面，起到功能分类的作用。通常在界面设计中，我们会利用网格在界面进行布局，根据水平方向和垂直方向划分所构成的辅助线，设计的会进行得非常顺利。在界面设计中，九宫格这种类型的布局更为规范和普遍，使APP应用功能显得格外的明确和突出，用户在使用过程中能非常快速找到需要的应用模块。

在划分九个方块的时候，可以是一个甚至多个格子对应一个应用模块，这样的布局方式十分灵活，打破平均分割的限制，增加留白，调整页面空间，突出重点。各个方块的不同组成方式，也会使页面的效果也会产生无数的变化。

2、放射形构图

在界面中，放射形的构图往往通过构造一个放射中心，来凸显位于中间内容或功能点的作用。在强调核心功能点的时候，设计师通常将各个功能以圆形的方式排布到中间，以当前主要功能点为中心，将其他的按钮或内容放射编排起来。将主要的功能设置在版式的中位置，就能引导用户的视线聚集在想核心功能点上，突出主要的功能点或数据，把产品核心展现出来。

在界面设计中，放射形布局的运用能使界面显得格外生动，因为圆形具有灵动、活跃、有趣、可爱、多变的特质，很多交互动画中都采用这样的构图形式，这种构图方式容易撑起整个界面，让界面圆润而饱满。

3、三角形构图

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

在界面中三角形构图大部分都是图在上，字在下，阅读更为舒服，有重点有描述。手机界面中的个人信息页比较常用三角形构图。

4、SF形视线构图

在设计界面的过程中，如何引导读者视线，对增强用户体验有重要作用。好的构图视线法则，能够获得非常舒服的阅读体验。而杂乱无章的构图布局，往往让用户厌倦。在进行界面设计的时，对用户的视觉移动方向的预设是非常重要的。在界面中加入更为顺畅的构图设计引导用户视线移动的元素，就能使用户更多的观察到产品的核心和产品的卖点。

视线流动的轨迹多则是从上至下从左到右移动，所以在界面设计中需要特别注意视线轨迹。现在大部分的手机界面一般是上下滑动的，做好视线引导，可以大大减小用户的信息获取的负担和阅读疲劳，避免使用户产生反感。

界面中最基础的是S形视线布局，在S形视线轨迹中，视线更为集中在视线切换的地方，即在S形的转折处停留时间最长，视觉轨迹最为密集。所以我们应该把重要的想要突出的产品或功能放在这块，这样更容易让用户记住产品的卖点。

S形构图在上下滚动页面上优势非常明显，不仅能使阅读顺畅，更加强了界面的平衡性，而左右构图很容易给人疲劳感。S视线形构图，增强了图文穿插感和灵动性，在手机界面引导页中也会常常运用到S形的构图。

界面中F字形构图也十分普遍，这种类型的构图大部分运用在图文左右搭配图和banner中，使用F形构图能让图文搭配更有张力，更大气，产品信息更为简单和明确。要充分利用主图的画面的指向性。例如，主图是人物，可将文字放置于其眼神、朝向、手势等对应的方向，加强视线引导。如果是产品图，则可以通过产品的朝向来引导。这样做，用户能最快速的关注到文本信息，加强认知度和购买度。

三、手机界面的布局

手机界面布局主要是基于主导航和次导航的切换方式。一个手机APP应用会有多个功能模块，用户需要在不同的功能模块之间切换，切换的入口即导航。主导航的类型主要有列表式导航、陈列馆式导航、选项卡式导航、轮播式导航、行为扩展式导航、多面板导航及图表导航，不同的主导航形式对应着不同的界面布局。

列表式导航界面的特点是内容从上向下排列，导航之间的跳转要回到初始点，好比一条街上有超市，饭店，如果想从超市到饭店，得先从超市出来，才能进入饭店。这类界面布局的优点是层次展示清晰、视觉流线从上向下，浏览体验快捷，可展示内容较长的菜单或拥有次级文字内容的标题。不足之处是导航之间的跳转要回到初始点，同级内容过多时，用户浏览容易产生疲劳，排版灵活性不是很高，只能通过排列顺序、颜色来区分各入口重要程度。列表式。

陈列馆式导航布局比较灵活，设计师可以平均分布这些网络，也可根据内容的重要性不规则分布，相对列表式，其优点在于同样的高度下可放置更多的菜单，更具有流动性，九宫格的构图也属于陈列馆式导航类型。这类布局的优点是能清晰展现各入口，方便浏览经常更新的内容。缺点是菜单之间的跳转要回到初始点，初始状态不如列表式明朗、只能点击进去才能获知，不能显示太多入口次级内容。这类布局适合入口比较多的展示，而且导航之间切换不频繁，即功能模块之间相对独立。

选项卡式导航存在选中状态，且可快速切换到另一个导航。其优点是能减少界面跳转的层级，分类位置固定，用户能清楚当前所在的入口位置并轻松在各入口间频繁跳转且不会迷失方向，并且能直接展现最重要入口的内容信息。其缺点是当功能入口过多时，该模式显得笨重不实用。这类布局适合分类少及其内容同时展示，导航菜单项数量通常为三至五个;各导航菜单项之间内容和功能有显著差异;用户需要在各个导航选项之间需要非常频繁的切换操作。

轮播式导航的特点是重点展示一个对象，通过手势滑动按顺序查看更多内容。这类布局方式的优点是单页面内容整体性强，聚焦度高。其缺点是由于各页面内容结构相似用户容易忽略后面的内容，不能跳跃性地查看间隔的页面，只能按顺序查看相邻的页面。

行为扩展式导航，顾名思义是由用户行为触发的扩展导航，这类扩展导航的交互形式通常以下拉菜单形式呈现，其特点是能在一屏内显示更多的细节，无需页面的跳转，适合分类多及其内容同时展示的界面。

多面板导航布局能同时呈现比较多的分类及内容，由于面板多，这类的界面通常给用户很拥挤的感觉。

图表导航的特点是直观的呈现信息，特别适合总分结构或表现时间段内的趋势走向的展示，缺点是详情信息显示的有限。

界面次导航即非主功能模块的导航菜单，次导航在界面中的交互形式通常是抽屉式、超级菜单式、弹出式、式这四种布局方式。

总之，在界面设计中无论采取构图和布局方式，最重要的是以用户体验为前提，以APP应用的功能为基础进行设计。