现在的企业越来越重视用户体验的重要性，对于设计师来说，按钮作为设计组件之一，有很多细节容易被忽略，我们需要对每一个细小的元素进行深入思考，如论任何大小组件，都需要做到精益求精，才能给用户带来更好的使用体验。

  按钮在我们的日常生活中十分常见，结合按钮，用户可以知道下一步动作该如何进行，然而按钮若设计不当，则可能导致用户的错误操作，降低用户的产品使用体验。

  在UI设计中，如何完美地避开问题、把按钮设计得更好，是每个设计师需要深思的问题。按钮设计的好坏，将直接关系着用户引流、触发行动、产品转化率等至关重要的问题。另外，精致的按钮也会让整个页面的视觉提升档次。优漫教育小编本篇文章将对按钮作出解析，介绍在设计按钮时需要着重考虑的因素及设计标准，并将理论付诸于实践。

  一、按钮的作用

  1.什么是按钮

  在UI设计中，按钮是一个明确指示交互行为动作的组件，主要用于触发某一个即时操作，很多时候，我们需要采取下一步行动或返回到上一步，都要通过按钮（部分场景可用手势交互）来完成。

  在视觉层面，按钮的组成看起来很简单，由一个底色块/线框加上一组文案即可组成，但真正要将按钮设计好，仅停留在视觉层面并不严谨，其大小、位置、色值、文案……等每一个细节的处理都关系着用户的操作体验，下面的这几种情况大家肯定有碰到过：

  2.按钮有什么用

  通常，我们在设计按钮之前，需要详细理解按钮所存在的意义，哪里该加、哪里不该加、为什么要加，主要从以下几点来体现按钮的作用：

  1）功能性操作

  这种按钮很常见，比如展开、收起、下拉、加减等，按钮视觉较弱，重点强调该页面的功能，突出主体信息，在操作之后会发生一些交互变化，这类按钮主要起到功能形态的作用。

  2）明确引导下一步操作

  当用户完成一个页面的内容填充或信息确认，就会失去视觉焦点，而下一步按钮就会聚焦视觉重心，通过文案告知用户下一步该怎么做，常见的有保存、下一步、支付、确定……等。

  另外，用户需要完成某个任务，但同一个任务流程的信息、种类较多，这时就会通过分步骤、分页的方式，并在每个步骤的末尾增加一个能起到上下衔接作用的按钮，明确引导用户进入下一步操作，以此来提升用户完成整个任务的成功率。

  3）培养行为习惯

  如果在操作某个按钮之后得到了一定的利益，且能持续为用户带来价值，那么不妨将这个按钮设计的更醒目，并在同等级但不同的地方保持视觉的统一，持续培养用户点击习惯，当用户下次再看到类似这种按钮时，惯性思维就会引导点击。

  3.按钮的组成

  在大部分的认知中，最常见的按钮就是一个底色块加上一句文案就完成了，殊不知一个好的按钮需要经过很多细节的把控，才能发挥出按钮的最大作用。

  例如文案的长短/边距、容器的大小/圆角、填充色的主/次之分……等，下面我们来看看一个按钮到底是由哪些属性、元素组成。

  圆角：传达出按钮的气质，决定用户的视觉感受，最常见的为小圆角，也有较为严谨、力量型的全直角、卡通可爱、年轻化风格的全圆角；

  图标：用于按钮含义的图形化抽象表达，例如加载中、编辑；

  容器：整个按钮的载体，容纳文案、图标等元素；

  边框：确定按钮的边界，常用于次级按钮描边；

  文案：用文字表达按钮的含义，精简文案；

  背景：表达按钮的当前状态，对按钮合理的使用主体色能有效传播品牌气质；

  投影：让按钮具有层次感，配合渐变背景能体现出微质感的效果。

  2.按钮的风格

  在UI设计中，几乎每个页面都存在按钮，样式、种类也有很多，但设计风格常见的也就几种，例如扁平化、微质感、拟物化、新拟态（概念）……

  1）微质感按钮

  相比扁平化，填充渐变色再加上浅浅的投影，不仅能保持信息内容的简洁、让用户产生更强的操作欲望，还能让页面具有品质感，更加耐看。例如：年轻化应用、娱乐类应用、儿童应用等。

      2）扁平化按钮

  通常在容器中填充一个纯色即可，没有多余的视觉干扰，操作简便，这种类型的按钮一般在应用中用的最多。例如：工具型应用、B端应用等。

  3）拟物化按钮

  大多设计得很立体，3D质感、属性样式丰富多彩，参考现实世界中的事务或摄取应用场景中的某些元素，使其更加逼真，有较强的代入感。例如：游戏类应用、H5专题、运营banner等。

  4）新拟态按钮

  2021年风靡一时，几乎无人不知，但要想落地却不太现实，实用性不强，也只能在飞机稿中出出风头，随着时间的流逝，逐渐销声匿迹，不知哪天会不会经改良后再次面世（当初扁平化问世，也是几经波折，经多年改良才逐渐被大众所接受）。目前只有少数工具类应用使用了新拟态，例如：计算器、AI设备控制、有道云笔记等。

  以上就是优漫教育小编为大家介绍的“【UI培训分享】：UI设计中按钮设计细节，你需要了解这些”相关内容，学习ui设计培训，可以参考优漫教育提供的ui学习路线，该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等，根据优漫提供的ui学习路线图，可以让你对学好ui需要掌握的知识有个清晰的了解 ！