UI 中的按钮怎么设计?四种 UI 设计按钮类型

发布时间:2022-10-27 20:20:47

UI 中的按钮怎么设计

UI 中的按钮是一种常见的组件,它起到了非常重要的作用。如何设计按钮,成为了 UI 设计师必须要解决的问题。按钮的设计主要包括四种类型:填充按钮、描边按钮、图标按钮和悬浮按钮。填充按钮是一种常见的按钮类型,它的主要特点是通过填充颜色来突出按钮的边界。描边按钮是通过描边的方式来给按钮边界加强。图标按钮是通过图标的形式来代替文字,让按钮更加简洁。除了上述四种类型的按钮,在设计按钮时还应该注意一些原则。首先,按钮的形状应该简单明了,避免使用太复杂的形状。其次,按钮的文字应该清晰易读,避免使用过长或过短的文字。此外,按钮的颜色也需要注意,一般来说应该使用明亮的颜色,以便让访问者能够快速找到按钮。

一些 UI 中的按钮设计法则。

UI 中的按钮怎么设计?

UI 中的按钮怎么设计?我想我们先掌握主要的四种 UI 设计按钮的类型,是最快捷的掌握按钮设计的关键。

1.填充按钮

填充按钮通常具有吸引用户注意力的目的,深色或渐变色填充的按钮,且文字与颜色对比强烈。通常用于做号召性按钮(CTA),也即通过设计手法,视觉上突出按钮,让用户自然而然的产生点击按钮的行为。

填充按钮

2.描边按钮

描边按钮只有外轮廓可见,是一种辅助。

3.图标按钮

图标按钮指只有图标、没有文字的按钮,仅通过图标来表示。

图源即时设计编辑页面

4.悬浮按钮(FAB)

悬浮按钮(Floating Action Button),简称 FAB,用于在界面中执行主要或最常见的操作。FAB 是一个图标按钮,按钮底部有细微的阴影,通常位于 UI 界面的右下角。

大厂如何设计 UI 中的按钮?

借鉴其他优秀的按钮设计也是设计按钮的重要方法。在设计按钮时,可以参考一些大厂的设计规范,借鉴它们的按钮设计。通过这样的学习,不仅可以提升自己的设计水平,还能够帮助自己找到更好的设计方法、。以下是了 5 种 UI 设计规范中的按钮设计,有饿了么、QQ、Facebook 等。

通用简约线框组件

来源:Nicolaj Reck

简洁的基础线框组件,通用性强,包含基础按钮、占位图、顶部、输入框、开关、滑块等组件,可适用于 Web 端多种行业的设计中。

Element 饿了么设计规范库

来源:Element

饿了么Element官方通用「按钮」组件,适用于Web端,共同的特点是设计风格干净、简洁,具有自己的设计规范,按钮样式类型非常丰富全面,相关的交互态齐全,修改复用成本低,应用广泛,可以直接取用。除了打造自己的规范外,还可以了解、学习按钮的各种类型。

Taro UI 设计规范库

来源:凹凸实验室

Taro UI 是一款基于 Taro 框架开发的多端 UI 组件库,Taro 是由京东·凹凸实验室倾力打造的多端开发解决方案。当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

QQ 小程序设计规范库

来源:腾讯Q'Q

QQ 小程序还遵循易用性、一致性、尊重用户三大设计原则。

Facebook iOS11(组件)

来源:Facebook

Facebook iOS 11 设计规范-组件库包含了 iOS 11 最常用和最重要的组件内容,你可以使用这些文件来模拟应用程序或进行概念创作,也可以直接用于 iOS 原生协调的自定义界面中,希望它们能帮助你提升工作效率和设计水平。

最后

总之,按钮是 UI 设计中非常重要的组件,设计按钮需要考虑按钮的类型、设计原则以及借鉴其他优秀设计。通过不断的学习和实践,我们可以设计出优秀的按钮,从而提升整个界面的用户体验。