移动端产品设计完全指南9:触控设计

2018-03-1017:21:12互联网产品Comments2,469 views字数 681阅读模式

触控设计的目标是减少错误输入的次数,优化用户和App的交互体验。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/1524.html

9.1. 为手指设计,而不是为光标设计

为移动端设计界面元素时,一定要确保各个元素足够大,避免因为元素较小而产生的误触。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/1524.html

移动端产品设计完全指南9:触控设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/1524.html

元素较小会提高误触概率(图片来源:Apple)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/1524.html

在设计元素尺寸时,可以参考MIT触控实验室的研究结果:10mm*10mm是比较合理的触控尺寸。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/1524.html

移动端产品设计完全指南9:触控设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/1524.html

10* 10 是最佳的触控尺寸(图片来源:UXmag)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/1524.html

除了适当选取元素尺寸外,还要在元素之间留有足够的空隙,以防误触。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/1524.html

移动端产品设计完全指南9:触控设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/1524.html

(图片来源:Material Design)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/1524.html

9.2. 拇指触控区域

设计中要考虑到拇指触控的区域,一方面因为拇指与屏幕的接触面积更大,另一方面是因为用户习惯了的持有设备方式。很多用户用一只手使用手机,那么自然而然地使用拇指操作,只用拇指操作的区域称为自然拇指区。在下图中,能看到自然拇指区的大致范围。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/1524.html

移动端产品设计完全指南9:触控设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/1524.html

(图片来源:Smashing Magazine)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/1524.html

屏幕尺寸越大,自然拇指区的相对面积越小。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/1524.html

移动端产品设计完全指南9:触控设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/1524.html

(图片来源:Smashing Magazine)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/1524.html

设计App时应考虑到所有区域:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/1524.html

  • 绿色区域是导航栏或频繁的交互操作的最佳位置(如操作按钮);
  • 红色区域是潜在的危险选项的最佳位置(例如“删除”或“清空”),用户不太可能误触到此区域。

9.3. 交互反馈文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/1524.html

用户期望电子产品或者互联网产品能对操作进行及时的反馈,在产品设计时,需要对用户的每个操作设计相应的反馈方式。如果某项操作没有及时反馈,那么用户可能会疑惑是否已进行操作或者错过了什么。反馈可以是视觉上的(突出的点击按钮),也可以是触觉上的(设备振动)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/1524.html

移动端产品设计完全指南9:触控设计文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/1524.html

利用动画及时的给用户反馈(图片来源:Vadim Gromov)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cp/1524.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/cp/1524.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定