闹玩

本文分析了在手机客户端产品中，多个功能模块的两种主要布局方式:按钮式布局和标签式布局。并以13款手机客户端为例，分析了两种布局方式的不同使用场景，它们的变体，以及优缺点。

手机产品设计与传统的桌面和web产品设计相比，最显著的约束是设计空间的急剧缩小。打个比方，这就像从一个100平米的房子搬到5平米的单间，东西没少一样，可以施展的空间却小了几十倍。更重要的是，在这样一个小空间里，你不能把东西胡乱摆放，要依旧保持它们的清晰、合理、简洁、美观。借用《用户体验的要素》中的名词，这涉及到“框架层”的设计问题，在手机产品的设计中，框架层的设计即布局问题尤其关键。

然而，众多手机产品看似纷杂的框架选择，归纳起来，最主要的方式有两种：按钮式布局，标签式布局。基于这两种布局类型及其多种变形，并综合两种类型的巧妙组合，可以解决绝大多数功能模块的组织问题。

按钮式布局

当多个功能之间相对独立，用户根据需求选择其中一个功能时，按钮式布局是一个不错的选择，结构清晰、简单明了。支付宝、12580客户端、PingCo等手机产品的初始界面都采用了典型的按钮式布局方式。

以支付宝为例，当在多个按钮中选择某个功能按钮后，如“手机充值”，则直接进入手机话费充值页面，然后进行相应的手机充值操作。这种设计结构清晰，手机支付宝有8个主要功能，分成8个按钮，布局有条不紊。

变体。按钮式布局的表现形式多种多样，有很多变体。比如，在熊猫看书中，几个功能按钮排成一行，放在底部，上面是熊猫看书的一些通告；在爱帮公交中，几个链接本质上是就是按钮，可以分别选择乘车、线路或站点查询；在139i联系中，按钮成为长条形，每行一个，排成一列（样式上类似于iphone上的系统控件），每个按钮被激活后，下部都会有对应功能的解释。这些以不同方式展现出来的按钮式布局，或者更加美观，或者更加简洁，把多个功能进行了有效的组织。

缺点。 按钮式布局的一个缺点是，功能模块之间的切换需要较多步骤，功能之间相对离散。例如，从支付宝的手机充值页面切换到交易查询页面，需要首先选择右下角的“返回”按钮，回到主 界面，然后点击“交易查询”按钮，才能进入相应界面。在支付宝中，这个问题似乎还不明显，还不是一个问题。如果每个功能界面都比较复杂，层次较深（比如 12580客户端），则不同功能之间的切换将变得非常繁琐，每次都要返回到按钮组合界面，才能访问其他功能。

标签式布局

标签式布局能够解决按钮式布局中“功能离散”的缺点。当功能之间联系密切，用户需要频繁在各功能之间进行频繁时，标签式布局是首选的设计选择。UCWeb浏览器（以及腾讯QQ浏览器）、手机MSN、爱帮爱逛的公交频道等手机产品都采用了典型的标签式布局来组织一些功能界面。

以爱帮爱逛的公交频道为例，和公交相关的换乘、路线、站点三个功能组织成标签，用户进入该频道后能够一目了然，根据自己的需求轻松切换（默认是用户经常使用的换乘功能）。

为什么没有把爱帮公交中的三个功能集中在一个页面，按照从上到下的方式排列呢？主要考虑两个因素。

第一，功能完全展示。如果三个功能集中在一个页面，由于每个功能的内容都可能比较长（在小屏幕手机中尤其如此），如“查询历史”就会占据一大部分空间。此时，换乘之外的路线、站点两个功能有可能无法在第一个屏幕展示出来，于是，用户有可能不知道屏幕下面还有这两个功能。

第二，快速切换标签。如果三个功能集中在一个页面，若用户想查公交站点，则必须“路过”排在前面的换乘、路线两个功能模块，至少需要按6-9个向下键才能到达公交站点的输入框。采用标签式布局，最少只需移动两次右键即可。

变体。标签式布局也可以有更多的表现形式，下面便是两个例子。在手机大头中，几个主要频道全部通过标签进行组织（虽然看上去很像大大的按钮），频道之间通过左右键就可以实现切换，当前选中标签一直处在中间位置，非常明显。在千尺下载中，几个主要功能的标签被放置在屏幕底部，和手机大头一样，也是通过左右键实现标签切换，当前标签通过黄颜色识别，使用起来也非常直观。

缺点。当然，标签式布局也有它的潜在问题，最主要的就是标签切换。当标签页面比较复杂时，比如包括很多链接，文字内容很长，当前光标可能会停留在正文中。此时，如果把光标移动到标签上再进行切换，会非常繁琐，需要很多按键操作。对于这个问题，腾讯QQ浏览器、手机MSN、UCWeb浏览器、贝多等手机软件根据自身特点，有不同的解决方案。对于标签切换的各种实现及其优劣，会专门撰文进行分析。

两种布局方式的混合应用

需要特别指出的是，按钮式布局和标签式布局是在不同场景下组织多个功能模块的不同方式，没有优劣之分，只看恰当与否。在合适的场景使用恰当的方式，就能让复杂的功能在狭小的手机界面上得到很好的展示。事实上，多数功能复杂的产品，都要采用这两种方式架构自己的产品。下面是两个混合使用两种布局方式的典型例子。

在手机QQ中，初始的主菜单采用按钮式布局，默认情况下“QQ”是选中按钮，因为“QQ”是最常用的功能。除此之外，移动方向键，还可以选择“腾讯网”、“游戏”、“资讯”等功能按钮。无论选择哪个按钮，点击后，都会进入标签式组织的操作页面中，通过切换标签，仍然可以实现各功能的快速切换（浏览网页，查看邮件，聊QQ，群聊，等等）。

掌上宝的所有界面完全是两种布局的组合：一方面，通过左右键切换标签，实现各主要功能的循环切换，另一方面，在每个标签内部，各个子功能组织成竖排的按钮，通过上下键进行选择。左右键和上下键都得到了很好的利用，用户在使用过程中不会意识到是在切换标签还是在移动按钮，一切都通过设计自然达成。掌上宝共有36个子功能，通过这种组织方式，非常清晰的在手机上展现出来，操作极其方便。

——

本文提及的手机客户端软件（除139i联系外，均可在waptw.com下载）:

1. 支付宝;  2. 12580;  3. PingCo;  4. 熊猫看书;  5. 爱帮公交

6. 139i联系;  7. UCWeb浏览器;  8. 手机MSN;  9. 爱帮爱逛;  10. 手机大头

11. 千尺下载;  12. 手机QQ2009;  13. 掌上宝

在网页和桌面软件中，标准控件是人们非常熟悉的交互元素，是产品开发者在不同场景用以表达特定功用的重要工具。比如，在Firefox浏览器的系统设置中，就用复选框允许用户对标签浏览的多种样式进行选择。

除了复选框，标准控件中的单选按钮、下拉列表框、文本输入框等，已经成为公用的软件语言，无论是软件产品的设计者、开发者还是使用者，都离不开这些看似简单但内容丰富的元素。

本文将介绍Java手机客户端软件设计中，几种主要标准控件（复选按钮，单选按钮，下拉列表框，文本输入框）的使用和表现形式，并以几款深受欢迎的手机客户端产品为例，分析在这些产品上相关控件的使用场景。

复选按钮

在Java版UCWEB中，调用了系统自带的复选按钮，用以实现同时选择多个功能项。例如，当用户选择“清除记录”时，软件会提示用户删除哪些项：

可以有默认选中的项，每个被选中的项会打一个叉，这和通常的复选按钮设计不太一致：在通常的复选按钮中，被选中的项前会用对号勾选。

这个系统控件看起来不是很精致，不知是不是这个原因，在Java版手机QQ的登录界面中，没有调用系统自带的复选按钮控件，而是设计了自己的复选按钮。例如，登录QQ时，用户可以通过复选按钮设置记住密码、隐身登录、静音登录、接受群消息等操作。手机QQ的复选按钮设计的比价精致，比如，被选中的项文字处于高亮状态，未被选中的项则处于暗色，当前获得焦点的按钮有亮色边框。

单选按钮和下拉列表框

当用户需要在众多选项中选择一个时，可以使用单选按钮或下拉列表框。例如，从城市列表中选择一个你的当前城市，从男/女性别中选择你的性别，都需要单选功能。

例如，在Java版手机QQ中的皮肤设置功能，通过平台自带的单选按钮，可以从多个界面方案中选择一项自己喜欢的皮肤模式：

在Java版UCWEB中，设计了专门的下拉列表框，比如，在系统设置中选择字体大小时：

当然，单选功能也可以通过菜单中的多选一实现，例如，在UCWEB中，通过菜单可以设定字体大小：

文本输入框

文本输入框要比上面所讲的控件简单，但是实现形式却很丰富，在很多场合可以使用。

例如，Java版手机QQ通过文本输入框输入验证码（值得注意的是，输入框前插入了随即生成的图片）：

上图中一个不完美的地方是，输入框获得焦点后，输入法没有自动切换到数字模式。而在手机QQ中通过号码或昵称查询好友时，却能够正确切换到对应的输入法状态（数字和拼音）：

另外，可以设置输入框中输入文本长度的上限。比如，上面三个输入中，最长输入长度分别为16、10和12（标题下圆括号内的提示）。

在人人网客户端中，用户写新日志时，调用的系统界面由两个文本输入框组成，分别用来输入标题和正文（其中标题限制在50个字以内）：

控件之间的组合

通过控件之间的适当组合，一方面，可以使相关的控件更具整体感，另一方面，也可以节省空间，方便用户的统一操作（这在手机这样的小屏幕平台上尤其重要）。

例如，在UCWEB中，搜索输入框和搜索引擎的选择组合在一起：

Java版手机QQ中集成了浏览器功能，在浏览器设置中，字体大小和图片显示这两个属性通过两组单选按钮进行设置：

如果候选列表过长，像这样列出所有单选项必然要占据很多空间，使多个选项之间失去整体感。此时，可以用下拉列表组织每组选项，这样，会得到更加清晰的设计。例如，在手机QQ中根据条件查找好友，可以设置地区、年龄、性别，其中，地区、年龄都有很多选项，此时，通过下拉列表隐藏每组内容，会让几个条件的布局简洁，逻辑清晰：

在人人网客户端中，当你给朋友留言时，可以选择是否为“悄悄话”，通过将文本输入框和复选框组合在一起，实现此功能（留言最多为500字）：

总之，正如一个厨师必须了解油盐酱醋的特性才能烹饪出各式美味一样，在Java手机客户端软件中，产品设计者和开发者必须了解这些基本控件的设计和使用，实现产品的不同功能，并使得产品界面简洁明了，操作方便，提高用户体验。特别是那些系统自有控件，如果能够很好的加以使用并巧妙组合，能够省去开发控件的人力和时间，降低开发成本。

相关软件：

1. 手机QQ：2009通用Java版，543Kb，下载地址：http://www.shouji-qq.com/。

2.UCWEB浏览器：7.0，Java通用版，303Kb，下载地址：http://www.ucweb.com/。

3. 人人网客户端：2009正式版，Java通用版，205Kb，下载地址：http://m.renren.com/。

经过团队几个月紧张而辛勤的工作，我们的新款手机客户端终于面世了。同时，这款产品有了一个响亮而迷人的名字：爱逛。

作为产品经理，我禁不住兴奋和骄傲！爱逛就像我的孩子一样，在产品开发期间，我为每个功能和细节的完美，倾注了所有的心思和智慧。当然，整个项目团队也都付出了很多努力，从研发到测试，从市场到合作…应该说，爱逛是大家的孩子，而我希望爱逛是所有人的孩子，并且能够得到手机用户的喜爱。

（如何下载爱逛：手机上网并登陆 wap.aibang.com，在首页就可以下载爱逛手机客户端软件，而且，只有165K！或者进入下载页面查看）

爱逛能为你做什么呢？不妨想一下，你是否遇到过下面的窘境：逛街累了，想在附近找一个餐厅或咖啡馆，拦了好几个人却摇头不知；晚上想和朋友去看电影，却不知道晚上放映什么；和别人约好了见面的地点，却不知道怎么坐车前往……

有了爱逛，只要拿出手机，一分钟内，这些问题就会迎刃而解！

爱逛的定位就是出门在外，怀揣手机，喜欢”逛”的人。在公司内部做产品宣传时，我还围绕“逛”字想了四句话：

• 逛遍城市角落
• 逛尽吃喝玩乐
• 逛走忧愁烦恼
• 逛出美好生活

毕竟，好生活，是需要逛出来的！

爱逛的大小虽然只有165K，但却功能强大。比如，在北京西单附近找餐馆，爱逛会搜出成百上千家餐馆，根据不同的口味、价格，总会有你心仪的一家：

找到商户后，想知道怎么到达这里？没问题，公交或自驾功能，可以为你筛选出最优路线，让你一路畅通无阻：

如果晚上还想看电影，也没问题。爱逛会告诉你每家影院每场电影的详细放映信息，这样，你就不用手忙脚乱、提心吊胆，害怕错过喜欢的电影了：

接下来，不妨安排一下周末的活动，这要先看天气情况。爱逛会告诉你未来一周的天气情况：

周末有雨，有点扫兴，郁闷……不过，这仍然阻止不了去北戴河的计划。所以，查查火车先：

当然，爱逛还有其他功能，这里介绍的只是一部分，其他功能还要你去体验和发现。而且，爱逛的服务覆盖265个大中城市，无论你在北京、上海，还是杭州、成都，甚至“大城市”铁岭，只要你逛到哪里，就能享受爱逛的免费服务！我们希望爱逛的每项功能都会在生活中真正帮到大家，让爱逛的你出行无忧。

值得庆幸的是，自8月27日上线以来，一周时间，仅通过客户端本身收集到的用户反馈就有1200余条。有表扬，也有很多的改进建议。作为产品经理，当然要感谢大家的支持。令人期待的是，爱逛最新一期的优化工作已经提上日程，我们的团队会根据用户的切身体验和使用感受，做持续的改进，让爱逛更完美，更适用，更好用。

我爱生活，我爱逛！

（如何下载爱逛：手机上网并登陆 wap.aibang.com，在首页就可以下载爱逛手机客户端软件，而且，只有165K！或者进入下载页面查看）