2.2 高级布局：解析移动UI的特殊布局

界面布局对UI界面设计有很大影响，本节为读者讲述界面布局的方法。

2.2.1 弹出框式布局

在移动UI中，对话框通常作为一种次要窗口，可以出现在界面的顶部、中间或底部等位置，其中包含了各种按钮和选项，通过它们可以完成特定命令或任务，是一种常用的布局设计方式。

弹出框中可以隐藏很多内容，在用户需要的时候可以通过点击相应的按钮将其显示出来，主要作用是节省手机的屏幕空间。在安卓系统的移动设备中，很多菜单、单选框、多选框、对话框等都是采用弹出框的布局方式，如图2-4所示为弹出框式布局。

2.2.2 热门标签布局

在移动UI设计中，搜索界面和分类界面通常会采用热门标签的布局方式。这种布局方式让界面更语义化，使各种移动设备能够更加完美地展示软件界面，如图2-5所示为热门标签布局。

2.2.3 侧边栏式布局

侧边栏式布局又被称为“抽屉式布局”，主要是将功能菜单放置在APP的两侧(通常是左侧)。在操作时，用户可以像打开一个一个抽屉一样，将界面从APP的侧边栏中抽出来，拉到手机屏幕中。例如，“手机QQ”的功能菜单采用的就是侧边栏式布局，如图2-6所示。

侧边栏式布局最显著的特点是可以通过纵向排列切换项解决栏目个数的问题，但是这些“抽屉”中的栏目却不能和主体内容同时出现在屏幕上。

侧边栏式布局可以分为以下两种模式。

(1)列表式布局：例如，在“美团外卖”的餐厅订餐界面中，就是采用左侧列表抽屉式布局模式，用户可以在左侧的列表中选择外卖种类，在右侧的列表中查看菜单，如图2-7所示。

(2)图标卡片式布局：例如，在“汽车之家”的找车界面中，就是采用左侧图标卡片抽屉式布局模式，用户可以在品牌列表中选择相应的汽车品牌，然后即可在左侧的栏目中查看该品牌的所有车型，如图2-8所示。

2.2.4 陈列馆式布局

陈列馆式布局又被称为“圈式布局”，主要是采用“图片+文字”的形式来排列APP中的各种元素。陈列馆式布局可以很好地展现实时内容，新闻、照片及餐厅APP等界面都采用了这种布局方法。

陈列馆式布局可以分为以下两种模式。

(1)网格布局模式：大量的手机浏览器采用的是网格布局，虽然视觉效果比较普通，但其结构清晰、功能分布十分明朗，而且设计者也可以通过巧妙的网格处理来吸引用户的目光。例如，联想手机中的“超级相册”APP就是采用网格布局模式来排列照片，如图2-9所示。

(2)轮盘布局模式：这种布局模式比较独特，用户可以使用手指来转动轮盘，以实现不同的功能。很多抽检游戏UI喜欢采用这种大转盘的布局模式。“中国建设银行手机银行”的主界面也是采用轮盘布局模式，可以给用户带来耳目一新的感觉，如图2-10所示。

2.2.5 分段菜单式布局

分段菜单式布局主要采用“文字+下拉箭头Segment control(段控制)”的方式来排列界面中的各种元素，设计者可以在某个按钮中隐藏更多的功能，让界面简约而不简单。

例如，在“饿了么”APP的美食界面中，就安排了“美食”“排序”及“筛选”3个分段菜单。点击相应的下拉箭头后，用户可以在展开的菜单中找到更多的功能，如图2-11所示。

2.2.6 点聚式布局

点聚式布局又被称为“扇形扩展式布局”，这种布局的展示方式比较灵活，可以带来更加开阔的界面效果。

在设计一些复杂的APP层级框架时，可以采用点聚式布局导航，将一些用户使用频率比较高的核心内容通过并列的导航放置在一个“点”中，如“易信”与“tumblr”的客户端就是采用这种布局方式。如图2-12所示为点聚式布局。

专家指点

2.2.7 转盘式布局

转盘式布局又被称为“走马灯式布局”，主要采用图片环绕在界面四周的形式。这种布局便于用户单手进行操作，比较简便，很多手机抽奖游戏常常采用这种布局方式，如图2-13所示为转盘式布局。

2.2.8 导航栏置底式布局

导航栏置底式布局的设计比较简单，而且适合单手操作。很多APP设计者都十分青睐导航栏置底式布局，如“微信”“淘宝”“支付宝”等手机APP的客户端采用的就是这种布局方式。

例如，在“手机支付宝”APP的“淘票票”界面底部，就有“热映”“影院”“演出”“发现”及“我的”5个清晰的导航按钮，方便用户快捷操作。用户可以点击不同的按钮切换至相应的界面，操作十分便捷，功能分布也比较明确，如图2-14所示。

2.2.9 磁贴状态式布局

磁贴状态式布局与Windows 8的Metro界面风格比较相似，是一种比较新颖的设计语言，如图2-15所示。界面中的各种元素以磁贴(Tile)的形式展现，这些小方块可以动态显示信息，还可以按照用户的意愿进行分组、删除等操作。

2.2.10 超级菜单式布局

超级菜单式布局的导航比较酷炫，如“天天快报”“163”的新闻客户端和“百度Site”APP等都是采用这种布局方式。在这些APP的内容界面中，用户只需左右滑动屏幕，即可切换查看不同的类别，操作的连续性非常强，用户体验也很流畅，如图2-16所示为超级菜单式布局。

2.2.11 导航栏置顶式布局

导航栏置顶式布局与导航栏置底式布局刚好相反，主要将导航按钮布置在界面的顶部。当然，不同的APP也有不同的设计规则。“酷我音乐”APP就是将导航栏置顶式布局和选项卡式布局混合应用，如图2-17所示。

另外，还有一种比较常用的滑动选项卡式布局。它可以容纳更多的选项，用户可以直接通过手指滑动导航栏寻找项目，在导航类别比较多时非常适用。

例如，在“同花顺”APP的涨跌排名界面中，就可以滑动上面的导航区，切换查看“股指”“沪深”“板块”“港美股”及“其他”市场行情，如图2-18所示。

2.2.12 幻灯片式布局

幻灯片式布局常被用于并列展示图片或者整块内容，用户只需用手指左右滑动屏幕，即可切换查看相关的内容，如图2-19所示。

如果在APP中采用幻灯片式布局，则需要注意控制幻灯片的数量。通常使用7～8张幻灯片比较适宜，以免用户操作过多产生疲劳，进而对该APP失去兴趣。

另外，采用幻灯片式布局时，设计者应在界面中放置一些视觉暗示元素，如位置、数量、分页标识码等小标签，这样用户可以更加容易上手。

在“天天快报”的图片新闻界面中，左下角就有一个数量标签，显示了用户当前浏览图片的序号以及所有图片的数量，如图2-20所示。