JAVA Look & Feel Design Guidelines

Größe: px

Ab Seite anzeigen:

Download "JAVA Look & Feel Design Guidelines"

Kilian Abel
vor 7 Jahren
Abrufe

1 JAVA Look & Feel Design Guidelines Stefan Diener / Jul 24, 2007 / Page 1

2 Überblick Motivation Abstände Labels Allgemeine Regeln für Dialoge Toolbar & Menüs Shortcuts & Mnemonics Texte im GUI Weitere interessante Themen Stefan Diener / Jul 24, 2007 / Page 2

3 Motivation Einheitliches Look & Feel Wiedererkennung durch Benutzer einfache und fließende Bedienung ermöglichen Ziel: Akzeptanz Corporate Identity Stefan Diener / Jul 24, 2007 / Page 3

4 Abstände (1) Abstände zum Rand 12 Pixel (links + oben) Stefan Diener / Jul 24, 2007 / Page 4

5 Abstände (2) Command Buttons Stefan Diener / Jul 24, 2007 / Page 5

6 Abstände (3) Horizontaler Abstand der GUI-Elemente: 11 Pixel Stefan Diener / Jul 24, 2007 / Page 6

7 Abstände (4) Vertikaler Abstand der GUI-Elemente/Gruppen: 11 Pixel Stefan Diener / Jul 24, 2007 / Page 7

8 Abstände (5) Abstand innerhalb einer Gruppe: 5 Pixel Stefan Diener / Jul 24, 2007 / Page 8

9 Ränder: 12 bzw. 11 Pixel Borders Stefan Diener / Jul 24, 2007 / Page 9

10 Labels Labels links (oder über) dem zugehörigen GUI-Element Text endet mit : Stefan Diener / Jul 24, 2007 / Page 10

11 Allgemeine Regeln für Dialoge Anordnung der GUI-Elemente nach Wichtigkeit in Lese-Richtung zusammengehörige Elemente in gleiche Spalte Command Buttons: alle gleiche Größe OK / Cancel Apply / Close Titled Borders nicht verschachteln Stefan Diener / Jul 24, 2007 / Page 11

12 Beispiel Preferences Dialog Stefan Diener / Jul 24, 2007 / Page 12

13 Kleinigkeiten Fokus beim Öffnen des Dialogs setzen Selektion des Textes im JTextField bei Fokus-Übernahme naheliegende Tab Traversal Order Navigation mit Maus Tab-Taste, d.h. Tab und Shift-Tab Mnemonics Schließen von Dialogen mit Enter/Return oder Escape Stefan Diener / Jul 24, 2007 / Page 13

14 Toolbar Abstand der Buttons: 2 Pixel Separator: 11 Pixel Stefan Diener / Jul 24, 2007 / Page 14

15 Menüs Menü-Titel: möglichst nur 1 Wort Menüs nur im Hauptfenster, nicht in JInternalFrames... in Menü-Einträgen, z.b. Save As... nur wenn Kommando weitere Eingaben benötigt Dialog wird geöffnet nicht bei JInternalFrames und Utility -Dialogen, z.b. Preferences-Dialog Hinweis: gleiche Regeln für Buttons Stefan Diener / Jul 24, 2007 / Page 15

16 Shortcuts & Mnemonics Shortcuts: Plattformunabhängigkeit beachten Mnemonics: gehören in Resource Bundles Stefan Diener / Jul 24, 2007 / Page 16

17 Übliche Shortcuts (1) Ctrl-A: Select All Ctrl-B: Bold Ctrl-C: Copy Ctrl-E: Align Center Ctrl-F: Find Ctrl-G: Find Again Ctrl-H: Replace Ctrl-I: Italic Ctrl-L: Align Left Ctrl-N: New Ctrl-O: Open Ctrl-P: Print Ctrl-R: Align Right Ctrl-S: Save Ctrl-U: Underline Ctrl-V: Paste Stefan Diener / Jul 24, 2007 / Page 17

18 Übliche Shortcuts (2) Ctrl-W: Close Ctrl-X: Cut Ctrl-Y: Redo Ctrl-Z: Undo Delete: Delete F1: Help F5: Refresh Shift-F1: Contextual Help Vorsicht: oft definiert das Betriebssystem eigene Shortcuts Stefan Diener / Jul 24, 2007 / Page 18

19 Mnemonics Mnemonics für alle Menüs, Menü-Einträge und Dialog- Elemente keine Mnemonics für Default-Button und Cancel-Button Ersatz: Enter-/Return- und Escape-Taste Stefan Diener / Jul 24, 2007 / Page 19

20 File Übliche Mnemonics (1) New, Open, Close, Save, Save As, Page Setup, Print, Exit Edit Undo, Redo, Cut, Copy, Paste, Delete, Find, Find Again, Select All Format Font, Style, Size, Bold, Italic, Underline, Align Left, Align Center, Align Right Stefan Diener / Jul 24, 2007 / Page 20

21 View Übliche Mnemonics (2) Large Icons, Small Icons, List, Details, Sort By, Filter, Zoom In, Zoom Out, Refresh Help Contents, Tutorial, Index, Search, About Application Stefan Diener / Jul 24, 2007 / Page 21

22 Headline Capitalization Namen, Titel Labels kurzer Text Sentence Capitalization längerer Text Texte im GUI Stefan Diener / Jul 24, 2007 / Page 22

23 Headline Capitalization, englisch (1) alle Wörter groß schreiben außer Artikel a, an, the außer Konjuktionen and, or, but, so, yet, nor,... außer Präpositionen mit weniger als 4 Buchstaben in, at, to,... erstes und letztes Wort immer groß geschrieben Stefan Diener / Jul 24, 2007 / Page 23

24 Headline Capitalization, englisch (2) Beispiele: Checkbox-Text: Automatic Save Every Five Minutes Label: New Contribution To: Menü-Eintrag: Save As... Radio-Button: Start at Top Tooltip: Cut Selection Stefan Diener / Jul 24, 2007 / Page 24

25 Sentence Capitalization, englisch normale Groß- und Kleinschreibung Beispiele: Dialog-Text: The document you are closing has unsaved changes. Fehlermeldungen: The printer is out of paper. Status-Label: Operation is 75% complete. Tooltip: Save all changes and close the dialog. Stefan Diener / Jul 24, 2007 / Page 25

26 Weitere interessante Themen (1) Auswahl von Farben Erstellung von Icons Animation, z.b. Progress Bars verschiedene Mauszeiger Kontext-Menüs Drag & Drop Keyboard Focus Passwort-Felder Stefan Diener / Jul 24, 2007 / Page 26

27 Weitere interessante Themen (2) Tabellen, Listen, Bäume Text-Komponenten (JTextArea, JEditorPane) JTabbedPane, JSplitPane Wizards Corporate Identity Graphics Repository Internationalisierung Antwortverhalten ( Responding to user requests ) Stefan Diener / Jul 24, 2007 / Page 27

Ähnliche Dokumente

Eclipse User Interface Guidelines

Eclipse User Interface Guidelines SS 2009 Softwarequalität 06.05.2009 C. M. Bopda, S. Vaupel {kaymic/vaupel84}@mathematik.uni-marburg.de Motivation (Problem) Motivation (Problem) Eclipse is a universal tool platform - an open, extensible