GUI design guidelines/de

From Lazarus wiki
Revision as of 08:54, 12 January 2014 by Olaf (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigationJump to search

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

Zurück zu den Zusätzlichen Informationen.

Dialoge

Dialoge sind spezielle Formulare, die vom Benutzer die Erstellung/Änderung von Einstellungen erfordern, bevor Lazarus fortfahren kann.

Dialogeinstellungen

Einstellungen, die üblicherweise verwendet werden sollten, sind:

  • BorderStyle :
    • bsSizeable - wenn der Dialog komplex ist und eine Größenanpassung wirklich benötigt wird.
    • bsDialog - wenn der Dialog einfach ist und eine Größenanpassung nicht benötigt wird (Notiz: Alle Dialoge sollten intern größenveränderbar sein wegen Lokalisierungsproblemen).
  • Position : poScreenCenter.
  • FormStyle : Verwenden sie nicht fsStayOnTop, weil dies unter einigen Windowmanagern ziemlich unerfreulich sein kann.
  • BorderIcons:
    • [biSystemMenu] - für modal gezeigte Dialoge
    • [biSystemMenu,biMinimize,biMaximize] - für nicht-modal gezeigte Dialoge

Allgemeines Layout

  • Unten auf dem Formular sollte ein Button panel platziert werden.
  • Der Dialog sollte auf einem Bildschirm von 800x600 funktionieren. 640x480 muss nicht unterstützt werden.
  • Schließen mit Escape (wenn die Taste nicht anders verwendet wird).
  • Definieren sie einen Vorgabe-Button und Return aktiviert ihn (wenn die Taste nicht verwendet wird).
  • Vermeiden sie lange Beschriftungen auf den Buttons. Verwenden sie die Hint Eigenschaft, um die Button-Aktion im Detail zu erklären.
  • Die Größe von größenveränderbaren Dialogen wird gespeichert und beim nächsten Öffnen wiederhergestellt.
  • Alle Hints und Captions, die auf einem Formular verwendet werden, sollten als Resourcestring vorliegen, damit eine Lokalisierung erfolgen kann.

Abstände und Größen

  • Dialoge müssen entworfen werden unabhängig von der Auflösung und der Zeichenhöhe.
  • Abstand zwischen Elementen: 6 Pixel.
  • Stellen Sie keine maximale Größe für Dialogelemente ein.
  • Stellen Sie keine Mindesthöhe für normale Buttons ein.
  • Sie können eine minimale Breite von 90 für Buttons einstellen.
  • Die AutoSize Eigenschaft muss gesetzt werden für Buttons, Label, ... um lokalisierten Text richtig anzuzeigen, wenn dieser länger als erwartet ist.
  • Alle Buttons in einer Gruppe (inklusive der Buttons, die ein Bild enthalten) müssen die selbe Breite und Höhe haben. Benutzen sie ein TPanel und setzen sie die Eigenschaften Align und BorderSpacing.

Button Panel

Der Button-Panel sollte mindestens aus den folgenden Elementen bestehen:

  • OK Button.
  • Abbrechen Button.
  • Nächster Button (optional).
  • Vorheriger Button (optional).
  • Hilfe Button.

Verankerung

Um sicherzustellen, dass ein Dialog nach dem größenverändern die Anzeige der Komponenten in einer guten Weise beibehält, wird Verankerung benutzt. Jede Komponente hat eine Eigenschaft mit dem Namen Anchors. Mit dieser Eigenschaft können sie die Art und Weise bestimmen, in der eine Komponente an ihrem Vorgänger verankert wird.

Hinweis: Benutzen sie den anchor Editor der IDE.

Ausrichtung

Ein anderer Weg, um Komponenten zu organisieren, ist die Verwendung der Ausrichtung (alignment). Jede Komponente hat eine Eigenschaft Align. Durch Auswahl der passenden Align Position können verschiedene Komponenten richtig positioniert werden.

BorderSpacing

Besonders hilfreich in Kombination mit Align ist die Eigenschaft BorderSpacing. (Ebenfalls im Dialog Anchors). Typischerweise wird ein borderspacing von 6 Pixeln um eine Komponente herum verwendet.