ARCWAY Cockpit

GUI (Graphical User Interface) Sketches - Overview

Beispiel

With the help of GUI Sketches user interfaces can be planed and designed. The sketchy presentation allows an abstract design which is independent from the later design of windows and buttons in the used operating system. This focuses the view at the essential parts, prevents the fixing to a certain target platform and helps not giving the impression of the design being final and unchangable.

Base Elements

Windows are the basis for most user interfaces.

Text Fields and Text Boxes allow the user to enter singleline or multiline information. Thereby the Password Field is masking the entered text.

Labels are used to name or describe other elements like Text Fields.

Buttons are used to trigger aktions.

Radiobuttons form a group of options from which only exactly one option can be selected.

Checkboxes represent options that can be selected and deselected.

Scroll Bars allow the user to scroll through the content of for example a Text Field if the actual content is too long for this Text Field.

Dropdowns enable the user to select one element from a predefined set of information.

Information can be display tabularly by using Table Columns.

Groups visualise the belonging of several elemnts to eachother.

Progress Bars show the user the progress of a long-lasting operation.

Tabs are used to group elements that belong together, to allow fast switching between these groups and to name them.

With the help of the Expandable Element hierarchically information can be named, shown and hidden.

The Line can be used to seperate different areas from eachtother.

The Graphic can for example be used to add logos, background images or other complex graphical content.

Note: The Graphic element differs from the Comment with picture by always being visible, even if comments are hidden.

Combined Elements

The base elements describe in the section prior to this can be used to create more complex combined elements, as it will be shown in the next four examples:

A Table can be created by combining several Table Columns, Labels and Scroll Bars.

The Window can be extended to a Window with menu by adding Labels and a horizontal line.

The combination of a Text Field with a Scroll Bar creates Spinner that enables the user to scroll through a set of options and select one of these.

A Tree, as it is often used for representing a directory structure, can be created with the help of a Text Box, Expandable Elements, Labels and Scroll Bars.