2.3 优化布局：掌握移动UI的布局策略

UI的呈现需要布局的规划。同样，界面布局也有理论的支撑。本节将补充讲解一些界面布局的理论知识，以达到优化布局的目的。

2.3.1 图表信息布局的设计方法

图表信息布局可以让APP显得更加商务化，这也是商业、金融类APP中最常见的布局方式，其优点、缺点如图2-21所示。

例如，“挖财信用卡管家”APP中的界面大多采用图表信息布局，尤其在账单界面中，功能比较清晰，用户可以一眼看到还款金额、最低还款额、额度、今日免息天数、账单日、还款日、未出账单等信息，而且还有简单的图表分析模式，如图2-22所示为“挖财信用卡管家”界面。

2.3.2 界面细节的设计方法

APP软件在细节设计上的完善，主要从如下几个方面入手，如图2-23所示。

当内容创新较为困难时，在细节上精益求精就成为APP能够出类拔萃的主要方式，通过细节的完美程度获得用户的好感，从而帮助APP建立品牌优势。

在以上所示的几个方面中，有3个最为关键的细节。下面针对这3个细节进行深入分析。

1．适当借鉴

无论是在国内还是在国外，APP市场都较为火热，但在数量庞大的APP中，大部分APP的功能比较单一，过分模仿的情况导致独特的模式变得大众化。适当借鉴是一种明智的选择，具体分析如图2-24所示。

2．界面运作

在同一款APP中，用户的界面运作结果应当是保持一致的。这里的“一致”主要是指形式上的一致。以APP中的列表框为例，如果用户双击其中的某项，使得某些事件发生，那么用户双击其他任何列表框中的同一项，都应该有同样的结果，这种结果就是“一致”的体现。

保持界面运作结果的一致对于APP的长期发展是有利的，尤其是可以培养用户的使用习惯，具体分析如图2-25所示。

3．界面布局

界面布局是最能够直接展示特色的地方，具体分析如图2-26所示。

2.3.3 移动UI的布局规则

在设计移动UI时，用户还需要掌握一些布局原则，以便为用户带来更好的操作体验。

1．统一的Logo位置

需要对APP的Logo位置进行规划，最好将所有界面的Logo位置进行统一，即，不管用户进入哪个界面，Logo都处在同一个位置。

例如，在“美图秀秀”APP的主界面中，用户可以左右滑动手机屏幕来切换界面功能，但其Logo一直处于界面左上角的位置，如图2-27所示。

2．合理的内容排列次序

当界面中展示的信息内容比较多时，应尽量按照先后次序进行合理排序，将所有重要的选项或内容放在主界面中，将用户最常用、最喜欢的功能排在前面，将一些比较少用但又很重要的功能排在后面，将一些可有可无的功能放入隐藏菜单中。

例如，在“芒果TV”APP的主界面中，会根据用户的直接需求，推出相应的精品视频资源，如会时常上线最新电影等，用户直接在主界面中点击即可播放，如图2-28所示。

如果想通过APP直接查看正在播放的电视节目，这可能是比较少用的功能了，用户还需要在导航栏中找到并切换至“直播”界面，然后选择相应的电视台。

3．突出的APP重要条目

很多APP都有一些重要条目，在布局时应尽量将其放置在界面的突出位置，如顶端或者底部的中间位置。

例如，“QQ空间”的主要功能是发动态，因此，在底部导航栏的中间位置放置了一个“+”号按钮，点击该按钮后，即可看到“说说”“照片”“视频”“直播”“动效相机”“签到”“动感影集”“日志”等导航按钮(此处也满足先后次序的原则)，而且这里还采用了点聚式布局方式，如图2-29所示。

另外，对于一些比较重要的信息，如消息、提示、通知等，应在APP界面中的醒目位置进行展示，使用户及时看到。

4．适当的界面长度

APP的主界面不宜过长，而且每个子界面的长度也要适当。当然，如果某些特别的APP内容过长，则最好在界面中的某个固定位置设置“返回顶部”按钮或者“内容列表”菜单按钮，让用户可以一键回到页面顶部式特定位置。

专家指点

例如，“汽车之家”网站论坛中由于大部分帖子的内容比较丰富，界面拉得很长，设计者就在右下角设置了“回复”和“返回顶部”按钮，方便浏览的用户进行相关操作。点击“回复”按钮，可以快速切换至界面底部的回复功能区；点击“返回顶部”按钮，则可以快速回到界面顶部的菜单栏功能区，如图2-30所示。

对于专门设置的一些导航菜单，则界面应尽可能短小，让用户一眼即可看完其中的内容。尤其要避免在导航菜单中使用滚屏，否则即使设计者花心思在其中添加了很多功能，用户可能还没看完就没耐心继续往下翻了。