WEBUI设计规范

1

2020年4月19日

WEBU设计规范文档仅供参考

- 2 -

2020 年 4 月 19 日

内蒙古万德系统集成有限公司

WEB UI设计（流程/界面）规范

目录

一： UI 设计基本概念与流程 ............................................................... 错误!未定义书签。

1.1 目的 .............................................................................. 错误!未定义书签。

1.2 范围 .............................................................................. 错 误!未定义书签。

1.3 概述 .............................................................................. 错 误!未定义书签。

二： UI 界面用户体验设计原则与规范 ....................................................... 错误!未定义书签。

1：应该遵循的基本原则 ................................................................. 错 误!未定义书签。

2：页面外观规范 ....................................................................... 错 误!未定义书签。

② 宽带页面 ....................................................................... 错 误!未定义书签。

③ 自适应 ......................................................................... 错 误!未定义书签。 文档仅供参考

- 3 -

2020 年 4 月 19 日

④ 其它页面 ....................................................................... 错 误!未定义书签。

基本结构 .......................................................................... 错 误!未定义书签。

页面版式： ........................................................................ 错 误!未定义书签。

版块基本元素： 所谓基本元素就是将其中任意几块元素拼接起来形成所需网页版块。 ......... 错 误!未定义书签。

版块组合形式 ...................................................................... 错 误!未定义书签。

3：色彩规范 .......................................................................... 错 误!未定义书签。

4：字体规范 .......................................................................... 错 误!未定义书签。

① 文字格式 ....................................................................... 错 误!未定义书签。

② 标题类 ......................................................................... 错 误!未定义书签。

④ 功能类 ......................................................................... 错 误!未定义书签。

⑤ 注释类 ......................................................................... 错 误!未定义书签。

正文类 ............................................................................ 错 误!未定义书签。

5：图片规范 .......................................................................... 错 误!未定义书签。 文档仅供参考

- 4 -

2020 年 4 月 19 日

主要图片 .........................................................................

图片规格 .........................................................................

6：表单规范： ........................................................................

① 按纽 .........................................................................

② 输入框 .......................................................................

③ 文本框 .......................................................................

一： UI 设计基本概念与流程

1.1 目的

规范公司 UI 设计流程，使 UI 设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使

UI 设计的流程规范化，保证 UI 设计流程的可操作性。

1.2 范围

本文档用于界面设计 ,本文档的读者对象是项目管理人员、售前服务人员、 UI 界面设计人员、界面评审人 错误!未定义书签。

错误!未定义书签。

错误!未定义书签。

错误!未定义书签。

错误!未定义书签。

错误!未定义书签。

④ 复选框 ........................................................................ 错误!未定义书签。

⑤ 菜单 .......................................................................... 错误!未定义书签。 文档仅供参考

- 5 -

2020 年 4 月 19 日

员和配置测试人员。

1.3 概述

UI 设计包括交互设计，用户研究，与界面设计三个部分。基于这三部分的 UI 设计流程是从一个产品立项 开始，

UI 设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验 证反馈阶段等环节，履行相应的岗位职责。 UI 设计师应全面负责产品以用户体验为中心的 UI 设计，并根据客 文档仅供参考

- 6 -

2020 年 4 月 19 日

二：UI界面用户体验设计原则与规范 1：应该遵循的基本原则

无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致

2：页面外观规范 户（市场）要求不断提升产品可用性。本规范明确规定了

的工作质量。 UI 设计在各个环节的职责和要求，以保证每个环节