《WEBUI设计要求规范.docx》由会员分享，可在线阅读，更多相关《WEBUI设计要求规范.docx（25页珍藏版）》请在三一文库上搜索。
1、实用文档内蒙古万德系统集成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:色彩标准-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:页面外观标准普通页面宽带页面 自适应页面其他页面T50px9Q0px普通页面宽带页面文案大全实用文档100%500px自适应页面其他页面普通页面根本属性：宽度750px ；
4、背景 白色#FFFFFF ； 位置 居中 ； 边距 上5px ;下20px ;左0 px适用范围：系统首页正文页面等及其他非宽带产品线右0 px宽带页面根本属性：宽度 900px ；背景白色#FFFFFF ； 位置居中； 适用范围：宽带频道首页和各级页面 不包括正文页,及其他宽带产品线边距上5px ;下20px ;左0 px右0 px自适应根本属性：宽度 100 % ； 背景 白色#FFFFFF ； 位置 居中 适用范围：论坛聊天等页面其他页面根本属性：宽度 500px ； 背景白色#FFFFFF ； 位置居中 适用范围：提示报错页面边距上5px ;下20px ;左0 px边距上5px ;下2
5、0px ;左0 px右0 px右0 px文案大全实用文档根本结构：其中每个模块之间的间距为10px, 一般情况下标准头的高度为标准头普通页面内容区标准尾页面版式：版块根本元素：所谓根本元素就是将其中任意几块元素拼接起来形成所需网页版块.IA_IIB ircni DIIIl 1 G254 II 340 II 140 II602II 298 II488II454文案大全实用文档H1H2 H3 H4750372246133版块组合形式： 版块元素之间距为8PX同名版块元素间的距离为6PX 但J如EEC中EE距离为6 EC距离为8PX H2等分版式为6PxABCAFDCEECABC版块AF版块DC 版
6、块EEC版块C G C FA CDC E E文案大全实用文档CFC版块FA 版块CD版式CEE式H1通栏版式H2等分版式H3等分版式H4等分版式3:色彩标准白色正面：雪花,纯静,清白,和平,轻盈,纯洁、天真、洁净、真理、 反面：严寒,受伤,弱点,放弃,冷淡、贫乏,死寂白色在中华文化中也代表着死亡的颜色.黑色正面：夜晚,煤碳,水平,稳定,拘谨,可靠,水平,精致反面：害怕,无效,死亡,秘密,阴险,邪恶,病态灰色正面：智能,成熟,财富,尊严,奉献,抑制否认：混乱,衰变,具体,阴影,沮丧,厌烦文案大全实用文档红色正面：胜利 激情爱力精力性别 热情、浪漫否认：血 战争火 危险怒撒旦火焰、暴力、侵略红色在
7、很多文化中代表的是停止的讯号,用于警告或禁止一些动作 黄色 正面：明亮、光芒、黄金 收获 改革否认：懦弱 叛逆嫉妒冒险 疾病 愚蠢紫色 正面：懦弱,叛逆,妒忌,危机,否认：疾病,愚蠢创造、谜、忠诚、神秘、稀有创造、谜、忠诚、神秘、稀有绿色 正面：植物,自然,春天,肥沃,希望,平安 自然、稳定、成长、反面：衰变,无经验,羡慕,贪欲,逃避现实,坏的运气在北美文化中,绿色代表的是行,与环保意识有关,也经常被连结到有关财政方面的事物 蓝色正面：天空,海洋,精神性,定度,和平,个体 忠诚、平安、保守、宁静、冷漠、悲伤 否认：严寒,沮丧,忧郁,淫秽,神秘,保守主义文案大全实用文档4:字体标准文字格式连接样
8、式文字格式12号字格式:字号12 px字体宋体&Arial j行距21 px粗体&ffl体14号字格式:字号14 pxJ字体宋体&Arial j行距24 px粗体&ffl体10号字格式:字号10 px ：字体Arial行距无j细体20号字格式:字号20 px黑体&Arial 1行距无j细体Arial ,中文为宋体说明：10号字格式,12号字格式,14号字格式中的数字英文字母为连接样式动态链接样式：鼠标初始： 颜色#000099 1状态 下划线文案大全实用文档鼠标经过：颜色#CC0000 1状态下划线鼠标点击：颜色#CC0000 1状态下划线鼠标结束：颜色#660066 1状态下划线静态连接样式
9、：鼠标初始：颜色#自定义口【状态 无鼠标经过： 颜色#自定义 口 j状态 下划线鼠标点击：颜色#自定义 口 j状态下划线鼠标结束： 颜色#自定义口 i状态 无重要链接样式：鼠标初始： 颜色#CC0000 1状态 下划线鼠标经过：颜色#CC0000 1状态下划线鼠标点击：颜色#CC0000 1状态下划线鼠标结束：颜色#CC0000 1状态下划线应用组合： 导航类 标题类 信息类 段落类 功能类注释类 表单类细体；颜色#333333 ； 行距21 px细体；颜色#自定义 口； 行距21 px导航类a统一导航：12号文字格式=字号12 px ；字体宋体&Arial 静态连接样式=鼠标初始：颜色#33
10、3333 1状态无 鼠标经过：颜色#333333 1状态下划线 鼠标点击：颜色#333333 1状态下划线 鼠标结束：颜色#333333 ；状态无文字其它说明=关键词句之间用竖杠符号|间隔b本页导航：12号文字格式=字号12 px ：字体宋体&Arial 静态连接样式=鼠标初始：颜色#自定义 口【状态 无文案大全实用文档鼠标经过： 颜色#自定义 口 j状态 下划线鼠标点击：颜色#自定义 口 j状态下划线 鼠标结束：颜色#自定义口 i状态 无文字其它说明=关键词句之间用竖杠符号 |间隔c 标题导航：12号文字格式=字号12 px ：字体 宋体&Arial j 细体j颜色#自定义 口 j 行距21
11、 px 静态连接样式=鼠标初始：颜色#000099 I状态无鼠标经过：颜色#CC0000 1状态下划线鼠标点击：颜色#CC0000 1状态下划线鼠标结束：颜色#000099 ；状态无文字其它说明=关键词句之间用横杠符号 -间隔d导航指向：12号文字格式=字号12 px ；字体 宋体&Arial ； 细体；颜色#自定义 口； 行距21 px 静态连接样式=鼠标初始：颜色#自定义 口【状态 无 鼠标经过： 颜色#自定义 口 j状态 下划线 鼠标点击：颜色#自定义 口 j状态下划线 鼠标结束：颜色#自定义口 i状态 无文字其它说明=关键词句之间用大于号符号 间隔 标题类a版块标题：20号文字格式=字
12、号20 px j字体 黑体j细体j颜色#自定义 口： 行距 无 静态连接样式=鼠标初始：颜色#自定义 口【状态 无鼠标经过： 颜色#自定义 口 j状态 下划线鼠标点击：颜色#自定义 口 j状态下划线文案大全实用文档鼠标结束：颜色#自定义口 j状态 无文字其它说明=标题文字位置前可选择性修饰符号和图片,默认为无b 一类标题：14号文字格式=字号14 px ：字体 宋体&Arialj 粗体j颜色#自定义 口静态连接样式=鼠标初始：颜色#000099 1状态无鼠标经过：颜色#CC0000 1状态下划线鼠标点击：颜色#CC0000 1状态下划线鼠标结束：颜色#000099 ；状态无文字其它说明=标题文
13、字位置前可选择性修饰符号和图片,默认为三角形符号行距无c二类标题：14号文字格式=字号14 px j字体 宋体&Arial 静态连接样式=鼠标初始：颜色#000099 1状态无 鼠标经过：颜色#CC0000 1状态下划线 鼠标点击：颜色#CC0000 1状态下划线 鼠标结束：颜色#000099 ；状态无 文字其它说明=无细体j颜色#自定义 口行距24 pxd三类标题：12号文字格式=字号12 px ：字体 宋体&Arial 静态连接样式=鼠标初始：颜色#000099 1状态无 鼠标经过：颜色#CC0000 1状态下划线 鼠标点击：颜色#CC0000 1状态下划线 鼠标结束：颜色#000099
14、；状态无 文字其它说明=无粗体；颜色#自定义 口行距21 pxe四类标题：12号文字格式=字号12 px ：字体 宋体&Arial 静态连接样式=鼠标初始：颜色#000099 1状态无 鼠标经过：颜色#CC0000 1状态下划线文案大全细体j颜色#自定义 口行距21 px实用文档鼠标点击：颜色#CC0000 鼠标结束：颜色#000099 文字其它说明=无状态下划线状态无f头条标题：20号文字格式=字号20 px ；字体黑体&Arial静态连接样式=鼠标初始：颜色#CC0000 1状态无鼠标经过：颜色#CC0000 1状态下划线鼠标点击：颜色#CC0000 1状态下划线 鼠标结束：颜色#CC00
15、00 ；状态无 文字其它说明=无细体j颜色#自定义 口 j 行距无g正文标题：20号文字格式=字号20 px ；字体黑体&Arial文字其它说明=无细体；颜色#333333 ； 行距无h段落标题：14号文字格式=字号14 px ：字体 宋体&Arial 文字其它说明=无细体；颜色#333333 ； 行距24 px信息类a 14工程列表：14号文字格式=字号14 px ：字体 宋体&Arial j 细体j颜色#自定义 口 j 行距24 px动态连接样式=鼠标初始：颜色#000099 1状态无鼠标经过：颜色#CC0000 1状态下划线鼠标点击：颜色#CC0000 1状态下划线鼠标结束：颜色#660
16、066 ；状态无文字工程符号 =点状 & 数字01 & 无符号文字其它说明 =正常默认为点状符号,排行性质为数字符号,词语或者小空间区域可采用无符号文案大全实用文档b 12工程列表：12号文字格式=字号12 px ；字体 宋体&Arial ； 细体；颜色#自定义 口； 行距21 px 动态连接样式=鼠标初始：颜色#000099 1状态无鼠标经过：颜色#CC0000 1状态下划线鼠标点击：颜色#CC0000 1状态下划线鼠标结束：颜色#660066 ；状态无文字工程符号 =点状 & 数字01 & 无符号文字其它说明 =正常默认为点状符号,排行性质为数字符号,词语或者小空间区域可采用无符号细体&f
17、i体；颜色#自定义 口； 行距无c 图片列表：12号文字格式=字号12 px ；字体 宋体&Arial动态连接样式=鼠标初始：颜色#000099 1状态无鼠标经过：颜色#CC0000 1状态下划线鼠标点击：颜色#CC0000 1状态下划线鼠标结束：颜色#660066 ；状态无文字其它说明=正常图片列表默认为细体,焦点图处采用粗体 功能类行距无a普通功能文字：12号文字格式=字号12 px ：字体 宋体&Arial ； 细体；颜色#000099静态连接样式=鼠标初始：颜色#000099 1状态无鼠标经过：颜色#CC0000 1状态下划线鼠标点击：颜色#CC0000 1状态下划线鼠标结束：颜色#0
18、00099 ；状态无文字其它说明=以下为各种功能文字应用形态更多：更多 更多应用于深背景连接连接色彩采用反白,连接颜色可自定义文案大全实用文档全文：全文详细：详细评论：评论 翻页功能：上一页注释类a时间：12号文字格式=字号12 px：字体宋体&Arial；细体；b投票：12号文字格式=字号14 px：字体宋体&Arial：细体：c点击：12号文字格式=字号14 px；字体宋体&Arial；细体；无表单类d表单文字：12号文字格式=字号12 px ：字体 宋体&Arial ； 细体颜色 #333333 颜色 #333333 颜色 #333333 ；颜色 #333333行距无 行距无 行距行距无
19、正文类正文文字：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左右,不能超过500Ks2、图片格式为jpg、gif、png的格式.3、必须是RGBf
20、e的图片,CMY符标准的无法显示.6:表单标准：按纽输入框文本框 菜单复选框 单项选择框 按纽 字号12 px ：字体 宋体&Arial I细体：颜色#333333 【行距 无按纽高度20px ：文字居中：文字边距 上4px下5px左20px右20px输入框字号12 px ；字体宋体&Arial； 细体；颜色#333333 I行距无按纽高度20px ：文字居中：文字边距 上3px下5px左3px右3px文案大全实用文档文本框字号12 px ：字体宋体&Arial5px 下 5px 左 5px 右 5px复选框 默认单项选择框 默认 菜单 字号12 px ：字体 宋体&Arial按纽高度20px ；文字居中；文字边距； 细体；颜色#333333 ； 细体；颜色#333333H上 3px 下 5px 左 3px 右 3px行距无按纽高度20px ；文字居中；文字边距上行距无文案大全