学会这4种常见的按钮样式，让你的设计看起来更规范！
关注▲Clip设计夹后台回复“进群”加入设计成长群
设计夹的第119篇文章分享
填充按钮
填充按钮指由深色或渐变色填充的按钮。大多数场景下，通过文字和按钮间强烈的颜色对比，来最大程度吸引用户的注意力。
因此填充型按钮也是号召性按钮(CTA)的最佳选择。
🔎使用场景
如果想要提示用户完成某个特定操作，优先使用填充型按钮。例如APP上的登录/注册按钮、购买按钮等都是使用填充按钮，引起更多关注。
💡设计要点
传递按钮状态。能够让用户通过查看按钮来了解按钮的当前状态。例如，按钮的禁用状态应该与可点击状态具有不同的视觉样式。
保持一致性。关于按钮的外观，有方形和圆角两种流行的形状。圆角按钮在用户看来更舒服，更容易被接受，因为我们自然倾向于避免具有锋利边缘的物体。
视觉一致性是创造良好用户体验的关键。虽然圆角按钮比较常见，但按钮的样式还是要根据APP的样式进行合理选择。
例如一个产品所有的UI元素都是方形的，那么界面中的按钮也应该保持一致的形状。
提供视觉反馈。提供有关交互操作的视觉反馈至关重要。微妙的悬停效果(PC端)和点击动效，能够清楚地作为对当前操作的反馈。
添加阴影创建立体效果。阴影让按钮有了空间感，看起来更立体。阴影还可以增强视觉反馈，通过改变阴影的深度来模拟手指点击按钮的感觉。
与按钮的形状类似，阴影的使用也应该由整体的设计风格决定，并不能盲目使用，造成视觉风格不统一的情况。
描边按钮
描边按钮是指没有颜色填充的按钮，只有按钮的外轮廓可见。
🔎使用场景
描边按钮通常作为辅助操作按钮。主要操作按钮引导用户采取希望他们采取的行动，而次要辅助按钮提供了一个合理的选择。
对于不想分散用户注意力的UI界面，描边按钮也是一个不错的选择。由于描边按钮更轻量，具有较小的视觉权重，所以它比实心的填充按钮吸引的注意力较少，从而让UI界面看起来不那么拥挤。
描边按钮作为多功能的按钮，更适合在深色或浅色主题中灵活转变，在不同类型的背景下良好工作。
图标按钮
图标按钮指只有图标、没有文字的按钮，仅通过图标来表示。
🔎使用场景
图标类按钮不会占用太多的屏幕空间，因此适合用在菜单或者系统导航栏等功能比较多的设计中。
例如Word文档上密密麻麻的菜单图标，如果使用文字按钮来表现，看起来会杂乱不堪。
当需要在一个界面中呈现大量的功能或操作时，如果不想让它们堆叠在一起，就可以考虑使用图标按钮来设计。
💡设计要点
确保用户明确知道图标的含义。图标的含义应该对用户非常清楚，如果不理解图标的含义，用户可能会倾向于避免与这些图标进行交互。
显示图标提示。如果设计web产品，可以考虑为图标按钮添加工具提示，当鼠标悬浮到图标上时，向用户展示该图标按钮的功能。
悬浮按钮(FAB)
悬浮按钮(Floating Action Button)，简称FAB，用于在界面中执行主要或最常见的操作。FAB是一个图标按钮，按钮底部有细微的阴影，通常位于UI界面的右下角。
🔎使用场景
悬浮按钮是一个相对紧凑的按钮，通常用作移动APP中最主要或频繁使用的操作。例如Twitter的分享动态是很重要的功能，通过悬浮按钮帮助用户快速分享动态。
在桌面设计中也可以使用FAB，但大多数情况下没有必要，因为桌面端有足够屏幕空间，不需要像移动端那样尽可能节省空间。
💡设计要点
确保所有用户都能了解图标的含义。由于FAB通常代表最重要的操作，因此使用清晰的图标至关重要。如果用户不理解FAB图标的含义，他们不会与图标交互，这样会对产品产生较大的影响。
FAB用于一项操作。在有些产品中，我们可能见到过点击悬浮按钮，弹出来多项操作或功能的设计。但大多数情况下，最好避免这种设计，因为这样会使界面UI操作起来更复杂，并影响用户的判断。
最好将FAB用于一项操作，一旦用户点击，就直接触发最重要的操作。
最后
以上是四种常见的按钮样式分析及设计要点总结，希望通过这些内容能帮你巩固对按钮设计基础知识的认识。
慢慢来比较快，希望对你有帮助！
设计夹整理了一款时尚、无衬线的免费英文字体安装包，可以作为标题字，用在海报、banner、封面设计中，视觉效果一级棒。
领取方式：
添加微信, 邀你进设计成长群🌟
🔥文章合集