设计师必修课：图标按钮设计的12条实用铁律：设计师必修课：图标按钮设

原标题：设计师必修课：图标按钮设计的12条实用铁律

文章图片
即使在今天，这也是吸引用户的地方——通过简单触摸就能让事情发生的即时满足感。尽管有大量新的家用电器和设备都变成了触摸屏，但物理按钮并不会消失，因为它们让人形成的行为习惯，会影响按钮设计的直观性和易用性，是一种永远存在的实物参考。
01按钮vs链接
一流设计网(yiliusheji.com)提示按钮向用户传递了操作的可执行性，在整个UI里很常见，例如：对话框、表单和工具栏等。按钮和链接之间的区别，请注意：
-链接是导航到另一个地方时应用的，例如：“查看全部”页面、“RogerWright”个人简介等；
-按钮是在执行动作时应用的，例如：“提交”、“合并”、“创建”、“上传”等。

文章图片
02让用户直观感受按钮状态
为按钮创建正确的交互和样式，是按钮设计过程中重要的组成部分之一。在不改变组件或产生视觉干扰的前提下，每个按钮的状态都必须有明确定义，以使其与周围布局区别开来。

文章图片
正常—表示该组件已启用交互；
突出提示—用户使用键盘，进入编辑状态；
鼠标悬停—当用户将鼠标置于交互式元素上方时；
点击—按下状态表示用户已轻点按钮；
进度/加载—用户操作行为没有立即执行，表示正在完成操作中；
禁用—表示该组件当前处于非交互状态，但将来可以启用。
03按钮的颜色、形状和大小
常见的是圆角矩形按钮，这些按钮即使在输入框旁，用户也能快速识别。按钮样式的选择取决于用途、平台和应用准则。以下是一些最受欢迎的样式变化：

文章图片
04建立按钮样式等级
样式主要用于区分重要和不重要的动作。创建动作层次结构，该层次结构将指导用户进行多种选择。通常，可以有一个突出的按钮（该样式通常称为“首要”按钮），剩下的按钮则依据重要程度建立不同的样式等级。

文章图片
05《Don’tMakeMeThink》
这是可用性工程师SteveKrug撰写的书籍标题，其中讲到了一点：对用户而言，界面清晰明了非常重要，不要给用户制造难题。人们周围其实已经被电子产品包围了，多年使用各种设备、软件的经验，一定程度上固化了人们对按钮外观和功能的认知。如果与常见的“标准”存在较大偏差，也会给用户造成困惑。

文章图片
避免对交互式和非交互式元素使用相同的颜色，否则用户不知道该点击哪里。
06一致性的重要性
“一致性是最强大的可用性原则之一：当事物始终表现相同时，用户不必担心会发生什么。 ”—雅各布·尼尔森（JakobNielsen）
一致性提升了速度性和准确性，有助于避免错误。创建可预测性，帮助用户控制和实现产品中的目标。当创建主要、次要和第三种样式时，试着找找一致元素，如颜色、形状等。按钮设计不仅要在设计系统内部保持一致，在整体平台也要进行统一。

文章图片
07使按钮足够大以实现可靠交互
按下按钮应该是一个简单的操作任务，如果用户无法正常进行，或在过程中错误地按到了相邻元素，不但给用户造成了负面体验又浪费了时间。
对于大多数平台，请考虑被触摸的目标至少为48x48dp 。无论屏幕大小，这种尺寸的触摸目标的物理尺寸应为9mm ，触摸屏元件的目标尺寸至少是7-10mm 。

文章图片
对于图标按钮来说，请确保触摸目标超出元素的可视范围。这不仅适用于移动设备、平板电脑，同时也适用于网络上的指示设备，比如鼠标。
08无障碍设计
所有组件都应推行无障碍设计。目标区域的大小是影响可访问性的因素之一，其他的则是字体大小、颜色和对比度，也有很多工具能检查组件的设计性能。