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

探讨手机界面设计的版式与布局 　　[摘 要]移动互联网时代，手机界面成为重要的设计门类，是科学和艺术完美结合的体现。手机界面设计在构图和布局上都遵循着一定的构图法则和布局原则 [关键词]手机界面 构图 布局 用户体验 中图分类号：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形构图能让图文搭配更有张力，更大气，产品信息更为简单和明确。要充分利用主图的画面的指向性。例如，主图是人物，可将文字放置于其眼神、朝向、