认识达内从这里开始

认真做教育专心促就业

南昌达内UI设计培训按钮设计都有哪些设计要点

发布：南昌达内IT培训
来源：互联网
时间：2022-08-12 11:02

按钮设计是我们在学习UI设计技术的时候需要重点掌握的一个设计能力，我们在访问网页或者使用app软件的时候也会用到不同类型的按钮，下面我们就一起来了解一下，按钮设计都有哪些设计要点。

南昌达内UI设计培训按钮设计都有哪些设计要点

1、解构按钮

原子部分中的颜色和文本大致讲完了，接下来了解一下“按钮”和“图标”这两个原子的部分。按钮可以拆分为：解构按钮、框体结构、按钮尺寸、字符限制(中/英)、带图标按钮和按钮状态，还是按顺序一个个来讲。当我们去理解一下按钮时，是不是先从结构上剖析它，完全理解它的构成以后，再通过自己的理解去改变这些构成，并配置出自己想要的按钮来。

2、框体结构

完全理解按钮的构成后得先配置框体。框体的结构分为三种形式，分别是圆角、半圆角、直角。从颜色上又分为三种，白色、黑色和彩色。半圆角也就是有曲率的按钮，曲率值的设置比较麻烦，因为按钮的尺寸有三种，需要根据不同的尺寸设置不同的曲率，我在按钮文章中讲过。

3、按钮尺寸

在以前的文章中讲到过，按钮的尺寸(高度)分为大中小三种，分别是32px、40px和48px，以适应不同的需求。而我自己做了4个尺寸，分别是24px、32px、40px和48px，增数为8，前者是小高度，后者是大高度。高度越高就说明页面越大，更适用于展示型页面;高度越低就说明页面越低，更适用于功能性产品。

4、字符限制(中文)

绘制一个按钮时要对按钮中的字符有一定的限制，像两个字、三个字这样固定字数的按钮，可以给它固定打死一个数值。而多于三个字，或者字数不固定的情况下，就要设置好字符与框之间的距离，来时宽度做相对的变化。

5、字符限制(英文)

由于英文字体结构与中文不同，中文是由几个汉子组成的一个词，英文则是由不同的英文字母组成的单词。所以限制英文这样的按钮时，要比中文多稍微多加一些宽度，这样按钮就不会显得过于拥挤，相对比较舒服。

6、带图标按钮(中/英)

带图标的按钮相对不太好画，如果把图标和文字都进行水平垂直居中，就会从视觉上产生差异，看上去左面留白大，并且整体往右面倾斜。这是因为图标字体的视觉重量比图标的视觉重量大造成的，避免视觉产生差异的方法就是把整体向左移动一些单位，这样的整体看上去就会显得比较的平衡了。

7、按钮状态

按钮状态也是分为常规的这几种，分别是禁止、正常、点击和选中等状态。白色由深到浅，黑色由浅到深。

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

< 上一篇：南昌达内培训人工智能如何保护用户个人信息安全

下一篇：南昌达内IT培训大数据平台目前存在的问题都有哪些 >