Web开发

首页 » 常识 » 预防 » 第5节web页面设计规范通用规范
TUhjnbcbe - 2025/6/5 21:50:00

一般页面功能新增

当新增一条或多条记录,要求:

  新增的记录必须排在首页首行。  提交失败后必须保存用户已经输入的内容,以便再次提交。  提交时需对主要标识字段进行重复值、空值(空格)判断。  新增内容提交失败后,须保留用户修改的内容,以便再次修改提交;  需对主标识字段进行重复值、空值(空格)判断3.修改

当进行单条或多条记录的修改时,要求:

  如界面存在复选按钮,勾选多条记录进行修改时,每次只能对一条记录进行修改,默认修改内容为第一条的提示信息;  修改后加载的内容应为的实际内容,而不再为默认值;  修改完成后须回到原记录所在位置,且刷新显示修改后的值;  修改内容提交失败后,须保留用户修改的内容,以便再次修改提交;  在查询条件下修改后返回,如不满足查询条件则不显示;  需对主标识字段进行重复值、空值(空格)判断;4.删除

当删除一条或多条记录,要求:

  必须有确认删除的提示信息;  删除成功后刷新,不显示删除的记录;  删除成功后,返回到原记录所在页面,如果原记录所在页不存在时,则返回上一页。  当被删除的记录与其他记录存在关联时,请示需求界面给予不允许删除、更明细提示等信息;5.查询

当按照条件查询时,要求:

  每次查询后定位到原页面;  每次查询后保留当前查询条件;  当查询条件较多时,需要配置“重置”按钮提供使用;  当未查询到任何记录时,需给予未查找到相关记录的提示信息;  除了用户明确要求不需要外,需提供模糊查询及组合查询功能6.取消

当进行取消当前修改并返回时,要求:

  在数据量较多的页面中,当进行了修改后,取消请给予提示;  取消返回到原记录所在状态;7.保存

当保存内容时,要求:

  当保存所费的时间较长时,需给出保存进度界面的提示;  须控制不可以重复保存8.重置

重置是恢复变更前的状态,要求:

  必须保证重置后与初始进入此页面时一致性;9.返回

当需要返回前一个页面时,要求:

  当从一个页面点击按钮或链接进入子页面时,子页面必须提供返回按钮;9.全选

当在一个页面上存在多个同类内容的复选框时,需要提供全选的功能,要求:

  勾选全选,则选中当前页面所有记录;  去掉当前页面某个记录的勾选,则全选也去掉勾选;  刷新页面后,自动去掉已勾选的记录及全选的勾选;2.一般页面规则

      默认值各个页面都会存在默认值。

要求:

  打开一个新界面,光标默认停留在第一个待输入的文本框中;  当选择下拉框不存在默认值时,则默认为“请选择”,当存在默认值时,请显示默认值;  单选按组钮默认值2.表单元素选择

表单元素选择要求主要集中在select,radio:

  性别,5个以下类别列表选择用radio比较合适  部门列表,用select比较合适3.必填值

对界面必填项的要求:

  界面的必填项必须以红色*号标识出来。  当必填项没有填写时,可在光标准备移走时,在文本框后以“请输入”红色文字标识;  当界面排列较紧时,如果必填项没有填,可以通过弹出信息的方式来提示,或者光标移走时弹出,或者最后提交时弹出。但确定后必须停留在第一个待输入的文本框中;4.界面传递

对于程序执行过程中,会出现父窗体与子窗体参数同步传递的情况,规则是:

  当父窗体与子窗体都存在同样的查询条件时,父窗体已输入的查询条件必须被带到子窗体中;  当子窗体的任何操作影响了父窗体的数据时,子窗体关闭返回,但必须刷新父窗体的数据;  关闭父窗体必须连同子窗体一同关闭;  子窗体的大小不能超过父窗体,且不要遮住父窗体的主要信息;5.窗口嵌套

针对多层页面窗口的嵌套情况,要求:

  如果存在多层嵌套页面窗口,每层页面窗口弹出时都自动往右下移动一点点,以保证不遮盖上层页面窗口标题为准;  页面窗口嵌套层次最好不超过3层;6.输入框操作

对于输入框操作的限制,规则是:

  只允许输入数字的输入框需要控制其它字符的输入,或在输入非法值时给予提示,或在输入框内不再捕获非法值;  只允许输入日期、时间的输入框需要通过格式化方式约束输入,而不是输入非法值后给出提示;  当输入的内容达到了字段的长度限制时,不显示新输入的的数值,并提示不允许再输入,而不是保存后自动截断;7.在线帮助功能

系统应该提供详尽而可靠的在线帮助文档,在用户使用产生迷惑时可以自己寻求解决方法。

要求:

  帮助文档中的性能介绍与说明要与系统性能配套一致;  更新系统版本时,对作了修改的地方在帮助文档中要做相应的修改;  操作时要提供及时调用帮助的快捷方式,常用F1;  在界面上即时调用帮助时,应该能够及时定位到与该操作相对应的帮助位置,也就是说帮助要有即时的针对性;  最好提供目前流行的联机帮助格式或HTML帮助格式;  用户可以用关键词在帮助索引中搜索所要的帮助,当然也应该提供帮助索引;  如果没有提供软件书面的帮助文档,最好能够有打印帮助的功能;  在帮助中应该提供我们的技术支持方式,一旦用户难以自己解决可以方便的寻求新的帮助方式;8.菜单功能要求

菜单是界面上最重要的元素,菜单位置按照按功能来组织。

要求:

  菜单通常采用“常用--主要--次要--工具--帮助”的位置排列,符合Windows风格的要求;  常用的有“文件”、“编辑”,“查看”等,需要系统有这些选项;  下拉菜单要根据菜单选项的含义进行分组,并切按照一定的规则进行排列,用横线隔开;  一组菜单的使用有先后要求或有向导作用时,应该按先后次序排列;  没有顺序要求的菜单项按使用频率和重要性排列,常用的放在开头,  不常用的靠后放置;重要的放在开头,次要的放在后边;  如果菜单选项较多,应该采用加长菜单的长度而减少深度的原则排列;  菜单深度一般要求最多控制在三层以内;  对常用的菜单要有快捷命令方式,组合原则见5.2.8;  最好能够对和正在进行的操作无关的菜单项能够屏蔽,也可采用动态加载方式——即只有需要的菜单才显示;  菜单前的图标不宜太大,与和相应的字高保持一致;  主菜单的宽度要接近,字数最好不应多于四个;  主菜单数目不应太多,最好为单排布置;9.快捷键功能

在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户操作得更快一些在Windows及其应用软件中的快捷键功能大多是一致的,可以根据实际情况考虑实现。

要求:

  面向事务的组合有:  Ctrl-D删除、Ctrl-F  寻找、Ctrl  –H替换、Ctrl-I  插入、Ctrl-N  新记录、Ctrl-S  保存、  Ctrl-O打开;  列表:  Ctrl-R、Ctrl-G定位;Ctrl-Tab下一分页窗口或反序浏览同一页面控件;  编辑:  Ctrl-A全选;Ctrl-C  拷贝;Ctrl-V  粘贴;Ctrl-X  剪切;Ctrl-Z撤消操作;Ctrl-Y恢复操作;  文件操作:  Ctrl-P打印;Ctrl-W  关闭;  系统菜单:Alt-A文件;Alt-E编辑;Alt-T工具;Alt-W窗口;Alt-H帮助。  MSWindows保留键:  Ctrl-Esc任务列表  ;Ctrl-F4  关闭窗口;  Alt-F4  结束应用;Alt-Tab  下一应用  ;Enter  缺省按钮/确认操作  ;Esc  取消按钮/取消操作  ;Shift-F1  上下文相关帮助;  按钮中:可以根据系统需要而调节,以下只是常用的组合。Alt-Y确定(是);Alt-C取消;Alt-N  否;Alt-D删除;Alt-Q退出;Alt-A添加;Alt-E编辑;Alt-B浏览;Alt-R读;Alt-W写。这些快捷键也可以作为开发中文应用软件的标准,但亦可使用汉语拼音的开头字母;10.快捷键的限制由于IE本身的一些原因,需要避免一些不必要的错误,故对其进行拦截限制。

要求:

  在用户没有提供明确需求情况下,限制F5、IE工具栏、退格键(仅限页面不限输入框)、Ctrl+N的使用;  根据功能需要,限制右键菜单的使用;11.页面的规范性

通常界面设计都按Windows界面的规范来设计,即包含“菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单”的标准格式,可以说:界面遵循规范化的程度越高,则易用性相应的就越好。小型软件一般不提供工具厢。

规范要求:

  常用菜单要有命令快捷方式。  完成相同或相近功能的菜单用横线隔开放在同一位置。  菜单前的图标能直观的代表要完成的操作。  菜单深度一般要求最多控制在三层以内。  工具栏要求可以根据用户的要求自己选择定制。  相同或相近功能的工具栏放在一起。  工具栏中的每一个按钮要有及时提示信息。  一条工具栏的长度最长不能超出屏幕宽度。  工具栏的图标能直观的代表要完成的操作。  系统常用的工具栏设置默认放置位置。  工具栏太多时可以考虑使用工具厢。  工具厢要具有可增减性,由用户自己根据需求定制。  工具厢的默认总宽度不要超过屏幕宽度的1/5。  状态条要能显示用户切实需要的信息,常用的有:  目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等,如果某一操作需要的时间较长,还应该显示进度条和进程提示。  滚动条的长度要根据显示信息的长度或宽度能及时变换,以利于用户了解显示信息的位置和百分比。  状态条的高度以放置五好字为宜,滚动条的宽度比状态条的略窄。  菜单和工具条要有清楚的界限;菜单要求凸出显示,这样在移走工具条时仍有立体感。  菜单和状态条中通常使用5号字体。工具条一般比菜单要宽,但不要宽的太多,否则看起来很不协调。右键快捷菜单采用与菜单相同的准则。

12.系统易用性

易用性是指页面上的功能遵从惯例,例如:按钮名称易懂,用词准确,并与同一界面上的其他按钮易于区分,能望文知意。这样,使得用户不用查阅帮助就能知道该页面上的功能并进行相关的正确操作。

要求:

  打开一个新界面,光标默认停留在第一个待输入的文本框中;  完成相同或相近功能的按钮放置在一起,,减少鼠标移动的距离,常用按钮要支持快捷方式;  按功能将界面划分局域块,用Frame框括起来,并要有功能说明或标题;  界面要支持键盘自动浏览按钮功能,即按Tab键的自动切换功能;  界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置;  同一界面上的控件数最好不要超过10个,多于10个时可以考虑使用分页界面显示;  分页界面要支持在页面间的快捷切换,常用组合快捷键Ctrl+Tab;  默认按钮要支持Enter操作,即按Enter后自动执行默认按钮对应操作;  可写控件检测到非法输入后应给出说明并能自动获得焦点;  按钮键的顺序与控件排列顺序要一直,目前流行总体从上到下,同时行间从左到右的方式;  复选框和选项框按选择几率的高底而先后排列;  复选框和选项框要有默认选项,并支持Tab选择;  选项数相同时多用选项框而不用下拉列表框;  界面空间较小时使用下拉框而不用选项框;  选项数较少时使用选项框,相反使用下拉列表框;  专业性强的软件要使用相关的专业术语,通用性界面则提倡使用通用性词眼;13.输入安全性要求

在界面上需要建立一些规则来控制输入的出错几率,会大大减少系统因用户人为的错误引起的破坏,开发者应当尽量周全地考虑到各种可能发生的问题,使出错的可能降至最小,例如:当程序出现保护性错误而退出系统,会使用户对软件失去信心,因为这意味着用户要中断思路,并费时费力地重新登录,而且已进行的操作也会因没有存盘而全部丢失。因此需要在页面设计时应对输入按照规则进行校验。

要求:

  排除可能会使程序非正常中止的错误;  应当检查用户录入无效的数据;  采用相关控件限制用户输入值的种类;  当用户面临的选择是两个或多个选一时,请采用单选框,而当选择的可能再多一些时,可以采用复选框;  当选项特别多时,可以采用列表框,下拉式列表框;  确保未经授权或没有意义的操作不能进行;  对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽;  对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态;  对一些特殊符号的输入,与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符,并提前给出输入提示;  对错误操作最好支持可逆性处理,如取消系列操作;  在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作;  对可能造成等待时间较长的操作应该提供取消功能;  特殊字符常有;;,`:[{、\

}]+=)-(_*^%$#

!~,.。?/还有空格;  在读入用户所输入的信息时,应根据需要选择是否去掉前后空格,例如:有些读入数据库的字段不支持中间有空格,但用户切实需要输入中间空格,这时要在程序中加以处理;14.独特性要求

如果一味的遵循业界的界面标准,则会丧失自己的个性.在框架符合以上规范的情况下,设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用

要求:

  安装界面上应有单位介绍或产品介绍,并有自己的图标;  主界面,最好是大多数界面上要有公司图标;  登录界面上要有本产品的标志,同时包含公司图标;  帮助菜单的关于中应有版权和产品信息;  公司的系列产品要保持一致的界面风格,如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致15.多窗口的应用与系统资源

设计良好的软件不仅要有完备的功能,而且要尽可能的占用最低限度的资源,因此在出现多窗口的情况下需要避免下述一些情况。

要求:

  在多窗口系统中,有些界面要求必须保持在最顶层,避免用户在打开多个窗口时,不停的切换甚至最小化其他窗口来显示该窗口;  在主界面载入完毕后自动卸出内存,让出所占用的WINDOWS系统资源;  关闭所有窗体,系统退出后要释放所占的所有系统资源  ,除非是需要后台运行的系统;  尽量防止对系统的独占使用;

1
查看完整版本: 第5节web页面设计规范通用规范