开发部web界面设计原则.docx

1、开发部web界面设计原则开发部Web界面设计基本原则版本修订历史起止日期作者/修订人更改章节修改描述版本/状态2014.1.16吴建波创建未发布2014.1.17张建斌评审并修改增加如下内容：1、 目的；2、 好用的产品呈现的特征；3、 用户体验的要素；补充了如下内容：1、 出错信息内容和截图补充；2、 数据输入内容和截图补充3、 数据输入内容和截图补充一、 目的用户体验即决定产品如何与用户发生联系并发挥作用的一个重要指标。这一指标恰恰是决定产品成败的关键因素。一个好的用户体验可以提升一个产品的整体形象，从而留住现有的用户（提升用户忠诚度），吸引更多的用户（口碑传播）。任何在用户体验上所作的努

2、力，目的都是为了提高效率。这基本上是以两种主要形式体现出来的：“帮助人们提升效率”和“减少人们犯错的几率”。只有好的用户体验，才会吸引到用户不断登录你的系统。二、 好用的产品呈现的特点：三、 用户体验的要素个Web产品的用户体验要素自下而上分了5个层次。战略层为底层，表现层为最上层。可以想象一个产品就像一颗大树一样。从根到躯干，到枝叶，最后到开花结果。1. 战略层产品的经营者想从这个产品得到些什么，用户又想从产品得到些什么。有些战略目标是显而易见的，而有些战略目标并不是很容易说清楚。就像腾讯最早在做免费聊天软件，谁都不知道它想要干什么。战略层关注的内容主要为：用户需求以及网站目标。2. 范围层

3、(scope)我偏向于把它理解成为功能层，即你的这个产品都可以干些什么。这个产品有哪些功能。例如“”，能发图片，发文字，能互相关注，这就是范围层需要考虑的东西。范围层关注的内容为：产品的功能设计和信息的内容需求（定义内容的详细属性）。3. 结构层(structure)结构层比较抽象，主要用于设计用户如何到达某个页面，当完成了这个页面的任务以后，用户又要去什么地方。框架层定义了导航条上各项的排列方式，而结构层则确定了哪些类别应该出现在导航条上。结构层关注的内容：产品的交互设计和信息架构设计。4. 框架层(skeleton)网页中的图片，文字，按钮，表格不是胡乱摆放在一起的，而是有一个组织结构，有

4、一个布局设计，能达到这些元素之间的最大效果。例：在我需要看数据的时候有一个表格，而不是文字或者其他的按钮。框架层关注的内容：信息设计、界面设计和导航设计。5. 表现层(surface)表现层就用户直接看到的东西，用户看得见摸得到（用鼠标）的东西，像网页上的图片，文字等等。表现层需要关注的内容：视觉设计。四、 显示信息一致性的原则无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。界面直观、对用户透明：用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用应用系统。给用户统一感觉，不觉得混乱，心情愉快，支持度增加。例如下面的三个页面的布局风格、色

5、调是一致的。五、 以用户为中心原则明确用户是所有系统处理的核心，不应该由应用程序来决定处理过程，所以用户界面应当由用户来控制应如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。六、 易用性原则用户不用查阅帮助就能知道该界面的功能并进行相关正确的操作。完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式。完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题。如图界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能。界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口

6、上较醒目的位置。同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab默认按钮要支持Enter操作，即按Enter后自动执行默认按钮对应操作。可写控件检测到非法输入后应给出说明并能自动获得焦点。复选框和选项框按选择几率的高底而先后排列。复选框和选项框要有默认选项，并支持Tab选择。专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。七、 鼠标与键盘一致性原则尽量遵循可不用鼠标的原则：应用中的功能只用键盘也应当可以完成。但是，许多鼠标的操作，如双击、拖动对象等，并不能简单地用键盘来模拟即可实现，

7、此类操作可适当增加操作按钮。八、 系统响应时间原则系统响应时间应该适中，响应时间过长，用户就会感到不安和沮丧，而响应时间过快也会影响到用户的操作节奏，并可能导致错误。因此在系统响应时间上坚持如下原则： 0-5秒鼠标显示成为沙漏； 5秒以上显示处理窗口，或显示进度条； 一个长时间的处理完成时应给予完成警告信息。九、 出错信息和警告原则出错信息和警告是指出现问题时系统给出的坏消息，对于出错信息和警告应该遵循以下原则： 信息以用户可以理解的术语描述； 信息简明扼要，指出出错原因并提供解决办法提示。利用某种方式提醒用户可能出错如何设置出错信息 不要只告诉用户操作无法完成或者操作失败 不要仅仅给出出错代

8、码，还应当给出该错误的含义 错误要尽可能明确一十、 信息及隐藏显示原则信息显示遵循以下原则： 只显示与当前用户语境环境有关的信息； 不要用数据将用户包围，使用便于用户迅速吸取信息的方式表现信息； 使用一致的标记、标准缩写和颜色，显示信息的含义应该非常明确，用户不必再参考其它信息源； 产生有意义的出错信息； 使用缩进和文本来辅助理解； 使用窗口分隔控件分隔不同类型的信息； - 分逻辑层 高效地使用显示器的显示空间，但要避免空间过于拥挤。隐藏 用户不需要同时看到所有非必填的信息； 如果表单需要多个步骤完成，用户不需要同时看到所有步骤的信息； 在必要的时候才显示这些信息；一十一、 数据输入原则数据输

9、入遵循以下原则：尽量减少用户输入动作的数量；维护信息显示和数据输入的一致性；交互应该是灵活的，对键盘和鼠标输入的灵活性提供支持；在当前动作的语境中使不合适的命令不起作用；- 人为的误操作也要考虑进去让用户控制交互流，用户可以跳过不必要的动作、改变所需动作的顺序（如果允许的话）以及在不退出系统的情况下从错误状态中恢复；为所有输入的动作提供帮助；消除冗余输入。可能的话提供默认值、绝不要让用户提供程序中可以自动获取或计算出来的信息。及时性：一十二、 合理性原则一十三、 合理性原则屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置窗体时要注意利用这两个位置。 父窗体

10、或主窗体的中心位置应该在对角线焦点附近； 子窗体位置应该在主窗体的左上角或正中； 多个子窗体弹出时应该依次向右下方偏移，以显示窗体出标题为宜； 重要的命令按钮与使用频繁的按钮要放在界面上醒目的位置； 与正在进行的操作无关的按钮应该加以屏蔽或使其disable； 对可能造成数据无法恢复的操作必须提供确认信息； 非法的输入或操作应有足够的提示说明； 对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，避免形成无限期的等待； 提示、警告、错误说明应该清楚、明了、恰当。一十四、 美观与协调性原则界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。长宽接近黄金点比例，

11、切忌长宽比例失调、或宽度超过长度。布局要合理,不宜过于密集，也不能过于空旷，合理的利用空间。按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置。按钮的大小要与界面的大小和空间要协调。避免空旷的界面上放置很大的按钮。放置完控件后界面不应有很大的空缺位置。字体的大小要与界面的大小比例协调, 通常使用的字体中宋体9-12较为美观。 前景与背景色搭配合理协调，反差不宜太大。如果使用其他颜色，主色要柔和，具有亲和力，坚决杜绝刺目的颜色。大型系统常用的主色有“#E1E1E1”、“#EFEFEF”、“#C0C0C0”等。界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。如果能给用户提供自定义界面风格则更好，由用户自己选择颜色、字体等。