摘 要

本文借助通过分析游戏产品背后的设计原则，提炼出具象化的方式协助产品将模糊的概念转化为具体的美术风格，同时总结出一套较为完善的方法论，所得结果对于设计工作具有重要的指导意义。

论文主要研究了游戏产品背后的设计原则。

研究结果表明：在进行游戏产品的UI设计时，拥有一套完备的方法论能够事半功倍。

本文的特色：清晰调理的总结UI设计原则，多方位举例说明。

关键词：UI；游戏产品；原则；

Abstract

By analyzing the design principles behind the game products, this paper refines the figurative way to help the product transform the fuzzy concept into a specific art style, and at the same time summarizes a more complete methodology, and the results have important guiding significance for the design work. ..

The paper mainly studies the design principles behind the game products.

The research results show that having a complete methodology can do more with less when designing UI for game products.

The characteristics of this article: a clear and harmonized summary of UI design principles, multi-faceted examples.

Key Words：UI；Game product；in principle；

目 录

第1章 绪论 1

1.1 研究背景及选题目的意义 1

1.1.1 研究背景 1

1.1.2 选题目的意义 1

第2章 设计初期的思考 2

2.1 分析产品与寻找参考 2

2.1.1 绘制风格稿 2

第3章 游戏产品UI设计要领 3

3.1 低信息干扰 3

3.1.1 边距制定 5

3.1.2 统一视觉元素 5

3.1.3 让步原则 5

3.1.4 明度关系 6

3.1.5 意外性设计 6

3.1.6 品牌感的树立 6

3.1.7 资源的可复用性 7

3.1.8 信息模块分组 7

3.1.9 对齐原则 8

3.2. 留白与空白 8

第4章 界面设计的注意点 8

4.1注意点分析 8

4.1.1 不单是极简主义 9

4.1.2视觉反差 9

4.1.3 图标设计原则 9

第5章 研究结论和思考 10

参考文献 10

致谢 11

第1章 绪论

1.1 研究背景及选题目的意义

1.1.1 研究背景

对待游戏产品和艺术作品是完全不一样的，艺术工作者所思考的是：自我感受和审美的表达；而设计师对待一个产品所考虑的是：设计应该为产品服务，凭借具象化的方式协助产品将模糊的概念转化为具体的美术风格，与此同时，团队之间相互协作，并且不断地提升自我水平。

1.1.2 选题的目的及意义

先找到想重做GUI的游戏，对游戏进行分析，完成游戏的结构解析，然后再进行框架分析，分析出结果输出报告，之后进行数据采集，对大众对于这款游戏的建议和喜好进行采集，整理收集的数据，让设计有理有据。

然后分析游戏的世界观，及其所有的设定，提炼出游戏的关键词，提炼出所有的关键元素，然后进行游戏的风格设计。其次进行新风格的交互梳理，完成交互框架，之后进行GUI设计。在设计的过程中估计会用到的软件有：Photoshop进行界面设计，Adobe effect进行动效设计。

我将通过分析，阐述在游戏产品UI设计过程中如何更好地模糊的策划案转化为具象的美术风格设计，并且能够达到批量化生产，同时具备高复用性的美术风格。在设计中提炼出相关的设计原则，和多方面的设计注意点。除此之外，通过总结方法论，也能够对于之后的工作起到实质性帮助。

第2章 设计初期的思考

2.1 分析产品与寻找参考

在开始设计之前，先对产品进行全面的分析，重设计的游戏是《Anthem》圣歌，《圣歌(Anthem)》是由BioWare埃德蒙顿工作室制作，EA发行的一款融合RPG叙事风格 大型多人在线的网络游戏，包括ARPG、MMO游戏和Bioware的典型叙事风格。游戏以第三人称视角建构一个崭新的科幻世界。

玩家将在《圣歌》的世界中扮演一名自由佣兵，穿上可以自由自定义的外骨骼装置，和线上的伙伴一同在广大的开放世界中冒险。生动且充满高度动态的开放世界中，将随时发生各种不同的事件，包含野生怪物的来袭、天候的转变等，玩家可以藉由外装甲带来的能力上天下海，在海陆空自由的冒险探索。

从游戏中可以提炼出大量的关键词，科技；射击；机甲；RPG；竞技与团队等等，根据这些关键词寻找相应的对标游戏，并且进行分析和归纳总结。比如《星际战甲(Warframe)》，同属于科幻题材类射击游戏，《Warframe》的设计有独特的风格，例如带有轻微的透视，轻薄的质感，很好的诠释了科技感。还有就是《命运2(Destiney2)》，大面积留白，运用精致的底纹丰富画面，图表化以及活跃的配色，这些元素让《Destiney》变得格外的时尚与前卫又独树一帜。《虚幻争霸(Paragon)》的设计也极具参考价值，几何图形的大胆使用，虚实的对比使用，干净的画面，整体的氛围和游戏十分融洽。最后就是《质量效应(Mass Effect)》，同样充满科技感的设计，丰富的图标，大量的线条运用和几何图形相辅相成。找到明确的对标参考之后，便可以开始风格稿的绘制了。

2.1.1 绘制风格稿

绘制风格稿之前，结合之前提炼出的关键词，可以大致总结出设计的关键词，现代化，时尚，块面化，扁平，克制使用颜色，无具体材质以及国际化。在绘制风格稿的时候不应该注重细枝末节的内容，更应当注重整体的效果，可以先出两到三张风格稿，在和主美以及制作人沟通之后，可以输出UI风格稿。

第3章 游戏产品UI设计要领

3.1 低信息干扰

何为低信息干扰？根据《眼洞追踪研究（2018）》研究：网页上真正有被用户阅读过的文字内容不到20%。将这个概念运用至UI设计中，所以我们需要避免在游戏中出现过多的干扰信息。在游戏过程中，UI应当更加的简洁精炼，更加清晰，把表演区和高光部分留给场景和角色，这样可以大大加强游戏的沉浸感，多余的UI会造成一定量的视觉干扰，影响游戏体验。

我们拿在2002年发行的《GTA罪恶都市》举例，在游戏右上角的UI层运用鲜艳色彩，血量、护甲值为数字化显示的设计。