界面设计规范

界面设计规范
界面设计规范

界面设计规范

前言

界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作,起到向导的作用。同时界面如同人的面孔,具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉,相反由于界面设计的失败,让用户有挫败感,再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。目前界面的设计引起软件设计人员的重视的程度还远远不够,直到最近网页制作的兴起,才受到专家的青睐。而且设计良好的界面由于需要具有艺术美的天赋而遭拒绝。目前流行的界面风格有三种方式:多窗体、单窗体以及资源管理器风格,无论那种风格,以下规则是应该被重视的。

一、易用性:

按钮名称应该易懂,用词准确,摒弃模棱两可的字眼,要与同一界面上的其他按钮易于区分,能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。

易用性细则:

1、完成相同或相近功能的按钮用Frame框起来,常用按钮要支持快捷方式。

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

3、按功能将界面划分局域块,用Frame框括起来,并要有功能说明或标题。

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

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

6、同一界面上的控件数最好不要超过10个,多于10个时可以考虑使用分页界面显示。

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

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

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

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

11、复选框和选项框按选择机率的高底而先后排列。

12、复选框和选项框要有默认选项,并支持T ab选择。

13、选项数相同时多用选项框而不用下拉列表框。

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

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

16、专业性强的软件要使用相关的专业术语,通用性界面则提倡使用通用性词眼。

二、规范性:

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

规范性细则:

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、子窗体位置应该在主窗体的左上角或正中。

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、下拉菜单要根据菜单选项的含义进行分组,并且按照一定的规则进行排列,用横线隔开。

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 缺

省按钮/确认操作;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、关闭所有窗体,系统退出后要释放所占的所有系统资源,除非是需要后台运行的系统。

4、尽量防止对系统的独占使用。

十一、设计技巧

本部分包括了有助于程序员进行面向对象的用户界面设计的一系列技巧。

1、一致性,一致性,一致性!必须保证用户界面的一致性,这是最重要的。如果你可以通过在某个列表框里双击其中一个条目来触发一个事件,那你必须保证在所有的列表框里双击条目都会产生相似的反应。所有窗口里的按钮都应该放在同一个位置,按钮标题与提示的措辞应保持一致,还应保持一致的色彩设置。一致的用户界面会使得使用者建立起关于应用程序工作流程的正确理解,而用户对应用程序工作流程的正确理解会带来更低的训练与支持费用。

2、制订并严格遵守标准。使得你能够真正的保持一致性原则的唯一一个解决办法是制订一个用户界面设计标准并严格遵守。最好的办法是遵循当前的行业标准,同时根据你个人的应用程序的特殊需要不断的加以增添和完善。行业标准,例如IBM(1993)与Microsoft(1995)指定的用户界面设计规范可以满足一般用户界面设计者95%-99%的需要。采用行业标准不仅可以吸收同行的优秀建议,而且可以更容易的使你的应用程序用户界面与最终用户已经使用或者购买的其他同类软件产品的用户界面保持近似。

3、更简单的解释你的规则。你的软件用户需要知道如何使用你为他们提供的软件产品。如果你的应用程序界面严格遵守一致性原则的话某个界面使用规则你只需要解释一遍,这比一步又一步的向用户解释每一个使用环节的每一个使用方法要简单的多。

4、为初学者与专家都提供足够的支持。虽然一个图书目录能为一个随意的浏览者提供足够的图书馆藏书信息,但这不是最有效的为专业用户以及图书馆员提供服务的方法。图书馆员是经过专业训练的能够熟练运用复杂的信息检索系统在图书馆里查阅信息的人员。这意味着你必须为专业人员准备一套更复杂但功能更强大的搜索手段来满足他们的特殊需要。

5、在窗口之间进行导航与指引是非常重要的。如果从一个窗口进入到另一个窗口变得很困难或者复杂,你的用户会有强烈的失败感并放弃使用软件。用户会试图尽量使得自己的工作流程与界面转接流程合拍,如果用户成功的做到这一点的话就会觉得在使用你的应用程序时非常顺手。但必须注意,不同的使用者有不同的工作流程,你的界面转接流程必须足够灵活以适应各种不同的用户习惯与需求。界面流程图可以很方便的用来设计并实现一个优秀的用户界面窗口转接流程。

6、在一个窗口中的使用导引也非常重要。西方人的阅读习惯是从左到右,由上至下。因为人们已对此习以为常所以你在界面设计中必须遵循从左到右,由上至下的原则。如果你将窗口中的控件元素以令人舒适的顺序加以组织的话用户在使用中会对界面产生一种亲切感。

7、适当的用户界面的标签与消息内容措辞。显示在用户界面上的文字是你的用户了解当前系统状态的最主要也是最重要的信息来源。拙劣的措辞在用户看来只会导致拙劣的用户界面。使用完整的词语与句子,尽量不采用缩写的短语与代码可以使你的信息被更好的理解。信息的语气必须是确定的,暗示用户一切都处于控制之中,同时保证使用户得知如何进行下一步动作。例如下列信息:"你输入了错误的信息"或者"账号长度必须为8位"。而且,提示

信息必须保持一致的措辞以及显示位置的一致性。虽然"必须输入用户名"、"应该输入账号"的措辞分开来看没有问题,但它们没有保持一致。因此,如果以第一句为标准的话,第二句应改为"必须输入账号"来保持措辞的一致性。

8、理解每一个控件。你必须保证使用正确的控件来完成某个特定的任务,这有助于增强用户界面的一致性与第一次使用该应用软件时的简易性。保证正确的使用每一个控件的唯一方法就是熟悉并且理解你所采用的用户界面设计标准与特点。

9、仔仔细细的观察别的应用软件用户界面。除非你确定别的应用软件用户界面设计与你的项目遵循同一个标准。绝对不能事先在潜意识中认为另外的应用软件用户界面设计是正确的。虽然通过观察别的用户界面设计来吸取设计灵感与思想是个好办法,但在你能够保证自己拥有判断一个优秀的用户界面与一个拙劣的用户界面之间的区别之前不要这么做。已经有很多的开发者与设计者错误的模仿了某些后来证明是不正确的用户界面设计思想。

10、适当的使用色彩。必须加以控制的使用色彩,如果你在某一处使用了色彩来表达信息的话就必须保证用户还可以从别的方面获得同样的信息,因为很有可能你的软件用户是一个色盲。如果你使用高亮色来突出屏幕上的某个信息,你就必须同时使用一种别的手段来保证色盲用户也能正确的注意到这个信息,比如在画面上显示一个提示符号。使用色彩同样要求保持严格的一致性以保证用户界面的一致性。另外,在不同的平台之间很难保证一致的色彩表现,在一个系统上表现不错的色彩设计在另一个系统上很可能表现很糟糕。我们经常在一些会议上听到某些人说"在我家里的机器上看起来很不错的..."

UI界面设计规范标准

. .. . WI-PSMIS-DJ-B008 02.01.000 (部资料) ECE项目图形用户界面设计规 自2012年8月日起正式生效 从兴电子开发 编制:审批: .. .. .. ..

目录 1引言 (4) 1.1目的 (4) 1.2围 (4) 1.3参考资料 (4) 2概述 (4) 3原则 (5) 3.1易用性 (5) 3.2规性 (5) 3.3合理性 (6) 3.4美观与协调性 (6) 3.5独特性 (7) 4设计规 (7) 4.1登录界面 (7) 4.2首页 (7) 4.3框架设计 (7) 4.4按钮设计 (8) 4.5对话框 (8) 4.5.1一般对话框 (8) 4.5.2有模式对话框 (9) 4.5.3无模式对话框 (9) 4.6面板设计 (9) 4.7菜单设计 (9) 4.8图标设计 (9) 4.9滚动条 (10) 4.10换肤功能 (10) 5保留字 (10) 5.1常用保留字 (10)

电力营销图形用户界面设计规 1引言 1.1目的 统一和规软件界面。 1.2围 电力营销改造。 1.3参考资料 2概述 界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作,起到向导的作用。同时界面如同人的面孔,具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉,相反由于界面设计的失败,让用户有挫败感,再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。目前界面的设计引起软件设计人员的重视的程度还远远不够,直到最近网页制作的兴起,才受到专家的青睐。而且设计良好的界面由于需要具有艺术美的天赋而遭拒绝。 微软公司和苹果公司是这方面的典。 微软公司的所有产品包括Office、Windows、MSN Messenger和其所有的都是我们追随的对象。而且微软公司所有的文档和产品介绍也是我们模仿和学习的对象。 苹果公司更是这方面的鼻祖,它的所有产品无不表露着它在这方面是无人能及的。 我们考虑GUI设计时应该遵循基本的规则然后参考成熟的设计,并能够添加自己的独特性。 在一个时期很流行的界面风格在另外的时期可能已经落后,所以我们要有创新和超前的意识。

Android人机界面(UI)设计规范(带目录)

Android 人机界面设计规范 1Android 设计的依据 1.1 框架结构及流程 是什么使得android 有着独特的用户体验? 后台处理支持多任务功能 正在进行和事件驱动的提示信息 通过Widgets 和live folders 来实现实时信息的预览 用户想用时,任一应用程序都可以挑选和选择 android 不是关于程序的,它是关于活动,把任务分层, 1.2 架构基础 硬件平台 android 设备代表的是硬件和软件的完美组合。硬件辅助导航操作,并给android 提供更多更好的功能。当菜单没有开启,要把屏幕最大化时,菜单按钮可以在屏幕上提供更多的内容。返回按钮允许使用返回堆(back stack)。 竖屏与横屏 一般来说,用户界面开发竖屏与横屏。在新横屏也仍存在于新的Android 手机中。99%的android 布局支持横屏。 焦点和菜单 在触摸模式里没有焦点,只有轨迹球。Android 平台里没有鼠标焦点。确定你从未显示焦点。主菜单应该包括全部功能;它们与活动联系一起形成整体。菜单上的图标按重要性排序。如果有多于5 个图标,使用点击more menu 菜单来查看那些不太重要的菜单项。上下文菜单(长按)集中在一个特定对象。 总是把那些与所选项最相关的行为放在长按菜单的顶部。 需要记住的几点: 设计时要考虑速度和简洁 尽量分层来分等级 屏幕上的活动尽量最小 使用下载进度条,下载数据时,而不是让用户等待去看一个加载完全的页面。 考虑活动流而不是线性行为 1.3 屏幕上的行为

android 设计了特定的行为方式。在你的应用程序里利用好这一点。应该坚持android 行为的标准,避免混淆用户。 1.4 表达 细节使得产品集中在细节。程序的美学会帮助你集中注意在那些应用体验核心的关键任务上。API DEMO 是开始你的工具包的好地方。 2 用户界面原则 这部分试图讲述创造一个好的用户界面的一些基本的交互设计原则。这些原则是基本的,不止能应用于android 的用户界面设计,也可以应用于其他。苹果建议开发者花费60%的开发时间来进行设计工作。下面的用户界面原则将为好的设计提供一个基础。 2.1 隐喻 隐喻是构建一个基于操作任务心智模型的模块;用它们来传递应用程序的概念和功能。基于真实世界的应用对象可以帮助用户很快的理解该应用程序。当你设计你的应用程序时,要注意andriod 中存在的隐喻,不要重新定义它们。同时,检查你的应用程序执行的任务,看是否有些自然隐喻你可以使用。 2.2 反映用户的心智模型 用户已经有了一个来描述你的程序正在进行的任务的心智模型。这个心智模型产生于真实世界经验、其它软件和一般电脑基本知识的结合。比如说,用户在真实世界里有写字、寄信的经验,也会产生特定的期待,像写一封新的信,选一个接受者,然后寄出信。一个忽略用户心智模型的电子邮件程序用起来会很困难和不舒服。这是因为程序强加给用户一个不熟悉的概念模型,而不是建立一个用户已有的知识经验模式。 在设计程序用户界面之前,试着去发现你的用户的心智模型,这样帮助用户去执行任务。心智模型中内在的隐喻,它代表了任务的概念组成。在写信这个例子中,隐喻包括信件、邮包和信封。在涉及到照片的任务的思考模式中,隐喻包括照片、照相机和专辑。我们要努力地发现用户的期望,包括任务组成、组织、窗口布局的工作流、菜单和工具栏组织、控制面板的使用。 要通过努力地何必把个下面的特征与用户心智模型相融合: 熟悉性 用户的心智模型主要是建立在经验的基础上 简单化 一项任务的心智模型通常是流线型,关注任务的基本组成部分。尽管对于一个给定的任务有很多可选的细节,但是基本的组成部分占大部分,并且不会占用用户的注意。 可利用性Availability

软件系统开发规范

系统开发规范 1、数据库使用规范 1.1服务器上有关数据库的一切操作只能由服务器管理人员进行。 1.2程序中访问数据库时使用统一的用户、统一的连接文件访问数据库。 1.3原则上每一个频道只能建一个库,库名与各频道的英文名称相一致,库中再包含若干表。比较大的、重点的栏目可以考虑单独建库,库名与栏目的英文名称相一致。 1.4命名: (1)数据库、表、字段、索引、视图等一系列与数据库相关的名称必须全部使用与内容相关的英文单词命名(尽量避免使用汉语拼音),对于一个单词难以表达的,可以考虑用多个单词加下划线(_)连接(不能超过四个单词)命名。 (2)所有的名称必须统一使用英文小写字母。 (3)所有的名称起始和结尾不能使用下划线(_)。 (4)所有的名称不能包含26个英文小写字母和下划线(_)以外的其他字符。 1.5不再使用的数据库、表应删除,在删除之前必须备份(包括结构和内容)。 2、文档规范 所有的项目必须有相关的文档说明(可以是电子文档)。文档应包含如下内容: (1)项目名称。 (2)项目小组名单,项目负责人。 (3)项目开发起始时间和结束时间。 (4)项目内容描述。 (5)项目位置。(在哪个频道、哪个栏目) (6)与项目有关的程序文件名(含路径名),文件内容及实现的功能描述。 (7)完整的程序流程图。

(8)数据库、表、视图、索引的名称,用途。字段的名称、类型、长度、用途,必须附上相关的SQL语句。 3、源代码与页面嵌套规范 3.1源代码: (1)使用自定义变量(包括全局变量、局部变量)之前必须先声明变量,并用注释语句标明变量的类型、用途。 (2)自定义函数必须用注释语句标明函数的用途、参数的数据类型、意义,返回值的类型。 (3)程序中重要的过程或代码较长的过程应使用注释语句标明该过程的起始行和结束行,并注明该过程的功能。 (5)所有的注释文字一律使用简体中文。 3.2 HTML页面嵌套: (1)网页设计部设计的HTML页面以嵌套的方式确定用于动态显示程序执行结果的位置、宽度、行数(或高度)等,并在相应位置予以文字说明。页面中与程序无关的图片、文字、联结等必须使用完整的URL。 (2)软件开发人员和编辑人员可以根据情况协商,将页面文件及图片与程序独立存放在各自的服务器上,页面改版和修改程序独立进行。 (3)使用include技术将分割开的HTML页面分别嵌入程序代码中,要求做到修改HTML页面时无须改写程序,而修改程序时不会影响HTML页面效果,将页面改版和修改程序两项工作分别独立。 (4)页面和程序嵌套以后不能破坏原HTML页面的整体显示效果,字体、字号、颜色等应尽量保持原HTML页面的风格。 (5)动态生成的页面的各项指标(如图片大小、页面宽度、高度、页面文件的字节数等)应符合本公司网页设计方面的要求。 4、测试规范(软件部分) 对于较大的项目应成立相应的测试小组,小组成员由软件开发人员、网页设计人员、技术人员、

系统界面设计规范

B/S 系统界面设计规范 1.引言 界面美观、操作易用性、维护成本低是评价B/S系统的关键。本规范参考了一些成熟产品科学的开发方法,将开发过程中的方式、规则等强行的约束。希望藉此来提高用户操作感受,提升B/S产品的质量。 1.1. 编写目的 广义的界面概念包含了除页面布局设计之外,交互性的设计,及人体工程学方面的研究。本规范制订的依据从广义概念出发,总结以往项目的成败经验,目的是从整体上提升公司B/S类产品的质量、开发效率。从以技术为中心发展为以客户为中心,将类似项目成功的经验继承和积累下来,将B/S系统与C/S系统开发过程上的区别降低到仅显示控制的极小的层面。新的开发方式强调分层,规范出界面设计人员做什么,服务器编程人员做什么,这样就把页面和控制代码两个层面清晰的分开。 1.2. 背景 B/S模式系统以其易部署、易扩展、能够高度集成各种技术的特点,在公司产品线中占越来越大的比重,.Net、J2ee等技术的发展更是将B/S系统的开发和桌面应用程序开发的工程方法统一起来,突出服务器端技术,这些变革要求界面设计人员和服务器端编程人员可以应用更加科学的方法合作,团队的合作方式甚至决定了一个系统开发的成败。目前公司较多的服务器端编程人员仍然处于“后ASP 时代”的开发方式,表现为前台页面仍然与服务器代码高度的关联,带来的后果是重复建设、高昂的维护成本或失去控制的项目,没有充分的发挥出集成开发工具的优势。在以往的开发方式下界面设计侧重在静态页面的建设上,每个页面作为一个独立的模块来处理,在页面交互中则是程序员根据自己的习惯来控制,程序对个人的编程风格的依赖很强,这些在以往开发WEB站点的方式扩展到B/S系统有时是不正确的,甚至是背道而弛的,当然也不利于规模化的团队合作。 1.3. 定义 术语定义: 效果图:由界面设计人员设计的页面效果图,综合了概要设计的业务需要和整个站点的风格,它规定了页面布局上的每个细节。 容器:即HTML 标记的嵌套结构,如在表格->行->单元格内放置图片,那么可以认为单元格是放置图片的容器。 样式表:即级联式样式表CSS,它是W3C机构在HTML标记语言上扩展的格式语言。 非标准交互控件:是通过标准控件组合、扩展等方法以提高特定业务执行效率而进行封装的控件,或概括为用户根据以往的操作经验不能够直接领会出操作方式的交互控件。 2. 界面设计规范细则 总体目标 以规范作为基本原则,在此框架内进行合理的扩展和变化,将站点内的每个模块服从于整个站点,模块页面与“高内聚”的控制代码紧密的结合在一起,同时对应于应用程序基于系统的架构分析。 2.1. 通用原则 1 界面色彩要求:计算机屏幕的发光成像和普通视觉成像有很大的不同,应该注意这种

用户界面设计规范

1目的 ?设计软件的用户界面,产生《用户界面设计报告》。 ?制作用户界面的资源如图像、图标或者界面专用组件等。 2适用范围 2.1机构 项目组设计人员。 2.2业务 适用于公司内所有包含用户界面开发的项目的软件用户界面设计。 3名词术语 UI:User Interface用户界面。 4概述 用户界面设计包括四个活动,活动描述如下: 1)、设计准备 2)、用户界面设计 3)、撰写文档 4)、设计评审 5角色和职责 ?界面设计人员:从事用户界面设计,如果可能的话,邀请用户或美工人员协助设计用户界面。6活动

用户界面设计规范页数第 1 页共 6页 编制部门XX部 生效日期2019年10月15日 6.1设计准备 ?界面设计人员阅读需求规格说明书和概要设计说明书,明确界面设计任务。 ?界面设计人员与用户交流,了解用户的工作习惯和他们对界面的看法。 ?界面设计人员准备相关的设计工具和资料,收集或创作基本的界面资源如图像、图标以及通用的组件。 ?界面设计人员确定本软件的用户界面设计规则(或指南),主要包括: ?优秀界面的特征或通用的设计原则; ?软件主界面(如主窗口、主页面)的设计规则; ?软件子界面(如子窗口、子页面)的设计规则; ?标准控件的使用规则; ?美学设计规则。 6.2用户界面设计 用户界面设计一般要经历“原型设计->原型评估->细化”等步骤,通常迭代进行。 ?原型创作 界面设计人员创作界面原型:先徒手画,或者用Visio等工具绘制界面的视图,再用软件开发工具实现可以运行的原型。 ?原型评估 界面设计人员邀请用户和同行们评估界面的原型,汇集意见,及时改进。 ?细化 界面设计人员细化界面原型,例如美工处理,添加细节等。 6.3撰写用户界面设计文档 用户界面定型之后,界面设计人员根据指定的模板撰写详细设计说明书中的用户界面设计部分,主要内容包括: ?应当遵循的界面设计规范

系统设计文档编写要求规范及示例(1)

********系统系统设计文档 *****系统设计小组 组长:**** 组员:**** **** **** ****

目录 1 引言 (1) 1.1编写目的 (1) 1.2背景 (1) 1.3定义 (1) 1.4参考资料 (1) 2 系统功能设计 (3) 2.1 功能模块设计 (3) 2.2 ****模块设计 (3) 2.3 ****模块设计 (3) 3 类设计 (4) 4 数据库设计 (6) 5 接口及过程设计 (7) 6 界面设计 (8) 7 其它设计 (12) 8 小结 (13)

说明: ●在进行系统设计时可以任意传统系统设计方法或面向对象系统设计方 法,或者两者相结合,不局限于使用一种方法。 ●文档中每章图都需要配有相应的文字解释。 ●本文档中的图按照章编号,如“1 引言”表示第一章,“1.1 编写目的” 表示第一章第一节。第一章第一个图标号为“图1.1 ****图”,而第二个 图标号为“图1.2 ****图”,写在图的下面,居中。 ●本文档中的表也按照章编号,第一章第一个表标号为“表1.1 ****表”, 而第二个表标号为“表1.2 ****表”,写在表的上面,居中。 ●使用visio画用例时,Actor及用例的图示模具(用例图模具.vss)可以 到BB平台下载。 1 引言 1.1编写目的 说明编写这份系统设计说明书的目的,指出预期的读者。 1.2背景 说明: a.待开发的软件系统的名称; b.列出此项目的任务提出者、开发者、用户以及将运行该软件的计算站(中心)。 1.3定义 列出本文件中用到的专门术语的定义和外文首字母组词的原词组。 1.4参考资料 列出用得着的参考资料,如:

软件界面设计要求规范_v0-视觉部分

软件界面设计规范 1概要 界面设计中一定要保持界面的一致性。 一致性既包括使用标准的控件,也指使用相同的信息表现方法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。 界面力求简洁明了,保证系统功能设计的合理与明确,布局明确、交互操作合理、协调统一。功能要表现清楚,分类清晰有条理,避免过多的控件嵌套导致的视觉混乱;单一功能的操作目的明确,符合易用性原则,避免不必要的信息显示而对用户造成视觉干扰;力求操作简单,简单的功能一步完成,比较复杂的功能三步之内,复杂的功能操作使用操作向导来辅助客户完成。 2色调风格 2.1色调: 软件界面设计中常用的主色调包括:蓝色、红色、绿色、黑色 蓝色:运用的行业较为广泛,如通讯、电子、房产、钢铁、生产管理等行业大部分以蓝色为主色调来设计软件。 红色:在政府单位运用比较多。 绿色:一般运用于教育、医疗、农林等行业。 黑色:能源、石油、房地产行业有时候会用中性的黑色作为主色调。

表现区:通常用浅色,如:白色、淡灰、或者淡蓝之类,因为大面积的文字信息在浅色上便于长时间阅读,不容易形成视觉疲劳。 2.2风格: 软件界面的风格通常比较简约。不同行业,使用的环境不同稍有差异。 3登录界面 基本元素:logo、系统名称、输入框、提交按钮。如下: 4页面逻辑结构 功能页面功能页面 弹出页面弹出页面弹出页面

软件界面通常是上面这样的逻辑结构 首页:宏观预览各项设备管理数据,快速访问期望的数据功能 功能页面:查看某一功能模块的全部数据,查看某一对象的各类相关数据 弹出页面:填写和提交表单,对功能中的某一单项数据进行增加/删除/查询/修改/审核/打印/导出等功能操作。 5页面的基本属性 页面宽度:属性值为auto,最小值1024像素。默认状况下无横向滚动条。 注意:宽度、位置、边距为不可变数据 背景:页面整体为白色背景#FFFFFF 或者浅灰、浅蓝等,总之是非常接近白色的颜色。 注:白色为常用色值,对于特殊个性化页面可根据特殊要求变更色彩;背景色彩尽量少用饱和度高的颜色, 页面位置:居中 页面边距:上 0px;下 0px;左 0 px;右 0 px; 注意:有时候会专门设置一定数值的边距,这时通常 与模块间的间距相同,如上下左右都是5px。

软件用户界面设计规范

软件用户界面设计规范 1.导言 1.1 目的 为开发人员提供界面设计和开发的指南,引导开发人员设计简洁美观的用户界面; 1.2 适用范围 适用于xxxxxx。 2.软件界面设计的重要性 2.1 发展趋势 软件用户界面的发展经历了从简单到复杂、从低级到高级的过程,用户界面在软件系统中的价值比重越来越高。 2.2 开发竞争 得益于互联网的发展和普及,软件开发的技术门槛在不断下降,大部分软件企业的技术手段也趋向于雷同,“软件设计”变得越来越重要。当大家都掌握了相似的技术和需求信息后,企业之间的开发竞争“比的就是设计”。 –软件用户界面设计要综合考虑“易用性设计”、“艺术设计”和“技术实现”,很有挑战性。 2.3 用户挑剔 用户界面在很大程度上影响着软件的命运,因为广大用户对软件的评价主要来源于他们操作用户界面的感受。同类软件越多,选择余地越大,购买者对软件

用户界面就越挑剔。 3.软件界面设计的现状、问题及原因 3.1 不容乐观的现状 尽管国内有很多技术出色、聪明过人的软件工程师,但是不少人开发出来的软件产品却既难用又难看,客户很不满意。导致经常要修改软件的用户界面,造成极大的生产力浪费。 到处是用户界面设计缺陷: –界面措辞含糊,甚至有错别字。连简单的消息框都设计不好,可能存在文不对题的语病。 –界面布局混乱,缺乏逻辑,凡是能放的东西都堆集上去,让用户不知从何下手。–没有防错处理,不对用户输入的数据进行检验,不根据用户的权限自动隐藏或者禁用某些功能。执行破坏性的操作之前,不提醒用户确认。 –不提供进度条、动画来反映正在进行的比较耗时间的过程,对于重要的操作也不返回结果,让用户干着急。 3.2 问题和原因之一 由于国内没有开设软件界面设计的课程,大家对这部分知识没有深刻的意识,只是在工作中凭着个人的经验与感觉设计软件的用户界面,这样产生的界面往往得不到大众用户的认可。 3.3 问题及原因之二 开发人员在设计用户界面方面不仅存在先天的教育缺陷,更加糟糕的是还常常“错位”的毛病。他以为只要自己感觉用户界面漂亮、使用起来方便,那么用户也一定会满意。 3.4 问题及原因之三

软件系统页面设计规范

系统页面设计规范V1.0 柯建树2013/07/30

目录 一、基础规范 01、系统宽、高度 02、文本框设计规范 (1)基础规范 (2)应用场景 03、页码设计规范 (1)普通页码翻页 (2)小型页码翻页 04、文字的编排与设计 (1)文字大小 (2)文字颜色 (3)文字行距 (4)英文字体规范 (5)文字链接 05、整齐的概念和应用 06、模块化表现 二、参考指南 01、页面修饰 (1)简单的光影效果

(2)质感的表现 (3)透明效果的应用 02、个性皮肤的应用 03、图标的统一使用 04、图标表意 05、表格

基础规范 一、系统宽、高度 显示器分辨率比例 在软件系统的使用上,遵循以大多数为视觉标准,同时遵循其他分辨率的显示效果。 软件系统一般采用满屏显示内容,宽度为100%,高度100%,在设计网页时,应与使用量最大的分辨率作为参照,即1024px*768px。在这个尺寸上,系统应当具有全部显示的能力。 不同浏览器,不同分辨率下网页第一屏最大可视区域

在IE下,宽度21表示17px的滚动条加上4px的浏览器边框,做到全部兼容,以小分辨率设计,目前我们系统的设计标准是1003*600。 即PS的设计文档1003px*600px,72dpi。 二、文本框设计规范 尺寸大小 (1)小型输入框应至少设置5个中文字符宽度,内边距(padding)上下3px,左右7px,单行不少于18px; (2)大型输入框应至少设置8个中文字符宽度,内边距(padding)上下3px,左右7px,单行不少于18px; (3)搜索框设计宽度至少设置8个中文字符宽度,内边距(padding)上下3px,左右7px,单行不少于18px,宽度不少于130px; 帮助信息 (1)帮助信息一般有二类,限定标签提示、标示性文字等; (2)“限定标签提示”一般放在搜索框的左面; (3)“标示性文字”可设置灰色(#CCCCCC)显示,点击输入框后提示文字消失。提示文字应简明扼要,文字一般用于内容、用途、搜索范围等对用户有真正帮助意义的提示,“请输入关键字”这样的提示不应出现。 1、2、

用户界面设计规范

用户界面设计规范 1.简介 软件用户界面的重要性。 软件用户界面的重要性。 一般地,成功的Web应用软件至少有三个卖点: 1)应用软件的功能符合用户需求。 2)用户容易使用该软件。 3)用户觉得该软件界面美观。 基于第1项,是用户需求方面的事情,2和3都是用户界面的事情,可见用户界面对于一个软件是多么的重要!所以用户界面设计是Web应用软件开发过程中的关键工作之一,而不是次要工作。 1.1.目的 本文档以用户界面(UI)设计理念和用户操作习惯为原则,为了保证界面设计的一致性、美观性、扩展性、安全性等,对WEB应用软件用户界面设计的原则、标准、约束和界面元素等内容提出详细要求,便于用户界面原形设计、用户界面开发、以及用户界面测试等角色使用和交流,并为以后的用户界面评估制定一套评价体系。 同时规范界面(UI)开发人员在设计、制作、开发用户界面行为,通过本文档来约束界面开发人员的随意性,避免造成页面效果不统一、不协调等问题。 1.2.范围 本规范适用于Web应用系统用户界面(UI)的设计、开发和测试评估工作。

1.2.1.内容范围 本规范严格定义了Web软件用户界面(UI)设计原则、要素和具体细则内容,并且对页面元素进的应用范围、样式进行了详细的定义。 1.2.2.适用范围 本规范适用于Web应用系统项目中所有界面(UI)设计开发工作。使用人员 包括:界面设计人员、制作开发人员、界面测试评估人员。 1.3.术语释义 1.3.1.用户界面 用户界面是人与软件系统进行交互的接口,实现用户与计算机之间的通信,以控制计算机或进行用户和计算机之间的数据传送的系统部件,是用来接收信 息和向用户展示信息的窗口,是软件系统成功与否的一个很重要因素。 1.3. 2.UI 即用户界面,又称用户接口 1.4.文档约定 本文档所指的页面,均基于1024×768的屏幕分辨率。 所有关于页面或控件的距离、大小描述,单位均是Pixel(像素),简写为PX。 1.5.参考资料 1、《用户界面设计--有效的人机交互策略(第三版)》电子工业出版社 2、《Web软件用户界面设计指南》电子工业出版社林锐等著 3、《GUI设计禁忌》机械工业出版社 4、《软件人机界面设计》高等教育出版社陈启安编

人机界面设计原则 “以人为本” 1 以用户为中心的基本设计原则 在系统

人机界面设计原则 “以人为本” 1. 以用户为中心的基本设计原则 在系统的设计过程中,设计人员要抓住用户的特征,发现用户的需求。在系统整个开发过程中要不断征求用户的意见,向用户咨询。系统的设计决策要结合用户的工作和应用环境,必须理解用户对系统的要求。最好的方法就是让真实的用户参与开发,这样开发人员就能正确地了解用户的需求和目标,系统就会更加成功。 2. 顺序原则 即按照处理事件顺序、访问查看顺序(如由整体到单项,由大到小,由上层到下层等与控制工艺流程等设计监控管理和人机对话主界面及其二级界面。 3. 功能原则 即按照对象应用环境及场合具体使用功能要求,各种子系统控制类型、不同管理对象的同一界面并行处理要求和多项对话交互的同时性要求等,设计分功能区分多级菜单、分层提示信息和多项对话栏并举的窗口等的人机交互界面,从而使用户易于分辨和掌握交互界面的使用规律和特点,提高其友好性和易操作性。 4. 一致性原则 包括色彩的一致,操作区域一致,文字的一致。即一方面界面颜色、形状、字体与国家、国际或行业通用标准相一致。另一方面界面颜色、形状、字体自成一体,不同设备及其相同设计状态的颜色应保持一致。界面细节美工设计的一致性使运行人员看界面时感到舒适,从而不分散他的注意力。对于新运行人员,或紧急情况下处理问题的运行人员来说,一致性还能减少他们的操作失误。 5. 频率原则

即按照管理对象的对话交互频率高低设计人机界面的层次顺序和对话窗口莱单的显示位置等,提高监控和访问对话频率。 6. 重要性原则 即按照管理对象在控制系统中的重要性和全局性水平,设计人机界面的主次菜单和对话窗口的位置和突显性,从而有助于管理人员把握好控制系统的主次,实施好控制决策的顺序,实现最优调度和管理。 7. 面向对象原则 即按照操作人员的身份特征和工作性质,设计与之相适应和友好的人机界面。根据其工作需要,宜以弹出式窗口显示提示、引导和帮助信息,从而提高用户的交互水平和效率。 Apple Human Interface Guide——人机交互界面设计原则 人机交互原idliulei 则之1——隐喻 通过隐喻把人们对世界的理解转化为软件中的概念和特性是很有优势的。隐喻帮助用户建立任务的心智模型。使用通俗易懂的隐喻来表述具象或相似的概念,可以让用户对计算机环境有所掌握。比如说,Mac OSX 使用文件夹的隐喻表示储存文档的概念;用户可以整理他的硬盘,就和整理自己的档案柜一样。另一个例子是iTunes 的播放列表和iPhoto 的相册,它们就像现实世界里的音乐播放列表和相册一样。Dashboard 里的widget 也是一种隐喻,因为它需要完成的任务目的能够直接传达给用户。(可以参见Dashboard widget的设计指引。) 对于某个元素,隐喻可以建议它的使用方式,但是使用方式不应该被隐喻的实现所限制。在隐喻所建议使用方式与电脑能实现、扩展隐喻的能力之间要保持好平衡。举例来说,用户放到回收站的东西数量不应该被真正垃圾桶能容纳的东西数量所限制。 人机交互原则之2——反映用户的心智模型

软件界面设计规范_V1.0 - 视觉部分

软件界面设计规范_V1.0 1概要 界面设计中一定要保持界面的一致性。 一致性既包括使用标准的控件,也指使用相同的信息表现方法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。 界面力求简洁明了,保证系统功能设计的合理与明确,布局明确、交互操作合理、协调统一。功能要表现清楚,分类清晰有条理,避免过多的控件嵌套导致的视觉混乱;单一功能的操作目的明确,符合易用性原则,避免不必要的信息显示而对用户造成视觉干扰;力求操作简单,简单的功能一步完成,比较复杂的功能三步之内,复杂的功能操作使用操作向导来辅助客户完成。 2色调风格 2.1色调: 软件界面设计中常用的主色调包括:蓝色、红色、绿色、黑色 蓝色:运用的行业较为广泛,如通讯、电子、房产、钢铁、生产管理等行业大部分以蓝色为主色调来设计软件。 红色:在政府单位运用比较多。 绿色:一般运用于教育、医疗、农林等行业。 黑色:能源、石油、房地产行业有时候会用中性的黑色作为主色调。 表现区:通常用浅色,如:白色、淡灰、或者淡蓝之类,因为大面积的文字信息在浅色上便于长时间阅读,不容易形成视觉疲劳。

2.2风格: 软件界面的风格通常比较简约。不同行业,使用的环境不同稍有差异。 3登录界面 基本元素:logo、系统名称、输入框、提交按钮。如下: 4页面逻辑结构 软件界面通常是上面这样的逻辑结构 首页:宏观预览各项设备管理数据,快速访问期望的数据功能 功能页面:查看某一功能模块的全部数据,查看某一对象的各类相关数据 弹出页面:填写和提交表单,对功能中的某一单项数据进行增加/删除/查询/修改/审核/打印/导出等功能操作。

Web界面设计规范方案

Web应用界面设计规范(Design Specific ation for Web UI) 主讲人:ARay 目录: 一、软件界面规范的重要性及其目的 二、用户体验为何如此重要 三、Web规范体系介绍 四、界面设计开发流程 五、应该遵循的基本原则 六、界面设计规范 一、软件界面规范的重要性及其目的 ①使最终设计出来的界面风格一致化,开发编码人员相互之间开发更轻松,遵循统一的操作规范,以标准化的方式设计界面,提高工作效率。减少和改变责任不明,任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。 ②产品设计通过规范的方式来达到以用户为中心的目的。 二、用户体验为何如此重要 ①日常生活中的遭遇 X员工悲惨的一天: 早晨起来,发现闹钟没有按原先设定响起来。 一边烧水,一边穿衣服,临走前去喝水却发现水还没有烧开。 到了地铁站,发现公交卡没有钱了。 无奈之下只能去排队买票。 排了3趟地铁,终于到公司了,但是你却迟到了。 结果:尽管你已经非常努力,但是你还是迟到了。 那么,让我们看看这一连串 的倒霉事, 是什么让我们如此狼狈? ②什么是用户体验

用户体验(user experience)是以用户为中心的设计中最重要的一个部分,强调的是过程,是软件对用户行为产生的反应与用户期待值要尽可能的一致。 糟糕的用户界面表现: 表现一:过分使用各种奇形怪状、五颜六色的控件。 表现二:界面元素比例失调。比如按钮巨大无比,其尺寸甚至超过显示重要内容的文本框的界面。 表现三:界面元素凌乱。比如说,按钮和文本框摆放地点随意,该对齐的控件对不齐。 表现四:违背使用习惯。你按F1,它没有弹出帮助,却执行了一件绝对出乎你意料的动作。表现五:消息框信息含糊、混乱。比如软件弹出一个消息框。把原本“确定”和“取消”写成为“是”和“否”,让用户不知道什么意思。 表现六:还有一种糟糕的用户界面,乍一看很厉害,实际上完全是缺乏规划的结果。这种

软件界面设计规范方案

软件界面设计规 1.界面规 1.1.总体原则以用户为中心。 设计由用户控制的界面,而不是界面控制用户。清楚一致的设计。所有界面的风格保持一致,所有具有相同含义的术语保持一致,且易于理解拥有良好的直觉特征。以用户所熟悉的现实世界事务的抽象来给用户暗示和隐喻,来帮助用户能迅速学会软件的使用。较快的响应速度。简单且美观。 1.2.原则详述 1.2.1.用户控制用户界面设计的一个重要原则是用户应该总是感觉在控制软件而不是感觉被软件所控制。操作上假设是用户--而不是计算机或软件--开始动作。用户扮演主动角色,而不是扮演被动角色。在需要自动执行任务时,要以允许用户进行选择或控制它的方式来实现该自动任务。提供用户自定义设置。因为用户的技能和喜好各不相同,因此他们必须能够个性化界面的某些方面。Windows为用户提供了对许多这方面的访问。您的软件应该反应不同的系统属性--例如颜色、字体或其他选项的用户设置。采取交互式和易于感应的窗口,尽量避免使用模态对话框,而使用"非模式"辅助窗口。"模式"是一种状态,它排除一般的交互,或者限制用户只能进行特定的交互。当最好使用一个模式或该模式只是可替换的设计时--例如,用于在一个绘图程序中选定一个特定感觉--请确保该模式是显然的、可见的,是一个明确的用户选定的结果,并且容易取消。在后台运行长进程时,保持前台式交互。例如,当正在打印一个文档,即使该文档不能被改变,用户也应该可以最小化该窗口。谅解。用户喜欢探索一个界面,并经常从尝试和错误中学习。一个有效的界面允许交互式的发现,它只提供一组合适的选择,并在用户可能破坏系统或数据的情况时发出警告。如果可行,还应提供可逆转或可还原的操作。即使在设计得很好得界面中,用户也可能犯错误。这些错误既可以是物理上得(偶然地指向了错误的命令或数据),也可以是逻辑上的(对选定哪一个命令或哪些数据做出了错误的决定)。有效的设计避免很可能导致错误的情况。它还包容潜在的用户错误,并且使用户易于还原。 1.2.2.清楚一致的设计一致允许用户将已有的知识传递到新的任务中,更快地学习新事物,并将更多的注意力集中在任务上。这是因为他们不必花时间来尝

用户界面设计规范

用户界面设计规范

目录 1.总体原则 (2) 2.窗体控件布局 (2) 2.1.控件间距 (2) 2.2.控件对齐 (3) 2.3.文字对齐 (3) 2.4.窗口缩放 (3) 3.界面配色 (3) 4.控件风格 (4) 5.字体 (4) 6.交互信息 (4) 7.其他方面 (5)

1.前言 任何计算机应用系统都是通过用户界面与用户交互的,用户界面已成为所有计算机系统的有机组成部分,它决定了人类如何控制和操纵系统。一个好的用户界面应该为用户提供统一、规范的交互界面,从而提高用户工作效率,增强用户对系统的认可程度。因此可以说,用户界面设计的优劣已经成为计算机应用系统成功与否的关键因素之一。 本规范主要从交通信息中心系统开发、设计的实际出发,对用户界面设计进行一定程度上的规范,主要内容为用户界面设计总体原则、窗体布局、界面配色、控件风格、字体、交互信息以及其他等几个方面。 2.总体原则 用户界面设计的总体原则:统一。这也是本规范遵循的最高原则,用户界面的设计,无论是控件、信息提示措辞、界面配色等,都要遵循统一的标准,做到真正的一致。 本规范的施行方法:针对用户界面设计的特殊性,用户界面设计规范队某些方面只进行原则性的规范,具体的内容(比如配色方案用暖色系还是冷色系等)应在每一个应用系统的开发启动之前,由项目小组根据应用系统自身的特点、系统用户对象的特点等信息,确立每一个部分的具体内容,然后在应用系统设计过程当中执行。 3.窗体控件布局 3.1.控件间距 窗体控件布局合理,绝对不能显得拥挤;拥挤的窗体控件布局让人难以理解,因而难以使用。让人看上去,不能太拥挤,也不能太松散。控件对窗体的覆盖率以不高于75%为宜。 控件间隔(垂直):组与组之间间隔15,组内控件间间间隔10。 控件间隔(水平):组与组之间间隔15,组内控件间间间隔10。

人机交互界面设计规范

人机交互界面设计规范 (讨论稿) Hygrand 上海华冠电子设备有限责任公司 Hygrand Electronic Equipment CO., LTD.Shanghai

1. 必须在编码之前完成,否则就成花架子了。 2. GUI规范不是一蹴而就,它和设计相互迭代,彼此补充,相互完善。 3. GUI规范的内容70%是通用原则,涉及产品图形控件的基本属性和构建的基本参数和原则,30% 是与项目或产品特点相适应的内容,这部分内容就是在设计过程中迭代产生。 1.概述 <目的、适用项目、基本风格> 2.通用指导原则 2.1.易用性 理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。如按钮名称应该易懂,用词准确,要与同一界面上的其他按钮易于区分。 <补充易用性细则> 完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。 复选框和选项框要有默认选项,并支持Tab选择。 …… 2.2.规范性 通常界面设计按Windows界面的规范,即包含“菜单条、工具栏、状态栏、滚动条、右键快捷菜单”等的标准格式,界面遵循规范化的程度越高,则易用性相应的就越好。 <补充规范性细则> 工具栏的图标能直观的代表要完成的操作。 标签提示:字体为加重、宋体、黑色、无边框。 对齐方式:左对齐、一般文字、单个数字、日期等。 等待过程:在需等待时间较短(0-10秒)的情况下应将鼠标显示成为沙漏;当需10秒以上时,要显示进度条等。 菜单深度一般要求最多控制在三层以内。 ……

2.3.美观与协调性 界面应该适合美学观点,感觉协调舒适,能在有效的范围内吸引用户的注意力。 <补充美观与协调性细则> 父窗体或主窗体的中心位置应该在对角线焦点附近。 按钮的大小要与界面的大小和空间要协调。 …… 2.4.独特性 在框架符合以上规范的情况下,设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用。 <补充独特性细则> 安装界面上应有单位介绍或产品介绍,并有自己的图标。 登录界面上要有本产品的标志,同时包含公司图标。 …… 2.5.快捷方式 在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户操作得更快一些,在Windows 及其应用软件中快捷键的使用大多是一致的。 <补充快捷方式细则> 文件操作:如打印、关闭相应的快捷键。 系统菜单:如工具、帮助等的快捷键。 …… 2.6.安全性 在界面上通过下列方式来控制出错几率,会大大减少系统因用户人为的错误引起的破坏。 <补充安全性性细则> 应当注意尽可能避免用户无意录入无效的数据。 采用相关控件限制用户输入值的种类。 ……

BS系统界面设计规范

B/S系统界面设计规范 1. 引言 界面美观、操作易用性、维护成本低是评价B/S系统的关键。本规范参考了一些成熟产 品科学的开发方法,将开发过程中的方式、规则等强行的约束。希望藉此来提高用户操作感受,提升B/S产品的质量。 1.1. 编写目的 广义的界面概念包含了除页面布局设计之外,交互性的设计,及人体工程学方面的研究。本规范制订的依据从广义概念出发,总结以往项目的成败经验,目的是从整体上提升公司 B/S类产品的质量、开发效率。从以技术为中心发展为以客户为中心,将类似项目成功的经 验继承和积累下来,将B/S系统与C/S系统开发过程上的区别降低到仅显示控制的极小的层 面。 新的开发方式强调分层,规范出界面设计人员做什么,服务器编程人员做什么,这样就把页面和控制代码两个层面清晰的分开。 1.2. 背景 B/S模式系统以其易部署、易扩展、能够高度集成各种技术的特点,在公司产品线中占 越来越大的比重,.Net、J2ee等技术的发展更是将B/S系统的开发和桌面应用程序开发的工 程方法统一起来,突出服务器端技术,这些变革要求界面设计人员和服务器端编程人员可以应用更加科学的方法合作,团队的合作方式甚至决定了一个系统开发的成败。 目前公司较多的服务器端编程人员仍然处于后ASP时代”的开发方式,表现为前台 页面仍然与服务器代码高度的关联,带来的后果是重复建设、高昂的维护成本或失去控制的 项目,没有充分的发挥出集成开发工具的优势。 在以往的开发方式下界面设计侧重在静态页面的建设上,每个页面作为一个独立的模 块来处理,在页面交互中则是程序员根据自己的习惯来控制,程序对个人的编程风格的依赖 很强,这些在以往开发WEB站点的方式扩展到B/S系统有时是不正确的,甚至是背道而弛 的,当然也不利于规模化的团队合作。 1.3. 定义 术语定义: 效果图:由界面设计人员设计的页面效果图,综合了概要设计的业务需要和整个站点的风格,它规定了页面布局上的每个细节。 容器:即HTML标记的嵌套结构,如在表格-> 行-> 单元格内放置图片,那么可以认为单元格是放置图片的容器。 样式表:即级联式样式表CSS,它是W3C机构在HTML标记语言上扩展的格式语言。非标准交互控件:是通过标准控件组合、扩展等方法以提高特定业务执行效率而进行封装的控件,或概括为用户根据以往的操作经验不能够直接领会出操作方式的交互控件。 2. 界面设计规范细则 总体目标 以规范作为基本原则,在此框架内进行合理的扩展和变化,将站点内的每个模块服从于整个 站点,模块页面与高内聚”的控制代码紧密的结合在一起,同时对应于应用程序基于系统

UI界面设计规范模板

UI设计(流程/界面)规范 一:UI设计基本概念与流程 1.1 目的 规范公司UI设计流程,使UI设计师参与到产品设计整个环节中来,对产品的易用性进行全流程负责,使UI设计的流程规范化,保证UI设计流程的可操作性。 1.2范围 l 界面设计 l 此文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。 1.3 概述 UI设计包括交互设计,用户研究,与界面设计三个部分。基于这三部分的UI设计流程是从一个产品立项开始,UI设计师就应根据流程规范,参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节,履行相应的岗位职责。UI设计师应全面负责产品以用户体验为中心的UI设计,并根据客户(市场)要求不断提升产品可用性。本规范明确规定了UI设计在各个环节的职责和要求,以保证每个环节的工作质量。 1.4 基本介绍 A、需求阶段 软件产品依然属于工业产品的范畴。依然离不开3W的考虑(Who,where,why.)也就是使用者,使用环境,使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人

用(用户的年龄,性别,爱好,收入,教育程度等)。什么地方用(在办公室/家庭/厂房车间/公共场所)。如何用(鼠标键盘/遥控器/触摸屏)。上面的任何一个元素改变结果都会有相应的改变。 除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世,我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适,更合适于我们的最终用户的就是最好的。B、分析设计阶段 通过分析上面的需求,我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界面用于被选。 C、调研验证阶段 几套风格必须保证在同等的设计制作水平上,不能明显看出差异,这样才能得到用户客观真实的反馈。 测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。 调研阶段需要从以下几个问题出发: 用户对各套方案的第一印象 用户对各套方案的综合印象 用户对各套方案的单独评价 选出最喜欢的 选出其次喜欢的 对各方案的色彩,文字,图形等分别打分。 结论出来以后请所有用户说出最受欢迎方案的优缺点。 所有这些都需要用图形表达出来,直观科学。

软件界面设计相关的各项介绍

软件界面设计相关的各项介绍 界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化优化规范化的设计分支。具体包括软件启动封面设计,软 件框架设计,按钮设计,面板设计,菜单设计,标签设计,图标设计,滚动条及状态栏设计,安装过程设计,包装及商品化。 在设计的过程中有较多注意的关键问题,以下列出几点: (1)软件启动封面设计 应使软件启动封面最终为高清晰度的图像,如软件启动封面需在不同的平台、操作系统上使用将考虑转换不同的格式,并且对选用的色彩不 宜超过256 色,最好为216色安全色。软件启动封面大小多为主流显示器分辨率的1/6大。如果是系列软件将考虑整体设计的统一和延续性。在上面应该醒目的标注制作或支持的公司标志、产品商标,软件名称,版本号,网址,版权声明,序列号等信息,以树立软件形象,方便使用者或购买者在软件启动的时候得到提示。插图宜使用具有独立版权的,象征性强的,识别性高的,视觉传达效果好的图形,若使用摄影也应该进行数位处理,以形成该软件的个性化特征。 (2)软件框架设计 软件的框架设计就复杂得多,因为涉及软件的使用功能,应该对该软件产品的程序和使用比较了解,这就需要设计师有一定的软件跟进经验,能够快速的学习软件产品,并且在和软件产品的程序开发员及程序使用对象进行共同沟通,以设计出友好的,独特的,符合程序开发原则的软件框架。软件框架设计应该简洁明快,尽量少用无谓的装饰,应该考虑节省屏幕空间,各种分辨率的大小,缩放时的状态和原则,并且为将来设计的按钮,菜单,标签,滚动条及状态栏预留位置。设计中将整体色彩组合进行合理搭配,将软件商标放在显著位置,主菜单应放在左边或上边,滚动条放在右边,状态栏放在下边,以符合视觉流程和用户使用心理。 (3)软件按钮设计 软件按钮设计应该具有交互性,即应该有3到6种状态效果:点击时状态;鼠标放在上面但未点击的状态;点击前鼠标未放在上面时的状态;点击后鼠标未放在上面时的状态;不能点击时状态;独立自动变化的状态。按钮应具备简洁的图示效果,应能够让使用者产生功能关联反应,群组内按钮应该风格统一,功能差异大的按钮应该有所区别。 (4)软件面板设计

相关文档
最新文档