Difference between revisions of "GUI design guidelines"

From Lazarus wiki
Jump to navigationJump to search
 
(→‎See also: Add more entries)
 
(25 intermediate revisions by 10 users not shown)
Line 1: Line 1:
−
==Dialogs==
+
{{GUI design guidelines}}
−
Dialogs are special forms that need the user to make / change some setting before lazarus can continue.  
+
 
 +
These guidelines apply to the Lazarus IDE but may be used for other projects as well.
 +
 
 +
== General ==
 +
All dialogs and windows must not use fixed sizes. Keep in mind that [[Font|font]] sizes and translated captions can vary. Use splitters and panels.
  
 +
All forms and dialogs must work on a screen of 800x600 or higher resolution.
  
−
===Dialog Settings===
+
==Dialogs (modal forms)==
−
Settings that should be applied in general are;
+
Dialogs are special forms that need the user to make / change some setting before lazarus can continue.
  
−
* '''BorderStyle''' : bsSizeToolWin
+
* Close on Escape (if the key is not used otherwise)
−
* '''Position''' : poScreenCenter
+
* Define default button and Return activates it (if the key is not used)
−
* '''FormStyle''' : Do not use fsStayOnTop, as this can be pretty annoying under some window managers.
+
* If it has scrollable content (e.g. contains a TMemo, TListBox, TTreeView) it should be resizable and size is stored
  
−
Show the dialog using ShowModal
+
=== Dialog Settings ===
 +
Settings that should be applied in general are:
  
−
===General layout===
+
* '''BorderStyle''' :
−
* On the bottom all required buttons to close / cancel the dialog, or to recieve help should be placed
+
**<tt>bsSizeable</tt> - if the dialog is complex and resizing is really needed.
−
* The dialog should work on a screen of 800x600. 640x480 is not needed to support.
+
**<tt>bsDialog</tt> - if dialog is simple and resizing is not needed (NOTE: all dialogs should remain resizable internally because of localization issues).
−
* Close on Escape (if key not used otherwise)
+
* '''Position''' : <tt>poScreenCenter</tt>.
−
* Define default button and Return activates it (if key not used)
+
* '''FormStyle''' : Do not use <tt>fsStayOnTop</tt>, as this can be pretty annoying under some window managers.  
−
* All but the most simple dialogs should be resizable and size is stored
+
* '''BorderIcons''':
 +
**<tt>[biSystemMenu]</tt> - for modal shown dialogs
 +
**<tt>[biSystemMenu,biMinimize,biMaximize]</tt> - for non-modal shown dialogs
  
−
====Button panel====
+
=== General layout ===
−
The button panel should consist at least of the following elements;
+
* On the bottom of the form [[#Button panel|Button panel]] should be placed.
 +
* 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 <tt>Hint</tt> property to explain button action in details.
 +
* The size of resizable dialogs should 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.
  
−
* OK button (or better: a describing text like 'Save' or 'Rename')
+
==== Spacings and sizes ====
−
* Cancel button
+
* Dialogs must be designed to work independently of resolution and font height.
−
* Next button (optional)
+
* Spacing between elements: 6 pixels.
−
* Previous button (optional)
+
* Do not set maximum constraints.
−
* Help button
+
* Do not set minimum height of regular buttons.
 +
* You can set a minimum width of 90 for buttons.
 +
* <tt>AutoSize</tt> property need to be set for buttons, labels, ... 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. Use a TPanel and set the Align and BorderSpacing properties.
  
−
An example is shown below:
+
==== Button panel ====
 +
The button panel should consist at least of the following elements:
  
−
<center>bottom panel.jpg</center>
+
* OK button.
 +
* Cancel button.
 +
* Next button (optional).
 +
* Previous button (optional).
 +
* 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.
 +
 +
== See also ==
 +
 +
* [[High DPI]]
 +
* [[Anchor Sides]]
 +
* [[Autosize / Layout]]

Latest revision as of 08:09, 19 November 2020

│ Deutsch (de) │ English (en) │ français (fr) │ 日本語 (ja) │ русский (ru) │

These guidelines apply to the Lazarus IDE but may be used for other projects as well.

General

All dialogs and windows must not use fixed sizes. Keep in mind that font sizes and translated captions can vary. Use splitters and panels.

All forms and dialogs must work on a screen of 800x600 or higher resolution.

Dialogs (modal forms)

Dialogs are special forms that need the user to make / change some setting before lazarus can continue.

  • Close on Escape (if the key is not used otherwise)
  • Define default button and Return activates it (if the key is not used)
  • If it has scrollable content (e.g. contains a TMemo, TListBox, TTreeView) it should be resizable and size is stored

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.
  • 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 should 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 to work independently of resolution and font height.
  • Spacing between elements: 6 pixels.
  • Do not set maximum constraints.
  • Do not set minimum height of regular buttons.
  • You can set a minimum width of 90 for buttons.
  • AutoSize property need to be set for buttons, labels, ... 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. Use a TPanel and set the Align and BorderSpacing properties.

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.

See also

Retrieved from "http://wiki.freepascal.org/index.php?title=GUI_design_guidelines&oldid=141096"