屏幕的热区与控件的触击尺寸_为触屏手机而设计系列报告_.pptx4. 触屏手机界面设计
背景与挑战
• 挑战1:发展时间短,国内外的研究都尚处在探索阶段,充满未知和不确定。
• 挑战2:从鼠标键盘到手指,准确率问题、热区和死角的问题。
• 挑战3:东西方生理指标和文化差异对现有设计原则的影响。
• 挑战4:普通WAP/APP设计原则对淘宝(APP/WAP)的适用性。
• ……
5. 触屏手机界面设计
一些前人的经验
《Tapworthy- Designing Great iphone Apps》
Josh Clark 2010-6-25
Rule of Thumb
The comfort zone for the right thumb
falls on the opposite side of screen, at
the left edge and bottom of the screen.
44Pixels
( The top right and bottom right corners
are the toughest thumb zone for right-
handed users.)
The Magic Number is 44
Ideally, any button or other tap target
should be at least 44x44 pixels. 问题1:研究结果?经验主义?
问题2:44pix=?mm
8. 研究目的
对现有的设计原则的
验证 & 探索
1. 中国用户的单手拇指操作热
区真的是这么分布的吗?
2. 热区与死角的差异有多大?
3. 那使用双手,食指操作还有
没有热区和死角的差异呢?
《Tap worthy- Designing Great iphone Apps》
Page 58-62 Rule of Thumb
9. 研究目的
对现有的设计原则的
分解 & 细化
7mm ? 4. 热区和死角如果存在差异,
7mm这个设计原则在屏幕的
食指7mm? 任何区域都适用吗?
拇指 9mm? 5. 单手拇指操作和双手食指操
作对于控件尺寸的设计要求
44Pixels? 又有什么差异?
163 ppi screen
《Tap worthy- Designing Great iphone Apps》
Page 62-77 The Magic Number is 44
11. 实验设计 组间测试
• 单手拇指 • 双手食指
实验1 • 行走状态 • 静坐状态 实验2
10人 10人 11人 11人
12. 实验设计 组内测试
5 个恒定刺激参数
4x4 • 细分16个测试区
• 更精确的结果统计
16x10x5 次随机刺激呈现
食指 (单位 mm):
A1 A2 A3 A4
拇指 (单位 mm) :
B1 B2 B3 B4
C1 C2 C3 C4
D1 D2 D3 D4
15. 实验操作流程
Step 2
要求:
1. 每次只展现一个红点,不会同时
出现。
2. 尽可能快速地完成触击,但并非
在考验你的反应能力和时间,保
持平和心态。
3. 拇指实验者在特定范围内正常步
行速度(1-1.5m/s)。
16. 实验操作流程
Step 3
1. 每个参数值有16x10次点击,耗
时大约4-5min
2. 共5轮,每轮之间可休息。
http://www.taobao.com/go/chn/
mobile/uedresearch.php
17. 实验操作流程
Step 4
1. 交由研究员截屏保存,再后期手
工录入SPSS进行统计分析。
http://www.taobao.com/go/chn/
mobile/uedresearch.php
18. 实验设备选择
实验设备:iphone4手机3.5英寸屏幕
分辨率:640x960
物理尺寸:4.93x7.40CM,平均1cm有130个像素点左右
底色:灰色RGB(144,144,144)
19. 被试选择
• 女性21人,男性21人
• 20-35 岁的成年人
• 右利手
邀请浙江科技学院、浙江工
业大学师生共38人、淘宝员
工10人。
共48个样本参与了这个研究。
最终有效样本42。
国标《中国成年人人体尺寸》GB10000-88中的手部尺寸
23. 实验设置——拇指触击热区 · 建议区
《Tap Worthy》书中建议的 为验证理论,本实验中的检验区域
右手拇指触击热区 定义为——建议热区
B1 B2 B3
取近似实验区域
C1 C2 C3
D1 D2 D3
24. 实验发现——拇指触击热区 · 建议区
建议区 vs. 非建议区
100
触
非建议热区 击
95
正 90
确 85
率
(%)
80
建议 75
热区 7mm 8mm 9mm 10mm 11mm
刺激红点的大小
•7mm时,建议区-非建议区: t (19) =3.169, P=0.005
•8mm时,建议区-非建议区: t (19) =0.988, P=0.336
•9mm时,建议区-非建议区: t (19) =1.829, P=0.083
•10mm时,建议区-非建议区: t (19) =0.862, P=0.400
•11mm时,建议区-非建议区: t (19) =-0.910, P=0.374
25. 实验设置——拇指触击热区 · 探索区
实验假设 探索热区
拇指自然弯曲,
指肚触击,
稳定持机状态下的,
手指自然移动。 A2 A3
B1 B2
取近似
实验区域
C1 C2
D2
26. 实验发现——拇指触击热区 · 探索区
探索区 vs. 非探索区
100
触 95
击
正 90
确 85
率
探索 非
(%)
80
热区 探 75
索
热 7mm 8mm 9mm 10mm 11mm
区 刺激红点的大小
•7mm时,建议区-非建议区: t (19) =3.732, P=0.001
•8mm时,建议区-非建议区: t (19) =3.567, P=0.002
•9mm时,建议区-非建议区: t (19) =2.888, P=0.009
•10mm时,建议区-非建议区: t (19) =3.102, P=0.006
•11mm时,建议区-非建议区: t (19) =0.461, P=0.650
27. 实验发现 ——拇指触击热区
A2 A3
B1 B2 B3 B1 B2
VS.
C1 C2 C3 C1 C2
D1 D2 D3 D2
较《tapworthy》所建议的操作热区,右侧通过我们探索得到的热
启示 区划分更为合理。尤其在控件尺寸大小被限定的前提下,放在热
区与非热区的差异就会很大。
29. 实验发现 ——拇指触击死角
死角区均值 vs. 整体均值
A4
89.10 100
%
触 95
击
正 90 91.0%
确 85
C4 率
(%)
89.1%
88.2%
88.8%
88.20 80 85.0%
%
75
D1 D4 A4 C4 D1 D4
88.80 85.00 整体均值
% %
31. 实验发现—— 当 参数值=7mm
实验发现
86.5 87.0 86.0 77.0
% % % %
87.0 93.5 87.0 75.0 在本研究中,当红点大小值为7mm时,行走状
% % % % 现象 态下单手拇指操作触击正确率均未达到95%。
84.0 84.5 82.0 75.0
% % % % 7mm or 44pix 的设计远不能满足移动单手持机操作
启示 的状态,容易引起较高的误操作率。
81.0 88.5 86.5 74.5
% % % %
刺激参数值为7mm时,触击正确率统计
32. 实验发现——拇指触击尺寸参考
单手·拇指·行走 状态下
不同区域触击范围最小尺寸*
A1 A2 A3 A4
11mm 8mm 10mm 11mm
B1 B2 B3 B4 在本研究中,在行走状态下单手拇指操作触
10mm 10mm 11mm 10mm 击正确率均值达到95%的最小尺寸见左图。
现象
不同区域对触击的尺寸要求是有差异的。
C1 C2 C3 C4
9mm 9mm 11mm 11mm
D1 D2 D3 D4 在设计单手操作的界面时,参考控件所在位置的
11mm 10mm 11mm 11mm 启示 触击尺寸要求,避免因尺寸小带来误操作,影响
操作效率。
*拇指-触击正确率均值达到95%及以上的最小尺寸*
35. 实验发现——食指的触击热区和死角
A4
B1 B2 B4 通过比较各单元区与整体均值的差异,
发现——
C1 C2 C4
D1 D2 D4 B1/B2/C1/C2/D1/D2
触击正确率显著高于整体均值;
A4/B4/C4/D4
触击正确率显著低于整体均值;
36. 实验发现——食指的触击热区和死角
实验发现
热区 vs. 整体 vs. 死角
触 100
击 95
正 90
确 85
率 80
(%)
75
触 70
击 5mm 6mm 7mm 8mm 9mm
触 死 刺激红点参数值
击 角
热 通过配对T检验,两个区域与整体均值都存在显
区 著差异。
现象 同样,差异随红点的变大而减弱。可能因为当红
点变大后,触击定位变得容易,整体确率都得到
了提高,区域间差异就消失了。
在设计控件布局时,即使是食指操作,也需要考虑手指
启示 在不同区域的限制。
38. 实验发现—— 当 参数值=7mm
实验发现
90.9 91.4 91.8 90.5
% % % %
95.5 93.2 93.6 91.8 在本研究中,当红点大小值为7mm时,静坐状
% % % % 现象 态下食指操作触击正确率达到95%的区域有
B1/C1/C2/D1/D2/D3(如左图)。
96.8 95.0 89.6 90.5
% % % % 7mm or 44pix 的设计可以满足食指操作的部分区
启示 域,但其他位置任然容易高发误操作。
95.5 96.8 95.9 90.9
% % % %
刺激参数值为7mm时,触击正确率统计
39. 实验发现——食指触击尺寸参考
双手·食指·静坐 状态下
不同区域触击范围最小尺寸*
A1 A2 A3 A4
8mm 8mm 8mm 8mm
B1 B2 B3 B4 在本研究中,在静坐状态下食指操作触击正
7mm 8mm 8mm 9mm 确率均值达到95%的最小尺寸见左图。
现象
不同区域对触击的尺寸要求是有差异的。
C1 C2 C3 C4
7mm 7mm 8mm 9mm
在设计食指操作的界面时,参考控件所在位置的
D1 D2 D3 D4 启示 触击尺寸要求,避免因尺寸小带来误操作,影响
7mm 7mm 7mm 8mm 操作效率。
*食指-触击正确率均值达到95%及以上的最小尺寸*
41. 总结:热区与死角
拇指 食指 混合状态
热区&死角 热区&死角 热区&死角
拇 拇 拇 食
指 指 指 指 A4
A2 A3 A4 A4
拇 拇 食 食 食
指 指 指 指 指 B1 B2
B1 B2 B1 B2 B4
拇 拇 拇 ∩交集 食 食 食 =
指 指 指 指 指 指 C1 C2 C4
C1 C2 C4 C1 C2 C4
拇 拇 拇 食 食 食
指 指 指 指 指 指 D2 D4
D1 D2 D4 D1 D2 D4
42. 总结:控件触击尺寸设计
拇指 食指
尺寸要求 尺寸要求
11 8 10 11 8 8 8 8
mm mm mm mm mm mm mm mm
10 10 11 10 7 8 8 9
mm mm mm mm mm mm mm mm
9 9 11 11 7 7 8 9
mm mm mm mm mm mm mm mm
11 10 11 11 7 7 7 8
mm mm mm mm mm mm mm mm
43. 讨论——说说你的感受
看完这个研究,你 最大的感受 是什么?
希望,它所告诉你的不只是一串百分比数字。
45. 讨论:左侧?右侧?
比较分析
新的问题:
除了正确率,还有哪些因素会影响到控件的位置?
手指弯曲度 操作反馈视野
持机稳定性 手指位移
上下文和经验
(例:搜索button、确认取消)
……
48. 讨论2——个性化?标准化?
正方: 反方:
个性化是产品从初期迈向成熟的产物 标准化更通用,不挑战用户的习惯
1990
2010
新的问题: 新的问题:
如何定义自己的目标场景和人群? 标准化=苹果化???
边缘场景和人群就不照顾了?
51. thanks
感谢 无明、天宏、梓佑 的支持;
感谢 完颜、陈威、雪芝 的帮助;
感谢 胡馨月、启智、向松 、神勋、准提 等同学在工作中的配合。