南京UI设计培训分享UI设计规范

　　今天南京万和UI设计培训从六个方面来给大家梳理一下UI设计规范应该注意的事项。（快说我是不是你真爱）

　　1、信息系统：字体选择、颜色、层级区分

　　产品中的字号应该有一个全局的规划，在同一个界面内，尽量少用太多太接近的字号，比如一个产品详情页的正文部分，如果同时用了12、13、14、15、16、18去排版，文字的层级对比会比较弱，不利于阅读，视觉效果也会有点凌乱。

　　如果你对全局的字号没把握，不妨参考一下上图的字号分布，这套基于12、14、16、20和34号的字号分布能够良好的适应布局结构，层次明晰，所以具有一定的参考意义。当然以上仅供参考，没有绝对的字号布局方案，设计师可以根据具体的产品情况来分布。

　　如上图所示，「L」和 「XXL」用了两个很相似的颜色#666666和#6e6e6e，这两个颜色肉眼难以区分，在同一层级去做字体颜色区分是没必要的。同一组中的内容属于同一层级，从信息层级来讲应该要用同一种颜色，表示是同一个层级。

　　产品文字中一般会有一级标题、二级标题、一级正文、二级正文、提示文字、辅助文字等，为了区分层级便于浏览，通常会根据产品需要把字体颜色深浅分成3到5个层级，常见的有#333333、#666666、#999999这个组合，这个组合的层级区分比较分明，适应性比较广，因此有一定的参考价值。

　　从技术实现层面来讲，对于字体的选择，产品设计和推广设计有较大的区别。

　　推广设计的风格多种多样，需要根据需求选择字体来营造氛围，推广设计的字体往往是做在图片上，不需要考虑用户的设备中有没有包含该字体。

　　产品设计的字体，很少会做在图上，大多数字体由前端工程师来实现，设计师一般会选择用户设备里自带的字体来进行设计。如果在页面中用了兰亭黑、正黑等大量第三方字体，用户的设备没有这些字体就会以默认字体来显示，最终效果会和视觉稿有很大出入。更多内容，请咨询南京万和UI设计培训。

　　另外，从视觉层面来讲，文字的层级一般用字号去区分，如果既用字号去区分，又用不同字体去区分信息，会显得凌乱缺乏美感，因此字体的数量应做减法，能用2种就不要用3种，能用1种就不要用2种。

　　2、控件系统：按钮的样式统一

　　在产品中按钮控件的复用度是很高的，同样的一个确定按钮也会根据页面环境不同来设定不同宽高尺寸。

　　需要注意的是，即使按钮宽高不同，按钮样式也需要统一宽高比例、描边、直角、圆角、色值、文字区域、字体、字间距等，以保证按钮样式的统一。

　　另外，在一般情况下，按钮会有四种鼠标状态。不同颜色的按钮之间，相同的鼠标状态也需统一视觉效果。比如同层级的蓝色和绿色按钮放在一起，这2个按钮在hover状态下的明度变化看起来应相对统一。

　　3、布局系统：界面内不能出现多余的行间距

　　在设计的过程中，间距这个隐形元素往往会被新人忽略，间距能表明内容之间的层级和从属关系，凌乱复杂的间距会对用户认知造成较大困扰。

　　因此，设计师需要将间距当做色彩、字体、字号一样的元素来设计。一个界面中能用5种间距，就不要用6种；能用3种就不要用4种，这是一个需要做减法的设计原则。更多内容，请咨询南京万和UI设计培训。

　　另外，内间距尽量不要大于外边距。大多环境下，外边距小于内边距时内容会有外扩力，显得拥挤，有阅读压力。外边距大于内边距时，有适当的留白，内容没有外扩力，用户的视线不受干扰，更专注于内容本身。

　　4、配色系统

　　选择主色调时，首先确定产品的调性、用户对象和所要表达的气氛，以及利用色彩所希望达到的目的，色彩取向决定了这个产品的风格。产品的辅助色可用主调色的邻近色，也可用对比色。确定主色和辅助色之前，建议应用到各种页面中去看看实际效果，因为每个页面的使用环境都不同，反复验证后才能确定最终的色彩方案。

　　一般情况下，可选择一到三种辅助色配合使用，整个产品的色彩最好控制在四种颜色之内。更多内容，请咨询南京万和UI设计培训。

　　5、品牌系统：LOGO应用

　　LOGO会应用到各种页面中，在LOGO定稿后需要将LOGO的各种组合方式整理出来，便于后续的实际应用。比如LOGO的左右结构及上下结构；反白的情况；黑白的情况；单色的情况；黑底白底的情况；最小尺寸；以及错误的使用方式都需要标示出来。

　　6、推广系统

　　推广规范设定应突出商品、主体内容和主要文案。不得使用无版权的图片和字体，文案排版需符合阅读习惯，避免折行，字体不要过小，字体笔画均匀识别度高，辅助图形不得扰乱文案信息和产品展示。

　　以及具体的排版结构，它是上下还是左右，先图后文，还是先文后图，四周的边距和文案的间距，可以和不可以的排版行为需要标示。

　　如果还想要更多的内容，那么来南京万和UI设计培训吧！江苏万和作为专业的南京UI设计培训中心，还会定期邀请知名企业的高级UI/UE设计师，项目经理为学生做经验分享会，参与到国内各大UI设计圈沟通交流群，让更多的UI大咖成为你的人脉朋友。