实验6 熟悉直接操纵页面

6.8.1  实验目的

本章实验的目的是：

1）熟悉直接操纵与虚拟环境的基本概念和内容；

2）了解人机交互设计师的岗位特点和职业要求；

3）欣赏手机界面设计的优秀作品。

6.8.2  工具/准备工作

在开始本实验之前，请回顾课文的相关内容。

需要准备一台能够访问因特网的计算机。

6.8.3  实验内容与步骤

1. 概念理解

1）请简单描述直接操纵的三个原则：

①用有意义的视觉隐喻连续表示感兴趣的对象和动作。

②用物理动作或按压有标签的按钮来取代复杂的语法。

③使用快速的、增量的可逆动作，这些动作对感兴趣对象的影响是立即可见的。

2）在最近受欢迎的数字产品或服务中，找出一种直接操纵方式有效使用的例子。另外，说明在这个例子中，直接操作的方式提高用户便利性的主要因素是什么。

答：一个最受喜爱的直接操纵例子是驾驶汽车，景象通过前窗直接可见，刹车和驾驶等的性能已经成为文化常识。例如，如果想左转，驾驶员只需向左转动方向盘。响应是立即的，景象随即改变，这就提供反馈来改进转向。现在设想一下，试图通过键入命令或从菜单中选择“左转30度”来使汽车准确转向是多么困难。很多应用系统中的优雅交互是由于逐渐优雅地应用了直接操纵。

2. 阅读分析

请认真阅读“6.7 阅读与思考”，并分析和回答以下问题：

1）通过阅读上文，你怎么理解“交互设计师在今天已经成为一份理想的职业”？请简述之。

答：因为因特网已成为应用软件设计的平台，即便是那些无需在线编程和运行的软件，也日渐成为“在线工作”与“下线工作”的混合体。就连操作系统也在逐步摆脱25年前赖以建构的桌面隐喻的束缚。一切都显得那么自然，有如探囊取物——使交互设计师在今天成为一份理想的职业。简单来说就是人机交互师的一天很轻松，很舒服。

2）Dan Saffer认为，要成为一名交互设计师，必须具备哪3个条件？请简述之。

① 气质

Reimann对于气质价值的论述依旧准确。对于用户的“同情共感”与学习新事物的能力是任何设计师都不可或缺的两大特质，也是该职业必备的基石。

这并不意味着你需要成为“善于交际的人物”（当然这样更好）。但确实意味着你应当对人类感兴趣，包括人的行为与局限性。你至少理论上要关注人与社会环境。一名优秀的交互设计师需要学会设身处地为用户着想，而不是把自己想象成用户，或者把用户看作与自己类似的人。你们很可能截然不同。

在MBTI人格测验中（myers-briggs personality scale），拥有“直觉型”人格同样十分关键。能够凭借直觉进行跳跃性思维对设计师而言至关重要。因为你不可能永远看清问题全局，接触每一个用户，对项目了如指掌。你不得不猜测与假设——这时你需要直觉。

②培训

如果你认为自己的气质适合这样的工作，下一步就需要学习一些基础知识。选择好的入门书，如《软件观念革命——交互设计精髓》（About Face 2.0），《Designing Interfaces》与《Universal Principles of Design》。还需要了解你的工作介质，比如因特网、移动通信和软件系统。你不必成为一名程序员，但需要了解每种介质技术上的可行性。工业设计准则与良好的沟通技巧也很有帮助。

③经验

培训与知识储备，这些还远远不够。即便作为一名交互设计读物的作者，我依然认为书本只能为你提供从业背景，只有设计本身才能让你成长为一名交互设计师。

设计经验从何而来呢？主要有两个方法：一所好的学校能让你接触到现实课题（关于商务、技术以及用户限制）；你也可以提供专业设计或免费为别人设计（后者非无路可走请慎用）。

邮件讨论、本地团体与人才市场是着手找工作的首选。多数工作是通过口头推荐找来的，因此，同其他设计者的联系也能有所帮助。

3）通过上述阅读，你还能得到什么启发？请简述之。

答：人机交互师是一个非常棒的职业，因为这样你就能改变世界。不错，我们貌似只是在修补按钮、下拉菜单、仪表什么的，但真正的工作却是改变这个世界，一点一滴让它更加人性。我们帮助人们完成日常工作，无论是游戏，救生还是转账。我们将自己的价值注入这个世界，让事物变得有用、易用、愉快、健康。这样过的每一天都非常丰富，这样的工作真不赖。

3. 手机界面设计欣赏

手机的界面设计已经备受人们的关注，并且正在趋于统一和标准化。下面请欣赏一些优秀的手机界面设计作品，见图6-15～图6-17。

      

图6-15  韩系手机界面设计                   图6-16  手机界面设计作品

图6-17  手机界面设计作品

4. 思考与练习

请阅读下文：

手机GUI设计基本知识

所谓手机GUI设计，简单来说就是手持设备的图形用户界面设计。狭义理解是手机和PPC，广义上可以推广至手机、移动电视、车载系统、手持游戏机、MP3、GPS等一切手持移动设备。

手机GUI设计基于对手持设备产品的使用特性的理解、对用户的研究和对界面使用情景的深入研究。GUI的设计分为平台内置和主题设计部分，前者需要专业的设计公司根据厂家的实际产品进行设计分析后进行整体设计，后者则可以经由任何用户进行自主设计，当然后者的设计限制和平台限制都比较大。目前索爱和三星以及Nokia的S60平台支持用户的THEME自定义设计。

设计研究的流程为：产品特性→用户心理→市场背景→图形设计策略→设计检验→实际设计投放。

界面的基本要素

手机的界面层级包括idle（待机界面）→mainmenu（主菜单）→submenu（二级菜单）→third level menu（三级菜单）。界面除了包括图标和文字外，比较重要的还有function animation（呼叫、发送信息等）以及function interface（计算器、日历界面等）。

明确意义的图标、风格鲜明的版面设计是手机界面设计的重要工作，目前较为流行的是以Motorola、Nokia等为代表的欧洲简单风格，以及韩国的时尚绚丽的风格。

在更新颖的交互操作和与手机ID设计的整体结合上，韩系手机做得比较好，而在可用性和体验难度上，欧系手机则比较优秀。

设计的注意事项

尺寸问题：128像素×160像素，176像素×220像素、240像素×320像素尺寸是目前较常见的手机屏幕尺寸，在设计时可以根据实际产品要求进行设计，更大的屏幕可以有更多的交互表现和视觉元素的支持，较为自由。

色彩问题：由于手机LCD本身的限制，在色彩的还原程度上没有计算机那样完善，因此，在选用色彩时要根据使用的屏幕进行调节。

可实现性问题：受到硬件运算速度和内存的影响，以及不可预计的后台程序开发难度，过于复杂的效果将很难进行实现，与程序工程师、界面设计工程师、硬件工程师的沟通显得尤为重要。

建议

工具：Photoshop、AI和一些3D软件是制作的常用工具，在最终输入时会需要一些模拟程序以及平台程序的支持，不过在GUI设计阶段可以暂不考虑。

尺寸：建议选择240像素×320像素大小的屏幕尺寸进行设计，自由度和发挥空间会大一点。

概念：设计的概念是设计中尤其重要的部分，敢于尝试新颖的交互模型和GUI视觉元素是设计的重要工作。

资料来源：一翔的BLOG，原文链接为http://www.uilook.com/blog/trackback.asp?tbID=50，转引自“视觉同盟”。

请分析：

1）请解释，什么是广义的手机GUI设计？

答：手机GUI设计，广义上可以推广至手机、移动电视、车载系统、手持游戏机、MP3、GPS等一切手持移动设备。

2）请简述手机GUI设计研究的流程。

答：手机GUI设计研究的流程为：产品特性→用户心理→市场背景→图形设计策略→设计检验→实际设计投放。

3）常见的手机屏幕尺寸有哪些？

答：常见的手机屏幕尺寸有128像素×160像素，176像素×220像素、240像素×320像素尺寸是目前较常见的手机屏幕尺寸，在设计时可以根据实际产品要求进行设计，更大的屏幕可以有更多的交互表现和视觉元素的支持，较为自由。

4）常用的手机界面制作软件工具有哪些？

答：常用的手机界面制作软件工具有Photoshop、AI和一些3D软件是制作的常用工具，在最终输入时会需要一些模拟程序以及平台程序的支持，不过在GUI设计阶段可以暂不考虑。

6.8.4  实验总结

了解了直接操纵虚拟环境，通过学习PPT，熟悉了直接操纵页面。也明白人机交互师是一个非常棒的职业，因为这样你就能改变世界。我们帮助人们完成日常工作，无论是游戏，救生还是转账。我们将自己的价值注入这个世界，让事物变得有用、易用、愉快、健康。这样过的每一天都非常丰富，这样的工作真不赖。

6.8.5  实验评价（教师）

_________________________________________________________________________

_____________________________________________________________________________