引用:

小谈游戏UI设计 本文对游戏UI设计中涉及到的知识做了一些整理和归类，大部分经验是我在游戏UI设计中所遇到的一些问题，在和伙伴们一起解决掉以后总结出来的。另一部分来源于互联网。由于水平所限有些地方可能写的比较片面希望各位能多多批评指正。 UI的解释 UI即User Interface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。 一些比较出色的游戏UI设计不仅让游戏独具特色，还可以让游戏操作变得简单、易学,大大的增加了游戏的上手度。由于大部分游戏本身都是通过图形与用户进行人机交互，所以一个漂亮的游戏UI的风格、合理的界面操作流程都可以给用户留下一个非常GOOD的第一印象。这些因素对于游戏产品争取用户、引导用户有着决定性的作用。 游戏UI设计 游戏UI设计可分为两个部分：程序编码设计与UI设计。程序编码设计字面意思应该很好理解，因为程序的工作主要是把策划的设计实现出来，和我们讨论的问题并没太大关联所以我们暂时不做描述。 在这里主要介绍游戏UI的设计。UI的本意是用户界面，是英文User和 interface的缩写。其实他们之间还应该有个更重要的词-交互（interactive）。游戏UI设计的重点其实就在用户与界面的交互上，而不仅仅是漂亮、华丽、符合游戏风格即可。 怎么样才能设计出一个品质优良的UI作品呢？这需要设计者去了解目标用户的喜好、使用习惯、同类产品设计方案以及设计者本身对游戏UI的理解去进行设计。设计初稿完成后还要和各个部门的同仁不断的进行讨论对设计进行修正。衡量一个优秀游戏UI的标准，不是项目组中某个权贵的单方面意见，而是项目内所有成员集体意见，并且调研大量的终端用户并要求他们给出使用心得，来做为游戏UI优劣的评判标准。 游戏UI的设计要和用户紧密的结合，我们在意的是大众的感受和意见。游戏UI的设计贯穿整个研发过程，我们需要不断的与用户沟通听取他们的意见，并对我们的设计进行不断的修正。最终的目的都是为了设计出一套大部分人都满意的作品。 目前国内的游戏UI设计还仅仅停留在一个很初级的层面，相当于欧美80年代末的水平。大部分企划人员只给出了最基本的功能需求，然后由美术设计师根据漂不漂亮去完成，没有专门的人员，去系统的调查用户使用习惯以及不同年龄阶段的用户对UI的需求取向等等。这些制作人员的疏忽造成了目前国内产品UI要么单调乏味，要么死气沉沉，要么抄袭大作。毫无自己的特色和创新点。 界面字体 界面上的字体一般说来有两种，一种是美术字，这需要美术通过创意去发挥，另一种是程序导入的字库字体。下面介绍几个小窍门 1.windows中宋体9号字是最平滑和最好看的。在各种显示分辨率下显示都十分优秀（一个程序员朋友告诉我的，错了的话别抽我，我可以把他家地址交代出来，你们去找他。。。） 2. 小道消息-微软雅黑比Windows宋体更具优势，偶没试过，有兴趣的自己试试吧！ 界面色彩 不同的色彩代表不同的含义，游戏UI设计上如果能利用好色彩所隐含的表情以及对用户造成的暗示，就可以制作出令人耳目一新的游戏UI。传统美术行业已经对色彩有了很深刻的理解与认识，并且对色彩的含义做了详细的解释说明，这些都是我们可以充分利用的知识财富。（以下是摘录，在此感谢原著作者） 色彩解释 色彩本身是没有灵魂的，它只是一种物理现象，但人们却能感受到色彩的情感，这是因为人们长期生活在一个色彩的世界中，积累着许多视觉经验，一旦知觉经验与外来色彩刺激发生一定的呼应时，就会在人的心理上引出某种情绪。 无论有彩色的色还是无彩色的色，都有自己的表情特征。每一种色相，当它的纯度和明度发生变化，或者处于不同的颜色搭配关系时，颜色的表情也就随之变化了。因此，要想说出各种颜色的表情特征，就想要说出世界上每个人的性格特征那样困难，然而对典型的性格作些描述，总还是有趣并可能的。 红色 红色是强有力的色彩，是热烈、冲动的色彩。约翰·伊顿教授描绘了受不同色彩刺激的红色。他说：在深红的底子上，红色平静下来，热度在熄灭着；在蓝绿色底子上，红色就像炽烈燃烧的火焰；在黄绿色底子上，红色变成一种冒失的、莽撞的闯入者，激烈而又寻常；在橙色的底子上，红色似乎被郁积着，暗淡而无生命，好像焦干了似的。 橙色 橙色的波长仅次于红色，因此它也具有长波长导致的特征：使脉搏加速，并有温度升高的感受。橙色是十分活泼的光辉色彩，是暖色系中最温暖的色彩，它使我们联想到金色的秋天，丰硕的果实，因此是一种富足的、快乐而幸福的色彩。 橙色稍稍混入黑色或白色，会成为一种稳重、含蓄有明快的暖色，但混入较多的黑色后，就成为一种烧焦的色，橙色中加入较多的白色会带有一种甜腻的味道。橙色与蓝色的搭配，构成了最响亮、最欢快的色彩。 黄色 黄色是亮度最高的色，在高明度下能够保持很强的纯度。黄色的灿烂、辉煌，有着太阳般的光辉，因此象征着照亮黑暗的智慧之光；黄色有着金色的光芒，因此又象征着财富和权利，它是骄傲的色彩。黑色或紫色的衬托可以使黄色达到力量无限扩大的强度。白色是吞没黄色的色彩，淡淡的粉红色也可以像美丽的少女一样将黄色这骄傲的王子征服。 黄色最不能承受黑色或白色的侵蚀，这两个色只要稍微的渗入，黄色即刻失去光辉。 绿色 鲜艳的绿色非常美丽，优雅，特别是用现代化学技术技术创造的最纯的绿色，是很漂亮的的色。绿色很宽容、大度，无论蓝色还是黄色的渗入，仍旧十分美丽。黄绿色单纯，年青；蓝绿色清秀、豁达。含灰的绿色，也是一种宁静、平和的色彩，就像暮色中的森林或晨雾中的田野那样。 蓝色 蓝色是博大的色彩，天空和大海着最辽阔的景色都呈蔚蓝色，无论深蓝色还是淡蓝色，都会使我们联想到无垠的宇宙或流动的大气，因此，蓝色也是永恒的象征。蓝色是最冷的色，使人们联想到冰川上的蓝色投影。蓝色在纯净的情况下并不代表感情上的冷漠，它只不过代表一种平静、理智与纯净而已。真正令人的情感缩到冷酷悲哀的色，是那些被弄混浊的蓝色。 紫色 波长最短的可见光是紫色波。通常，我们会觉得有很多紫色，因为红色加少许蓝色或蓝色加少许红色都会明显地呈紫味。所以很难确定标准的紫色。约翰·伊顿对紫色做过这样的描述：紫色是非知觉的色，神秘，给人印象深刻，有时给人以压迫感，并且因对比的不同，时而富有威胁性，时而又富有鼓舞性。当紫色以色域出现时，便可能明显产生恐怖感，在倾向于紫红色时更是如此。歌德说：“这类色光投射到一副景色上，就暗示着世界末日的恐怖。” 紫色时象征虔诚的色相，当紫色深化暗化时，有时蒙昧迷信的象征。潜伏的大灾难就常从暗紫色中突然爆发出来，一旦紫色被淡化，当光明与理解照亮了蒙昧的虔诚之色时，优美可爱的晕色就会使我们心醉。 用紫色表现混乱、死亡和兴奋，用蓝紫色表现孤独与献身，用红紫色表现神圣的爱和精神的统辖领域——简而言之，这就是紫色色带的一些表现价值。 伊顿教授的对紫色的描述，的确能给我们以启示，它似乎是色环上最消极的色彩。尽管它不想蓝色那样冷，但红色的渗入使它显得复杂、矛盾。它处于冷暖之间游离不定的状态，加上它的低明度的性质，也许就构成了这一色彩在心理上引起的消极感。与黄色不同，紫色可以容纳许多淡化的层次，一个暗的纯紫色只要加入少量的白色，就会成为一种十分优美、柔和的色彩。随着白色的不断加入，也就不断的产生出许多层次的淡紫色，而每一层次的淡紫色，都显得很柔美、动人。 黑、白、灰色 我们曾经说过，无彩色的在心理上与有彩色具有同样的价值。黑色与白色时对色彩的最后抽象，代表色彩世界的阴极和阳极。太极图案就是黑白两色的循环形式来表现宇宙永恒的运动的。黑白所具有的抽象表现力以及神秘感，似乎能超越任何色彩的深度。康丁斯基认为，黑色意味着空无，像太阳的毁灭，像永恒的沉默，没有未来，失去希望。而白色的沉默不是死亡，而是有无尽的可能性。黑白两色是极端对立的色，然而有时候又令我们感到它们之间有着令人难以言状的共性。白色与黑色都可以表达对死亡的恐惧和悲哀，都具有不可超越的虚幻和无限的精神，黑白又总是以对方的存在显示自身的力量。它们似乎是整个色彩世界的主宰。 在色彩世界中，灰色恐怕是最被动的色彩了，它是彻底的中性色，依靠邻近的色彩获得生命，灰色一旦靠近鲜艳的暖色，就会显出冷静的品格；若靠近冷色，则变为温和的暖灰色。与其用“休止符”这样的字眼来称呼黑色，不如把它用在灰色上，因为无论黑白的混合、不色的混合、全色的混合，最终都导致中性灰色。灰色意味着一切色彩对比的消失，是视觉上最安稳的休息点。然而，人眼是不能长久地、无线扩大地注视着灰色的，因为无休止的休息意味着死亡。 色彩的表情在更多的情况下是通过对比来表达的，有时色彩的对比五彩斑斓、耀眼夺目，显得华丽，有时对比在纯度上含蓄、明度上稳重，又显得朴实无华。创造什么样的色彩才能表达所需要的感情，完全依赖于自己的感觉、经验以及想象力，没有什么固定的格式。 游戏UI结构设计 UI结构设计究竟是什么？ 当一些功能性的需求被提出那么如何合理的安排这些功能与功能之间的关系，理清他们的主次关系，分析出用户对功能信息的获取点，就成为UI结构设计的主要工作，人机交互设计的重点也就在UI结构的设计上。我们在设计UI结构的时候应该注意以下几个方面： 1.划分出各个模块功能间的主从关系 2.同类模块分类 3.确定各个模块间切换入口 4.UI的切换方式 5.根据用户阅读习惯设计UI的结构 6.尽量设计符合用户习惯的操作方式，让用户接受太过新奇的设计需要付出客户流失的代价，除非是十分的把握不要过于跳跃性的创新。 7.能点击的功能或区域一定要突出，可以通过颜色或动态效果等方式表现 8.通过把界面分划出功能区域，来引导用户对界面功能做快速清晰的了解。 9.类似的功能模块，风格尽量要类似。 10.同等级的功能模块的导航按钮，大小、风格尽量相同。如果按钮中的字数不同，通常以最多数字的按钮为标准制作 11.文字尽量简化 12.界面不要拥挤，不要给人堆砌感 13.所有的设计都要围绕让用户在最短的时间，用最简便的方法，获取最重要的信息去设计。 用户界面设计原则 因为不同游戏产品所要表达的方向不同，所以每款游戏都会根据自身特点去设计适合自己的一套界面，我们不可能把每个游戏都拿出来评论解说一翻，根据我的经验，我认为大部分的游戏产品UI都会遵循以下原则设计： 1.UI风格统一，在UI设计中应该保持UI的一致性。一致性既包括使用标准的模块结构模式,也指使用相同的信息表现方法,如在字体、美术风格、颜色、术语、信息显示等方面确保一致。 2.UI结构合理，布局力求简洁、有序、易于操作。 3.操作简单，一般情况下我们都本着一鼠走天下的原则去设计界面的操作流程和游戏内操作流程。 4.快捷键与功能单词语意保持一致，在游戏界面上通过图片显示或悬浮信息显示快捷键英文字母。 5.在用户会经常出现等待状态的界面上，尽量做一些界面或鼠标的动态效果。减少用户的厌烦感。 6.错误信息和警告，出错信息和警告是指出现问题时系统给出的坏消息，例如：用户购买物品金钱不足返回的消息。使用用户可以理解的文字进行描述信息，并给出修正错误的意见，指出问题将会造成的潜在后果，重要信息最好给出一些动态的提示，信息内容不要指责用户要引导用户。 7.数据输入，尽量简化用户在游戏中输入数据的动作，最好是通过简单的鼠标点击即可操作完毕。 8.进入运营阶段的游戏UI尽量不要做大幅度的变化。 所有的设计都要围绕着用户的使用习惯及容忍程度去进行设计，可以节约的操作步骤尽量节约。不要把设计者的主观想法随意的放入设计中去。尽量的多听取用户的意见。 UI制作流程 1.游戏企划人员整和所有系统模块，并通过VISIO等工具进行粗糙的功能展示。提出几种不同界面风格的方案。 2.游戏制作成员集体讨论，确定尝试方向及内容。包括美术风格及系统模块删减或增加等。最好能讨论出大家都比较憧憬的两至三种的美术风格方向进行尝试设计。 3.美术设计人员给出界面风格效果样图，游戏制作成员集体讨论，再寻找一些普通用户给出意见，最好能总结出百人以上的意见。 4.根据总结意见，在原有基础上修改美术风格，使之不断的缩短与大部分的用户意见差异。 5.重复第三个步骤两次以后美术风格确定应该没有太大问题。 6.美术人员按照游戏企划人员所提出的功能正式绘制UI图片，并和程序人员一起讨论建立美术制作规范，美术资源提供接口流程及规则。尝试配合程序在界面中完成特效功能。 7.第一版本界面功能完成，基本上这个时候游戏产品制作也已经进入研发后期。多召集一些普通用户进行大规模测试。 8.测试时注意以下几点 Ø 提供舒适的测试环境和测试设备 Ø 可以通过录象对测试对象行为进行分析，也可以由相关人员在一旁观察。把用户在不同页面停留的时间，对新功能的熟悉时间、视线停留转移规律进行记录 Ø 建立测试内容问卷，从功能，易用性，上手度，风格，BUG，视觉疲劳容忍度，界面结构，复杂度等等方面设计问卷内容。 Ø 测试问题归类、建档。 Ø 取舍所罗列问题的模块，并追踪问题解决进度 9.确定封闭测试版本，收集玩家意见，如无重大遗漏或问题进行小规模修改后基本可成型。 几个失败的用户体验 游戏UI制作中会有一些令人反感的用户体验，以下举几个典型的例子： Ø右键操作：在游戏产品的界面上尽量不要设计右键操作，容易造成操作混淆导致用户对界面逻辑的认知混乱。 Ø多级菜单：游戏产品不是办公软件，尽量不要做多级的菜单。玩家只喜欢在游戏中进行探索而对在游戏UI上探索是没兴趣的。 Ø多级窗口：游戏中在弹出的窗口中尽量不要设计2次弹出的窗口，游戏产品不是网页可以弹几十个窗口，这样即增加玩家操作又加重系统消耗。 Ø指责用户：如果出现问题，反馈给用户的信息中不要带有指责性的词语，可以多用一些善意的引导性词汇。 Ø主次不分：主体模块在界面上一定要通过颜色，大小，动态等等手段进行突出，如果主次不分很容易导致用户的盲目尝试。 结语 以上是我对游戏UI设计的一些看法。UI设计博大精深，涉及到的知识面即广又杂，不是三言两语就可以讲的明白，希望上文中的一些小知识能对您有所帮助。