第5章界面设计祥解.pptVIP

用户查询航班视图 对象：航班对象 属性：出发城市、到达城市、航空公司、起飞日期时间、机票类别以及出票城市等， 操作：主要是查询，即要从后台数据库中查出符合条件的航班信息，以及重置查询条件等操作。 进一步交互动作 例如对于视窗系统界面，在用户执行航班查询后，要在屏幕上显示航班信息和可能的进一步的交互动作 航班信息如何展现？ 以什么顺序显示？ 已经订满的航班还需不需要显示？ 如果要显示的话，是不是用不同的颜色？ 如果信息超出一屏是用滚动条还使用分页的方式？这 些都要通过与用户一起分析来确定，最大限度的满足用户可用性。 进一步交互动作 例如对于视窗系统界面，在用户执行航班查询后，要在屏幕上显示航班信息和可能的进一步的交互动作 进一步的操作如何展示？ 进一步查询的条件如何输入？ 是否提供打印功能？ 用户通过什么方式确定要订购的航班？ 是否允许用户把查到的信息存入收藏夹？ 考虑与其他界面可能的关联接口。 对于其他的用户界面，如电话语音订票或手机短信订票，返回信息的表示方式就大为不同，所以需要针对不同界面进行交互设计，但这些设计都是来自同一个抽象设计。 5.5.3 概要设计 针对特定的操作系统或交互方式，对抽象的视图设计做进一步的具体设计，产生视图的概要设计。 实际设计中，这些视图通常是用铅笔画在纸上，这样做速度快，而且修改起来也比较方便。 查询条件 航班号 起飞城市 到达城市 起飞时间 到达时间 全票票价 剩余票额 CA1100 济南 北京 17：35 19：10 500 20 … … … … … … … … … … … … … … 订票 保存 打印 上一页 下一页 新查询 结果中查询 5.5.4 视图的关联设计 很多交互任务需要从一个状态转化为另一个状态，这就要考虑用户完成任务所需的信息和功能，并将不同交互视图之间的联系和状态转换关系整理清楚。 对一个具体的交互视图进行关联性设计一般就要考虑以下因素： 该视图的前一个或几个视图是什么？用户怎样由前面的视图到达该视图？ 该视图后面的视图是什么？也就是用户下一步可以进入哪些视图？ 如何从一个视图转移到另一个视图，即转移的条件或操作是什么？ 多个交互视图 订票业务网站的桌面交互实现中，用户可能在整个业务相关的多个交互视图中进行转换 5.5.5 视图的全面设计 确定各个视图的具体内容和大致布局; 在每个视图上明确体现与其他视图的关系; 保证系统的整体性和和谐性; 借助具体的开发工具进行界面的实际设计; Web界面视图的整体性 Web界面视图的整体性： 相同的界面风格:颜色、字体、布局、行距，间距，导航条等； 相同的识别标志:LOGO，底纹图案，版权和联系方式等； 一致的术语，特别是在不同语言的版本之间保持信息翻译的一致。 视图结构清晰，每个界面上明确当前视图与整体系统的关系； 通过用户的交互动作实现视图之间的转化，如在交互元素上双击鼠标左键，单击按钮或链接等； 在全面设计阶段要将各个视图间的转换条件和执行的交互动作予以明确说明。 把简单留给用户 举个文字编辑器的例子 用户根本不想动脑子。。。 用户很笨，用户很懒，用户根本不想动脑子，用户5秒钟内没搞明白该怎么做他们就会彻底放弃…… 支付宝 QQ空间 中国的互联网，基本上是给30岁以下的年轻人设计的，这跟中国互联网的用户构成有关。在这样的环境中做产品，其实是一件很幸福的事，因为你的用户都是最具好奇心，最好学，最喜欢尝试，最没成见，最有冒险精神的一群人。 困难的不是让他们弄明白，而是让他们产生兴趣，或者感到需要。 他们不笨。 好用不？ 兴趣和需要是设计者的老师 每个人都有两个最好的老师，一个叫兴趣，一个叫需要: 韩寒开车成专业车手，不是因为赛车容易开，而是因为兴趣; 家人生病，你成了半个医生，不是因为医学容易学，而是因为需要; 用乐高积木堆成一个巨大的机器人，很难，但兴趣使它不难; 你的iPhone破解失败变砖，你查遍网上教程，终于让它起死回生，是需要让它不再难; 有了兴趣和需要这两个老师，就不存在笨用户和坏设计。 习题 5.1请简要论述界面设计的一般原则。 5.2请描述任务分析主要包括哪些内容？ 5.3 利用本章介绍的人机交互界面设计方法，完成网上银行系统的交互界面分析和设计，包括账户查询、存款、取款、转账等业务流程。该系统要能够同时支持浏览器方式和电话银行方式（可参考互联网上实际网上银行的设计）。 课堂作业1： 画出ATM系统用例图 画出ATM取款时序图 人有了知识，就会具备各种分析能力， 明辨是非的能力。 所以我们要勤恳读书，广泛阅读， 古人说“书中自有黄金屋。 ”通过阅读科技书籍，我们能丰富知识， 培养逻辑思维能力； 通过阅读文学作品，我们能提高文学鉴赏水平， 培养文学情趣； 通过阅读报刊