游戏邦在:
杂志专栏:
gamerboom.com订阅到鲜果订阅到抓虾google reader订阅到有道订阅到QQ邮箱订阅到帮看

分享开发者创造游戏UI的注意事项

发布时间:2012-09-26 11:51:16 Tags:,,,

作者:Jon Shafer

我非常喜欢游戏用户界面。如果我因为某种原因而未成为游戏设计师,我便可能成为UI或图像设计师。屏幕元素的布局不管是在引导新玩家还是便利资深玩家(他们对于游戏信息或结果的追求以及屏幕元素都没有太大的要求)方面都非常重要。

我将在本篇文章中分享我在过去几年里所积累的一些UI指南。尽管对于那些曾经致力于创造专业UI的设计师来说许多要点都再熟悉不过了,但是我却仍然希望所有人都能从中找到对自己有帮助的内容!

我所谈论的内容只是关于策略游戏或其它具有复杂UI的游戏(最具代表性的便是PC游戏)。那些第一人称射击游戏的设计师也具有他们自己的小知识大智慧,但是现在他们首先需要做的便是琢磨一些按钮放置建议(因为他们的游戏中并未设置屏幕按钮)。

game UI(from behance.net)

game UI(from behance.net)

功能大于形式

许多开发团队并未拥有真正的UI设计专家。但是讽刺的是他们却都能够创造出非常华丽的UI。原因出在哪?

在游戏领域中,几乎所有专业美术人员的任务便是创造出最好看的内容。当然了我也可以只是为我的游戏勾勒出一些简笔画,但是这却不可能帮助我们获得应有的关注度。如果美术人员拥有解剖学知识或将图像转化成3D的能力,我们便能够看到更棒的作品。

而问题便在于,当我们让这类型美术人员去执行界面工作时,他们的目标可能仍与完成其它美术任务一样,即尽可能创造出任何外表好看的内容。然而如果设计师希望创造出容易上手且操作的游戏,他就必须先使用UI去突出功能而非形式。过多的装饰性设计将会让玩家感到迷惑。设计师需要确保按钮就只是呈现出按钮的样子,非交互式面板也就是非交互式面板的样子。花大量时间和资源去创造一个吸引人的界面有可能只会适得其反,并最终呈献给玩家一款难以亲近的游戏。

但这却不是说所有的UI都只能呈现出最简单且直白的文本内容。不是每一款游戏都适合简单的外观。装饰性元素也有自己的功效,也能够为游戏带来不一样的风味。但是只有在UI基本完成后,这些元素才有可能成为真正的关注焦点。也就是在组装框架前你并不需要去绘制汽车,同样地,你只有在创造出最理想的功能后才能去美化你的UI。

关于UI,设计师们最需要牢记的一点便是:屏幕上每一个单一元素都将吸引玩家的注意。而你需要做到的便是确保他们能够将有限的焦点投射在你真正需要他们关注的内容上。

突出等于重要性

或者说:大物品总是比小物品更惹人注意。

当我们在创建UI时更应该注意这一原理。放大重要按钮看起来会不会很奇怪?当文本内容被放置在屏幕下方而不是上方时你是否会觉得奇怪?在做出任何这些行动前,设计师都必须仔细考虑这种设置对于可用性的影响。如果设计师制作出一个非常小的重要按钮,玩家可能会直接忽视它,或者需要花大量时间去寻找它,并最终对游戏感到失望。

规格并不是物品可见性的唯一决定元素。将一个元素单独放在屏幕上将能够有效地吸引玩家的注意。如果玩家打开一个呈现出一座特殊城市的屏幕,那么即使城市的名字是呈现在最上方的一小段文本中,玩家也能够直接看到它,因为此时周边并没有其它多余的内容。基于这种方法,实体周围空间的使用与UI设计工具箱中的其它工具同样重要。所以你需要合理地利用你的真空区!

我最近所沉迷的一款游戏,也就是棒球模拟游戏《Out of the Park》便是未能合理安排突出性质的一个典例。比起《OOTP12》,《OOTP13》做出了一定的UI完善,但是从某些方面来看它反而比之前游戏退步了。玩家评级数据便是一显著表现,文本与进度条共同预示着玩家的潜能以及他们离这一潜能的距离。以下便是《OOTP12》中的玩家评级数据:

ootp12_ratings(from gamasutra)

ootp12_ratings(from gamasutra)

下图则是《OOTP13》的版本:

ootp13_ratings(from gamasutra)

ootp13_ratings(from gamasutra)

它们所呈现的都是相同的信息。相比之下,《OOTP12》占用了更多空间,不够“精炼”,但最终却取得了比《OOTP13》更好的效果。为什么?

在《OOTP13》中,文本和进度条几乎保持在相同的高度上,从而让玩家误以为它们具有同样的重要性,并最终导致整个界面显得相对杂乱。如果每个条目都拥有较广阔的空间,或者能够确保进度条更粗或更细,那么这种模式便是有效的。

另外一种我不是很喜欢的改变便是将现有进度条与潜在进度条合并在一起。尽管这种方法能够节省空间,但是如此我们却很难吸引玩家的注意。最大的问题应该是颜色的使用,也许换个设置会取得更好的结果。

不管怎么说,我完全不能理解《OOTP13》所呈现出的玩家评级数据,尽管也有些人喜欢这一新布局。但是与生活一样,UI设计并不是只有黑与白,或好与坏。我认为这一特殊的布局只是《OOTP13》想与《OOTP12》进行较量的黑色心理斗争。

为相关内容分组

很多人会想当然地认为只要将“文化”元素置于能够衡量玩家发展的仪表盘便可。但是事实上,我们还需要考虑许多微妙元素。比如,你是会将城市文化消费置于其它与文化相关的信息旁还是消费信息旁?或者是两者皆可?那是否存在足够的空间?如果空间不足,你是否需要重新进行调整?事实上这是一个非常棘手的问题,但这也因此说明了UI设计是一门需要投入大量专业知识和经验的正式学科。

框架便是一种非常有效的分组方法,有时候甚至可以重叠多种内容。在上述提到的文化例子中,我们便可以将有关消费信息的垂直框架与包含文化信息的水平框架交叉在一起。当我们在创造UI实物模型时,我甚至惊讶于只要画出一些盒子便能够完全改变屏幕所呈现出的感觉。同时我们还需要注意的是过多框架将会让玩家分心,所以设计师应该只在必要时刻才使用这些框架。

另外一种分组诀窍便是将所有与行动相关的控制聚集在一起。当然了,我们总是很容易搞乱这些内容,并且这种方法也不是在任何情况下都有成效,但是如果你能够成功地做到这一点,玩家们便会真正认可你的付出。明确所有内容的具体放置点能够帮你节约反复的游戏时间,特别是在那些大型且复杂的策略游戏中。

使用颜色进行联系

当玩具首次进入游戏中时,他们根本就不清楚该如何进行游戏。“这一‘文化’是指什么?它能够做些什么?”不管你拥有如何出色的UI或教程系统,你都需要花上一定时间去缓解玩家的陌生感。舒缓这种学习曲线的一种方法便是创建一些相关理念间的联系——而颜色便是我最喜欢使用的一大元素。

当然了,所有玩家都需要花些时间去搞清楚文化的作用—–这是他们必须经历的过程。但是如果所有与文化相关的属性都以紫色呈现出来,即文化图标是紫色的,提供文化的建筑外观也是紫色的等等,这便能在一开始帮助玩家更好地明确文化这一要点。当然了,你只能使用紫色去代表文化,否则便只会让玩家感到混淆。而红色和绿色则相对棘手,因为它们总是被用于代表一些“好”或“坏”的事物。

说到红色和绿色,我认为它们对于色盲玩家非常不利,难以提供给他们任何有效的信息。在过去几个月时间里我一直在玩一款棋盘游戏《Lords of Waterdeep》,从游戏本身来看这是一款非常出色的游戏,但是对于色盲玩家来说却不是这样的。四种可使用的“资源块”中有一种是黑色的,另外一种是紫色的。我的好友以及游戏设计师搭档David Heron便是色盲,所以他们在收集或使用资源时经常会有所疏忽,比如他们可能会挑选两种同样是色盲的人群也难以辨明的颜色。而如果UI设计师能够优先考虑这一问题,便可能轻易地避开它。

waterdeep_card(from gamasutra)

waterdeep_card(from gamasutra)

图标和文本—-就像花生酱和巧克力一样的存在!

UI图标非常棒。但是它们却难以单独发挥作用。只有玩家真正明确每个图标的含义后它们才能真正发挥功效。而如果这一过程花费了过长时间,那么图标的存在便会破坏了UI的可用性。遗憾的是,许多游戏都忽视了这一点而只是呈献给玩家一些无意义的图标,或者只是期待着他们能够自己去理解图标的含义,甚至去思考所有潜在的问题。最糟糕的图标要数那些工具提示,因为我们不可能再创造出相关提示去解释这些工具提示的含义。让玩家将鼠标移至图标上方去辨别它的设置不算太糟糕,但是这种方法却并不适用于所有案例中——图标和文本必须同时呈现出来。

的确,这一内容并不适用于所有方法,因为比起使用16像素宽的图标,你不得不为每个单词多添加50以上的像素,但是不管怎么说,这都是值得付出的代价。但这却不是说你必须尽所能将所有内容塞进最后的像素中——我们需要留给界面像素足够的喘息空间,否则最终只会出现像上面的《OOTP13》那样混乱的布局和颜色设置。图标是帮助玩家进行辨明的工具而非拯救像素的手段。

垂直罗列文本(而非水平)

我并不喜欢水平的数据罗列模式,因为这看起来一点都不鲜明。

注意标签的使用

很多人都喜欢使用标签。从积极面来看,这能够有效地呈现出数据信息。但是在游戏UI中却没有多少成效。因为标签总是会隐藏一些内容。你可能会认为了解了所有内容后这便不是问题所在,但是实际上这才是问题的关键。

没有人会在第一次或第十次开始游戏后便成为专家。所以你隐藏在标签之后的所有内容都有可能遭遇忽视,甚至许多玩家根本就不会留意到它。如果标签所包含的95%细节属性是玩家所不在乎的内容,那倒没关系;但是通常情况下标签总是充当着一种草率且消极的空间储存工具。所以我强烈地建议设计师们能够把角色的所有魔法信息归于一个标签中,并将其打斗信息置于另一个标签中,以此类推。这么做能够有效地扩展相关数据,让玩家很难一下子便接触到所有内容。

音频和UI

在某些情况下音频设计和UI设计总是能够有效地融合在一起。它们的目的都是向玩家传达相关信息,所以为何不将它们整合在一起呢?

玩家所采取的任何行动或游戏中所出现的任何事件(与界面相关或相反的)都必须具有特殊的声音。这些声音可能都是一些独特的声音,也有可能是多种触发器引发的同一个声音。声音的设置最终还是取决于当前情境,设计师的选择以及声音预算。一般情况下,如果任何行动或事件对于玩家的影响非常相似,它们便能够共享一个相同的音频。

并不是每一个游戏团队都拥有一名出色的音频设计师,所以开发者们总是很难创造出具有AAA级水平的游戏音频,但是尽管缺少音频专家,开发者们仍需遵循一大规则:每个游戏行动都必须附加某种类型的声音。可能只是最普通的“ding”——如果没有声音,玩家将会认为什么都未曾发生。你肯定不希望游戏带给玩家疑惑,混乱的感觉吧。

面向硬核玩家的UI

关于游戏UI设计的最后一点便是:为硬核玩家量身打造的UI。开发者总是更倾向于完善UI功能而非UI可用性,因为他们所获得的大多数反馈都是来自于开发团队,测试员和QA(游戏邦注:这些人大多都非常熟悉游戏,并希望看到更强大的游戏功能)。另外一个原因便是开发者总是很难接触到全新的玩家。

尽管我投入了大量的时间去创造能够迎合新玩家的UI,但是不管怎样我都认为不该忽视UI的优势。我始终强调停止最基本的帮助,而将更多信息呈现在屏幕上并将所有好看且贴心的工具提示转化成新玩家也能够容易读懂的虚拟目录。

你能够提供给大多数硬核玩家最大的帮助便是在任何内容上附加热键。不管你的UI如何有序且完善,玩家的行动都不可能比按压一个按键来得迅速。缺少热键的游戏总是会让我感到沮丧,甚至让我怀疑是否只有自己独自待在游戏中。

我们必须想办法平衡这两种群组玩家的利益。不管是新玩家还是资深玩家都不应该遭到忽视,只要我们能够投入足够的时间和精力,这便是一个可以实现的目标。不幸的是,出于商业因素游戏开发时间总是会被大大缩短,特别是UI设计——因为它很大程度依赖于各种迭代。而这种缩短对于游戏开发来说尤为不利,因为UI是每个玩家体验游戏的必经层面。如果一款电子游戏呈献给玩家一个糟糕的UI,便会让玩家感觉自己好似在使用一些难以理解的骰子在玩《Yahtzee》,或者使用一些黏在一起的卡片在玩扑克游戏——这是多么糟糕的体验啊。

所以广大开发者们,请带着你们的聪明才智勇敢地向前迈进,去创造属于你们自己最完善的UI!

本文为游戏邦/gamerboom.com编译,拒绝任何不保留版权的转载,如需转载请联系:游戏邦

Building a Solid UI

by Jon Shafer

User interface in games is a subject very near and dear to my heart. If I couldn’t be a game designer for whatever reason I would probably be a UI or graphic designer. The way screen elements are laid out is crucial in both educating new users and empowering veterans who want as little as possible between them and the info or result they’re after.

In this article I’ll share a number of UI guidelines that I’ve accumulated over the years. A lot of this information will be nothing new to anyone who’s done professional UI before, but I hope everyone finds it useful and/or entertaining regardless!

Much of what I talk about is pertinent only to the strategy genre or other types of games that have complex UIs (typically PC titles). Someone designing a first-person-shooter will still come away with a few useful tidbits, but they’d be hard-pressed to get much out of button placement suggestions when their game has no on-screen buttons!

Function Before Form

Many development teams lack a true UI design specialist, and it nearly always shows. Ironically, the manner in which this typically manifests itself is that their UI ends up being too pretty. So what’s the problem?

The task of nearly every professional artist in the games business is to make something look as good as possible. I could just make stick figures for the games I work on, but hey, that’s unlikely to get the kind of attention we want. It’s much better if the person making the units has actual knowledge about anatomy and the ability to translate that into 3D.

The problem with assigning this type of artist to interface work is that their goals are likely to be the same as they would be with other art tasks – make something look as nice as it can. However, if a game hopes to be accessible and easy to play, it must prioritize function over form with its UI. Too much decorative framing can confuse and mislead the player. Buttons should look like buttons. Non-interactive panels should look non-interactive. Spending a lot of time and resources making an interface that’s attractive will often backfire and result in a less approachable game.

That’s not to say that every UI should be nothing but plain boxes and text. A super-simple look isn’t right for every game. Decorative elements have their place, and can certainly add a lot of feel and flavor. But such elements should become the focus only after the UI is basically done. You don’t paint a car before its frame is assembled – likewise, don’t gussy up your UI until it’s functionality exactly how you want it.

A very important tip to always keep in mind with UI: every single element on the screen siphons off a bit of the player’s attention. Make sure they’re only spending their limited “pool” of focus on what you really care about.

Prominence Equals Importance

Or: big items are easier to spot than small items. Simple enough, right?

Well, when building a UI this principle has to be applied with extreme diligence. Does that important button look weird being so big? Do you like the feel of the screen better when the text is on the bottom instead of the top? Before making any moves like this a designer must consider what the usability ramifications will be. If that  ever-so-important button is made too small players might completely miss it, or spend time hunting it down, frustrated the whole while.

Size isn’t the only factor in an item’s visibility. Placing an element all by itself pretty much anywhere on the screen will bring attention to it. If a player opens up a screen dedicated to a particular city and its name is written in fairly small text at the top, it will still stand out as long as there’s nothing else nearby. In this way, where and how you use negative space can be just as important as any other instrument in the UI design toolbox. Spend your empty space wisely!

A good example of prominence being used poorly in a game is one of my latest addictions, the baseball sim Out of the Park. OOTP 13 provided a number of UI improvements over OOTP12, but in some ways it was a step backwards. One specific case of this was with the player ratings data, which is a combination of text and horizontal bars which indicate a player’s potential and how close to reaching that potential he is. Here’s what it looks like in OOTP12:

And here’s the OOTP13 version:

Both are displaying the exact same information. The OOTP12 version takes up more space, and is certainly less “refined,” but on the whole it does a better job than the OOTP13 one. Why?

In 13 the text and bars are basically the same height, giving them equal weight and ultimately resulting in the elements blending together and feeling cluttered. This style could work if there were more space between each entry, or if the bars were much thicker or thinner.

Another change I don’t like is the merging of the current and potential bars. While it’s nice that this approach monopolizes less room, I find it harder to get an “at a glance” impression of the gap between current and potential. The biggest problem may be the colors used, and maybe a different set would work much better. But hey, figuring that out is someone else’s job – or it should be anyways!

By no means is the 13 version completely unreadable, and I’m sure there are some who prefer the new one. But like life, UI design isn’t black or white, good or bad. And in my mind this particular feature is now certainly a darker shade of grey in 13 than it was in 12.

Group Related Items

This too sounds pretty obvious – just put the amount of “culture” you’re generating next to the meter which shows your progress! But there are also more subtle considerations than this example completely ignores… do you put a city’s culture spending next to the other culture-related info? Or do you put it next to the spending info? Can you do both? Is there even room to try this? If there isn’t, is it worth re-arranging everything to make it possible? It’s a tricky tightrope to walk, but that’s why UI design is a serious discipline that requires a great deal of specialized knowledge and experience.

One of the best ways I’ve found to group things together is using frames, sometimes even multiple ones that overlap. In our culture example above, you could have a vertical frame surrounding the spending info intersecting a horizontal frame containing the culture info. When creating UI mockups even I’ve been amazed at how the feel of a screen can completely change just by drawing a couple boxes. Too many frames will distract the eye though, so be sure to only use them when necessary.

Another grouping tip is to collect all action-related controls into one area. This could get messy quickly and isn’t possible in every situation, but if you can pull it off your players will appreciate your labors. Knowing exactly where to find all of the things you can do without hours and hours of playtime is a godsend, especially in big, complex strategy games.

Use Color to Associate

When players jump into a game for the first time, (in general) they know absolutely nothing about how it works. “What is this ‘culture’ thing? What does it even do?” No matter how good your UI or tutorial system is, it’s simply going to take time before your players become comfortable. An excellent way of smoothing this learning curve is to build associations between related concepts – color is one of my favorite applications of this.

Okay, it’s going to take a bit of time for everyone to figure out how culture works – that’s just the way it is. But if all of the stats related to culture are purple, and the icon for culture is purple, and the buildings which provide culture have a purple outline around them… well, now you’re giving a players a huge head start in connecting the dots. Assuming, of course, that you use purple only in association with culture – if you just throw it around everywhere then you’re just wasting your time and gaining nothing. Red and green are particularly tricky colors since they’re often used as generic indicators of “good” or “bad.”

Speaking of red and green, throw a bone to our colorblind friends and never use color alone to provide critical information. Over the past few months I’ve played the board game Lords of Waterdeep a number of times and while the game itself is quite good, it’s very unkind to colorblind players. One of the four types of spendable “resource cubes” are black, and another type is purple. My good friend and fellow game designer David Heron is colorblind and has slipped up many a time when collecting or spending resources simply because the designers picked two colors that are virtually indistinguishable for someone with his condition. Issues like this are easily avoidable if the UI designer makes it a priority.

Icons and Text – Like Peanut Butter and Chocolate!

This is a smaller point related to the one we just discussed.

UI icons are great. I love them. But they can’t carry the load alone. Players must first figure out what the icons actually mean before they’re at all useful. And if that takes too long, using icons can deal a major blow to a UI’s usability. Sadly, many games forget this and simply throw bare icons at players, either expecting them to automatically understand them, or not even thinking about the potential issues at all. The worst naked icon offenders are those inside tooltips, where it’s impossible to bring up a tooltip for them to figure out what they mean. Icons that you can identify by mousing over aren’t as bad, but I still disapprove in nearly all cases – icons and text should be displayed together.

Yes, this makes it harder to get everything to fit because instead of using a 16 pixel-wide icon you have that plus another 50 or so pixels for a word, but it’s a price certainly worth paying. It’s not like you want to cram everything in to the last pixel anyways – interface elements need room to breathe, otherwise they start blending into a muddy mess of shapes and colors like the OOTP13 stats image above. Icons should be a tool for helping players – not one for saving pixels.

Stack Text Vertically, not Horizontally

Okay, now we’re starting to get into more of the nit-picky stuff that I might get some more pushback on. But I think I’m on the good guys’ side with this one.

I just don’t like horizontal stacks of data. They’re hard to read. But you be the judge – which of these two do you prefer?

Be Wary of Tabs

A lot of people like tabs. And for good reason – they’re an excellent way of organizing a lot of data. But they rarely work well in game UI. The problem is that tabs hide things. This isn’t an issue when you know the contents inside and out – in fact, that’s the whole point.

But nobody is going to be an expert at a game the first time or ten they fire it up. Whatever you hide inside tabs becomes marginalized, sometimes to the point where many players will never, ever see it. This can be appropriate when a tab contains incredibly detailed stats that 95% of players don’t care about. But usually that’s not the case, and tabs are instead used as another sloppy and destructive space-saving measure. I would strongly advise against putting all of a character’s magic info on one tab, their melee info on another, etc. This simply spreads out the data, making it harder to get to.

Audio and UI

Audio design and UI design blend together in some places. Both are trying to convey information to the player – so why not have them work together!

Every action the player takes or event that occurs (interface-related or otherwise) should have a special sound associated with it. These could all be unique sounds, or one sound might be shared by several triggers. Ultimately this just depends on the situation at hand, the designer’s preference, and the sound budget. In general, if actions or events are very similar to one another in terms of their effect on the player, then sharing a single bit of audio for all of them is probably fine.

Not every game has a top-notch sound designer on board, so it can be tough to really push the audio side of the game to AAA levels, but even without an expert around there is one rule that must always be adhered to: every action needs some kind of sound attached. It could just be a generic “ding” or something – just don’t ever have nothing, as this suggests to the player that nothing happened. Confusion, chaos, anarchy… you don’t want all of that on your conscious, do you?

UI for the Elite

The last topic I’ll cover is one that already gets a lot of attention in game UI design: creating interfaces that is tailored to hardcore players. Games nearly always invest in UI features over UI accessible, partially because most feedback comes in from the dev team, beta testers and QA – all individuals that typically have extensive experience with the game and are looking for more power features. Another reason is because truly putting yourself in the shoes of a brand-new player tends to range from extremely difficult to impossible.

While I’ve focused quite a bit on building a UI that caters to new players, by no means do I think the pros should be left out in the cold. I’m a big fan of options that turn off the most basic help, pack more info into the screen and transform those nice, friendly tooltips into virtual catalogs that would make newbies weep.

The absolute best favor you can do for your most hardcore players is to attach hotkeys to everything. No matter how sleek and streamlined your UI is, players will never be able to perform actions faster than they could by simply hitting a key. Games that lack hotkeys altogether frustrate me to no end, and I very much doubt I’m alone there.

The trick  is balancing the interests of both groups of players. Neither new players nor the vets should be underserved, and with enough time and care this is absolutely a realistic goal. Unfortunately, when game development gets cut short for business reasons UI is often one of the features that suffers the most, mainly because of how much it relies on iteration. This is a major loss because the UI is the layer through which every player experiences the game. Playing a computer game with a bad UI is like playing Yahtzee with unreadable dice, or poker with sticky cards – just bad news all around.

Now then – equipped with this great wisdom, go forth, and build exceptional UIs!(source:GAMASUTRA)


上一篇:

下一篇: