浅析游戏UI中的“半拟物化”风格

段欣如

（广州美术学院 广东 广州 510220）

引言

在软件应用类UI设计领域，扁平化的UI风格占据主导地位。从微软的Windows phone开始，到android 4.0，再到苹果的iOS 7，无不采用扁平化设计风格。其主要原因是，扁平化风能把文本信息作为界面主体，信息层级清晰，体验顺畅。并且，极简的视觉风格符合当前主流的审美趋势。在游戏UI设计领域，拟物风长期始终占据主流位置。应用类UI主要为解决功能体验问题，而游戏UI除了让功能清晰易懂，还需要创造娱乐体验。并且在大多数游戏内，游戏UI都起到了传达游戏文化内涵的作用，表现形式会比应用类UI更多元化并且更追求拟物化。但随手游占据主导地位后，会发现传统的拟物化UI做法难以适应手机设备，相对于PC端游戏来说，手游屏幕设计空间有限甚至是奢侈的，信息的主次关系需要更明确。一种在传统拟物化UI风格基础上做减法，并汲取扁平化UI特点的，折衷化的“半拟物化”设计正在崛起。

1 对传统拟物化游戏UI风格的探讨

传统拟物化游戏UI，始于PC端单机游戏。UI控件的设计，会尽量抹除其功能化的痕迹。界面里的底板、按钮、图标，仿佛天然就是属于游戏世界的有机组成部分。设计目的，是希望玩家在体验游戏时，能通过UI感受游戏世界的真实性，让UI成为传达游戏文化内涵载体，而非仅仅是实现功能的理性化工具[1]。这样的游戏UI设计思路，一直沿用至今(如图1)。

1.1 传统拟物化游戏UI的特点

①底板、按钮、图标的质感表现上，都对现实生活中的物品的材质、色彩、光影进行了高度还原。底板一般是实体材质板和金属、玉石镶边的结合(如图1)。按钮的颜色纯度高立体感强，一般会加入装饰纹理甚至镶边。图标的质感，和现实生活物品看起来别无二样。高度还原的做法，能让设计对象看起来更真实可信。

②在整体排版上，高度写实化的UI装饰元素是界面里的主角，弱化了文字等功能化的信息，文字的周围偶尔也会加上装饰。字体的使用，以衬线字体居多。这样做的目的，是为了让装饰性元素象征出游戏的文化内涵。

③多层界面切换方式，大多采用类似windows的窗口叠加模式。新出现的窗口，叠加在旧窗口的上面。界面内使用的动效偏少。

1.2 传统拟物化UI的优缺点

优点，前期体验游戏时，通过拟物化装饰能够快速地为游戏传达文化内涵，从而让玩家产生情感化的共鸣。

缺点，在信息层次复杂程度高的手游界面，过于写实的UI控件扎堆在一起，难凸显重点信息，影响到交互体验的流畅感。细节过度精细的拟物化设计，不仅不利于向玩家传达游戏世界观的内涵，反而会让玩家对界面产生审美疲劳(如图2)。

2 对扁平化游戏UI风格的探讨

本文中指的扁平化游戏UI设计风格，是指的设计语言和应用类、网页类UI相似的纯粹极简风格。常见于主机类游戏的UI界面里，例如育碧的《刺客信条》、SWITCH上的《塞尔达传说：荒野之息》等游戏 (如图3)。

2.1 扁平化游戏UI风格的特点

①底板、按钮、图标的质感表现上，基本去除了投影、斜面、浮雕等3D属性的设计要素，运用二维的视觉语言。底板，基本上以纯色半透的色块为主，或是加入游戏的品牌化底纹。按钮，基本上是无材质的色块。图标的设计，是拟物化图标的简化版本，只保留外轮廓和轻薄的材质，或是零材质。这样的设计语言，和应用类UI的做法相似，偶尔会在UI界面上植入品牌相关的视觉要素。例如，刺客信条系列游戏，会把每一代都做独立成一个品牌。在游戏内UI界面内植入品牌色或品牌花纹，让玩家对品牌产生印象，从而产生认同感(如图3)。

②版面上，遵循简洁的排版原则，字体和图标是界面里的主角，装饰物偏少。图文排版的比例和留白，对界面的美观效果起决定性的作用。字体的使用，以非衬线字体居多。这样做的目的，是为了弱化UI在游戏内的视觉比重，突出美术模型。排版的规范，会用类似网页设计栅格系统，作为游戏内统一的排版范式。这样做的目的，是为了能够快速的统一界面的视觉样式。

③多层界面的切换上，会使用细腻的动效缓解窗口间叠加的生硬过渡感，整个体验十分顺畅。

2.2 扁平化UI的优缺点

优点：信息层级简洁清晰明了，更容易凸显文本重点内容。极简的视觉效果，更符合现代人的审美。界面资源输出时，规范性强，资源量相对拟物化的资源更少。有时甚至不用切图，直接用代码控制，能够降低对硬件的要求，安装包的内存相对来说更少。满足了小容量内存手机用户的使用需求[2]。

缺点：界面内额外的装饰性元素少。整体效果上，对图标绘制水准和美术模型精度的依赖度极高。据调研，在游戏开发时，美术效果是投入成本最高的一项，《刺客信条》作品的美术投入的成本，是大多数游戏厂商无法达到水准。倘若，降低界面里模型的精度，整个扁平化界面整体的视觉效果会大打折扣。并且，扁平风的界面设计的表现形式单一，导致目前同质化现象严重，产品容易缺乏个性。

3 “半拟物化”UI出现的必然性

基于以上，对传统拟物化游戏UI风格和扁平化游戏UI风格的分析。可以发现，无论是使用传统拟物化风格UI，还是设计极简的扁平化的风格UI，都难以完全做到“即能传播游戏的文化内涵，又让功能体验简洁顺畅”。由此可见，这种在传统拟物化UI风格基础上做减法，并汲取扁平化风格的“半拟物化”设计，出现具有一定的必然性。在调研的过程里，发现市面上有不少优秀的半拟物化手游UI界面。它们的出现，为未来游戏UI的发展方向，提供了多种设计思路[3]。

3.1 巧妙点缀意象元素在界面上

在材质运用上，点缀性的提取游戏意象元素表达界面文化内涵，巧用动效为界面添彩，改变过往用厚重材质的表现方式。网易的《楚留香》手游UI，提取了月亮和水墨作为界面的主要元素(如图4)。以轻薄的水墨为衬底，月亮为光源，画龙点睛般的将这两个元素贯彻到了游戏内主要界面上，即创造性的传达了游戏的核心文化韵味，又让整体功能清晰明了易用性强[4]。

3.2 改变设计策略，合理控制拟物和扁平风的出现比例

使用频率低、容易出彩的界面做拟物化处理，使用频率高、功能复杂的界面轻薄扁平化，减轻玩家的使用负担。和平精英的界面策略是，背包、商城等玩家每日使用的高频界面，做简单的扁平化处理，赛季开启、送礼物等使用频率低的界面做精细化的拟物设计。这样的好处在于，日常高频使用界面的扁平化设计，让繁琐的功能更易于理解。精细的拟物化界面在适当的时机出现，能够带给玩家一种惊喜感(如图4)。

3.3 强调UI和场景之间的联系，用镜头切换界面

从场景内提取UI界面设计元素，巧妙的把美术场景当作是界面背景，界面之间用镜头的转移或放大来切换。这样做能够减免界面背景设计的工作量，让底板看起来更轻薄，又能让界面和场景直接产生联系，烘托出氛围感。网易的《阴阳师百闻牌》的主界面(如图4)，将主功能入口分布场在主场景之上，主功能入口的切换被包装成进入主场景内的一个房间。这样做只需要设计点缀性的元素和主要功能控件。

3.4 扁平控件的3D透视

拟物化UI设计中，在界面框体和图标造型时，会大量应用透视来表现空间感和其三维属性。那么在扁平化的界面中如何打破扁平，增加元素的立体感呢？在传统拟物化风格的影响下，通过为扁平的底板增加透视角度，来营造强沉浸感。《明日方舟》用全息投影的概念包装主界面(如图5)，为主面板增加透视角度，手机的信号、电量等信息都被放在和游戏主面板一个层级，能够随着陀螺仪移动。这样的做法，类似微软Fluent Design的思路，在扁平化的设计里植入空间的概念，其目的是降低视觉效果的信息干扰，用户在聚焦主要层级信息的同时可以清晰地感受到空间的存在[5]。

4 小结

游戏UI的主要设计目的，是为它所服务的游戏传达出特有文化内涵，创造出独有的娱乐体验，并让功能信息易于理解，让体验顺畅无阻碍。当手游占据市场主导地位后，传统拟物风UI设计难以适应移动端的设备的特点，并且过度写实的拟物化设计不符合当代主流的审美趋势。“半拟物化”的UI设计，在传统拟物化和扁平化的基础上，结合新的技术进行设计，运用意象化点缀、场景化UI、扁平化3D透视等设计手法，让游戏的体验更顺畅更有代入感，并让未来游戏UI表现形式有了更多的可能性。