【交互设计】界面设计中的按钮
接触交互设计工作以来的第一次输出，分享界面设计中关于按钮的一些观点，欢迎批评指正！
第一次参与交互工作，参与负责了一个后台项目的交互设计，今天开始陆续总结过程中新的认知。因为是后台项目且是2b端，故总结的主要内容都是基于后台的层面考虑。所总结的内容也是设计过程中自己的经验总结以及来自网络上各前辈们的文章分享（励志做一个知识搬运工）。
文章概要
概念—按钮是引导用户进入下一步操作的中介，并且通过按钮的触发完成校验与反馈，按钮设计能够大大影响用户的流畅体验并促进转化
类型—按钮类型包括常态按钮CAT（主按钮、次按钮、幽灵、危险按钮）、悬浮按钮FAB、开关按钮
状态—按钮状态包括正常、焦点、按下、无效、动效
走查—按钮设计的走查表
1 关于按钮
按钮不管是在web还是移动端都是页面中非常重要的交元素，通过按钮能够引导用户完成目标操作，获得转化率，好的按钮能够让用户获得流畅的操作体验。常见的按钮类型包括CAT按钮（行为召唤）、悬浮按钮、开关按钮等，不同类型的按钮适合在不同场景页面中应用，其次，按钮的大小、形状、位置的设计都会影响用户的体验，甚至影响业务需求。
2 关于按钮类型
2.1CAT按钮
CAT按钮是web和移动软件中应用最为广泛的组件，主要作用是引导用户进行特定的行为，如支付、关注、保存等常规操作。通过按钮，可以完成用户的转化，好的按钮设计应该是为用户提供直接、高效、准确的引导，同时吸引用户操作，实现业务的需求。
2.1.1CAT按钮类型的应用
在页面中会存在多个按钮的情况，因此衍生出多个类型，如下图（依次）：主按钮、次按钮、虚线按钮、危险按钮
2.1.2CAT按钮的主次区分
主按钮在页面中层级最高，因此在同一操作区域最多出现一次，否则容易扰乱用户操作。特别是在后台设计中，因为功能需要往往会存在多个按钮，如果不做按钮的主次区分，反而会增加用户操作的费力度。（如下图，同一个页面中存在多个按钮，均为主按钮样式，然后这几个按钮背后的功能逻辑是不一致的）
调整后：突出提交审核这一功能，根据需求增加按钮的样式，更符合功能需求（上传文件）
2.2悬浮按钮
悬浮按钮是MD语言的控件，主要区别是按钮下有阴影，视觉上像悬浮于页面上。
2.2.1悬浮按钮类型的应用
执行关键操作
悬浮按钮通常用来承载页面中非常重要的任务操作，如业务的主要功能、甚至是产品主要功能特色，如滴答清单中新增条目的按钮，增加条目是滴答清单的主要功能，用户进入app的大部分行为是添加，因此，将增加按钮悬浮于页面，获取用户的视觉中心。
引导操作
悬浮按钮可以用来引导用户进行操作，类似于路标的功能，如在点评编辑页面，悬浮图标可以引导用户进行编辑内容。
悬浮按钮承载正向操作
悬浮按钮承载了页面的主要功能，因此必须是正向积极的操作，如创建、分享、点赞等，而不应该是诸如删除、复制等类型的操作。
2.2.2悬浮按钮注意事项
切勿使用冷门图标、目标不明的按钮，容易造成用户的困扰、产生认知负担；一个页面中只适合一个主要悬浮按钮；悬浮按钮适合常见的关键功能。
3关于按钮状态
3.1正常状态
正常状态下的按钮应该看上去应该是一个按钮即可，用户一眼看过去便知道是可点击的。
3.2获取焦点状态（web端中）
即用户鼠标hover（悬停）时，按钮需给予反馈，表示鼠标可点击，增加用户的反馈体验3.3点击
3.3按下状态
用户点击按钮后，需要给予反馈，包括按钮的变化或者页面的反馈等等。让用户清楚意识到，操作有了反馈（成功或失败）。同时按钮的反馈可以增加动效，让交互更加活泼有趣，增加情感化体验。
3.4无效状态
按钮存在无效状态，包括隐藏按钮、禁用按钮。隐藏按钮是在特殊状态下，可以隐藏掉不需用户操作的按钮，能够让用户专注于其他任务，而禁用按钮可以让用户明确交互过程中这个按钮可以使用，用户可以清楚知道页面的按钮位置，方便之后的操作。
4关于按钮的设计走查
4.1用户是否可识别出按钮？
按钮有基本的特征，必须让用户清楚的知道这是按钮，且可点击于不可点击的状态作出区分，同时不可点击可以给出原因。
4.2按钮是否让用户清楚知道点击后回发生什么？
一个按钮必须清晰让用户知道用来干什么，因此文字标签必须简要明晰，且遵守用户的认知习惯。
4.3按钮是否主次分明？
一个页面中只有一个主按钮，切忌多个按钮，扰乱用户的操作，对于按钮的设计可以从样式进行区分，但始终突出主按钮。
4.4按钮是否给出合适的反馈？
用户在触发按钮前、中、后都需要给出状态反馈。
4.5按钮是否符合场景和用户需求？
按钮可以是积极正向的操作也可以是危险操作，因此需要根据具体的需求和场景进行按钮设计
参考：
ant design后台规范： https://ant.design/components/button-cn/#components-button-demo-ghost
参考文章：https://uxplanet.org/button-ux-design-best-practices-types-and-states-647cf4ae0fc6#.tzz6rcmju
