虽然单个按钮的设计相对简单,但把按钮放在整个界面中,我们不仅仅要考虑按钮的外观设计,还要考虑按钮于整个界面的关联,对于用户行为的引导等额外的设计因素。
填充按钮
图标按钮
悬浮按钮
填充按钮使用场景
如果想要提示用户完成某个特定操作,优先使用填充型按钮。例如APP上的登录/注册按钮、购买按钮等都是使用填充按钮,引起更多关注
填充按钮 设计要点
传递按钮状态。能够让用户通过查看按钮来了解按钮的当前状态。例如,按钮的禁用状态应该与可点击状态具有不同的视觉样式
保持一致性。关于按钮的外观,有方形和圆角两种流行的形状。圆角按钮在用户看起来更舒服,更容易被接受,因为我们自然倾向于避免具有锋利边缘的物体。
填充按钮设计要点
提供视觉反馈。提供有关交互操作的视觉反馈至关重要。微妙的悬停效果(PC端)和点击动效,能够清楚地作为对当地操作的反馈
添加阴影创建立体效果。阴影让按钮有了空间感,看起来更立体。阴影还可以增强视觉反馈,通过改变阴影的深度来摸底手指点击按钮的感觉
图标按钮使用设计场景
图标类按钮不会占用太多的屏幕空间,因此适合用在菜单或者系统导航栏等功能比较多的设计中。例如Word文档密密麻麻的菜单图标当需要在一个界面中呈现大量的功能或操作时,如果不想让它们堆叠在一起,就可以考虑
图标按钮设计要点
确保用户明确知道图标的含义。图标的含义应该对用户非常清楚,如果不理解图标的含义,用户可能会倾向于避免与这些图标进行交互。
悬浮按钮使用场景
悬浮按钮简称FAB,用于在界面中执行主要或最常见的操作。一般是一个图标按钮,按钮底部有细微的阴影,通常位于UI界面的右下角。
悬浮按钮设计要点
最好将FAB用于一项操作,一旦用户点击,就直接触发最重要的操作。
悬浮按钮不一定是圆形。可以使用更加具有视觉趣味的形式,例如圆角矩形、方形等。