Jump to content
Sign in to follow this  

Verbesserung des User Interface


Shiro

In Crowfall, there’s always been a difference between the user interface (the fancy term for the menus you see in-game) and the stylized fantasy world of the game itself. While the interface is clean, clear and light on flourishes, after seeing how the world of Crowfall has evolved, we wanted to revisit the UI to improve the way in which it complements the environment you battle in and the game’s overall design aesthetic.

When we delved into the story of the game, something jumped out at us: the Stoneborn, one of our playable races. There was a history buried there among the ruins of the Dying Worlds and that history was the key. Pulling some of the spirit of that architecture, the life and lore it represents, from the world of Crowfall and into the game menus was the goal we set out to achieve to make the experience more immersive.

Die Lobby

The game is divided into two parts. The starting gameplay gets you into the game as you are beginning your journey, rising as a Crow and then jumping into action in the Dying Worlds.

To highlight the starting experience, the Lobby will be backed in white, framed in gold and the content will be black and gray. In-game elements (heads-up display [HUD], character sheet and other interface elements.) will be backed in black, framed in silver and the game content on them will be white and gray.

Stoneborn designs are used to frame various elements and draw the eye to areas of importance.

Crowfall Concept of User Interface

Neue "Button"-artige Buttons

The buttons posed a more interesting challenge for our design. We wanted to move away from long, dark fill bar-like elements, but we also didn’t want to bring a bulky, solid framed set of buttons to the bottom of every pop-up. The way we chose to create balance was by using a slight nod to the Stoneborn styling in the endcaps of the buttons and a simple gray framing that would work on both the white backgrounds and dark backgrounds respectively.

Crowfall User Interface Buttons

Mode Select, Vessel Select, World Select and Faction Select are menus all players will interact with throughout the course of their Crowfall experience. Below are detailed breakdowns of the new look and flow of each of them.

Moduswahl

  1. New buttons, framed and shaped to help distinguish them from other elements. The “Spirit Crow” teal is used here to draw the eye and drive progress through the menus.
  2. New mode cards, capped with gold framing elements, use new mode icons that symbolize their distinct functions in a way that drives immersion. Shapes are pulled from the overall footprint of the icon and reinforced in later menus. Example: Notice the Campaign icon is triangular and there is a complex triangle design ghosted in the background of that mode card. You’ll see that same ghosted element in the background of the various campaign entries, info cards and in future content.
  3. The entire menu screen is given a bit of Stoneborn polish with subtle elements that hug the top of the screen. This element will persist across the front-end menu flow.

Crowfall UI: Lobby - Modus

Hüllenauswahl

  1. New vessel cards will help players see important information at a glance. Each vessel card will show the quality, race, class, name, level and campaign status with buttons that allow for name changes and campaign release. Quality has been added to the color framing of the vessel, as well as reinforced below the character image. We’ve expanded the status indicator to reveal whether a vessel is locked, linked or available. Locked characters can only be removed from a campaign through the Embargo System. Linked characters are currently in an activity but are free to leave at no penalty.
  2. Tab updates use the icons from the various mode types. A new gold-accented highlight tab with a taller profile reinforces the mode currently selected.
  3. Campaign info cards will be connected to any vessel that is currently subscribed to the activity selected. This will give the player quick access to jump right back into a game. Allowing for a more detailed breakdown of info are some of the new elements added to the campaign info card, such as an updated map button using a compass icon, new mode images with a reinforced mode type watermark (notice the triangle image over the tree), defined rewards and multiple tabs.
  4. More grounded character image with quality flag added underneath.
  5. Clearly locked vessel entries are restricted content only for the use of VIP backers.

Crowfall UI: Lobby - Charakter

Weltauswahl

  1. Tabs for high-level filtering of world entries. A Coming Soon tab was added to help entice players with upcoming content and new outrageous rewards.
  2. The header element reinforces the mode you have currently selected. It also gives the player various ways to customize the list entries, making it easier to find the right campaign.
  3. Like the new vessel select entries, the campaign entries have added information to make world selection more informed. Image, name, owner, restrictions, type and recommended level are visualized on the selected world entry, with the number of users and status/time remaining on the non-selected entries.

Crowfall UI: Lobby - Welten

Faction Select

  1. Campaign info card added to this screen to remind the player what world/mode they are choosing to enter.
  2. Updated faction flag. New look and unique banner shapes for each faction.
  3. Faction entries with more contrasted selected/unselected states.
  4. Faction details and faction lock warning. Added faction reinforcement ghosted in the background.

Crowfall UI: Lobby - Fraktion

Mode_Select_Image.jpg

Wie gefällt Dir das neue User Interface?

Source: https://crowfall.com/de-DE/news/articles/improving-crowfalls-ui


Sign in to follow this  


User Feedback

Recommended Comments

There are no comments to display.



Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...