WEBUI设计规范.docx

WEBUI设计规范.docx

《WEBUI设计规范.docx》由会员分享，可在线阅读，更多相关《WEBUI设计规范.docx（12页珍藏版）》请在冰点文库上搜索。

WEBUI设计规范

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

WEBUI设计（流程/界面）规范

一：

UI设计基本概念与流程-3-

1.1目的-3-

1.2范围-3-

1.3概述-3-

二：

UI界面用户体验设计原则与规范-4-

1：

应该遵循的基本原则-4-

2：

页面外观规范-4-

②宽带页面-5-

③自适应-5-

④其他页面-5-

基本结构-6-

页面版式：

-6-

版块基本元素：

所谓基本元素就是将其中任意几块元素拼接起来形成所需网页版块。

-6-

版块组合形式-7-

3：

色彩规范-8-

4：

字体规范-10-

①?

文字格式-10-

②标题类-12-

④功能类-15-

⑤注释类-16-

正文类-16-

5：

图片规范-16-

主要图片-16-

图片规格-17-

6：

表单规范：

-17-

①按纽-17-

②输入框-17-

③文本框-18-

④复选框-18-

⑤菜单-18-

一：

UI设计基本概念与流程

1.1目的

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

1.2范围

本文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。

1.3概述

UI设计包括交互设计，用户研究，与界面设计三个部分。

基于这三部分的UI设计流程是从一个产品立项开始，UI设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。

UI设计师应全面负责产品以用户体验为中心的UI设计，并根据客户（市场）要求不断提升产品可用性。

本规范明确规定了UI设计在各个环节的职责和要求，以保证每个环节的工作质量。

二：

UI界面用户体验设计原则与规范

1：

应该遵循的基本原则

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

2：

页面外观规范

①普通页面②宽带页面③自适应页面?

?

④其他页面

普通页面宽带页面

自适应页面其他页面

①?

普通页面

基本属性：

宽度 750px┊ 背景白色#FFFFFF ┊ 位置居中 ┊ 边距上5px；下20px；左0px；右0px

适用范围：

系统首页正文页面等及其他非宽带产品线

②宽带页面

基本属性：

宽度 900px┊ 背景白色#FFFFFF ┊ 位置居中 ┊ 边距上5px；下20px；左0px；右0px

适用范围：

宽带频道首页和各级页面不包括正文页，及其他宽带产品线

③自适应

基本属性：

宽度 100%┊ 背景白色#FFFFFF ┊ 位置居中 ┊ 边距上5px；下20px；左0px；右0px

适用范围：

论坛聊天等页面

④其他页面

基本属性：

宽度 500px┊ 背景白色#FFFFFF ┊ 位置居中 ┊ 边距上5px；下20px；左0px；右0px

适用范围：

提示报错页面

基本结构：

其中每个模块之间的间距为10px，一般情况下标准头的高度为

页面版式：

版块基本元素：

所谓基本元素就是将其中任意几块元素拼接起来形成所需网页版块。

版块组合形式：

版块元素之间距为8PX同名版块元素间的距离为6PX（例如EEC中EE距离为6EC距离为8PX H2等分版式为6PX）

ABC版块AF版块DC版块EEC版块 

CFC版块     FA版块   CD版式       CEE版式

H1通栏版式      H2等分版式        H3等分版式      H4等分版式

3：

色彩规范

白色正面：

雪花，纯静，清白，和平，轻盈,纯洁、天真、洁净、真理、

反面：

寒冷，受伤，弱点，放弃,冷淡、贫乏，死寂

白色在中华文化中也代表着死亡的颜色。

黑色正面：

夜晚，煤碳，能力，稳定，拘谨，可靠，能力，精致

反面：

害怕，无效，死亡，秘密，阴险，邪恶，病态

灰色正面：

智能，成熟，财富，尊严，贡献,抑制

否定：

混乱，衰变，具体，阴影，沮丧,厌烦

红色正面：

胜利激情爱力精力性别 热情、浪漫

否定：

血战争火危险怒撒旦火焰、暴力、侵略

红色在很多文化中代表的是停止的讯号，用于警告或禁止一些动作

黄色 正面：

明亮、光辉、黄金收获 改革

否定：

懦弱 叛逆嫉妒冒险疾病愚蠢

紫色 正面：

懦弱，叛逆，妒忌，危机，

否定：

疾病,愚蠢创造、谜、忠诚、神秘、稀有

创造、谜、忠诚、神秘、稀有

绿色 正面：

植物，自然，春天，肥沃，希望,安全  自然、稳定、成长、

反面：

衰变，无经验，羡慕，贪欲，逃避现实,坏的运气

在北美文化中，绿色代表的是「行」，与环保意识有关，也经常被连结到有关财政方面的事物。

蓝色正面：

天空，海洋，精神性，定度，和平,个体忠诚、安全、保守、宁静、冷漠、悲伤

否定：

寒冷，沮丧，忧郁，淫秽，神秘,保守主义

4：

字体规范

①文字格式    ②连接样式  

① 文字格式

12号字格式：

字号12px┊字体宋体&Arial┊ 行距21px┊ 粗体&细体┊

14号字格式：

字号14px┊字体宋体&Arial┊ 行距24px┊ 粗体&细体┊

10号字格式：

字号10px┊字体Arial  ┊ 行距无 ┊ 细体  ┊

20号字格式：

字号20 px┊字体 黑体&Arial┊ 行距无 ┊ 细体  ┊

说明：

10号字格式，12号字格式，14号字格式中的数字英文字母为Arial，中文为宋体

② 连接样式

动态链接样式：

 鼠标初始：

颜色#000099 ■ ┊状态下划线 __

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#660066 ■ ┊状态下划线 __

静态连接样式：

鼠标初始：

颜色#自定义□┊状态无

鼠标经过：

颜色#自定义 □ ┊状态下划线 __

鼠标点击：

颜色#自定义 □ ┊状态下划线 __

鼠标结束：

颜色#自定义□┊状态无

重要链接样式：

鼠标初始：

颜色#CC0000 ■ ┊状态下划线 __

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#CC0000 ■ ┊状态下划线 __

应用组合：

①导航类 ②标题类 ③信息类 ④段落类 ⑤功能类 ⑥注释类⑥表单类

①导航类

a 统一导航：

12号文字格式=字号12px┊字体宋体&Arial┊ 细体┊颜色#333333 ■┊ 行距21px

静态连接样式=鼠标初始：

颜色#333333 ■ ┊状态无

鼠标经过：

颜色#333333 ■ ┊状态下划线 __

鼠标点击：

颜色#333333 ■ ┊状态下划线 __

鼠标结束：

颜色#333333 ■ ┊状态无

文字其它说明=关键词句之间用竖杠符号 |间隔

b 本页导航：

12号文字格式=字号12px┊字体宋体&Arial┊ 细体┊颜色#自定义 □┊ 行距21px

静态连接样式=鼠标初始：

颜色#自定义 □ ┊状态无

鼠标经过：

颜色#自定义 □ ┊状态下划线 __

鼠标点击：

颜色#自定义 □ ┊状态下划线 __

鼠标结束：

颜色#自定义□ ┊状态无

文字其它说明=关键词句之间用竖杠符号 |间隔

c 标题导航：

 12号文字格式=字号12px┊字体宋体&Arial┊ 细体┊颜色#自定义 □┊ 行距21px

静态连接样式=鼠标初始：

颜色#000099 ■┊状态无

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#000099 ■ ┊状态无

文字其它说明=关键词句之间用横杠符号 -间隔

d导航指向：

12号文字格式=字号12px┊字体宋体&Arial┊ 细体┊颜色#自定义 □┊ 行距21px

静态连接样式=鼠标初始：

颜色#自定义 □ ┊状态无

鼠标经过：

颜色#自定义 □ ┊状态下划线 __

鼠标点击：

颜色#自定义 □ ┊状态下划线 __

鼠标结束：

颜色#自定义□ ┊状态无

文字其它说明=关键词句之间用大于号符号 >间隔

②标题类

a版块标题：

20号文字格式=字号20px┊字体黑体┊ 细体┊颜色#自定义 □┊ 行距无

静态连接样式=鼠标初始：

颜色#自定义 □ ┊状态无

鼠标经过：

颜色#自定义 □ ┊状态下划线 __

鼠标点击：

颜色#自定义 □ ┊状态下划线 __

鼠标结束：

颜色#自定义□ ┊状态无

文字其它说明=标题文字位置前可选择性修饰符号和图片,默认为无

b一类标题：

14号文字格式=字号14px┊字体宋体&Arial┊ 粗体┊颜色#自定义 □┊ 行距无

静态连接样式=鼠标初始：

颜色#000099 ■ ┊状态无

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#000099 ■ ┊状态无

文字其它说明=标题文字位置前可选择性修饰符号和图片,默认为三角形符号

c二类标题：

14号文字格式=字号14px┊字体宋体&Arial┊ 细体┊颜色#自定义 □┊ 行距24px

静态连接样式=鼠标初始：

颜色#000099 ■ ┊状态无

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#000099 ■ ┊状态无

文字其它说明=无

d三类标题：

12号文字格式=字号12px┊字体宋体&Arial┊ 粗体┊颜色#自定义 □┊ 行距21px

静态连接样式=鼠标初始：

颜色#000099 ■ ┊状态无

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#000099 ■ ┊状态无

文字其它说明=无

e四类标题：

12号文字格式=字号12px┊字体宋体&Arial┊ 细体┊颜色#自定义 □┊ 行距21px

静态连接样式=鼠标初始：

颜色#000099 ■ ┊状态无

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#000099 ■ ┊状态无

文字其它说明=无

f头条标题：

 20号文字格式=字号20px┊字体黑体&Arial┊ 细体┊颜色#自定义 □┊ 行距无

静态连接样式=鼠标初始：

颜色#CC0000 ■ ┊状态无

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#CC0000 ■ ┊状态无

文字其它说明=无

g正文标题：

 20号文字格式=字号20px┊字体黑体&Arial┊ 细体┊颜色#333333 ■ ┊ 行距无

文字其它说明=无

h段落标题：

14号文字格式=字号14px┊字体宋体&Arial┊ 细体┊颜色#333333 ■ ┊ 行距24px

文字其它说明=无

③信息类

a 14项目列表：

 14号文字格式=字号14px┊字体宋体&Arial┊ 细体┊颜色#自定义 □┊ 行距24px

动态连接样式=鼠标初始：

颜色#000099 ■ ┊状态无

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#660066 ■ ┊状态无

文字项目符号 =点状·& 数字01& 无符号

文字其它说明 = 正常默认为点状符号，排行性质为数字符号，词语或者小空间区域可采用无符号

b 12项目列表：

 12号文字格式=字号12px┊字体宋体&Arial┊ 细体┊颜色#自定义 □┊ 行距21px

动态连接样式=鼠标初始：

颜色#000099 ■ ┊状态无

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#660066 ■ ┊状态无

文字项目符号 =点状·& 数字01& 无符号

文字其它说明 = 正常默认为点状符号，排行性质为数字符号，词语或者小空间区域可采用无符号

c 图片列表：

   12号文字格式=字号12px┊字体宋体&Arial┊ 细体&粗体┊颜色#自定义 □┊ 行距无

动态连接样式=鼠标初始：

颜色#000099 ■ ┊状态无

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#660066 ■ ┊状态无

文字其它说明 = 正常图片列表默认为细体，焦点图处采用粗体

④功能类

a普通功能文字：

12号文字格式=字号12px┊字体宋体&Arial┊ 细体┊颜色#000099 ■ ┊ 行距无

静态连接样式=鼠标初始：

颜色#000099 ■ ┊状态无

鼠标经过：

颜色#CC0000 ■ ┊状态下划线 __

鼠标点击：

颜色#CC0000 ■ ┊状态下划线 __

鼠标结束：

颜色#000099 ■ ┊状态无

文字其它说明=以下为各种功能文字应用形态

更多：

更多>>   更多应用于深背景连接连接色彩采用反白,连接颜色可自定义

全文：

[全文]

详细：

[详细]

评论：

[评论]

翻页功能：

[上一页]

⑤注释类

a时间：

12号文字格式=字号12px┊字体宋体&Arial┊ 细体┊颜色#333333 ■ ┊ 行距无

b投票：

12号文字格式=字号14px┊字体宋体&Arial┊ 细体┊颜色#333333 ■ ┊ 行距无

c点击：

12号文字格式=字号14px┊字体宋体&Arial┊ 细体┊颜色#333333 ■ ┊ 行距无             ⑥表单类

d表单文字：

12号文字格式=字号12px┊字体宋体&Arial┊ 细体┊颜色#333333 ■┊ 行距无

正文类

正文文字：

14号文字格式=字号14px ┊字体宋体&Arial ┊ 细体┊颜色#333333 ■┊ 行距无

5：

图片规范

主要图片

比例4:

3┊尺寸种类280*210┊应用焦点图

130*98  ┊ 应用通栏图片列表

120*90  ┊ 应用图文混排图片列表

100*75  ┊ 应用图片列表

77*58  ┊ 应用图片列表

56*41  ┊ 应用图片列表

比例3:

2┊尺寸种类  130*87┊ 应用通栏图片列表

120*80 ┊应用图片列表

比例2:

1┊尺寸种类120*60┊应用广告性图片

图片规格

1、文件小而且画质要相对清晰。

一般300K左右，不能超过500K。

2、图片格式为jpg、gif、png的格式。

3、必须是RGB色的图片，CMYK等标准的无法显示。

6：

表单规范：

1按纽②输入框③文本框④菜单⑤复选框⑥单选框 

1按纽字号12px┊字体宋体&Arial┊细体┊颜色#333333 ■┊行距无

按纽高度20px┊文字居中┊文字边距上4px下5px左20px右20px        

2输入框字号12px┊字体宋体&Arial┊ 细体┊颜色#333333 ■┊行距无

按纽高度20px┊文字居中┊文字边距上3px下5px左3px右3px

3文本框字号12px┊字体宋体&Arial┊ 细体┊颜色#333333 ■ ┊ 行距无按纽高度20px┊文字居中┊文字边距上5px下5px左5px右5px

4复选框  默认单选框  默认

5菜单 字号12px┊字体宋体&Arial┊ 细体┊颜色#333333■ ┊ 行距无

6按纽高度20px┊文字居中┊文字边距上3px下5px左3px右3px