使命召喚ios

With over 50 million players worldwide it’s safe to say Warzone has become a global sensation. Featuring cross-platform play, multiple game modes, customisation and wealth of features too long to mention here — it’s captured its audience and kept them engaged.

可以肯定地說Warzone已成為全球轟動的世界。 它具有跨平臺播放，多種游戲模式，自定義功能和豐富的功能，在這里值得一提的是，它吸引了觀眾并保持了參與度。

Like every game I pick up, the first thing I nerd out on is the UI. Despite the increasingly convoluted menu screen and its plethora of sub-menus it does a great job of putting typography, iconography, colour and hierarchy together in a way that’s navigable and digestible. However, there’s one thing that’s bugged me, which led to this post.

就像我挑選的每個游戲一樣，我最討厭的第一件事就是用戶界面。 盡管菜單屏幕越來越復雜，并且子菜單過多，但它仍以可導航和可消化的方式將字體，圖標，顏色和層次結構放在一起，卻做得很好。 但是，有一件事困擾著我，這導致了這篇文章。

One of the key UI features within the gameplay are notifications. Notifications that inform you if you’ve picked up a contract, if the circle is closing, if your loadout is dropping and so on. This is considered key information as it has a significant impact on how the game will play out. Want to earn money? Complete this contract. Want to stay alive? Move to the next circle. Need some weapons? Here comes your loadout. These notifications are displayed across your screen as a full width banner, as seen in the image below.

通知中的一項重要的UI功能是通知。 通知會通知您是否已簽約，是否正在關閉圓圈，是否正在卸載等。 這被認為是關鍵信息，因為它對游戲的進行方式有重大影響。 想賺錢嗎？ 完成此合同。 想活著嗎？ 移至下一個圈子。 需要一些武器嗎？ 您的加載到了。 這些通知在屏幕上以全角橫幅顯示，如下圖所示。

Loadout Drop notification during a game of Warzone在Warzone游戲中加載掉落通知

While this banner is informative and obvious, it does present a large issue during gameplay. These notification are fixed at certain times of the game, meaning you can’t control when they appear. The issue this creates is that if you happen to be in the middle of a fight or you need visibility of a certain part of your screen, it’s blocked by the banner in question. For new gamers I believe this is a good default setting so that they learn the mechanics of the game, but for experienced players it’s intrusive and annoying.

盡管此標語內容豐富且顯而易見，但在游戲過程中確實存在很大的問題。 這些通知在游戲的某些時間是固定的，這意味著您無法控制它們的顯示時間。 由此產生的問題是，如果您碰巧處于戰斗中或需要查看屏幕的特定部分，則該橫幅將被相關橫幅遮擋。 對于新游戲玩家來說，我認為這是一個很好的默認設置，以便他們學習游戲的機制，但對于有經驗的玩家而言，這是令人討厭的煩惱。

This banner positions itself right across the position of the opponent when aiming down sight向下瞄準時，此橫幅將自己定位在對手的位置

So what can we do about this? Some games already have features that allow for gameplay settings to be adjusted to the needs of the player. Apex Legends give the option of setting a compact prompt style when interacting with weapons and items. In the image below you’ll see what this looks like in the options menu.

那么我們該怎么辦？ 某些游戲已經具有允許根據玩家需求調整游戲設置的功能。 Apex Legends提供與武器和物品進行交互時設置緊湊提示樣式的選項。 在下面的圖像中，您將在選項菜單中看到它的外觀。

Apex Legends feature a wide array of options for you to customise your gameplay experienceApex Legends具有多種選項供您自定義游戲體驗

So why not apply a similar functionality for Warzone? Let’s dive into what this might look like…

那么為什么不為Warzone應用類似的功能呢？ 讓我們深入研究一下它的外觀……

布局 (Layout)

Positioning of the notifications is arguably the most important decision that needs making. While aesthetics are crucial to making it feel like Warzone and communicating the message, the main objective here is to ensure it supports the user experience, rather than interfere with it. So what are the UI elements we need to work around?

通知的位置可以說是需要做出的最重要的決定。 美觀對于使人感覺像Warzone并傳達信息至關重要，但此處的主要目的是確保它支持用戶體驗，而不是干擾它。 那么，我們需要解決哪些UI元素？

Contextual information presented during gameplay游戲過程中呈現的上下文信息

As you can see, the interface is crowded. Except for the loadout menu that displays when acquiring it, all elements on the screen are present throughout the duration of your gameplay. This leaves the only the prime real estate — the centre of the screen — free of UI, which is a good thing as that’s where you’ll be aiming. Looking at this now I feel that the smartest location for the compact notifications should be tucked beneath the Circle Timer and above the temporary contract notification.

如您所見，界面很擁擠。 除了獲取時顯示的加載菜單外，屏幕上的所有元素在整個游戲過程中都會顯示。 這使唯一的主要房地產-屏幕的中心-沒有UI，這是一件好事，因為這就是您要瞄準的地方。 現在看，我覺得緊湊通知的最明智的位置應該藏在Circle Timer下方和臨時合同通知上方。

設計 (Design)

It’s important to acknowledge the existing UI elements to understand what works and what doesn’t. While some of the graphics feel inconsistent and somewhat poorly executed, there are some neat tricks used that are instantly recognisable. Diagonal stripes convey a warning, a biohazard symbol tells you the toxic gas is approaching and a shopping cart says that there’s money to spend. My intention is to leverage these overarching concepts and refine them into a compact system, with a focus on compacting the notifications that appear as full screen banners.

重要的是要承認現有的UI元素，以了解哪些有效，哪些無效。 盡管某些圖形感覺不一致并且執行效果不佳，但是使用了一些巧妙的技巧就可以立即識別它們。 斜條紋傳達警告，一個生物危害符號告訴您有毒氣體正在逼近，購物車說有錢可花。 我的意圖是利用這些總體概念并將它們完善為一個緊湊的系統，重點是壓縮以全屏橫幅形式顯示的通知。

羅恩·科布(Ron Cobb)的符號標準 (Ron Cobb’s Semiotic Standard)

What UI project would be complete without referencing and interpreting Ron Cobb’s brilliant Semiotic Standard, created for the movie Alien in 1979?! I’ll try not to dwell too much on this topic but it’s worth noting the importance of cohesiveness when creating visual elements that mean different things, when belonging to the same family.

在不參考和解釋羅恩·科布(Ron Cobb)1979年為電影《 異形》(Alien)創建的輝煌的Semiotic Standard的情況下，什么樣的UI項目才能完成？ 在這個主題上，我將盡量避免過多討論，但是值得注意的是，當創建視覺元素時，凝聚力的重要性是必要的，這些視覺元素屬于同一家庭。

Ron Cobb’s Semiotic Standard for the movie Alien, 1979.羅恩·科布(Ron Cobb)1979年電影《外星人》的符號標準。

When creating each icon I used a familiar shape that is already represented in the Call of Duty games — the hexagon — and created a series of simplified shapes that reference the core of the message communicated. While the Semiotic Standard is a great source of inspiration, I ensured that the designs adapted to fit the modern look and feel of the game, using necessary shapes and symbols to reference the in-game mechanics.

在創建每個圖標時，我使用了在使命召喚游戲中已經表示過的熟悉的形狀-六邊形-并創建了一系列簡化的形狀，它們引用了所傳達消息的核心。 雖然“符號標準”(Semiotic Standard)是一個很好的靈感來源，但我確保設計必須適應必要的形狀和符號，以適應游戲的現代外觀和感覺，以引用游戲中的機制。

A set of icons using the hexagon shape at its core一組圖標，其核心使用六邊形

版式 (Typography)

I used a typeface that most closely resembles the current in-game UI, so that the focus remained on the objective of this project. Titling Gothic retains much of the rigidity and clarity required for making impactful statements at all sizes.

我使用的字體與當前游戲中的UI最相似，因此重點仍然放在該項目的目標上。 Titling Gothic保留了各種大小的有影響力的陳述所需的大部分剛性和清晰度。

Titling Gothic FB Narrow — Medium標題哥特式FB窄—中

運動 (Motion)

A key feature I wanted to include in these designs was the use of motion as a vehicle for communication. Despite the intention of making the notifications less intrusive, they still need to catch the eye and be of use. So my idea was to treat these notifications with the same care and attention as any other element, but repositioning it on screen in a place that enhances the player’s experience. A digital glitch effect was applied to reference ‘communications’ and align with similar visual applications in other parts of the game.

我想在這些設計中包含的關鍵功能是將運動用作通信工具。 盡管打算減少通知的侵入性，但它們仍需要引起注意并加以使用。 因此，我的想法是像對待其他通知一樣對待和處理所有其他元素，但是將其重新放置在屏幕上的位置可以增強玩家的體驗。 數字小故障效果已應用于參考“通信”，并與游戲其他部分中的類似視覺應用程序保持一致。

The glitch effect is used for the incoming and outgoing of notifications毛刺效果用于通知的傳入和傳出

通知事項 (Notifications)

The final set of notifications utilise the same structure but visually distinguish themselves through application of colour, iconography and supportive graphical elements.

最終的通知集使用相同的結構，但通過應用顏色，圖像和輔助性圖形元素在視覺上區分開來。

Each notification uses different background elements to help visually identify themselves, however the notifications that act as warnings use the same diagonal stripes. This is so they feel cohesive as a set and assist the player in identifying them more instantly.

每個通知使用不同的背景元素來幫助視覺識別自己，但是充當警告的通知使用相同的對角線條紋。 這樣一來，他們會感到凝聚力，并協助玩家更Swift地識別他們。

The set of notifications utilising the glitch effect利用故障效應的一組通知

它在游戲中的顯示方式 (How it appears in-game)

In the video below you can see how a Jailbreak Active notification appears at the same time as the player engages in a gunfight.

在下面的視頻中，您可以看到在玩家進行槍戰的同時如何顯示“ 越獄活動”通知。

The Jailbreak Active notification appearing in the middle of a gunfight槍戰中出現越獄活動通知

Whereas before this notification would be plastered across the screen — obscuring the view of the player — it now sits neatly on the side, making itself visible without interfering at the wrong moment.

以前，此通知會貼在屏幕上(遮蓋玩家的視線)，現在它整齊地放在側面，使其可見，而不會在錯誤的時刻進行干預。

Sit down! Here the Loadout Incoming notification appears at the exact time a player takes a crucial shot坐下！ 在這里，“進場費”通知會在玩家進行關鍵擊球的確切時間出現

最后的想法 (Final thoughts)

While the outcome of this project is in no way extensive, I believe like any good bit of UI design that small iterations can have a huge impact on the experience. I would love to see these minor issues addressed so that the player has control and can decide how they want to experience the game in the way that suits them.

盡管該項目的成果絕非廣泛，但我相信，就像任何出色的UI設計一樣，小的迭代可能會對體驗產生巨大的影響。 我希望看到這些次要問題得到解決，以便玩家可以控制并決定他們如何以適合自己的方式體驗游戲。

As always, like any well-behaved designer I welcome feedback. So please leave a comment and tell me what you think.

一如既往，像任何品行端正的設計師一樣，我歡迎您提供反饋。 因此，請發表評論并告訴我您的想法。

If you’re interested in Warzone gameplay, you can also visit my YouTube channel here.

如果您對Warzone的游戲方式感興趣，也可以在此處訪問我的YouTube頻道 。

View other projects on my website here.

在這里查看我網站上的其他項目。

Until next time!

直到下一次！

翻譯自: https://medium.com/swlh/compact-ui-for-call-of-duty-warzone-3b501f86373d

使命召喚ios

總結

以上是生活随笔為你收集整理的使命召唤ios_使命召唤的精巧UI：战地的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。