2022年2022年界面设计规范 .pdf

界面设计规范前言界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。同时界面如同人的面孔，具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失败，让用户有挫败感，再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。目前界面的设计引起软件设计人员的重视的程度还远远不够，直到最近网页制作的兴起，才受到专家的青睐。而且设计良好的界面由于需要具有艺术美的天赋而遭拒绝。目前流行的界面风格有三种方式：多窗体、单窗体以及资源管理器风格，无论那种风格，以下规则是应该被重视的。一、易用性：按钮名称应该易懂，用词准确，摒弃模棱两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。易用性细则：1、完成相同或相近功能的按钮用Frame 框起来，常用按钮要支持快捷方式。2、完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。3、按功能将界面划分局域块，用Frame 框括起来，并要有功能说明或标题。4、界面要支持键盘自动浏览按钮功能，即按Tab 键的自动切换功能。5、界面上首先应输入的和重要信息的控件在Tab 顺序中应当靠前，位置也应放在窗口上较醒目的位置。6、同一界面上的控件数最好不要超过10 个，多于10 个时可以考虑使用分页界面显示。7、分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab。8、默认按钮要支持Enter 及选操作，即按Enter 后自动执行默认按钮对应操作。9、可写控件检测到非法输入后应给出说明并能自动获得焦点。10、Tab 键的顺序与控件排列顺序要一致，目前流行总体从上到下，同时行间从左到右的方式。11、复选框和选项框按选择机率的高底而先后排列。12、复选框和选项框要有默认选项，并支持Tab 选择。13、选项数相同时多用选项框而不用下拉列表框。14、界面空间较小时使用下拉框而不用选项框。15、选项数较少时使用选项框，相反使用下拉列表框。16、专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。二、规范性：通常界面设计都按Windows界面的规范来设计，即包含菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单的标准格式，可以说：界面遵循规范化的程度越高，则易用性相应的就越好。小型软件一般不提供工具厢。名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共 7 页 -规范性细则：1、常用菜单要有命令快捷方式。2、完成相同或相近功能的菜单用横线隔开放在同一位置。3、菜单前的图标要尽量能直观的代表要完成的操作。4、菜单深度一般要求最多控制在三层以内。5、工具栏要求可以根据用户的要求自己选择定制。6、相同或相近功能的工具栏放在一起。7、工具栏中的每一个按钮要有及时提示信息。8、一条工具栏的长度最长不能超出屏幕宽度。9、工具栏的图标能直观的代表要完成的操作。10、系统常用的工具栏设置默认放置位置。11、工具栏太多时可以考虑使用工具厢。12、工具厢要具有可增减性，由用户自己根据需求定制。13、工具厢的默认总宽度不要超过屏幕宽度的1/5。14、状态条要能显示用户切实需要的信息，常用的有：目前的操作者、系统状态、用户位置、用户信息、提示信息、错误信息等，如果某一操作需要的时间较长，还应该显示进度条和进程提示。15、滚动条的长度要根据显示信息的长度或宽度能及时变换，以利于用户了解显示信息的位置和百分比。16、状态条的高度以放置5 号字为宜，滚动条的宽度比状态条的略窄。17、菜单和工具条要有清楚的界限，菜单要求凸出显示，这样在移走工具条时仍有立体感。18、菜单和状态条中通常使用5 号字体。工具条一般比菜单要宽，但不要宽的太多，否则看起来很不协调。19、右键快捷菜单采用与菜单相同的准则。三、帮助设施：系统应该提供详尽而可靠的帮助文档，在用户使用产生迷惑时可以自己寻求解决方法。帮助设施细则：1、帮助文档中的性能介绍与说明要与系统性能配套一致。2、打包新系统时，对作了修改的地方在帮助文档中要做相应的修改。3、操作时要提供及时调用系统帮助的功能。常用F1。4、在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。也就是说帮助要有即时针对性。5、最好提供目前流行的联机帮助格式或HTML 帮助格式。6、用户可以用关键词在帮助索引中搜索所要的帮助，当然也应该提供帮助主题词。7、如果没有提供书面的帮助文档的话，最好有打印帮助的功能。8、在帮助中应该提供我们的技术支持方式，一旦用户难以自己解决可以方便的寻求新的帮助方式。四、合理性：屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置窗体时要注意利用这两个位置。合理性细则：1、父窗体或主窗体的中心位置应该在对角线焦点附近。名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 7 页 -2、子窗体位置应该在主窗体的左上角或正中。3、多个子窗体弹出时应该依次向右下方偏移，以显示窗体出标题为宜。4、重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。5、错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。横排开头或最后与竖排最后为易点位置。6、与正在进行的操作无关的按钮应该加以屏蔽(Windows中用灰色显示，没法使用该按钮)。7、对可能造成数据无法恢复的操作必须提供确认信息，给用户放弃选择的机会。8、非法的输入或操作应有足够的提示说明。9、对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，避免形成无限期的等待。10、提示、警告、或错误说明应该清楚、明了、恰当。五、美观与协调性：界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。美观与协调性细则：1、长宽接近黄金分割点比例，切忌长宽比例失调、或宽度超过长度。2、布局要合理，不宜过于密集，也不能过于空旷，合理的利用空间。3、按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置。4、按钮的大小要与界面的大小和空间要协调。5、避免空旷的界面上放置很大的按钮。6、放置完控件后界面不应有很大的空闲位置。7、字体的大小要与界面的大小比例协调，通常使用的字体中宋体9-12 较为美观，很少使用超过12 号的字体。8、前景与背景色搭配合理协调，反差不宜太大，最好少用深色，如大红、大绿等。常用色考虑使用Windows界面色调。9、如果使用其他颜色，主色要柔和，具有亲和力与磁力，坚决杜绝刺目的颜色。10、大型系统常用的主色有#E1E1E1、#EFEFEF、#C0C0C0 等。11、界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。12、如果窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放。13、对于含有按钮的界面一般不应该支持缩放，即右上角只有关闭功能。14、通常父窗体支持缩放时，子窗体没有必要缩放。15、如果能给用户提供自定义界面风格则更好，由用户自己选择颜色、字体等。六、菜单位置：菜单是界面上最重要的元素，菜单位置按照按功能来组织。菜单设测试细则：1、菜单通常采用常用-主要-次要-工具-帮助 的位置排列，符合流行的Windows风格。2、常用的有 文件、编辑，查看 等，几乎每个系统都有这些选项，当然要根据不同的系统有所取舍。3、下拉菜单要根据菜单选项的含义进行分组，并且按照一定的规则进行排列，用横线隔开。名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 7 页 -4、一组菜单的使用有先后要求或有向导作用时，应该按先后次序排列。5、没有顺序要求的菜单项按使用频率和重要性排列，常用的放在开头，不常用的靠后放置；重要的放在开头，次要的放在后边。6、如果菜单选项较多，应该采用加长菜单的长度而减少深度的原则排列。7、菜单深度一般要求最多控制在三层以内。8、对常用的菜单要有快捷命令方式，组合原则见八。9、对与进行的操作无关的菜单要用屏蔽的方式加以处理，如果采用动态加载方式-即只有需要的菜单才显示，则最好。10、菜单前的图标不宜太大，与字高保持一直最好。11、主菜单的宽度要接近，字数不应多于四个，每个菜单的字数能相同最好。12、主菜单数目不应太多，最好为单排布置。深圳-果果(6120123)2011-03-05 22:09:15 七、独特性：如果一味的遵循业界的界面标准，则会丧失自己的个性。在框架符合以上规范的情况下，设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用。1、安装界面上应有单位介绍或产品介绍，并有自己的图标。2、主界面，最好是大多数界面上要有公司图标。3、登录界面上要有本产品的标志，同时包含公司图标。4、帮助菜单的 关于 中应有版权和产品信息。5、公司的系列产品要保持一直的界面风格，如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。八、快捷方式的组合在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户操作得更快一些，在西文 Windows及其应用软件中快捷键的使用大多是一致的。菜单中：1、面向事务的组合有：Ctrl-D 删除；Ctrl-F 寻找；Ctrl-H 替换；Ctrl-I 插入；Ctrl-N 新记录；Ctrl-S 保存；Ctrl-O 打开。2、列表：Ctrl-R；Ctrl-G 定位；Ctrl-Tab 下一分页窗口或反序浏览同一页面控件。3、编辑：Ctrl-A 全选；Ctrl-C 拷贝；Ctrl-V 粘贴；Ctrl-X 剪切；Ctrl-Z 撤消操作；Ctrl-Y 恢复操作。4、文件操作：Ctrl-P 打印；Ctrl-W 关闭。5、系统菜单 Alt-F 文件；Alt-E 编辑；Alt-T 工具；Alt-W 窗口；Alt-H 帮助。6、MS Windows保留键：Ctrl-Esc 任务列表；Ctrl-F4 关闭窗口；Alt-F4 结束应用；Alt-Tab 下一应用；Enter 缺名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 7 页 -省按钮/确认操作；Esc 取消按钮/取消操作；Shift-F1 上下文相关帮助。按钮中：可以根据系统需要而调节，以下只是常用的组合。Alt-Y 确定(是)；Alt-C 取消；Alt-N 否；Alt-D 删除；Alt-Q 退出；Alt-A 添加；Alt-E 编辑；Alt-B 浏览；Alt-R 读；Alt-W 写。这些快捷键也可以作为开发中文应用软件的标准，但亦可使用汉语拼音的开头字母。九、安全性考虑：在界面上通过下列方式来控制出错机率，会大大减少系统因用户人为的错误引起的破坏。开发者应当尽量周全地考虑到各种可能发生的问题，使出错的可能降至最小。如应用出现保护性错误而退出系统，这种错误最容易使用户对软件失去信心。因为这意味着用户要中断思路，并费时费力地重新登录，而且已进行的操作也会因没有存盘而全部丢失。安全性细则：1、最重要的是排除可能会使应用非正常中止的错误。2、应当注意尽可能避免用户无意录入无效的数据。3、采用相关控件限制用户输入值的种类。4、当用户作出选择的可能性只有两个时，可以采用单选框。5、当选择的可能再多一些时，可以采用复选框，每一种选择都是有效的，用户不可能输入任何一种无效的选择。6、当选项特别多时，可以采用列表框，下拉式列表框。7、在一个应用系统中，开发者应当避免用户作出未经授权或没有意义的操作。8、对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。9、对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态。10、对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。11、对错误操作最好支持可逆性处理，如取消系列操作。12、在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作。13、对可能造成等待时间较长的操作应该提供取消功能。14、特殊字符常有；;，：、|+=)-(_*&%$#!，.。?/还有空格。15、与系统采用的保留字符冲突的要加以限制。16、在读入用户所输入的信息时，根据需要选择是否去掉前后空格。17、有些读入数据库的字段不支持中间有空格，但用户切实需要输入中间空格，这时要在程序中加以处理。十、多窗口的应用与系统资源：设计良好的软件不仅要有完备的功能，而且要尽可能的占用最低限度的资源。1、在多窗口系统中，有些界面要求必须保持在最顶层，避免用户在打开多个窗口时，不停的切换甚至最小化其他窗口来显示该窗口。2、在主界面载入完毕后自动卸出内存，让出所占用的WINDOWS系统资源。3、关闭所有窗体，系统退出后要释放所占的所有系统资源，除非是需要后台运行的系统。名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 7 页 -4、尽量防止对系统的独占使用。十一、设计技巧本部分包括了有助于程序员进行面向对象的用户界面设计的一系列技巧。1、一致性，一致性，一致性！必须保证用户界面的一致性，这是最重要的。如果你可以通过在某个列表框里双击其中一个条目来触发一个事件，那你必须保证在所有的列表框里双击条目都会产生相似的反应。所有窗口里的按钮都应该放在同一个位置，按钮标题与提示的措辞应保持一致，还应保持一致的色彩设置。一致的用户界面会使得使用者建立起关于应用程序工作流程的正确理解，而用户对应用程序工作流程的正确理解会带来更低的训练与支持费用。2、制订并严格遵守标准。使得你能够真正的保持一致性原则的唯一一个解决办法是制订一个用户界面设计标准并严格遵守。最好的办法是遵循当前的行业标准，同时根据你个人的应用程序的特殊需要不断的加以增添和完善。行业标准，例如 IBM(1993)与 Microsoft(1995)指定的用户界面设计规范可以满足一般用户界面设计者95%-99%的需要。采用行业标准不仅可以吸收同行的优秀建议，而且可以更容易的使你的应用程序用户界面与最终用户已经使用或者购买的其他同类软件产品的用户界面保持近似。3、更简单的解释你的规则。你的软件用户需要知道如何使用你为他们提供的软件产品。如果你的应用程序界面严格遵守一致性原则的话某个界面使用规则你只需要解释一遍，这比一步又一步的向用户解释每一个使用环节的每一个使用方法要简单的多。4、为初学者与专家都提供足够的支持。虽然一个图书目录能为一个随意的浏览者提供足够的图书馆藏书信息，但这不是最有效的为专业用户以及图书馆员提供服务的方法。图书馆员是经过专业训练的能够熟练运用复杂的信息检索系统在图书馆里查阅信息的人员。这意味着你必须为专业人员准备一套更复杂但功能更强大的搜索手段来满足他们的特殊需要。5、在窗口之间进行导航与指引是非常重要的。如果从一个窗口进入到另一个窗口变得很困难或者复杂，你的用户会有强烈的失败感并放弃使用软件。用户会试图尽量使得自己的工作流程与界面转接流程合拍，如果用户成功的做到这一点的话就会觉得在使用你的应用程序时非常顺手。但必须注意，不同的使用者有不同的工作流程，你的界面转接流程必须足够灵活以适应各种不同的用户习惯与需求。界面流程图可以很方便的用来设计并实现一个优秀的用户界面窗口转接流程。6、在一个窗口中的使用导引也非常重要。西方人的阅读习惯是从左到右，由上至下。因为人们已对此习以为常所以你在界面设计中必须遵循从左到右，由上至下的原则。如果你将窗口中的控件元素以令人舒适的顺序加以组织的话用户在使用中会对界面产生一种亲切感。7、适当的用户界面的标签与消息内容措辞。显示在用户界面上的文字是你的用户了解当前系统状态的最主要也是最重要的信息来源。拙劣的措辞在用户看来只会导致拙劣的用户界面。使用完整的词语与句子，尽量不采用缩写的短语与代码可以使你的信息被更好的理解。信息的语气必须是确定的，暗示用户一切都处于控制之中，同时保证使用户得知如何进行下一步动作。例如下列信息：你输入了错误的信息或者 账号长度必须为8 位。而且，提示名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 7 页 -信息必须保持一致的措辞以及显示位置的一致性。虽然必须输入用户名、应该输入账号的措辞分开来看没有问题，但它们没有保持一致。因此，如果以第一句为标准的话，第二句应改为 必须输入账号来保持措辞的一致性。8、理解每一个控件。你必须保证使用正确的控件来完成某个特定的任务，这有助于增强用户界面的一致性与第一次使用该应用软件时的简易性。保证正确的使用每一个控件的唯一方法就是熟悉并且理解你所采用的用户界面设计标准与特点。9、仔仔细细的观察别的应用软件用户界面。除非你确定别的应用软件用户界面设计与你的项目遵循同一个标准。绝对不能事先在潜意识中认为另外的应用软件用户界面设计是正确的。虽然通过观察别的用户界面设计来吸取设计灵感与思想是个好办法，但在你能够保证自己拥有判断一个优秀的用户界面与一个拙劣的用户界面之间的区别之前不要这么做。已经有很多的开发者与设计者错误的模仿了某些后来证明是不正确的用户界面设计思想。10、适当的使用色彩。必须加以控制的使用色彩，如果你在某一处使用了色彩来表达信息的话就必须保证用户还可以从别的方面获得同样的信息，因为很有可能你的软件用户是一个色盲。如果你使用高亮色来突出屏幕上的某个信息，你就必须同时使用一种别的手段来保证色盲用户也能正确的注意到这个信息，比如在画面上显示一个提示符号。使用色彩同样要求保持严格的一致性以保证用户界面的一致性。另外，在不同的平台之间很难保证一致的色彩表现，在一个系统上表现不错的色彩设计在另一个系统上很可能表现很糟糕。我们经常在一些会议上听到某些人说在我家里的机器上看起来很不错的.名师资料总结-精品资料欢迎下载-名师精心整理-第 7 页，共 7 页 -