一个简单的10分钟的UI测试

　　这篇文章最初发表在Kongregate的开发者博客。

　　大约一年前，我与一个跟一群大多是独立和小工作室进行交谈，游戏开发者如何通过UI的过程体现他们的游戏，给他们一个忠告，我随意的结束幻灯片，“像一个玩家[看着你的游戏] UI的想法。“基本上，我是要求开发商将自己移出游戏，他们把他们的鲜血，汗水，和泪水。

　　也许没有人惊讶的是,我得到的第一个问题是:“我该怎么做?”

　　那么，你是怎么做到的呢？让我们说你有一个商店添加你的游戏，这是非常重要的，因为，嗯，它支付的费用。你想找出是否容易找到那家商店的按钮。但你已经添加了按钮在几个月前，每天都玩测试游戏，从那时起，现在闭着眼睛可以找到它。你如何从一个知道这个游戏的人，到一个知道最少的人？

 　　有很多不同的方法可以做到这一点:一些需要另一个人体(问家人/朋友),有些人可能需要时间来得到结果(在线或现场可用性测试、数据分析),以及一些可能花费很多钱进行测试(外部用户测试咨询)。但这里有一个简单、快捷的选择自己你可以试试,不过你需要某种类型的图像编辑软件。(顺便说一句,Pixelmator做出很棒是一个伟大的、低成本、款替代Photoshop。)

　　 最初的想法从灰色框线框,我第一次读到12(!)年前由设计师杰森·圣玛丽亚(原Kongregate设计网站)。灰色框线框图可以确保您的线框只包含UI的基本结构和组件,所以你不会陷入更多的视觉元素在高保真原型,字体,颜色,复制等。

　　灰色框线框图以来发生在设计过程的开始阶段,我想知道如果你能扭转过程中如果你想算出视觉层级在目前在制品或成品设计是显而易见的。这是一个简单的UI完整性检查,你可以自己玩玩看

步骤1

　　从你的网站中选择一个页面或者从你的手机应用程序/游戏屏幕。确定3你想让你的用户找到最重要的元素,并记下它们的重要性。如果你有困难选择3,问问你自己这个屏幕,用户想要做你希望他们做什么。这些并不总是同样的事情!

步骤3

　　在你所应用的过滤器的每一个截图，标记元素（或元素的分组），以你的顺序你觉得最有feel的。你可能会发现，放大的图像有助于此。

Blurry Twitter Guest Homepage - may be easier to find your focus points when then screenshot is zoomed out.

　　我通常建议人们,这是更容易做的如果你打印出来,再加上然后您可以使用一个红色标记的乐趣。你甚至可以发送你模糊和灰度截图,看看他们证实你的重要性排名。

　　现在看看你的列表从步骤1,看他们是否匹配列表在步骤3中!在大多数情况下,它应该匹配很好。如果他们不这样做,它可能是时候重新审视你的UI来确保这一点。(这可能是一个未来的博客如何更新UI)。

Burrito Bison Revenge -我最喜欢的一个Kongregate游戏。他们升级屏幕上,我的眼睛关注按钮theGet更多的钱或升级按钮,这不错。按钮的斗争变得更加失去对我来说比前三元素,因此,或许,更有助于脱颖而出。

　　合同的战争——Kongregate上最受欢迎的游戏之一。有很多在他们的主屏幕,但是有一些元素,不断脱颖而出,增加你的经验值或按钮开始快速匹配。肯 定是有改进的空间建立视觉层次结构相关内容更好的分组在一起。而不是你的眼睛关注许多单独的元素在屏幕上,他们将专注于不同的内容分组,然后为每个分组详 细深入。

一些手机游戏的例子（点击图像放大）：

　　皇室战争—从这个用户界面清晰，战斗和打开按钮是这个屏幕上的主要动作。

　　Candy Crush Soda Saga - 一旦你的移动多出,弹出显示问你是否想(用钱来)继续关卡。这可能是最重要的元素游戏想要用户关注。虽然与足够的空白屏幕上的按钮集中有助于突出,也许这将帮助如果弹出它背后有一个透明的覆盖减少视觉干扰。

一些网站的例子（点击图像扩大）：

苹果 - 网页做了一个伟大的工作分组相关的内容，所以你的眼睛只专注于页面上的一些东西。

　　脸书（游客页） -  虽然比苹果公司的主页有很多更多的元素和文本在这,Facebook与颜色和对比做了伟大的工作,只会让用户专注于几个页面元素。

　　Lyft - 主要依赖于使用他们的商标热粉红色画你的眼睛中间的“注册”按钮,和“Lyft驱动”增销单杠。而极大地突出颜色在图像背景下,主要依靠颜色设置变量,可能会影响调出的有效性,包括监控质量、环境黑暗和色盲。

完