Difference between revisions of "GUI design guidelines"
From Lazarus wiki
Jump to navigationJump to searchm |
m |
||
| Line 1: | Line 1: | ||
{{GUI design guidelines}} | {{GUI design guidelines}} | ||
| − | ==Dialogs== | + | == Dialogs == |
Dialogs are special forms that need the user to make / change some setting before lazarus can continue. | Dialogs are special forms that need the user to make / change some setting before lazarus can continue. | ||
| − | ===Dialog Settings=== | + | === Dialog Settings === |
Settings that should be applied in general are: | Settings that should be applied in general are: | ||
| Line 16: | Line 16: | ||
**<tt>[biSystemMenu,biMinimize,biMaximize]</tt> - for non-modal shown dialogs | **<tt>[biSystemMenu,biMinimize,biMaximize]</tt> - for non-modal shown dialogs | ||
| − | ===General layout=== | + | === General layout === |
* On the bottom of the form [[#Button panel|Button panel]] should be placed. | * On the bottom of the form [[#Button panel|Button panel]] should be placed. | ||
* The dialog should work on a screen of 800x600. 640x480 is not needed to support. | * The dialog should work on a screen of 800x600. 640x480 is not needed to support. | ||
| Line 25: | Line 25: | ||
* All hints and captions used on a form should be as resourcestring, so localization can be applied. | * All hints and captions used on a form should be as resourcestring, so localization can be applied. | ||
| − | ====Spacings and sizes==== | + | ==== Spacings and sizes ==== |
* Dialogs must be designed for 96 dpi resolution and 8 points/14 pixels font height. | * Dialogs must be designed for 96 dpi resolution and 8 points/14 pixels font height. | ||
* Spacing between elements: 6 pixels. | * Spacing between elements: 6 pixels. | ||
| Line 32: | Line 32: | ||
* All buttons in a group (including buttons that contain glyphs) must have the same width and height. | * All buttons in a group (including buttons that contain glyphs) must have the same width and height. | ||
| − | ====Button panel==== | + | ==== Button panel ==== |
| − | The button panel should consist at least of the following elements | + | The button panel should consist at least of the following elements: |
* OK button. | * OK button. | ||
| Line 41: | Line 41: | ||
* Help button. | * Help button. | ||
| − | ===Anchoring=== | + | === Anchoring === |
To make sure that a dialog after resizing will keep on showing the components in a good way, anchoring is being used. Each components has a property called Anchors. With this property you can determine the way a component is anchored to it's parent. | To make sure that a dialog after resizing will keep on showing the components in a good way, anchoring is being used. Each components has a property called Anchors. With this property you can determine the way a component is anchored to it's parent. | ||
Hint: Use the anchor editor of the IDE. | Hint: Use the anchor editor of the IDE. | ||
| − | ===Aligning=== | + | === Aligning === |
Another way to organise components is using alignment. Each component has a property Align. By selecting the appropriate align position several components can be positioned properly. | Another way to organise components is using alignment. Each component has a property Align. By selecting the appropriate align position several components can be positioned properly. | ||
| − | ====BorderSpacing==== | + | ==== BorderSpacing ==== |
Especially useful in combination with Align is the BorderSpacing property. (Also found on the Anchors dialog). A typical borderspacing of 6 pixels around a component is used. | Especially useful in combination with Align is the BorderSpacing property. (Also found on the Anchors dialog). A typical borderspacing of 6 pixels around a component is used. | ||
Revision as of 11:42, 2 August 2006
│
Deutsch (de) │
English (en) │
français (fr) │
日本語 (ja) │
русский (ru) │
Dialogs
Dialogs are special forms that need the user to make / change some setting before lazarus can continue.
Dialog Settings
Settings that should be applied in general are:
- BorderStyle :
- bsSizeable - if the dialog is complex and resizing is really needed.
- bsDialog - if dialog is simple and resizing is not needed (NOTE: all dialogs should remain resizable internally because of localization issues).
- Position : poScreenCenter.
- FormStyle : Do not use fsStayOnTop, as this can be pretty annoying under some window managers.
- BorderIcons:
- [biSystemMenu] - for modal shown dialogs
- [biSystemMenu,biMinimize,biMaximize] - for non-modal shown dialogs
General layout
- On the bottom of the form Button panel should be placed.
- The dialog should work on a screen of 800x600. 640x480 is not needed to support.
- Close on Escape (if key not used otherwise).
- Define default button and Return activates it (if key not used).
- Avoid using long captions on buttons. Use Hint property to explain button action in details.
- The size of resizable dialogs whould be saved and restored next time the dialog will be opened.
- All hints and captions used on a form should be as resourcestring, so localization can be applied.
Spacings and sizes
- Dialogs must be designed for 96 dpi resolution and 8 points/14 pixels font height.
- Spacing between elements: 6 pixels.
- Minimum size of regular buttons: 90x25 pixels.
- AutoSize property need to be set for buttons to properly display localized text if it is longer than expected.
- All buttons in a group (including buttons that contain glyphs) must have the same width and height.
Button panel
The button panel should consist at least of the following elements:
- OK button.
- Cancel button.
- Next button (optional).
- Previous button (optional).
- Help button.
Anchoring
To make sure that a dialog after resizing will keep on showing the components in a good way, anchoring is being used. Each components has a property called Anchors. With this property you can determine the way a component is anchored to it's parent.
Hint: Use the anchor editor of the IDE.
Aligning
Another way to organise components is using alignment. Each component has a property Align. By selecting the appropriate align position several components can be positioned properly.
BorderSpacing
Especially useful in combination with Align is the BorderSpacing property. (Also found on the Anchors dialog). A typical borderspacing of 6 pixels around a component is used.
