牧游社 牧有漢化翻譯

Victoria 3 - Dev Diary #30 - User Interface Overview

Bulldogklim, 2D Art Lead

（譯注：鑒于本篇日志附圖主要為用戶界面展示，對(duì)于圖片中內(nèi)容不多作翻譯。）

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美術(shù)總監(jiān)。與我的團(tuán)隊(duì)一起開發(fā)游戲的用戶界面（簡(jiǎn)稱UI）是我在游戲中工作的很大一部分。從現(xiàn)在開始，每次提到UI，指的就是組成游戲三大類UI（面板、按鈕和圖標(biāo)）的總稱！大多數(shù)信息和玩家做出的大多數(shù)決定，都發(fā)生在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的世界中是一個(gè)絕佳辦法。正如之前開發(fā)日志中所述，UX團(tuán)隊(duì)的重心在于讓大量信息可讀易讀。我們UI團(tuán)隊(duì)與他們緊密合作，用一種引人注意的視覺方式將所有的信息展現(xiàn)出來。

Art Pillars and how it ties with UI

美術(shù)支柱與其和UI的關(guān)系

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的美術(shù)風(fēng)格有三個(gè)核心支柱。這些支柱指導(dǎo)著整體的藝術(shù)方向，并捕捉了我們?cè)谟螒蛑邢胍獋鬟_(dá)的感受，這當(dāng)然也包括了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受到維多利亞時(shí)代上層階級(jí)的豪華與奢侈啟發(fā)。它應(yīng)該令人感覺優(yōu)雅精致。

2. Vintage and Idyllic
2. 復(fù)古且田園風(fēng)格
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.
這里的復(fù)古意味著往昔的高質(zhì)量。浪漫主義藝術(shù)Romanticism Art運(yùn)動(dòng)是靈感來源，指導(dǎo)我們的美術(shù)方向——鑒于它起源于19世紀(jì)，而且對(duì)田園詩(shī)般的過去和大自然進(jìn)行理想化，與我們想在用戶界面中加入的復(fù)古感覺非常吻合，所以它非常合適。

3. Detailed yet Approachable
3. 詳細(xì)而平易近人
High level of detail with intricate elements but used sparingly so it does not become cluttered and overwhelming.
高質(zhì)量的細(xì)節(jié)與錯(cuò)綜復(fù)雜的元素被使用得非常節(jié)制，這樣就不會(huì)顯得雜亂無章。

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面板組成了游戲中每個(gè)UI菜單的基礎(chǔ)或者背景（無論是全屏、彈出窗口還是側(cè)欄）。如果一個(gè)游戲元素沒在地圖上，那就在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.

我們選擇將新藝術(shù)主義Art Nouveau的元素納入面板。新藝術(shù)主義主要受到自然與植物花朵的自然形式與曲線啟發(fā)。這和復(fù)古且田園風(fēng)格的藝術(shù)支柱相匹配。這種風(fēng)格同樣在19世紀(jì)上層階級(jí)的建筑中也很突出。它錯(cuò)綜復(fù)雜的細(xì)節(jié)與另外兩大支柱中豪華與優(yōu)雅的感覺相呼應(yīng)。我們需要注意不要放過于詳細(xì)的圖案，因?yàn)檫@會(huì)分散UI的主要功能：給玩家展示信息！因此我們聚焦于豐富框架和邊框的細(xì)節(jié)，以及豐富標(biāo)題所在的菜單抬頭上。

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.

這是一個(gè)UI面板。帶有一點(diǎn)點(diǎn)金色，還有褪色織物紋理的精致圖案，再加上這個(gè)額外的華麗且復(fù)古的涂層，感覺在維多利亞時(shí)代更加突出。

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的角度來說，玩家需要幾乎立刻識(shí)別這些按鈕。按鈕應(yīng)被標(biāo)識(shí)為導(dǎo)航按鈕（將玩家導(dǎo)向其他UI界面的按鈕）或者行動(dòng)按鈕（執(zhí)行影響游戲世界行動(dòng)的按鈕）?？紤]到這點(diǎn)，我們?cè)噲D為游戲按鈕構(gòu)建一個(gè)與我們核心美術(shù)支柱相一致的模板。

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.

我們使用木質(zhì)紋理來模擬年代久遠(yuǎn)的復(fù)古感。所有的按鈕都是翡翠色，基于行動(dòng)按鈕和導(dǎo)航按鈕有不同的紋理效果。

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.

不同陰影的翡翠色按鈕。行動(dòng)按鈕同樣有薄薄的金色邊框以進(jìn)一步區(qū)分它們，而它們都被識(shí)別為按鈕。

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!

會(huì)有一些用戶界面屏幕上會(huì)有多個(gè)按鈕。我們?nèi)绾挝藗儗?duì)高優(yōu)先級(jí)按鈕（如有）的注意？我們的解決方案是，通過在按鈕的邊框和角落添加新藝術(shù)元素，讓他們看起來更“華麗”！

Icons

圖標(biāo)

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.

圖標(biāo)是P社游戲UI界面很重要的一個(gè)部分，維多利亞3里也是一樣。圖標(biāo)在游戲里的形狀、大小、風(fēng)格和顏色各異，我們會(huì)用它們來代表一大堆不同的物品、機(jī)制、統(tǒng)計(jì)數(shù)據(jù)和屬性。我們會(huì)挨個(gè)分析我們使用圖標(biāo)的不同方式，從而讓你們更好地了解我們的設(shè)計(jì)過程。

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.

目前為止，這一組圖標(biāo)是在游戲中最直觀和詳細(xì)的。它們代表了游戲世界里真實(shí)存在的事物。這些圖標(biāo)類似于迷你插圖，它們主要的目的是為了增加沉浸感以及激發(fā)玩家們的想象力。

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.

“學(xué)術(shù)”和“炸藥”都是玩家可以研究的科技，但是前者似乎有些抽象，而“炸藥”是在現(xiàn)實(shí)生活中的一個(gè)實(shí)際物品。那我們?nèi)绾伟堰@些圖標(biāo)歸成一類呢？對(duì)于科技和事件圖標(biāo)，我們決定使用現(xiàn)實(shí)生活中存在的一個(gè)或幾個(gè)物體來代表它們。由于大多數(shù)這些圖標(biāo)都相當(dāng)大（對(duì)于一個(gè)圖標(biāo)而言），我們決定采用極為詳細(xì)和逼真的渲染來增強(qiáng)沉浸感。這對(duì)于“炸藥”科技非常直觀。對(duì)“抗議”事件，我們使用一些更有象征意義的東西，例如一只手拿著一個(gè)喇叭。

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組用我們驚艷的人物模型和圖標(biāo)來代表。由于角色模型在縮小之后會(huì)看著有點(diǎn)不舒服，我們使用圖標(biāo)來代替。在設(shè)計(jì)Pop圖標(biāo)時(shí)，我們使用了同樣的準(zhǔn)則。例如，“機(jī)械師”由一把扳手來代表。

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.

我們要談?wù)摰淖詈笠唤M圖標(biāo)是最為廣泛的一組，代表了游戲機(jī)制、類別、屬性以及統(tǒng)計(jì)數(shù)據(jù)。這些圖標(biāo)往往會(huì)出現(xiàn)在多個(gè)不同的UI界面上，且不會(huì)很大（對(duì)于圖標(biāo)來說）。它們也會(huì)以不同的大小出現(xiàn)。并且，它們很多都需要在偏小的時(shí)候也有充足的辨識(shí)度。所以，我們大大減少了這些圖標(biāo)里的細(xì)節(jié)，而把重點(diǎn)放在了一些顏色和輪廓的選擇上。

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

營(yíng)出現(xiàn)在不同的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.

我們也可以在這些圖標(biāo)上使用顏色代碼讓它們更有辨識(shí)度。例如，我們讓綠色代表正面效果，而紅色代表負(fù)面效果。

'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.

“利益集團(tuán)（IG）”圖標(biāo)是一個(gè)我們使用顏色代碼的更復(fù)雜的例子。玩家可能不能立刻記住和理解每一個(gè)子類別下所有的顏色代碼，但是我們希望隨著時(shí)間推移玩家會(huì)變得越來越熟悉這些。這方面的其他例子還有“鏡頭”類別圖標(biāo)。

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簡(jiǎn)單提到了新手教程。我們現(xiàn)在要談一談美工是如何幫助玩家更好地理解我們令人難以置信的深刻而復(fù)雜的機(jī)制的。我們相信通過將提示框、文本解釋以及信息圖結(jié)合起來，我們能更好地將游戲機(jī)制可視化。大多數(shù)你在網(wǎng)上找到的信息圖（去Google上搜一下）有一個(gè)干凈、風(fēng)格化且非?，F(xiàn)代的外觀。我們?cè)谶@里找到了一個(gè)讓其與維多利亞時(shí)代更契合的方法。這絕對(duì)可以被用來增加沉浸感，美化我們的藝術(shù)支撐。我們從維多利亞時(shí)代報(bào)紙插畫和藍(lán)圖插畫中汲取了靈感，并將它們引入了我們的信息圖中。作為錦上添花，我們將這些圖畫在了一個(gè)老舊的紙質(zhì)背景之上。

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!

我們要說的就這么多！我很希望你們很喜歡對(duì)V3的UI界面的介紹！下周咱們要和我們的內(nèi)容設(shè)計(jì)總監(jiān)Daniel來討論日記賬Journal Entries！

翻譯：口袋姚怪 沒有V3玩我要死了

校對(duì)：三等文官猹中堂

歡迎關(guān)注UP主和主播小牧Phenix！

歡迎關(guān)注牧游社微信公眾號(hào)和知乎專欄！微信公眾號(hào)改版為信息流，歡迎【置頂訂閱】不迷路，即時(shí)獲得推送消息！

B站在關(guān)注分組中設(shè)置為【特別關(guān)注】，將會(huì)在私信內(nèi)及時(shí)收到視頻和專欄投稿的推送！

歡迎加入牧有漢化，致力于為玩家社群提供優(yōu)質(zhì)內(nèi)容！組員急切募集中！測(cè)試群組822400145!?