细节真的很关键,这12个按钮设计的误区,很多人都容易犯

细节真的很关键,这12个按钮设计的误区,很多人都容易犯。大家都知道物理按钮给我们留下了很多习惯,而物理按钮也是现代UI组件的祖先,它们一直被广泛使用。很多用户可能不太懂内部原理,只要轻轻一按,设备就能运转起来。正如Rachel Plotnick在《Power Button》一书中所说,按钮文化塑造了我们下达数字指令的方式。柯达公司那句“你只需按下按钮,剩下的交给我们”真是太贴切了。触摸屏越来越普遍了,但物理按钮还是没有消失。它所塑造的交互习惯深刻影响着数字界面按钮的设计,成为衡量直观性和易用性的永恒参照。 Jacob Krug曾经说过:“别让我思考。”用户已经被各种电子产品教育得很明白了,对按钮的外观和功能有了固定认知。如果设计和标准偏差太大,可能会让用户感到困惑。你可能会问为什么要分清按钮和链接?因为它们有不同的作用:按钮向用户传达“可操作”的信号,而链接则是用于导航到另一个地方。按钮广泛出现在对话框、表单、工具栏等场景中,用来执行具体动作。 每个按钮都需要给用户清晰明确的视觉反馈,让他们知道这个按钮是可以操作的。正常状态下就是可交互的默认状态,键盘焦点状态是通过Tab键进入可编辑状态时的提示,悬停状态是鼠标指针置于元素上方时给用户的提示。当然还有按下状态和加载中状态和禁用状态。 圆角矩形按钮因为辨识度高而被广泛使用。不过要根据用途、平台和设计规范选择合适的样式。填充按钮视觉权重最高,描边按钮视觉权重次之,文本按钮视觉权重最弱。用这些样式差异来构建清晰的动作层级,在多个选项中引导用户做出正确选择。 确保你的界面和系统遵循Windows或者macOS这样的操作系统规范非常重要。一致性能够提升操作效率和准确性。雅各布·尼尔森就曾经说过:“一致性是最强大的可用性原则之一。” 确保你的颜色和形状在整个项目内部保持一致就可以了。另外还需要注意点击区域大小要足够大才能方便用户轻松按下按钮。移动设备和平板的触摸屏目标尺寸至少要在7-10毫米之间。 如果屏幕很小或很大都不要忘了保证其物理尺寸约为9毫米。这同样适用于鼠标操作的网页端。还需要注意图标的可点击热区要大于可视范围。“确定”和“取消”这两个操作顺序谁在前谁在后并没有绝对对错之分。Windows系统就是把确定放在前面,而macOS系统把确定放在后面促使用户评估选项后再做决定。 另外尽量避免使用禁用状态这种灰色按钮来提示用户信息填写不完整或者还有错误信息需要修改。最好的做法是始终启用按钮然后在空白字段下方给出明确提示或者高亮显示错误项就可以了。 Power Krug、Jakob Nielsen这些专家的话我们要记在心里:不要让用户思考!清晰明确的标签和视觉反馈是非常重要的,这也是提升用户体验的关键所在!