简单聊聊手机交互设计中的“拇指法则”（下）

上一篇文章给大家简单聊了一下“导航菜单”，接下来就看看“友好式卡片设计”和“手势”。这两个方面也是有章可循的。

友好式卡片设计

卡片式设计现在大行其道，被广泛应用。卡片式设计可以快速直接的将信息展示出来，比如新消息，天气，日程等信息直接在卡片上呈现。接下来我们将通过两个例子来看“拇指法则”在卡片设计中应用。
在上面这款天气类APP中，我们可以看到“城市搜索”和“使用当前位置”被放在页面最顶部的Hard区，这是因为系统会记住你上次打开应用时的位置。而我们一般只关注自身所在地的天气情况，所有以上的两个功能我们很少会用到。那么一款天气类APP肯定希望可以得到推广以赢得更多的用户，所有将“分享”按钮放在Natural区来诱导客户将其分享到朋友圈。
看完好的例子，接下来再看一个反面典型，这是一个电商APP的购买流程页面，点击“添加新的收货地”会弹出一个表单。这个页面乍一看没什么问题，但是仔细一观察就会发现问题。首先，页面左上方的“取消”链接会给人带来误解，如果我点击它那么是整个购买流程被取消还是“添加新的收获地”这个操作被取消？还有表单右上方的关闭按钮位于Hard区的边缘，拇指很难进行直接有效的操作。这时最好的方法就是缩减表单内容，让关闭按钮可以下降到Natural区。我们要知道卡片式设计最吸引人之处就是其可以在很小屏幕区域内展示尽量多的内容，卡片的本身也对信息进行了归类整理的作用，使用户看的一目了然。如果我们一味着追求设计感而使卡片内容过于臃肿这无异丢掉了卡片固有短小精悍的精髓。

手势
在上图中，圆圈代表点击，剪头代表滑动。研究数据表明，用户习惯于由边缘向中间滑动和由上向下滑动。而且大部分滑动操作都是在Natural区完成。

我以前误以为滑动的时候是完全水平方向的，这让我在设计过程中给单个元素的滑动高度过小，因为我没有考虑用户向下滑动的距离。这样就导致了用户在滑动过程中会触碰到下面的其他元素。最后我经过多次的实验发现一个的滑动手势的完成最少是45*45像素。
谷歌的Inbox就是一个很好的例子。

总结

1、移动端设备不断在变化，新的技术也不断涌现。但是只要是触摸屏这种交互模式还在，那么拇指就是设计环节中必须要考虑的一个因素。

2、友好式卡片设计意味着重要的功能（或者你希望用户操作）要位于拇指容易操作的区域，不重要的功能可以放在拇指不容易操作的区域。

3、让滑动手势尽量远离拇指难以触碰的范围， 提供足够大的点击区域，避免误操作。

在手机交互设计中，需要掌握的知识点比较多，之后会继续给大家分享，欢迎各位小伙伴继续关注。

以上就是“简单聊聊手机交互设计中的“拇指法则”（下）”的内容了，如果你还想了解其他相关内容，可以来 产品壹佰 官方网站。