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

■┊

行距无eq\o\ac(○,6)正文类

正文文字：14号文字格式=字号14px

┊字体宋体&Arial

┊

细体┊颜色#3