WEB-UI-设计规范.doc

--------------------------校验:_____________-----------------------日期:_____________WEB-UI-设计规范内蒙古万德系统集成有限公司WEBUI设计(流程/界面)规范目录一:UI设计基本概念与流程 -3-目的 -3- -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设计基本概念与流程规范公司UI设计流程,使UI设计师参与到产品设计整个环节中来,对产品的易用性进行全流程负责,使UI设计的流程规范化,保证UI设计流程的可操作性。本文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。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:色彩规范白色正面:雪花,纯静,清白,和平,轻盈,纯洁、天真、洁净、真理、反面:寒冷,受伤,弱点,放弃,冷淡、贫乏,死寂白色在中华文化中也代表着死亡的颜色。黑色正面:夜晚,煤碳,能力,稳定,拘谨,可靠,能力,精致反面:害怕,无效,死亡,秘密,阴险,邪恶,病态灰色正面:智能,成熟,财富,尊严,贡献,抑制否定:混乱,衰变,具体,阴影,沮丧,厌烦红色正面:胜利***爱力精力性别 热情、浪漫否定:血战争火危险怒撒旦火焰、暴力、侵略红色在很多文化中代表的是停止的讯号,用于警告或禁止一些动作