超全面的按钮设计指南
时间:2023-09-10 16:24:01 | 来源:网站运营
时间:2023-09-10 16:24:01 来源:网站运营
超全面的按钮设计指南:按钮在交互设计中是最常见的元素之一,它看起来似乎很容易。但是即便是这样一个简单的设计元素也有很多细节需要在设计中考虑到。
这篇文章便会列举出在为不同情景设计按钮是你需要考虑到的细节。
5种按钮类型从按钮的视觉样式上,按钮可以分为
- 凸起按钮 - 带有3D效果(比如,阴影,渐变或者高光)的矩形按钮
- 扁平按钮 - 和类型1相反,不带有任何3D效果的矩形按钮
- 描边按钮 - 只有描边效果没有填色的矩形按钮
- 文字按钮 - 仅仅只有文字的按钮
- 浮动按钮 - 由Google Material Design提出的浮在页面最上层的圆形按
5种按钮类型
5个交互状态不管在你的设计中你使用的是上面的哪种样式,按钮都始终要包括5个交互状态,以便给使用者提供视觉上及时的反馈。这样他们才能确认产品有按照他们的预期在工作。
按钮需要提供为这五种状态提供视觉反馈:
正常,
悬浮,
按下,
加载和
禁用。5个交互状态
不同场景中的按钮设计前面我们说到了按钮的5种类型和5个交互状态,你可能会问怎么才能设计出有效的按钮呢?回答这个问题之前,让我们一起来定义一下所谓的有效的按钮设计。
有效的按钮会:
- 提供视觉帮助让使用者意识到这是一个按钮
- 帮助使用者了解它的意图
- 为使用者设置合理的预期
对于不同的使用场景,有效也会有它独特的诠释
网页表单中如何设计首要按钮和次要按钮很多时候页面上会有不止一个按钮,有些按钮会帮助使用者完成他们想要完成的任务,这类的按钮我们称为首要按钮,比如说表单上面的提交按钮,购物网站中的结账按钮。次要按钮则是那些不能帮助使用者完成首要任务,但是可以给他们提供其他的操作选项或者撤回他们之前的操作。
设计这类按钮是,你要确保:
- 首要按钮和次要按钮之间有明显的视觉区别
- 首要按钮能在周围的元素中突出
弹窗上如何设计按钮模态弹窗打断了使用者的流程,并让他们在系统提出的选项中做出选择。设计社区已经有很多关于在模态弹窗上面如何放置确认(OK)和取消(Cancel)按钮的争论。各个平台也有自己的准则:
Windows把确认按钮放在取消按钮之前,而Apple和Google都与之相反。
所以在为弹窗设计按钮的时候你需要考虑到一下的细节:
- 设计APP时遵循平台的准则。设计网页应用时,应该研究哪个平台是产品目标群体更加倾向的。
- 视觉上明显区分出两种按钮
- 使用更加具体的按钮文字,而不是”确认“或是“好的”。
按钮无障碍设计对比度对比度是按钮上文字颜色亮度和背景颜色亮度的的比例。根据W3C的规范,对比度至少是4.5:1,以下的情况除外:
- 如果按钮文本大小为18pt或大于18pt, 或者文本加粗且大小大于或等于14,对比度至少是3:1.
- 对于不能进行交互的按钮,没有对比度的要求。
结论一个有效的按钮,能让使用者预测它的功能和重要性。一个有效的按钮始终提供及时的视觉反馈当你设计一个按钮时可以对照下面的清单:- 使用者是否能辨别出这是个按钮
- 按钮是否在不同的交互状态下包括不同的视觉效果
- 按钮的文本是否简洁清晰
- 首要按钮是否比其他的次要按钮更明显
- 按钮的位置是否遵循了平台的准则
- 对比度是否达到了W3C的要求