Difference between revisions of "GUI design guidelines/fr"

From Free Pascal wiki
Jump to navigationJump to search
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{GUI design guidelines}}
 
{{GUI design guidelines}}
  
= General =
+
= Général =
 
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 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'').
  
Line 26: Line 26:
 
**<tt>[biSystemMenu,biMinimize,biMaximize]</tt> - pour les boîtes de dialogue non modales.
 
**<tt>[biSystemMenu,biMinimize,biMaximize]</tt> - pour les boîtes de dialogue non modales.
  
== General layout ==
+
== Dispositions générales ==
* On the bottom of the form [[#Button panel|Button panel]] should be placed.
+
* Dans le bas de la fiche, un [[#Panneau de boutons|Panneau de boutons]] devrait être placé.
* The dialog should work on a screen of 800x600. 640x480 is not needed to support.
+
* La boîte de dialogue devrait s'afficher dans un écran de 800x600. Il n'est plus nécessaire de soutenir une résolution de 640x480.
* Close on Escape (if key not used otherwise).
+
* Fermeture sur Echappement (''Escape'') si la touche n'est pas utilisée pour autre chose
* Define default button and Return activates it (if key not used).
+
* Définir un bouton par défaut qui est activé par Retour (''Return'') si la touche n'est pas utilisée pour autre chose.
* Avoid using long captions on buttons. Use <tt>Hint</tt> property to explain button action in details.
+
* Eviter d'utiliser de longues légendes (''captions'') sur les boutons. Utiliser la propriété <tt>Hint</tt> pour expliquer l'action du bouton en détail.
* The size of resizable dialogs whould be saved and restored next time the dialog will be opened.
+
* La taille d'une fenêtre redimensionnable devrait être enregistrée et restaurée la prochaine fois que la boîte de dialogue sera ouverte.
* All hints and captions used on a form should be as resourcestring, so localization can be applied.
+
* Tous les conseils (''Hint'') et les légendes de la fiche devraient être sous la forme de chaînes de ressource (''resourcestring''), ainsi la localisation peut être mise en oeuvre.
  
=== Spacings and sizes ===
+
=== Espacements et tailles ===
* Dialogs must be designed for 96 dpi resolution and 8 points/14 pixels font height.
+
* Les boîtes de dialogue doivent être conçues pour une résolution de 96 dpi et des fontes de 8 points / 14 pixel de haut.
* Spacing between elements: 6 pixels.
+
* Espacement entre les éléments : 6 pixels.
* Minimum size of regular buttons: 90x25 pixels.
+
* Taille minimale des boutons normaux : 90x25 pixels.
* <tt>AutoSize</tt> property need to be set for buttons to properly display localized text if it is longer than expected.
+
* La propriété <tt>AutoSize</tt> nécessite d'être définie pour les boutons, les étiquettes (''labels'') afin qu'ils affichent proprement le texte localisé s'il plus long qu'attendu.
* All buttons in a group (including buttons that contain glyphs) must have the same width and height.
+
* Tous les boutons dans un groupe (y compris les boutons qui contiennent des glyphes) doivent partager les mêmes largeur et hauteur. Utilisez un TPanel et définissez les propriétés Align and BorderSpacing.
  
=== Button panel ===
+
=== Panneau de boutons ===
The button panel should consist at least of the following elements:
+
Le panneau de boutons devrait au moins contenir les éléments suivants :
 +
* bouton OK.
 +
* bouton Annuler.
 +
* Bouton Suivant (optionel).
 +
* Bouton Précédent (optionel).
 +
* Bouton d'appel de l'aide.
  
* OK button.
+
== Ancrage ==
* Cancel button.
+
Pour garantir que la boîte de dailogue affiche ses composants d'une manière consistante, l'ancrage doit être utilisé. Chaque composant dispose d'un propriété appelée Anchors. Avec cette propriété, vous pouvez déterminer la façon dont un composant est ancré à son parent (toujours en bas ou toujours dans le coin supérieur gauche...).
* Next button (optional).
 
* Previous button (optional).
 
* Help button.
 
  
== Anchoring ==
+
Conseil : Utiliser l'éditeur d'ancre de l'EDI.
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.
+
== Alignement ==
 +
Une autre façon d'organiser les copmposants est d'utiliser l'alignement. Chaque composant a une propriété Align. en choisissant la propriété Align convenablement, plusieurs composants peuvent être positionné correctement.
  
== Aligning ==
+
=== Espacement de bordure ===
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.
+
La propriété BorderSpacing est particulièrement utile en combinaison avec Align. Aussi trouvée dans la boîte de dialogue d'ancrage. Un espacement de bordure de 6 pixels est typiquement employé.
 
 
=== 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.
 

Latest revision as of 07:27, 23 February 2017

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

Général

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 redimensionnables 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ées de façon modale.
    • [biSystemMenu,biMinimize,biMaximize] - pour les boîtes de dialogue non modales.

Dispositions générales

  • Dans le bas de la fiche, un Panneau de boutons devrait être placé.
  • La boîte de dialogue devrait s'afficher dans un écran de 800x600. Il n'est plus nécessaire de soutenir une résolution de 640x480.
  • Fermeture sur Echappement (Escape) si la touche n'est pas utilisée pour autre chose
  • Définir un bouton par défaut qui est activé par Retour (Return) si la touche n'est pas utilisée pour autre chose.
  • Eviter d'utiliser de longues légendes (captions) sur les boutons. Utiliser la propriété Hint pour expliquer l'action du bouton en détail.
  • La taille d'une fenêtre redimensionnable devrait être enregistrée et restaurée la prochaine fois que la boîte de dialogue sera ouverte.
  • Tous les conseils (Hint) et les légendes de la fiche devraient être sous la forme de chaînes de ressource (resourcestring), ainsi la localisation peut être mise en oeuvre.

Espacements et tailles

  • Les boîtes de dialogue doivent être conçues pour une résolution de 96 dpi et des fontes de 8 points / 14 pixel de haut.
  • Espacement entre les éléments : 6 pixels.
  • Taille minimale des boutons normaux : 90x25 pixels.
  • La propriété AutoSize nécessite d'être définie pour les boutons, les étiquettes (labels) afin qu'ils affichent proprement le texte localisé s'il plus long qu'attendu.
  • Tous les boutons dans un groupe (y compris les boutons qui contiennent des glyphes) doivent partager les mêmes largeur et hauteur. Utilisez un TPanel et définissez les propriétés Align and BorderSpacing.

Panneau de boutons

Le panneau de boutons devrait au moins contenir les éléments suivants :

  • bouton OK.
  • bouton Annuler.
  • Bouton Suivant (optionel).
  • Bouton Précédent (optionel).
  • Bouton d'appel de l'aide.

Ancrage

Pour garantir que la boîte de dailogue affiche ses composants d'une manière consistante, l'ancrage doit être utilisé. Chaque composant dispose d'un propriété appelée Anchors. Avec cette propriété, vous pouvez déterminer la façon dont un composant est ancré à son parent (toujours en bas ou toujours dans le coin supérieur gauche...).

Conseil : Utiliser l'éditeur d'ancre de l'EDI.

Alignement

Une autre façon d'organiser les copmposants est d'utiliser l'alignement. Chaque composant a une propriété Align. en choisissant la propriété Align convenablement, plusieurs composants peuvent être positionné correctement.

Espacement de bordure

La propriété BorderSpacing est particulièrement utile en combinaison avec Align. Aussi trouvée dans la boîte de dialogue d'ancrage. Un espacement de bordure de 6 pixels est typiquement employé.