WEBUI设计要求规范

实用文档内蒙古万德系统集成WEBUI设计〔流程/界面〕标准目录TOC\o"1-5"\h\zUI设计根本概念与流程 -3-目的 -3-\o"CurrentDocument"范围 -3-\o"CurrentDocument"概述 -3-\o"CurrentDocument"UI界面用户体验设计原那么与标准 -4-\o"CurrentDocument":应该遵循的根本原那么 -4-\o"CurrentDocument"2:页面外观标准 -4-②宽带页面 -5-③自适应 -5-④其他页面 -5-根本结构 -6-页面版式： -6-版块根本元素： 所谓根本元素就是将其中任意几块元素拼接起来形成所需网页版块. -6-版块组合形式 -7-\o"CurrentDocument"3:色彩标准 -8-\o"CurrentDocument"4:字体标准 -10-①文字格式 -10-②标题类 -12-文案大全实用文档TOC\o"1-5"\h\z④功能类 -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:页面外观标准①普通页面 ②宽带页面③自适应页面 ④其他页面T50px9Q0px普通页面 宽带页面文案大全实用文档100%500px自适应页面 其他页面①普通页面根本属性：宽度 750px；背景白色#FFFFFF；位置居中；边距上5px;下20px;左0px适用范围：系统首页 正文页面等及其他非宽带产品线右0px②宽带页面根本属性：宽度900px；背景白色#FFFFFF；位置居中；适用范围：宽带频道首页和各级页面不包括正文页,及其他宽带产品线边距上5px;下20px;左0px右0px③自适应根本属性：宽度100%；背景白色#FFFFFF；位置居中适用范围：论坛聊天等页面④其他页面根本属性：宽度500px；背景白色#FFFFFF；位置居中适用范围：提示报错页面边距上5px;下20px;左0px边距上5px;下20px;左0px右0px右0px文案大全实用文档根本结构：其中每个模块之间的间距为10px,一般情况下标准头的高度为标准头普通页面内容区标准尾页面版式：版块根本元素：所谓根本元素就是将其中任意几块元素拼接起来形成所需网页版块.I~A_II BircniD II~Il1G254II340II140II 602 II298II 488 II 454文案大全

实用文档H1 H2H3H47503750372246133版块组合形式：版块元素之间距为8PX同名版块元素间的距离为6PX〔但J如EEC中EE距离为6EC距离为8PXH2等分版式为6PxABCAFDCEECABC版块 AF 版块 DC版块EEC 版块CGCF ACD CEE文案大全实用文档CFC版块FA版块CD 版式 CEE＞式H1 通栏版式H2等分版式H3等分版式H4等分版式3:色彩标准白色正面：雪花,纯静,清白,和平,轻盈,纯洁、天真、洁净、真理、反面：严寒,受伤,弱点,放弃,冷淡、贫乏,死寂白色在中华文化中也代表着死亡的颜色.黑色正面：夜晚,煤碳,水平,稳定,拘谨,可靠,水平,精致反面：害怕,无效,死亡,秘密,阴险,邪恶,病态灰色正面：智能,成熟,财富,尊严,奉献,抑制否认：混乱,衰变,具体,阴影,沮丧,厌烦文案大全实用文档红色正面：胜利激情爱力精力性别热情、浪漫否认：血战争火危险怒撒旦火焰、暴力、侵略红色在很多文化中代表的是停止的讯号,用于警告或禁止一些动作黄色正面：明亮、光芒、黄金收获改革否认：懦弱叛逆嫉妒冒险疾病愚蠢紫色正面：懦弱,叛逆,妒忌,危机,否认：疾病,愚蠢创造、谜、忠诚、神秘、稀有创造、谜、忠诚、神秘、稀有绿色正面：植物,自然,春天,肥沃,希望,平安自然、稳定、成长、反面：衰变,无经验,羡慕,贪欲,逃避现实,坏的运气在北美文化中,绿色代表的是「行」,与环保意识有关,也经常被连结到有关财政方面的事物蓝色正面：天空,海洋,精神性,定度,和平,个体忠诚、平安、保守、宁静、冷漠、悲伤否认：严寒,沮丧,忧郁,淫秽,神秘,保守主义文案大全实实用文档4:字体标准①文字格式②连接样式①文字格式12号字格式:字号12px字体宋体&Arialj行距21px粗体&ffl体14号字格式:字号14pxJ字体宋体&Arialj行距24px粗体&ffl体10号字格式:字号10px：字体Arial行距无 j细体20号字格式:字号20px黑体&Arial1行距无 j细体Arial,中文为宋体说明：10号字格式,12号字格式,14号字Arial,中文为宋体②连接样式动态链接样式： 鼠标初始：颜色#000099■1状态下划线文案大全

实用文档鼠标经过：颜色#CC0000■1状态下划线鼠标点击：颜色#CC0000■1状态下划线鼠标结束：颜色#660066■1状态下划线静态连接样式： 鼠标初始：颜色#自定义口【状态无鼠标经过：颜色#自定义口j状态下划线鼠标点击：颜色#自定义口j状态下划线鼠标结束：颜色#自定义口i状态无重要链接样式： 鼠标初始：颜色#CC0000■1状态下划线鼠标经过：颜色#CC0000■1状态下划线鼠标点击：颜色#CC0000■1状态下划线鼠标结束：颜色#CC0000■1状态下划线应用组合：①导航类②标题类③信息类④段落类⑤功能类 ⑥注释类⑥表单类细体细体；颜色#333333■；行距21px细体；颜色#自定义口；行距21px①导航类a统一导航：12号文字格式=字号12px；字体宋体&Arial静态连接样式=鼠标初始：颜色#333333■1状态无鼠标经过：颜色#333333■1状态下划线鼠标点击：颜色#333333■1状态下划线鼠标结束：颜色#333333■；状态无文字其它说明=关键词句之间用竖杠符号 |间隔b本页导航：12号文字格式=字号12px：字体宋体&Arial静态连接样式=鼠标初始：颜色#自定义口【状态无文案大全实用文档鼠标经过：颜色#自定义口j状态下划线鼠标点击：颜色#自定义口j状态下划线鼠标结束： 颜色#自定义口i状态无文字其它说明=关键词句之间用竖杠符号|间隔c标题导航：12号文字格式=字号12px：字体宋体&Arialj细体j颜色#自定义口j行距21px静态连接样式=鼠标初始：颜色#000099■I状态无鼠标经过：颜色#CC0000■1状态下划线鼠标点击：颜色#CC0000■1状态下划线鼠标结束：颜色#000099■；状态无文字其它说明=关键词句之间用横杠符号-间隔d导航指向：12号文字格式=字号12px；字体宋体&Arial；细体；颜色#自定义口；行距21px静态连接样式=鼠标初始：颜色#自定义口【状态无鼠标经过：颜色#自定义口j状态下划线鼠标点击：颜色#自定义口j状态下划线鼠标结束： 颜色#自定义口i状态无文字其它说明=关键词句之间用大于号符号 >间隔②标题类a版块标题：20号文字格式=字号20pxj字体黑体j细体j颜色#自定义口：行距无静态连接样式=鼠标初始：颜色#自定义口【状态无鼠标经过：颜色#自定义口j状态下划线鼠标点击：颜色#自定义口j状态下划线文案大全实用文档鼠标结束： 颜色#自定义口j状态无文字其它说明=标题文字位置前可选择性修饰符号和图片,默认为无b一类标题：14号文字格式=字号14px：字体宋体&Arial j粗体j颜色#自定义口静态连接样式=鼠标初始：颜色#000099■1状态无鼠标经过：颜色#CC0000■1状态下划线鼠标点击：颜色#CC0000■1状态下划线鼠标结束：颜色#000099■；状态无文字其它说明=标题文字位置前可选择性修饰符号和图片,默认为三角形符号行距无c二类标题：14号文字格式=字号14pxj字体宋体&Arial静态连接样式=鼠标初始：颜色#000099■1状态无鼠标经过：颜色#CC0000■1状态下划线鼠标点击：颜色#CC0000■1状态下划线鼠标结束：颜色#000099■；状态无文字其它说明=无细体j颜色#自定义口行距24pxd三类标题：12号文字格式=字号12px：字体宋体&Arial静态连接样式=鼠标初始：颜色#000099■1状态无鼠标经过：颜色#CC0000■1状态下划线鼠标点击：颜色#CC0000■1状态下划线鼠标结束：颜色#000099■；状态无文字其它说明=无粗体；颜色#自定义口行距21pxe四类标题：12号文字格式=字号12px：字体宋体&Arial静态连接样式=鼠标初始：颜色#000099■1状态无鼠标经过：颜色#CC0000■1状态下划线文案大全细体j颜色#自定义口行距21px实用文档鼠标点击：颜色#CC0000■鼠标结束：颜色#000099■文字其它说明=无状态下划线状态无f头条标题： 20号文字格式=字号20px；字体黑体&Arial静态连接样式=鼠标初始：颜色#CC0000■1状态无鼠标经过：颜色#CC0000■1状态下划线鼠标点击：颜色#CC0000■1状态下划线鼠标结束：颜色#CC0000■；状态无文字其它说明=无细体j颜色#自定义口j行距无g正文标题： 20号文字格式=字号20px；字体黑体&Arial文字其它说明=无细体；颜色#333333■；行距无h段落标题：14号文字格式=字号14px：字体宋体&Arial文字其它说明=无细体；颜色#333333■ ；行距24px③信息类a14工程列表：14号文字格式=字号14px：字体宋体&Arialj细体j颜色#自定义口j行距24px动态连接样式=鼠标初始：颜色#000099■1状态无鼠标经过：颜色#CC0000■1状态下划线鼠标点击：颜色#CC0000■1状态下划线鼠标结束：颜色#660066■；状态无文字工程符号=点状•&数字01&无符号文字其它说明=正常默认为点状符号,排行性质为数字符号,词语或者小空间区域可采用无符号文案大全实用文档b12工程列表：12号文字格式=字号12px；字体宋体&Arial；细体；颜色#自定义口；行距21px动态连接样式=鼠标初始：颜色#000099■1状态无鼠标经过：颜色#CC0000■1状态下划线鼠标点击：颜色#CC0000■1状态下划线鼠标结束：颜色#660066■；状态无文字工程符号=点状•&数字01&无符号文字其它说明=正常默认为点状符号,排行性质为数字符号,词语或者小空间区域可采用无符号细体&fi体；颜色#自定义口；行距无c图片列表： 12号文字格式=字细体&fi体；颜色#自定义口；行距无动态连接样式=鼠标初始：颜色#000099■1状态无鼠标经过：颜色#CC0000■1状态下划线鼠标点击：颜色#CC0000■1状态下划线鼠标结束：颜色#660066■；状态无文字其它说明=正常图片列表默认为细体,焦点图处采用粗体④功能类行距无a普通功能文字：12号文字格式=字号12px：字体宋体&Arial；细体；颜色#0000行距无静态连接样式=鼠标初始：颜色#000099■1状态无鼠标经过：颜色#CC0000■1状态下划线鼠标点击：颜色#CC0000■1状态下划线鼠标结束：颜色#000099■；状态无文字其它说明=以下为各种功能文字应用形态更多：更多>> 更多应用于深背景连接连接色彩采用反白,连接颜色可自定义文案大全

实用文档全文：［全文］实用文档全文：［全文］详细：［详细］评论：［评论］翻页功能：［上一页］⑤注释类a时间：12号文字格式=字号12px ：字体 宋体&Arial ； 细体；b投票：12号文字格式=字号14px ：字体 宋体&Arial ： 细体：c点击：12号文字格式=字号14px ；字体 宋体&Arial ； 细体；无 ⑥表单类d表单文字：12号文字格式=字号12px：字体宋体&Arial；细体颜色#333333■颜色#333333■颜色#333333■；颜色#333333行距无行距无行距行距无⑥正文类正文文字：14号文字格式=字号14px字体宋体&Arial细体；颜色#333333■；行距