WEB UI 设计规范

内蒙古万德系统集成有限公司 WEB UI设计( 流程 快递问题件怎么处理流程河南自建厂房流程下载关于规范招聘需求审批流程制作流程表下载邮件下载流程设计 /界面) 规范 编程规范下载gsp规范下载钢格栅规范下载警徽规范下载建设厅规范下载 目录 一：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： 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 单规范：    - 17 - ①    按纽    - 17 - ②    输入框    - 17 - ③    文本框    - 18 - ④    复选框    - 18 - ⑤    菜单    - 18 - 一：UI设计基本概念与流程 1.1 目的 规范公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设计的流程规范化，保证UI设计流程的可操作性。 1.2范围 本文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。 1.3 概述 UI设计包括交互设计，用户研究，与界面设计三个部分。基于这三部分的UI设计流程是从一个产品立项开始，UI设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、 方案 气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载 改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。UI设计师应全面负责产品以用户体验为中心的UI设计，并根据客户（市场）要求不断提升产品可用性。本规范明确规定了UI设计在各个环节的职责和要求，以保证每个环节的工作质量。 二：UI界面用户体验设计原则与规范 1：应该遵循的基本原则 无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 ，做到真正的一致。 2：页面外观规范 ① 普通页面    ② 宽带页面    ③ 自适应页面     ④ 其他页面 普通页面                                   宽带页面 自适应页面                                   其他页面 ① 普通页面 基本属性：宽度 750px ┊ 背景 白色#FFFFFF ┊ 位置 居中 ┊ 边距 上 5px；下 20px；左 0 px；右 0 px 适用范围：系统首页  正文页面等及其他非宽带产品线 ② 宽带页面 基本属性：宽度 900px ┊ 背景 白色#FFFFFF ┊ 位置 居中 ┊ 边距 上 5px；下 20px；左 0 px；右 0 px 适用范围：宽带频道首页和各级页面 不包括正文页，及其他宽带产品线 ③ 自适应 基本属性：宽度 100 % ┊ 背景 白色#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版块  CFC版块             FA版块                      CD版式       CEE版式 H1通栏版式       H2等分版式           H3等分版式        H4等分版式 3：色彩规范 白色 正面：雪花，纯静，清白，和平，轻盈, 纯洁、天真、洁净、真理、 反面：寒冷，受伤，弱点，放弃, 冷淡、贫乏，死寂 白色在中华文化中也代表着死亡的颜色。 黑色 正面：夜晚，煤碳，能力，稳定，拘谨，可靠，能力，精致 反面：害怕，无效，死亡，秘密，阴险，邪恶，病态 灰色 正面：智能，成熟，财富，尊严，贡献, 抑制 否定：混乱，衰变，具体，阴影，沮丧, 厌烦 红色 正面：胜利 激情 爱 力 精力 性别 热情、浪漫 否定：血 战争 火 危险 怒 撒旦火焰、暴力、侵略 红色在很多文化中代表的是停止的讯号，用于警告或禁止一些动作 黄色 正面：明亮、光辉、黄金 收获 改革 否定：懦弱 叛逆 嫉妒 冒险 疾病 愚蠢 紫色 正面：懦弱，叛逆，妒忌，危机， 否定：疾病, 愚蠢 创造、谜、忠诚、神秘、稀有 创造、谜、忠诚、神秘、稀有 绿色 正面：植物，自然，春天，肥沃，希望, 安全  自然、稳定、成长、 反面：衰变，无经验，羡慕，贪欲，逃避现实, 坏的运气 在北美文化中，绿色代表的是「行」，与环保意识有关，也经常被连结到有关财政方面的事物。 蓝色正面：天空，海洋，精神性，定度，和平, 个体 忠诚、安全、保守、宁静、冷漠、悲伤 否定： 寒冷，沮丧，忧郁，淫秽，神秘, 保守主义 4：字体规范 ① 文字格式     ② 连接样式    ① 文字格式 12号字格式： 字号 12 px ┊字体 宋体&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 ■ ┊状态 下划线 __ 静态连接样式： 鼠标初始： 颜色 #自定义 □ ┊状态 无 鼠标经过： 颜色 #自定义 □ ┊状态 下划线 __ 鼠标点击： 颜色 #自定义 □ ┊状态 下划线 __ 鼠标结束： 颜色 #自定义 □ ┊状态 无 重要链接样式： 鼠标初始： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标结束： 颜色 #CC0000 ■ ┊状态 下划线 __ 应用组合：① 导航类 ② 标题类 ③ 信息类 ④ 段落类 ⑤ 功能类  ⑥注释类 ⑥ 表单类 ① 导航类 a 统一导航： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■┊ 行距 21 px 静态连接样式 = 鼠标初始： 颜色 #333333 ■ ┊状态 无 鼠标经过： 颜色 #333333 ■ ┊状态 下划线 __ 鼠标点击： 颜色 #333333 ■ ┊状态 下划线 __ 鼠标结束： 颜色 #333333 ■ ┊状态 无 文字其它说明 = 关键词句之间用竖杠符号 | 间隔 b 本页导航： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 21 px 静态连接样式 = 鼠标初始： 颜色 #自定义 □ ┊状态 无 鼠标经过： 颜色 #自定义 □ ┊状态 下划线 __ 鼠标点击： 颜色 #自定义 □ ┊状态 下划线 __ 鼠标结束： 颜色 #自定义 □ ┊状态 无 文字其它说明 = 关键词句之间用竖杠符号 | 间隔 c 标题导航： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 21 px 静态连接样式 = 鼠标初始： 颜色 #000099 ■┊状态 无 鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标结束： 颜色 #000099 ■ ┊状态 无 文字其它说明 = 关键词句之间用横杠符号 - 间隔 d 导航指向： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 21 px 静态连接样式 = 鼠标初始： 颜色 #自定义 □ ┊状态 无 鼠标经过： 颜色 #自定义 □ ┊状态 下划线 __ 鼠标点击： 颜色 #自定义 □ ┊状态 下划线 __ 鼠标结束： 颜色 #自定义 □ ┊状态 无 文字其它说明 = 关键词句之间用大于号符号 > 间隔 ② 标题类 a 版块标题： 20号文字格式 = 字号 20 px ┊ 字体 黑体 ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 无 静态连接样式 = 鼠标初始： 颜色 #自定义 □ ┊状态 无 鼠标经过： 颜色 #自定义 □ ┊状态 下划线 __ 鼠标点击： 颜色 #自定义 □ ┊状态 下划线 __ 鼠标结束： 颜色 #自定义 □ ┊状态 无 文字其它说明 = 标题文字位置前可选择性修饰符号和图片,默认为无 b 一类标题： 14号文字格式 = 字号 14 px ┊ 字体 宋体&Arial ┊ 粗体 ┊ 颜色 #自定义 □ ┊ 行距 无 静态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无 鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标结束： 颜色 #000099 ■ ┊状态 无 文字其它说明 = 标题文字位置前可选择性修饰符号和图片,默认为三角形符号 c 二类标题： 14号文字格式 = 字号 14 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 24 px 静态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无 鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标结束： 颜色 #000099 ■ ┊状态 无 文字其它说明 = 无 d 三类标题： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 粗体 ┊ 颜色 #自定义 □ ┊ 行距 21 px 静态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无 鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标结束： 颜色 #000099 ■ ┊状态 无 文字其它说明 = 无 e四类标题： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 21 px 静态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无 鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标结束： 颜色 #000099 ■ ┊状态 无 文字其它说明 = 无 f 头条标题： 20号文字格式 = 字号 20 px ┊ 字体 黑体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 无 静态连接样式 = 鼠标初始： 颜色 #CC0000 ■ ┊状态 无 鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标结束： 颜色 #CC0000 ■ ┊状态 无 文字其它说明 = 无 g 正文标题： 20号文字格式 = 字号 20 px ┊ 字体 黑体&Arial ┊ 细体 ┊ 颜色 #333333 ■ ┊ 行距 无 文字其它说明 = 无 h 段落标题： 14号文字格式 = 字号 14 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■ ┊ 行距 24 px 文字其它说明 = 无 ③ 信息类 a 14项目列表： 14号文字格式 = 字号 14 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 24 px 动态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无 鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标结束： 颜色 #660066 ■ ┊状态 无 文字项目符号 = 点状· &  数字01 &  无符号 文字其它说明 = 正常默认为点状符号，排行性质为数字符号，词语或者小空间区域可采用无符号 b 12项目列表： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #自定义 □ ┊ 行距 21 px 动态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无 鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标结束： 颜色 #660066 ■ ┊状态 无 文字项目符号 = 点状· &  数字01 &  无符号 文字其它说明 = 正常默认为点状符号，排行性质为数字符号，词语或者小空间区域可采用无符号 c 图片列表：   12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体&粗体 ┊ 颜色 #自定义 □ ┊ 行距 无 动态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无 鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标结束： 颜色 #660066 ■ ┊状态 无 文字其它说明 = 正常图片列表默认为细体，焦点图处采用粗体 ④ 功能类 a 普通功能文字： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #000099 ■ ┊ 行距 无 静态连接样式 = 鼠标初始： 颜色 #000099 ■ ┊状态 无 鼠标经过： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标点击： 颜色 #CC0000 ■ ┊状态 下划线 __ 鼠标结束： 颜色 #000099 ■ ┊状态 无 文字其它说明 = 以下为各种功能文字应用形态 更多：更多>>    更多应用于深背景连接连接色彩采用反白,连接颜色可自定义 全文：[全文] 详细：[详细] 评论：[评论] 翻页功能：[上一页] ⑤ 注释类 a 时间： 12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■ ┊ 行距 无 b 投票： 12号文字格式 = 字号 14 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■ ┊ 行距 无 c 点击： 12号文字格式 = 字号 14 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■ ┊ 行距 无             ⑥ 表单类 d 表单文字：12号文字格式 = 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■┊ 行距 无 正文类 正文文字：14号文字格式 = 字号 14 px  ┊ 字体 宋体&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 按纽 字号 12 px ┊字体 宋体&Arial┊细体┊颜色 #333333 ■┊行距 无 按纽高度 20px┊文字居中┊ 文字边距 上4px 下5px 左20px右20px         2 输入框 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■┊行距 无 按纽高度 20px┊文字居中┊ 文字边距 上3px 下5px 左3px 右3px 3 文本框 字号 12 px ┊字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333 ■ ┊ 行距 无按纽高度 20px┊文字居中┊ 文字边距 上5px 下5px 左5px 右 5px 4 复选框  默认  单选框  默认 5 菜单 字号 12 px ┊ 字体 宋体&Arial ┊ 细体 ┊ 颜色 #333333■ ┊ 行距 无 按纽高度 20px┊文字居中┊ 文字边距 上3px 下5px 左3px 右3px