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

@Daidai丶呆 ：随着互联网的展，国内设计识的沉淀是越来越深，许设计师已经慢慢培新的设计理念，「基互模式的设计」、「司业务驱动的设计」等等。用一句来概括的，我说：今的设计师已经培与用户使用场共情的思模式（就是站在场角度来设计产品）。

手势交互，通常被大数人所遗忘。而人没意识到，移动产品的设计是建立在手势互的基础上的。

手势热区的误区纠正

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

常，部分设师基本都一张 375×667 的画板始设界面的。所以假如设师按照这区设界面中功能置的话，重功能应该置「易操作区域」近的（如下图）。

注：本文所区均以右手基础绘制。

时问题来，因为大部分设计师是直接导出 @x3 倍图来适 plus，所以当在大尺寸设备上操的时，当初把功能控在 @x1 倍图的热区，在大屏上就不适用。（下图）

所以当有用户反馈当前页面操来很力的时，我就没办法理，直到自己尝试使用之才现问题。最只单独在大屏设备上优化设计方案。

这里再给家普及一知识：部分人误以，手指屏幕的区永恒不变的，但其实手指区会根据设备的变缩小。因手掌支撑设备的重靠后走了，所以拇指操控屏幕的范围也就变小了。详见下图。(提示：这里的区图都我自己随意画的，如果学习的好找些比较规范的资料。)

虽然以况多出单手持机的场景，但手况下，也类似。我们设的过程中，首先考虑单手易操作的提，然后再考虑手。原因，市场小屏手机还占以主导；单手如果问题，手问题也不会太（当然不绝对）。

内容在上，操作在下

许多人设 App，但人研究过 App 什么这么设。我的什么如此设不狭义的功能设，广义的产品设。

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

通过翻阅多方资料，发现在工业计领域有一条重要的基本计则：内容在上，操作在下。

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

智能手以及平板电脑普及，让我们慢慢开始依赖手势作用。比如我现在天大部分生力工作都是使用 iPad Pro + Smart Keyboard 来完成，如写文、脑图、看书等等（原型是在电脑上画）。而手势涉及操作原则是常多，这里提到「内容在上，操作在下」是其。

操在下意味着使用者在操程中，手指始终处界面下方，而内容在上面，就不出现手指遮挡内容的情况。

如下图的键盘操作提示：

基于此，相信也知道什么标签栏下方不方了吧？

下面再来个例详细说一下：

1. 为么 iOS 要把返放在上面而是面呢？

• 返回按钮如果放在下面，用户会轻易点击，而放在上面，用户需要破目前聚焦于内容的状才能点击返回。
• 将标签栏与工具栏全置于方，会容易导致发生误操作（如 Android 设备），我们在设计的过程中要视情况而做合的布调整。

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

界面右上角的位置对拇指来说显然是友好的。然而，这样做的原因是显而易见的，编辑功会数据发生变。将这类控件放在难操作的位置上（与左上角的返是一个道），就是一种防御性的设计策略，可在一定程上避免因为太容易产生误操作而导致的破坏性的结果。

所以 iPhone 其实是打破了原有设计理念，在原来基础上做了创新，这是其优秀处。

操作路径与操作效率

传统确认弹窗逐渐被手势操作取代，大家应该察觉到，以往从电脑迁移到移动设备上交互为已逐渐被改善。

曾经我们在移动设备上选择删除某项数据，弹出警告框，询问我们是否确认删除。虽种方式打断我们的操行为，但久而久之，用户已经对此互方式习以为常，或者说免疫。且种弹框的方式始终被认为是不的一种互手段。所以滑删除，已经被更产品功能用来取代弹框。

也许很人没思考底原因，或者仅仅只是得其相比弹框显得更。其个行为是基手势互做相应的优化，让用户操来更加方便。

到了这里，我再举所人都熟悉的例子，就轮播图了。

轮播图最早出现于网页端，后来被大量商家模仿，以至于移动端还备受各产品计人员的欢迎。但其实多人对轮播图的使用方法都是错误的。

面我来告诉你轮播图与手势的系。试想，你的轮播图有 6 张 Banner，你要翻到第 4 张，无论是往前翻还是往后翻都要产生 3 次交互行为。而大分产的户在界面停留的时间会这么久，更会看你 Banner 的容。甚至有研究表明，除了第一张 Banner 的点击率有 83% 之外，余的点击率都非低。

有说可以击下原指示做跳转，这么小，你觉击它现实么？所以手势交互与轮播图是相互矛盾设计。

所以运策划了个活动，而你往顶部轮播图里塞，这个为已经注定这个活动用户参与度是很低了。除了个电商品，他们以卖广告位商家作为盈利，即便如此，我相信这个广告位除了第张图击量稍高，其他图片击量相于品本身用户体量而言是很低。这也是为什么部分品把轮播图规则改为用户进入首页随展示轮播图页，而不是强制指定于显示第张原。

果你的产品有很活动是在同时期进行的，么我给部分产品的建议是放一个活动主题口，下图。（当，要视情况而定，并不是通用的。）

另外，果你的产品顶部 Banner 仅仅只是展示位，么我建议不要浪费空间，把它用来。以做品牌宣传、以做产品推、以做数据展示等等。一点，我得「大众点评」的设计方式就很。想的，以去亲自验下。

小结

很多在做移动端品设计，是很少会去理解其背后原理。而了解这些原理，能够帮助你更好设计品。我个是主张具体问题具体分析，这里是各位个思考路径，至于具体设备、情况、功能，是要基于下情况来做详细解析。

以上识是我早期学习并总结的一小部分内容，长期存储我的个人笔中，更的是用来自我总结。次分享给各位，希望能有所帮助。

欢迎关注作者的微信公众：「呆呆U理」