认识达内从这里开始

认真做教育专心促就业

运城网站开发关于按钮功能的设计知识分享

发布：运城达内教育官网
来源：站酷
时间：2019-03-05 08:06

我们在开发app软件或者是设计网站的时候，一般都是通过按钮功能来实现与用户的交互行为的，而今天我们就一起来了解一下，关于按钮设计都有哪些要点需要我们掌握。

运城网站开发关于按钮功能的设计知识分享

1.解构按钮

先得先解构一个按钮，把按钮中各个元素都提取出来。按钮的绘制过程：先设一个网格基数(一般为4px) – 绘制一个宽与高存在比例关系的矩形(固定宽度的情况下) – 添加字符(中英文) – 添加按钮(功能) – 调整距离(字符/按钮与矩形之间的距离) -完成。

2.网格基数

绘制一个按钮的一步，就是设置网格基数。如果网格基数不设置4px而设置3px，那当我们画一个高度为45px的时间选择器时，得知右面“上”的图标高度就是45/2=22.5px，这里出了小数点，22.5px中包含7个网格位，并多出了1.5个px，即22.5-21(3×7网格位)=1.5px的空位，1.5px<3px。所以网格基数设置为3px它是不规范的。

3.按钮的宽高

当我们绘制按钮并选择宽高时，要看它的字数是“固定的”还是“随之变化的”。字数固定指的是像“确认按钮”这样永远都只有两个字的情况。而随之变化指的是，按钮的宽度要随着字数的变化而变化。在字数固定的情况下，按钮的宽高可以采用倍数关系，即按钮“宽80px/高40px“的两倍。

4.按钮的曲率

按钮的曲率要针对不同的业务需求选用不同的数值。如果统一了按钮曲率，当对应很多高度与间距不同的产品时，会造成几个产品中按钮曲率不和谐的问题。间距和高度越大的产品，按钮的曲率就越接近直角矩形，差异性也越来越小。但在同一个产品时，曲率的变化幅度也不要太大，这样就会失去一致性。

5.按钮中添加字符

在按钮中添加字符，要注意的是字符与按钮边框之间要留多少距离就可以了，问题不大。但它们之间的距离不能过少，太少就会显得很挤，给人感觉很小气。也不能太大，太大给人感觉字符上下有种压迫感。距离还需要设计师自己根据自身审美去控制。

6.按钮中添加功能

在按钮中添加功能，这里的“功能”指的就是“图标”，加了图标的按钮就变成了“功能按钮”。绘制功能按钮跟添加字符类似，但绘制功能按钮会考虑视觉差与平衡性的问题，就稍微麻烦一些。

作者：Lawrence_V

节选：站酷

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

< 上一篇：学习JavaScript编程开发我们需要了解哪些问题