移动产品设计之控件 - UCD大社区

Java手机客户端常用控件

侯亮 — 2009-10-26 02:18:15

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

Firefox浏览器中设置标签式浏览属性

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

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

复选按钮

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

UCWEB中清除记录中的复选按钮

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

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

: 手机QQ登录时的复选框

单选按钮和下拉列表框

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

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

手机QQ中通过单选按钮设置皮肤

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

UCWEB通过下拉列表设置字体大小

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

UCWEB通过菜单选择字体大小

文本输入框

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

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

登录手机QQ时提示输入验证码

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

手机QQ分别通过号码或昵称查找好友

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

控件之间的组合

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

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

UCWEB中搜索词输入和搜索引擎选择组合

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

: 不同的属性通过多组单选按钮实现

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

多个条件查找好友，其中可以设置地区

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

Android4.0最应该改进或创新的7个控件

chenjz — 2011-09-28 15:16:45

基于android2.×设计app远比基于ios平台来的百转纠结，肝肠寸断。我觉得android混乱，我认为原因就在这里——android平台自带的控件不好用，开发者不得不自己定义控件。如果需要设计android shell，我认为第一件事情就是重新定义以下的这些控件，这会让你的平台好用很多。就像你开始出牌之前，最好先摸一把好牌，这样赢的机率更高。所以这篇文章也写在android4.0发布前，聊表一下我对他们的殷切希望

1. Action bar

这项改进从android3.0我们已经能够看出端倪，Google倾向于取消所有的hard key，界面上必须有控件放置操作按钮。右上角的位置会出现1～2个button，这似乎已经没有悬念。底部的action bar的设计形式ios已经采用，我认为android4.0可能不会用。

2. Navigation

如果取消了back key，导航会成为最为棘手的问题。各家android shell也都花心思在这儿。期待更新形式的出现。

3. Group list

Android当中的list实在让人很容易产生怨念。它的group list实在太太丑了。给两个已经成熟的方案。

4. Text input

Android3.0当中已经给出了去掉外边框的新方案，比较类似于ios，但也没办法，这是唯一的路了吧。

5. Highlight button

我认为动作按钮在很多时候不是平等的，有的时候需要提示用户首选操作，有的时候需要警示用户这个操作的不可逆性。

6. Badge notification

下次见到这项改进的几率也蛮高。

7. Landscape

尤其是带有tab的页面，横屏时又会悲剧了，可用的空间只有变得很矮。android这次能不能考虑的周到些？

拇指操作的“热区/死角”与“控件尺寸”

晓千 — 2012-02-16 22:26:52

Part 1 研究背景

1.1 触屏手机界面设计的背景与挑战

挑战1：发展时间短，国内外的研究都尚处在探索阶段，充满未知和不确定。
触屏技术最早被应用到手机上要追溯到1999年（motorola A6188），至今虽然已有12年时间，但真正为手指操作的触屏界面设计带来革命性变化还是07年1月9日发布的iphone1代以及他的多点触摸技术。时至今日，不过4年时间，以苹果设计团队为先驱国内外相关研究领域，包括触摸的手势、触屏界面的规范、触摸的可用性研究等等，都还处在探索阶段，这也意味着有很多现有的东西都是建立在猜测和尝试基础上的，他们的成熟度也是有待时间检验的。这些东西包括国外的期刊文献和图书，甚至是苹果app开发官网上的信息、设计原则。

挑战2：从鼠标键盘到手指，准确率问题、热区和死角的问题。
触屏手机交互研究与PC交互的研究存在着质的变化。输入设备从鼠标键盘变成手指，一方面，操作的精准度上受到了挑战，在密集的信息处理上，用户常常会出现许多误操作；另一方面，手指操作所特有的“死角和热区”问题也是PC界面设计中不会面临的。

挑战3：东西方生理指标和文化差异对现有设计原则的影响。
即便是那些被证明了合理可行的理论，在飘扬过海来到中国后，能克服东西方生理指标和文化差异带来的影响吗？要知道，同样大小的手机对中国人的手和老外的手握持的稳定性而言也是可能存在差异的。所以，如何把成熟的西方知识拿来主义，进行更符合生理特征和民族文化的调整，是我们要面对的第三个挑战。

挑战4：普通WAP/APP设计原则对淘宝（APP/WAP）的适用性。
手机电子商务又是一个特殊的领域，我们面对海量决策信息与有限屏幕空间之间的矛盾，这是普通WAP网站或者APP应用极少会面对的严峻局面。如何将其他产品的触屏研究成果转化成更适合电子商务领域应用，是我们要进一步解决的问题。

1.2 触屏手机界面设计一些前人的经验

《Tapworthy- Designing Great iphone Apps》Josh Clark 2010-6-25 （中文版：《触动人心 -设计优秀的iPhone应用》翻译者包季真）提到了iphone界面设计的两条原则——Rule of Thumb 和 The Magic Number is 44（见下图）。即，右利手触屏操作时的热区与死角（如下图），以及触及控件设计的合理尺寸为至少44pix。

对于这个研究结果，我们不难发现两个疑问——

问题1：这个热区图和所谓的标准尺寸是怎么得来的，在书中并没有详细的叙述，是基于“研究结果”还是设计者自身的“经验主义”我们也不得而知。根据书中的描述和作者的专业背景推测，这些很有可能是作者在收集大量iphone界面案例后的自己的分析和经验总结。

问题2：很多设计师在看完44pix这个数字后都很容易犯一个错误——不同分辨率的屏幕所对应的44pix实际物理大小是有很大差异的。在Iphone3下，44pix约等于7mm ；在iphone4下，却不足6mm。书中的讨论背景是iphone3，所以需要设计师根据物理尺寸进行对应的换算。

1.3 触屏手机界面设计一些前人的研究

Josh Clark也许是个经验主义者，那让我们重新审视这个44pix。事实上，iphone团队把触击控件的界面最小尺寸限定为44pix(7mm)并非是没有依据的。早在人机工效学的研究中，前人曾得出结论，认为用食指操作，触击范围在7mm左右比较合适；而用拇指操作，合适的触击范围需在9mm左右。为给设计师们提供较为准确的工学指标，对按键操作进行精密的实验设计必不可少。

Part 2 研究目的

中国用户的单手拇指操作热区真的是这么分布的吗？
热区与死角的差异有多大？
那使用双手，食指操作还有没有热区和死角的差异呢？
热区和死角如果存在差异，7mm这个设计原则在屏幕的任何区域都适用吗？
单手拇指操作和双手食指操作对于控件尺寸的设计要求又有什么差异？

Part 3 研究理论基础

3.1 分析用户按键误操作成因

没有击中按键（空击）
想按某个按键时却按到相邻的另一个按键上（错击）

对于用户来说，第二种错误是更为致命的，这需要他花费更多的精力来纠正这一错误；而相对来说第一种情况就不那么严重了。因此在我们的实验设计中只取第二种情况为错误操作。

3.2 实验情景

考虑影响用户按键操作难易度的两大情景因素：一为用户的状态（静止、走动、公交车上等）；二为做按键操作使用的手指（食指、拇指等）。将这两个因素结合，正式实验中取两种最为常见的操作情景状态（均为单手操作）：静止时用食指操作、走动时用拇指操作。前者相对容易，后者较为困难。

3.3 心理物理法——恒定刺激法：

本实验研究采用心理物理法中的恒定刺激法，也叫正误法、恒定法、次数法。它的特点是只采用少数几个刺激（一般是4—9个），且这几个刺激在整个测定阈限的过程中是固定不变的，主试把这几个刺激以随机的方式反复向被试呈现。用恒定刺激法测感觉阈限之前，先要进行预备实验，以选定刺激并确定各刺激呈现的顺序。所选刺激的最大强度应为每次呈现几乎都能被感觉到的强度，被感觉到的可能性最好在95%左右；所选刺激的最小强度应为每次呈现几乎都不能被感觉到的强度，被感觉到的可能性最好在5%左右。选定刺激范围以后，再在这个范围内选出4—9个间距相等的刺激。正式实验时，每种刺激强度呈现的次数不能少于20个，且呈现的次数要相等，呈现的顺序要随机排列。用恒定刺激法测绝对阈限时，绝对阈限的值可以根据操作定义由直线内插法或其他方法求得。恒定刺激法测差别阈限时，也可以用相同的方法求得差别阈限。

Part 4 实验规划

4.1 实验对象与人群配比

由于本实验为基础研究，因此对于用户的要求不高，不一定非要淘宝用户。面向的对象可以是有潜在触屏手机使用能力的所有正常成年人。右利手为宜。在实验开始前，需对用户的手掌大小等尺寸进行测量，以选择手部尺寸适中的用户。详见国标《中国成年人人体尺寸》GB10000-88中的手部尺寸。采用被试间测试，初步定被试数量为40人左右，要求被试年龄在20岁以上，男女各半。

4.2 实验设计

自变量

使用情景（2）：静止时用食指操作、走动时用拇指操作（被试间设计）
刺激呈现区域位置（16）：将手机屏幕划分为4*4的区域（被试内设计）
可触击区域的大小（5）：设计5种可触击区域——拇指7\8\9\10\11；食指5\6\7\8\9（实验为被试间设计，每种水平至少要求被试反应10次，则共要求被试反应16*5*10=800次。）

因变量

触击正确率：在单个反应中，取被试正确击中目标刺激为结束，但只要触击次数大于1则认为反应错误。即，手指首次成功击中刺激红点的次数占红点出现总数的比率。
触击热区：在整个屏幕中，触击正确率显著高于其他部位的区域。
触击死角： 在整个屏幕中，触击正确率显著低于其他部位的区域。
触击范围最小尺寸：特定手指在触击正确率均值达到95%及以上的最小尺寸。

手机原始屏幕参数设置

实验设备：iphone4手机3.5英寸屏幕
分辨率：640*960
物理尺寸：4.93*7.40CM，平均1cm有130个像素点左右
底色为灰色RGB（144，144，144）

注：屏幕区域的划分和标记都是虚拟的，不直接呈现在屏幕上。一开始呈现给被试的仍是原始屏幕，而在后台刺激呈现和和数据处理时需要用到区域的概念。

实验步骤

Step 1：指导与过后，计入实验参数设置。屏幕上部呈现文本框“请输入参数”，下面有一个输入框，要求可以输入数字，并且输入的数字可以被程序读取。按确认键进入正式实验。

Step2：每次只展现一个红点，不会同时出现。要求被试尽可能快速地完成触击，但并非在考验被试的反应能力和时间，保持平和心态。拇指实验者在特定范围内正常步行速度（1-1.5m/s）。

Step3：每个参数值有16×10次点击，耗时大约4-5min。共5轮，每轮之间可休息。

step4：交由研究员截屏保存，再后期手工录入SPSS进行统计分析。

Part 5 单手·拇指·行走研究中的发现

5.1 结论1：通过检验，《Tap Worthy》书中建议的右手拇指触击热区的合理性尚存在问题

为了验证这一理论，本实验近似取“B1+B2+B3+C1+C2+C3+D1+D2+D3”为检验区，定义为“建议热区”，其余区域定义为“非建议热区”。如果这种建议的“热区”的假设成立，那么“建议热区”与“非建议热区”应该存在正确率上的显著差异，并且这种差异在不同刺激参数值下都成立，在红点大小在7/8/9/10/11的情况下，建议热区的正确率都应该显著高于建议死角。

但是，通过配对T检验，建议区正确率略高于非建议区，仅在参数值为7的时候表现为差异显著，但在红点大小为8/9/10/11的时候，两个区域差异不显著。即这个建议热区的划分方式合理性存在一定的问题，意味着控件触击尺寸为8/9/10/11及以上的情况下，这种划分意义可能不大，两个区域基本不存在差异。

5.2 结论2：实验发现更合理的右手拇指操作热区

我们猜测，在拇指自然弯曲且处在指肚触及的状态下，手持机的稳定性最佳，手指移动的灵活性也相对佳。所以我们模拟这种状态下手指触及的区域，大致呈现出一个“扇环”区域，在本实验中定义为“探索热区”，而其他区域为“非探索热区”。同理，如果这次探索的“热区和死角”的假设成立，那么“探索热区”与“非探索热区”应该存在正确率上的显著差异，并且这种差异在不同刺激参数值下都成立，在红点大小在7/8/9/10/11的情况下，建议热区的正确率都应该显著高于非建议热区。

结果，通过配对T检验，当红点大小为7/8/9/10时，探索区正确率均显著高于非探索区。差异随红点的变大而减弱，可能因为当红点增大到11后，触击定位变得更为简单，整体正确率都得到了提高，区域间的差异就消失了。较《tapworthy》所建议的操作热区，右侧通过我们探索得到的热区划分更为合理。尤其在控件尺寸大小被限定的前提下，放在热区与非热区的差异就会很大。

结论3：实验发现右手拇指操作的死角

通过比较16个区域的在不同红点大小实验下的正确率均值，发现A4\C4\D1\D4 四个区域触击正确率显著低于整体均值。死角区误操作比率高，在控件布局时应考虑死角问题，特别是在处理高频操作位置时。

结论4：44pix（7mm)的原则在“单手/行走/拇指”操作状态下并不适用

在本研究中，当红点大小值为7mm时，行走状态下单手拇指操作触击正确率均未达到95%。7mm or 44pix 的设计远不能满足移动单手持机操作的状态，容易引起较高的误操作率。

结论5：实验发现更具体的拇指操作尺寸要求

在本研究中，在行走状态下单手拇指操作触击正确率均值达到95%的最小尺寸见下图。且可以发现，不同区域对触击的尺寸要求是有差异的。在设计单手操作的界面时，参考控件所在位置的触击尺寸要求，避免因尺寸小带来误操作，影响操作效率。

~~~~~~未完待续~~~~~~~

为触屏手机而设计系列2——食指操作的“热区/死角”与“控件尺寸”