14 | 理解触屏交互:方寸触屏大乾坤
刘石
你好,我是 Rocky。今天我们来谈谈触屏交互的人因学。
从乔帮主第一次发布苹果手机到现在已经 14 年了,但触屏交互并未发生什么革命性的变革。目前的主流依然是电容技术触摸屏 CTP(Capacity Touch Panel)。
这种交互为什么生命力顽强?从人因学的角度来说,滑动意味着抚摸,触屏意味着机器和人的亲密接触响应式交互。
这门课讲到现在,我已经提了很多次自然交互。在当代社会,没有任何一种交互比触屏交互更加自然,并且被如此广泛地应用了。甚至你可能都会提出质疑,现在我还需要学习触屏交互的人因基础吗?
理想的按钮尺寸
我先问你一个问题:你知道在移动触摸屏设备上,一个应用按钮的大小多少是合理的?
如果你查找苹果的交互规范,你会找到最小要44*44dp,折算为 7mm。而安卓定义的最小尺寸是48*48dp,折算为 7.4mm。如果你查询 ISO 标准的话,你会看到最小尺寸是 6.4mm。看到这么多标准,你是不是会有些懵?
如果你不了解人因,就只能盲目跟随这些标准。在理解这个问题之前,我们先看一下人手指的尺寸。人的拇指宽度是 11~22mm,食指宽度是 9~22mm。你会发现不管是苹果、安卓还是 ISO 国际标准,定义的最小按钮都比手指宽度要小很多,是标准定义错了吗?
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
触屏交互在移动设备上的重要性不言而喻。本文从人因学的角度出发,深入探讨了触屏交互的相关技术特点。首先,文章介绍了触屏按钮尺寸的合理性,指出按钮大小应与手指宽度相关,而非固定标准。其次,文章分析了握持移动设备对交互的影响,强调了单手操作的普遍性和易操作区域的差异。此外,还介绍了单手模式的设计考虑和内容与操作布局的关系。最后,文章提出了侧边交互的可能性,以缓解拇指移动距离和腱鞘炎的发生。触屏手势的易用性原则也得到了详细阐述,强调交互判别面积、滑动距离、操作方向约束、操作时间和接触点等因素对触屏交互的影响。华为的指关节交互被列举为一种非常好的交互方式。总的来说,本文通过人因学的视角,深入探讨了触屏交互技术的相关特点,为读者提供了深入了解触屏交互的视角和思考。
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《基于人因的用户体验设计课》,新⼈⾸单¥59
《基于人因的用户体验设计课》,新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(9)
- 最新
- 精选
- 陈晓晓刘老师好,今早地铁上学了您的,观察了下,身边周围小10个人,7~8个人是右手握持, 2个人左手握持,还有1个人是双手握持,进行打字操作。 还有一点,一个小建议,华为的单手模式确实看起来比苹果好,但我想问一下,华为单手模式有统计使用频率么,说实话我用的华为p20手机从来没用过单手模式,因为不知道怎样调出,刚听您讲底部横滑,我试了下没调出来,哈哈哈~
作者回复: 应该是有统计使用频率的。目前的设计,横滑后需要有停顿才能触发单手模式。我觉得仍有调出的优化空间。
2021-04-2033 - 陈晓晓用的不好的交互,我只是隐约觉得美团APP的交互有点复杂,功能分区需要优化,没有之前18年左右好,但具体哪里需要优化,怎么优化,就不知道了,大概几点是 1.首页的菜单栏可以支持客户自定义排序和添加,类似支付宝,现在默认三页小按钮是美团自定义的,对于用户而言可能有的不是最重要的,如果不是为了看它,我不会往后翻下一页; 2.美团主营业务美食团购不是很突出,我看了下现在有一个美团优选和猜我喜欢,将用户搜索过的在猜我喜欢里展示,不是说不好,但感觉有点可怕,赤裸裸的记录用户隐私了; 3.底部导航菜单第二个是"发现",其实我个人感觉啊,这个按钮让人一眼看上去不知道是啥,发现美食还是发现啥,其实点进去有点像小红书,图文推荐,我个人感觉这里可以转型做视频,商家上传视频,用户刷视频,逛美食逛美容,美团的商家资源上来了,用户也就来了。 当然这些只是我不成熟的想法啊,拙见拙见了!
作者回复: 1. 产品功能复杂之后,需要控制好用户的界面感受。复杂功能要隐藏起来。2. 大数据分析的逻辑其实给用户解释清楚会更容易引起用户的信任和理解。
2021-04-2021 - 陈晓晓刘老师好,刚试了下华为的部分截屏,敲击屏幕后画圆,没成功,说实话啊,我觉得这个敲击屏幕后截图还需要再多考虑一点,大部分中国人内敛,在一堆人中敲击手机屏幕,发出咚咚的声音,会引人注目,让人感觉有点傻,特别是敲击一下不成功,再次敲击第二下,把敲击屏幕改为直接画闭合圆截图,包括滚动截屏,改为画s型,去掉敲击屏幕的操作,不知道是否可行!
作者回复: 指关节交互的特点是短促的小面积接触。如果改为画圆其实并不符合触屏交互易用的特点。但任何交互都有可改进的空间。关于截屏,行业上有大约4~5种可替代的手段。从总体而言,各有优缺点。
2021-04-201 - 陳rt🦁老师您好,先问下指关节敲击和手指点击有什么差异呢?
作者回复: 指关节是类似敲门的方式在敲击屏幕,手指点击是指腹触碰。
2021-06-222 - 比特A特指关节交互感觉有点很牵强,噱头大于实用,华为和OPPO等等各种手机的截屏交互都用过,截屏过程中,关节截屏需要变换手势,相对来说也是一种生癖的交互行为,无法与截屏联想,成功率也不高使用华为时更多用快捷键截屏。但oppo三指截屏更顺畅,更能与截屏行为产生联想,使用oppo时,基本没用过快捷键截屏2021-06-0739
- 王强三指下滑的截屏感觉还是比指关节双击好用,人的手掌是朝向人脸外侧的,指关节双击却让人把手先反过来,这一步就已经慢了2022-09-24归属地:上海1
- 大眼睛老师,这节课从人因的角度讲了手机与IPAD的交互,那PC端是否也可以从触摸键盘/鼠标操作、视觉区域等来优化呢?2023-03-20归属地:北京
- 风火你会找到最小要44*44dp,折算为 7mm。而安卓定义的最小尺寸是48*48dp,折算为 7.4mm。如果你查询 ISO 标准的话,你会看到最小尺寸是 6.4mm。 ________________ 44dp是安卓开发单位,折算为设计稿二倍图的话是88px, 但是记得以前APP二倍图图标最小一般画44px,那折算为一倍图开发尺寸是22pd呀?2022-09-24归属地:四川
- Geek_6d9d46华为现在的手势截屏体验比较好2021-08-25
收起评论