哈喽“按钮”

按钮是交互设计的基本元素，它模仿真实世界与对象进行交互方式，是用户和界面进行交流的主要方式,它帮助用户探索界面，明确行动目标。

本文将通过按钮的分类、用法和设计原则三个方面来带大家了解这个小小的元素。

按钮的分类及使用

CTA按钮

CTA是一种强引导性的按钮，它能充分引起用户的注意，在页面中脱颖而出，并鼓励用户进行操作。在淘宝，考拉这类电商app的界面中，购买行为是整个业务的核心，也是最需要着重强调的。所以在这类app的页面中购买按钮最为突出，是一种典型的CAT按钮。

浮动按钮（FAB）

浮动按钮通常是在页面中的某个固定位置漂浮着，是一种高优先级别的按钮，通常用在一些核心、频繁使用的操作上。例如摩拜app中的“扫码开锁”。

图标按钮

顾名思义就是用一个个形象的图标来表示不同的操作，例如，我们最常见的“点赞” “留言” “收藏” 等等。页面中的主要操作可以考虑使用图标按钮，但在某些地方图标按钮无法准确的表达出按钮的含义，则会配上一些简短的文字，来进行解说和强调。

文字按钮

用几个文字来代表按钮，文字可以是按钮的操作结果，也可以是一个动词。它没有集成为我们常见的形状，和一般的文本相似，所有看起来并不是很特别像按钮，是一种点击感比较弱的按钮，通常用于创建辅助交互区域。在使用时为了传达可点击的感觉，会使用主题色，或者加粗等方式来突出它。

幽灵按钮

不同于文字按钮，幽灵按钮在文本的周围加上了一圈细线，看上去更加像是一个可以点击的按钮。幽灵按钮具有简洁轻盈的特点，可以使得它即表达出了自己的按钮特性,又不会影响页面的平衡。页面中的主要操作也可以时常看到它们的身影。

下拉按钮

单击下拉按钮时，将显示互斥项目的下拉列表。通常填写列表中遇到此类型。

汉堡按钮

汉堡按钮将所有的操作都折叠起来，只有点击开来才可以看到里面的操作内容。因此汉堡按钮里面的操作都不易被发现，通常都使用在一些不常用的操作中。

按钮设计原则

虽然不同类型的按钮都有不同的使用场景，但他们都有以下几个共同的设计原则:

足够引人注目

越是重要的按钮越是要足够引人注目，例如使用主色调或者背景对比色，将所占面积放大。即使是弱点击感的文字按钮，在页面中也要让用户直观的感受它们的存在。当需要强调按钮中的文字时，不妨采用圆角的按钮。圆角按钮不仅可以带给用户亲和的感觉,也可以让用户更加聚集文字内容。

例如：在马蜂窝的详情页面里，我们可以依次看到：底部的操作栏（客服、店铺、收藏、购买）、开通vip、价格说明、更多班期和一些表示更多的图标按钮。底部的“立即购买”和价格底下的“开通vip”都是重要的业务按钮，这个两个在颜色上都做了突出显示，点击区域也是最大的，即使是“价格说明”、“更多班期”这类弱点击感的文字按钮，也在用蓝色做了突出显示，让用户感知到它们。

按钮的描述

按钮的描述是对按钮的说明，也是对面操作后产生情况的描述。可以直接将说明放在按钮里面，例如：常见的保存按钮；也可以先进行一段文字描述，再抛出按钮。其目的都是为了让用户了解到按钮的功能，使用户对自己的行为有掌控的感觉。

按钮位置

按钮的位置要考虑操作便捷性和阅读性。阅读性是指按钮的放置位置要符合常使用的视觉线路：“F”线路、“Z”线路。便捷性即按钮的位置要放在容易点击的地方,web页面边缘部分是最易操作的区域，手机端则是靠下居中的区域。（下图为手机端各个点击区域的操作难易情况）

例如网易音乐的弹窗，为了适应大屏手机的操作，将之前水平并排的两个文字按钮变成了右对齐的展示方式。

按钮的大小

麻省理工学院的研究发现，手指垫的平均值在10-14mm之间，指尖的平均值为8-10mm，因此10mm x 10mm的最小触摸目标尺寸则很好，即不小于44Х44 px（@2图的情况下）。

同时，为了防止紧挨着的按钮之间的误操作，两个按钮之间的距离最小建议控制在16px（@2图的情况下）及以上。不要因为按钮大小设置不合适而让用户放弃和你的页面进行交互哦~

按钮的反馈

无论是何种操作，及时的反馈都是一种良好的交互体验，按钮也不例外。按钮是否可以点击，按钮点击前，点击后也应该及时给出变化。

平板电脑和移动设备上很难出现悬停状态，因为你的手指无法“悬停”。因此，如果为应用程序进行设计，可以忽略此状态。

END......

更多分享，欢迎关注公众号：七七的设计手札