GUI design guidelines/fr

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

General

Toutes les boîtes de dialogue et fenêtres ne doivent pas se limiter à des tailles fixes. Gardez à l'esprit que la taille des polices et les légendes (captions) traduites peuvent varier. Utilisez des diviseurs (splitters) et des panneaux (panels).

Toutes les fiches et les boîte de dialogue doivent marcher sur un écran de 800x600 ou une résolution plus élévée.

Boîtes de dialogue (fiche modale)

Elles sont des fiches particulières qui demandent à l'utilisateur de faire des réglages / modifier des données avant que l'application ne continue.

• Elle se ferme sur Echappement (Escape) (si cette touche n'est pas prévue pour faire autre chose).
• Elle définit un bouton par défaut et la touche Retour (Return) l'active (si la touche n'est pas utilisée autrement)
• Si elle a du contenu défilable (p.ex. en contenant un TMemo, une TListBox, une TreeView), elle devrait être redimensionnable et la taille devrait être enregistrée.

Réglages de boîte de dialogue

Les réglages qui devraient être appliqués sont en général :

• BorderStyle :
  • bsSizeable - si la boîte de dialogue est complexe et que le redimensionnement est vraiment nécessaire.
  • bsDialog - si la boîte de dialogue est simple et que le redimensionnement ne s'impose pas (Note : toutes les boîtes de dialogue devrait rester redimensionnable en interne pour des questions de localisation).
• Position : poScreenCenter.
• FormStyle : N'utilisez pas fsStayOnTop, car cela peut être assez ennuyeux sous certains gestionnaires de fenêtres.
• BorderIcons:
  • [biSystemMenu] - pour les boîtes de dialogue montrée modalement.
  • [biSystemMenu,biMinimize,biMaximize] - pour les boîtes de dialogue non modale.

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.