为触屏手机而设计系列1

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF « 从冲动购买说起 2011年UED设计一组推广回顾-绘画篇 » Part 1 研究背景 1.1 触屏手机界面设计的背景与挑战 挑战1：发展时间短，国内外的研究都尚处在探索阶段，充满未知和不确定。 触屏技术最早被应用到手机上要追溯到1999年（motorola A6188），至今虽然已有12年 关注我们 最新推荐 为触屏手机而设计系列1——拇指操作 的“热区/死角”与“控件尺寸” 2012年02月16日 | 用户研究, 设计探讨 pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF 触屏技术最早被应用到手机上要追溯到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（见下图）。即，右利手触屏操作时 新文章 （RSS） 龙隐: 2011年UED设计一组推广 回顾-绘画篇 晓千: 为触屏手机而设计系列1 ——拇指操作的“热区/死 pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF 的热区与死角（如下图），以及触及控件设计的合理尺寸为至少44pix。 对于这个研究结果，我们不难发现两个疑问—— 问题1：这个热区图和所谓的尺寸是怎么得来的，在书中并没有详细的叙述，是基 于“研究结果”还是设计者自身的“经验主义”我们也不得而知。根据书中的描述和作者的专 业背景推测，这些很有可能是作者在收集大量iphone界面案例后的自己的分析和经验总 结。 问题2：很多设计师在看完44pix这个数字后都很容易犯一个错误——不同分辨率的屏幕 所对应的44pix实际物理大小是有很大差异的。在Iphone3下，44pix约等于7mm ；在 iphone4下，却不足6mm。书中的讨论背景是iphone3，所以需要设计师根据物理尺寸进 行对应的换算。 1.3 触屏手机界面设计 一些前人的研究 角”与“控件尺寸” zijun: 从冲动购买说起 龙隐: 2011年UED设计一组推广 回顾-创意篇 拔赤: “JavaScript Web Applications” 译者序 黑三: Chrome渲染Transition时 页面闪动Bug 渡劫: 品牌影响力评估方法探讨 lianyi: 用户研究思路概述：以淘 宝网SNS’分享’为例 墨轩: 界面设计速成 琳韵: 拍卖出价流程浮窗设计小 结 分类 用户研究 (49) 碳酸饮料会 (7) 视觉设计 (30) 设计生活 (22) 设计探讨 (113) 前端技术 (80) 团队活动 (27) 淘宝动态 (44) 交互设计实用 (13) pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF Josh Clark也许是个经验主义者，那让我们重新审视这个44pix。事实上，iphone团队把 触击控件的界面最小尺寸限定为44pix(7mm)并非是没有依据的。早在人机工效学的研究 中，前人曾得出结论，认为用食指操作，触击范围在7mm左右比较合适；而用拇指操 作，合适的触击范围需在9mm左右。为给设计师们提供较为准确的工学指标，对按键操 作进行精密的实验设计必不可少。 Part 2 研究目的 中国用户的单手拇指操作热区真的是这么分布的吗？ 热区与死角的差异有多大？ 那使用双手，食指操作还有没有热区和死角的差异呢？ 热区和死角如果存在差异，7mm这个设计原则在屏幕的任何区域都适用吗？ 单手拇指操作和双手食指操作对于控件尺寸的设计要求又有什么差异？ 链接 淘宝开放平台 19Lou.com DKUED 9RIA.com天地会 ChinaUI.com 百度MUX 百度UFO 盛大UED 网易杭州研究院UED 腾讯CDC 腾讯Webteam 腾讯WSD 蓝色理想 阿里妈妈UED 阿里巴巴（国际站） 阿里巴巴（中文站） 视觉同盟UI设计频道 视觉中国 迅雷用户体验设计中心 IxDC-交互设计专业委员会 UCDChina UIRSS.com 前端翻译小站 口碑网UED 四川电信UI互动部 搜狐UED 搜搜web开发 携程UED 支付宝PED pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF Part 3 研究理论基础 3.1 分析用户按键误操作成因 没有击中按键（空击） 想按某个按键时却按到相邻的另一个按键上（错击） 对于用户来说，第二种错误是更为致命的，这需要他花费更多的精力来纠正这一错误；而 支付宝PED 支付宝UED 支付志(支付宝官方Blog) 淘宝网招聘 淘宝DBA 淘宝营销产品博客 淘宝JAVA中间件 淘宝QA 淘宝搜索技术博客 淘宝数据仓库团队 淘宝核心技术团队 人人网FED 广告 pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF 相对来说第一种情况就不那么严重了。因此在我们的实验设计中只取第二种情况为错误操 作。 3.2 实验情景 考虑影响用户按键操作难易度的两大情景因素：一为用户的状态（静止、走动、公交车上 等）；二为做按键操作使用的手指（食指、拇指等）。将这两个因素结合，正式实验中取 两种最为常见的操作情景状态（均为单手操作）：静止时用食指操作、走动时用拇指操 作。前者相对容易，后者较为困难。 3.3 心理物理法——恒定刺激法： 本实验研究采用心理物理法中的恒定刺激法，也叫正误法、恒定法、次数法。它的特点是 只采用少数几个刺激（一般是4—9个），且这几个刺激在整个测定阈限的过程中是固定 不变的，主试把这几个刺激以随机的方式反复向被试呈现。用恒定刺激法测感觉阈限之 前，先要进行预备实验，以选定刺激并确定各刺激呈现的顺序。所选刺激的最大强度应为 每次呈现几乎都能被感觉到的强度，被感觉到的可能性最好在95%左右；所选刺激的最小 强度应为每次呈现几乎都不能被感觉到的强度，被感觉到的可能性最好在5%左右。选定 刺激范围以后，再在这个范围内选出4—9个间距相等的刺激。正式实验时，每种刺激强 度呈现的次数不能少于20个，且呈现的次数要相等，呈现的顺序要随机排列。用恒定刺 激法测绝对阈限时，绝对阈限的值可以根据操作定义由直线内插法或其他方法求得。恒定 刺激法测差别阈限时，也可以用相同的方法求得差别阈限。 Part 4 实验规划 4.1 实验对象与人群配比 由于本实验为基础研究，因此对于用户的要求不高，不一定非要淘宝用户。面向的对象可 以是有潜在触屏手机使用能力的所有正常成年人。右利手为宜。在实验开始前，需对用户 pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF 的手掌大小等尺寸进行测量，以选择手部尺寸适中的用户。详见国标《中国成年人人体尺 寸》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次。） pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF 因变量 触击正确率： 在单个反应中，取被试正确击中目标刺激为结束，但只要触击次数大 于1则认为反应错误。即，手指首次成功击中刺激红点的次数占红点出现总数的比 率。 触击热区： 在整个屏幕中，触击正确率显著高于其他部位的区域。 触击死角： 在整个屏幕中，触击正确率显著低于其他部位的区域。 触击范围最小尺寸： 特定手指在触击正确率均值达到95%及以上的最小尺寸。 手机原始屏幕参数设置 实验设备：iphone4手机3.5英寸屏幕 分辨率：640*960 pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF 物理尺寸：4.93*7.40CM，平均1cm有130个像素点左右 底色为灰色RGB（144，144，144） 注：屏幕区域的划分和标记都是虚拟的，不直接呈现在屏幕上。一开始呈现给被试的仍 是原始屏幕，而在后台刺激呈现和和数据处理时需要用到区域的概念。 实验步骤 Step 1：指导与过后，计入实验参数设置。屏幕上部呈现文本框“请输入参数”，下面有一 个输入框，要求可以输入数字，并且输入的数字可以被程序读取。按确认键进入正式实 验。 Step2：每次只展现一个红点，不会同时出现。要求被试尽可能快速地完成触击，但并非 pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF 在考验被试的反应能力和时间，保持平和心态。拇指实验者在特定范围内正常步行速度 （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的情况下，建议热区的正确率都应该显著高于 建议死角。 pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF 但是，通过配对T检验，建议区正确率略高于非建议区，仅在参数值为7的时候现为差 异显著，但在红点大小为8/9/10/11的时候，两个区域差异不显著。即这个建议热区的划 分方式合理性存在一定的问题，意味着控件触击尺寸为8/9/10/11及以上的情况下，这种 划分意义可能不大，两个区域基本不存在差异。 pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF 5.2 结论2：实验发现更合理的右手拇指操作热区 我们猜测，在拇指自然弯曲且处在指肚触及的状态下，手持机的稳定性最佳，手指移动的 灵活性也相对佳。所以我们模拟这种状态下手指触及的区域，大致呈现出一个“扇环”区 域，在本实验中定义为“探索热区”，而其他区域为“非探索热区”。同理，如果这次探索 的“热区和死角”的假设成立，那么“探索热区”与“非探索热区”应该存在正确率上的显著差 异，并且这种差异在不同刺激参数值下都成立，在红点大小在7/8/9/10/11的情况下，建 议热区的正确率都应该显著高于非建议热区。 pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF 结果，通过配对T检验，当红点大小为7/8/9/10时，探索区正确率均显著高于非探索区。 差异随红点的变大而减弱，可能因为当红点增大到11后，触击定位变得更为简单，整体 正确率都得到了提高，区域间的差异就消失了。较《tapworthy》所建议的操作热区，右 侧通过我们探索得到的热区划分更为合理。尤其在控件尺寸大小被限定的前提下，放在热 区与非热区的差异就会很大。 pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF 结论3：实验发现右手拇指操作的死角 通过比较16个区域的在不同红点大小实验下的正确率均值，发现A4\C4\D1\D4 四个区域 触击正确率显著低于整体均值。死角区误操作比率高，在控件布局时应考虑死角问题，特 别是在处理高频操作位置时。 pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF 结论4：44pix（7mm)的原则在“单手/行走/拇指”操作状态下并不适用 在本研究中，当红点大小值为7mm时，行走状态下单手拇指操作触击正确率均未达到 95%。7mm or 44pix 的设计远不能满足移动单手持机操作的状态，容易引起较高的误操 作率。 pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF 结论5：实验发现更具体的拇指操作尺寸要求 在本研究中，在行走状态下单手拇指操作触击正确率均值达到95%的最小尺寸见下图。且 可以发现，不同区域对触击的尺寸要求是有差异的。在设计单手操作的界面时，参考控件 所在位置的触击尺寸要求，避免因尺寸小带来误操作，影响操作效率。 pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF ~~~~~~未完待续~~~~~~~ 为触屏手机而设计系列2——食指操作的“热区/死角”与“控件尺寸” 2012-02-16 | 用户研究,设计探讨 16 条评论 pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF 1. 学啊~ 2012年02月17日 at 9:59kiter 2. 虽然有拇指操作热区和死角之分 但是鉴于人们的视觉阅读习惯在死角区域还是会分 布功能键.热区的研究还是能让设计师在分布案件时候对屏幕的各个区域有清晰的认 识.由书籍和网页延伸过来的阅读习惯和拇指操作热区和死角这两个是不是有相互抵 触的地方呢 2012年02月17日 at 11:24paoao 3. 好强大好认真。学习。 2012年02月17日 at 11:35yaohermione 4. 很专业，结论很细致。 ——- 结论5：我认为还有对按键的操作习惯也会影响按键的大小，比如：1.熟练的人可能 习惯用指尖，当不是手指和屏幕呈90度。2.有人就是指肚去按。 这个不一样 2012年02月17日 at 11:57seamanrenxue pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF 5. 44pix是相对于某块屏幕计算的。很显然不应该是pix为单位，而是以ppi来计算。即 44ppi，那么iPhone1和iPhone4都差不多是7mm。 另外，不是说所有区域都是最佳7mm，而是建议不小于7mm。在目标大小为 7-10 mm的范围内，是一个人的手指能准确并且舒适触摸的区域。 而按Android官方的建议，则是48dp的触摸区域为UI元件的基准，转换为物理尺寸约 9mm。记住，也不是48pix。 2012年02月17日 at 14:27阿智 6. 7-9mm是一个普遍认可的研究结果。当然，随着人类的进化也有可能发生改变 2012年02月17日 at 14:30阿智 7. 难道我手太大了么 我只觉得左上角是非热区 2012年02月17日 at 15:20ke 8. 设计这样一种软件，可以收集测试用户的数据，将你所说的指标，全部设计进软件 2012年02月17日 at 17:41JUNEHAC pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF 中。通过发送数据到服务器的方式，进行分析和研究。 9. 研究方法很赞，我们手机输入法还做过字母的点击准确率分析，落点和可视化区域 之间的差异，按钮大小形状和点击准确率，按钮大小形状和速度之间关系。。 2012年02月17日 at 18:52晓生 10. 有些人是用左手的，最终分布情况应该要考虑进去吧 2012年02月17日 at 19:41小健 11. 呵呵，聪明的人大有人在啊 2012年02月18日 at 17:17文件柜 12. 对于结论1&2，自变量定义的刺激区域是16个，但是最后拿建议热区（9个）的数据 和非建议热区（7个）的正确率数据来做比较，这是不对的啊，因为前者和后者的被 点击频次并不均等。你必须先要验证频次并不显著影响正确率。不能事后划不同的 2012年02月19日 at 0:41建议～ pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF 区域然后来做比较的，而是在实验设计的时候就按这两种热区来作为自变量。 13. 没有考虑时间变量是个问题哦，要知道最初却确定的这个数值，很有可能是平衡了 时间（移动到目标所需时间）以及准确率而确定的。不能只单一考虑准确率这个因 变量的。 2012年02月19日 at 8:38Kevin 14. 还在用按键的飘过。 2012年02月20日 at 21:31太美 15. 先存下，空了再细看！ 2012年02月21日 at 0:19xiaoyun 16. 咱先把 iPhone 名字写对了再分析好么 2012年02月21日 at 0:52Shek Xiang pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API New hot app: Facebook Albums To PDF TaobaoUED Blog Lab About Join Us Copyright © 2010 Taobao UED. All rights reserved. Pow ered By WordPress 我有话要说 名字 (必填) 邮箱 (我们为您保密) 您的网站 提交回复