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

开发者分享服务色盲用户的设计方案

发布时间:2011-11-05 17:09:48 Tags:,,,

作者:Josh Tynjala

作为游戏开发者,我希望能够满足不同玩家的需求。但我发布自己的首款网页游戏《Chroma Circuit》之后,马上就发现选择颜色(尤其是对益智游戏来说)非常关键,而且是个不容小觑的问题。色盲群体通常的无法辨别在常人看来非常不同的颜色,而游戏玩法如果涉及到与颜色相关的元素时,开发者就会遇到麻烦。

Chroma Circuit(from itunes.apple.com)

Chroma Circuit(from itunes.apple.com)

我曾收到一名色盲用户的请求,他称自己在这款游戏中遇到了障碍,我这才意识到自己的游戏只是从美学角度选择颜色,而没有充分考虑用户体验。虽然这名用户只是无法辨别其中两种颜色,但即使是这种细微的差别也会让游戏趣味性大打折扣,损害其可玩性。于是我立即为这款游戏重新制作了调色板,虽然我并未这方面的高手,但还是有些可解决问题的工具。

proof setup(from joshblog)

proof setup(from joshblog)

我首先将《Chroma Circuit》这款游戏一些关卡的截图输入Photoshop,然后在视图菜单下找到校样设置的子菜单。这个选项可以查看图像在不同颜色模式下的状态。例如,设计师可以通过CMYK查看图片打印出来的效果。在这个菜单可以找到两个与色盲相关的选项,即色盲—-红色盲类型和色盲—-绿色盲类型。

spectrum of hues(from joshblog)

spectrum of hues(from joshblog)

如上图的色调频谱所示,每个色盲校样选项都可以由此找到对比色。如果你有时间,想看看实际对比效果,不妨去下载个拥有多种混合色彩的网站截图,把它贴到Photoshop中,看看它在色盲者眼中的效果如何。下图是《Chroma Circuit》在绿色盲眼中的状态。上张图是游戏原来的色彩,下张图是我对同张图调整色调之后的效果。

Chroma Circuit(from joshblog)

Chroma Circuit(from joshblog)

为了解决这个问题,我采用了一个非常基础的方法。我把每个关卡的颜色对比度都调高了,玩家除了色调,还可以根据亮度玩游戏。我根据每个关卡出现的颜色设置亮度,以达到最大对比效果。如果某关卡有4种颜色,那我就将亮度值设置为20%、40%、60%和80%。如果只有3种颜色,我就设置成20%、50%和80%。结果显示这些颜色很养眼,调整之后也非常适合色盲玩家(可通过“设置”界面选择这种模式)。

Chroma Circuit(from joshblog)

Chroma Circuit(from joshblog)

当我将这款游戏引进移动设备时,我决定根据那名色盲玩家的建议采用不同的颜色方案。这一次我没有创建高对比度的调色板,而是给每种颜色设置不同模块。

Qrossfire(from joshblog)

Qrossfire(from joshblog)

在我的另一款益智游戏《Qrossfire》中,我尝试在游戏中直接添加一些元素,而不是让玩家自行设置选项。除了颜色调整之外,我还为游戏棋盘创建一系列独特的视觉符号。

Gridshock(from joshblog)

Gridshock(from joshblog)

在我最近一款手机游戏《Gridshock》中,我还是将模块设置为一种选项。我还是感觉将模块植入总体设计中更好,因为我常在测试中“忘记”加入这些模块。除此之外,这款游戏还提供了一项新挑战,我认为这种挑战有助于设计出更好的模块。由于计时条会显示当前的颜色,它的形状和格子内的其他方块有所不同,所以我得确保这些模块是粗体字,并且在不同大小的区域中也能灵活显示。

更多现实案例

让我们再看看包括一些成功的商业游戏的色彩设计方案。

生化奇兵2(from joshblog)

生化奇兵2(from joshblog)

在本文撰稿时,我碰巧听到一些人抱怨《生化奇兵2》这款游戏在颜色方案上的设计令人失望。

Puzzle Fighter(from joshblog)

Puzzle Fighter(from joshblog)

Ars Technica数年前曾有篇长文章讨论了开发者对色盲用户的无知,其中所涉游戏包括《Puzzle Fighter》(如以上截图所示),以及其他第一人称射击游戏、平台游戏等。值得注意的是,《新超级马里奥》也犯了同样的错误,该游戏在颜色上并未明确划分马里奥和路奇这两者的区别。

宝石迷阵(from joshblog)

宝石迷阵(from joshblog)

再看看《宝石迷阵》,游戏中的每个宝石都有不同颜色和不同形状。游戏在设计之初就考虑到了形状因素,宝石的形状总是处于默认状态,所以对色盲玩家来说也很容易上手。

扑克牌(from joshblog)

扑克牌(from joshblog)

虽然扑克牌并不算是电子游戏,但它却也是一个生动的例子。扑克版通常都区分为黑红两色,这对色盲玩家来说并不是问题。但你可能从未注意到,红色形状(红心和方块)下方都有个尖角,而黑色形状(黑桃和梅花)下方都很平坦。红黑之间的对比已足够色盲玩家辨识两者的区别,虽然对他们来说,红色可能看起来更接近棕色或者黄色。

不要破坏游戏体验

我们都不希望玩家在游戏中无趣地离开,虽然我们无法针对所有的残疾人调整游戏,但色盲却是一种相对容易解决的问题,所以我们可以为此多费点心思。如果你可以为主要设计方案添加多种帮助选项,这确实很不错,但简单的设置可能更容易为用户所接受。记住Photoshop可以为这种设计调整提供你所需要的工具。

如果有可能的话,请尽量在设计过程中考虑色盲用户的需求,这样你就无需在后期大费周折地修改自己原先喜欢的设计。这不但可以节省你的精力,还可以让你找到更多未来可派上用户的解决方案。(本文为游戏邦/gamerboom.com编译,拒绝任何不保留版权的转载,如需转载请联系:游戏邦

Addressing color blindness in game design

by Josh Tynjala

As a game developer, I try to be accommodating to all types of players. One thing I learned pretty quickly after I released my first web game, Chroma Circuit, is that choosing colors (especially in puzzle games) is very important and not a task to take lightly. Color blindness can easily make two colors that seem very different to me look almost indistinguishable to others. When gameplay only relies on being able to see the difference between colors, you’ve got a problem.

As soon as I received the first request from a color blind user who was having some trouble with Chroma Circuit, I realized my mistake in simply choosing an aesthetic mix of colors that looked good to my own eyes. Only a couple of the colors seemed similar to the color blind player, but those were enough to take all the fun out of the game, and to make it mostly unplayable. Right away, I started putting together a new palette for Chroma Circuit. I’m no expert in this area, but I do have some tools at my disposal that certainly helped me out.

I think the first thing I did was take screenshots of a few levels from Chroma Circuit to load into Photoshop. Under the View menu, go to the Proof Setup sub-menu. This section lets you preview how your image will look in different color modes. For instance, designers can try CMYK to see how something might look a little different in print. You’ll find two options relevent to color blindness here, Color Blindness — Protanopia-type and Color Blindness — Deuteranopia-type.

A standard spectrum of hues is shown above. Each of the color blindness proof options is shown for comparison. If you have a moment, and want some more examples, grab screenshots of your favorite websites that use an interesting mix of colors, paste into Photoshop, and take a look at how they change for color blind visitors. Below, you can see Chroma Circuit through the eyes of someone with Deuteranopia-type color blindness. The top half displays a level with the original colors, and the bottom half shows the same level after I made changes to the palette.

To address the issue with Chroma Circuit, I took a pretty basic approach. I bumped up the contrast among each level’s colors as high as I could so that players could rely on brightness, in addition to hue. I generated the brightness levels based on the number of colors appearing in the level to achieve maximum contrast. If there were four colors required, I might set brightness values to 20%, 40%, 60%, and 80% brightness. If there were only three color needed, I would use 20%, 50% and 80%. The resulting colors weren’t particularly pretty, but they seemed to work well enough for the players who thanked me after I made the change (accessible in the Settings screen).

When I brought Chroma Circuit to mobile devices, I decided to take a different approach based on a suggestion from a color-blind player. Rather than creating a palette of high-contrast colors, I decided to augment my regular palette with a set of unique patterns for each color, if “Pattern Mode” is enabled.

With Qrossfire, another puzzle game I made, I tried adding something directly to the game, rather than making players enable it from the settings screen. In addition to colors, I created a set of visually unique symbols to display on the game board.

In my most recent mobile game, Gridshock, I went back to making the patterns an option. Still, I feel like I integrated the patterns into the overall design better because I often “forgot” that I had the patterns enabled while testing. Additionally, Gridshock provided a new challenge that I think may have actually helped me design the patterns better. Since the timer bar shows the current color, and it’s a different shape than the squarish blocks in the grid, I had to ensure that the patterns were bold and flexible enough to display within differently-sized regions.

More Real-World Examples

Let’s take a look at some other games out there, including popular commercial titles to see how they handle (or mishandle) colors.

As I was writing this post, I was lucky to came across some complaints about BioShock 2, an example of a big commercial game that isn’t friendly with colors. Negative Gamer shows us What BioShock 2′s Hacking Looks Like if You’re Colour Blind.

Ars Technica had an article about the developers being unaware of color blindness a couple years ago. It includes the Puzzle Fighter screenshot comparison above, and many other examples described in the text, including first-person shooters, platformers, and more. Notably, New Super Mario Bros. doesn’t provide enough visual cues to easily tell the difference between Mario and Luigi.

In Bejeweled, each gem not only has a different color, but a different shape as well. These shapes are integrated into the design, and they’re always on by default. Instantly playable by color blind gamers!

I know, I know, it’s not a video game, but standard playing cards are an excellent example of game pieces that can be used by color blind players. Though card games often rely on the difference between red and black suits, color blind players shouldn’t have a problem with that. You might have never noticed, but both red symbols (hearts and diamonds) come to a point at the bottom while the black symbols (spades and clubs) have that little flat handle. Moreover, the contrast between red and black should be more than enough to allow players to note the difference, even if red looks a little more brown or yellow to them.

Don’t ruin the fun!
We all hate when players to stop having fun in our games for any reason. Though we might not be able to make changes to support all disabilities, ones like color blindness are often very simple to address, and I think it’s worth the small amount of effort required. One needs not ruin the aesthetic experience to make it happen either. If you can integrate various helpful tweaks into your main design, great, but a simple setting that can be enabled only when needed can be an acceptable alternative. Don’t forget that Photoshop provides tools that can be a big help in the process.

If you can, try to remember color blindness early in the design process, so that you don’t have to spend time changing an existing design that you might already be happy with. Not only will it save you frustration, but it might allow you to find better solutions that might not be acceptable later in the process.(source:joshblog


上一篇:

下一篇: