数字界面设计.doc

黄朝斌 整理2010.9界面设计在软件或者网页设计领域，往往有朴素、花哨、现代等风格划分，但很明显这种划分不适合于游戏。游戏风格的划分要根据游戏的种类和世界观，例如RPG中，武侠玄幻魔幻之分是最为明显的，武侠中，经常使用一些武器作为按钮、编织花纹作为背景、配合一些古体字；玄幻中较之武侠类型会增加许多光影效果例如法阵、符咒等；而西方魔幻与我们中国的武侠玄幻区别较大，一般以金属或者树枝作为页面元素，走宏伟或者自然路线。当然了，最常出现的元素就是羊皮纸了。 而其他类似的游戏，没有明确的世界观，则主要侧重清晰简洁的界面设计，同时这也是为大多数人所接受的。时下受vista、win7等引领的水晶控件风格在各个新生游戏中均有体现。 在元素的选择上要保持一致性，这是毋庸置疑的铁则。我个人觉得比较难以设计的不是图标、而是各种显示信息的窗口，良好的交互性正是在这里体现的。 用户导向（User oriented）原则设计游戏首先要明确到底谁是玩家，要站在玩家的观点和立场上来考虑界面设计。要做到这一点，必须要和玩家来沟通，了解他们的需求、目标、期望和偏好等。游戏设计者要清楚，玩家之间差别很大，他们的能力各有不同。比如有的用户可能会在视觉方面有欠缺（如色盲），对很多的颜色分辨不清；有的用户的听觉也会有障碍，对于软件的语音提示反映迟钝；而且相当一部分用户的计算机使用经验很初级，对于复杂一点的操作会感觉到很费力。另外，用户使用的计算机机器配置也是千差万别，包括显卡、声卡、内存、网速、操作系统等都会有不同。设计者如果忽视了这些差别，设计出的游戏在不同的机器上显示就会造成混乱。KISS（Keep It Simple And Stupid）原则KISS原则就是Keep It Simple And Stupid的缩写，简洁和易于操作是游戏设计的最重要的原则。毕竟，现在游戏数量多、主体玩家耐性低，除了经营类和战略类游戏，没有必要在游戏中设置过多的操作，即使是这两类游戏，也会精心设计一个新手教程使玩家迅速入门。该原则一般的要求，在任何允许的情况下，都应该尽量向玩家提示游戏技巧，不要什么都等玩家自己去摸索，例如道具的功能、技能的用途等；不要让玩家发呆、无事可做，特别是在场景过度的时候，现下仅有一个进度条提示已经远远不够，有的游戏通过播放动画的形式来过度，而比较低成本的方式是在场景过度时显示一段游戏攻略或技巧的文字供玩家阅读。布局控制关于游戏界面排版布局方面，很多设计者重视不够，游戏排版设计的过于死板，甚至照抄他人。如果界面的布局凌乱，仅仅把大量的信息堆集在页面上，会干扰玩家的阅读。一般在设计上所要遵循的原理有：（1）Miller公式。根据心理学家George A.Miller的研究表明，人一次性接受的信息量在7个比特左右为宜。总结一个公式为：一个人一次所接受的信息量为 72 比特。这一原理被广泛应用于软件建设中，一般网页上面的栏目选择最佳在59个之间，如果软件所提供给浏览者选择的内容链接超过这个区间，人在心理上就会烦躁，压抑，会让人感觉到信息太密集，看不过来，很累。例如A的栏目设置：Main、MyAol、Mail、People、Search、Shop、Channels和Devices共八个分类。M的栏目设置：MSN Home、My MSN、Hotmail、Search、Shopping、Money和People & Chat共七项。然而很多国内的软件在栏目的设置远远超出这个区间。反映在游戏中就是任何菜单中的控件数量要严格控制在9个以内，同时也包括了显示在界面中的元素，例如道具栏、物品栏等等。我将这个理论放大，可以认为游戏中的各种属性数量都应该控制在这个范围内，例如主角的属性，一般包括：生命、魔力、物攻、物防、法攻、法防、闪避、命中八项；装备包括：武器、头盔、铠甲、护腰、手套、靴子、饰品七项。现下有很多游戏都远远超过这个限制，个人感觉不好。（2）分组处理。上面提到，对于信息的分类，不能超过9个栏目。但如果你的内容实在是多，超出了9个，需要进行分组处理。如果，你的网页上提供几十篇文章的链接，需要每隔7篇加一个空行或平行线做以分组。如果你的软件内容栏目超出9个，如微软公司的软件，共有11个栏目，超过了9个。为了不破坏Miller公式，在设计时使用蓝黑两种颜色分开。在游戏中，如果确实需要设置较多的属性，则应该将其进行归类，例如将项链、戒指归为一类，由单独的窗口来进行设置。4视觉平衡各种元素（如图形、文字、空白）都会有视觉作用。根据视觉原理，图形与一块文字相比较，图形的视觉作用要大一些。所以，为了达到视觉平衡，在设计时需要以更多的文字来平衡一幅图片。另外，按照中国人的阅读习惯是从左到右，从上到下，因此视觉平衡也要遵循这个这个道理。例如，你的很多的文字是采用左对齐，需要在界面的右面加一些图片或一些较明亮、较醒目的颜色。视觉平衡体现在游戏中就是当屏幕上要显示多个控件时该如何摆放的问题，例如有雷达、道具栏、技能栏等。以魔兽为例，左下角为小地图，右下角为操作界面，中间则根据用户当前点击的对象显示对象的具体信息。这里可以看到，图片元素被平均分开在屏幕两侧，而中间使用文件信息来缓冲。 同时，也决不能低估空白的价值。如果你的页面上所显示的信息非常密集，这样不但不利于玩家阅读，甚至会引起玩家反感，破坏该游戏的形象。我认为在游戏界面设计时，要考虑游戏场景所占屏幕的比例，一方面，要让玩家尽可能获得大的视野，另一方面，又不能太压缩控件栏导致信息拥挤。我认为比较合适的方式是，使控件栏动态显示，例如当玩家在地图中跑动时，可以将除了小地图以外的控件都隐藏掉，当玩家停下脚步时再显示出来，即根据玩家的操作动态决定哪些控件显示，哪些不显示。另一种设想，当玩家鼠标移动到道具栏时，其他控件栏隐藏，并且将道具栏适当放大，当玩家鼠标移开或者使用完道具后恢复。色彩的搭配和文字的可阅读性颜色是影响页面的重要因素，不同的颜色对人的感觉有不同的影响，例如：红色和橙色使人兴奋并使得心跳加速；黄色使人联想到阳光，是一种快活的颜色；黑颜色显得比较庄重，考虑到你希望对玩家产生什么影响，为游戏设计选择合适的颜色（包括背景色、元素颜色、文字颜色、按钮颜色等）。为方便阅读屏幕上的信息，可以参考报纸的编排方式将网页的内容分栏设计，甚至两栏也要比一满页的视觉效果要好。另一种能够提高文字可读性的因素是所选择的字体，通用的字体（Arial，Courier New，Garamond，Times New Roman，中文宋体）最易阅读，特殊字体用于标题效果较好，但是不适合正文。如果在整个页面使用一些特殊字体（如Cloister，Gothic，Script，Westminster，华文彩云，华文行楷），这样玩家阅读起来感觉一定很糟糕。该类特殊字体如果在界面上大量使用，会使得阅读颇为费力，眼睛很快就会疲劳。和谐与一致性 最为抽象也最为重要的部分，对此我很难用文字表达，只可意会，不可言传，游戏界面设计的成败就在于它。不过这工作更多地是交由美工来完成吧。用一句话精辟地概括前后用词、语义、结构和风格一致。个性化 个性化则非常通俗易懂，即每款游戏设计上都应有其每款游戏的特色，将之与其他游戏区别开来，如此便能极大地吸引玩家的眼球游戏界面设计游戏界面作为人机交互的桥梁，其作用无可取代。游戏玩家对游戏的直观印象，一个来自操作，另一个就是画面。游戏界面本身就是画面的一部分，其地位举足轻重，下面以一个武侠RPG策划案为例，简单介绍一下一个游戏策划案中所涉及的一些界面及注意事项。 图1 图1是游戏中经常所用到的一些界面，我们下面分别来介绍一下：一、启动界面：指的是玩家双击桌面快捷图标后，从程序启动到进入游戏主界面时的画面。策划人员可以根据自己的想象写成设计文档，对美术制作人员提出一个大概要求，比如采用什么样的底色，界面多大，什么样的图案等等。二、主菜单界面：集游戏中主要功能大成的界面，累似于文章写作中的提纲。在游戏中一般是按esc键呼出，显示在屏幕中间。该界面包含5个按钮： 2.1、新游戏：按钮，点击之后开始一个新游戏。 2.2、读取进度：按钮，点击后该界面消失，进入读取进度界面。 2.3、选项：按钮，点击进入选顶界面。 2.4、制作组：按钮，点击进入制作组成员介绍界面。 2.5、退出：按钮，点击后弹出提示菜单（图2），询问玩家是否退出游戏，点击按钮“是”确出程序回到桌面，点击按钮“否”提示菜单消失，继续游戏。三、新游戏界面：该界面并非是指游戏运行中的主界面，而是指的是在游戏过程中呼出的界面。该界面共有5个按钮。 3.1、保存游戏：按钮，点击弹出存档界面，保存当前的游戏进度。 3.2、加载游戏：按钮，点击弹出读取存档界面，读取以前的存档。 3.3、主菜单：按钮，点击退出当前程序，回到游戏的主菜单。 3.4、制作组：按钮，单击弹出制作小组界面，当前界面消失。四、读取进度界面、保存进度界面：这两个界面主要显示游戏已经存在的存档记录和空余的存档位置。设计该界面时，应该详细描述存档的表现形式，是文字还是截图？上面是否有时间显示？一共有多少个存档记录？玩家如何存档？当玩家覆盖已有存档时是否有消息提示等。 4.1、进度一：表示游戏的第一条进度。以戴图的形式表示，同时显示该进度的序号。序号按玩家保存的次数编制。同时在截图上以文字显示玩家该进度所在的地图。 4.2、同上。 4.3、退出：按钮，点击退回到游戏主菜单。五、加载界面：也叫loading图。当玩家选中一进度后，显示该图片，同时系统在后台调入进度。该系统调入完毕后该图片消失，显示玩家所读取的游戏进程。六： 选项界面：该界面为游戏视频、操作、声音的设置界面，共有4个按钮。 6.1、操作：按钮，点击进入操作设置界面。 6.2、声音：铵钮，点击进入声音设置界面。 6.3、显示：按钮，点击进入视频设置界面。 6.4、退出：按钮，点击退回到游戏主菜单。七、操作界面：这里供玩家更改自己的操作模式。 7.1、鼠标设置：在这里可以设置鼠标的操作模式，比如说左手操作、右手操作等。 7.2、键盘设置：在这里可以设置键盘的快捷键等等。八、显示设置界面：玩家在这里可以设置视频。 8.1、分辨率：玩家在这里可以调节自己显示器的分辨率。在设计时，要详细说明有几种分辨率供玩家选择，玩家如何操作更改分辨率等。 8.2、模型精度：玩家在这里要以调节游戏中模型的精度，精度越高，画面越漂亮，同时也意味着更耗资源。在这里要详细注意玩家如何去选择模型精度，是分为高、中、低三个选择项还是其它等。 8.3、天气效果：玩家在这里可以自由选择是否打开游戏中的天气效果。在这里要说明玩家如何在这里打开或关闭。一般为打开和关闭两个选择框，玩家选中开时，开气效果打开，玩家选择关闭时，游戏效果关闭。 8.4、退出：按钮，点击退回到游戏选项界面。九、声音设置界面：玩家在这里可以设置游戏的音乐音效。 9.1、音乐：玩家如何打开或关才音乐，玩家如何调节音乐的音量。 9.2、音效：一般为打开和关闭两个选择框，玩家在这里可以打开或关闭游戏的音效。 9.3、退出：按钮，点击退回到游戏选项界面。十、游戏主界面：10.1、属性工具栏：在这里，要写明显示哪些属性，如何显示等。如红色：生命值绿色：体力值蓝色：法力值。10.2、物品工具栏：在这里要工具条的空格上可以放置哪些物品以及显示方式。如该工具栏共3个空格，玩家可以将三种物品图标从背包内拖出来放置在空栏位上。在栏位的左上角显示该物品在背包内的数量。栏位下方的字母代表快捷键，玩家按下字母键即可使用相对应的栏位内的物品。10.3、技能工具栏：在这里说明如何把技能拖放到该工作栏的空白栏位上及使用方式等。如：该工具栏共5个空格，玩家可以将五种技能的图标从技能面板上拖出来放置在空栏位上。栏位下方的字母代表快捷键，玩家按下字母键即可使用相对应的栏位内的技能 以上，简单介绍了一个单机游戏中所涉及的一些主要界面及写作方法，其中有些界面并没有一一说明，比如玩家属性界面，背包界面，武功技能界面等。界面设计原则：（1）用户原则。人机界面设计首先要确立用户类型。划分类型可以从不同的角度，视实际情况而定。确定类型后要针对其特点预测他们对不同界面的反应。这就要从多方面设计分析。（2）信息最小量原则。人机界面设计要尽量减少用户记忆负担，采用有助于记忆的设计方案。（3）帮助和提示原则。要对用户的操作命令作出反应，帮助用户处理问题。系统要设计有恢复出错现场的能力，在系统内部处理工作要有提示，尽量把主动权让给用户。界面设计应该遵循的原则：一、人机界面的设计应该简洁易懂：人机界面不应该喧宾夺主。游戏软件与其它类应用软件不同，游戏软件可视化的元素中所有的一切都应该为游戏性与晚间的游戏体验服务如果过分修饰或过于繁琐的话，人机界面反而会干扰玩家的注意力，使他们不能集中精力于游戏世界的体验中。人机界面应该力求简洁，占用的屏幕空间越少越好。矛盾随之应运而生，随着游戏的复杂程度和数据量的增加，需要玩家知道掌握的数据信息越来越多，另一方面人机界面的需求有时追求极度简洁，占用屏幕越少越好。同时人机界面的设计应该具有极强的易懂性，Age Of Empire的设计者们曾提出“前十五分钟法则”。“前十五分钟”指的是对于一个游戏而言如果入门级玩家不能在前十五分钟顺利的弄明白基本操作和策略并开始游戏，或铁杆级玩家不能在前十五分钟感到有趣和挑战的话，他们就会放弃这个游戏。因此游戏界面应该是极易上手，同时又应该给高级玩家带来挑战的设计。二、人机界面和游戏世界应该风格统一：从色彩到质感，应该和游戏世界保持一致协调。而且界面与有些应该结合统一不要有过大反差或甚至风马牛不相及。三、人机界面应该具有一定的自解释性（affordance）与可学习性（learnable）：所谓自解释性，是指一个设计能够通过自己的外表暗示自己的功能。最简单的例子如门把手，其形状本身就暗示了手应该握住它后向下按。在人机界面设计上最典型的例子就是windows的窗口了，在窗口的右下角的三角形三维凹凸不平，就是从音量调节器的设计（音量调节钮上的凹凸不平，暗示了其可旋转性）中引申出来的，它暗示了鼠标可以拉动它从而改变窗口大小。四、人机界面应该布局平衡：所有文字和图表应该摆放得恰到好处，形成一种平衡感。以往的游戏设计师们毫无平面设计的基础训练，在摆放图表和文字时随心所欲毫无章法，导致明显的布局不平衡和重要信息不突出。五、应该以一种动态的观点来设计人机界面：这一点也许不太好理解。将人机界面设计与平面设计区分开来的最主要一点便是前者是动态的，而后者则为静态的设计平面设计的最终产品包括广告招贴，书籍封面，宣传册等等，这些都是人们去阅读的静态的页面（就新兴的网页设计而言，其更接近于后者）。二人机界面的最终产品是软件用户界面，其实要用户通过动态的过程来使用的。设计人机界面，并不只是设计一个窗口菜单和控制面板，更重要的是设计一种动态的交互（interaction），在设计时必须将用户种种的行为可能性与动态视效的配合考虑在内。六、在设计用户界面时应将效率问题考虑在内：玩家在玩游戏时的交互实现是通过以下这一过程实现的：1玩家意识到当前需要2玩家寻找命令3玩家输入指令（input，即玩家点击相应按钮或按下手柄按键）4电脑内部程序进行指令分析5电脑以可视化的形式进行反馈（output，当前需要得到实现）。所有游戏，包括当前所有软件，都是通过无数次的上述过程来实现交互的，并且这种交互过程模式，将在很长的一段时间内作为交互的主要甚至唯一手段。正因为这种过程的存在，使得我们不得不引入效率的概念。用户界面设计的任务，从最根本的方面来说，就是减少从过成2到过程3这一段用户所需要做的功。玩家在这一过程中所花费的时间与鼠标所经过的距离越长，玩家所消耗掉的功就越多。用户界面设计追求减少甚至消灭掉这一过程，因为这一过程所消耗掉用户的功就其意义来说是无用功，它对整个交互作用没有任何意义，反而这一过程的大量存在会使用户产生疲劳感和排斥感。就即时战略游戏而言，在早期的Age Of Empire之后，此类游戏的用户界面设计便一直以其为标准，即将游戏画面与用户界面分割开来，前者居上占据屏幕的70-80%，后者居下。一直到后来的许多热门即时战略游戏Red Alarm系列（其用户界面由下面改到了右面）、StarCraft系列、WarCraft系列这既表示了这一设计为广大界面设计师拥护，说明此一设计有其成熟的一面；同时也表示用户界面设计在长时间内处于无创新状态。因为就此设计而言，其仍有许多缺陷，在效率方面问题最为明显。为了完成游戏，玩家需要不停的将鼠标在游戏画面与用户界面之间移动，以完成指令的下达。现行的这一设计增加了鼠标移动的距离和下达指令需耗费的时间，如此一来，游戏中长时间的大量的无用功会令玩家产生疲劳感。尽管已经有许多方法被尝试来改变这种状况，如热键盘这一设计的引入。然而这一针对高级玩家的设计并没有从根本上改变游戏界面设计的效率问题。许多工具软件在效率这方面的问题解决的要比游戏好得多。其中贡献最为明显的就是右键弹出指令框这一设计，其有效地解决了鼠标移动距离与消耗时间的问题，从而客观地提升了软件操作的效率。然而，如果将这一设计应用于游戏中，就势必增加了界面的复杂性，不如原来的分割式设计一目了然。这有与人机界面设计的第一条原则相矛盾，同时对二三四条产生连带影响，这些都增加了人机界面设计的难度与挑战性。其实人机界面设计原则的第六条在本质上并不与第一条发生矛盾关系，这就为人机界面设计的改进与创新提供了可行性。七、人机界面设计的最高水平是达到无形入化：所谓人机界面的无形入化，就是说人机界面非常自然，非常好用，玩家用起来得心应手，全身心地投入到游戏世界中，仿佛人机界面是透明的了，似乎感受不到它的存在。这是所有人机界面设计的终极目标，也是所有游戏设计师们努力的方向。界面设计与评价评价是人机界面设计的重要组成，应该在系统设计初期就进行，或在原型期就进行，以便及早发现设计缺陷，避免人力、物力浪费。对界面设计的质量评价通常可用四项基本要求衡量： （1）界面设计是否有利于用户目标的完成；（2）界面学习和使用是否容易； （3）界面使用效率如何； （4）设计的潜在问题有哪些； 对界面的总体设计和具体功能块设计，可用上面提到的各类界面设计准则就其应用对象进行综合测试。具体要求的界面品质,仅提出如下几项供参考：（1）实用性。衡量界面在帮助用户完成任务时的满意程度，这点只能从用户调查表中获取数据。（2）有效性。度量指标有错误率、任务完成时间、系统各设备使用率等。（3）易学习性。从系统开始使用一段时间后，错误率下降情况、完成任务时间减少的情况、正确调用设备及命令的情况以及用户知识增加的状况来衡量。（4）系统设备及功能使用面。若有些设备或功能任何用户都未用过，则可能设计有误。（5）用户满意程度。以用户满意程度，发现问题多少及使用兴趣来衡量。界面评估采用的方法已由传统的直觉经验的方法，逐渐转为科学的系统的方法进行。传统经验方法有如下几种： （1）实验方法。在确定了实验总目标及所要验证的假设条件后，设计最可靠的实验方法是随机和重复测试，最后对实验结果分析总结。（2）监测方法。即观察用户行为。观察方法有多种，如直接监测、录像监测、系统监测等。执行时一般多种方法同时进行。（3）调查方法。这种方法可为评价提供重要数据，在界面设计的任何阶段均可使用。调查方式可采用调查表(问卷)或面谈方式。但应该指出，这种方法获得数据的可靠性和有效性不如实验法和监测法。另一种不同于经验方法的是形式化方法。这种方法建立在用户与界面的交互作用模型上。它与经验方法区别在于不需要直接测试或观察用户实际操作，优点是可在界面详细设计实现前就进行评价。但无法完全预知用户所反映的情况，所以目前多用比较简单可靠的经验方法。（1）布局 屏幕布局因功能不同考虑的侧重点不同。各功能区要重点突出，功能明显。无论哪一种功能设计，其屏幕布局都应遵循如下五项原则：平衡原则。注意屏幕上下左右平衡。不要堆挤数据，过分拥挤的显示也会产生视觉疲劳和接收错误。 预期原则。屏幕上所有对象，如窗口、按钮、菜单等处理应一致化，使对象的动作可预期。经济原则。即在提供足够的信息量的同时还要注意简明，清晰。特别是媒体，要运用好媒体选择原则。顺序原则。对象显示的顺序应依需要排列。通常应最先出现对话，然后通过对话将系统分段实现。规则化。画面应对称，显示命令、对话及提示行在一个应用系统的设计中尽量统一规范。在屏幕布局中，还要注意到一些基本数据的设置。按照以上原则，进行屏幕设计，应做到：（1）按功能将屏幕分成几个区域，通常为：标题区，工作区，提示和出错处理区、