维多利亚3开发日志#30 | 1/20 用户界面概览

牧游社 牧有汉化翻译

Victoria 3 - Dev Diary #30 - User Interface Overview

Bulldogklim, 2D Art Lead

（译注：鉴于本篇日志附图主要为用户界面展示，对于图片中内容不多作翻译。）

Hello all! My name is Kenneth and I am the 2D Art Lead on Victoria 3. Working on the game's user interface (UI in short) with my team is a big part of what I do on the game. From here on, whenever the word UI is mentioned, it refers to an overview of these 3 categories (Panels, Buttons and Icons) which make up the UI of the game! The majority of the information and the decisions a player makes hAppens in the UI.

大家吼！我是Kenneth，是维多利亚3的2D美术总监。与我的团队一起开发游戏的用户界面（简称UI）是我在游戏中工作的很大一部分。从现在开始，每次提到UI，指的就是组成游戏三大类UI（面板、按钮和图标）的总称！大多数信息和玩家做出的大多数决定，都发生在UI中。

There is a huge opportunity to engage and immerse the player into the world of Victoria 3 through the UI. As mentioned in the previous Dev Diary, the UX team's focus is to make this massive amount of information Approachable and accessible. Us, in the UI team, work extremely closely with them, to display all that information in a visually Appealing way.

通过UI让玩家接触并沉浸在维多利亚3的世界中是一个绝佳办法。正如之前开发日志中所述，UX团队的重心在于让大量信息可读易读。我们UI团队与他们紧密合作，用一种引人注意的视觉方式将所有的信息展现出来。

Art Pillars and how it ties with UI

美术支柱与其和UI的关系

We have 3 core pillars for Victoria 3's art style. These pillars guide the overall art direction and capture the feelings we want to convey in the game which includes of course, the UI!

维多利亚3的美术风格有三个核心支柱。这些支柱指导着整体的艺术方向，并捕捉了我们在游戏中想要传达的感受，这当然也包括了UI。

1. Prestigious
1. 华丽
The UI is inspired by the extravagance and luxuries of the upper class in the Victorian era. It should feel elegant and exquisite.
UI受到维多利亚时代上层阶级的豪华与奢侈启发。它应该令人感觉优雅精致。

2. Vintage and Idyllic
2. 复古且田园风格
Vintage here means something from the past that is of high quality. The Romanticism Art movement is a source of inspiration for the art direction. It seems fitting given that it originated in the 1800s and the idealisation of the idyllic past and nature fits in nicely with the Vintage feel that we want to incorporate in the UI.
这里的复古意味着往昔的高质量。浪漫主义艺术Romanticism Art运动是灵感来源，指导我们的美术方向——鉴于它起源于19世纪，而且对田园诗般的过去和大自然进行理想化，与我们想在用户界面中加入的复古感觉非常吻合，所以它非常合适。

3. Detailed yet Approachable
3. 详细而平易近人
High level of detail with intricate elements but used sparingly so it does not become cluttered and overwhelming.
高质量的细节与错综复杂的元素被使用得非常节制，这样就不会显得杂乱无章。

UI panels

UI面板

UI panels form the base or background of every single UI menu (be it, fullscreen, popups, or on the sides) in the game. If it's not on the map, it's on an UI panel.

UI面板组成了游戏中每个UI菜单的基础或者背景（无论是全屏、弹出窗口还是侧栏）。如果一个游戏元素没在地图上，那就在UI面板上。

We chose to incorporate Art Nouveau elements into the panels. Art Nouveau is primarily inspired by nature and the natural forms and curves of plants and flowers. This aligns with the Art pillar Vintage and idyllic. The style is also prominent in the architecture of the upper echelons of society in the 1800s. It's intricate details evoke a feeling of extravagance and elegance which aligns with the other two art pillars. We need to be careful not to put in too many detailed patterns as this will distract the main function of an UI: which is to display information to the player! Hence, we focus the rich details on frames and borders of the panels as well as headers where the title of the menu resides.

我们选择将新艺术主义Art Nouveau的元素纳入面板。新艺术主义主要受到自然与植物花朵的自然形式与曲线启发。这和复古且田园风格的艺术支柱相匹配。这种风格同样在19世纪上层阶级的建筑中也很突出。它错综复杂的细节与另外两大支柱中豪华与优雅的感觉相呼应。我们需要注意不要放过于详细的图案，因为这会分散UI的主要功能：给玩家展示信息！因此我们聚焦于丰富框架和边框的细节，以及丰富标题所在的菜单抬头上。

This is an UI panel. Elaborate patterns with a touch of gold and faded fabric textures adds that extra layer of prestige and vintage feel prominent in the Victorian era.

这是一个UI面板。带有一点点金色，还有褪色织物纹理的精致图案，再加上这个额外的华丽且复古的涂层，感觉在维多利亚时代更加突出。

Buttons

按钮

Buttons are the main elements in the game and UI that the player interacts directly with. From the UX point of view, players would need to identify the buttons almost instantaneously. Buttons should be identified either as Navigation buttons (buttons that lead you to another UI screen) or Action buttons (buttons that perform an action that affects the game world). With that in mind, we sought to create a template for the game's buttons while aligning it with our core art pillars.

按钮是游戏和UI中玩家直接接触的主要元素。从UX的角度来说，玩家需要几乎立刻识别这些按钮。按钮应被标识为导航按钮（将玩家导向其他UI界面的按钮）或者行动按钮（执行影响游戏世界行动的按钮）。考虑到这点，我们试图为游戏按钮构建一个与我们核心美术支柱相一致的模板。

We use wood as a texture for the buttons for the aged, vintage feel. All buttons have an emerald colour with two different shades to differentiate between Action and Navigation buttons.

我们使用木质纹理来模拟年代久远的复古感。所有的按钮都是翡翠色，基于行动按钮和导航按钮有不同的纹理效果。

Different shades of emerald for the buttons. Action buttons also have a thin gold border to differentiate them further while still having both types recognised as buttons.

不同阴影的翡翠色按钮。行动按钮同样有薄薄的金色边框以进一步区分它们，而它们都被识别为按钮。

There would be some UI screens that would have multiple buttons on them. How can we draw attention to higher priority buttons (if any)? Our solution: Give them a more 'prestigious' look, by adding Art Nouveau elements around the borders and corners of the button!

会有一些用户界面屏幕上会有多个按钮。我们如何吸引人们对高优先级按钮（如有）的注意？我们的解决方案是，通过在按钮的边框和角落添加新艺术元素，让他们看起来更“华丽”！

Icons

图标

Icons are a major part of the UI of Paradox games and of course, this is no different in Victoria 3. Icons in the game come in a wide variety of shapes, sizes, styles and colours, and we use them to represent a host of different things, mechanics, statistics and attributes in the game. I will break down some of the different ways in which we use the icons and hopefully y'all will gain a better insight into our design process.

图标是P社游戏UI界面很重要的一个部分，维多利亚3里也是一样。图标在游戏里的形状、大小、风格和颜色各异，我们会用它们来代表一大堆不同的物品、机制、统计数据和属性。我们会挨个分析我们使用图标的不同方式，从而让你们更好地了解我们的设计过程。

Buildings and Goods

建筑和商品

This group of icons are by far, the most visual and detailed in the game. They are representations of actual things in the game world. These icons are akin to mini illustrations and their primary purpose is to enhance immersion and fuel the imagination of our players.

目前为止，这一组图标是在游戏中最直观和详细的。它们代表了游戏世界里真实存在的事物。这些图标类似于迷你插图，它们主要的目的是为了增加沉浸感以及激发玩家们的想象力。

Events, Technologies and Pop groups

事件、科技以及Pop组

'Academia' and 'Dynamite' are both technologies that a player can research but one seems to be a little abstract while 'Dynamite' is an actual object in real life. How then, do we Approach such icons as a group? For technology and event icons, we decided to use objects from the real world or several objects to represent them. Since most of these icons are going to be pretty big (for an icon), we decided to go for a highly detailed and realistic rendering to enhance immersion. It is pretty straightforward for a technology like 'Dynamite'. For 'Protest' events, we use something a little more symbolic like a hand holding a loudhailer.

“学术”和“炸药”都是玩家可以研究的科技，但是前者似乎有些抽象，而“炸药”是在现实生活中的一个实际物品。那我们如何把这些图标归成一类呢？对于科技和事件图标，我们决定使用现实生活中存在的一个或几个物体来代表它们。由于大多数这些图标都相当大（对于一个图标而言），我们决定采用极为详细和逼真的渲染来增强沉浸感。这对于“炸药”科技非常直观。对“抗议”事件，我们使用一些更有象征意义的东西，例如一只手拿着一个喇叭。

Pop groups are represented by our amazing character models and icons. Since the character models will be a tad hard to see when scaled down, we use icons to support them. The same guidelines Apply when designing Pop icons. For example, 'Machinists' are represented by a wrench.

Pop组用我们惊艳的人物模型和图标来代表。由于角色模型在缩小之后会看着有点不舒服，我们使用图标来代替。在设计Pop图标时，我们使用了同样的准则。例如，“机械师”由一把扳手来代表。

The final group of icons I am going to talk about is a broad group which represents game mechanics, their categories, attributes and stats. These icons tend to show up in multiple different UI screens and are not very big (for an icon). They may need to Appear in different sizes as well. Many of them would need to be recognisable when they are small. Therefore, we reduce the amount of details on these icons drastically and instead focus on a few choice colours and the silhouettes.

我们要谈论的最后一组图标是最为广泛的一组，代表了游戏机制、类别、属性以及统计数据。这些图标往往会出现在多个不同的UI界面上，且不会很大（对于图标来说）。它们也会以不同的大小出现。并且，它们很多都需要在偏小的时候也有充足的辨识度。所以，我们大大减少了这些图标里的细节，而把重点放在了一些颜色和轮廓的选择上。

Battalions Appear in many different UI screens and in a variety of sizes.

营出现在不同的UI界面上，且尺寸各不相同。

We can also use colour coding on these icons to make them more recognisable. For example, we can have positive condition icons being green and negative condition icons being red.

我们也可以在这些图标上使用颜色代码让它们更有辨识度。例如，我们让绿色代表正面效果，而红色代表负面效果。

'Interest Groups (IG)' icons are a more complex example of colour coding. Players may not immediately remember and understand all the colour coding within each sub category of icons but our hope is that this will get more familiar and identifiable over time. Other examples of this are the ‘Lens’ category icons.

“利益集团（IG）”图标是一个我们使用颜色代码的更复杂的例子。玩家可能不能立刻记住和理解每一个子类别下所有的颜色代码，但是我们希望随着时间推移玩家会变得越来越熟悉这些。这方面的其他例子还有“镜头”类别图标。

Tutorial

新手教程

In the previous Dev Diary, Aron and Henrik have briefly mentioned the tutorial. I am going to talk a little about the art that goes into helping players understand our incredibly deep and complex mechanics better. We believe that the combination of tooltips, text explanations and infographics will help visualise the game mechanics better. Most infographics you find online (go ahead, do a Google search) have a clean, stylised and very modern look. We see an opportunity here to make it fit with the Victorian era better. This can definitely be an area where immersion is enriched and of course, strengthen our art pillars. We took inspiration from newspaper illustrations and blueprint illustrations of the Victorian era and adopted it for our infographics. And as icing on the cake, we overlaid the drawings on top of an aged paper background.

在之前的日志里，Aron和Henrik简单提到了新手教程。我们现在要谈一谈美工是如何帮助玩家更好地理解我们令人难以置信的深刻而复杂的机制的。我们相信通过将提示框、文本解释以及信息图结合起来，我们能更好地将游戏机制可视化。大多数你在网上找到的信息图（去Google上搜一下）有一个干净、风格化且非常现代的外观。我们在这里找到了一个让其与维多利亚时代更契合的方法。这绝对可以被用来增加沉浸感，美化我们的艺术支撑。我们从维多利亚时代报纸插画和蓝图插画中汲取了灵感，并将它们引入了我们的信息图中。作为锦上添花，我们将这些图画在了一个老旧的纸质背景之上。

That's all from me! I hope you have enjoyed the brief overview of the UI of Victoria 3! Join us next week as Daniel, our Content Design Lead will talk about Journal Entries!

我们要说的就这么多！我很希望你们很喜欢对V3的UI界面的介绍！下周咱们要和我们的内容设计总监Daniel来讨论日记账Journal Entries！

翻译：口袋姚怪 没有V3玩我要死了

校对：三等文官猹中堂

欢迎关注UP主和主播小牧Phenix！

欢迎关注牧游社微信公众号和知乎专栏！微信公众号改版为信息流，欢迎【置顶订阅】不迷路，即时获得推送消息！

B站在关注分组中设置为【特别关注】，将会在私信内及时收到视频和专栏投稿的推送！

欢迎加入牧有汉化，致力于为玩家社群提供优质内容！组员急切募集中！测试群组822400145!