闹玩

本文分析了在手机客户端产品中，多个功能模块的两种主要布局方式:按钮式布局和标签式布局。并以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/。

终于下决心开始学画画。一个月的学费不菲，所以早晨上班前、晚上下班后都尽量去画室练习，不能把钱糟蹋了。学了不到一个月，看到自己的素描有所进步，虽然还是入门级，但看倒纸上凸显的画面，还是有所成就感的。 更重要的是，在学画的过程中，还悟得了一些道理，算是一份额外的收获。

1. 关注对象，还是关注作品？

刚学素描时，把握不好线条，总觉得自己画的不直，画的东西不像，改了又改。后来读到《Keys to drawing》书中的一段话，描述的正是我遇到的问题：

作画时你看哪？是画本身呢，还是作画对象？如果不确定，就做做这个试验。当你作画时，让别人看你的眼睛。眼睛停留在作品上的时间长，还是停留在作画对象上的时间长？这个问题很重要，也是提高水平的关键。

你猜答案会是什么？我问一个朋友（他不是学画的），他说，当然应该注意作品，因为画的就是作品嘛。而这也是我刚开始学画时的做法。事实上，正确的答案是：眼睛集中在作画对象上，才会画好：

当你关注的是作品，特别是在刚开始作画时，你就会对自己所做的努力加以判断，结果就导致一种自我干涉、自我分析的批评模式 （“那只手臂画的不像。”“脚不可能那样摆。”）作品中的东西不是“错的”，就是“不像”。你可能更多的是依赖于所学的规则和技巧，而不是画实际观察到的 事物。… 如果把思想主要集中在作画对象上，就会产生实用性对话。它是一种真正发生于你和所画对象间的对话，能提供给你有关形状、角度以及度量的信息，是你得以在纸 上将它们表现出来。

可不是么，画幅画和开发产品多类似（不好意思，我又引申了）。多思考，多观察，多分析，多给自己提一些问题：“这个产品的用户是谁？要提供什么服 务？要提供哪些功能？如何才能最有效的提供这些功能？……”也就是说，关注产品服务的对象。而不是关注实现产品的具体过程（虽然这些过程不能忽视）：“用 什么技术实现这些功能？某个特性太难设计了，干脆忽略？为了实现这个功能，要花费很多精力，得不偿失？……”

正如画画应该更多的关注对象、光线、明暗而不是画纸上的笔触、线条、技巧一样，如果关注的是产品的实现，而不是产品的功能，那么，就难以设计出好用、易用、为用户喜欢的成功产品，进一步讲，也难以推动技术的探索和创新。

2. 抓整体，还是抓局部？

画画时，无论是最开始的构图，还是后来的铺调子，都容易陷入局部的处理之中。打个比方，画一副头像，不仅要眼睛、鼻子、嘴等各个部位画的很到位，还要互相之间在位置、角度、大小上的一致，不然，就算每个局部都很成功，整副画也不能算作成功。

道理很简单，做起来并不容易。勾勒细节其实是很迷惑人的，把握整体反倒需要一种胸怀。或者说，控制全局需要一种领导和管理能力。刚开始画一幅画，切忌在最开始作画时就陷入到对局部细节的刻画之中，一定要时时顾及整体，和其他局部协调刻画。 一个绘画作品，就算每个局部都很完美，但如果互相之间错位，那也是一个失败的作品。相反，如果每个局部都有瑕疵，但整体比较协调，那算成功了大半。

夸张一点说，一些绘画作品，如果单看局部，看不出什么蛛丝马迹；正是因为组成一个整体，才产生神奇的效果。下图就是一个例子，生动的熊熊烈火，十分逼真；但靠近一看，都是由一些无意义的局部组成的。（该画取自今年10月在北京798艺术区的一副油画，侯亮拍摄。）

引 申开来，任何一个产品的开发团队，都是由不同的职能部门组成（哪怕是一个人承担这些不同的职能），如开发、测试、产品设计，等等。要牢记各功能是一个整 体，有一个共同的目标，要协同工作。否则，即便每个部门工作都很出色，但如果配合不好，也是徒然。而即便这些团队但看起来都很平凡，但是因为能够步调一 致、协力配合，最后仍能开发出很好的产品。

3. 根据观察，还是根据常识？

这是一个看似两难的问题。观察，是眼见为实；常识，是普遍科学。似乎哪个都不能违背。但在学画过程中，却要记住：重要的是观察，而不是常识。

根据常识，长方体的四个高是相等的；但根据观察，越远的边长度越小。根据常识，脑袋长在脖子上面；但根据观察，仰卧的人脑袋可能长在胸中。事实上， 最可怕的往往是常识。如果遵守常识作画，画出的话反倒不像。相反，如果相信自己的眼睛，相信面前看到的活生生的事物，并用画笔描绘出来，反倒更加是最逼真 的。

画画是一门关于观察和动手的学问。刚学画时，老师就说，学画常犯的毛病是“眼高手低”：看都能看明白，但无法用手中的画笔描绘出来。这就像一个人很懂乐谱，但是无法用声音表达；很明白游泳的技巧，但不能下水施展一样。

太多的“常识”，左右了我们的观察，误导了我们的判断。常识的关键在于“常”，而世界往往是变化的，在不同的情况下有可能会产生不同的效果。相信自 己的观察，如果发现和常识违背的地方，要像发现金矿一样，马上挖掘出背后的原因。这是一个纠正“常识”，让自己进步的好机会。（生活中都是“常识”将会多 么枯燥啊！）

4. 耐心，耐心，耐心。有足够的耐心么？

作画是一个考验耐心的过程。有学过画的同事对我说，他最不喜欢铺调子，一遍一遍很麻烦。画画确实需要很大的耐心。不过，看到一张空白的纸上，最开始出现线条，后来出现面，接下来出现明暗，出现逼真的效果，也是一件很享受的事情。

下面两幅画是我所画的大卫像的石膏局部。这个简单的素描，耗费了我两个多小时的时间。用线条构成面，把不同的面用凸凹的视觉形式展现出来，这是一 个神奇的过程，是一个考验耐心的过程。

画作是打磨出来的，好产品也一样（我这幅当然不是好作品，只是献丑）。在这个过程中，要关注对象，而不是作品；要重视整体，协调局部；要相信观察，而不是相信常识。

最后，推荐《Keys to drawing（素描的诀窍）》这本书。“只要能握笔，就能学会作画。”如果说艺术是相通的话，那么，这不仅是一本教你学画的书。

一出戏，演什么不重要，在什么地方演才重要——在当今中国，能产生这种效果的地方，不是雄伟的长城，不是庄重的人民大会堂，也不是华贵的国家大剧院，而是鸟巢。

一出戏，演员和故事不重要，重要的是场面和色彩——在当今中国，能造成这种轰动的导演，不是细腻的李安，不是多情的陈凯歌，也不是搞笑的冯小刚，而是张艺谋。

当鸟巢和张艺谋这两个元素组合在一起，结果便是：不管演什么，不管谁演，不管演的怎么样，这出戏已经注定被关注，被热炒。这出戏就是10月6、7日上演的张艺谋鸟巢版景观歌剧《图兰朵》。

千万别忽略掉“歌剧《图兰朵》”前面的那几个定语：张艺谋，鸟巢，景观。事实上，这几个词才是这出戏的关键所在。如果没有这几个元素，对于绝大多数此前连图兰朵是什么都不清楚的观众而言，这出戏就没什么热闹可看了。

然而，正是这样几个定语构造的歌剧《图兰朵》，宏大而吵闹，台上1000平米的巨大背景，采用所谓“高科技手段光电技术”，最终沦为不停更换画面的PPT屏幕而已。整个演出，绚丽，但并没有让我感受到传说中的“东方美感和时代气息”。

整体而言：

1. 鸟巢这个地方实在不适合上演歌剧，如果你的目的真的是为了观看演出的话。

2. 在简陋的背景上不断更换的动态背景，就像制作花哨的PPT一样，不会真正吸引人。特别是，看过奥运开幕式、看过60周年国庆联欢晚会天安门前的大型“人肉LED”，中国观众对这种以景观取胜的演出已经不再大惊小怪了。

3. 不得不承认，歌剧不是普通中国老百姓能够欣赏的艺术。看看我身旁边吃爆米花边看演出的观众就能明白这一点。一方水土养一方人，即便歌剧是高雅艺术，但在我辈看来，总没有京剧的曲调细腻、深邃，也没有黄梅戏的唱腔婉转、优美。

当时，我宁愿台下演出的是说相声的郭德纲、演小品的小沈阳、甚至唱二人转的小黄飞。至少，钱花的比看PPT值。

一年多以前，我绝不会想到自己会从一个软件工程师转行做产品经理。

那时，产品部想招一位搜索产品经理。这个职位不仅要懂产品，还要对懂技术，特别是搜索领域的知识。对于这个“复合型人才”，公司比较重视，要求也较高。过了好长时间，一直没有找到合适人选。

恰巧，我一直是个能“折腾”的程序员，常常把跑程序过程中的有趣发现分享给大家，当时，还誓言“从用户角度每天至少发现三个bug”。于是，公司CEO和产品总监一致提议由我来担任这个职位。一方面，我对产品还算“有感觉”，另一方面，也是最重要的，我一直从事搜索方面的研发工作，比较懂技术。

于是，懂技术成了我在产品部工作的一个优势。比如，刚来产品部时，我从技术团队那里了解了排序算法的所有细节，只用三天时间就把搜索产品的相关特性整理成文档；我还尝试自己编写程序分析用户的搜索日志，查看数据，发现规律；在后来爱逛2.0的开发中，对于有些产品功能，工程师最开始认为不能实现，但我凭“技术直觉”表示怀疑，而最终证明这些实现是完全没问题的。

然而，我逐渐认识到，作为产品的设计者或负责人，懂技术也有束缚头脑的风险。比如，在设计产品时，非常明确增加某个产品特性或功能会提升用户体验和产品质量。此时，如果我是技术白痴，则根本不会考虑技术实现的具体细节；因为我懂技术，则不可避免会考虑增加这个特性引起的开发工作量，对性能的影响，以及需要的算法，等等。

初看起来，这些想法很合理，其实不然。当我考虑这些问题的时候，实际上限制了设计的思路，影响了可能的创新。也就是说，作为产品经理，至少在产品的设计阶段，不应该考虑技术。你应该考虑的首先是产品，是用户，而不是技术。

这有点像建筑师设计某个建筑。建筑师负责设计，工程师负责施工。如果建筑师在设计时就过多的考虑施工的难度，那么，可能永远不会有鸟巢和国家大剧院，因为，它们都是在克服了很多施工难题之后才得以完成的。

当然，建筑师也绝不能异想天开的设计，他也要懂各方面的知识，比如力学、比如安全，等等。事实上，只有懂这些知识，他才能更好的和各方面专家进行交流，共同磋商，改善设计。

因此，懂技术，就像懂一门语言一样，归根结底是为了和别人更加顺畅的交流。它能够帮助产品设计者更好的和研发团队讨论产品的实施，理解彼此的工作，在出现问题时能够澄清问题所在，研究各种措施，并尽快给出合适的解决方案。

广义而言，很多技艺都是一门语言：了解音乐的语言，我们能够更好的欣赏音乐；了解绘画的语言，能够更深的理解画作；了解电影的语言，能够多侧面的赏析电影。

而作为交流的手段，任何“技术”都不该束缚人的头脑，而是打通不同人之间的头脑，让彼此的智慧不断融合，激发出最绚丽的火花。