《Web应用项目开发》第04章-Web应用项目的交互设计

第4章Web应用项目的交互设计

目录4.1界面设计原则和指导准则4.2界面设计工作流4.3美学设计4.4可用性设计4.5任务一：学期项目界面布局设计4.6任务二：学期项目导航设计4.7任务三：学期项目“国际化”设计4.8任务四：学期项目登录界面设计4.9拓展训练与思考4.1界面设计原则和指导准则

4.1.1设计有限用户界面的原则4.1.2指导准则4.1.1设计有限用户界面的原则为了设计有效的用户界面，下面列出了一组非常重要的设计原则：预测。传达。一致性。自治。效率。灵活性。焦点。缩短延时。易学性。完整性。易读性。跟踪状态。4.1.2指导准则界面设计指导准则：人在电脑屏幕上的阅读速度比对书本的阅读速度大概要慢25%。因此，不要强迫用户阅读大量的文本信息，尤其是当文本的内容是解释Web应用的操作或者辅助导航的时候。避免诸如“正在建设中”的标记。用户满怀期望而来，但是却看到这么一个不必要的连接，肯定会失望而去。用户不喜欢使用滚动操作。重要的信息应该布置在一般浏览器窗口都可以显示的范围内。导航菜单和标题条的设计必须是一致的，并且应该出现在用户可用的所有页面上。设计不应该依赖于浏览器功能来辅助导航（例如，返回箭头）。美学效果永远都不应该取代功能性。例如，比起一个漂亮的但是内容不明确的图像或图标，一个简单的按钮可能是更好的导航选择。即使对于一些临时的用户，导航选择也应该是明显的。不应该让用户不得不满屏幕搜索才能决定如何链接到其他的内容或服务。4.2界面设计工作流Web应用界面设计的基本工作流程：1.审查用户特征和种类、用户任务、用例和包含在系统设计中的相关信息，并根据需要进行精化。2.开发一个粗略的Web应用界面布局设计原型。GWMS的初步界面原型设计3．把用户目标映射到具体的界面行为。

图：把用户目标映射到界面行为4.定义和每个行为有关的一组用户任务。每一个界面行为（例如，“购买一件商品”）和一组用户任务相联系。在需求分析的过程中已确定了这些任务。在设计期间，这些任务必须与明确的交互对象建立对应关系。5.为每一个界面行为开发屏幕图像。当考虑每一个行为时，应该创建屏幕图像序列来描述界面是如何响应用户的交互行为的。应该明确内容对象，展示Web应用的功能，并指明导航链接。6.利用从美学设计中的输入来精化界面布局和屏幕图像。Web应用工程师完成粗略布局，但是重要商业网站的美学观感通常是由艺术家而不是技术专家、专业人员来开发的。美学设计会和界面设计者完成的工作集成。7.确定实现用户界面所需的界面对象。这个任务可能会需要在现有类库中进行搜索，找出那些适合于Web应用界面的可重用对象（类）。另外，在此时定义任何需要的自定义类。8.开发用户与界面交互的过程表示。这个可选的任务使用UML序列图和活动图来表示用户与Web应用交互时的活动（和决策）流程。9.开发界面的行为表示法。这个可选的任务利用UML状态图来表示状态转换和引起转换的事件，并定义控制机制。10.描述每一种状态的界面布局。使用在流程2和流程5中开发的设计信息，把确定的布局或屏幕图像与流程9中描述的每一个Web应用状态联系起来。4.3美学设计4.3.1如何创建令人愉悦的布局4.3.2什么是好的图形设计4.3.1如何创建令人愉悦的布局每一个Web页面中能够用于支持非功能性的美学设计、导航特征、信息内容和用户控制功能的“空间”都是有限的，应该在美学设计时对这种空间的“开发”进行规划。在设计屏幕布局时，没有绝对的规则。很多通用的布局规则值得参考：不要害怕空白。重视内容。以从左上到右下的顺序组织布局元素。在设计布局时，考虑分辨率和浏览器窗口的尺寸。为自由导航设计布局。如果在页面中使用图像，那么应尽量将它们转换成小格式，并提供放大选项。如果想在Web应用所有页面内有内聚的布局、外观、感觉，那么应使用层叠样式表（CSS）。

4.3.2什么是好的图形设计图形设计应考虑Web应用观感的各个方面。图形设计过程从布局开始，然后考虑全局的颜色配置、文本类型、字号和风格、多媒体（音视频、动画等）的使用，以及一个应用的所有其他美学元素。图形设计参考资源编号图形设计资源名称信息源（网址）ADesign&PublishingeZineBGrantasticDesignsCWebPageDesignforDesigners4.4可用性设计什么是可用性？可用性简单的说就是强调优越的用户体验，一切为了用户，为了一切用户，为了用户的一切。对于可用性设计包括但不限于下几点：1．合理的信息构架（InformationArchitecture）2．页面布局和兼容性设计3．明确的任务导向4．适应用户的习惯5．减少用户的思考4.5任务一：学期项目界面布局设计4.5.1任务书模板4.5.2工作流程及要点解析4.5.1任务书模板任务名称学期项目界面布局设计任务编号GWMS-04-01版本1.0任务状态启动计划开始时间年

月

日计划完成时间年

月

日计划用时2人日实际开始时间年

月

日实际完成时间年

月

日实际用时X人日负责人（负责该项任务的人员）作者（编写任务书人员）审核人（项目经理等）开发环境（操作系统、数据库、Web服务器、开发语言等）开发工具（系统设计、开发、测试、部署工具等）工作产品【】文档

【√】代码

【√】资源

【】测试

【】系统任务描述完成高校毕业工作管理系统（GWMS）项目界面布局设计工作4.5.2工作流程及要点解析在使用网页的时候，用户应该随时都能了解以下三个问题的答案：“目前我在哪里？”、“这里有什么内容？”、“我还能去哪里？”。这能让他们建立起良好的位置感。最简单的解决方案，也是目前最常见的网页设计方式，就是把网页划分成三个区域。图：网页的区域划分图：采用了三区域划分法的GMail界面截图图：GWMS界面布局参考4.6任务二：学期项目导航设计4.6.1任务书模板4.6.2工作流程及要点解析4.6.1任务书模板任务名称学期项目导航设计任务编号GWMS-04-02版本1.0任务状态启动计划开始时间年

月

日计划完成时间年

月

日计划用时2人日实际开始时间年

月

日实际完成时间年

月

日实际用时X人日负责人（负责该项任务的人员）作者（编写任务书人员）审核人（项目经理等）开发环境（操作系统、数据库、Web服务器、开发语言等）开发工具（系统设计、开发、测试、部署工具等）工作产品【】文档

【√】代码

【√】资源

【】测试

【】系统任务描述完成高校毕业工作管理系统（GWMS）项目导航系统设计工作4.6.2工作流程及要点解析图：GWMS导航系统参考导航系统可以由页面中的一块或多块区域组成，一般来说导航系统都应该包含四个元素：系统logo标识附加功能，如实用工具栏导航指示：就是在导航系统当中标记当前页面的位置。主要栏目：栏目就是网站结构化的子版块。4.7任务三：学期项目“国际化”设计4.7.1任务书模板4.7.2工作流程及要点解析4.7.1任务书模板任务名称学期项目“国际化”设计任务编号GWMS-04-03版本1.0任务状态启动计划开始时间年

月

日计划完成时间年

月

日计划用时1人日实际开始时间年

月

日实际完成时间年

月

日实际用时X人日负责人（负责该项任务的人员）作者（编写任务书人员）审核人（项目经理等）开发环境（操作系统、数据库、Web服务器、开发语言等）开发工具（系统设计、开发、测试、部署工具等）工作产品【】文档

【√】代码

【√】资源

【】测试

【】系统任务描述完成高校毕业工作管理系统（GWMS）项目“国际化”（中文和英文版）设计工作4.7.2工作流程及要点解析下面是我们在进行国际化设计时需要注意的一些方面：注意适配分辨率的大小尽量多用被广泛接受的图标绘制图标时注意地域性注意不同地区使用的单位和格式避免出现对某些地区不适用的信息4.8任务四：学期项目登录界面设计4.8.1任务书模板4.8.2工作流程及要点解析4.8.1任务书模板任务名称学期项目登录界面设计任务编号GWMS-04-04版本1.0任务状态启动计划开始时间年

月

日计划完成时间年

月

日计划用时1人日实际开始时间年

月

日实际完成时间年

月

日实际用时X人日负责人（负责该项任务的人员）作者（编写任务书人员）审核人（项目经理等）开发环境（操作系统、数据库、Web服务器、开发语言等）开发工具（系统设计、开发、测试、部署工具等）工作产品【】文档

【】代码

【√】资源

【】测试

【】系统任务描述完成高校毕业工作管理系统（GWMS）项目登录界面设计工作登录界面的一些设计表现形式：优雅大方：

Tumblr界面截图4.8.2工作流程及要点解析2.精致的质感表现：iCloud界面截图3.人文关怀的品牌传达：QQ邮箱界面截图4.大大的登录框：Mai