11.3，样式和风格

界面样式和风格是指界面的外观和视觉表现，主要通过界面的基本元素表现出来，如图文、按钮和框体等，这些基本元素的展陈方式和主题风格决定了界面的样式和风格。界面样式和风格的设计，就是根据玩法和主题，为界面选择一种合适的、统一的样式和风格。既要反映软件应用的特征，也要遵循信息传达的特点。

一、基本元素：图文、按钮、框体

构成界面内容的基本元素可以概括为：图文、按钮和框体，它们是界面设计的具体对象，我们需要清楚有哪些基本元素，从而知晓需要设计什么。

1、图文

图文是界面呈现的信息内容，包括游戏故事、场景、人物、道具等。界面存在的目的就是给玩家传递和呈现图文内容，这些内容的主题风格，将影响图标、框体的样式和风格。

2、按钮

按钮是界面中玩家可执行的行动。界面中存在两种类型的按钮，一种是游戏互动按钮，目的是模拟玩家的游戏行动，比如游戏中可互动的角色和技能。另一种是界面导航按钮，目的是方便内容的展示，比如界面中代表一个页面的标签和图标链接。无论哪种按钮，都是游戏内容的替身，也是操作的对象，要直观、易识别、容易操作。

基于屏幕交互的界面，按钮是不可或缺的。而基于虚拟现实技术的界面，采用了手柄、手势、姿势等互动方法，并不依赖屏幕按钮。

                             

图11-3-1，《跳一跳》界面的基本元素：图文、按钮和框体。

3、框体

框体是构图元素，它是整合画面元素、维持版面构图的元素。越多信息内容的界面越需要借助框体，信息越少的界面越不需要框体。图标和框体是通用元素，图文内容可以变化，但图标和框体不能任意变化。因此，图标和框体是界面的基石，是优先的设计对象。《黑暗料理王》的界面图标和框体非常有特色，是一套精心设计的样式和风格。如图11-3-1所示《跳一跳》界面的基本元素，图文负责展示重要内容，按钮负责实现导航，框体负责内容的整合和构图。

二、展陈方式：方、行、层

界面元素的展陈方式，是指界面中的基本元素，会按照一定的组织方式进行排列组合或排版。展陈的目的是为了界面的秩序，方便玩家欣赏、操作。界面的布局方式是受软件特征、屏幕信息特征和阅读习惯等影响，而形成的设计方法。

界面的展陈方式可以总结为几何化布局，具体特点有：方、行和层。这是与数字空间三维信息呈现方式和软件程序特点所决定的,如图11-3-2所示。

图11-3-2，《跳一跳》界面的展陈方式：方、行和层。

1、方

以方为形、以方为规矩设计界面元素。所有界面元素都是以方为基础造型，并按照方格、方块、方框等方式组织或组合元素，主要原因如下：

（1）图文以方为形。在现代信息传达中，方形的图片、方块的文字段落，使得方形的构图成为最适宜的布局方式，人们也逐步习惯了信息内容的方形和方构图。

（2）界面以方为界。方形的屏幕是产品最有效的形式，这使得方形和方构图成为最有效的屏幕利用方法，这决定了以方为形的布局特色。

（3）软件以方为规。软件按照xy坐标来处理对象，沿着水平或垂直方向来排列文字、图等内容，并以方形来绘制面板、窗口等元素。软件遵循了方形和方构图，以及水平线和垂直线，这就进一步形成了以方为规的布局方式。

2、行

按行来排列和组织内容。所有需要整理的元素，都是按照行和列来统一大小、次序。遵循了人们的阅读习惯和布置方法，从左至右，从上至下。

（1）行和列是最好的组织方式，可以将界面元素变得整齐，从而有利于阅读和使用。

（2）行和列可以建立次序，从左到右，从上到下。

（3）行列可以将杂乱而繁杂的元素，整合成统一的整体，这是排版布局很重要的手段。

总的来说，行和列形成的构图网格，能迅速有效地稳定界面，提供有次序有条理的内容。

3、层

按层来堆叠内容。所有的界面元素都可以堆叠，形成前后关系，相当于分属不同的图层，可以一层层地叠加，模拟z轴空间。

（1）层的前后关系，可以制造空间感。

（2）层叠的方式，可以在界面中里容纳更多的内容。

（3）层也是非常好的整合手段。

三、基本风格：透明、扁平、仿真

界面的表现风格主要依据游戏内容来确定，需要根据游戏的玩法场景和画面表现来选择合适的界面风格，主要可以概括为三种基本风格：透明风格、扁平风格和仿真风格。无论哪种风格，都是以内容展示为主，其他导航和框体为辅。透明、扁平和仿真风格的真正目的，都是通过辅助元素的简洁含蓄，来衬托画面主体的优美。

1、“你看不到我”的透明风格

透明风格是指界面除了必要的图文内容，大部分区域省略了装饰纹样、边框和块面色彩，不阻挡玩家视线，从而让画面能较完整地呈现。界面元素能省就省，框体无边框、无装饰，块面透明或半透明，图标简单甚至纯文字。透明风格有两个目的：

（1）画面太好看了，界面会影响效果：很多时候，避免界面对画面视觉效果的影响，因此，简化界面元素，比如《光遇》。

（2）画面太重要了，界面会影响操作：由于界面玩法以真实感受为主，因此尽量避免无关按钮。在第一人称3D游戏中，界面被降低到极致，讲究现场感。比如《疯狂Max》和《辐射4》。

2、“简单不显眼”的扁平风格

扁平样式是指界面元素简洁含蓄，为了突出画面主体，采取了简洁边框和装饰的框体，块面色彩概括，整体画面统一。扁平样式风格较多样，但都遵循以画面内容为主体的原则，采取朴素方式来衬托画面，不喧宾夺主。

很多画面非常优秀的游戏，为了避免界面元素哗众取宠，都会采取不惹人注意的扁平界面，比如《原神》等。它们与透明风格的目的是一致的。

3、“融入真实场景”的仿真风格

仿真样式是指模仿游戏的玩法场景和画面表现来塑造界面元素，从形、色、质、光、影、音等多方面模拟场景的细节和效果，实现界面与游戏场景的统一。仿真风格让界面成为场景的一部分，目的就是讲究整体性，更好地衬托画面主体内容。

仿真风格主要依赖故事主题，讲什么时代、什么地域或什么主题的故事，就要从真实事物去表现，模仿它们的细节和效果，去刻画界面的样式，比如废土、科技、卡通等。透明和扁平样式的可塑性较弱，而仿真样式是最富有变化的。《博德之门2》游戏界面采取了非常写实的风格，它按照西方古代魔法的概念，选择了植物、石头、宝石等事物的形、色、材质、光影，甚至音效，来塑造界面元素。比如石质的按钮在按下时，会发出石头互相摩擦的音效。