hestia-rsps / hestia

An open-source Kotlin game server.
BSD 3-Clause "New" or "Revised" License
16 stars 4 forks source link

Define UI component names #82

Closed GregHib closed 4 years ago

GregHib commented 4 years ago

Common UI element names and definitions https://en.wikipedia.org/wiki/List_of_graphical_user_interface_elements

Name Definition
interface a device or program enabling a user to communicate with a computer.
widget an application, or a component of an interface, that enables a user to perform a function or access a service.
component a part or element of a larger whole, especially a part of a machine or vehicle.
window a framed area on a display screen for viewing information.
menu allows the user to execute commands by selecting from a list of choices
tabs A tab is typically a rectangular small box which usually contains a text label or graphical icon associated with a view pane. hen activated the view pane, or window, displays widgets associated with that tab
terminal interface with text user interfaces
child window opens automatically or as a result of user activity in a parent window
message window/dialogue box a type of child window.
pane section of a window
panel flat physical area
view inside of a window (the camera)
frame/group box a type of box within which a collection of graphical control elements can be grouped as a way to show relationships visually
canvas a canvas is a container that holds various drawing elements
ribbon a set of toolbars placed on several tabs
GregHib commented 4 years ago

https://www.gamasutra.com/blogs/AnthonyStonehouse/20140227/211823/User_interface_design_in_video_games.php https://www.toptal.com/designers/gui/game-ui

In game space Not in game space
In story Diegetic Meta
Not in story Non-Diegetic Spatial
Component type Examples
Diegetic
  • Chat
  • Health bars
Meta
  • Dialogues
  • Quest cutscene effects
  • Snow
  • Beer goggles
  • Screen fade
  • Boat animations
Non-Diegetic
  • Minimap
  • Chat box
  • Tabs
  • (full) screen interfaces
Spatial
  • Right click menu?
  • Movement flag
  • Map hint/marker
GregHib commented 4 years ago

Runescape Wikia 2011 uses approximately the following naming structure (the list also ordered by depth)

Toolbar (Home/Support/Forums/Clans)
Fullscreen
    Account creation
    Login
    Lobby
Game window/Gameframe
    Developer console
    Context menus
    Chat
        Milestones
        Input boxes
    Item search
    Dialogue
    Control Panel
        Menus
            Combat styles
            Task System
            Stats
            Quest Journals
            Inventory
            Worn Equipment
                Items Kept on Death
                Price Checker
                Equipment Stats
            Prayer List
            Magic Spellbook
            Friends List
                Ignore List
            Friends Chat
            Clan Chat
            Options
            Emotes
            Music Player
            Notes
    Minimap
        Icons
            Status Globes
            World Map
            Advisor
            Logout
            PvP
                Safe/Hot/Countdown
        Buttons
            Compass
            XP Counter
        Markers
    Screen
        Main screen
        Overlay interface
            Godwars killcount
            Vinesweeper points
            Soul wars
GregHib commented 4 years ago

Using that naming structure as a basis; Task System should be changed to Tasks to avoid TaskSystemSystem's, Status Globes -> Orbs.

Typically these are named Interface - Component however I don't like to use Interface due to its length, vagueness and confusion with interface's.

Window seems to be the best Interface alternative, and for Component either Widget or Element. Component is more precise than Element. Widget is shorter and windows and widgets have a nice ring to it.

Each type should have it's own name too: