关闭

关闭

关闭

封号提示

内容

首页 Web页面设计规范.doc

Web页面设计规范.doc

Web页面设计规范.doc

上传者: xu行舟 2017-09-20 评分 0 0 0 0 0 0 暂无简介 简介 举报

简介:本文档为《Web页面设计规范doc》,可适用于IT/计算机领域,主题内容包含Web页面设计规范编号:版本号:受控状态:作者:分发号:文档修改历史记录文档修改记录日期版本号更改人更改内容文档审核记录日期版本号审核人审核意见目录符等。

Web页面设计规范编号:版本号:受控状态:作者:分发号:文档修改历史记录文档修改记录日期版本号更改人更改内容文档审核记录日期版本号审核人审核意见目录引言目的范围缩略术语参考资料WEB页面框架内容页面框架页面布局布局原则布局要求页面分割页面结构页面展现页面美化页面字体边距表格段落排版FRAME其他页面元素页面风格风格分类页面风格应用WEB页面交互页面元素焦点切换信息填写鼠标交互响应页面信息交互操作结果确认其他规则页面信息提示键盘响应支持WEB页面通用规范一般页面功能新增修改删除第页共页查询取消保存重置返回分页全选一般页面规则默认值必填值界面传递窗口嵌套输入框操作在线帮助功能菜单功能要求快捷键功能快捷键的限制页面的规范性系统易用性输入安全性要求独特性要求多窗口的应用与系统资源页面编程技术使用规范页面元素命名DHTMLX控件FLEX控件页面资源规格说明图标图片多媒体附录基于DHX的CSS规格示例表格CSS示例典型应用的页面示例第页共页引言目的本文用于规范我公司所开发的商业软件中对于web页面的设计工作明确在设计中所要遵循的准则和方法web页面中各个元素的规格要求确保所实现的web页面在风格、结构和功能上的统一提升商业软件的外在品质。范围本规范适用于公司所有的商业软件产品。缩略术语DHMLX:web页面的UI控件参考资料WEB页面框架内容页面框架WEB的页面框架是指构成完整页面的组织结构。通常是由以下三部分构成:HeadMainFoot有些时候出于布局的需要在“Head”下面还会加上用于页面功能导航的“Menu”。如图:图第页共页页面布局布局原则对于WEB应用来说页面布局是和web应用的功能区相对应的并且对于页面中各个部分之间的切分比例也需要遵守一定的规则。页面布局的设计首先需要考虑用户在浏览web页面时视觉流向上的要求:图从视觉流向上看用户首先看到的是页面“Head”部分的左面通常那里是标识这个WEB应用的Logo然后是陈列WEB应用主要功能的“Menu”来用于页面导航接下来用户将看的是处于页面左侧的“sidebar”通常这里也是用于页面功能导航的和“Menu”出的选择相呼应这里的内容可以通过类似树状结构的方式展示更为详细的功能接下来是处于页面中心位置的内容部分最后用户的视线落在WEB页面的底部。布局要求页面分割以上面图示的布局方式为例按照通常web页面设计时所遵循的方法并结合黄金分割比例的方法:,首先将页面按照*的方式进行分割如下图:第页共页,在高度方向上对上部区域按照黄金分割的方法分出head和menu的区域,在宽度方向上对中部左边区域按照黄金分割的方法分出sidebar的区域剩下的空间留给content区域,在高度方向上对下部区域按照黄金分割的方法分出foot的区域页面结构页面的布局中各个区域大小的定义方式是不同的请见下图:图在页面布局中对各个功能区域的切分是按照“像素”和“比例”方式来进行的以*的分辨率做为基准其中:,Head区域宽度是按照比例方式设置的宽度按照设置高度采用所占的固第页共页定像素值来确定的一般占,px如果有menu区则调整为,px,Menu区域和“head”的配置要求是一样的宽度按照设置高度结合“head”的高度设置来确定一般占,px,Sidebar区域宽度是结合与“content”之间的黄金切分比例按照固定像素的方式确定的一般占,px高度是按照比例方式来设置的,Content区域高度和宽度方向布局都是按照比例方式来设置的,Foot区域宽度按照设置高度采用所占的固定像素值来确定的一般占,px页面展现对于页面布局来说除了上述要求外还需要考虑如下要求:,能自适应*、*两种分辨率,界面层次不超过层,默认窗口设置下不应出现水平、垂直滚动条,当界面内容超出显示区域时以浮动层的形式显示还有对于用户的感官而言屏幕对角线相交的位置是用户直视的地方而页面正上方四分之一处为易吸引用户注意力的位置所以在放置页面时要注意利用这两个位置。要求:,父页面或主页面的中心位置应该设计在对角线焦点附近,子页面的位置应该靠近主窗体的左上角或正中,需要多个子页面弹出时应该依次向右下方偏移以显示窗体出标题为宜,在页面上方四分之一处放置用户的logo、主要功能导航和一些系统操作功能页面美化界面应该大小适合美学观点感觉协调舒适能在有效的范围内吸引用户的注意力。建议和要求:,长宽接近黄金点比例切忌长宽比例失调、或宽度超过长度,布局要合理不宜过于密集也不能过于空旷合理的利用空间,同一页面上的按钮大小应该一致不同页面的按钮大小尽量相近按钮上忌用太长的名称,按钮的大小要与界面的大小和空间要协调,避免空旷的界面上放置很大的按钮,放置完控件后界面不应有很大的空缺位置,字体的大小要与界面的大小比例协调通常使用的字体px,前景与背景色搭配合理协调反差不宜太大主色要柔和最好少用深色如大红、大绿等可以借用Windows界面色调,大型系统常用的主色有"#EEE"、"#EFEFEF"、"#CCC"等,界面风格要保持一致字的大小、颜色、字体要相同需要艺术处理或有特殊要求的地方建议使用图片表现,如果窗体支持最大化或放大时窗体上的控件也要随着窗体而缩放切忌只放大窗体而忽略控件的缩放,系统对话框页面不应该支持缩放即右上角只有关闭功能第页共页,通常父窗体支持缩放时子窗体没有必要缩放,如果能给用户提供自定义界面风格则由用户自己选择颜色、字体等页面字体页面字体属性的设置在相应的CSS中进行定义页面文字编码要求是在规定字体属性时需要设置:中文采用“宋体”英文采用“Arial”或“verdana”CSS文件中的fontfamily里面必须保证有“宋体”。对于页面属性中字体大小的设置需要内容的不同级别来设置通常:,“Head”中标题文字px,“Menu”中的导航文字px,“Sidebar”中的文字px,“Content”中的正文px或px标题,“foot”中的文字px或px有关页面字体属性的具体设置参见附录中的CSS示例。边距WEB页面和其中的表格都应该设定边距避免页面元素紧贴边沿的情况发生最小边距值为“px”默认边距值应在CSS中设定。例如:图表格对于表格其属性的设置同样在CSS中进行定义。表格使用最多的情况是显示装在的数据由于有很多表项需要在页面中完整显示因此原则上对于表格各个单元格宽度的设置应采用百分比方式来进行这样表格不仅能够将数据完整地显示而且还能够适应不同分辨率的情况。但由于表格中存在不定长的内容所以为了保证表格的宽度不被挤变形对于不定长的内容可固定显示宽度当超出此显示宽度后以„„显示光标停留后详细内容再在浮动层显示。其他要求:第页共页,表头中的数据应水平垂直居中对齐。,表单中内容如为定长则为居中显示如为不固定的中英文内容则为居左显示如为数值形式则为居右显示。,表格的表头应采用不同于表格内容的背景颜色并要求对比明显,表格表头的文字应采用加粗或不同于表格内容的字体,表格中相邻行需要通过两种有一定对比差异的浅色作为背景色,各个页面的表格边框风格需要统一建议设置细边框,表格中存在的链接文字需要采用不同于其他内容的颜色或字体显示,对于表格的嵌套尽量控制在三层以内并且禁止使用表格来进行页面布局。有关表格属性的具体设置请参见附录中的CSS示例。段落排版在WEB页面中“content”部分是展示页面正文的区域当段落是由纯文字构成时:,正文一行字数最好不超过首页的标题文字以字为佳。,行距建议用百分比来定义常用的两个行距的值是lineheight:或,对于一段文字尤其是正文部分保证左右至少有px的留白便于用户换行时不受到干扰。,文字和背景对比要足够明显保证最弱文字的可读性。在使用<p>标签需要对应有<p>并且要求设置margin使得段落文字的前后左右能够有合适的空白区。可在CSS中设置:p{margin:pxpxpxpx}分别定义了上、右、下、左的空白区大小。首行缩进时禁止使用“”而是在CSS中设置textindent例如:p{textindent:em}。在一段完整的文字中请尽量不要使用<br>来人工干预分段对于margin为了防止由于采用默认的margin值而导致的页面排版问题推荐所有标签定义为:margin:当采用竖排文字时推荐使用writingmode。通过设置两个属性值:lrtb和tbrl并结合direction完成文字竖排lrtb指的是文字方向为:左右、上下tbrl是指上下、右左。FrameFrame是能够将一个WEB页面切分成几个窗口来显示WEB内容的一种页面设计方法切分后的每个窗口内容是通过指向URL来实现的。Frame的标记是<FRAMESET><FRAME>而在使用Frame时通常需要将其放在网页入口的html文件中而不必放入<BODY>标记。<FRAMESET>是用以划分框窗的每一框窗由一个<FRAME>标记所标示<FRAME>必须在<FRAMESET>范围中使用。其中:,<FRAMESET>称框架标记用以宣告HTML文件为框架模式并设定视窗如何分割。第页共页,<FRAME>则只是设定某一个框窗内的参数属性。使用Frame分割页面需要按照节“页面布局”中所描述的要求来设置<FRAMESET>和<FRAME>以完成对页面各个部分合理的切分。对于<FRAMESET>和<FRAME>中的一些属性设置要求有:,Name表示Frame的名字必须有定义,Framespacing表示各个Frame之间空白距离要求设置为非零通常设置为,Noresize表示是否允许使用者通过拖拉改变Frame的大小要求在Frame设置此参数,Scrolling表示是否要显示卷轴要求设置为“AUTO”,Marginhight表示框架高度部分边缘所保留的空间要求设置,,Marginwidth表示框架宽度部分边缘所保留的空间要求设置,其他页面元素,按钮要求按钮上显示的文字能够准确表达功能含义,单选框默认选择一个和所关联的文字的间距应该在px,多选框默认全不选所关联的文字应该能够准确表达选择的含义和控件的间距应该在px,下拉框给出默认选择并且默认选择显示出“默认全部”或“请选择”等文字提示,图片默认为显示出代表图片文件的图标或是缩略图,多媒体默认为显示出代表多媒体文件的图标有关这些页面元素的具体属性设置请参见附录中的CSS示例。页面风格WEB页面的风格是指WEB页面通过对页面布局、字体、配色、页面元素排列的融合来传达给用户的、含有主观感受。页面风格的选取除了需要考虑一般的用户感受外还需要将用户所在环境的因素考虑进去从而形成符合特定用户要求的页面风格。风格分类Web应用的页面风格内容包括:,布局不仅仅是系统入口主页的布局而是所有页面,颜色按照风格主题来设置页面中包含的颜色及其表现,页面元素按照风格主题来确定页面元素的大小、形状和交互响应行为,图标按照风格主题来定制表示各类功能的图标第页共页,提示窗口是页面交互的主要形式需要按照风格主题来定制具体风格分类的定义待定。页面风格应用具体风格应用的定义待定。WEB页面交互页面元素焦点切换在WEB页面中为了提高和用户之间的互动需要在各类页面元素获得焦点和失去焦点的时候在如下场景中采用页面交互的方法有:信息填写对输入信息验证:如果需要校验填写内容则需要在输入框失去焦点时进行数据有效性的判断并在输入框后给出提示。如图:对输入信息提示:在一组需要被验证的数据填写时如果有必填项需要在输入框后面给出标志并对填入的规则加以说明。如图:如果输入框内有默认的文字当输入框获得焦点时需要将输入框内的文字处于全选状态。如图:鼠标交互响应对鼠标在页面中所产生的事件进行处理当页面元素获得焦点、被点击、失去焦点时第页共页则需要控件本身在颜色、大小或形状上的变化给与响应亦可以添加声音响应。下面是各种情况下的鼠标交互示例:例如:按钮:按钮颜色改变、或形状或字体改变如图:鼠标放上获得焦点前:鼠标放上获得焦点后:链接:字体变粗、或字体变色、或背景变色如图:鼠标放上获得焦点前:鼠标放上获得焦点后:页签:获得焦点的页签颜色变化或页签的大小和里面的字体变大如图:鼠标放上获得焦点前:鼠标放上获得焦点后:输入框输入框的边框变色鼠标放上获得焦点前:鼠标放上获得焦点后:表格表格中行的底色改变鼠标放上获得焦点前:鼠标放上获得焦点后:等待响应:当由于载入大量数据等原因使得用户需要等待一定时间需要将鼠标指针的形状变成时间漏斗的形状、或其他表示鼠标不可操作的样子来提醒用户等待。如图:第页共页对于我们所使用的有关鼠标交互响应的规范将结合页面风格在附录中给出说明。页面信息交互操作结果确认在提交数据或是载有数据的页面关闭或其他需要和用户进行确认交互的场景需要软件能够提供一个以弹出页面形式要求用户确认执行结果的对话框包含的情况有:,提示确认输入信息正确:弹出对话框并将已填写的内容列出要求用户确认内容的正确性给出“确定”和“取消”的选择按钮,提示确认数据更改是否保存:弹出对话框提示当前页面内容已经改变要求用户确认是否保存更改的信息给出“是”和“否”的选择按钮,提示确认当前页面的跳转:弹出对话框提示用户正在跳转到另外一个页面要求用户确认离开当前页面给出“是”和“否”的选择按钮,确认删除数据内容:弹出对话框提示用户删除了当前选择的内容要求用户确认是否继续删除的操作给出“确定”和“取消”的选择按钮其他规则对于信息交互过程中其他需要遵守的规则有:,重要的命令按钮与使用较频繁的按钮要放在界面上相对固定的位置上,容易引起操作错误或使程序退出、关闭的按钮应不醒目放在不易点位置,与正在进行的操作无关的按钮应该加以屏蔽例如:按钮背景为灰色显示,对可能造成数据无法恢复的操作必须提供确认信息给用户放弃选择的机会,非法的输入或操作应有足够的提示说明,对运行过程中出现问题而引起错误的地方要有提示让用户明白错误出处避免形成无限期的等待页面信息提示在web页面提供的功能中很多情况需要系统发送一些必要的提示信息到页面显示给用户这些信息的分类有:,警告信息,禁止信息,操作执行成功信息,操作执行失败信息,错误信息第页共页,帮助信息,提示信息这些信息在当前页面或弹出页面上显示。如果采用弹出对话框的形式对话框的页面结构如下图:标题区图标区提示信息区按钮按钮,标题区:简要给出此次提示信息的性质例如:警告:操作非法~,图标区:给出和此次提示信息性质匹配的图标,提示信息区:给出此次提示信息的具体内容,按钮区:给出供用户进行选择的按钮对于对话框的背景颜色要求和系统的整体风格选取的颜色一致而右上角的操作区只保留关闭一个可操作功能最小化和最大化的功能将不显示。对应采用的图标的图例为:警告信息:禁止操作信息:操作成功信息:第页共页操作失败信息:错误信息:帮助信息:提示信息:提示信息内容要求:,提示信息中如有标点符号统一为全角符号,提示信息如有主语统一为您‘,在重要或复杂的操作成功后给予提示信息,有后续操作的操作在成功后也需给予提示信息说明当前的状态。,提示信息不宜太长宽度应不超过当前窗口宽度的当超过此比例时请视具体情况进行换行,当功能按钮为图片按钮时光标停留需给予浮动提示信息键盘响应支持由于用户有时候还需要结合键盘进行操作所以页面需要提供一些简单的键盘支持例如:“Esc”、“Enter”、“Tab”“Space”系统应对这些键值作出响应。其中:,Esc“取消”当前操作第页共页,Enter“确认”或进行下一步操作或提交,Tab、或Shifttab能够在页面元素中按照一定次序切换焦点遵循从左上至右下的原则其他快捷键的支持需要根据项目的实际情况来定义。WEB页面通用规范一般页面功能新增当新增一条或多条记录要求:,新增的记录必须排在首页首行。,提交失败后必须保存用户已经输入的内容以便再次提交。,提交时需对主要标识字段进行重复值、空值(空格)判断。,新增内容提交失败后须保留用户修改的内容以便再次修改提交,需对主标识字段进行重复值、空值(空格)判断修改当进行单条或多条记录的修改时要求:,如界面存在复选按钮勾选多条记录进行修改时每次只能对一条记录进行修改默认修改内容为第一条的提示信息,修改后加载的内容应为的实际内容而不再为默认值,修改完成后须回到原记录所在位置且刷新显示修改后的值,修改内容提交失败后须保留用户修改的内容以便再次修改提交,在查询条件下修改后返回如不满足查询条件则不显示,需对主标识字段进行重复值、空值(空格)判断删除当删除一条或多条记录要求:,必须有确认删除的提示信息,删除成功后刷新不显示删除的记录,删除成功后返回到原记录所在页面如果原记录所在页不存在时则返回上一页。,当被删除的记录与其他记录存在关联时请示需求界面给予不允许删除、更明细提示等信息查询当按照条件查询时要求:,每次查询后定位到原页面,每次查询后保留当前查询条件第页共页,当查询条件较多时需要配置“重置”按钮提供使用,当未查询到任何记录时需给予未查找到相关记录的提示信息,除了用户明确要求不需要外需提供模糊查询及组合查询功能取消当进行取消当前修改并返回时要求:,在数据量较多的页面中当进行了修改后取消请给予提示,取消返回到原记录所在状态保存当保存内容时要求:,当保存所费的时间较长时需给出保存进度界面的提示,须控制不可以重复保存重置重置是恢复变更前的状态要求:,必须保证重置后与初始进入此页面时一致性返回当需要返回前一个页面时要求:,当从一个页面点击按钮或链接进入子页面时子页面必须提供返回按钮分页当需要分页显示数据时要求:,当对查询结果进行分页时分页的同时需要能够执行查询功能,当页数较多时允许输入具体页数进行查询全选当在一个页面上存在多个同类内容的复选框时需要提供全选的功能要求:,勾选全选则选中当前页面所有记录,去掉当前页面某个记录的勾选则全选也去掉勾选,刷新页面后自动去掉已勾选的记录及全选的勾选一般页面规则默认值各个页面都会存在默认值。要求:第页共页,打开一个新界面光标默认停留在第一个待输入的文本框中,当选择下拉框不存在默认值时则默认为―请选择‖当存在默认值时请显示默认值必填值对界面必填项的要求:,界面的必填项必须以红色*号标识出来。,当必填项没有填写时可在光标准备移走时在文本框后以―请输入‖红色文字标识,当界面排列较紧时如果必填项没有填可以通过弹出信息的方式来提示或者光标移走时弹出或者最后提交时弹出。但确定后必须停留在第一个待输入的文本框中界面传递对于程序执行过程中会出现父窗体与子窗体参数同步传递的情况规则是:,当父窗体与子窗体都存在同样的查询条件时父窗体已输入的查询条件必须被带到子窗体中,当子窗体的任何操作影响了父窗体的数据时子窗体关闭返回但必须刷新父窗体的数据,关闭父窗体必须连同子窗体一同关闭,子窗体的大小不能超过父窗体且不要遮住父窗体的主要信息窗口嵌套针对多层页面窗口的嵌套情况要求:,如果存在多层嵌套页面窗口每层页面窗口弹出时都自动往右下移动一点点以保证不遮盖上层页面窗口标题为准,页面窗口嵌套层次最好不超过层输入框操作对于输入框操作的限制规则是:,只允许输入数字的输入框需要控制其它字符的输入或在输入非法值时给予提示或在输入框内不再捕获非法值,只允许输入日期、时间的输入框需要通过格式化方式约束输入而不是输入非法值后给出提示,当输入的内容达到了字段的长度限制时不显示新输入的的数值并提示不允许再输入而不是保存后自动截断,在线帮助功能系统应该提供详尽而可靠的在线帮助文档在用户使用产生迷惑时可以自己寻求解决方法。第页共页要求:,帮助文档中的性能介绍与说明要与系统性能配套一致,更新系统版本时对作了修改的地方在帮助文档中要做相应的修改,操作时要提供及时调用帮助的快捷方式常用F,在界面上即时调用帮助时应该能够及时定位到与该操作相对应的帮助位置也就是说帮助要有即时的针对性,最好提供目前流行的联机帮助格式或HTML帮助格式,用户可以用关键词在帮助索引中搜索所要的帮助当然也应该提供帮助索引,如果没有提供软件书面的帮助文档最好能够有打印帮助的功能,在帮助中应该提供我们的技术支持方式一旦用户难以自己解决可以方便的寻求新的帮助方式菜单功能要求菜单是界面上最重要的元素菜单位置按照按功能来组织。要求:,菜单通常采用―常用主要次要工具帮助‖的位置排列符合Windows风格的要求,常用的有―文件‖、―编辑‖―查看‖等需要系统有这些选项,下拉菜单要根据菜单选项的含义进行分组并切按照一定的规则进行排列用横线隔开,一组菜单的使用有先后要求或有向导作用时应该按先后次序排列,没有顺序要求的菜单项按使用频率和重要性排列常用的放在开头不常用的靠后放置重要的放在开头次要的放在后边,如果菜单选项较多应该采用加长菜单的长度而减少深度的原则排列,菜单深度一般要求最多控制在三层以内,对常用的菜单要有快捷命令方式组合原则见,最好能够对和正在进行的操作无关的菜单项能够屏蔽也可采用动态加载方式即只有需要的菜单才显示,菜单前的图标不宜太大与和相应的字高保持一致,主菜单的宽度要接近字数最好不应多于四个,主菜单数目不应太多最好为单排布置快捷键功能在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户操作得更快一些在Windows及其应用软件中的快捷键功能大多是一致的可以根据实际情况考虑实现。要求:,面向事务的组合有:CtrlD删除、CtrlF寻找、Ctrl–H替换、CtrlI插入、CtrlN新记录、CtrlS保存、CtrlO打开,列表:CtrlR、CtrlG定位CtrlTab下一分页窗口或反序浏览同一页面控件,编辑:CtrlA全选CtrlC拷贝CtrlV粘贴CtrlX剪切CtrlZ撤消操作CtrlY恢复操作,文件操作:CtrlP打印CtrlW关闭第页共页,系统菜单:AltA文件AltE编辑AltT工具Alt,W窗口Alt,H帮助。,MSWindows保留键:CtrlEsc任务列表CtrlF关闭窗口AltF结束应用AltTab下一应用Enter缺省按钮确认操作Esc取消按钮取消操作ShiftF上下文相关帮助,按钮中:可以根据系统需要而调节以下只是常用的组合。AltY确定(是)AltC取消AltN否AltD删除AltQ退出AltA添加AltE编辑AltB浏览AltR读AltW写。这些快捷键也可以作为开发中文应用软件的标准但亦可使用汉语拼音的开头字母快捷键的限制由于IE本身的一些原因需要避免一些不必要的错误故对其进行拦截限制。要求:,在用户没有提供明确需求情况下限制F、IE工具栏、退格键(仅限页面不限输入框)、CtrlN的使用,根据功能需要限制右键菜单的使用页面的规范性通常界面设计都按Windows界面的规范来设计即包含―菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单‖的标准格式可以说:界面遵循规范化的程度越高则易用性相应的就越好。小型软件一般不提供工具厢。规范要求:,常用菜单要有命令快捷方式。,完成相同或相近功能的菜单用横线隔开放在同一位置。,菜单前的图标能直观的代表要完成的操作。,菜单深度一般要求最多控制在三层以内。,工具栏要求可以根据用户的要求自己选择定制。,相同或相近功能的工具栏放在一起。,工具栏中的每一个按钮要有及时提示信息。,一条工具栏的长度最长不能超出屏幕宽度。,工具栏的图标能直观的代表要完成的操作。,系统常用的工具栏设置默认放置位置。,工具栏太多时可以考虑使用工具厢。,工具厢要具有可增减性由用户自己根据需求定制。,工具厢的默认总宽度不要超过屏幕宽度的。,状态条要能显示用户切实需要的信息常用的有:,目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等如果某一操作需要的时间较长还应该显示进度条和进程提示。,滚动条的长度要根据显示信息的长度或宽度能及时变换以利于用户了解显示信息的位置和百分比。,状态条的高度以放置五好字为宜滚动条的宽度比状态条的略窄。,菜单和工具条要有清楚的界限菜单要求凸出显示这样在移走工具条时仍有立体第页共页感。,菜单和状态条中通常使用号字体。工具条一般比菜单要宽但不要宽的太多否则看起来很不协调。右键快捷菜单采用与菜单相同的准则。系统易用性易用性是指页面上的功能遵从惯例例如:按钮名称易懂用词准确并与同一界面上的其他按钮易于区分能望文知意。这样使得用户不用查阅帮助就能知道该页面上的功能并进行相关的正确操作。要求:,打开一个新界面光标默认停留在第一个待输入的文本框中,完成相同或相近功能的按钮放置在一起减少鼠标移动的距离常用按钮要支持快捷方式,按功能将界面划分局域块用Frame框括起来并要有功能说明或标题,界面要支持键盘自动浏览按钮功能即按Tab键的自动切换功能,界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前位置也应放在窗口上较醒目的位置,同一界面上的控件数最好不要超过个多于个时可以考虑使用分页界面显示,分页界面要支持在页面间的快捷切换常用组合快捷键CtrlTab,默认按钮要支持Enter操作即按Enter后自动执行默认按钮对应操作,可写控件检测到非法输入后应给出说明并能自动获得焦点,按钮键的顺序与控件排列顺序要一直目前流行总体从上到下同时行间从左到右的方式,复选框和选项框按选择几率的高底而先后排列,复选框和选项框要有默认选项并支持Tab选择,选项数相同时多用选项框而不用下拉列表框,界面空间较小时使用下拉框而不用选项框,选项数较少时使用选项框相反使用下拉列表框,专业性强的软件要使用相关的专业术语通用性界面则提倡使用通用性词眼输入安全性要求在界面上需要建立一些规则来控制输入的出错几率会大大减少系统因用户人为的错误引起的破坏开发者应当尽量周全地考虑到各种可能发生的问题使出错的可能降至最小例如:当程序出现保护性错误而退出系统会使用户对软件失去信心因为这意味着用户要中断思路并费时费力地重新登录而且已进行的操作也会因没有存盘而全部丢失。因此需要在页面设计时应对输入按照规则进行校验。要求:,排除可能会使程序非正常中止的错误,应当检查用户录入无效的数据,采用相关控件限制用户输入值的种类,当用户面临的选择是两个或多个选一时请采用单选框而当选择的可能再多一些第页共页时可以采用复选框,当选项特别多时可以采用列表框下拉式列表框,确保未经授权或没有意义的操作不能进行,对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽,对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态,对一些特殊符号的输入与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符并提前给出输入提示,对错误操作最好支持可逆性处理如取消系列操作,在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作,对可能造成等待时间较长的操作应该提供取消功能,特殊字符常有'"><,':",",、|,,=)(*^$#!~。还有空格,在读入用户所输入的信息时应根据需要选择是否去掉前后空格例如:有些读入数据库的字段不支持中间有空格但用户切实需要输入中间空格这时要在程序中加以处理独特性要求如果一味的遵循业界的界面标准则会丧失自己的个性在框架符合以上规范的情况下设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用要求:,安装界面上应有单位介绍或产品介绍并有自己的图标,主界面最好是大多数界面上要有公司图标,登录界面上要有本产品的标志同时包含公司图标,帮助菜单的"关于"中应有版权和产品信息,公司的系列产品要保持一致的界面风格如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致多窗口的应用与系统资源设计良好的软件不仅要有完备的功能而且要尽可能的占用最低限度的资源因此在出现多窗口的情况下需要避免下述一些情况。要求:,在多窗口系统中有些界面要求必须保持在最顶层避免用户在打开多个窗口时不停的切换甚至最小化其他窗口来显示该窗口,在主界面载入完毕后自动卸出内存让出所占用的WINDOWS系统资源,关闭所有窗体系统退出后要释放所占的所有系统资源除非是需要后台运行的系统,尽量防止对系统的独占使用第页共页页面编程技术使用规范页面元素命名在使用javaScript来进行页面动态控制编程时需要对程序中的页面元素和功能操作的名称引用进行约定:页头:header外套:wrap页脚:foot内容:content页面主体:main容器:container标题:title当前的:current主导航:mainnav顶导航:topnav子导航:subnav边导航:sidebar左导航:leftsidebar右导航:rightsidebar栏目:column面包屑:breadcrumb(即页面所处位置导航提示)菜单:menu子菜单:submenu菜单内容:menucontent菜单容量:menucontainer按钮:button表单:form页签:tab文章列表:list滚动:scroll提示信息:msg摘要:summary标签:tag标签文字:tagTitle标签内容:tagContent当前标签:tagCurrentcurrentTag搜索范围:range图标:icon当前位置:currentPath第页共页列定义:columnof(三列中的第一列)columnof(三列中的第二列)columnof(三列中的第三列)商标:label旗志:logo标语:banner注释:note搜索:search搜索关键字:keyword登陆:Login注册:regsiter热点:hot新闻:news下载:download打印:print版权:copyright服务:service友情链接:friendlink版权:copyright小技巧:tips栏目标题:title加入:joinus指南:guild服务:service状态:status投票:vote合作伙伴:partner其它相关注意事项一律小写尽量用英文不加中杠和下划线尽量不缩写除非一看就明白的单词DHTMLx控件控件的命名控件的外观属性控件使用规则第页共页Flex控件控件的命名控件的外观属性控件使用规则页面资源规格说明图标图标需要按照用途分类来定义:,通用类,业务相关类,风格类图标应采用矢量图来表示在创建时需要考虑的属性有:,色彩,大小,形状,图案,动作状态建立在统一的资源库中。图片这里所规范的图片是在WEB应用中使用的预置图片需要定义图片的属性:,图片的格式,图片的尺寸,图片的分辨率,图片的内容,图片的表现方式(ps处理的要求),图片的大小建立在统一的资源库中。第页共页多媒体和对图片的要求类似。建立在统一的资源库中。第页共页附录基于DHX的CSS规格示例表格CSS示例典型应用的页面示例第页共页

热点搜索换一换

用户评论(0)

0/200

精彩专题

上传我的资料

每篇奖励 +2积分

资料评价:

/41
0下载券 下载 加入VIP, 送下载券

意见
反馈

立即扫码关注

爱问共享资料微信公众号

返回
顶部