UIUE设计规范V1

UI/UE规范2021年11月
1规范总体介绍配色使用规范5页面框架规范2页面布局规范3字体使用规范
6
控件按钮规范4
1
2
3
本规范采用用户界面宽度为1366px 的屏幕分辨率尺寸为基准，内容宽度限制在1366px 以内居中显示。

同时对其他分辨率屏幕以平铺方式自适应。

本规范的中文字体采用windows 操作系统下的“微软雅黑”字体，英文字体采用windows 操作系统下的“Arial ”字体。

（若无以上字体请替换成最接近的通用字体）
本规范下，规定所有系统平台界面视觉设计风格均为扁平化。

IE 浏览器约束：线上要求兼容浏览器IE10以上、edge 、chrome 、firefox ，ERP 系统要求IE11以上版本
4
为保证各类应用系统在开发实现过程中的页面风格统一，制定一套完整的UI 规范。

界面是系统／平台与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。

而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。

设计合理的界面能给用户
带来轻松愉悦的感受和成功的感觉。

1.1 制定目标
本规范是用来指导系统开发人员和视觉设计人员在开发或升级改版相关系统时，用以保证系统的视觉和交互行为的一致性和
兼容性。

遵循这个规范可以获得很多好处：
1.2 使用范围
系统所有产品开发人员，包括：产品经理、UE 工程师、需求人员、UI 工程师和其它相关技术开发人员。

0102
06
0304
05
用户界面及操作习惯保持一致，这样能够缩短用户使用新系统的学习时间和学习成
本；
好处良好的用户交互设计系统能够帮助用户更快地达到目的；
保持所有系统的一致性和良好的连贯性，便于版本升级；
简化您的产品设计文档和操作说明的撰写，因为很多界面和标准的交互行为的描述不再需要过多的解释
提升用户体验；
保证系统的易用、友好、美观和大方；
系统所有产品开发人员
产品经理UE 工程师需求人员
UI 工程师
其它相关技术开发人员
视觉(UI)设计规范准则
产品界面设计遵循
规范化的程度越高，则
易用性相应的就越好的
原则。

保持操作方式的
一致性和功能实现方式
的一致性原则，使用统
一样式控件、菜单样式、
配色等减少用户记忆负
担和思考时间。

屏幕对角线相交的
位置是用户直视的地方，
正上方四分之一处为易
吸引用户注意力的位置，
在放置窗体时要注意利
用这两个位置，平衡好
视觉装饰元素对用户操
作的干扰。

如果一味的遵循业
界的界面标准，则会丧
失自己的个性，在框架
符合规范的情况下，设
计具有自己独特风格的
界面尤为重要。

界面应该大小适合
美学观点，不能影响用
户的舒适度。

页面色彩与品牌整
体形象相统一，让浏览
者在UI界面中认知门户
统一性。

规范性合理性独特性美观性统一性
2
1345
交互设计(UE)规范准则
可用性
1
易用性
2
容错性
3
4
一致性
1.用户行为约束：为用户封闭不正确的道路；
2.
减轻用户认知负担：可以不出现的内容尽量不出现，即使需要出现也要用最简洁的方式出现。

3.引导用户行为路径：让用户方便去他想去的地方，回他想回的地方。

4.
省略多余的文案：罗嗦的词语会影响用户对关键信息的阅读理解和判断，精简如过分修饰，欢迎语，多余指示性语句；
5.
强化重点：即在视觉上将入口模块凸显出来，采用精妙的布局，并适当弱化周边的信息展示，加大二者的权重对比，客观上增加用户识别的准确性；
6.
增强通用性：根据页面本身的信息量严格控制同功能入口的数量，保证有效的识别性，让用户迅速找到正确的入口；
1.记住用户的操作与信息，帮助用户记忆；
2.简洁不简单，将复杂的功能替换成一个可以容易理解的名词或图标缩起来；
3.使用熟知方式传递信息，更能被用户所接受；
4.表述的信息尽量口语化，不用或少用专业术语；
5.表述语气柔和、礼貌，避免使用被动语态、否定句等；
6.
要尽量使用形状+色彩的方式来表现信息，这样对于正常用户和对颜色识别有障碍的特殊用户，都不影响他们的使用；
7.
在设计操作时尽可能地采用“选择”的方式而不是“填写”，简化操作方式；
1.
给予用户必要的预判性错误提示——告诉用户，这样走可能
会错；
2.告诉用户操作所处的状态和正
确的操作方式——告诉用户，
怎么走才对；
3.及时反馈操作，防止用户出错；
分析错误原因，给出合理建议。

1.
保持正确的对应关系，一个流程只有一个最重要的操作，一次操作只有一个结果，逻辑清晰，有先有后；
2.流程保持一致性，可以大大降低用户理解成本，使用户快速上手；
3.对于同种操作的交互文本，操作文字保持统一性，便于用户记忆；
4.
同类或同一纬度的信息，在形式和色彩风格上尽量保持一致性，减少用户因而产生的疑惑感。

▪参考尼尔森《眼睛轨迹的研讨》的研究结论，以“F ”模型为主要页面框架模型；
▪通过对淘宝、网易、新浪、微信、XX 网上营业厅等网站的首页进行研究，将首页类型分为“浏览性门户”和“操作性门户”两类；通过参考XX 图标和门户进行配色提取；▪参考《UIUE 方案》
▪通过参考Gartner 的架构设计原则，制定项目UIUE
设计。

尼尔森《眼睛轨迹的研讨》
浏览型门户网站框架参考模型
规范性合理性独特性
美观性统一性UI 设计原则
可用性易用性容错性一致性UE 设计原则
1.字体规范
2.链接文字规范
字体使用规范
1.主色设计
2.辅色设计
3.渐变色设计
配色使用规范
1.登陆页面框架
2.门户浏览类页面框
架
3.应用操作类页面框
架
4.Tab 标签框架
5.工单审批
6.框架设计执行约定
（含导航式操作页面跳转规范）
页面框架规范
1.按钮控件规范
2.单选与复选框控件
规范
3.弹层/提示框控件
规范4.日志控件规范5.翻页控件规范6.表格控件规范
7.其它控件规范
控件按钮规范
1.内容区模块布局
2.页面布局
3.模块的显示与隐藏
页面布局规范
1规范总体介绍配色使用规范5页面框架规范2页面布局规范3字体使用规范
6
控件按钮规范4
框架设计细节规范内容
框架设计
门户浏览类页面框架应用操作类页面框架
登录页框架
1
2
3
45
Tab 标签框架工单审批
登录窗口
大背景图
背景色：
1.可以放置大背景图
2.可以放置纯色背景登录窗口具备内容：1.Logo 2.平台名称
3.登录用户名
4.选择公司
5.登录密码
6.登录按钮
7.忘记密码
8.窗口居中显示
9.其它
Logo+平台名称
门户浏览类页面框架
应用操作类页面框架登录页框架1234
5
Tab 标签框架工单审批
1.建议名称一行放置，如果名称字符非常多，可考虑缩小字符大小放置。

2.当鼠标移入悬浮时用户（密码）时，输入框显示蓝色点击出现闪烁光标输入字符，原来默认字符自动消失。

当输入错误时边框色变为红色，
同时标注出错误的原因及正确输入法。

鼠标移出点击其它块时蓝色边框变为原来默认色，闪烁光标消失。

3. 三种登录方式：切换形式展示
•静态密码---默认固定的用户名和密码（先选择所在公司，可能采用姓名为用户登录名，会有重名问题发生）；
•动态密码---请输入已经验证的手机号码，获取动态验证密码；
•二维码---手机扫描登录。

4. 记住用户选择的登录方式和用户信息，节省输入时间和选择时间
5. 此处规定按钮名称为“登录”，居中显示，按钮有默认状态蓝色和鼠标滑入状态绿色，点击后登录到内部首页界面，如果登录不成功，上方出现问题部分标红
，说明问题原因及其正确操作。

1
2
3
4
5
门户浏览类页面
框架
应用操作类页面
框架
登录页框架
1
2
3
4
5
Tab标签框架
工单审批
登录页框架视觉设计示例
界面风格：采用当下流行的科技背景并加入磨砂玻璃效果，科技而具有神秘感，让人看后，有一探究竟的冲动，背景图片内容也彰显出了当前（科技、网络、统计等）的行业背景。

配色：采用XX 蓝为主，XX 绿作为点睛色，与企业品牌色相统一。

布局：登录框采用简洁方式展现，居中显示，突出视觉重点。

门户浏览类页面框架
应用操作类页面框架登录页框架123
4
5
Tab 标签框架工单审批
框架设计细节规范内容
框架设计
门户浏览类页面框架应用操作类页面框架
登录页框架
1
2
3
45
Tab 标签框架工单审批
门户浏览类页面框架方案
一
▪页面整体模块布局以对齐方式，上下左右对齐布局。

避免垂直分隔线不规整的现象。

▪导航布局方式以文字、导航条背景为主用隔线分开。

▪导航文字字号16px ，背景条高度32px
门户浏览类页面框架
应用操作类页面框架登录页框架123
4
5
Tab 标签框架工单审批
门户浏览类页面框架方案二
Logo 头部：
1.左侧可放置logo+门户网名
称
2.右侧可放置平台帮助按钮、设置按钮、搜索按钮等导航菜单：
1.放置导航内容，如果导航内容过多可考虑增加下拉按钮，显示全部内容。

点击导航按钮可跳转到相应界面中。

2.可放置搜索框。

内容：
可根据实际内容灵活增减模块。

在此模块大小不做规范，可根据实际需求灵活调整。

原则上横向模块不要超过3个。

Logo 头部导航菜单
footer 内容内容
宽1366px
宽260px
高60px 高45px
门户浏览类页面框架
应用操作类页面框架登录页框架1234
5
Tab 标签框架工单审批
界面风格：采用当下流行的扁平化设计，导航采用扁平化中微渐变色条效果，提升页面的活跃度和用户体验感。

配色：采用XX 蓝为主，同时作为点睛色，与企业品牌色相统一。

布局：
1.Logo ：左侧是：XXlogo+门户组合右侧是：帮助按钮+用户信息等；中间留白，使界面看上去简洁，减轻页面带给用户浏览负担。

2. 导航：用主色蓝色（#0084CF ）突出当前页面是首页，其他平台的入口按钮都紧跟其后，方便用户快速到达自己的平台。

显示不下的信息在后面下拉框内显示，经常使用的往前排序（详情请查看demo 模版信息）；搜索框可以随时搜索内容。

3. Footer ：页面的底部，放置公司信息、许可证信息、编号等信息。

（根据实际需要灵活放置）
门户浏览类页面框架
应用操作类页面框架登录页框架1234
5
Tab 标签框架工单审批
界面风格：采用当下流行的扁平化设计，导航采用扁平化中微渐变色条效果，提升页面的活跃度和用户体验感。

配色：采用XX 蓝为主，同时作为点睛色，与企业品牌色相统一。

布局：
1.Logo ：左侧是：XXlogo+门户组合右侧是：帮助按钮+用户信息等；中间留白，使界面看上去简洁，减轻页面带给用户浏览负担。

2. 导航：用主色蓝色（#0084CF ）突出当前页面是首页，其他平台的入口按钮都紧跟其后，方便用户快速到达自己的平台。

显示不下的信息在后面下拉框内显示，经常使用的往前排序（详情请查看demo 模版信息）；搜索框可以随时搜索内容。

3. Footer ：页面的底部，放置公司信息、许可证信息、编号等信息。

（根据实际需要灵活放置）
门户浏览类页面框架
应用操作类页面框架登录页框架1234
5
Tab 标签框架工单审批
框架设计细节规范内容
框架设计
门户浏览类页面框架应用操作类页面框架
登录页框架
1
2
3
45
Tab 标签框架工单审批
应用操作类页面框架规范
Logo 头部
导航菜单
内容
Tab 标签
宽200px
宽1166px
高60px 高40px
Logo 头部：
1.左侧可放置logo+门户网名称
2.右侧可放置平台帮助按钮、设置按钮、搜索按钮等导航菜单：
1.放置导航内容，如果导航内容过多可考虑出现上下滚动条，
显示全部内容。

点击导航按钮可跳转到相应界面中。

2.设置收起展开导航菜单。

Tab 标签：
1.放置打开页面到标签，当前页
面突出显示。

内容：
可根据实际内容灵活增减模块。

在此模块大小不做规范，可根据实际需求灵活调整。

原则上
横向模块不要超过3个。

门户浏览类页面框架
应用操作类页面框架登录页框架1234
5
Tab 标签框架工单审批
应用操作类页面框架视觉设计示例
界面风格：采用当下流行的扁平化设计风格，导航采用扁平化中微渐变色条效果，提升页面的活跃度和用户体验感。

配色：采用XX 蓝为主，XX 绿作为点睛色，与企业品牌色相统一。

布局：1.Logo ：左侧是：XXlogo+平台名称组合右侧是：帮助按钮+用户信息等；中间留白，使界面看上去简洁，减轻页面带给用户浏览负担。

2.导航菜单：放置导航内容，如果导航内容过多可考虑出现上下滚动条，显示全部内容。

点击导航按钮可跳转到相应界面中。

可设置收起（宽64px ）／展开（宽200px ）
导航菜单，从而扩大界面浏览空间。

3.Tab 标签：根据实际内容显示规定个数，新打开标签位于首页后第一个显示，便于查看信息。

超出显示不下的标签，在右侧下拉框内显示。

可以单个点击关闭按钮关闭，也可以点击后面的全部关闭按钮关闭全部，给用户提供便捷的操作方式；
门户浏览类页面框架
应用操作类页面框架登录页框架12345Tab 标签框架
工单审批
应用操作类页面框架页面视觉设计示例
界面风格：采用当下流行的扁平化设计风格，导航采用扁平化中微渐变色条效果，提升页面的活跃度和用户体验感。

配色：采用XX 蓝为主，XX 绿作为点睛色，与企业品牌色相统一。

布局：1.Logo ：左侧是：XXlogo+平台名称组合右侧是：帮助按钮+用户信息等；中间留白，使界面看上去简洁，减轻页面带给用户浏览负担。

2.导航菜单：放置导航内容，如果导航内容过多可考虑出现上下滚动条，显示全部内容。

点击导航按钮可跳转到相应界面中。

可设置收起（宽64px ）／展开（宽200px ）导航
菜单，从而扩大界面浏览空间。

3.Tab 标签：根据实际内容显示规定个数，新打开标签位于首页后第一个显示，便于查看信息。

超出显示不下的标签，在右侧下拉框内显示。

可以单个点击关闭按钮关闭，也可以点击后面的全部关闭按钮关闭全部，给用户提供便捷的操作方式；
门户浏览类页面框架
应用操作类页面框架登录页框架12345Tab 标签框架
工单审批
应用操作类页面框架详情页视觉设计示例
界面风格：采用当下流行的扁平化设计风格，导航采用扁平化中微渐变色条效果，提升页面的活跃度和用户体验感。

配色：采用XX 蓝为主，XX 绿作为点睛色，与企业品牌色相统一。

布局：1.Logo ：左侧是：XXlogo+平台名称组合右侧是：帮助按钮+用户信息等；中间留白，使界面看上去简洁，减轻页面带给用户浏览负担。

2.导航菜单：放置导航内容，如果导航内容过多可考虑出现上下滚动条，显示全部内容。

点击导航按钮可跳转到相应界面中。

可设置收起（宽64px ）／展开（宽
200px ）导航菜单，从而扩大界面浏览空间。

3.Tab 标签：根据实际内容显示规定个数，新打开标签位于首页后第一个显示，便于查看信息。

超出显示不下的标签，在右侧下拉框内显示。

可以单个点击关闭按钮关闭，也可以点击后面的全部关闭按钮关闭全部，给用户提供便捷的操作方式；
门户浏览类页面框架
应用操作类页面框架登录页框架12345Tab 标签框架
工单审批
应用操作类页面框架导航菜单框架设计规范
展现样式为：图标+文字，一级菜单前图标（24px ）不能相同，二级以上菜单图标（16px ）相同（默认图标和选中图标样式）。

展现样式为：图标+文字，一级菜单前图标不能相同，二级以上菜单无图标。

样式一：支持5级以下导航菜单的显示；该显示样式简单直观，是现在管理平台流行的使用样式。

竖向超出屏幕尺寸的出现竖向滚动条；样式二：支持3级以下导航菜单的显示；该显示样式同样也简单直观，建议三级菜单超级多时使用，方便查看；样式三：支持5级导航菜单（京东风格）；非特殊菜单情况不建议使用该模式。

导航菜单最多支持5级鼠标滑入显示XX 绿色，点击选中背景的颜色和logo
处相统一，达到内外色调相呼应的效果。

展现样式为：图标+文字，一级菜单前图标不能相同，二级以上菜单无图标。

门户浏览类页面框架
应用操作类页面框架登录页框架12345Tab 标签框架
工单审批
其它可选应用操作类界面框架首页设计规范-1菜单导航内容快捷菜单入口宽200px 宽1166px
Logo 高60px Logo ：可放置logo+门户网名称Tab 标签：使用浏览器打开新窗口的形式展现。

导航菜单：1.放置导航内容，如果导航内容过多可考虑出现上下滚动条，显示全部内容。

点击导航按钮
可跳转到相应界面中。

2.可设置收起展开导航菜单。

快捷菜单入口：
放置经常使用的功能按钮、平
台帮助按钮、设置按钮、搜索
按钮等
内容：
可根据实际内容灵活增减模块。

在此模块大小不做规范，可根
据实际需求灵活调整。

原则上
横向模块不要超过4个。

门户浏览类页面框架
应用操作类页面框架
登录页框架12345Tab 标签框架
工单审批
其它可选应用操作类界面框架首页视觉设计-1示例Logo ：
可放置logo+门户网名称Tab 标签：使用浏览器打开新窗口的形式展现。

导航菜单：1.放置导航内容，如果导航内容过多可考虑出现上下滚动条，显示全部内容。

点击导航按钮可跳转到相应界面中。

2.可设置收起展开导航菜单。

快捷菜单入口：
放置经常使用的功能按钮、平台帮助按钮、设置按钮、搜索按钮等
内容：
可根据实际内容灵活增减模块。

在此模块大小不做规范，可根据实际需求灵活调整。

原则上横向模块不要超过4个。

门户浏览类页面框架
应用操作类页面框架登录页框架12345Tab 标签框架
工单审批
其它可选应用操作类界面框架首页设计规范-2Logo 头部内容
高60px Logo 头部：1.左侧可放置logo+门户网名称2.右侧可放置平台导航菜单按钮、帮助按钮、设置按钮、搜索按钮等…导航菜单：导航菜单以按钮形式显示，需要使用时点击滑出所有菜单，选择即可跳转到想应页面中，
此滑出菜单也会随之收回到按
钮状态。

内容：可根据实际内容灵活增减模块。

在此模块大小不做规范，可根
据实际需求灵活调整。

原则上
横向模块不要超过4个。

导航菜单按钮其他按钮门户浏览类页面框架
应用操作类页面框架
登录页框架12345Tab 标签框架
工单审批
其它可选应用操作类界面结构首页视觉设计-2示例Logo 头部：1.左侧可放置logo+门户网名称2.右侧可放置平台导航菜单按钮、帮助按钮、设置按钮、搜索按钮等导航菜单：导航菜单以图标按钮形式显示，需要使用时点击滑出所有菜单，选择即可跳转到相应页面中，此滑出菜单也会随之收回到按钮状态。

内容：
可根据实际内容灵活增减模块。

在此模块大小不做规范，可根据实际需求灵活调整。

原则上横向模块不要超过4个。

门户浏览类页面框架
应用操作类页面框架登录页框架12345Tab 标签框架
工单审批
框架设计细节规范内容框架设计门户浏览类页面框架
应用操作类页面框架
登录页框架
12
345Tab 标签框架
工单审批
滑入相应的tab ，相对应的内容随之切换查看，点击某tab 确定切换内容。

1.框架Tab 标签外部框高度40px ，Tab 标签框高度30px ；最新打开的标签在首页后第一个显示，便于查看（打开的内容不会被新打开的标签替换，可以保留已经获取的数据和操作不受其他页面干扰）。

2.当标签横向显示过多时，最初打开的标签依次隐藏起来，需要时点击此处下拉菜单，选择即可展示。

3.鼠标滑入图标变为红色，点击全部关闭，此处有可能误操作，点击此按钮时，弹出提示层，是否要确定全部关闭，确定关闭，取消放弃关闭。

4.模块tab 标签高度40px ，左右留白10～20px ，长度自适应，字符不多于8个（除特殊长字符可灵活使用）。

5.模块内tab 标签高度40px ，左右留白10～20px ，长度自适应，字符不多于8个（除特殊长字符可灵活使用）。

框架tab
模块tab
模块内tab
tab 标签框架规范门户浏览类页面框架
应用操作类页面框架登录页框架12345Tab 标签框架工单审批
1. 框架tab 高30px ：分默认状态和选中状态，有关闭按钮，可随时关闭内容，模块的宽度不做具体要求，但文字居两侧位置不得少于20px ，上下居中，圆角2px 。

默认：字体大小14px #666。

选中：15px #0084cf bold 背景色与大背景色相同，边线色值与文字色值#0084cf 相同，无下边线，这样就与下方内容形成一个整体的效果。

2. 模块tab 高40px ：默认状态下第一个为选中状态，模块的宽度不做具体要求，但文字居两侧位置不得少于20px ，上下居中。

选中状态下文字大小为：15px #33ACFB bold
默认状态下文字大小为15px #333333
边线同文字#33ACFB 。

3. 模块内tab 高40px ：默认状态下第一个为选中状态，模块的宽度不做具体要求，但文字居两侧位置不得少于20px ，上下居中。

底部滑动条：长度与模块相等，随鼠标滑入其他时滑动到当前模块下方，高度为3px ，色值可根据周围界面效果灵活配色#8DC21F 或者框架tab
模块tab
tab 标签框架视觉规范示例
门户浏览类页面框架
应用操作类页面框架登录页框架1234
5
Tab 标签框架工单审批
框架设计细节规范内容
框架设计
门户浏览类页面框架应用操作类页面框架
登录页框架
1
2
3
45
Tab 标签框架工单审批
内容展示区域
业务处理类工单审批界面框架规范
推荐一种工单布局规范（操作区的所有操作都以弹层形式来处理，从而节约界面空间。

）整体页面操作
页面帮助图标区域
弹层标题区
内容区
历史处理查看列表区域
整体布局分为5个区域：
1.整体页面操作区域
2.内容展示区域
3.
历史处理查看列表区域1
2
5
门户浏览类页面框架
应用操作类页面框架登录页框架1234
5
Tab 标签框架工单审批
业务处理类工单审批类框架设计细节规范
1.工单处理页-页面功能按钮统一放置与页面顶部左对齐，超出宽度范围的按钮采取下拉框方式展现；
2.选择意见审批处理时，以弹层的方式展现：
1）不选择常用意见，点击即可输入字符，此时右上角删除常用意见按钮为不可用状态。

2）当选择常用意见时，此时右上角保存常用意见按钮为不可用状态。

点击删除常用已经即可删除当前选择常用意见（下拉框内容同时删除），下拉框变为请选择默认状态。

3）当选择常用意见时，但又点击编辑时，此时右上角删除常用意见按钮为不可用状态。

4）当选择退回至制单人、退回至上一审批人、转办时，在意见审批处请先填写好意见，然后才能操作。

如果没有填写意见，点击时会弹出一般提示框（请先填写意见）。

如果已经填写意见，点击时要有弹出提示框（提示是否成功等），随着提示框的消失，该审批页面完成操作，页面跳转至我的待办列表页，此审批信息在列表页消失。

5）当点击转办时，弹出选择人窗口，选择成功，跳转至我的待办页面，选择失败回到此处理页面来，调整问题，继续操作。

6）提交按钮点击后，弹出提示框信息，提示是否成功。

选择成功，跳转至我的待办页面，选择失败回到此处理页面来，调整问题，继续操作。

1
2门户浏览类页面
框架
应用操作类页面
框架
登录页框架
1
2
3
4
5
Tab标签框架
工单审批。