4. Visual Design

4.1 Design of Visual Elements
4.2 User Interface Text
4.3 Design of Graphic Images

4.1 Design of Visual Elements

4.1.1 Visual States for Controls

Rule 4.1.1.2: Unavailable state for a button is like this:

Rule 4.1.1.3: Normal state for a button is like this:

Rule 4.1.1.4: Default button state is like this:

Rule 4.1.1.5: Pressed state for a button is like this:

4.1.2 Component Elements Style

Rule 4.1.2.1: For each component, there is a title within a banner

Rule 4.1.2.2: Tabs look like this:

Rule 4.1.2.4: These lines are used to visualize frontiers between two components or two zones within a component :

Rule 4.1.2.5: A table header has specific background color like this:

Rule 4.1.2.6: In a table, row color changes every two rows like this:

Rule 4.1.2.7: In a table, every column has a border vertical line on right side. There is no border all around a cell.

Rule 4.1.2.9: If the warning icon is used, it is located on the right side of the item like this:

4.2 User Interface Text

4.2.1 Terminology

Example

Example

Example

Remark

[1] In a menu, "..." indicates that the command will not terminate immediately. The users expect a continuation in the dialog sequence (for example a dialog box)

Example

Correct	Incorrect
The title describes the content of the dialog box. This dialog box can appears both during the creation or the edition.	Once selected the "Area" command for the creation, the word creation is redondant.

Example

Correct	Incorrect
Name of the command of creation of a product and its dialox box are consistent.	Title of the dialog box has no relation with the command.

4.2.2 Font and Size

4.3 Design of Graphic Images

4.3.1 Icon Design

Remarks

• [1] The useful size is the dimension total of the graphical object minus the zone used to define the transparency color and the margins.

  In all icons cases, the transparency is defined by the upper left pixel. All pixel that has the same color will be considered as transparent.

• [2] P2 command icons in the three states Unpressed, Focussed, and Pressed are dynamically generated at run time from the P1 icons (normal or small) and so respectively follow the standard dimensions 24x24 and 18x18.

  Icon state	Normal size	Small size
  Unpressed	24x24	18x18
  Focused	24x24	18x18
  Pressed	24x24	18x18

Example

Correct	Incorrect
Different icons for "Standard Print" and "Captured Image Print" (for Save and Copy too) or Use the same command (for Save and Copy too).	Same Save Print icon for Document Save and Capture Save Same Icon Print icon for Document Print and Capture Print Same Icon Copy icon for Selection Copy and Capture Copy

[Top]

History

Copyright © 2000, Dassault Systèmes. All rights reserved.