WEB UI 设计规范.docx

《WEB UI 设计规范.docx》由会员分享，可在线阅读，更多相关《WEB UI 设计规范.docx（15页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、WEB UI 设计规范 内蒙古万德系统集成有限公司 WEB UI设计(流程/界面)规范 目录 一：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：色

2、彩规范. - 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设计流

3、程的可操作性。 1.2范围 本文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。1.3 概述 UI设计包括交互设计，用户研究，与界面设计三个部分。基于这三部分的UI设计流程是从一个产品立项开始，UI设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。UI设计师应全面负责产品以用户体验为中心的UI设计，并根据客户（市场）要求不断提升产品可用性。本规范明确规定了UI设计在各个环节的职责和要求，以保证每个环节的工作质量。 二：UI界面用户体验设计原则与规范 1：应该遵循

4、的基本原则 无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。2：页面外观规范 普通页面 宽带页面 自适应页面 其他页面 普通页面宽带页面 自适应页面其他页面 普通页面 基本属性：宽度750px 背景白色#FFFFFF 位置居中边距上 5px；下 20px；左 0 px；右 0 px 适用范围：系统首页正文页面等及其他非宽带产品线 宽带页面 基本属性：宽度900px 背景白色#FFFFFF 位置居中边距上 5px；下 20px；左 0 px；右 0 px 适用范围：宽带频道首页和各级页面不包括正文页，及其他宽带产品线 自适应 基本属性：宽度100 % 背景白

5、色#FFFFFF 位置居中边距上 5px；下 20px；左 0 px；右 0 px 适用范围：论坛聊天等页面 其他页面 基本属性：宽度 500px 背景白色#FFFFFF 位置居中边距上 5px；下 20px；左 0 px；右 0 px 适用范围：提示报错页面 基本结构：其中每个模块之间的间距为10px，一般情况下标准头的高度为 页面版式： 版块基本元素：所谓基本元素就是将其中任意几块元素拼接起来形成所需网页版块。 版块组合形式：版块元素之间距为8PX同名版块元素间的距离为6PX（例如EEC中 EE距离为6 EC距离为8PX H2等分版式为6PX） ABC版块 AF版块 DC版块 EEC版块

6、CFC版块 FA版块 CD版式 CEE版式 H1通栏版式 H2等分版式 H3等分版式 H4等分版式3：色彩规范 白色正面：雪花，纯静，清白，和平，轻盈, 纯洁、天真、洁净、真理、 反面：寒冷，受伤，弱点，放弃, 冷淡、贫乏，死寂 白色在中华文化中也代表着死亡的颜色。 黑色正面：夜晚，煤碳，能力，稳定，拘谨，可靠，能力，精致 反面：害怕，无效，死亡，秘密，阴险，邪恶，病态 灰色正面：智能，成熟，财富，尊严，贡献, 抑制 否定：混乱，衰变，具体，阴影，沮丧, 厌烦 红色正面：胜利激情爱力精力性别热情、浪漫 否定：血战争火危险怒撒旦火焰、暴力、侵略 红色在很多文化中代表的是停止的讯号，用于警告或禁止

7、一些动作 黄色正面：明亮、光辉、黄金收获改革 否定：懦弱叛逆嫉妒冒险疾病愚蠢 紫色正面：懦弱，叛逆，妒忌，危机， 否定：疾病, 愚蠢创造、谜、忠诚、神秘、稀有 创造、谜、忠诚、神秘、稀有 绿色正面：植物，自然，春天，肥沃，希望, 安全自然、稳定、成长、 反面：衰变，无经验，羡慕，贪欲，逃避现实, 坏的运气 在北美文化中，绿色代表的是行，与环保意识有关，也经常被连结到有关财政方面的事物。 蓝色正面：天空，海洋，精神性，定度，和平, 个体忠诚、安全、保守、宁静、冷漠、悲伤 否定：寒冷，沮丧，忧郁，淫秽，神秘, 保守主义 4：字体规范 文字格式 连接样式 文字格式 12号字格式：字号12 px 字体

8、宋体&Arial 行距21 px 粗体&细体 14号字格式：字号14 px 字体宋体&Arial 行距24 px 粗体&细体 10号字格式：字号10 px 字体 Arial 行距无细体 20号字格式：字号 20 px字体黑体&Arial行距无细体 说明：10号字格式，12号字格式，14号字格式中的数字英文字母为Arial，中文为宋体连接样式 动态链接样式：鼠标初始：颜色 #000099 状态下划线 _ 鼠标经过：颜色 #CC0000 状态下划线 _ 鼠标点击：颜色 #CC0000 状态下划线 _ 鼠标结束：颜色 #660066 状态下划线 _ 静态连接样式：鼠标初始：颜色 #自定义 状态无 鼠

9、标经过：颜色 #自定义状态下划线 _ 鼠标点击：颜色 #自定义状态下划线 _ 鼠标结束：颜色 #自定义 状态无 重要链接样式：鼠标初始：颜色 #CC0000 状态下划线 _ 鼠标经过：颜色 #CC0000 状态下划线 _ 鼠标点击：颜色 #CC0000 状态下划线 _ 鼠标结束：颜色 #CC0000 状态下划线 _ 应用组合： 导航类 标题类 信息类 段落类 功能类注释类 表单类 导航类 a 统一导航： 12号文字格式 = 字号12 px 字体宋体&Arial 细体 颜色 #333333 行距 21 px 静态连接样式 = 鼠标初始：颜色 #333333 状态无 鼠标经过：颜色 #333333 状态下划线 _ 鼠标点击：颜色 #333333 状态下划线 _ 鼠标结束：颜色 #333333 状态无 文字其它说明 = 关键词句之间用竖杠符号 | 间隔 b 本页导航： 12号文字格式 = 字号12 px 字体宋体&Arial 细体 颜色 #自定义 行距 21 px 静态连接样式 = 鼠标初始：颜色 #自定义状态无