软件开发中的人机界面设计方法

《软件开发中的人机界面设计方法》由会员分享，可在线阅读，更多相关《软件开发中的人机界面设计方法（3页珍藏版）》请在金锄头文库上搜索。

1、55 2009年第12期软件开发与设计 信息与电脑 China Computer design patterns; UCD; WPF 图3.1 以用户为中心的人机界面设计 方法步骤 56 2009年第12期软件开发与设计 信息与电脑 China Computer&Communication 具和用户可能遇到的各种约束。可能的话，还应当深入到实际的使用 场景中去。设计师可以通过与用户交流，让用户在工作时边想边说， 并了解用户执行任务的过程，找到有利于用户操作的设计，而不是硬 要用户说出自己的想法。因为人们在描述和实际操作之间往往大相径 庭，常常遗忘或省略一些例行任务或表面上无足轻重的细节，而这些

2、 细节有时往往是界面设计的关键所在。 3.1.2 分析需求 完成用户模型定义后，需要定义和分析用户将履行的任务，寻找 与任务相关的用户心智和概念模型。对观测来的结果进行分析，并总 结出几个主要的设计主题。通常用视觉化的形式(视频、图画、剧本 等) 来展示给设计团队，以便突出重点，让他们有思考的基础。 分析需求有很多种方式，主要目的是为了将用户的需求展示给设 计团队并让团队的成员们理解用户的需求到底是什么。但是软件开发 的经验告诉我们，用户的需求目标很难被开发团队完全理解，因为用 户的需求被抽象、分解后，细节的丢失比较严重。开发团队需要一种 帮助机制来推动对于用户需求的理解和抽象。 3.1.3

3、架构产品 在完成用户建模和需求之后，就可以使用这些关于任务及其步 骤的信息构建草图，进一步构建出产品的原型。这种原型描述粒度较 粗，但其优点是简单、易于理解和操作。我们可以使用各种各样的办 法构建原型。例如可以用故事板、剧本等可视化地描述用户使用产品 的过程，也可以使用原型工具来模拟过程，以此说明产品是如何运行 的。在架构人机界面的原型时，也应考虑到使用者界面的设计标准来 架构技术框架。例如，用户机能及其生理特征是在以用户为中心的设 计中应该考虑的问题。原型是很好的测试设计的方法，它能够帮助检 验界面设计方案在多大程度上锲合用户的操作。想象一种新产品可能 适合自然生活方式和用户态度，是常见的构

4、建方式，并且可以记录用 户的思维方式、一些潜在的操作细节以及操作习惯。 3.1.4 用户反馈 一个成功的产品离不开一个成功的用户界面，而界面则是用户操 作软件的接口。人机界面评估就是把构成人机界面的软、硬件系统按 其性能、功能、界面形式、可用性等方面进行评估，这里不仅仅要与 人机界面预定的标准进行比较，更重要的是进行用户测试。 界面与逻辑分离 对于软件开发人员来说，人机界面的设计并不是仅仅编程实现那 么简单。一直以来，虽然开发人员绞尽脑汁将界面设计的更加绚丽、 互动感更强，这大大的增加了开发人员的工作量。因为开发一个完美 的用户界面，不仅需要计算机领域的相关知识，还要用到心理学、艺 术学、社会

5、学等各个领域内的知识。 能把软件的界面设计和逻辑设计分开，是多年来程序开发人员的 梦想。而当下对于界面设计与逻辑设计分离的最佳方案，当数微软在 Vista上应用的新一代图形系统WPF了。 3.2 WPF简介 WPF是微软新一代图形系统，运行在.NET Framework 3.0架构 下，为用户界面、2D/3D 图形、文档和媒体提供了统一的描述和操作 方法。基于DirectX 9/10技术的WPF不仅带来了前所未有的3D界面， 而且其图形向量渲染引擎也大大改进了传统的2D界面。它提供了丰富 的.NET UI 框架，集成了矢量图形，丰富的流动文字支持，3D视觉效 果和强大无比的控件模型框架。最重要

6、的，是它能够清晰而又有效的 将用户界面和程序实现分开。它使得设计可视化的用户界面的设计者 和编写内部核心代码的开发人员可以并行工作。 使用WPF开发模型，界面设计人员可以直接使用Microsoft Expression Blend 来设计界面，最终完成的方案又可以直接拿给软件 开发人员。由于开发人员可以直接使用设计出的界面成果，在其中加 入程序的逻辑。 3.3 WPF与XAML 针对Vista操作系统，微软提供了专门的界面开发语言XAML （eXtensible Application Markup Language，可扩展应用程序标记语 言）。XAML作为微软Vista操作系统的界面描述语言

7、，它可对WPF程 序的所有界面元素进行定制，从而构建炫丽夺目的软件界面。 XAML作为界面描述语言，它最终会被编译成.Net后台代码。因 此，它能够同后台进行逻辑处理的.NET语言如C#、J#、C+、VB等 协同工作，其工作性质类似于ASP.NET中的HTML。XAML的产生， 使得界面描述代码和程序代码得以分开，从而提高了开发效率并有利 于团队开发。 3.4 WPF的设计制作 大多数WPF程序都将同时包含XAML代码和程序代码。开发时一 般分成两步： 1)使用XAML定义程序界面（如前所述，可以手工编写，也可以 采用Experssion Blend等可视化工具编写）， 2)用.NET语言（C

8、#, VB.Net等）编写相应的逻辑代码。和ASP. NET类似，逻辑代码既可以直接嵌入XAML文件中，也可保存为独立 的代码文件。 XAML并非设计WPF程序所必须，我们依然可以按照传统方式使 用程序代码来实现界面设计制作。但是，如果使用XAML，界面设计 和逻辑设计就可以完全分离。这样，不但使程序的开发和维护更加方 便，而且当进行团队开发时，可真正实现“专业的人做专业的事”， 把界面设计交给专业的美术设计师们去完成，而让我们精力和时间都 宝贵的程序员们专心致志于业务逻辑的实现。真正做到“各尽其能， 各施其职”，最终得到一个功能强大、界面一流的WPF程序。 WPF与普通的WinForm窗口的

9、比较如下图所示： 3.5 MVVM设计模式 MVVM（Model-View-ViewModel）框架的由来，便是MVP （Model-View-Presenter）模式与WPF结合的应用方式时发展演变过 来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特 性揉合进去，以应对客户日益复杂的需求变化。WPF的数据绑定与 Presentation Model相结合是非常好的做法，使得开发人员可以将View 和逻辑分离出来，但这种数据绑定技术非常简单实用，也是WPF所 特有的，所以我们又称之为MVVM。这种模式跟经典的MVP（模式 很相似，除了你需要一个为View量身定制的Model，这个

10、Model就是 ViewModel。ViewModel包含所有界面特定的接口和属性，并由一个 图4.1 WPF程序窗口“FUN!”与Windows窗口比较（摘自网络） 57 2009年第12期软件开发与设计 信息与电脑 China Computer&Communication ViewModel 的视图的绑定属性，并可获得二者之间的松散耦合，因 此，需要在ViewModel 直接更新视图中编写相应代码。 View绑定到ViewModel，然后执行一些命令在向它请求一个动 作。而反过来，ViewModel跟Model通讯，告诉它更新来响应界面。 这样便使得为应用构建人机界面非常的容易。往一个应用

11、程序上贴一 个界面越容易，外观设计师就越容易使用Blend来创建一个漂亮的界 面。同时，当界面和功能越来越松耦合的时候，功能的可测试性就越 来越强。 在MVP模式中，为了让界面层能够从逻辑层上分离下来，设计 图4.2 MVVM架构图 师们在界面层与逻辑层之间加了一层Interface。无论是界面开发人员 还是数据开发人员，都要尊重这个契约、按照它进行设计和开发。这 样，理想状态下，无论是Web还是Window应用程序，都可以使用同一 套数据逻辑了。 4. 结论 如果把一款软件比作一个人，那么人机界面就是一个人的外表。 爱美之心人皆有之，人机界面的好坏，直接影响到用户的体验度。应 用以用户为中心

12、的设计方法，可以更好地满足用户的需求。让用户在 使用软件的过程中，直觉上感到好用，并且有一个愉快的心情。用户 对使用体验的肯定将造就顾客的忠诚度及公司名誉。毋庸置疑，未来 的人机界面设计将更加关注用户的感受。 而对于软件开发者来说，界面与逻辑解耦是所有程序开发人员 所关注并一直努力的目标，而使用WPF/C#开发模式，能够比较轻松 的解决这一难题，设计模式也将从MVP（Model-View-Presenter）向 MVVM（Model-View-ViewModel）转化，使得界面层与逻辑层剥离 开来，这样对于开发者，可以专人专用，界面设计人员关注界面的布 局以及美工，程序开发人员关注底层的逻辑设

13、计。既关注了用户的体 验，同时又减轻了开发人员的负担。用户与开发兼顾，增强了用户体 验，降低了开发成本。 参考文献: 1贾晓辉, 董智勇, 乐嘉锦. 多通道人机界面设计及应用. 计算机应 用软件, 2008(25):121-122. 2梅云. 感性设计：人机界面设计新思维. 科技资讯, 2008(9):217. 3褚中苇 魏东. 交互设计在人机界面设计中的应用. 艺术与设计, 2009:93-95. 4夏敏燕, 王琦. 以用户为中心的人机界面设计方法探讨. 上海电机 学院学报, 2008(11):201-202. 5林涛, 应晶. 基于剧本的目标模型开发框架. 计算机科学, 2000(27):

14、23-26. 免在同一个帧中同时调用它们。 2、在数据量大的关键帧前面设计一些数据量小的帧序列。在播 放这些帧序列的同时，将会预先下载后面的大数据量内容，从而缩短 观众的等待时间。 3、无法避免大数据量的关键帧下载时，可设计一些不受主时间 线控制的动画内容，使得画面不至于完全停止，比如在舞台上放置有 动画内容的Movie Clip。 五、其他细节 1、将“库”面板中没有用到的元件删除掉。 2、在测试界面下，设置较低的传输速率来测试播放效果，有助 于更好的发现问题。 3、尽量避免在作品的开始出现停顿。先让观众尝点味道很重 要，如果读者的作品一开始就很精彩，那么后面即使有些停顿观众 也会耐心等下去

15、，为此在作品的开始阶段不要设置数据量较多的对 象，而应代之以数据量较少的前导内容，并且使用Load Movie命令减 轻影片开始下载时的负担。若有必要，可以考虑将影片划分成多个子 影片，然后再通过主影片里的Load Movie、Unload Movie命令随时调 用、卸载子影片。 4、影片的长宽尺寸越小越好。尺寸越小，影片文件就越小。可 通过菜单命令“Modify（修改）/Movie（影片）”调节影片的长宽尺 寸。因此可先制作小尺寸影片，然后再进行放大。为减小文件，可以 考虑在Flash里将影片的尺寸设置小一些，然后导出迷你SWF影片。接 着将菜单“File（文件）/Publish Settings.（发布设置.）”中HTML 选项卡里的影片尺寸设置大一些，这样，在网页里就会呈现出尺寸较 大的影片，而画质丝毫无损。 要记住，在进行上述修改时，不要忘记随时测试影片的播放质 量、下载情况和查看影片文件的大小。 参考文献： 1彭雪萍，如何给你的Flash“瘦身”，电脑知识与技术， 2008年第34期 2张洪星、霍艳玲，Flash动画设计与制作，中国铁道出版 社，2007.12 3李勇，浅谈Flash动画设计制作的基本要求，铜仁职业技术 学院学报，2009年第2期 (上接第54页)