Visual Design:Padding
From KDE-HIG_Wiki
<todo> Here, add exact values for spacing/padding between related options, unrelated options, alignment of different interface elements., etc</todo>
| Table of contents |
Layout Specifications
A clear and consistent layout helps the user move through an application smoothly and efficiently. Additionally, according to the Perceptional Laws of Grouping, the placement of components determines their perception as related or non-related elements. Additionally, This affects merely the proper placement, spacing and alignment of components in application interfaces.
Placement of Controls
Guidelines
Support the laws of grouping by an appropriate spacing, padding and alignment of components.
Spacing:
Whenever possible, provide the following basic spacing:
- Leave a 12-pixel border between the edge of a window and the nearest controls.
- Leave a 12-pixel horizontal gap between a control and its label. (The gap may be bigger for other controls in the same group, due to differences in the lengths of the labels.)
- When adding a second column, leave a 36-pixel horizontal gap between the left controls and the labels of the right controls.
Padding:
When nesting groups, make sure the vertical gap within subgroups is lower than the one between higher level groups:
- Leave a 18-pixel vertical gap between components of different first level groups.
- Leave a 12-pixel vertical gap between controls of different subgroups.
Alignment:
- Left-align all labels and controls. <todo>What about non-left to right fonts???</todo>
- Right-justify the components of a group or of the entire dialog.
- Align elements of the same group equally.
- When nesting groups, indent each subgroups by 16 pixel.
<todo>PIXEL IS NOT THE CORRECT UNIT!! as it's not scalable. Maybe just say 'smaller' and 'larger' and provide implementation hints which describe how to do it correctly??</todo>
Using Spacers
In this section, describe thoroughly how to use designer to fulfill the layout specifications
