UI设计中,按钮是提升用户体验的一种方式,我们可以让按钮帮助用户做出最优选择。那么如何设计按钮才能够吸引用户关注呢?

1
层级


Material Design按照视觉强调程度将按钮分为了:

文字按钮(低强调):用于次要操作。

轮廓按钮(中强调):添加描边,让轮廓按钮比文本按钮更突出。

填充按钮(高强调):按钮填充颜色和阴影是视觉重点。

切换按钮(按钮组):使用布局将同类按钮分组,使用频率较低。

我们可以使用上面的按钮类型,选择高视觉级与低视觉级的按钮搭配,引导用户做出更重要的操作。我们可以在很多地方看到这个方法。

下面案例可以在视觉上帮助用户做出选择。


如果界面的敏感度较高时协议、隐私条款等,就需要降低按钮的视觉对比,让用户谨慎操作。


2
状态


按钮的状态,一般有:

Enabled:激活状态。

Hover:悬浮状态。

Focused:聚焦状态(如长按语音输入)。

Pressed:点击状态。

Disable:禁用状态。

Loading:加载状态。

正确定义按钮的状态交互及样式,可以合理设计按钮,按钮状态可以有效地传达给用户当前操作状态。

状态样式定义:高度与颜色。

高度

界面中往往使用阴影来营造高度视觉差,例如常态时的阴影能够营造悬浮、可点击的效果。禁用状态取消阴影,可以营造按钮触底,无法点击的效果。

颜色

颜色的改变可以在按钮上方覆盖一层含透明度的颜色遮罩,这样可以看见底色,针对每种不同的状态,需要调整颜色遮罩的透明度值。

要想把按钮设计到最好,就需要帮用户做出最优选择,希望上面的知识能够帮到你。