SDL 用法,第 5 部分:"Pirates Ho!" 中界面设计的原则
简易性、一致性和引人入胜

Sam Lantinga
Loki Entertainment Software,首席程序员
和 Lauren MacDonell
技术作家
2000 年 8 月

内容:
什么是用户界面?
交互
信息
娱乐
什么是“好”的用户界面?
简易性
一致性
引人入胜
我们的界面
情节画面
航海日志
游戏世界信息
音频
结束语
参考资料
关于作者

Sam Lantinga 和 Lauren MacDonell 在开发 "Pirates Ho!" 游戏的用户界面时投入了大量精力。在日记(记录了这个冒险探宝和角色扮演游戏的创建过程)的这一部分中,作者描述了他们开发界面初步设计时所使用的原则。

什么是用户界面?
在设计用户界面时,首先要考虑定义它的用途。我们的三个主要目标是用户的交互、信息和娱乐。

交互
界面可以让玩家与游戏交互,无论游戏是由几行简单的文本还是 3-D 图形奇景组成。界面的首要用途是在游戏逻辑和玩家之间转换数据。没有界面,就不能玩游戏。界面告诉玩家在游戏中发生了什么事,让他或她据此作出响应。

两种用户界面设计(Angband 和雷神 III)

信息
界面显示了有关游戏中的环境、人物、对象和事件的信息。此信息可以让玩家作出决定。一般来说,一幅图片胜过任何语言的描述。对于界面而言,合并到游戏中的图像通常能够比文本更快且更有效地显示信息。通过图表或符号表示法就可以做到这一点(如某个人物还有多少条命)。

使用图形表示法的界面 (Raptor)

娱乐
如果界面看上去很有趣,那么娱乐能起到锦上添花的作用。我们喜欢那些有好的画面和迷人景色的游戏,因为视觉效果起到的作用甚至与最精彩的故事情节相同。此外,详细的插图可以让玩家很好地了解每个人物的图像或者环境的地方特色。如果没有插图,就会丢失这些虚构的细节。它们使游戏世界变得更丰富多彩。

这三个问题(交互、信息、娱乐)很大程度上决定了界面设计的方法。我们的任务很明确:必须创建一种使玩家与游戏交互的方法,它将以生动有趣的方式提供所有必需的信息。

什么是“好”的界面?
我们在开发计算机游戏、其它软件和特殊控制台游戏的用户界面方面有相当多的经验。因此我们非常清楚应该使用什么,不应该使用什么。我们还很幸运,交了一些在游戏开发界工作的朋友,他们的建议有助于我们加强和改善的界面的定义。在开发 "Pirates Ho!" 的界面时,我们紧记的主要原则是:简易性、一致性和引人入胜。

简易性
在搜索“理想界面”的神奇规则时,最常听到的回答是简易性。换句话说,构建易于理解且不需要指导手册的界面。或者构建一个告诉玩家下一步该做什么的侧栏。

如果我们说界面是易于理解的,就表示无需一大堆中间步骤、命令或击键就可以访问和响应游戏中的信息。只要玩家需要,信息就会出现在屏幕上。他或她不必等很长时间并且费了好大劲才知道如何使用键盘、鼠标、游戏控制杆或其它工具来继续玩游戏。

Humongous Entertainment 的 "Pajama Sam 3: You Are What You Eat from Your Head to Your Feet." 是我们最喜欢的游戏之一。这个游戏的界面是经过精心设计的,因此将鼠标放置在一个对象上会改变箭头的外观。箭头的变化表示单击此对象会引发某些事。然后玩家可以单击此对象以推进游戏的情节发展。箭头改变成另一种样式,指出通向另一个屏幕的小路。将箭头移到屏幕底部,会弹出显示了库存项目的图片,此时玩家可以查看库存。在屏幕底部随库存一起弹出的是“计算机”图标,玩家可以使用该图标保存或退出游戏。必须承认,这个游戏适合于 3 到 8 岁的儿童。但界面的简易性可以使玩家沉浸于可爱有趣的故事情节中。故事的乐趣和这个游戏中的难题并没有被过于复杂的界面减少。这正是我们如此喜欢它的原因之一。

"Pajama Sam 3" 界面,包括库存

一些在游戏界工作的朋友提醒我们不要要求玩家阅读文字。他们告诉我们,玩家不会去阅读文字,除非必须这样做。他们只想玩游戏。这对我们很有帮助,因为迄今为止我们还没有创建打印手册的计划。但这还意味着我们必须很仔细,确保我们的界面非常简单、易于使用。

一致性
我们还发现一致性对于界面设计非常重要。我们偶尔会遇到看似很容易玩的游戏,但这只是在我们尝试切换到另一个画面和方式之前。但如果改变了画面或方式,就会应用不同的规则。最好在游戏各处以相同方式做相同的事。最好还能够始终在相同位置找到重要信息。我们对一致性的观点并不一定要求在整个游戏中都使用同样的屏幕布局。但我们建议在布局中使用的逻辑可以让玩家预感到可以在哪里找到信息,以及在游戏的不同部分中如何执行命令。

例如,我们最近一直在玩 Blizzard 的“暗黑破坏神 II”。我们特别注意界面一致性。游戏的一些基本命令可以从头至尾以相同方式使用。浏览各个菜单也非常容易,如:库存、买入/卖出/交易、技能、属性等。这些菜单都符合相同的布局,因此易于浏览。在游戏的任何阶段,玩家还可以将鼠标放在对象、人物和位置上,以查看极其有用的简要描述。

“暗黑破坏神 II”界面,包括库存菜单

“暗黑破坏神 II”在其视觉风格上也保持一致。画面、菜单和控制栏都有相同的中世纪幻想外观。这种视觉连续性并不是绝对必要的,但它对游戏经历添加了美学享受并增强了沉浸于游戏世界的幻觉。

引人入胜
我们大多数人有过完全被电影吸引的愉快经验。技术高超的电影摄制者会结合灯光和声音因素创建并维持逼真的虚幻世界,使我们在其中留恋忘返。最好我们的游戏也能如此具有吸引力。用户界面的各个元素有助于维持玩家直接参与游戏世界的幻想。图形元素可以让玩家在视觉上体验游戏世界的环境、活动和地方特色。音乐和声音效果创建了一种特殊情调,并使游戏的事件显得更栩栩如生。我们认为“雷神 III”就是此类极其逼真的游戏。如果没有令人毛骨悚然的声音效果和刺激的画面,它还会如此吸引人吗?

“雷神 III”界面

维持沉浸于游戏世界的幻想的另一种方法是将界面的元素伪装成游戏世界的一部分。影评家使用术语“情景”(diegetic) 来描述影片情节或环境中看得见的人或物所产生的声音(通常是音乐)。情景元素的一个简单示例就是伴随钢琴或投币式自动电唱机的出现而响起的音乐。音乐仍是电影配乐的一部分,但它已不是背景音乐,因为它已经成为影片的一部分了。就界面设计而言,没有比情景更好的词能够描述装饰成游戏一部分的工具、菜单或其它特性了。(此外,如果您在对话中使用它,您的朋友将对此留下深刻印象。)

让我们看一下游戏中情景元素的示例。Interplay 的 "Fallout II" 的界面包括了 "Pip Boy"(一种掌上电脑飞行器射击游戏,包含了探求物信息、电子地图显示和关于游戏世界的信息文件)。"Pip Boy" 还可以让玩家“等待”一段特定时间(指示游戏世界时间向前跳跃这段时间)。实际上,在游戏中 "Pip Boy" 用于从计算机的不同位置处检索信息。这个聪明的情景工具让玩家不必退出游戏世界就可以查找信息,从而使游戏世界和现实世界之间的界限变得更加模糊。

"Fallout II" 界面 - "Pip Boy" 画面

我们的界面怎么样?
那么,如果将它应用到 "Pirates Ho!" 界面会怎么样?我们仍在解决这个问题,但我们已经有了初步设计。这里要强调的词是初步。在完成设计之前,我们大概检查了全部内容,但那时似乎……

情节画面
我们界面的重点是情节画面。情节画面可以让玩家观察发生了什么事,以及获取关于地点、时间和人物的信息。这个画面显示战争、旅行和对话(换句话说,游戏的情节)。屏幕右边的大幅图片显示玩家所看到的实景或船只的俯视图,以及周围环境(在海上旅行和战争期间)。左上方的图片显示关于位置、环境、一天中的时间和人物当前所在位置的天气情况的信息。左下方的图片始终是一张地图,它可以是游戏世界的地图,也可能是一个小镇或更小区域的地图,这取决于人物旅行中所在的位置。

迄今为止,我们的计划是构建界面中的一切对象,以响应点击命令。以后可能会添加一些键盘快捷键或其它功能,但现在,那似乎是最简单也是最直接的方法。我们计划要包括对象、地点、按钮和人物的描述,只要玩家的鼠标放置在这些对象上,就会出现相应的描述。通过对于游戏中的所有交互都使用相同的布局,并提供随处可用的信息,希望能够平衡简易性、外观一致性和信息可用性。

游戏布局

航海日志
“航海日志”是我们设计中一个很好的剧情元素示例。我们使用它来装饰关于探求物状态、储备、库存和船员的信息。它类似于一本笔记本,有三个部分分别包含了不同的信息。在情节画面中,可以单击屏幕底部附近书本形状的图标来查看这些信息。一部分或一“页”日志将包含基本的探求物信息,它将被自动输入和更新。玩家可以在日志中输入他们自己的注释来详细说明此信息。下一页将显示关于储备和财产的详细信息,并且可以让玩家选择武器、储备和他们离船时随身携带的其它物品。第三页将显示关于船员的信息,并允许玩家将财产、武器和储备分配给船员。我们试图将日志中的摘要信息合并到情节画面中,这样玩家就不必费时间在不同的屏幕中搜索他们要找的东西。

航海日志

游戏世界信息
我们开发的另一个情景工具将记录游戏世界的历史、经济、地理和文化。此信息可以让玩家了解游戏世界中事件的基本模式。此信息将在由主制图师 Frederick Figgleworth 创建的参考工具“小岛简史”的环境中显示。Figgleworth 有时会在游戏中出现,他会与玩家交流。

依照前面反对让玩家阅读太多文字的声明,那么我们包括关于游戏世界的文字信息就有些自相矛盾了。那正是我们使界面这部分看上去符合游戏世界的原因之一。“简史”是我们认为概述游戏世界中操作模式的最简便方式。当然,玩家不必阅读历史记录。通过在游戏中交互和探险,他们最终会收集到相同的信息。“简史”旨在作为补充参考工具,而不是游戏世界信息的唯一来源。

“简史”参考工具

音频
尽管还没有确定范围,我们仍计划将音频特性合并到界面中。我们也许不会在整个游戏中都播放插曲,但可能会播放一些符合特殊场合气氛的音乐。我们已经聆听了一些以航海为主题的传统民歌和船歌,并请音乐家朋友帮助寻找一位小提琴家和一位六孔小笛演奏家。我们还希望在一些对话框画面中使用画外音,它可以以另一种方式告诉玩家有关游戏中遇到的人物的信息。当然,我们还会在战争场面中加入声音效果,并在人物交流和旅行场面中加入环境声音。

结束语
在进行了大量研究和讨论之后,现在我们有了用户界面的初步设计,随着 "Pirates Ho!" 开发工作的进行,我们将逐步完善这个设计。目前,我们非常满意界面设计的简易性和一致性,我们竭尽所能使用界面将玩家完全吸引到这个游戏世界中。

参考资料

    • 请访问

    Pirates Ho! 网站

  • 可以下载该样本的源码:
    • eval.tar.gz(脚本示例源码)
    • snapshot-043000.tar.gz(游戏源码快照)
  • "Pirates Ho!" 使用的库
    • SDL_image
    • SDL_mixer
    • SDL_ttf
  • lex & yacc,第 2 版(O'Reilly,1992 年)
  • developerWorks 上的 "Pirates Ho!" 系列:
    • “SDL:使 Linux 变得有趣”
    • “使用 SDL:"Pirates Ho!" 的诞生”
    • SDL 用法,第 2 部分:"Pirates Ho!" 编码
    • “SDL 用法,第 3 部分:图形设计”
    • “SDL 用法,第 4 部分:lex 和 yacc”
  • 介绍 SDL API

关于作者
Sam Lantinga 是 Simple DirectMedia Layer (SDL) 库的作者,现在是 Loki Entertainment Software 的首席程序员,这家公司致力于生产最畅销的 Linux 游戏。他与 Linux 和游戏打交道开始于 1995 年,从事各种 DOOM! 工具移植,以及将 Macintosh 游戏 Maelstrom 移植到 Linux。

Lauren MacDonell 是一位自由技术作家,也是 "Pirates Ho!" 的合作开发者。

[转载]SDL 用法,第 5 部分:Pirates Ho! 中界面设计的原则 - 简易性、一致性和引人入胜相关推荐

  1. SDL用法:PiratesHo!全集

    SDL用法:"PiratesHo!"的诞生 Sam Lantinga, 首席程序员, Loki Entertainment Software Lauren MacDonell, 首 ...

  2. [转载] numpy用法(logical_and, nonzero,arange, reshape)

    参考链接: Python中的numpy.logical_not numpy里面有很多数组矩阵的用法,遇到一个就记一个. 1.np.logical_and/or/not (逻辑与/或/非) np.log ...

  3. python中split的用法取第二个分片_python中split()函数的用法

    函数:split() Python中有split()和os.path.split()两个函数,具体作用如下: split():拆分字符串.通过指定分隔符对字符串进行切片,并返回分割后的字符串列表(li ...

  4. 转载(面向对象设计的原则)

    这是设计模式系列开篇的第一篇文章.也是我学习设计模式过程中的总结.这篇文章主要讲的是面向对象设计中,我们应该遵循的六大原则.只有掌握了这些原则,我们才能更好的理解设计模式. 我们接下来要介绍以下6个内 ...

  5. 【转载】面向对象建模与数据库建模两种分析设计方法的比较

    [转载]面向对象建模与数据库建模两种分析设计方法的比较 板桥里人 http://www.jdon.com 2007/9/23(转载请保留) 我们知道:一个软件从无到有需要经过如下几个阶段:分析.设计. ...

  6. 【转载】学习Android界面设计的超级利器HierarchyView.bat

    [转载]学习Android界面设计的超级利器HierarchyView.bat 存在问题:  我看到别人的程序,想学习人家的UI布局是怎么做的,如何能窥探一二?  存在问题:  在学习ViewGrou ...

  7. Andriod界面设计的分辨率和尺寸适配全攻略 转载

    Andriod界面设计的分辨率和尺寸适配全攻略 转载 2016年09月27日 17:45:56 第一.屏幕尺寸: 一般表示是手机的实际物理尺寸,屏幕尺寸指屏幕的对角线的长度,单位是英寸,1英寸=2.5 ...

  8. java的collect用法_java8新特性:stream流中collect用法

    java8新特性:stream流中collect用法 java8新特性:stream流中collect用法 1.toList List collectList = Stream.of(1, 2, 3, ...

  9. 【转载】界面设计测试规范

    一些界面标准规范 一:遵循一致的准则,确立标准并遵循 无论是控件使用,提示信息措辞,还是颜色.窗口布局风格,遵循统一的标准,做到真正的一致. 这样得到的好处: 1:使用户使用起来能够建立起精确的心里模 ...

最新文章

  1. webbrowser1 脚本报错_c# winform程序 webBrowser 当前页面的脚本发生异常 找不到成员...
  2. mysql left join 慢 的一个原因
  3. python与excel的差别-python3与Excel的完美结合
  4. .NET通过RFC读取SAP数据
  5. 《机器学习实战》chapter02 K-近邻算法(KNN)
  6. 【小技巧】深度学习中的那些效率提升利器(附资源)
  7. 使用“override”声明的成员函数不能重写基类成员_C++日志(三十五)虚基类与其子类的构造函数...
  8. R语言里面的循环变量
  9. 【JDBC】Eclipse连接Mysql
  10. 服务监控 Spring Boot Actuator 介绍
  11. squid via检测转发循环
  12. 中断触发流程三(中断控制器)
  13. 新款iPhone SE是改良版iPhone 8无误了,部分零件可互换
  14. shell脚本100例
  15. 程序员到CTO需要准备什么
  16. 从java库学设计模式_java I/O库的设计模式
  17. win7_32下编译FFmpeg
  18. 修改XMAPP中Apache的默认访问的主页
  19. UML - 类图的关系总结
  20. nc数据处理,掩膜,经纬度定位格点

热门文章

  1. Part 2 Linux programming:chapter 15:套接字和标准I/O
  2. IDEA创建maven项目没有src目录问题解决
  3. 什么是SRRC?流程是什么?申请需要哪些资料?
  4. 网易云音乐(netease-cloud-music)无法通过图标打开,只能用命令行开启
  5. Base Filtering Engine (BFE)服务无法启动
  6. MATLAB LU函数
  7. oracle 测试坚挺,Oracle RMAN测试
  8. 学而思计算机达人秀,精彩回顾 | 第6届计算达人秀圆满收官!
  9. 被绕晕了,嵌入式用C好还是用C++好
  10. vue移动端实现拖拽