Difference between revisions of "GUI design guidelines/de"

From Lazarus wiki
Jump to navigationJump to search
 
m
 
(6 intermediate revisions by 4 users not shown)
Line 1: Line 1:
==Dialoge==
+
{{GUI design guidelines}}
 +
<br>
 +
Zurück zu den [[Additional information/de|Zusätzlichen Informationen]].<br>
 +
<br>
 +
== Dialoge ==
 
Dialoge sind spezielle Formulare, die vom Benutzer die Erstellung/Änderung von Einstellungen erfordern, bevor Lazarus fortfahren kann.  
 
Dialoge sind spezielle Formulare, die vom Benutzer die Erstellung/Änderung von Einstellungen erfordern, bevor Lazarus fortfahren kann.  
  
===Dialogeinstellungen===
+
=== Dialogeinstellungen ===
 
Einstellungen, die üblicherweise verwendet werden sollten, sind:
 
Einstellungen, die üblicherweise verwendet werden sollten, sind:
  
Line 9: Line 13:
 
**<tt>bsDialog</tt> - wenn der Dialog einfach ist und eine Größenanpassung nicht benötigt wird (Notiz: Alle Dialoge sollten intern größenveränderbar sein wegen Lokalisierungsproblemen).
 
**<tt>bsDialog</tt> - 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''' : <tt>poScreenCenter</tt>.
 
* '''Position''' : <tt>poScreenCenter</tt>.
* '''FormStyle''' : Verwenden sie nicht <tt>fsStayOnTop</tt>, weil dies ziemlich unerfreulich sein kann unter einigen Windowmanagern.  
+
* '''FormStyle''' : Verwenden sie nicht <tt>fsStayOnTop</tt>, weil dies unter einigen Windowmanagern ziemlich unerfreulich sein kann.  
 
* '''BorderIcons''':  
 
* '''BorderIcons''':  
 
**<tt>[biSystemMenu]</tt> - für modal gezeigte Dialoge
 
**<tt>[biSystemMenu]</tt> - für modal gezeigte Dialoge
 
**<tt>[biSystemMenu,biMinimize,biMaximize]</tt> - für nicht-modal gezeigte Dialoge
 
**<tt>[biSystemMenu,biMinimize,biMaximize]</tt> - für nicht-modal gezeigte Dialoge
  
===Allgemeines Layout===
+
=== Allgemeines Layout ===
 
* Unten auf dem Formular sollte ein [[#Button panel|Button panel]] platziert werden.
 
* Unten auf dem Formular sollte ein [[#Button panel|Button panel]] platziert werden.
* Der Dialog sollte auf einem Bildschirm von 800x600 funktionieren. 640x480 muß nicht unterstützt 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).
 
* 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).
 
* 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 <tt>Hint</tt> Eigenschaft um die Button-Aktion im Detail zu erklären.
+
* Vermeiden sie lange Beschriftungen auf den Buttons. Verwenden sie die <tt>Hint</tt> 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.
 
* 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.
 
* Alle Hints und Captions, die auf einem Formular verwendet werden, sollten als Resourcestring vorliegen, damit eine Lokalisierung erfolgen kann.
  
====Abstände und Größen====
+
==== Abstände und Größen ====
* Dialoge müssen für eine Auflösung von 96 dpi entworfen werden und eine Zeichenhöhe von 8 Punkt/14 Pixel.
+
* Dialoge müssen entworfen werden unabhängig von der Auflösung und der Zeichenhöhe.
 
* Abstand zwischen Elementen: 6 Pixel.
 
* Abstand zwischen Elementen: 6 Pixel.
* Minimale Größe von normalen Buttons: 90x25 Pixel.
+
* Stellen Sie keine maximale Größe für Dialogelemente ein.
* Die <tt>AutoSize</tt> Eigenschaft muß gesetzt werden für Buttons, um lokalisierten Text richtig anzuzeigen, wenn dieser länger als erwartet ist.
+
* Stellen Sie keine Mindesthöhe für normale Buttons ein.
* Alle Buttons in einer Gruppe (inclusive der Buttons die ein Bild enthalten) müssen die selbe Breite und Höhe haben.
+
* Sie können eine minimale Breite von 90 für Buttons einstellen.
 +
* Die <tt>AutoSize</tt> 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====
+
==== Button Panel ====
Der button panel sollte mindestens aus den folgenden Elementen bestehen:
+
Der Button-Panel sollte mindestens aus den folgenden Elementen bestehen:
  
 
* OK Button.
 
* OK Button.
 
* Abbrechen Button.
 
* Abbrechen Button.
* Next button (optional).
+
* Nächster Button (optional).
* Previous button (optional).
+
* Vorheriger Button (optional).
 
* Hilfe Button.
 
* Hilfe Button.
  
===Verankerung===
+
=== Verankerung ===
Um sicherzustellen, daß ein Dialog nach dem größenverändern die Anzeige der Komponenten in einer guten Weise beibehält, wird die 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.
+
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.
 
Hinweis: Benutzen sie den anchor Editor der IDE.
  
===Ausrichtung===
+
=== 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.
+
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====
+
==== BorderSpacing ====
Besonders hilfreich in Kombination mit Align ist die BorderSpacing Eigenschaft. (Also found on the Anchors dialog). Typischerweise wird ein borderspacing von 6 Pixeln um eine Komponente herum verwendet.
+
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.
 +
<br>
 +
<br>
 +
 
 +
[[Category:Tutorials/de]]{{AutoCategory}}

Latest revision as of 09:54, 12 January 2014

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.