App 按钮的背后，这些学问你都不知道

据研究显示，圆角能促进信息处理，并吸引用户聚焦到元素正中央。

圆角矩形按钮

当然，你还可以加入更多创意元素，使用如圆形，三角形甚至自定义形状的其它形状，但要注意，使用这些形状可能会更加冒险。

FAB 示例

2. 尺寸和内边距

在帮助用户识别按钮元素时，按钮的尺寸大小也非常重要。你需要考虑按钮元素的尺寸大小，同时还要考虑可点击元素间的内边距。

尺寸。当你使用轻击（tap）作为 app 或网站的主要输入交互方式时，你可以参考麻省理工大学触击实验室（MIT Touch Lab）的研究，从而为你的按钮设计选择合适的尺寸。

根据 MIT 的研究发现，指垫的平均宽度在10-14毫米之间，指尖的平均宽度在8-10毫米之间。因此，10×10毫米是触屏按钮最小尺寸的一个好选择。

图片来源： uxmag

这个建议本意不是让那些易按错的按钮更加完美，而是尽可能将按错次数最小化到实用水平，同时，还要平衡其他重要特性（比如屏幕信息密度）。

图片来源：ux.stackexchange.com

当鼠标和键盘作为主要的输入交互方式时，对按钮尺寸的要求则可以稍微降低，以便于适应密集型的用户界面。

内边距。按钮间内边距是为更好地区分各交互控制按钮而设计，同时给用户界面足够多的空间。

Google 的 Material Design 对话框中扁平化按钮间的内边距

3. 标签

你应该为按钮选择一个合适的标签。选择标签的方法应该基于最小惊讶原则（principle of least astonishment）：如果某必要按钮有个高惊讶因素的标签，那就要考虑更换这个标签了。

经验法则——按钮的标签要体现其功能。添加一条清晰信息来告知用户在点击/轻击后会发生什么，或者通过行为动词提示用户某界面元素的功能。

下图示例是在 Dropbox 网页版上传文件的一个对话框，该对话框中有一个带有「棒极了！（Awesome!）」标签的单独按钮。这个标签对普通用户来说可能有困惑性，因为它并没有说明点击该按钮后有什么用。

图片来源：uxmatters

4. 颜色

在调色板上选择颜色时，要思考颜色可以怎样帮助用户导航和理解该行为的。

使用颜色和对比来帮助用户查看和了解 app 的内容，与正确的元素进行交互，并理解相关行为。

下图示例中，我们使用了红色按钮来标识一个潜在的毁灭性行为（该按钮标签「UNINSTALL」意为「卸载」）。

注意「卸载（Uninstall）」动作按钮是如果通过颜色和对比更吸人注意的。图片来源：Material Design

使最为重要的按钮（特别是行为号召按钮）看似最重要的。例如，亚马逊使用了对比性较强的黄色按钮来吸引用户采取正确的行为。

亚马逊的CTA按钮「加入购物车（Add to Cart）」使用了对比颜色

结束语

所有按钮（比如经典按钮或者像虚拟按钮或浮动操作按钮等现代按钮）的作用都是指导用户实施你想让他们去采取的行为。

把网页或者 app 当做一个繁忙的用户发起的对话，那么按钮对这段对话就非常重要——流畅的交互能保证对话正常进行，而小故障（比如找不到正确的按钮）就会引起中断，更甚是故障。

谢谢！

作者 | Nick Babich

软件工程师，关注UI和UX。

译者 | Jorri

本文译自Buttons in UI Design: The Evolution of Style and Best Practices，已获原作者授权翻译。

本文由让手机更好用的 AppSo 翻译出品，微信号 appsolution。

注：相关网站建设技巧阅读请移步到建站教程频道。

（编辑：应用网_丽江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!