GUI(Graphical User Interface,图形用户界面)和HCI(Human-Computer Interaction,人机交互)是应用开发中极其重要的一部分,但往往被开发人员所忽略。Apple、Google 以及Facebook 等公司和应用之所以能够成功,很大一部分原因就是它们遵循了卓越的可用性设计指南。一致、简洁、快速以及最小化设计体现在它们的每一款产品中。当然,视频游戏(也包括我们的)设计也不例外,不过这里边有一个很大的问题需要注意:与其他产品不同,我们的GUI 必须同时适应桌面及移动设备的屏幕。

  明确了这一点之后,我们可以有针对性地列举出一组建议。

  • 不能依赖鼠标悬停给出反馈或显示提示条。触摸屏只有两个状态:触摸与未• 触摸。
  • 没有提示条,就只能通过图标和按钮来清晰地传达通过它们能做什么的信息。
  • 也不能依赖于右键单击,因为移动设备没有那个功能。
  • 在某些等轴游戏中,横向游戏模式比纵向游戏模式能更有效地利用屏幕区域。
  • 账户余额等重要信息最好显示在顶部,而导航元素最好显示在左下角。(别忘了全世界有90% 的人是右利手,在使用右手来点击游戏界面的同时,他们通常都用左手拿着设备,如图3-1 所示。)

enter image description here

  • 由于手机屏幕很小,应该尽量保持界面的• 简洁。
  • 应该假设用电脑鼠标上下滚动与使用两根手指放大缩小(目前的标准做法)执行相同的操作。
  • 还应该避免显示浮动窗口,而代之以滚动面板。这些面板会在屏幕的右侧显示。

enter image description here

大体上,我们游戏的GUI 类似图3-2 所示。

enter image description here

每个导航按钮都可以调出一种工具,或者执行一种特定的操作。我们的游戏将会添加下列工具。

  • 选择工具,用于选择不同的建筑物。
  • 移动工具,用于切换滚动位置修改器,可以通过鼠标使用;在移动设备或平板电脑中可以通过手指在屏幕上拖动使用。
  • 放大及缩小按钮,用于放大网格及其中的物体,操作方法是点击屏幕。

  • 旋转按钮,用于逆时针旋转矩阵• 的值。

  • 拆除按钮,用于拆掉特定的建筑物。

此外,我们还要支持以下功能。

  • 不通过缩放按钮,直接使用鼠标的滚轮放大或缩小。
  • 使用键盘上的键来滚动网格或者放大、缩小以及旋转网格。

本文摘自《深入HTML5应用开发》