Web UI设计规范及界面实现注意事项

---

一、规范介绍

网页视觉规范目的

适用于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点。

三、注意事项

1.  UI设计师设计完成经过确认后的页面必须上传至蓝湖协作平台，命名方式：姓名-项目名称（注意：未参与相关项目开发人员，请勿给予相关项目更改权限）
   

2. 如前端开发人员遇到蓝湖尺寸标注不准确的问题，UI设计人员应及时对该页面进行手工标注。
   

3. 所有项目默认切图工作由UI设计师完成，如遇特殊情况，双方可沟通协商共同完成。
   

4.  所有涉及PC端项目，设计尺寸宽度标准宽度为：1920，如遇特殊情况，Web界面最小设计尺寸为：1440或1024
   

5. 默认组件库：View
   UI 地址：https://www.iviewui.com/components/split （设计师可根据组件库进行样式效果配置）

6. 默认字体图标：confront-阿里巴巴矢量图标库，创建项目工作由UI设计师完成。

7. 默认动效参考：Ant Motion  地址：https://motion.ant.design/index-cn   （只供动效参考）
   

未通过客户或上级领导确认产出的界面，请勿上传至蓝湖协作系统

设计师在原型步骤及应该想好对应的图层结构，交互特效，并和前端开发人员做好交流，是否可以实现，功能的评估一定要细致

9.   设计师在原型步骤及应该想好对应的图层结构，交互特效，并和前端开发人员做好交流，是否可以实现，功能的评估一定要细致。
   

10. 系统原型是非常严肃的东西，但大多数团队没有认识到它们的价值，画在纸上的手稿也比没有强，如遇到没有原型图或具体设计手稿的项目，设计师可拒绝界面设计工作（靠一张嘴说不清楚！！！）
11. 如遇到原型中功能不完善，交互不规范的问题，应及时与项目负责人沟通更改，不能随意添加或者删减相关功能。

四、前端部分

1．已上传至蓝湖协作平台的高保真界面，应根据平台中的标注尺寸进行精确还原，Web界面还原度不得低于95%；移动端还原度为100%（精确到一像素）。

2．开发人员完成视觉部分内容以后，必须由UI设计师及前端技术负责人进行校对工作。

3．如遇到界面效果复杂或组件样式特殊等难以实现的问题，应及时与对应的UI设计师或前端技术负责人沟通处理，不能随意更换。

4．前端开发人员无权更改设计图中的样式及功能，遇到问题应及时与设计人员协商。

5．如遇产品经理或项目负责人未通过设计师确认，直接要求修改界面视觉效果部分，前端开发人员可拒绝修改。必须由UI设计师对高保真图纸更改后再进行相应的修改。