UI设计概述.docx

1、UI设计概述阅读使人快乐成长需要时间UI 设计概述UI 设计在项目开发过程中工作量最大、 最艰苦也 是最难以控制的阶段。不管一座大楼的设计蓝图多宏 伟，若没有管道工、泥瓦匠、水电工等各种工匠一砖 一瓦地艰辛积累，密切协作，这座大楼始终是空中楼 阁、海市蜃楼。一、界面设计1）深入用户分析要进行界面开发设计，用户分析是第一步。总所 周知，进行任务和用户分析，以及相关调研的必要性 和重要性。用户是计算机资源，软件界面信息的使用 者，由于目前计算机系统以及相关的信息技术应用范 围很广，其用户范围也遍及各个领域。我们必须了解 各类用户的习性，技能、知识和经验，以便预测不同 类别的用户对界面有什么不同的需

2、要与反应，为交互 系统的分析设计提供依据和参考，使设计出的交互系 统更适合于各类用户的使用。由于用户具有知识、视 听能力、智能、记忆能力、可学习性、动机、受训练程度、以及易遗忘、易出错等特性，使得对用户的分 类、分析和设计变得更加复杂化。另外，为了设计友 好而又人性化的界面，也必须考虑各类不同类型用户 的人文因素。在软件设计过程中，需求设计角色会确定软件的 目标用户，获取最终用户和直接用户的需求。用户交互要考虑到目标用户的不同引起的交互设 计重点的不同。例如：对于科学用户和对于电脑入门用户的设计 重点就不同。2）设定合理的交互方式软件界面是人机之间的信息界面，交互是一个 结合计算机科学、美学、

3、心理学、人机工程学等工业 和商业领域的行为，其目标是促进设计，执行和优化 信息与通信系统以满足用户的需要。在交互过程中，交互设计关系到用户界面的外观 与行为，它不完全受软件的约束。界面设计师以及决 定如何与用户进行交互的工程师应该在这一领域深入 研究。在界面开发过程中，他们必须贴近用户，或者 与用户一道来讨论并得出结果，所以他们的工作是较 为辛苦但是最具有意义的。另一方面，界面与软件代码的生成，代码本身的 意义以及功能的实现是紧密联系的。因此编译代码的 人同样也应该在这方面做深入的研究。过去，编码人 员只是单独地进行软件研发，而缺少必要的美学知识 和界面专门技术来处理交互的问题。不幸的是，最终

4、 的结果往往不是用户所期望的。对于用户而言，最好 的交互方式让程序员去实现往往是最难的，由此矛盾 出现了，这使得很多专家或者工程师肤浅地应付一些 交互方面的问题。以至于在软件开发完成之后，这些 专家和工程师惊讶地发现，用户对他们所实现的特征 感到一片茫然，不知所措，通常选用另外一种方式进 行交互。不同类型的目标用户有不同的交互习惯。这 种习惯的交互方式往往来源于其原有的针对现实的交 互流程、已有软件工具的交互流程。当然还要在此基础上通过调研分析找到用户希望 达到的交互效果，并且以流程确认下来。3）提示和引导用户软件最终是用户的使用工具。因此应该由用户来 操作和控制软件。软件响应用户的动作和设定

5、的规则。交互系统的反馈是指用户从计算机一方得到信 息，表示计算机对用户的动作所做的反应。对于用户 交互的结果和反馈，提示用户结果和反馈信息，引导 用户进行用户需要的下一步操作。 如果系统没有反馈， 用户就无法判断他的操作是否为计算机所接受，是否 正确，以及操作的效果是什么 . 反馈信息的呈现方式可 以是多种多样的，如文本、图形和声音等。二、界面设计遵循的规则：1)一致性原则 每个新的系统对用户来说都是一次新的学习过程，如果界面风格经常变化，不保持统一，无疑更增 加了用户的学习难度， 也许会导致用户的厌烦。 比如： 第一页的导航条是图片型的放在页面顶部横排的，而 在第二页导航条却成了文字型居左竖

6、排，用户会为了 捉摸不清设计师的意图而大光其火。再比如，有些设 计师考虑到用户方便，在页面上放置了后退的按钮， 但是要是不注意保持一致的话， 用户也许会糊涂后退、 回首页、 BACK、上一页这些按钮究竟有什么区别也许非常恼火你是不是拿他在开涮 ! 所以在界面风格设计 上应该遵循以下原则：设计目标要一致软件中往往存在多个组成部分 （组件、元素 ） 。无 论是控件使用，提示信息措辞，还是颜色、窗口布局 风格，遵循统一的标准，做到真正的一致。如在提示、菜单和帮助中产生相同的术语 ; 具体是 指在不同的应用系统中都具有相似的界面外观、 布局、 相似的交互方式以及相似的信息显示等。界面设计保 持高度一致

7、性，用户不必进行过多的学习就可以掌握 其共性 ; 还可以把局部的知识和经验推广使用到其他 场合。人机界面设计的一致性要求对构成易学易用是 极为重要的。这样得到的好处：1：使用户使用起来能够建立起精确的心里模型， 使用熟练了一个界面后，切换到另外一个界面能够很 轻松的推测出各种功能， 语句理解也不需要费神理解。2：降低培训、支持成本， 支持人员不会行费力逐 个指导。3：给用户统一感觉，不觉得混乱，心情愉快，支 持度增加。元素外观要一致交互元素的外观往往影响用户的交互效果。同一 个（类）软件采用一致风格的外观， 对于保持用户焦点， 改进交互效果有很大帮助。遗憾的是如何确认元素外 观一致没有特别统一

8、的衡量方法。因此需要对目标用 户进行调查取得反馈。交互行为要一致在交互模型中，不同类型的元素用户触发其对应 的行为事件后，其交互行为需要一致。例如：所有需要用户确认操作的对话框都至少包 含确认和放弃两个按钮。对于交互行为一致性原则比较极端的理念是相同 类型的交互元素所引起的行为事件相同。但是我们可 以看到这个理念虽然在大部分情况下正确，但是的确 有相反的例子证明不按照这个理念设计，会更加简化 用户操作流程。2） 界面元素对象化在程序设计中需要注重模块化，而界面设计中对 象化同样非常重要。将界面元素对象化，比如底部版 权信息、导航条等，图片、 JS 也尽可能复用，比如站 点标志、搜索按钮、滚动信

9、息的 JS 文件等等 ;建立标准的文档管理和设计规范：界面设计涉及 的要素比较多，文件类型复杂，而界面文件往往还需 要另外通过程序进行编译，这就要求了界面设计人员 必须建立规的设计规范和标准的文档管理方法：*制定文件命名标准*设定文件统一路径*保存原始创作文件 （ 例如 PSD、Fla 源文件 ）*最终完成文件 （ 经过用户认可的文件 ）*单独管理摸版文件 （ 经过编译或嵌入程序的文 件）*考虑用户偏好习惯和方便性：我们经常可以听到界面设计师说：“怎么在我机 器上看得好好的，怎么在你那里就变样了”其实道理 很简单，用户的操作环境和习惯与设计环境是有差别的，界面设计同程序一样需要进行测试，主要测

10、试的 对象为：*浏览器类型和版本兼容问题：假如有个很重要的菜单是需要 IE5.5 支持的，但 是用户万一使用的是 IE4.0 版本，那么这个菜单就再 也打不开，结果可想而知 ;*分辨率：界面设计师的屏幕也许是 17 寸的，分辨率甚至做 到 1280 960 都是可以接受的，但是用户的如果用的 14 寸显示器，分辨率只能达到 640480，界面布局看 起来会很可笑 ;*字体大小：利用样式表精确控制页面元素，特别是字体是很 重要的。有不少用户喜欢更改浏览器默认的字体显示 大小，当设计师看到用户将字体显示调整成最大而将 表格撑得乱七八糟的时候，或许会痛心疾首的 ;考虑特殊情况：用户或许在浏览器设置了

11、禁止显示图片或禁止 JS脚本等，有必要为图片设置好尺寸以免影响其他元 素的显示，并有其他的方式代替 JS 需要显示的效果和 信息。*编写帮助：无论多么出色的界面设计对用户来说都是陌生 的，那么编写站点帮助或软件帮助是个非常有效的办 法，把你的设计意图和使用介绍明明白白地告诉用户， 在用户遇到困难的时候能够得到最快的帮助，不但可 以降低用户的不满程度，同时可以帮助用户更加系统 深入地学习和掌握。3）可用性原则易理解软件要为用户使用，用户必须可以理解软件各元 素对应的功能。如果不能为用户理解，那么需要提供一种非破坏 性的途径，使得用户可以通过对该元素的操作，理解 其对应的功能。例如：删除操作元素。

12、用户可以点击删除操作按钮，提示用户如何删除操作或者是否确认删除操作， 用户可以更加详细的理解该元素对应的功能，同时可 以取消该操作。可达到用户是交互的中心，交互元素对应用户需要的功 能。因此交互元素必须可以被用户控制。用户可以用诸如键盘、鼠标之类的交互设备通过 移动和触发已有的交互元素达到其它在此之前不可见 或者不可交互的交互元素。要注意的是交互的次数会影响可达到的效果。当 一个功能被深深隐藏 （一般来说超过 4 层）那么用户达 到该元素的几率就大大降低了。可达到的效果也同界面设计有关。过于复杂的界 面会影响可达到的效果。可控制软件的交互流程，用户可以控制。功能的执行流程，用户可以控制。如果确

13、实无法提供控制，则用能为目标用户理解 的方式提示用户。三、界面设计的基本步骤1）用户调研拟定需求，综合分析得到产品使用情况的一个大 致概貌。2）产品分析根据产品的复杂性、难易程度等，详细分解任务动作，进行合理分工，确定适合于用户的交互方式3）产品定位在了解了用户，了解了相关产品后，针对产品做 出的定位才会更加明确。4） 环境分析确定系统的硬、软件支持环境及接口，向用户提供各类文档要求等 ;5）屏幕显示和布局设计制定屏幕显示信息的内容和界面显示的次序，然 后进行屏幕总体布局和显示结构设计。6） 帮助和出错信息设计决定和安排帮助信息和出错信息的内容，组织查 询方法，井进行出错信息、 帮助信息的显示

14、格式设计 ;7）确定界面根据用户的自身特性 . 以及产品分析和定位， 确定 使用的开发环境和产品布局得出产品的界面设计结构 图，确立产品界面原型：8）视觉设计包括为吸引用户的注意所进行的增强显示的设 计，例如，采取运动，改变形状、大小、颜色、亮度、 环境等特征 （ 如加线，加框、前景和背景设计等 ） ，还 包括创新的设计以增加亮点， 或者应用多媒体手段等 ;9）原型试用在经过初步系统需求分析后，开发出一个满足系 统摹本要求的、简单的、可运行系统给用户试用，让用户进行评价提出改进意见，进一步完善系统的需求 规格和系统设计 ;10）综合测试与讦估这个阶段的关键任务是通过各类型的测试与评 估，使系统达到预定的要求 . 它可以采取多种方法， 如 试验法、用户反馈、专家分析、软件测试等，对软件 界面的诸多因素如功能性、可靠性、效率、美观性等 进行讦估，以获取用户对界面的满意度，便于尽早发 现错误或者不满意的地方，以改进和完善系统设计。11）维护阶段维护阶段的关键任务是：通过各类必要的维护活动，使系统持久地满足用户的需要。1111234891471271111234189156