UI设计概述.docx

UI设计概述.docx

《UI设计概述.docx》由会员分享，可在线阅读，更多相关《UI设计概述.docx（6页珍藏版）》请在冰豆网上搜索。

UI设计概述

阅读使人快乐，成长需要时间

UI设计概述

　　UI设计在项目开发过程中工作量最大、最艰苦也是最难以控制的阶段。

不管一座大楼的设计蓝图多宏伟，若没有管道工、泥瓦匠、水电工等各种工匠一砖一瓦地艰辛积累，密切协作，这座大楼始终是空中楼阁、海市蜃楼。

　　一、界面设计

　　1）深入用户分析

　　要进行界面开发设计，用户分析是第一步。

总所周知，进行任务和用户分析，以及相关调研的必要性和重要性。

用户是计算机资源，软件界面信息的使用者，由于目前计算机系统以及相关的信息技术应用范围很广，其用户范围也遍及各个领域。

我们必须了解各类用户的习性，技能、知识和经验，以便预测不同类别的用户对界面有什么不同的需要与反应，为交互系统的分析设计提供依据和参考，使设计出的交互系统更适合于各类用户的使用。

由于用户具有知识、视听能力、智能、记忆能力、可学习性、动机、受训练程度、以及易遗忘、易出错等特性，使得对用户的分类、分析和设计变得更加复杂化。

另外，为了设计友好而又人性化的界面，也必须考虑各类不同类型用户的人文因素。

　　在软件设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需求。

　　用户交互要考虑到目标用户的不同引起的交互设计重点的不同。

　　例如：

对于科学用户和对于电脑入门用户的设计重点就不同。

　　2）设定合理的交互方式

　　软件界面是人—机之间的信息界面，交互是一个结合计算机科学、美学、心理学、人机工程学等工业和商业领域的行为，其目标是促进设计，执行和优化信息与通信系统以满足用户的需要。

　　在交互过程中，交互设计关系到用户界面的外观与行为，它不完全受软件的约束。

界面设计师以及决定如何与用户进行交互的工程师应该在这一领域深入研究。

在界面开发过程中，他们必须贴近用户，或者与用户一道来讨论并得出结果，所以他们的工作是较为辛苦但是最具有意义的。

　　另一方面，界面与软件代码的生成，代码本身的意义以及功能的实现是紧密联系的。

因此编译代码的人同样也应该在这方面做深入的研究。

过去，编码人员只是单独地进行软件研发，而缺少必要的美学知识和界面专门技术来处理交互的问题。

不幸的是，最终的结果往往不是用户所期望的。

对于用户而言，最好的交互方式让程序员去实现往往是最难的，由此矛盾出现了，这使得很多专家或者工程师肤浅地应付一些交互方面的问题。

以至于在软件开发完成之后，这些专家和工程师惊讶地发现，用户对他们所实现的特征感到一片茫然，不知所措，通常选用另外一种方式进行交互。

不同类型的目标用户有不同的交互习惯。

这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。

　　当然还要在此基础上通过调研分析找到用户希望达到的交互效果，并且以流程确认下来。

　　3）提示和引导用户

　　软件最终是用户的使用工具。

因此应该由用户来操作和控制软件。

软件响应用户的动作和设定的规则。

　　交互系统的反馈是指用户从计算机一方得到信息，表示计算机对用户的动作所做的反应。

对于用户交互的结果和反馈，提示用户结果和反馈信息，引导用户进行用户需要的下一步操作。

如果系统没有反馈，用户就无法判断他的操作是否为计算机所接受，是否正确，以及操作的效果是什么.反馈信息的呈现方式可以是多种多样的，如文本、图形和声音等。

　　二、界面设计遵循的规则：

　　1）一致性原则

　　每个新的系统对用户来说都是一次新的学习过程，如果界面风格经常变化，不保持统一，无疑更增加了用户的学习难度，也许会导致用户的厌烦。

比如：

第一页的导航条是图片型的放在页面顶部横排的，而在第二页导航条却成了文字型居左竖排，用户会为了捉摸不清设计师的意图而大光其火。

再比如，有些设计师考虑到用户方便，在页面上放置了后退的按钮，但是要是不注意保持一致的话，用户也许会糊涂后退、回首页、BACK、上一页这些按钮究竟有什么区别?

也许非常恼火你是不是拿他在开涮!

所以在界面风格设计上应该遵循以下原则：

　　设计目标要一致

　　软件中往往存在多个组成部分（组件、元素）。

无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。

　　如在提示、菜单和帮助中产生相同的术语;具体是指在不同的应用系统中都具有相似的界面外观、布局、相似的交互方式以及相似的信息显示等。

界面设计保持高度一致性，用户不必进行过多的学习就可以掌握其共性;还可以把局部的知识和经验推广使用到其他场合。

人机界面设计的一致性要求对构成易学易用是极为重要的。

　　这样得到的好处：

　　1：

使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解。

　　2：

降低培训、支持成本，支持人员不会行费力逐个指导。

　　3：

给用户统一感觉，不觉得混乱，心情愉快，支持度增加。

　　元素外观要一致

　　交互元素的外观往往影响用户的交互效果。

同一个（类）软件采用一致风格的外观，对于保持用户焦点，改进交互效果有很大帮助。

遗憾的是如何确认元素外观一致没有特别统一的衡量方法。

因此需要对目标用户进行调查取得反馈。

　　交互行为要一致

　　在交互模型中，不同类型的元素用户触发其对应的行为事件后，其交互行为需要一致。

　　例如：

所有需要用户确认操作的对话框都至少包含确认和放弃两个按钮。

　　对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。

但是我们可以看到这个理念虽然在大部分情况下正确，但是的确有相反的例子证明不按照这个理念设计，会更加简化用户操作流程。

　　2）界面元素对象化

　　在程序设计中需要注重模块化，而界面设计中对象化同样非常重要。

将界面元素对象化，比如底部版权信息、导航条等，图片、JS也尽可能复用，比如站点标志、搜索按钮、滚动信息的JS文件等等;

　　建立标准的文档管理和设计规范：

界面设计涉及的要素比较多，文件类型复杂，而界面文件往往还需要另外通过程序进行编译，这就要求了界面设计人员必须建立规的设计规范和标准的文档管理方法：

　　*制定文件命名标准

　　*设定文件统一路径

　　*保存原始创作文件（例如PSD、Fla源文件）

　　*最终完成文件（经过用户认可的文件）

　　*单独管理摸版文件（经过编译或嵌入程序的文件）

　　*考虑用户偏好习惯和方便性：

　　我们经常可以听到界面设计师说：

“怎么在我机器上看得好好的，怎么在你那里就变样了?

”其实道理很简单，用户的操作环境和习惯与设计环境是有差别的，界面设计同程序一样需要进行测试，主要测试的对象为：

　　*浏览器类型和版本兼容问题：

　　假如有个很重要的菜单是需要IE5.5支持的，但是用户万一使用的是IE4.0版本，那么这个菜单就再也打不开，结果可想而知;

　　*分辨率：

　　界面设计师的屏幕也许是17寸的，分辨率甚至做到1280×960都是可以接受的，但是用户的如果用的14寸显示器，分辨率只能达到640×480，界面布局看起来会很可笑;

　　*字体大小：

　　利用样式表精确控制页面元素，特别是字体是很重要的。

有不少用户喜欢更改浏览器默认的字体显示大小，当设计师看到用户将字体显示调整成最大而将表格撑得乱七八糟的时候，或许会痛心疾首的;

　　*考虑特殊情况：

　　用户或许在浏览器设置了禁止显示图片或禁止JS脚本等，有必要为图片设置好尺寸以免影响其他元素的显示，并有其他的方式代替JS需要显示的效果和信息。

　　*编写帮助：

　　无论多么出色的界面设计对用户来说都是陌生的，那么编写站点帮助或软件帮助是个非常有效的办法，把你的设计意图和使用介绍明明白白地告诉用户，在用户遇到困难的时候能够得到最快的帮助，不但可以降低用户的不满程度，同时可以帮助用户更加系统深入地学习和掌握。

　　3）可用性原则

　　易理解

　　软件要为用户使用，用户必须可以理解软件各元素对应的功能。

　　如果不能为用户理解，那么需要提供一种非破坏性的途径，使得用户可以通过对该元素的操作，理解其对应的功能。

　　例如：

删除操作元素。

用户可以点击删除操作按钮，提示用户如何删除操作或者是否确认删除操作，用户可以更加详细的理解该元素对应的功能，同时可以取消该操作。

　　可达到

　　用户是交互的中心，交互元素对应用户需要的功能。

因此交互元素必须可以被用户控制。

　　用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。

　　要注意的是交互的次数会影响可达到的效果。

当一个功能被深深隐藏（一般来说超过4层）那么用户达到该元素的几率就大大降低了。

　　可达到的效果也同界面设计有关。

过于复杂的界面会影响可达到的效果。

　　可控制

　　软件的交互流程，用户可以控制。

　　功能的执行流程，用户可以控制。

　　如果确实无法提供控制，则用能为目标用户理解的方式提示用户。

　　三、界面设计的基本步骤

　　1）用户调研

　　拟定需求，综合分析得到产品使用情况的一个大致概貌。

　　2）产品分析

　　根据产品的复杂性、难易程度等，详细分解任务动作，进行合理分工，确定适合于用户的交互方式;

　　3）产品定位

　　在了解了用户，了解了相关产品后，针对产品做出的定位才会更加明确。

　　4）环境分析

　　确定系统的硬、软件支持环境及接口，向用户提供各类文档要求等;

　　5）屏幕显示和布局设计

　　制定屏幕显示信息的内容和界面显示的次序，然后进行屏幕总体布局和显示结构设计。

　　6）帮助和出错信息设计

　　决定和安排帮助信息和出错信息的内容，组织查询方法，井进行出错信息、帮助信息的显示格式设计;

　　7）确定界面

　　根据用户的自身特性.以及产品分析和定位，确定使用的开发环境和产品布局得出产品的界面设计结构图，确立产品界面原型：

　　8）视觉设计

　　包括为吸引用户的注意所进行的增强显示的设计，例如，采取运动，改变形状、大小、颜色、亮度、环境等特征（如加线，加框、前景和背景设计等），还包括创新的设计以增加亮点，或者应用多媒体手段等;

　　9）原型试用

　　在经过初步系统需求分析后，开发出一个满足系统摹本要求的、简单的、可运行系统给用户试用，让用户进行评价提出改进意见，进一步完善系统的需求规格和系统设计;

　　10）综合测试与讦估

　　这个阶段的关键任务是通过各类型的测试与评估，使系统达到预定的要求.它可以采取多种方法，如试验法、用户反馈、专家分析、软件测试等，对软件界面的诸多因素如功能性、可靠性、效率、美观性等进行讦估，以获取用户对界面的满意度，便于尽早发现错误或者不满意的地方，以改进和完善系统设计。

　　11）维护阶段

　　维护阶段的关键任务是：

通过各类必要的维护活动，使系统持久地满足用户的需要。

111

123489

147

127

111

1234

189

156