转载声明：文章来源https://www.jianshu.com/p/6f8738ec0d8e

一、规范介绍

网页视觉规范目的
适用于WEB产品线的人机交互界面的设计，贯穿于以用户为中心的设计指导方向。根据WEB产品的特点制定出的一套规范，以达到提升用户体验，控制产品设计质量，提高设计效率的目的。
视觉规范的对象
适合界面设计师、用户体验设计师、前台设计工程师、发布支持人员、运营编辑人员等
规范的含义
1．【统一识别】规范能使页面相同属性单元统一识别，防止混乱，甚至出现严重错误，避免用户在浏览时理解困难。
2．【节约资源】除了门户网站、活动推广等个性页面外，相对于后台系统、物联网系统、数据统计系统、等界面设计，使用规范标准能极大的减少设计时间。
3.【重复利用】相同单元属性，页面新建时可以执行此标准重复使用，减少无关信息，就是减少对主题信息传达干扰，利用阅读与信息传递。

二、UI基本设计标准

尺寸
画布建立尺寸宽度：1920px
分辨率：72像素/尺寸
颜色模式：RGB
网页内容安全宽度：≤1200px（只适用于门户网站）
首屏内容建议高度：800px（只适用于门户网站）
字体（web）
中文字体：微软雅黑 英文字体：Aerial Tacoma
Veranda
消除锯齿的方式为：Windows LCD
建议大小：建议使用16号+14号+12号字体的混合搭配（具体项目可根据实际情况灵活调整）
字体大小样式对照（如下图）

三、注意事项

1、UI设计师设计完成经过确认后的页面必须上传至蓝湖协作平台，命名方式：姓名-项目名称（注意：未参与相关项目开发人员，请勿给予相关项目更改权限）
2、所有项目默认切图工作由UI设计师完成，如遇特殊情况，双方可沟通协商共同完成。
3、所有涉及PC端项目，设计尺寸宽度标准宽度为：1920，如遇特殊情况，Web界面最小设计尺寸为：1440或102
4、默认组件库：View
UI 地址：https://www.iviewui.com/components/split （设计师可根据组件库进行样式效果配置）
5、默认字体图标：confront-阿里巴巴矢量图标库，创建项目工作由UI设计师完成。
6、默认动效参考：Ant Motion 地址：https://motion.ant.design/index-cn （只供动效参考）