认识达内从这里开始

认真做教育专心促就业

UI设计中按钮设计都需要注意哪些设计细节

发布：运城达内教育官网
来源：互联网
时间：2020-12-29 08:45

细节决定成败，大家对这句话应该不陌生的吧，而今天我们就通过案例分析来了解一下，UI设计中按钮设计都需要注意哪些设计细节。

UI设计中按钮设计都需要注意哪些设计细节

1、颜色

颜色是容易感知到的对比方式，不同的颜色会给用户不一样的心理预期。B端产品的用色一般以理性、严肃的基调为主，其中蓝色为常见。如选用其他色彩可适当调低饱和度，以降低长时间使用造成的视觉疲劳感。

在设计时，还要将颜色分为主题色、强调色和辅助色，以适应不同按钮层级。主题色即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象。主题色要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤。主题色的应用场景包括操作状态、按钮色、可操作图标等;强调色多用于需要拉开主次关系的次按钮中，一般采用主题色的对比色彩或者邻近色;辅助色用于提示其他场景，比如成功、失败、警告、无效等。

2、形状

在设计按钮时，需要根据整个界面风格设计适合的形状，主要有直角、小圆角、全圆角、异形四种样式。

直角的含义：严谨、力量、。属于B端产品常用的类型，给人严谨、安全、的感觉。

小圆角的含义：稳定、中性。在B端产品中也经常出现。

全圆角的含义：活泼、年轻、安全。适用于儿童类、年轻类、娱乐类、购物类产品中，提升亲和力，拉近用户的距离。

异形按钮的含义：不稳定、活泼、另类。适用于需要用户做出选择的场景中。

3、状态

在部分界面设计中需要考虑按钮的状态设计，从而让用户获得清晰流畅的操作反馈。B端完整的系统按钮可以分为：正常状态(Normal)、聚焦状态(Focus)、悬停状态(Hover)、点击状态(Active)、加载状态(Loading)、禁用状态(Disabled)。

一般来说，正常状态(包括加载状态)展示的是产品的主色;聚焦状态仅限桌面端，代表系统光标所在位置，一般用背景色或添加醒目的描边表示;悬停状态通常叠加20%左右的白色或添加阴影，表现按钮向用户方向靠近的效果;点击状态在正常状态的基础上叠加15%的黑色，产生被按下的感觉;禁用状态则一般用灰色或者将正常状态的透明度降低至30%左右。

4、位置

位置的选择一般对主按钮较为重要，在设计时要以引导用户、方便用户点击为目的。

根据尼尔森团队眼动追踪研究结果发现，用户通常以F型和Z型模式浏览页面，其中Z型浏览模式较为普遍，F型浏览模式通常为新闻平台、博客等以文字为主的页面。

由此可知页面的左上方通常为用户视觉的起点，右上方次之。我们可以将主功能按钮放置于用户容易注意到的位置，相反较为低频的按钮则可以安排在其他位置，符合用户的阅读习惯。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请在707945861群中学习了解。

< 上一篇：按钮设计都包含哪些类型的按钮

下一篇：色彩在界面设计中的作用 >