控件尺寸规范_UI设计中的视觉规范

今天小编带着大家了解一下设计规范的内容 。

那我们为什么要设定规范呢？主要分为以下几点。

1，对APP界面进行风格统一，使界面设计整洁；

2，对界面元素的样式、颜色和大小设定统一的规范和使用原则；

3，减少界面元素的重复设计；

4，可以减少产品、设计、前端的沟通成本；

5，减少设计素材，控制安装包的大小；

那么接下来咱么就了解一下视觉规范的内容，

主要包括对色彩、文字、视图、控件、加载、常态点击态等进行统一的梳理和规范

色彩：

标准色

规范：重要、一般、较弱

重要：重要颜色中一般不超过3种；

一般：都是相近的颜色，而且要比重要颜色弱；

较弱：普遍用于背景色和不需要显眼的边角信息

文字

规范：重要、一般、弱

文字是APP主要信息的表现，尤其是新闻阅读、社区APP等制定标准的设计规范和良好的排版方式，用户使用APP也觉得毫无疲劳感，这一点很重要

主要规范标准字的大小，标准字要注意跟上文的标准色进行组合，突出APP重要的信息和弱化次要的信息

视图

要给人简洁整齐，条理清晰感，依靠的就是界面元素的排版和间距设计

考虑适配不同的屏幕分辨率，一般解决方案有根据屏幕等比放大缩小间距，或者固定某些界面元素的间距，让其他空间留空拉伸

为了满足屏幕分辨率较大的设备，有时甚至需要改变APP界面的页面布局

控件

安卓需要720*1280、1080*1920

IOS需要750*1334、1125*2001

都需要提供PNG图标格式

图标还应该根据不同的功能需求设计不同的状态：如常态、选中态、点击态等

图标设计时，可参考以下设计方法，可保持图标大小整体视觉感受一致。

按钮

重要按钮：常态、点击态、不可点击态；

一般按钮：字符数量为2-7个；

按钮规范因不同功能和场景需要，设计不同的样式和颜色，在尺寸上也分有：长、中、短；

公共控件

加载

页面加载失败、页面为空可以统一规范文案、按钮

页面Loading动画是APP界面必不可少的元素

增加Loading可以给用户明确的反馈功能正在加载，减少用户在等待功能响应而引起的烦躁感

另外loading动画除了常规的菊花还可以考虑使用Npc，让APP更生动、活泼

使用Logo口号加强APP的品牌形象

总结

设计规范主要由设计师来梳理，但必须要与前端开发、产品经理达成共识，严格遵守约定的规范，否则这个设计规范就毫无意义了

在制定设计规范过程中，产品经理要积极主动充当桥梁角色组织设计师、前端开发一起制定设计规范，保证设计规范考虑的更切合实际、更全面、更完整

不同项目不同团队规模会有不一样的需求，避免生搬硬套，制定适合团队的规范才是最好的

一个好的规范手册，是服务于设计师的，绝不是我们设计师成长路上的绊脚石

————文中图片来源于网络