WEB+UI+设计规范.doc

内蒙古万德系统集成有限公司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界面用户体验设计原则与规范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:色彩规范白色正面:雪花,纯静,清白,和平,轻盈,纯洁、天真、洁净、真理、反面:寒冷,受伤,弱点,放弃,冷淡、贫乏,死寂白色在中华文化中也代表着死亡的颜色。黑色正面:夜晚,煤碳,能力,稳定,拘谨,可靠,能力,精致反面:害怕,无效,死亡,秘密,阴险,邪恶,病态灰色正面:智能,成熟,财富,尊严,贡献,抑制否定:混乱,衰变,具体,阴影,沮丧,厌烦红色正面:胜利***爱力精力性别 热情、浪漫否定:血战争火危险怒撒旦火焰、暴力、侵略红色在很多文化中代表的是停止的讯号,用于警告或禁止一些动作黄色 正面:明亮、光辉、黄金收获 改革否定:懦弱 叛逆嫉妒冒险疾病愚蠢紫色 正面:懦弱,叛逆,妒忌,危机,否定:疾病,愚蠢创造、谜、忠诚、神秘、稀有创造、谜、忠诚、神秘、稀有绿色 正面:植物,自然,春天,肥沃,希望,安全  自然、稳定、成长、反面:衰变,无经验,羡慕,贪欲,逃避现实,坏的运气在北美文化中,绿色代表的是「行」,与环保意识有关,也经常被连结到有关财政方面的事物。蓝色正面:天空,海洋,精神性,定度,和平,个体忠诚、安全、保守、宁静、冷漠、悲伤否定