web界面设计规范有哪些-UI设计规范：如何构建Web端？

易用性规范

2.001常用按钮要支持快捷方式。

2.002完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。

2.003界面要支持键盘自动浏览按钮功能,即按Tab键的自动切换功能。

2.004界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。

2.005分页界面要支持在页面间的快捷切换,常用组合快捷键Ctrl+Tab

2.006默认按钮要支持Enter和选操作,即按Enter后自动执行默认按钮对应操作。

2.007可写控件检测到非法输入后应给出说明并能自动获得焦点。

2.008Tab键的顺序与控件排列顺序要一致,目前流行总体从上到下,同时行间从左到右的方式。

2.009复选框和选项框,按选择几率的高底而先后排列。

2.010复选框和选项框要有默认选项,并支持Tab选择。

2.011界面空间较小时使用下拉框而不用选项框。

2.012选项数较少时使用选项框,相反使用下拉列表框。

2.013根据用户不同采用相应的词语语气语调,如专用软件,可以出现很多专业词汇;用户为儿童:这可以语气亲切和蔼;老年用户则应该成熟稳重。

2.014鼠标为不可点击状态时显示箭头,可点击状态显示手型;系统忙时显示沙漏形状

规范性规范

2.015菜单前的图标能直观的代表要完成的操作。

2.016工具栏要求可以根据用户的要求自己选择定制。

2.017系统常用的工具栏设置默认放置位置。

2.018工具箱要具有可增减性,由用户自己根据需求定制。

2.019状态条要能显示用户切实需要的信息,常用的有、目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等,如果某一操作需要的时间较长,还应该显示进度条和进程提示。

2.020滚动条的长度要根据显示信息的长度或宽度能及时变换,以利于用户了解显示信息的位置和百分比。

2.021状态条的高度以放置五号字为宜,滚动条的宽度比状态条的略窄。

2.022菜单和工具条要有清楚的界限;菜单要求凸出显示,这样在移走工具条时仍有立体感。

2.023工具条一般比菜单要宽,但不要宽的太多,否则看起来很不协调。

帮助规范

2.024帮助文档中的性能介绍与说明要与系统性能配套一致。

2.025打包新系统时,对作了修改的地方在帮助文档中要做相应的修改。

2.026在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。也就是说帮助要有即时针对性。

2.027用户可以用关键词在帮助索引中搜索所要的帮助,当然也应该提供帮助主题词。

2.028如果没有提供书面的帮助文档的话,最好有打印帮助的功能。

2.029在帮助中应该提供我们的技术支持方式,一旦用户难以自己解决可以方便的寻求新的帮助方式。

合理性规范

2.030与正在进行的操作无关的按钮应该加以屏蔽(Windows中用灰色显示,没法使用该按钮)。

2.031对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。

2.032非法的输入或操作应有足够的提示说明。

2.033对运行过程中出现问题而引起错误的地方要有提示,让用户明白错误出处,避免形成无限期的等待。

2.034提示、警告、或错误说明应该清楚、明了、恰当。

2.035提交失败后必须保存用户已经输入的内容,以便修改后再次提交。

美观与协调规范

2.036长宽接近黄金点比例,切忌长宽比例失调、或宽度超过长度。

2.037布局要合理,不宜过于密集,也不能过于空旷,合理的利用空间。

2.038按钮大小基本相近,忌用太长的名称,免得占用过多的界面位置。

2.039按钮的大小要与界面的大小和空间要协调。

2.040避免空旷的界面上放置很大的按钮。

2.041放置完控件后界面不应有很大的空缺位置。

2.042字体的大小要与界面的大小比例协调。

2.043前景与背景色搭配合理协调,反差不宜太大,最好少用深色,如大红、大绿等。如:安全软件,根据工业标准,可以选取黄色,绿色体现环保,蓝色表现时尚、紫色表现浪漫等等,淡色可以使人舒适,暗色做背景使人不觉得累等。

2.044如果使用其他颜色,主色要柔和,具有亲和力与磁力,坚决杜绝刺目的颜色。

2.045界面风格要保持一致,字的大小、颜色、字体要相同,除非是需要艺术处理或有特殊要求的地方。

2.046如果能给用户提供自定义界面风格则更好,由用户自己选择颜色、字体等。

2.047色盲、色弱用户,即使使用了特殊颜色表示重点或者特别的东西,也应该使用特殊指示符。

2.048颜色方案也需要测试,常常由于显示器、显卡的问题,色彩表现每台机器都不一样,应该经过严格测试,不同机器进行颜色测试。

2.049使用统一的语言描述,例如一个关闭功能按钮,可以描述为退出、返回、关闭,则应该统一规定。

菜单设计规范

2.050菜单通常采用"常用--主要--次要--工具--帮助"的位置排列,符合流行的Windows风格。

2.051常用的有"文件"、"编辑","查看"等,几乎每个系统都有这些选项,当然要根据不同的系统有所取舍。

2.052下拉菜单要根据菜单选项的含义进行分组,并按照一定的规则进行排列,用横线隔开。

2.053一组菜单的使用有先后要求或有向导作用时,应该按先后次序排列。

2.054没有顺序要求的菜单项按使用频率和重要性排列,常用的放在开头,不常用的靠后放置;重要的放在开头,次要的放在后边。

2.055如果菜单选项较多,应该采用加长菜单的长度而减少深度的原则排列。

2.056菜单深度一般要求最多控制在三层以内。

2.057对与进行的操作无关的菜单要用屏蔽的方式加以处理,如果采用动态加载方式——即只有需要的菜单才显示——最好。

2.058菜单前的图标不宜太大,与字高保持一直最好。

2.059主菜单的宽度要接近,字数不应多于四个,每个菜单的字数能相同最好。

2.060主菜单数目不应太多,最好为单排布置。

独特性规范

2.061安装界面上应有单位介绍或产品介绍,并有自己的图标。

2.062主界面,最好是大多数界面上要有公司图标。

2.063登录界面上要有本产品的标志,同时包含公司图标。

2.064帮助菜单的"关于"中应有版权和产品信息。

2.065公司的系列产品要保持一直的界面风格,如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。

安全性规范

2.066应当注意尽可能避免用户无意录入无效的数据。

2.067采用相关控件限制用户输入值的种类。

2.068当用户作出选择的可能性只有两个时,可以采用单选框。

2.069当选择的可能再多一些时,可以采用复选框,每一种选择都是有效的,用户不可能输入任何一种无效的选择。

2.070当选项特别多时,可以采用列表框,下拉式列表框。

2.071在一个应用系统中,开发者应当避免用户作出未经授权或没有意义的操作。

2.072对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。

2.073对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态。

2.074对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。

2.075对错误操作最好支持可逆性处理,如取消系列操作。

2.076在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作。

2.077对可能造成等待时间较长的操作应该提供取消功能。

2.078特殊字符常有;;'"><,`'、"["{、\|}]+=)-(_*&&^%$#@!~,.。?/还有空格。

2.079与系统采用的保留字符冲突的要加以限制。

2.080读入用户所输入的信息时,根据需要选择是否去掉前后空格。

2.081有些读入数据库的字段不支持中间有空格,但用户切实需要输入中间空格,这时要在程序中加以处理。

输入项规范

2.082必输项中不可为空,不可输入空格

2.083必输项给出必输项标识(*)。

2.084非必输项字段,Null插入数据库时不会出错,在数据库中设置默认值

2.085日期显示格式一致;或提供固定格式的选择。

2.086输入区域输入特殊字符,插入数据库时不出错或提示不允许输入特殊字符。

2.087英文输入不区分大小写,不可输入汉字、数字及特殊字符

2.088数值字段只能输入+,—,0~9及功能键(BackSpace光标)。数值不能为负数。

2.089单行文本框/多行文本框;长度合适,可以容纳相应文字,但不能超过数据库该字段长度,最好将可以输入的最大字符数标在旁边。建议单行文本框中当输入的字符超过一定长度时再输入无效;对于多行文本框给出最大字符数标识

2.090附件;可正常添加符合格式的附件;附件可正常打开和保存,附件名较长时可正常操作;直接输入错误的附件地址,保存时应给出提示信息;附件打开和保存到本地时,文件名要显示原文件的文件名。

2.091密码输入;在需求中定义密码是否允许为空或空格;密码是否允许特殊字符;是否区分大小写,密码的可输入长度;程序中应给出文字说明密码的可输入长度。