这个序可能会有些长
先作个自我介绍，我是一名交互设计师，90后。我并不怎么喜欢编辑文章或写点什么，就是因为懒，所以就总觉得很难。但决定跨出这步，在简书写了五篇以《表单设计》开头去介绍组件的文章，边写也在边规划应该如何去写好下一篇我文章、同时也能提升自己的技能。在过程中也经历了不少事儿，也更让我深深的决定还是继续做这个事情——交互设计。
前言
之前在工作空闲时间去翻译文章、跪着看看设计类的书或大厂的Guideline，但也没怎么好好去总结沉淀过变成自己的。在这五篇的沉淀总结中对于自己过去自己在表单设计时遇到的问题收货颇多，表单是由：输入框、单选按钮、开关、复选框、选择列表、按钮等组件组成。
表单只是个收集用户信息的方式，用户需要的是高效愉快的完成填写。
写给自己
【21天养成习惯】这个说法在我身上好像无效，只希望自己可以坚持下去，不断去修订这东西。
目录
- 动手前冷静思考
- 各组件的自我介绍
- 输入框
- 单选按钮
- 复选框
- 下拉列表
- 按钮
- 交互设计是什么？
- 写在最后
- 参考文献
动手前冷静思考
当碰到表单设计的需求时，把问题按照优先级去排序，我认为需要考虑的第一问题是只需要用户输入什么，第二个问题通过技术的手段去考量是否可以利用最少的字段做最多的事儿，再把字段在先后逻辑上进行排序、把关联的信息成组，最终的目的是便于用户更快速的理解自己要输入什么。
各组件的自我介绍
输入框[input]、单选按钮[Radio button]、复选框[Check box]、开关[Switches]、下拉列表[Dropdown]、步进器[Stepper]、滑块[Sliders]、按钮[Button]
输入框
输入框元素
标签[Label]、输入框[Input]、提示[Assistance]、校验[Validation]，这四个元素组成标准的输入框。
标签[Label]
它需要明确告诉用户输入什么
输入框[lnput]
它包括文本字段，数字字段，混合字段，密码字段等。
在移动端产品中，友好的使用系统键盘是提升体验的一个方法，在移动端应用中根据填写内容的属性，例如：填写手机号可以直接弹出系统的数字键盘；在web或桌面应用中可以配合自动填充选择也是提升体验的方法，例如：填写邮箱当用户输入用户名，出现自动填充的@域名。
对于不同的输入内容有着不同的解决办法，但最终的目的都是为了让完成表单变得更高效。
提示[Assistance]
让用户能在标签和输入框之间获取信息，帮助他完成输入。常见的几种方法：
把提示的内容置于输入框内，会把这个叫做暗提示[Placeholder]。
当输入框获取焦点时，出现文字气泡提示会叫做[Tooltip]。
当说明文案较长时，你可以使用一个icon图标去提示[Popover]。
当需要输入提醒，你可以将其放置在输入框附近[Help text]（位置不建议放在下放，建议把校验反馈放在输入框下方）。
以上四种是在提示的四种用法(还有更多)。对于不同的表单页可以利用不一样的方法去进行尝试。
校验[Validation]
用户厌恶当他们在填写过程中到等提交时才发现他们之前输入错了东西。
试想：这个表单有10项信息的收集，当我第一项填错后没有校验反馈，然后我继续表单填写任务，十项填写完毕后，点击[Submit]后，良心点的回滚到第一项输入框出现错误提示并获取焦点告诉我错了让我修改，恶心的停留在当前屏幕，整个人会懵为什么任务不能继续？然后就会思考是不是填写哪里出了错？再返回检查问题，这样效率就会下降。
点击[Submit]这种校验属于第二道校验：提交校验(复杂的校验，有些可能需要走后端校验)。所以当用户在输入框录入后完成失去焦点后就有义务告知所录入的内容是否正确/错误。
这是第一道校验：即时校验(利用前端校验比如：通过正则表达式校验手机号的位数，手机号的有效性等)。
这种方法允许用户更快的纠正错误，无需等待。文案的描述也应当更明确，告诉他们什么错了，这样在输入过程中也能给用户带来更多的信心。
适量的减少输入项
尽量可能减少输入项个数，这样可使得表单更轻松，尤其是当我们需要向用户收集大量信息，根据实际情况考虑做减法，用最少的收集内容去做更多的事。
打个比方：现在有个表单，需要收集姓名、性别、出生日期、身份证号四个输入项。我们可以通过技术的一些手段从身份证号中提取出信息，那4个输入项就可以变成变成2个。身份证的倒数第二位可以判断性别：奇数是男，偶数表示女，出生年月大家都知道。
再来个比方：假设手机充值时需要选择手机号的归属地信息，是做一个城市选择列表让用户去选择？这我也不清楚手机号是不是有规律，如果没有，那不妨通过接口去查询用户手机的归属地，这样操作成本大大下降，归属地选择错误的可能也会下降。
结合不同的场景去思考会发现无限多的做法，减少输入项个数的目的也只是为了让完成表单变得更加高效。
明确的标签
标签不是暗提示或者帮助文本的信息，应该精简，简短到不能失去说明性的，这样用户通过快速扫描表单就可以了解自己需要填什么的预期了。
比方说：[请输入你的姓名]精简成-[姓名]等。
对齐方式
左对齐、右对齐、顶对齐三种我们不论在哪都可以见到的对齐方式。结合以上所说的表单元素接来下讨论一下三种对齐方式：
顶对齐
顶对齐的优点：相比其他两种对齐方式，它更适用于不同字数的标签，让标签和输入框更加紧密，标签的长度多变时也不会影响表单整体的布局，效率最高，但有个缺点：占用更多纵向空间（我觉得更适合移动端横向屏幕有限的情况下）。
例如：Material Design中的浮动标签就是很优秀的顶对齐输入框设计。
左对齐
左对齐的标签也是最常见的对齐方式，相比顶对齐：他的标签可读性变强了，也减少纵向空间占用。但是无法避免标签和输入框联系不紧密的这个劣势。在标签和输入框之间的可视距离远。
实操层：在长短标签的组合表单中，会使输入框离短的标签更远，这时就得想如何缩短标签的字数，如何精简出一个便于用户理解的标签。如果不去设计标签，那么效率就会变的缓慢。但是完成率缓慢，并不见得是一件坏事，尤其是表单需要重要的数据，如果需要用户提供敏感信息时，可以暗示用户放慢一点节奏，并确保他们正确的输入。
右对齐
右对齐字符是第二常见的对齐方式，相比顶对齐和左对齐涵盖了他们部分优点：和输入框联系紧密，也减少纵向空间的占用。
标签和输入框显得更加紧密了，将相关联信息放置接近的这一原则也不是新的理论，实际上它接近格式塔心里学中的接近性法则。
对于较短的表单，右对齐的字符也可以完成的很快。但是标签的可读性会减弱，这种对齐方式在左侧边缘的标签看起来不舒服，更难阅读，同时也需要去注意标签字数。
格式塔心里学中的接近性法则：
“接近性法则”指出当对象彼此接近时，他们往往被认为是一个整体。基本上相近是在一起的。如果我们使用清晰的结构和视觉层次，我们将不再被有限的用户认知所指责，所以他们才能快速辨认和给出反应。
——原作者：Norbi Gaal 翻译：Tiger, Run! 原文链接：https://uxdesign.cc/ux.. 来源：知乎
对齐方式总结
如果希望用户快速扫描表单，把标签放在输入框上面，这种布局更便于眼睛向下扫描页面。
如果你希望用户仔细得阅读，把标签放在输入框的左侧，这个布局扫描较慢，向下向右(Z的形状）的眼动。
如果表单中需要填写的内容比较少，也可以使用内联标签(登录注册)，但如果有输入信息较多，切记别用！虽说这是很受欢迎的输入框做法 ，他们也很美观，但当用户点击输入框，标签消失就无法对应了，用户因此会不知需要去填什么(可以尝试把暗提示[placeholder]改成和标签一样内容)。
但这么做会产生另一个问题，当用户看到一个输入框内已经填写了内容，而填写完内容，标签就消失了，需要回忆再复查表单信息，此时就显得很困难了。
选填与必填
在表单中尽量避免选填字段，但是如果选填字段是真实有需求的，但不一定需要收集时，把必填和选填做出区分，不能为空的必填字段规范使用星号(*)指出。
对于表单中必填vs选填数量上我是这样看的：
1.必填＞选填时，在选填项上指出(选填)；
2.必填＜选填时，在必填项上指出(*)；
3.必填=选填时，在选填项上指出(选填)或在必填项上指出(*)；
4.全必填时，无需指出(*)即可，全部(*)会增加表单的信息量；
5.全选填时，先考虑这个表单是否有必要去做，有必要就在更高一级上指出(选填)
还要个原则：优先级上必填项＞选填项
信息分组
根据用户的认知将相关进行分组，分组后的相关信息还能帮助用户弄懂哪些是必填和选填。
一列和多列
表单不建议有多列，如果水平放置输入框，用户必须Z形的眼动进行扫描，会减缓理解速度和弄乱清晰的完成路径。垂直向下放置的表单在页面完成路径是垂直向下的。
总结
结合场景，通过思考和研究可以探索出一个好的表单(输入框)。在设计上可以采用很多方案，同时也需要经过不断的测试去做出调整。
根据需求和使用平台(App/Pc/H5)可以在基础的表单(输入框)原理上做出很多变化(开始填写时已预填了信息，在移动端需要修改时逐字删除太麻烦了，可以考虑在输入框内加个x的icon，点击icon即清除输入框中的所有内容等等)，但是唯一不变的是让完成表单变得更愉快高效，也是初衷。
单选按钮
为什么叫单选按钮
单选按钮又叫[Radio button]，为什么是Radio button？按钮跟收音机有什么关系？
单选按钮这个行为受早期汽车上收音机的物理按钮所影响，最开始汽车上调节收音机电台是通过旋转按钮进行切换的，但是随着使用频率的增加，人们发现这个行为在驾驶时很危险，之后便进行了重新设计，把旋转按钮改变成了6个合金按钮组成。每个合金按钮都会预设对应一个电台。试想：是不是只要按下一个按钮，就可以切换到需要的电台呢。
单选按钮原则
单选按钮必须是互斥的，这意味着当选择一个选项时，之前已选中的选项会被反选。因为有互斥的存在，所以单选按钮都是两个或以上成组的出现，而且成组内只有一个单选按钮可以被选中。
纵向放置单选按钮
在布局上，尽量尝试垂直放置单选按钮，每一行放置一个单选按钮。
水平放置的单选按钮在整个表单中眼动扫描的效率会下降。如果一定要水平放置单选按钮，一定要注意按钮和选项间的关联性问题，不然会发生按钮和其两边的哪一边选项有关联的误解，那完成表单的效率就会大大降低。
确保足够的空间去水平放置单选按钮，并将未选择和已选择的状态做出区分，这样就可以正确看清选项。
按照优先级排序选项
按照逻辑的优先级顺序对单选按钮的选项进行排序，比如哪个选项更有可能被选中，或是最容易理解的选项到最难理解的选项。
不推荐使用字母序，从一定角度上存在问题。如果是个需要适应多种语言的Web，那就会很难本地化(例如：中文的拼音首字母是Z，英文Chinese的首字母C)。
容易理解的选项
设计单选按钮时需要注意，选项的描述也很重要。一个模糊的描述很容易产生误导，会让用户很难决策，虽说可以对应标签去理解，但选项描述的文案设计同样也是交互设计中很重要的一部分。
默认必须一个被选中
用户是可以切换和重做选择的，这个意味着可以控制这个单选按钮恢复到默认状态。那就意味着单选按钮总有一个是默认被选中的。
默认被选中的可以是：有商业目的或大多数用户选择的选项。如果强烈推荐一个选项，可以加上"推荐"的一个标签
当用户此时不需要在单选按钮上做出决策时，可以提供一个意义为"不选"的选项。提供一个明确的选项总比强迫用户做出一个不准确的决策会要好的多。
单选按钮需要更容易点击
单选按钮的按钮很小，根据费茨定律他将会很难被点击。需要增加点击热区的大小，让用户不仅仅只能点击按钮才可以选择，点击选项(词)也可以触发选择。这样点击热区的大小就显得极为重要了。
使用指点设备到达一个目标的时间，与当前设备位置和目标位置的距离（D）和目标大小（S）有关。
——Wikipedia(费茨法则)
必要的视觉反馈
单选按钮这组件看起来是可点击的，使用必要的动效可在选择后有清晰的视觉反馈。一个适当的动效会给用户带去微妙的用户体验。
有时复选框也是不错的解决方案
复选表达的意思是用来开启(关闭)或选择(反选)一个选项，而单选按钮可以在不同的选项之间切换。在两个或以上选项且单选的情况下，需采用单选按钮。只有一个简单的问题，就可以选择复选框。
第一种 多个选项且单选的情况下：利用单选按钮的互斥性，让选择变得清晰。
单选按钮默认选中的选项会给用户带去"是单选"的认知。而默认选项同时可以帮助用户做出最适合的决定，还能帮助他们更有信心地使用。
第二种 只有一个简单的问题：比方一个说简单的问题，需要回答"是"或“否”时，使用复选框是不错的选择。
是下拉列表还是单选按钮？
根据选项的数量去判断使用单选按钮还是下拉列表。当2≤选项个数(单选)≤7时，可以使用单选按钮。因为单选按钮比起下拉列表更能减少用户的认知负担。通过扫描就可以知道有多少选项，而且选项都是在页面上可见的，可以让用户对每个选项进行对比。
实操案列
正如我们一直理解的单选按钮是圆形的，复选框是方形的，我们已经对这些养成了习惯。
在很多地方我们会看到圆形的复选框，图标形或TAG形等等的单选按钮(比如iOS设置)。即使在外观上做最大的改变，但是唯一不变的行为——互斥性和默认选中一个，这便构成了单选按钮的原则。
但我们会在一些地方看到和上文冲突的一个点：单选按钮默认必须一个被选中。
为什么这么做？
其实也会留下很多的思考：假设根据默认选中“男”(比方通过定量数据分析发现用户是90%的男性)，若女性用户如果没有注意就直接跳过了性别的选择，但在完成表单提交信息时也不会触发校验(必填信息且已填)，那收集的信息就会不正确。
猜想
猜想：是否因为收集了较多的不正确信息，所以对单选按钮进行了重新设计？
默认不选中任何一项，需要用户主动去作选择，在不选的情况也会在提交时触发校验，告知未对性别进行选择。但选择性别后，单选按钮还是互斥的，虽说是违背了单选按钮的原则，但是很巧妙的解决了问题，那这个重新设计就是有意义的，是解决问题的。
总结
一个小小的组件(单选按钮[Radio button])的背后也是有很多可以挖掘的点的，在表单组件设计中只需要注意那么一点，那整体的体验也会提升不止一点。还是那句话：表单只是个收集用户信息的方式，用户需要的是高效愉快的完成填写。
复选框
复选框组成
复选框[Check Box]由一个方形的选择框和选项组成，复选框在选中状态下有标记。
复选框原则
复选框用在有多个选项，用户可以任意选择(或不选)多个(或一个)选项。包含复选框的选择组，每个选项都是彼此独立存在的。和单选按钮原则相反，选择一项后不会反选其他选项。
纵向放置复选框
这条规则对于单选按钮和复选框都适用，在布局上尽量尝试垂直放置复选框，每一行放置一个复选框。
和单选按钮一样水平放置会遇到相同的问题：水平放置的复选框在整个表单中眼动扫描的效率会下降。如果一定要水平放置复选框，一定要注意选择框和选项间的关联性问题，不然会发生选择框和其两边的哪一边选项有关联的误解，那完成表单的效率就会大大降低。
容易理解的选项
设计复选框时也需要注意，选项的描述也很重要，这样用户就能在选择前有选择后的预期。尽量不要使用如“不要给我发票”这样的否定语句。若这样设计的话选择难度就上升了，结果就是用户不得不再去修改选择状态来理解两个选项后，再去满足自己的目的。
复选框需要更容易点击
和单选按钮一样复选框也需要注意：根据费茨定律，将会很难被点击。需要增加点击热区的大小，让用户不仅仅只能点击选择框才可以选择，点击选项(词)也可以触发选择。这样点击热区的大小就显得极为重要了。
使用指点设备到达一个目标的时间，与当前设备位置和目标位置的距离（D）和目标大小（S）有关。
——Wikipedia(费茨法则)
一个选项情况下，还能用开关
类似于实际生活中台灯的开关。开关由一个能打开/关闭能做切换操作且互斥的两个选项组成。当选择其中一个选项时就会立即执行。
开关组成
单选按钮可以被看作是单个的，易懂版的复选框。复选框和开关[Switches]不同之处在于复选框可以说明选择状态，而开关就可以说明操作状态。
如上图开关就可以很明确的传达WiFi已处于打开状态，若使用复选框则导致用户得去思考WiFi当前已经打开了？还是要取消选中后才打开？
开关的状态
使用开关做设计时，最需要注意的一点是开关的状态。
如上图“ON”表达的是当前状态？还是触发操作后是“ON”的状态？这里的“ON”究竟指的是状态ON(形容词)？还是你需要触发的操作ON(动词)？
不要让用户产生疑问，不要将描述文字放在开关内或高亮“打开状态”，那这样就可以传达正确的信息给用户了。
容易理解的语句
因为开关的特性，就能很清楚的知道状态(打开/关闭)，所以标签文案就显得很重要了，只需要说明开关控制什么内容就行。尽量不要使用否定句！
假设上图错误状态：当开关处于关闭状态，是不是会觉得已经就是“不允许所有人查看我的照片”呢，事实上还是可以看到你的照片。因为标签文案是否定句，再加上按钮关闭状态，那"双重否定"就表示肯定了！所以上右图才最清楚表达"不允许所有人查看我的照片"。
如何使用复选框和开关
复选框更多使用在表单中，仅仅代表当前的选择状态。当只有点击“提交”后才可能知道选择(未选择)的不同。
开关按钮更多使用在设置中，在用户切换后就立刻显示出不同了，而不是非得要等用户点击“提交”后才看到变化。正如我们在现实生活中对于开关的所预期一样(例如我们摁下打开台灯开关，台灯就马上亮了)。
合理动效加持
如果可以在复选框和开关切换时加入一些动效，带来一种清晰的视觉反馈。愉悦用户也提升用户体验，而不单单只是两张(一张selected和一张unselected)图片做切换。
总结
写到这会发现不管单选按钮、复选框、开关他们需要注意的地方基本差不多，因为的确是这样。每一个组件的原则不尽相同，如果能够妥善利用他们的原则，那目的是相同的：表单只是个收集用户信息的方式，用户需要的是高效愉快的完成填写。
下拉列表
下拉列表组成
下拉列表由标签[Label]、下拉的列表和选项组成，下拉列表常见的选择为单选。
下拉列表步骤
呼出下拉列表的步骤：点击下拉列表控件→展开列表→滚动扫描列表选择选项关闭→关闭下拉列表。
下拉列表提示也很重要
在输入框中有个元素叫暗提示[placeholder]，作用是在用户填写信息时提供帮助，这条原则也同样适用于下拉列表。这个提示需要简短准确且告诉用户需要选什么，且在展开菜单之后依旧能够看得到选的是什么。
例如上图：“出发日期”就比“请选择”要好的多。
合理排列下拉选项
可以根据以往用户的选择数据进行分析，尝试将选择较多的选项放置在优先级靠前的位置。
选项较多时可以尝试只列出几个用常选的，好处在于90%的用户会立即选择满足自己目的的选项，还有10%的人可以选择“其他”(可以尝试加入一个下拉选择或输入框再满足目的)。虽然这样做会忽略10%的用户，但这样优先级排序能够提高90%用户体验。
90%以上的用户最常选的选项，就可以作为默认选项了。
下拉列表选项数量
避免在列表中放置太多的选项，当下拉列表中的选项超过15个时，他们将变得很难扫描。在Web端用户需要不断的滚动鼠标才可以找到满足自己目的的选项。再说在移动端有限的屏幕空间内滚动，体验可以说是非常不好了。
假设我们现在有个下拉列表，是需要收集用户的国家信息。一眼就能看出这个下拉列表是按照拼音首字母进行排序的，那“阿尔巴尼亚(A)”是排在首位的。当我要选择“中国(Z)”时候，就会很费力了。
当我要选择“中国”时？那我很清楚我需要选择的是什么，那就可以考虑把下拉选择改变成自动填充选择的列表？那这样只需要通过键盘输入一个“中”，就过滤出包含“中”(或者zhong)的候选选项了。通过简单的输入配合去提高选择的效率。
选项太多需要避免使用下拉列表，选项太少也避免使用下拉列表。
之前在单选按钮那部分说当2≤选项个数(单选)≤7时，当下拉列表中选项少于7个时，可以考虑使用单选按钮了。
使用单选按钮，用户只需通过扫描就可以了解这问题有几个选项和每个选项是什么，从而可以去除点击触发下拉框的动作。
同样如果是简单的问题，需要回答(是/否)或(打开/关闭)时，就避免使用下拉列表了，使用复选框和开关。
下拉列表还能做的更多
通过程序的帮助去减少选择次数。
例如：如果在充值手机号必须需要用户选择运营商，当用户输入手机号后，那下拉列表就可以帮助用户选择运营商。如果在支付绑卡时需要用户选择银行，当用户输入了银行卡号后，下拉列表就可以帮助用户选择发卡银行和卡片类型了。对于不同的下拉选择会有着成千上万种的设计方法。
在移动端，我们也可以通过“调用位置”这个系统硬件功能来预填选项给到用户。
简单的数字可以输入
下拉列表中选项是简单数字的话，下拉列表相比输入费力度更高。可以考虑配合数字键盘输入，这样比下拉选择更简单。根据场景的不同有着不同的解决方法，适合精确数值小范围调整可以考虑使用步进器；那不精确数值大范围调整可以考虑使用滑块；选日期可以使用日期选择器。
选日期没那么麻烦
选择日期肯定会也经常遇见，如果使用多个(年/月/日)下拉列表给用户带去的是非常不好的体验。那我们可以尝试去使用日期选择器(date picker)。
步进器组成
步进器[Stepper]由增加按钮、减少按钮和按钮控制的数值组成。每次点击增加按钮(或减少按钮)数字去增加(或减少)固定的数量。比方用户更喜欢在电商App里用步进器选择商品数量，此时步进器比起下拉列表更直观，使用起来也就更轻松了。
步进器原则
需要注意最大限制和最小限制，在最大或最小限制时，加入禁用增加(减少)按钮。如果能通过数据分析(90%用户经常选择的)预填一个默认值是提升效率的办法。
试想：步进器的默认值离用户预期的数值越远，点击的次数也就越多，那完成选择的效率也就越低。当默认值无法满足(10%用户经常选择的)，还可以把数值显示改成输入框，再配合上数字键盘输入去做精确的修改。
滑块原则
常见的滑块[Sliders]由可以拖动的按钮、轴、最大数值、最小数值组成。和单选按钮一样，滑块这个行为受现实生活的行为所影响。
场景：我在听歌声音有点轻，我想让声音响点。我使用滑块配和听觉在0%-100%这个区间内调整音量，而不是我要75%的音量这个精确值，这个范围内(近似值)就行，那此时滑块比起下拉列表使用起来更简单了。
滑块的细节
根据不同的设计场景，精确值可能是很重要的，那滑块也可以满足。加入一个数值显示，数值随着每次滑动改变。同时数字也当可以点击变成输入框，再配合上数字键盘输入去修改滑块位置。
在移动端，建议把滑块的最大数值、最小数值的位置放置在上方。那在使用时永远可以保持可见。如果在下方就容易被手指遮盖。
拖动时，使用动效做加持，给与用户交互的反馈。
总结
选择比输入的效率高，但也不是说什么时候都可以使用下拉列表。根据不同的场景利用他们(下拉列表/步进器/滑块)的原则做出变形，选择也可以变很不一样。例如：可以在下拉列表中把相关的选项分组展示，也可以让下拉列表变形为多选控件等。方便好用的选择和表单目的一样：表单只是个收集用户信息的方式，用户需要的是高效愉快的完成填写。
按钮
让按钮看起来像按钮
如何让用户一眼就看出这个形状的组件是按钮就显得很重要了。最简单的做法就是使用形状、标签、颜色等元素让这个形状更像按钮。
虽说可以更使用更与众不同的其他形状(圆形、菱形、甚至自定义任何形状)但要切记，与众不同的的形状会有风险，需要确保用户一看就可以看出这个形状是按钮。比如说Material Design中的浮动操作按钮(FAB：Floating Action Button)
热区的大小
需要考虑到按钮在页面上对比其他组件的大小，需要确保所设计的按钮足够大，便于用户点击。
当需要设计按钮供用户点击时，可以参考MIT Touch Lab的研究去设计合适的按钮大小。该研究发现，指腹的平均尺寸在10-14mm之间，指尖为8-10mm，因此物理尺寸约10mm×10mm是最小触摸的最佳尺寸。
既然注意了按钮点击热区的大小，同时也要注意如果有多个按钮或其他可点击组件，他们之间的间距也有助于区分、明确点击的对象。
用标签说明按钮用途
避免设计出让用户不知道他们做什么的按钮，按钮上的文案需要清晰准确的表达按钮的操作行为。
例如“提交”就会比“确认”来的更合适
按钮应该表明当前需要做的任务是什么，让用户知道他们点击按钮后会发生什么。使用动词作为按钮标签是很好的做法。例如：用户正在登录的流程中，一个说写着“登录”的按钮，就能传达给用户按下按钮后会怎么样，它清楚地表达了当前的任务。这样的按钮的标签起着承上启下的作用随时都在帮助用户，给予用户进行操作的信心。
突出最重要的按钮
让重要任务相关的按钮被高亮出来，高亮的颜色或增大按钮的大小让按钮引导用户决策。
重要操作按钮(CTA按钮:Call To Action)用于引导用户进行你希望的操作。创建有效的CTA按钮，需要抓住用户的注意力并诱导他们点击。
使用高亮按钮颜色是很好的方法。一旦写完一封邮件，马上就会注意到这个蓝色按钮亮起。
在表单(Form)或对话框(Alert)中，按钮可以用另一种方法来突出重要的按钮。当用户需要在主要和次要按钮之间进行选择时，增大按钮的大小也是方法。
容易发现按钮
别让用户去寻找按钮。把按钮放在用户可以显眼的地方。
如果在设计一个原生环境的App(Native)，可以参照按照平台的Guideline去设计摆放合适的按钮位置和顺序，采用符合用户与期望一致的设计可以节省人们的时间。
按钮的视觉反馈
这个要求不是关于用户看到按钮时的视觉体验，而是用户与按钮组件交互的体验。通常，按钮不是单一状态的控件， 它具有多状态，并向用户提供视觉反馈以当前任务的状态。
Material Design用图示清楚地说明了如何传达不同的按钮状态
总结
按钮是一个普通的、日常生活的交互中经常会使用到的组件，按钮在表单中也承担至关重要的任务。
交互设计是什么？
我觉得是两个动作组成的一个词儿，有“交互”和“设计”。
首先什么是设计？
我认为设计的目的是解决问题，因为产生了问题同时再去发现问题，所以有了设计这个行为，又有了很多人在做解决问题的事儿，就有了设计师这个职业。
交互是什么？
交互是无处不在的，哪怕是电梯的楼层按钮，一个微波炉，一个导航等等。就看一下咱们的数字产品。我觉得交互是结合产品本身，去为目标用户的目的设计出高效的功能。
那谁是目标用户？他们的目的是什么？高效的功能是什么？
“目标用户是什么”、“目的是什么”这两个能通过定量、定性的用研方法，结合用户模型等一系列方法可以得出。
“高效的功能是什么”，我觉得所有的功能可以理解成一个工具(结合生活讲，有可能是一本书，或者一个锤子或是其他等等)，这个工具目的是可用、合理，且能让用户更高效的完成自己的目的，在完成目的的同时可以收获惊喜和愉快。
惊喜和愉快是什么？
我觉得有个很难量化也很难标准化的一个术语，叫用户体验。我想这就是在交互设计这环中能有所支撑的一部分“用户体验”了吧
我是一名交互设计师，我觉得无论什么设计始终都值得敬畏，最近闲着又刷了一遍《交互设计精髓》，前言中有句话说的超棒：
交互设计本身也是一项人文事业，与产品和服务互动的是人，交互设计的首要目标是满足人的需求和欲望。理解这些目标和需求的最佳方式是把他们当成故事——逻辑和情感随时间而演变，要回应用户的这些的这些故事，数字产品必须表达自身的行为故事，不仅要在逻辑、数据条目和展示层次做出恰当的回应，还要在更加人性化的层面有所响应。
——Alan Cooper
写在最后
在写之前几篇的时候梳理了一下自己的思路，也发现在过去有些没做好的地方。就像一开始说的，这文章上会有很多点没有完善，不断去修订这东西，这句话写给自己。最近还对一句话感触颇深，分享给大家。
Stay Hungry, Stay Foolish
——Steve Jobs
感谢@面包给到的建议，也要感谢的赞赏过我之前文章的朋友@74好几K、@Jason、@nomeet、@Shumi、@蓝胖子_Simon、@jeremywf、@简叔，给你们鞠躬了~
到这也就看完了我叨逼叨，也不知说恭喜你还是佩服你…总之先双手合十的感谢你！
参考文献
书籍：
《交互设计精髓4》、《Web表单设计：点石成金的艺术》、《Web界面设计》
Guideline：
iOS HIG、Material Design、Ant Design
Tips:
忘了从哪收藏的一个集合各厂Guideline的网站，各位如果有兴趣可以看看。链接
参考文章：
输入框：Designing More Efficient Forms
复选框：UX Design: Checkbox and Toggle in Forms
下拉列表：UX Design: Drop-Downs in Forms、Dropdown alternatives for better (mobile) forms、Mobile UX Design: Sliders
按钮：How To Design Better Buttons、Button UX Design: Best Practices, Types and States
