一、规范介绍
网页视觉规范目的
适用于WEB产品线的人机交互界面的设计，贯穿于以用户为中心的设计指导方向。根据WEB产品的特点制定出的一套规范，以达到提升用户体验，控制产品设计质量，提高设计效率的目的。
视觉规范的对象
适合界面设计师、用户体验设计师、前台设计工程师、发布支持人员、运营编辑人员等
规范的含义
1．【统一识别】规范能使页面相同属性单元统一识别，防止混乱，甚至出现严重错误，避免用户在浏览时理解困难。
2．【节约资源】除了门户网站、活动推广等个性页面外，相对于后台系统、物联网系统、数据统计系统、等界面设计，使用规范标准能极大的减少设计时间。
3.【重复利用】相同单元属性，页面新建时可以执行此标准重复使用，减少无关信息，就是减少对主题信息传达干扰，利用阅读与信息传递。
二、UI基本设计标准
尺寸
- 画布建立尺寸宽度：1920px
- 分辨率：72像素/尺寸
- 颜色模式：RGB
- 网页内容安全宽度：≤1200px（只适用于门户网站）
- 首屏内容建议高度：800px（只适用于门户网站）
字体（web）
-
中文字体：微软雅黑 英文字体：Aerial Tacoma
Veranda -
消除锯齿的方式为：Windows LCD
-
建议大小：建议使用16号+14号+12号字体的混合搭配（具体项目可根据实际情况灵活调整）
-
字体大小样式对照（如下图）
image.png
-字体间距
间距一般根据字体大小选1-1.5倍最为行距，段落间距一般选择1.5-2倍字体大小。如选用12px像素字体，则行间距为12点-18点，段落间距为18-24点。
三、注意事项
UI设计师设计完成经过确认后的页面必须上传至蓝湖协作平台，命名方式：姓名-项目名称（注意：未参与相关项目开发人员，请勿给予相关项目更改权限）如前端开发人员遇到蓝湖尺寸标注不准确的问题，UI设计人员应及时对该页面进行手工标注。所有项目默认切图工作由UI设计师完成，如遇特殊情况，双方可沟通协商共同完成。所有涉及PC端项目，设计尺寸宽度标准宽度为：1920，如遇特殊情况，Web界面最小设计尺寸为：1440或1024-
默认组件库：View
UI 地址：https://www.iviewui.com/components/split （设计师可根据组件库进行样式效果配置） -
默认字体图标：confront-阿里巴巴矢量图标库，创建项目工作由UI设计师完成。
默认动效参考：Ant Motion 地址：https://motion.ant.design/index-cn （只供动效参考）
未通过客户或上级领导确认产出的界面，请勿上传至蓝湖协作系统
设计师在原型步骤及应该想好对应的图层结构，交互特效，并和前端开发人员做好交流，是否可以实现，功能的评估一定要细致
设计师在原型步骤及应该想好对应的图层结构，交互特效，并和前端开发人员做好交流，是否可以实现，功能的评估一定要细致。- 系统原型是非常严肃的东西，但大多数团队没有认识到它们的价值，画在纸上的手稿也比没有强，如遇到没有原型图或具体设计手稿的项目，设计师可拒绝界面设计工作（靠一张嘴说不清楚！！！）
- 如遇到原型中功能不完善，交互不规范的问题，应及时与项目负责人沟通更改，不能随意添加或者删减相关功能。
四、前端部分
1．已上传至蓝湖协作平台的高保真界面，应根据平台中的标注尺寸进行精确还原，Web界面还原度不得低于95%；移动端还原度为100%（精确到一像素）。
2．开发人员完成视觉部分内容以后，必须由UI设计师及前端技术负责人进行校对工作。
3．如遇到界面效果复杂或组件样式特殊等难以实现的问题，应及时与对应的UI设计师或前端技术负责人沟通处理，不能随意更换。
4．前端开发人员无权更改设计图中的样式及功能，遇到问题应及时与设计人员协商。
5．如遇产品经理或项目负责人未通过设计师确认，直接要求修改界面视觉效果部分，前端开发人员可拒绝修改。必须由UI设计师对高保真图纸更改后再进行相应的修改。
网友评论