button按钮onclick触发不了_用一篇深度好文，详解按钮的设计

本文共 2092 字，预计阅读 10 分钟，记得点击上面的 蓝字 关注我哦～

为了设计更好的用户界面，我们常常需要回顾它的历史和起源。
按钮在界面设计中很重要。
在物理按钮时期，手指的轻微触碰可以使设备、汽车或系统处于运动状态，即使用户不了解其原理。在《Power Button》一书中，Rachel Plotnick回顾了整个按钮文化的起源，他认为按钮推动了数字技术的发展，让复杂的命令能以轻松、便捷的方式，在生活中普及。

你只需要按一下按钮，剩下的交给我们。
--柯达通过直观的Slogan来吸引用户

通过轻微触摸即可改变事物，让用户得到了强烈的即时满足感。尽管现在触控屏被广泛使用，但物理按钮并没有完全消失。由物理按钮所形成的行为习惯和认知，影响着按钮设计的直观性和易用性。

一：按钮与链接的差异

按钮传达给用户的是可执行性的操作，它们通常存在于表单、对话框、工具栏中。虽然在某些功能交互上很相似，但是了解两者之间的差异也很重要：

• 导航到另一个位置时使用链接，比如：「查看全部」页面
• 执行某个动作时使用按钮设计，比如：提交、确认、新增等

二：明确按钮的状态并反馈给用户
为按钮定义正确的交互和样式是设计中最重要的部分之一。每种状态要有明确的差异性，这样才能与其他状态区分开来，切记差异化的设计前提是遵守一致性原则，不要制造视觉噪点。

• 正常状态 - 表示按钮是可交互式的、
• 聚焦状态 - 通过高亮的形式，告知用户它已被键盘或其他方式选中
• 悬停状态 - 当用户将光标置于可交互式元素上方时，所展示样式
• 点击状态 - 表示用户已按下状态，且仍未结束按的动作
• 加载状态 - 表示该操作正在加载中
• 禁用状态 - 表示该按钮当前处于非交互状态

三：按钮有各种颜色、形状、大小
最常见的是圆角矩形按钮，通常被置于输入框旁边，易于识别行为引导性强，但是按钮的样式、大小、颜色等，取决于产品本身的调性、设计规范、使用场景等，下面是一组常见的样式：

四：样式可以传达行为的重要性
按钮的样式可以用来区分交互的重要性和优先级。通过样式的变化区分操作背后的优先级，营造界面的层级结构。

五：有时没有“默认态”
通常，使用频率较高的按钮，我们设置为【默认按钮】，属于强行为引导按钮。这样可以有效的帮助用户更快高效的完成任务。但是也有例外，比如所有的操作都存在潜在风险点时，需要使用次要按钮来表达。

六：不要让用户思考
“不要让我思考”是可用性专家Steve Krug撰写的一本书的名字，它涉及到许多内容，但核心思想是让设计显而易见，不要让用户思考。用户对于按钮的功能、外观、体验是有期望和基础认知的，与常规的按钮差异过大，会让用户感到困惑。

避免对交互式和非交互式元素使用相同的样式。否则用户很难判断哪里是可操作的。七：一致性提升了交互的准确性和效率

一致性原则是可用性原则之一：当事物始终表现相同时，用户不必担心会发生意外。
--雅各布.尼尔森
一致性提升了交互的准确性和效率，有助于避免错误的发生，在很大程度上让设计具备可预测性，能够清晰的了解自己能够做到什么。

八：保持可操作热区，确保交互的可靠性
按下按钮应该是一个简单的动作，如果用户无法快速地按下按钮或产生误操作，将会带来负面情绪和体验。对于大多数平台，使热区至少达到48 x 48 dp。无论屏幕大小，此尺寸的热区的物理尺寸约为9mm。触摸屏元件的建议目标尺寸至少为7–10mm。

对于图标按钮，请确保触摸区域超出了元素的可视范围。这不仅适用于移动设备或平板电脑，也适用于鼠标进行操作。九：无障碍设计
对于每个按钮设计都应该保持足够的可访问性，热区大小、字号小、颜色、对比度等是影响可访问性的一些元素，如今有大量工具可以帮助我们测试按钮的可访问性是否要求。

十：交互手势应符合用户行为习惯
手势交互如今已经是触摸交互的基础了，诸如滑动、双击、长按这样的交互方式已被用户广泛接受，并且高频地使用在各类app中。但是对于普通用户而言，可交互性依然不是很明显，因为手势是默认「隐性」的。建议对于手势交互提供支持，但是不作为唯一的交互方式，依然以「显性」的按钮交互作为基础。

十一：优秀的按钮具有提示性

按钮上的标签文本和它的视觉外观一样重要。使用错误的标签文本会让人感到困惑。

十二：「取消/确认」还是「确认/取消」？

「确认」和「取消」到底哪个在左，哪个在右？
其实都可以！
只要确保产品内的「确认」和「取消」的位置始终保持一致，并不会给用户造成很大困扰。

十三：谨慎使用禁用态

有时候我们会碰到这种情况，卡在一个页面好久，不能保存。想搞清楚到底表单哪里填错了导致无法保存。禁用状态下的按钮令人抓狂，虽然后续如果正确触发可以启用，但是此刻是让人糟心的。结合信息引导和错误说明，让按钮保持正常状态，让「可点击」的状态呈现出来，会让用户更舒适。

本文已获得作者正式授权(截图如下)