软件设计ZhouSu第10章WebApp设计

软件体系结构与设计浙江大学城市学院周苏教授QQ：81505050第10章WebApp设计第10章WebApp设计•WebApp设计质量•设计目标•界面设计•美学设计•内容设计•体系结构设计•导航设计•构件级设计•面向对象的超媒体设计方法•尽管很多Web开发者都认为WebApp的直接性和易变性削弱了形式化设计，即设计是随着对应用系统进行构造（编码）而进化的，并且应该花费较少的时间创建详细设计模型，但是，当内容和功能变得复杂时，当WebApp的规模包含成百上千的内容对象、函数和分析类时，当WebApp的成功对于业务成功具有直接影响时，就不能也不应该轻视设计。第10章WebApp设计•WebApp设计所包括的技术性和非技术性活动主要有：建立WebApp的外观和印象，创建用户界面的美学布局，定义总体结构，开发体系结构中的内容和功能，以及设计WebApp的导航等。设计工作允许Web工程师创建模型，对该模型进行质量评估，并且可以在内容和编码生成之前、在测试开始之前以及在最终用户参与之前对该模型进行改进，通过设计达到WebApp的质量要求。第10章WebApp设计10.1WebApp设计质量•一般认为，在软件工程中讨论的软件质量的所有技术特征，以及通用质量属性等都适用于WebApp。然而，其中一些最相关的通用特性，即可用性、功能性、可靠性、效率及可维护性，构成了评估基于Web的系统的质量基础，好的WebApp设计应该展现出简单性、一致性、符合性、健壮性、导航性和视觉吸引力。•Olsina设计了一个“质量需求树”，在其中定义了一组可产生高质量WebApp的技术属性（见图10-1），这些质量特征对所有的软件都是通用的。图10-1质量需求树全球站点可理解性在线反馈和帮助特性界面和美学特性特殊特性查找和检索能力导航和浏览特性与应用领域相关的特性正确的链接处理错误恢复用户输入确认和恢复响应时间特性网页生成速度图形生成速度易于修改适应性可扩展性可用性功能性可靠性效率可维护性Web应用质量10.1WebApp设计质量•Offutt对图10-1所描述的5个质量属性进行了扩展，包括：–安全性：WebApp已经和公司及政府重要的数据库高度集成，电子商务应用系统提取敏感的客户信息，然后将这些信息存储起来，因此，WebApp的安全性在很多情况下变得极为重要，其关键度量标准是WebApp和服务器环境拒绝非授权访问和（或）阻挡恶意攻击的能力。–可用性：如果不可用，即使是最好的WebApp也不能满足用户的要求。从技术的角度说，可用性是对WebApp的可用时间占总时间的百分比的一种度量。但“正常运行时间”并不是可用性的唯一指标。Offutt认为：“使用仅限于在一种浏览器或平台上可用的特性”会使WebApp在那些具有不同浏览器或平台的配置中变得不可用，用户会毫无例外地转向其他地方。–10.1WebApp设计质量–可伸缩性：WebApp及为其提供接口的系统能否承受访问数量上的巨大波动？响应速度是否会因此而剧减（或者完全停止）？开发能够成功调节负载（相当多的最终用户）的WebApp正变得越来越重要。–投放市场时间：虽然这仅仅是从商业角度考虑的一种质量度量，并不是真正的技术方面的质量属性，但是，市场上的第一个WebApp往往能够吸引非常多的最终用户。10.1WebApp设计质量•WebApp设计的质量检查单•下面列举的一组问题可用来帮助Web工程师和最终用户评估WebApp的总体质量：–内容、功能和（或）导航选项能否按照用户的喜好而定制？–内容和（或）功能能否按照用户通信所用的带宽进行定制？–图形和其他非文本媒体能否正确使用，是否出于显示效率方面的考虑而对图形文件大小进行了优化？–是否用可以理解的、有效显示的方式来组织表格，并按大小进行排序？–是否对HTML进行优化来消除低效率？10.1WebApp设计质量–总体页面设计是否容易阅读和导航？–是否所有的指针都提供了指向用尸感兴趣信息的链接。–是否大部分的链接在Web中都具有持久性？–WebApp是否提供了站点管理工具？包括使用跟踪、链接测试、本地搜索和安全性工具。10.1WebApp设计质量•在上查找信息的人们可能获得数以亿计的网页，即使是很好地命中目标的Web查找也会得到大量内容。要从这么多的信息源中选择所需要的信息，用户如何评价WebApp所展示内容的质量（例如准确性、精确性、完整性、适时性）呢？Tillman提出了评价内容质量的一组有用标准（这也只是设计WebApp时应该考虑的问题中的一小部分）：–能否很容易地判断内容的范围和深度，确保满足用户的要求？–是否容易识别内容作者的背景和权威性？10.1WebApp设计质量–能否决定内容的通用性？最后的更新时间及更新内容是什么？–内容和位置是否稳定（即它是否一直保存在引用的URL处）？•除了这些与内容相关的问题，还需要考虑：–内容是否可信？–内容是否独特？也就是说，WebApp能否给使用它的用户带来一些特别的好处？–内容对于目标用户群体是否有价值？–内容的组织是否合理？是否有索引？是否容易选取？10.2设计目标•WebApp设计包括6个主要步骤，这些步骤由分析建模阶段所获取的信息驱动，即：内容设计利用内容模型（在分析期间开发）作为建立内容对象设计的基础；美学设计建立了最终用户所关注的外观和感觉；结构设计重点关注所有内容对象和功能的总体超媒体结构；界面设计创建了定义用户界面的总体布局和交互机制；导航设计定义了最终用户是怎样对超谋体结构进行导航的；构件设计表示了WebApp功能元素的详细内部结构。设计模型包括内容、美学、体系结构、界面、导航及构件级等设计问题，是Web工程设计的主要工作产品。10.2设计目标•JeanKaiser为Web设计提出了下面的设计目标：–简单性：“一切都要适度”。设计者们倾向于给用户提供“太多的东西”——详尽的内容、完美的视觉效果、插入的动画、大量的网页等，但最好的还是做到适度和简单。–内容应该充实而简洁，使用适合于信息的提交方式（例如文本、图形、视频、音频）传送信息。美学应当令人愉快但不过度（例如，颜色过多会使用户分心）；体系结构应该用最简单的方式实现WebApp的目标；导航应该直观和简单明了；功能应该易于理解和易于使用。10.2设计目标–一致性：这一设计目标几乎适用于设计模型的每个元素。内容构造应该一致（例如，在所有相关的文档文件中，文本格式和字体风格都应该保持一致；图形应该有统一的外观、颜色配置和风格）。美术设计（美学方面）应该在WebApp的各部分有统一的外观。体系结构设计应该建立一致的超媒体结构的模板，界面设计应该定义一致的交互、导航和内容显示模式。应该在所有的WebApp元素中使用一致的导航机制。10.2设计目标–符合性：WebApp的美学、界面和导航设计必须与将要构造的应用系统所处的领域保持一致。例如，娱乐游戏网站与提供财务服务的公司主页在外观和感觉上肯定不同。WebApp的体系结构会完全不同，界面会被构造成适合不同的用户种类，导航会被组织为完成不同的目标。Web工程师（以及其他设计参与者）应该通过设计来建立WebApp的相符性。–健壮性：在已经建立的符合性的基础上，WebApp通常会给用户以不言而喻的“承诺”。用户期待与他们的要求相关的健壮的内容和功能，如果这些元素遗漏或不足，WebApp很可能会失败。–导航性：应该以直观的和可预测的方式来设计导航。也就是说，用户不必搜索导航链接和帮助就知道如何使用WebApp，例如能够直观地识别选作导航机制的图标或图像。10.2设计目标–在每个网页的可预测的位置，设置指向主要WebApp内容和功能的链接也是很重要的。如果需要页面滚动条（这是很常见的），在网页上方和下方的链接可以使用户的导航任务更容易。–视觉吸引：在所有软件中，Web应用系统无疑是最具有视觉效果的、最生动的，也是最具有审美感的。美丽的外观（视觉吸引）吸引着观看者的眼球。然而，许多设计特性（例如，内容的外观、界面设计、颜色协调、正文布局是否匀称、图片和其他媒体、导航机制）也会对视觉吸引产生影响。–兼容性：WebApp会应用于不同的环境（例如，不同的硬件、因特网连接类型、操作系统、浏览器），并且必须设计为互相兼容。10.2设计目标•创建有效的设计通常需要各种技术。有时，对小项目，开发者可能需要成为多面手。对比较大的项目，借鉴专家的专门知识是明智的而且（或）可行的：例如，Web工程师、图形设计师、内容开发者、程序员、数据库专家、信息架构师、网络工程师、安全专家及测试人员。借鉴这些技术，可以评估创建的模型质量，在产生内容和代码、进行测试以及大量的终端用户参与之前，对模型进行改进。如果分析是建立WebApp质量，那么设计就是真正地嵌入质量。10.2设计目标•要根据WebApp性质的不同而适当地混合各种技术。图10-2描述了Web工程的设计金字塔，金子塔的每一层都表示一种设计动作。图10-2WebApp设计金字塔构件设计体系结构设计导航设计内容设计美学设计界面设计用户技术10.3界面设计•WebApp界面设计所面临的挑战之一是，用户的进入点不明确。即，用户可能在主页进入WebApp，或者可能链接到WebApp体系结构的一些较低层。在某些情况下，可以采用更改用户到主页的路线方法来设计WebApp，否则，WebApp设计就必须提供界面导航特征以及全部内容对象，而无须考虑用户是如何进入系统的。•WebApp界面的设计目标是：①建立一致性的窗口进入界面提供的内容和功能；②通过一系列与WebApp的交互指导用户；③组织用户可用的导航选项和内容。10.3界面设计•为了获得一致的界面，首先要用美学设计去建立一致的外观。这包括很多特点，但必须强调布局和导航机制的形式。为了指导用户交互，可以适当借鉴隐喻使用户能直观地理解界面。隐喻（metaphor）是一种来自用户工作经验的表示方式，可以在界面环境内建模，例如控制.mpg文件音量的滚动条开关。10.3界面设计•为了实现导航选项，可以在下列交互机制中进行选择，在内容层次的每个级别上都应提供一个或多个控制机制：–导航菜单——关键字菜单（纵向或横向组织）列出了关键内容和（或）功能。实现这些菜单，使得当选择了主菜单选项时，用户可以从显示的次标题层次中进行选择。–图形图标——按钮、开关以及类似的图形图像，或指明一种决定。–图形图像——可选择的一些图形表示，并执行链接到一个内容主题或WebApp功能。10.4美学设计•美学设计，又称美术设计，是一种艺术工作，它是对Web设计在技术方面的补充。没有它，WebApp可能有强大的功能，但是却不能吸引人；有了它，WebApp能够将其用户带入以用户为核心的充满智慧的世界。•每个网页中能够用来支持非功能性的美学设计、导航特征、信息内容及指导用户功能的“空间”是有限的，应该在美学设计期间对这种空间的“开发”进行规划。10.4美学设计•像所有的美学问题一样，当设计屏幕布局时，没有绝对的规则。但是，很多一般的布局指导原则还是值得考虑的：–网页空间应该适当留有空白。否则，用户寻找有用信息或要素会很困难，并会造成很不舒服的视觉混乱。–重视内容。毕竟，内容是用户浏览网页的根本原因。Nielsen建议：典型的Web网页的80％应该是内容，剩余的资源为导航和其他要素。10.4美学设计–按从左上到右下的顺序组织布局元素。绝大多数用户浏览网页的方式与看书没有什么不同，即从左上到右下。基于文化和语言的不同也有例外，但这条规则对多数用户来说是有效的。如果布局元素有特定的优先级，应该将高优先级的元素放在页面空间的左上部分。–在页面内按导航、内容和功能安排布局。在几乎所有的事情中，人们都会寻找事实上已有的模式。如果Web页中没有可辨别的模式，由于需要对所需要的信息进行不必要的查找，会导致用户的挫败感增加。–不要通过滚动条扩展空间。虽然经常需要滚动，但大多数的研究表明，用户并不喜欢用滚动条。最好是减少网页内容，或者通过多页显示必要的内容。10.4美学设计–在设计布局时，考虑分辨率和浏览器窗口的尺寸。设计应