零基础学游戏UI设计
上QQ阅读APP看书,第一时间看更新

1.3.3 游戏UI的设计流程

一个游戏UI的设计大体可以分为需求分析、分析设计、调研验证、方案改进、验证反馈5个阶段。图1-20所示为游戏UI的设计流程。

1. 需求分析阶段

游戏UI界面依然属于工业设计的范畴,依然离不开3W的考虑(Who、Where、Why),也就是使用者、使用环境、使用方式的需求分析。

在设计一个游戏产品的UI部分之前,同样应该明确什么人用(用户的年龄、性别、爱好、收入和教育程度等),什么地方用(办公室、家庭、公共场所),如何用(鼠标键盘、手柄、屏幕触控)。上面的任何一个元素改变了,结果都会有相应的改变。图1-21所示为需求分析示意图。

图1-20 游戏UI的设计流程

图1-21 需求分析示意图

☆提示

举一个简单的例子,当设计一套PC平台的Q版网络游戏界面和一套游戏机平台的动作游戏界面时,由于针对的受众不同,操作习惯与操作方式有差别,所以在设计风格上也要体现出相应的变化。

除此之外,在需求分析阶段,同类竞争产品也是必须要了解的。同类产品比我们的产品提前问世,我们的产品要比它做得更好才有存在的价值。那么,单纯从UI界面的美学考虑说哪个好哪个不好是没有客观的评价标准的,只能说哪个更合适,更合适于最终用户也就是玩家的产品就是最好的产品。

2. 分析设计阶段

通过分析上面的需求后进入设计阶段,也就是方案形成阶段。在这个阶段,可以设计出几套不同风格的界面用于备选。

首先制作一个体现用户定位的词坐标,例如以18岁左右的女性玩家为游戏的主要用户,对于这类用户分析得到的词汇有唯美、精美、趣味、交流、时尚、粉色、个性、品质、放松等。

分析这些词汇的时候会发现,有些词是必须体现的,例如精美、趣味、时尚、交流;但有些词是相互矛盾的,必须放弃一些,例如时尚、放松与粉色、个性化等。图1-22所示为手机游戏《闪耀暖暖》的UI界面,其主要用户是女性。

图1-22 手机游戏《闪耀暖暖》的UI界面

设计师可画出一个坐标,上面是必须体现的品质,如精美、趣味、时尚和交流;左边是贴近用户心理的词汇,如时尚、放松、人性化和唯美;右边是体现用户外在形象的词汇,如粉色、个性、时尚和品质。然后开始收集相应的素材,放在坐标的不同点上,这样根据不同坐标的风格,设计出数套不同风格的游戏UI界面,如图1-23所示。

图1-23 坐标分析

3. 调研验证阶段

几套风格必须保证在同等的设计制作水平上,不能明显看出差异,这样才能得到用户客观的反馈。

调研验证阶段开始前,应该对测试的细节进行清楚的分析描述。

举例如下。

数据收集方式:厅堂测试/模拟家居/办公室。

测试时间:×年×月×日。

测试区域:北京、上海、广州。

测试对象:某游戏界定市场用户。

主要特征如下。

·对计算机的硬件配置以及相关的性能指标比较了解,计算机应用水平较高。

·计算机使用经历一年以上。

·玩家购买游戏时品牌和游戏类型的主要决策者。

·年龄:×~×岁。

·年龄在×岁以上的被访者文化程度为大专及以上。

·个人月收入×元以上或家庭月收入×元以上。

·样品:×套游戏界面。

·样本量:×个,实际完成×个。

调研验证阶段需要从以下几个问题出发。

·用户对各套方案的第一印象。

·用户对各套方案的综合印象。

·用户对各套方案的单独评价。

·选出最喜欢的。

·选出其次喜欢的。

·对各方案的色彩、文字、图形等分别打分。

·结论出来以后请所有用户说出最受欢迎方案的优缺点。所有这些都需要使用图形表达出来,这样更直观、科学。

4. 方案改进阶段

经过用户调研,得到目标用户最喜欢的方案,而且了解到用户为什么喜欢,还有什么遗憾等,这样就可以进行下一步修改了。这时可以把精力投入到一个方案上,将该UI设计方案做到细致精美。

5. 验证反馈阶段

改正以后的方案就可以推向市场了,但是设计并没有结束,设计者还需要用户反馈。好的设计师应该在产品上市以后多与用户接触,了解用户真正使用时的感想,为以后升级版本积累经验资料。

经过上面设计过程的描述,可以清楚地发现,游戏UI设计是一个非常科学的推导公式,有设计师对艺术的理解感悟,但绝对不是仅仅表现设计师个人的绘画,所以要一再强调这个工作过程是设计的过程。

以上是整个游戏UI设计需要经过的主要流程,但实际操作中设计师可能还是会面临很多如时间与质量的问题,所以这里并不强调一定要严格地按照这个公式来设计和制作游戏界面。

图1-24所示为网络游戏《剑侠情缘》的游戏UI。在该游戏的整个开发过程中,游戏UI的设计尝试了几种不同的风格,从最初华丽炫目的界面设计方案到最后朴实简洁的完成品,可以看到游戏UI设计师的整个创作过程在不断地进行思维的演变,同时积极与玩家互动,将玩家反馈的意见加以整理与提取,才把最适合玩家的方案呈现在玩家面前。

图1-24 《剑侠情缘》的游戏UI