欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

从「手势交互」出发,分析产品设计背后的原理

发布时间:2018:01:15 19:07:53 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1460个文字,预计阅读时间4分钟
导语
随着互联网的发展,国内设计知识的沉淀是越来越深,许多设计师已经慢慢培养起新的设计理念,如「基于交互模式的设计」、「公司业务驱动的设计」等等。用一句话来概括的话,我

  随着互联网的发展,国内设计知识的沉淀是越来越深,许多设计师已经慢慢培养起新的设计理念,如「基于交互模式的设计」、「公司业务驱动的设计」等等。用一句话来概括的话,我会说:如今的设计师已经培养起与用户使用场景共情的思维模式了(就是站在场景角度来设计产品)。

  而手势交互,通常会被大多数人所遗忘。然而这些人都没意识到,移动产品的设计是建立在手势交互的基础上的。

  手势热区的误区纠正

  按照正常的手机触控热区图来说,我们应该把重要功能放在用户容易点击的区域。但是大部分设计师在这个过程中往往没有真正将其运用到位。 我之所以得出这个结论,是因为在这次功能测试中,也遇到了同样的问题。所以我测试了其他公司的一些产品,果然有类似问题存在。

推荐阅读:阿里巴巴设计师:如何给后台产品做设计?

  正常来说,大部分设计师基本都是在一张 375×667 的画板上开始设计界面的。所以假如设计师是按照这个热区来设计界面中功能位置的话,重要功能应该是放置在「易操作区域」附近的(如下图)。

  注:本文所有热区均以右手为基础绘制。

  

从「手势交互」出发,分析产品设计背后的原理

 

  这时候问题来了,因为大部分设计师是直接导出 @x3 倍图来适配 plus,所以当在大尺寸设备上操作的时候,当初把功能控制在 @x1 倍图的热区,在大屏上就不适用了。(如下图)

  

从「手势交互」出发,分析产品设计背后的原理

 

  所以当有用户反馈当前页面操作起来很吃力的时候,我就没办法理解,直到自己尝试使用了之后才发现问题。最后只好单独再在大屏设备上优化设计方案。

  这里再给大家普及一个知识:大部分人误以为,手指在屏幕上的热区是永恒不变的,但其实手指热区会根据设备的变大而缩小。因为手掌支撑设备的重心靠后走了,所以拇指操控屏幕的范围也就变小了。详情见下图。(提示:这里的热区图都是我自己随意画的,如果想学习的最好找些比较规范的资料。)

  

从「手势交互」出发,分析产品设计背后的原理

 

  虽然以上情况更多出现在单手持机的场景,但是双手情况下,也是类似。我们在设计的过程中,首先要考虑单手容易操作的前提,然后再考虑双手。原因是,市场上小屏手机还是占以主导地位;单手如果没问题,,双手问题也不会太大(当然不是绝对)。

  内容在上,操作在下

  许多人设计 App,但是没人研究过 App 为什么要这么设计。我说的为什么如此设计不是狭义上的功能设计,而是广义的产品设计

  正是上面那个问题,让我在跟朋友讨论的过程中开始延伸思考,为什么起初要把标签栏放底下呢?关于这个问题,当初我也是问了许多人,而基本都只是说这是官方设计规范。

  

从「手势交互」出发,分析产品设计背后的原理

 

  通过翻阅多方资料,我发现在工业设计领域有一条重要的基本设计原则:内容在上,操作在下。

  或许在电脑上操作的时候,你意识不到这个问题,即鼠标的点击,跟这条设计原则的关系其实不大。而当操作涉及到手指的时候,问题就开始显现出来了。

  智能手机以及平板电脑的普及,让我们慢慢开始依赖手势的作用。比如我现在每天大部分生产力工作都是使用 iPad Pro + Smart Keyboard 来完成,如写文、脑图、看书等等(原型还是在电脑上画的)。而手势涉及的操作原则是非常多的,这里提到的「内容在上,操作在下」就是其一。

  操作在下意味着使用者在操作过程中,手指始终处于界面下方,而内容在上面,就不会出现手指遮挡内容的情况。

  如下图的键盘操作提示:

  

从「手势交互」出发,分析产品设计背后的原理

 

  基于此,相信你也知道为什么标签栏在下方而不是上方了吧?

  下面再来两个例子详细说明一下:

  1. 为什么 iOS 要把返回放在上面而不是下面呢?

  返回按钮如果放在下面,用户会轻易点击,而放在上面,用户需要打破目前聚焦于内容的状态才能点击返回。

  将标签栏与工具栏全部置于下方,会容易导致发生误操作(如 Android 设备),所以我们在设计的过程中要视情况而做合理的布局调整。

  2. 为什么 iOS 设计规范建议将「编辑」按钮放置在界面右上方的位置呢?

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:服务设计真的价值与应用

下一篇:BAT都在使用的设计创新方法 ,现在手把手教你做!

  • 18893 文章总数
  • 2302872访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信