web ui 设计要求规范

《web ui 设计要求规范》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、实用标准内蒙古万德系统集成有限公司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-主要

2、图片-16-图片规格-17-6：表单规范：-17-①按纽-17-②输入框-17-③文本框-18-④复选框-18-⑤菜单-18-文档实用标准一：UI设计基本概念与流程1.1目的规范公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设计的流程规范化，保证UI设计流程的可操作性。1.2范围本文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。1.3概述UI设计包括交互设计，用户研究，与界面设计三个部分。基于这三部分的UI设计流程是从一个产品立项开始，UI设计师就应根据流

3、程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。UI设计师应全面负责产品以用户体验为中心的UI设计，并根据客户（市场）要求不断提升产品可用性。本规范明确规定了UI设计在各个环节的职责和要求，以保证每个环节的工作质量。文档实用标准二：UI界面用户体验设计原则与规范1：应该遵循的基本原则无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。2：页面外观规范①普通页面   ②宽带页面   ③自适应页面  ④其他页面普通页面宽带页面文档实用标准自适应页面其他页面① 普通页面基本属性

4、：宽度 750px┊ 背景白色#FFFFFF ┊ 位置居中 ┊ 边距上5px；下20px；左0px；右0px适用范围：系统首页正文页面等及其他非宽带产品线②宽带页面基本属性：宽度 900px┊ 背景白色#FFFFFF ┊ 位置居中 ┊ 边距上5px；下20px；左0px；右0px适用范围：宽带频道首页和各级页面不包括正文页，及其他宽带产品线③自适应基本属性：宽度 100%┊ 背景白色#FFFFFF ┊ 位置居中 ┊ 边距上5px；下20px；左0px；右0px适用范围：论坛聊天等页面④其他页面基本属性：宽度 500px┊ 背景白色#FFFFFF ┊ 位置居中 ┊ 

5、边距上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

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

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

8、粗体&细体