JGoodies Karsten Lentzsch EFFEKTIV GESTALTEN MIT SWING

Transkript

1 JGoodies Karsten Lentzsch EFFEKTIV GESTALTEN MIT SWING

2 JGoodies Biete Swing-Bibliotheken Gestalte Oberflächen Berate zu Desktop und Swing

3 It's easy to program Swing

4 It's easy to program Swing badly

5

6 Ziele Lernen, wie man eine Swing-GUI schnell und sicher verbessern kann

7

8

9

10

11 Einordnung

12 Gliederung Einleitung Verbote Gebote Gallerie

13 Gliederung Einleitung Verbote Gebote Gallerie

14 Probleme Hässliche Oberfläche Schwer zu lernen Tutorials, Artikel, Bücher zeigen schlechte Gestaltung Schwer zu implementieren Wenige gute Quelltextbeispiele

15 Ausrichtung Normale Desktop-Projekte: Kein Gestaltungstraining Kaum Zeit für UI Kein UI-Budget Kunde zahlt nicht für gute Gestaltung

16 Fokus Gute Gestaltung, die jeder schafft Dinge, die man rasch umsetzt Formularzentrierte Gestaltung Regeln, keine Kunst Mithalten mit nativen GUIs

17 Prinzipien Kleiner Fehler, großer Schaden Kleinigkeiten summieren sich Richte Aufmerksamkeit auf Inhalte, nicht auf die Gestaltung

18 Gliederung Einleitung Verbote Gebote Gallerie

19 Lass, was Du nicht kannst!

20 Farben Füge dem Desktop keine Farben zu Keine Farben zum Swing-L&F Meide bunte Farben

21

22

23

24

25

26 Schriften Nutze Schriften des Desktops Native Schriftgröße Natives Gewicht (normal vs. fett) Natives Rasterverfahren (pixel, geglättet, Subpixel-Glättung)

27

28

29 Icons Sollen zum Desktop passen: Anmutung, Größe, Farbe, Schema Konsistent Entferne fragwürdige Icons

30

31

32

33 Gliederung Einleitung Verbote Gebote Gallerie

34 Reduziere!

35 Schwulst und Bläh Weg mit visuellen Störenfrieden Entferne unnötige Rahmen Lieber Trenner als (titled) Rahmen Schreibe kurz und bündig

36

37

38 Hilft oder stört es?

39 Design-Essenz Prüfe Pixel, Linien, Rahmen, Wörter Entferne unnötige Komponenten, Panel, Dialoge

40

41

42

43

44

45 Kritische Komponenten Geschachtelte Rahmen JSplitPane JScrollPane BevelBorder EtchedBorder TitledBorder

46

47

48 TitledBorder Hat häufig 3 unnötige Linien Schwer auszurichten Schwer, seinen Inhalt auszurichten Lieber Separator als TitledBorder Schachtel keine TitledBorder

49

50

51

52

53 Leerraum Ist keine Verschwendung Wichtiges Gestaltungsmittel Isoliere und trenne Abschnitte Umgib Komponenten mit Weißraum Lieber Leerraum als Trenner

54

55

56

57

58 Ausrichten Richte Komponenten-bounds aus Gitter oder Gittersystem? Schwer auszurichten: Entlang der Schriftgrundlinie Bounds und an der Grundlinie

59

60

61

62

63 Mikro-Design-Pfusch Inkonsistente Komponentengrößen Inkonsistente Komponenten-Insets Grundlinie springt oder die Bounds Falsche Pseudo-3D-Effekte

64 .Net 2.0

65 Java, Grundlinie mit Matisse gerichtet

66

67

68 Balance Optische Axen, optisches Gewicht Suche das optische Zentrum Einzelne Views evtl. zentrieren Erwäge Symmetrie

69

70

71

72

73 Konsistenz Größen, Reihenfolgen, Abstände Dialoge, Panels, Button-Leisten L&F-Mikrogestaltung Icons Schriften

74

75

76

77

78

79

80 Meta-Design Ziel: schnell konsistent gestalten Grob: Dialog-Gestaltung Fein: Größen, Abstände,... Siehe "Effizient gestalten mit Swing"

81 Höhe zu Breite Stabile Verhältnisse: 5:3 16:9 4:3 1:1 Verwende wenige Verhältnisse

82 Labil Stabil

83 Auflösung Skaliere mit Schrift & Auflösung (dpi) Gestaltung kann sonst zerbrechen

84 Flexibilität So starr wie möglich, so flexibel wie nötig Reihenfolge: statisch splitted mehrfach gesplitted Docking freie Fenster

85 Kontrast Gleiche Kontraste an Füge Weißraum zu wo nötig Meide große schwarze Bereiche Nutze Weiß sparsam (sieht frisch aus, ermüdet eher) Kenne den Blinzeltest

86 Polieren Bisher haben wir nur reduziert Nun füge vorsichtig zu Farbe Typografie Bilder Animation

87

88

89

90 Mächtiges Toolkit Fortgeschrittene Grafikoperationen Teilweises Durchscheinen Glass pane Austauschbarer Look&Feel Ermöglicht viele Abstraktionen

91

92

93 Gliederung Einleitung Verbote Gebote Gallerie

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118 Zusammenfassung Lass, was Du nicht kannst! Reduziere!

119 Java-Bibliotheken L&Fs: Substance, JTatoo JGoodies Looks - looks.dev.java.net JGoodies Forms - forms.dev.java.net Sun's Swinglabs/Swingx

120 Icons Tango icons - Eclipse icons -

121 Style Guides Microsoft User Experience Guide (UX Guide) Mac Aqua Human Interface Guidelines (HIG)

122 Bücher "Designing Visual Interfaces" Kevin Mullet & Darrel Sano "GUI Bloopers" Jeff Johnson

123 JGoodies-Artikel First Aid for Swing UIs Desktop Patterns & Data Binding Layout und Panel-Bau in Swing JGoodies Forms Swing Data Validation

124 FRAGEN UND ANTWORTEN

125 JGoodies Karsten Lentzsch EFFEKTIV GESTALTEN MIT SWING