| 产品设计之「取消按钮」的使用详解 │ 细节分析 | |
| 【返回本版】 【发表帖子】 【回复帖子】 | 浏览量 1146 回帖数 0 |
 |
lanlan123 等级 ☆ 0 楼 发表于 2019/11/4 10:56:28 编 辑 |
|
|
按钮，无论是在 Web 还是 App 上都被广泛地使用，而很少有设计师会注意到按钮当中的细节，导致在设计过程中出现一些低级的错误，使得用户在完成任务的过程中产生阻碍，无法顺利达成目的。 在许多优秀的产品中，关于按钮的设计已经有了一套相应的规范去执行。作为设计师，应该总结这些规范，并产出一套适用于自家产品的设计规则。 今天主要先与各位聊聊「取消按钮」的设计思路。 关于「取消」，大多数人对其理解还停留在 PC 端，认为「取消」的目的就是让用户停止操作上的流程。但时至今日，「取消按钮」的设计已经有许多解法与思路，如果不仔细研究与分析，可能会忽略一些用户行为上的细节。 所以我们从下面三个大点来聊聊「取消按钮」的设计： 1.按钮中的「召唤行为」（理清按钮设计的概念） 2.其背后的控制权（关于按钮的权重信息） 3.「取消按钮」的正确解法（重点） 按钮中的「召唤行为」 通常，我们在产品中会为了达成某种指标，需要在界面上引导用户去完成我们希望其完成的操作。且这类操作是可以达成某种目的的，我们把这类操作称为「召唤行为」，即从元素的角度引导用户完成任务。 这类「召唤行为」最常出现的，是在按钮设计的过程中。 用户如何将元素理解为按钮？就是通过对形状和颜色的控制，使该元素看起来像一个按钮。 它唯一的作用就是让用户点击，并且是主动让用户点击。 这段内容各位只要记住：按钮的行进与回退，基本遵循「召唤行为」的思路来设计。 背后的控制权 接下来我们从多个角度来挖一下「取消按钮」的设计，分析其不同地位。 a. 安全性后退 「取消」在多数情况下，意为安全性地后退，并将界面恢复到原有的内容上，不对界面与功能本身造成破坏，防止对系统进行不必要地更改的「安全措施」。 所以正常来说，「取消按钮」不是「召唤行为」。以至于通常在设计上会被弱化，以表示该按钮在功能的流程中，不是主要的，且是提供给用户作为回退余地的操作。 b. 强化「取消按钮」 当我们不希望用户退出某个界面，或停止某个流程时，往往会选择将「取消按钮」强化。 通过对字体的加粗，以暗示用户不要轻易退出。在这个流程里，「取消按钮」具备了「召唤行为」属性。 也有产品通过改变「取消按钮」的文案，让其具备「召唤行为」的属性，使得用户在此过程中轻易不要退出该流程： 但是「取消按钮」真的应该具备召唤属性么？不着急，我们第三模块再细聊。下面我们先聊聊 Web 与 App 的之间的差异。 c. Web 与 App 的位置差异 我们现在见到越来越多的 Web 端产品，也开始遵循 App 产品的设计，把「取消按钮」放在左边，「召唤行为」按钮放在右边。 但在早期，Web 的「取消按钮」基本是放在右边，原因是鼠标的移动路径是根据眼动规则来，我们的视线会首先与文案聚焦到「召唤行为」的按钮上，也就是左边，这时候鼠标轻而易举地随之而来。 而手指行为的操作，会以右为前进导向，且右手手势因为便捷性，也会以右为确认操作。否则单手持机，且行进路径长的话，用户想进行确认操作会相对比较吃力。 这就是 Web 与 App 在按钮位置上的主要区别。 「取消按钮」的正确解法 我相信，只要是平时稍微有认真观察的同学，都能知道我上述聊的内容。我个人也不认为这些内容具备任何需要总结的价值。但是如果不写出来，就没办法说明我接下来要聊的内容，也是我这篇文章的重点部分。 通过上述内容，我以不同类型的按钮案例来解释「取消按钮」的控制权。各位可以看出，即使是不同类型的「取消按钮」，在权重上的道理也都是一样的。 那如何设计才是最佳方式呢？取消按钮真的具备召唤行为？ a. 界面层与弹框层 其实严谨点来说，界面层的「取消按钮」与弹框层的「取消按钮」的意义是不同的。 虽然都是安全性后退，但是前者多了一层含义：放弃属性。 b. 弹框层「取消」颜色的差异 上面提到的许多例子中，还存在一个类似的问题：它们大多选用 iOS 自带的弹框直接做为操作对象。 我始终觉得在 iOS 提供的弹框中，两个操作的按钮颜色保持一致是不对的。 粗细有时候很难被直观感受，而颜色可以在第一时间被感知。 综上所述：界面层的取消，为了表示其作用性的不同，且界面元素众多，突出颜色是没问题的；但弹框层的取消与确认在颜色上没做区分，直接用不太明显的粗细效果让用户聚焦于这两个内容的选择上，其实是不友好的设计。 如果对 iOS 设计规范有足够的了解的同学就能知道：它们在弹框控件上给出的两个选择都不是真正意义上的召唤行为按钮，只是常规内容，且更适用于产品开发，而不是设计指导。 可能有人会觉得，这么一个小问题，不至于用这么长一篇文章来说明，不过人么，就是存在这样那样的区别。我认为需要就可以了。更多文章就在蓝蓝设计每日一贴。您可以直接联系优秀的软件ui设计提供者北京蓝蓝设计,北京蓝蓝设计为您提供最好的设计服务。 欢迎访问,开始愉快的合作! 网站：www.lanlanwork.com 全国统一客服热线：400-608-6026 公司邮箱:weibaobei@163.com |
||
| 1 |