KSB-Mobile-App-Styleguide. Online-Styleguide

Transkript

1 KSB-Mobile-App-Styleguide Online-Styleguide Stand November April 05 03

2 KSB-Mobile-App-Styleguide Einführung KSB erstellt mobile Applikationen für das iphone, das ipad sowie für Smartphones und Tablets, die mit dem Betriebssystem Android ausgestattet sind. Um die klare und eindeutige Wiedererkennbarkeit der Marke KSB auf mobilen Applikationen sicherzustellen, gibt dieser Styleguide klare Vorgaben. Mit diesen Vorgaben stellen wir die formale Konsistenz innerhalb der verschiedenen KSB-Apps sicher und adaptieren die grundlegenden Festlegungen des KSB-Erscheinungsbildes für die mobilen Dienste.

3 KSB-Mobile-App-Styleguide Inhaltsverzeichnis 3. Design-Grundlagen. Besonderheiten des mobilen Nutzerverhaltens...5. Prinzipien der unterschiedlichen Betriebssysteme Schriften Farben Logo Sprachauswahl Bilder App-Icon....9 Launch Screen.... ios-smartphone. Interaktionselemente Navigation mit Tab-Bar Navigation mit Off-Canvas Navigation Buttons & Textlinks Teaser-Buttons Listen Eingabefelder Einstellungen Weitere interaktive Elemente Schriften Tabellen Beispieldesigns Android-Smartphone 3. Interaktionselemente Navigation Buttons & Textlinks Teaser-Buttons Listen Eingabefelder Einstellungen Tabs Schriften Tabellen Beispieldesigns Tablet 4. Allgemeines Split-View Displayanpassung 5. Hoch- und Querformat Anpassung an andere Displaygrößen... 48

4 KSB-Mobile-App-Styleguide 4. Design-Grundlagen

5 KSB-Mobile-App-Styleguide. Design-Grundlagen 5. Besonderheiten des mobilen Nutzerverhaltens Das Konzipieren und Gestalten von digitalen Produkten ist abhängig vom Endgerät des Nutzers und vom Nutzerszenario. Die Nutzung von Smartphone-Apps stellt andere Anforderungen an die Gestaltung als die Nutzung von z. B. Websites. Smartphones werden meist unterwegs genutzt, wo der Nutzer sich schneller von seiner Umgebung ablenken lässt. Deshalb sollten in einer App nur die wesentlichen Inhalte dargestellt werden. Achten Sie auf flache Hierarchien und wenige Navigationsebenen, um den Aufbau der App übersichtlich zu halten. Interaktionselemente müssen größer als im Web dargestellt werden, damit sie mit dem Finger anklickbar sind, was wiederum mehr Platz benötigt. Nutzen Sie die Stärken der mobilen Geräte, wie ortsgebundene Dienste, GPS und gerätespezifische Sensoren, um hilfreiche Erlebnisse zu erzeugen. Vermeiden Sie aber auch die Schwachstellen, z. B. das Ausfüllen von langen Formularen. Beachten Sie weiterhin die Rahmenbedingungen und die Umgebung, in der sich der Nutzer befindet und bestimmte Aufgaben erledigen möchte. Wie sind die Lichtverhältnisse? Z. B. bieten viele Navigations-Apps dem Nutzer im Tageslicht eine helle Version und in der Nacht eine dunklere, die weniger blendet.

6 KSB-Mobile-App-Styleguide. Design-Grundlagen 6. Prinzipien der unterschiedlichen Betriebssysteme Der KSB-App-Styleguide legt das Aussehen von KSB-Apps für die zwei verbreitetsten Betriebssysteme Apple ios und Google Android fest. Jedes dieser Betriebssysteme hat eine eigene Designsprache und eigene Navigationsprinzipien. Diese bilden die Grundlagen für das Gestalten einer KSB-App. Damit KSB-Apps auf jedem dieser beiden Betriebssysteme einheitlich aussehen und sich einfach bedienen lassen, müssen beim Entwickeln einer KSB-App die Navigationsprinzipien der beiden Betriebssysteme beachtet werden. Die Betriebssysteme ios und Google Android werden in regelmäßigen Zeitabständen aktualisiert. Um den Aufwand für das Anpassen der KSB-Apps an diese Aktualisierungen möglichst gering zu halten, sollten bei der Gestaltung von KSB-Apps die Standard-Elemente der jeweiligen Betriebssysteme benutzt werden. Apple ios Aktuelle Vorgaben des Betriebssystems Apple ios können im Internet eingesehen werden: (Stand: ) Alle Größenangaben werden in diesem Styleguide in non-retina Pixel angegeben Hier entsprechen px gleich pt. Alle Designs wurden für das iphone 6 (334 x 750 px) und ios 8 gestaltet. Alle Fotos und Bilder müssen Format hinterlegt werden, damit sie nicht unscharf dargestellt werden. Google Android Aktuelle Vorgaben von Androids Betriebssystemversion 5 Lollipop (mit Material Design) können im Internet eingesehen werden: (Stand: ) Alle Größenangaben werden in diesem Styleguide in dp angegeben. Alle Schriftgrößen werden in sp angegeben. Alle Designs wurden in MDPI angelegt (360 x 640 px). MDPI gilt als baseline, mit der auch die offiziellen Android-Guidelines arbeiten. Von MDPI aus ist es leichter, auf größere Designs hochzurechnen als anders herum. MDPI stellt ein Design in 00% dar, und ist das Equivalent zu 00% bei Apple ios.

7 KSB-Mobile-App-Styleguide. Design-Grundlagen 7.3 Schriften Grundsätzlich verwenden KSB-Applikationen die voreingestellten Systemschriften des jeweiligen Betriebssystems. Weitere Angaben zu den Schriften finden Sie in den jeweiligen Kapiteln zu ios-smartphone und Android-Smartphone. Texte werden immer linksbündig im Flattersatz gesetzt, nie im Blocksatz. Sie werden - mit Ausnahme der Texte in Buttons - auch nie im Mittelachsensatz gesetzt. Alle Texte werden in gemischter Schreibweise gesetzt (außer Buttons bei Android). Die einheitliche Schreibweise von immer wiederkehrenden Textelementen wie Telefonnummern, - Adressen oder Internetadressen ist im CD-Kapitel Schreibweisen festgelegt. Weiterführende Informationen zu KSB-Schriften:

8 KSB-Mobile-App-Styleguide. Design-Grundlagen 8.4 Farben Das KSB-Blau als wichtigste Farbe einer KSB-App wird für Buttons, Textlinks und interaktive Elemente verwendet. Auf diese Weise werden ein hoher Wiedererkennungswert und ein stringentes Erscheinungsbild mit dem restlichen KSB-Auftritt erreicht. In der Akzentfarbe Orange werden die sogenannten Call-to-Action -Buttons dargestellt. Fließtexte erscheinen in Schwarz, Titel und Überschriften in einem dunklen Grauton. Primärfarben Akzentfarbe KSB-Blau Weiß Orange Rot # RGB 5/0/53 #FFFFF RGB 55/55/55 #FF57F RGB 55/87/3 #de0c RGB //33 Buttons Textlinks Interaktive Elemente Listen Tabellen Bilderhintergrund Eingabefelder (ios) Hinweise Hervorhebungen CTA-Buttons Fehlermeldungen Warnungen Sekundärfarben Schwarz Grau Mittelgrau Hellgrau # RGB 0/0/0 # RGB 85/85/85 #CCC RGB 94/94/94 #FFF RGB 4/4/4 Fließtext Navigation Bar Titel Tab Bar Titel Titel Überschriften Inaktive Buttons Hintergrund der Textebene

9 KSB-Mobile-App-Styleguide. Design-Grundlagen 9.5 Logo Das KSB-Logo erscheint auf dem App-Icon, dem Launch Screen und auf der Startseite jeder KSB-Applikation. Falls Platz vorhanden ist, kann das KSB-Logo optional auf den Unterseiten in der Navigation Bar (bei ios) oder in der App Bar (bei Android) platziert werden. Dies kann aber dazu führen, dass Richtlinien des jeweiligen Betriebssystems nicht eingehalten werden und die App beispielsweise vom Apple App Store abgelehnt wird. Bei der Neu-Konzeption einer KSB-App gilt es daher abzuwägen, ob das KSB-Logo auf den Unterseiten erscheinen soll. Falls ja, muss festgelegt werden, an welcher Stelle es erscheint. App-Icon Launch Screen Startseite

10 KSB-Mobile-App-Styleguide. Design-Grundlagen 0.6 Sprachauswahl Falls eine KSB-App mehrere Sprachen anbietet, wird die App automatisch in der vom Nutzer eingestellten Sprache des Betriebssystems angezeigt. Es ist zudem möglich, im Apple App Store oder Google Play Store eine App auf ein bestimmtes Land zu beschränken. Wenn die Internationalität der App oder die Sprachauswahl selbst sichtbar gemacht werden soll, kann der Wechsel der Sprache über das Menü (z. B. in Einstellungen) dargestellt werden. Bei der Konzeption einer neuen KSB-App muss der verantwortliche KSB-Fachbereich den Umgang mit Sprachversionen entsprechend festlegen..7 Bilder Alle in einer KSB-App verwendeten Bilder entsprechen dem KSB-Fotostil, siehe auch das KSB-Manual zum Fotostil. Weiterführende Informationen zum KSB-Fotostil: Nicht erlaubt! Bildgröße Bilder dürfen in einer KSB-App nicht zu klein dargestellt werden. Sie sollten idealerweise über die volle Displaybreite gehen. Kleine Bilder sind nur als Vorschaubilder in Tabellen und Listen erlaubt. Anordnung Texte werden nicht mit Bildern kombiniert. Das Bild muss in der vollen Breite über oder unter dem Text dargestellt werden. Für die korrekte Darstellung siehe..8 Weitere Interaktionselemente.

11 KSB-Mobile-App-Styleguide. Design-Grundlagen.8 App-Icon Die Marke KSB wird in jedem App-Icon klar kommuniziert. Das App-Icon enthält das Bild des Launch Screens und das KSB-Logo. Im App-Icon selbst erscheint kein Text. Der Display-Name ist die Unterzeile unter dem App-Icon auf dem Home Screen. Aufgrund der Zeichenbegrenzung enthält der Display-Name generell nicht KSB. App-Icons für ios stehen als PSD-Dateien zum Download zur Verfügung. ios App-Icon ios Home Screen mit KSB-App-Icons 5 x 5 px 0 px 43% 30 x 33 px Hinweis: Um eine vollständige Anzeige des Display-Namens auf dem Home Screen zu gewährleisten, sollte dieser maximal etwa Zeichen enthalten. Längere Namen werden danach ausgepunktet. Android Product Icon Android Home Screen mit KSB Product Icon 400 x 400 dp 43% 36 x 04 dp Hinweis: Die Länge des Display-Namens ist abhängig vom jeweiligen Gerät. Nach einer Maximallänge wird der Name ausgepunktet.

12 KSB-Mobile-App-Styleguide. Design-Grundlagen.9 Launch Screen Der Launch Screen erscheint, nachdem der Nutzer die App startet und bleibt solange sichtbar, bis sich diese vollständig geladen hat. Die Ladezeit einer App kann je nach Umfang der Anwendung unterschiedlich lang sein. Nach Ende des Ladevorgangs erscheint an seiner Stelle die Startseite der App. Feste Elemente des Launch Screens sind das KSB-Logo, der KSB-Markenclaim, ein großes Bild mit der Welle und der Titel der App. Das Bild kann je nach Funktion und Inhalt der App eine Produktaufnahme oder ein anderes passendes Motiv sein, siehe auch das KSB-Manual zum Fotostil. Das Bild, welches auf dem Launch Screen erscheint, wird auch für das App-Icon eingesetzt (Siehe Seite ). Launch Screens für Apple ios stehen als PSD-Dateien zum Download zur Verfügung. Weiterführende Definitionen und Vorgaben für ios Launch Screens: ios-smartphone Android-Smartphone 30 px 30 px 0 dp 0 dp 50 px = /3 /3 px 45 px /3 /3 dp 45 dp 33% 50 px 37% 7 x 7 dp 7 x 3 dp 7 x 7 px 7 x 3 px dp 7 px Überschrift Helvetica Neue Medium 35 px Zeilenabstand 44 px Grau, RGB 85/85/85 Überschrift Roboto Medium 34 sp Zeilenabstand 44 sp Grau, #555555

13 KSB-Mobile-App-Styleguide. Design-Grundlagen 3 Android Tablet Überschrift 0: Roboto Medium 56 sp, Zeilenabstand 64 sp, Grau, # dp 40 dp /3 /3 ca. 6% px ca. 0% 94 x 30 dp ca. 40% 58 x 70 dp 30 dp ios Tablet Überschrift 0: Helvetica Neue Medium 50 px, Zeilenabstand 60 px, Grau, # px 40 px ca. 6% 94 x 30 px /3 ca. 34% 30 px px /3 ca. 0% 58 x 70 px

14 KSB-Mobile-App-Styleguide 4. ios-smartphone

15 KSB-Mobile-App-Styleguide. ios-smartphone 5. Interaktionselemente Für Interaktionen in einer KSB-App können u.a. unterschiedliche Buttons, Text-Links sowie das ios-standardelement Segmented Controls verwendet werden... Navigation mit Tab Bar Die Darstellung von Navigationselementen erfolgt entsprechend dem ios-standard. Die untere Navigationsleiste Tab Bar zeigt maximal fünf Menüpunkte an. Sie wird verwendet, wenn der Nutzer schnell zwischen mehreren Punkten navigieren möchte. Der ausgewählte Menüpunkt der Tab Bar ist blau hinterlegt. Im oberen Bereich wird mit der Navigation Bar navigiert. Auf der Startseite befindet sich das KSB-Logo mittig in der Navigation Bar. Auf den Unterseiten steht dort mittig der Titel der jeweiligen Seite, um dem Nutzer eine Orientierung zu geben, wo er sich befindet. Die Tab Bar erscheint immer in Kombination mit der Navigation Bar. Weiterführende Definitionen und Vorgaben für Navigationsleisten: Nutzung von Standard-Icons: Startseite mit oberer Navigation Bar und unterer Tab Bar 64 x 8 px Status Bar = 0 px Navigation Bar = 44 px Unterseite mit dem Seitentitel in der Navigation Bar 3 Tab Bar ca. 5 x 5 px Ausgewählter Menüpunkt der Tab Bar Bei Icons wird auf die Standard-iOS-Sammlung zurückgegriffen. Werden eigene Icons gestaltet, müssen diese sich formal an den bestehenden ios-icons orientieren (u.a. Strichstärke, Eckenrundungen). 3 Der Zurück-Button erscheint in der Navigation Bar links. Er führt zur letzten Seite, zum Menüüberpunkt oder zur Startseite. Die Toolbar erscheint optional rechts in der Navigation Bar. Sie enthält weitere Funktionen einer Seite wie z. B. Suchen, Teilen, Merken, Bearbeiten.

16 KSB-Mobile-App-Styleguide. ios-smartphone 6.. Navigation mit Off-Canvas Navigation Das Off-Canvas-Menü ist sinnvoll für eine Navigation mit mehr als fünf Menüpunkten, die nicht immer sichtbar sein müssen. Das Menü ist nur über die Startseite zugänglich. Der aktive Menüpunkt wird mit einer blauen Linie am linken Rand hervorgehoben. Auf allen anderen Unterseiten ist statt des Menü-Icons ein Zurück-Button platziert. Startseite mit Off-Canvas-Menü in der Navigation Bar Off-Canvas-Menü offen 60 px Nachrichtensymbol Wird z. B. für neue Mitteilungen in der Inbox oder wichtige Meldungen verwendet Textlink Helvetica Neue Regular 7 px KSB-Blau, RGB 5/0/53

17 KSB-Mobile-App-Styleguide. ios-smartphone 7..3 Buttons und Textlinks Standard-Buttons werden in KSB-Blau dargestellt. Call-to-Action-Buttons lösen eine Aktion aus (z. B. Bestellen, Anmelden, Herunterladen, Kaufen). Diese Buttons werden in Orange dargestellt und sollten sparsam eingesetzt werden. Ein Button kann inaktiv bei z.b. nicht ausgefüllten Formularen, nicht ausgewählten Feldern oder bei einem nicht abgeschlossenen Prozess sein. Bei größeren Displays passen sich die Buttons nur in der Breite an, die Höhe bleibt gleich. Klickbare Texte (Textlinks) werden in KSB-Blau dargestellt. Standard-Buttons 44 px Button Button: KSB-Blau, RGB 5/0/53 Text: Weiß Button gedrückt Button: 30% Schwarz Text: Weiß 3 3 Button inaktiv Button: Mittelgrau, RGB 94/94/94 Text: Grau, RGB 85/85/85 Call-to-Action-Buttons 4 4 Button Button: Orange, RGB 55/87/3 Text: Weiß 5 5 Button gedrückt Button: 30% Schwarz Text: Weiß 3 Textlinks Textlinks Text: Helvetica Neue Regular 7 px KSB-Blau, RGB 5/0/53 Textlinks gedrückt 30% Schwarz

18 KSB-Mobile-App-Styleguide. ios-smartphone 8..4 Teaser-Buttons Die Teaser-Buttons verweisen auf eine untergeordnete bzw. weiterführende Seite. Auf der Startseite kann ein Teaser mit einem Hintergrundfoto verwendet werden. Alle Buttons werden mit einer Eckenabrundung von 6 px dargestellt. Bei anderen Displaygrößen werden diese Buttons nur in der Breite angepasst, Grafiken und Bilder werden proportional größer. Für den gedrückten Zustand siehe..3. Buttons. Teaser-Button auf Startseite Teaser-Buttons groß Bildhöhe min. 50 px max. 0 px 44 px 5 px 5 px 5 px 5 px Button: KSB-Blau, RGB 3/75/47 Text: Helvetica Medium 7 px, Weiß

19 KSB-Mobile-App-Styleguide. ios-smartphone 9..4 Teaser-Buttons Teaser-Buttons klein 5 px Bildhöhe min. 50 px max. 75 px 60 px 5 px 5 px 5 px Hintergrundfarbe Hellgrau, RGB 4/4/4 Nicht erlaubt! Zusammenhängende Teaser-Buttons dürfen nicht getrennt werden.

20 KSB-Mobile-App-Styleguide. ios-smartphone 0..5 Listen Interaktive Listenzeilen sind für eine bessere Bedienbarkeit 50 px hoch (höher als die ios-standard-elemente von 44 px). Listenzeilen mit Grafiken sind 65 px hoch. Die Grafiken dürfen nicht zu detailreich sein und müssen noch klar erkennbar sein. Listen werden immer auf einem weißen Hintergrund dargestellt. Die Überschrift wird auf Grau gelegt. Einfache Listen Listen mit Vorschau-Bildern 50 px 65 px 3 Überschrift 3 Helvetica Neue Medium 7 px Zeilenabstand 3 px Grau, RGB 85/85/85 Textlinks Helvetica Neue Regular 7 px Zeilenabstand 0px KSB-Blau, RGB 5/0/53 gedrückt: 30% Schwarz 3 Bildformat 47 x 47 px

21 KSB-Mobile-App-Styleguide. ios-smartphone..6 Eingabefelder Die Darstellung von Eingabefeldern wie z. B. Logins erfolgt entsprechend dem ios-standard. Die Felder gehen über die volle Breite und sind thematisch gruppiert, ohne Abstand zwischen den Zeilen. Die Überschrift der Eingabefelder liegt auf Grau.

22 KSB-Mobile-App-Styleguide. ios-smartphone..7 Einstellungen Die Darstellung der Einstellungen erfolgt entsprechend dem ios-standard. Die Felder gehen über die volle Breite und sind thematisch gruppiert, ohne Abstand zwischen den Zeilen. Weiterführende Definitionen und Vorgaben für Einstellungen:

23 KSB-Mobile-App-Styleguide. ios-smartphone 3..8 Weitere Interaktionselemente Die Darstellung von weiteren Interaktionselementen erfolgt entsprechend dem ios-standard. Das Interaktionselement Segmented Controls besteht aus zwei oder mehr nebeneinander angeordnete Buttons, welche mehrere mögliche Zustände oder Menüpunkte darstellen. Bei Android werden anstelle dieser die sogenannten Tabs verwendet (siehe 3..7 Tabs). Es ist jeweils nur ein Punkt auswählbar. Der ausgewählte Punkt ist blau hinterlegt. Weiterführende Definitionen und Vorgaben für Interaktionselemente: 3 Zurück-Button KSB-Blau, RGB 5/0/53 Rechts neben dem Zurück-Button kann noch der Name der übergeordneten Seite stehen. Toolbar-Elemente z. B. Textlinks oder Icons KSB-Blau, RGB 5/0/53 3 Segmented Control Helvetica Neue Regular 3 px KSB-Blau, RGB 5/0/53 Ausgewählte Punkte sind blau unterlegt. Nicht erlaubt! Die Menüpunkte des ios-interaktionselements Segmented Control haben immer die gleiche Gewichtung. Dies bedeutet, dass nicht ein Menüpunkt einem anderen Menüpunkt untergeordnet ist. Der Zurück-Button steht immer links und führt immer zur übergeordneten Menüebene.

24 KSB-Mobile-App-Styleguide. ios-smartphone 4. Schriften Es wird die jeweilige ios-systemschrift verwendet (ios 8: Helvetica Neue). Um Bild und Text einen besseren Halt und größeren Kontrast zu geben, werden Fließtexte auf hellgrauen Hintergrund gesetzt (siehe.4 Farben). Überschriften erscheinen stets in grau, Fließtexte in schwarz und Textlinks in blau. Überschrift Helvetica Neue Medium 35 px Zeilenabstand 44 px Grau, RGB 85/85/85 Überschrift Helvetica Neue Medium 5 px Zeilenabstand 33 px Grau, RGB 85/85/85 3 Überschrift 3 Helvetica Neue Medium 7 px Zeilenabstand 3 px Grau, RGB 85/85/85 33 px 30 px 7 4 Fließtext Helvetica Neue Regular 6 px Zeilenabstand px Schwarz 4 5 Text Navigation Bar Helvetica Neue Medium 7 px Schwarz 6 Textlinks Helvetica Neue Regular 7 px KSB-Blau, RGB 5/0/53 gedrückt: 30% Schwarz 7 Hintergrund Hellgrau, RGB 4/4/

25 KSB-Mobile-App-Styleguide. ios-smartphone 5.3 Tabellen Tabellen haben einen vollflächigen weißen Hintergrund. Die Überschrift der Tabelle liegt auf Grau. 8 px 3 Trennlinien px Hellgrau, RGB 4/4/4 Überschrift 3 Helvetica Neue Medium 7 px Zeilenabstand 3 px Grau, RGB 85/85/85 Tabellentitel Helvetica Neue Bold 3 px Zeilenabstand 7 px Grau, RGB 85/85/85 3 Tabellentext Helvetica Neue Regular 6 px Zeilenabstand px Schwarz

26 KSB-Mobile-App-Styleguide. ios-smartphone 6.4 Beispieldesigns Startseite mit vollflächigem Teaser-Button Off-Canvas-Menü offen Startseite mit Teaser-Buttons Unterseite mit kleinen Teaser-Buttons

27 KSB-Mobile-App-Styleguide. ios-smartphone 7.4 Beispieldesigns Listen Listen mit Vorschau-Bildern Produktdetailseite Produktdetailseite mit Tabelle und CTA-Button

28 KSB-Mobile-App-Styleguide. ios-smartphone 8.4 Beispieldesigns Produktdetailseite mit vollflächiger Grafik

29 KSB-Mobile-App-Styleguide 9 3. Android-Smartphone

30 KSB-Mobile-App-Styleguide 3. Android-Smartphone Interaktionselemente Für Interaktionen in einer KSB-Apps können u.a. unterschiedliche Buttons, Text-Links sowie Tabs verwendet werden. 3.. Navigation Für das Navigieren wird das Android-Standardelement Side Navigation verwendet. Bei wenigen Menüpunkten kann die Side Navigation auch weggelassen werden. Die Menüpunkte sind dann z. B. über die Navigationsleiste App Bar zugänglich. Weiterführende Definitionen und Vorgaben für Navigationselemente: App Bar auf der Startseite Navigation Drawer Status Bar = 4 dp App Bar = 56 dp 40 x 64 dp 60 dp 54 dp 30 dp dp 36 dp Side Navigation Toolbar Die Toolbar erscheint optional rechts in der App Bar. Sie enthält weitere Funktionen einer Seite wie z. B. Suchen, Teilen, Merken, Bearbeiten. 3 4 Navigation Drawer Das übergeordnete Menü Navigation Drawer erstreckt sich über die volle Höhe. Bei Öffnung schiebt er sich von links nach rechts über die jeweilige Seite. Sekundärer Menüpunkt Roboto Medium 5 pt, KSB-Blau, #336699

31 KSB-Mobile-App-Styleguide 3. Android-Smartphone 3 Geöffnetes Menü innerhalb der Toolbar 5 Zurück-Button ist auf den Unterseiten platziert und führt immer zur übergeordneten Seite. Zurück-Button 5

32 KSB-Mobile-App-Styleguide 3. Android-Smartphone Buttons & Textlinks Buttons sind ein Material-Design-Standard-Element. Standard-Buttons werden in KSB-Blau dargestellt. Call-to-Action-Buttons lösen eine Aktion aus (z. B. Bestellen, Anmelden, Herunterladen, Kaufen). Diese Buttons sollten sparsam eingesetzt werden. Ein Button kann inaktiv bei z. B. nicht ausgefüllten Formularen, nicht ausgewählten Feldern oder bei einem nicht abgeschlossenen Prozess sein. Bei größeren Displays passen sich die Buttons nur in der Breite an, die Höhe bleibt gleich. Klickbare Texte (Textlinks) werden in KSB-Blau dargestellt. Weiterführende Definitionen und Vorgaben für Buttons: Standard-Buttons 3 3 Button Button: KSB-Blau, # Text: Weiß Button gedrückt Button: 30% Schwarz Text: Weiß Button inaktiv Button: Mittelgrau, #CCC Text: Grau, # Call-to-Action-Buttons Button Button: Orange, #FF57F Text: Weiß Button gedrückt Button: 30% Schwarz Text: Weiß 3 36 dp 48 dp Touch-Fläche Floating Action Button (FAB) 6 56 dp 6 FAB Button: Orange, #FF57F Icon: Weiß Textlinks Textlink Text: KSB-Blau, # Textlink gedrückt Text: KSB-Blau, # Hintergrund: Mittelgrau, #CCC Textlink inaktiv Text: Mittelgrau, #CCC

33 KSB-Mobile-App-Styleguide 3. Android-Smartphone Teaser-Buttons Teaser-Buttons verweisen auf eine untergeordnete bzw. weiterführende Seite. Auf der Startseite kann ein Teaser mit einem Hintergrundfoto verwendet werden. Alle Teaser-Buttons werden mit einer Eckenabrundung von 5 dp dargestellt. Bei anderen Displaygrößen werden die blauen Buttons nur in der Breite angepasst, die Grafiken und BIlder werden proportional größer. Für den gedrückten Zustand siehe 3.. Buttons. Teaser-Button auf der Startseite Teaser-Buttons groß 6 dp Bildhöhe min. 70 dp max. 00 dp 48 dp 6 dp 6 dp 6 dp Button: KSB-Blau, # Text: Roboto Medium 4 sp, Weiß

34 KSB-Mobile-App-Styleguide 3. Android-Smartphone Teaser-Buttons Teaser-Buttons klein 6 dp Bildhöhe min. 70 dp max. 90 dp 6 dp 6 dp 6 dp 60 dp Hintergrundfarbe Hellgrau, #FFF

35 KSB-Mobile-App-Styleguide 3. Android-Smartphone Listen Interaktive Listenzeilen sind für eine bessere Bedienbarkeit 5 dp hoch. Listenzeilen mit Grafiken sind 7 dp hoch. Die Grafiken dürfen nicht zu detailreich sein und müssen noch klar erkennbar sein. Listen werden immer auf einem weißen Hintergrund dargestellt. Die Überschrift wird auf Grau gelegt. Weiterführende Definitionen und Vorgaben für Listen: Einfache Listen Listen mit Vorschau-Bildern 5 dp 3 7 dp Überschrift 3 Roboto Medium 6 sp Zeilenabstand sp Grau, # Listentitel Roboto Medium 6 sp Zeilenabstand sp Blau, # Bildformat 50 x 50 dp Hintergrundfarbe Hellgrau, #FFF

36 KSB-Mobile-App-Styleguide 3. Android-Smartphone Eingabefelder Die Darstellung von Eingabefeldern wie z. B. Logins erfolgt entsprechend dem Android-Standard. Der Text liegt, anders als bei Listen und Tabellen, auf hellgrauem Hintergrund. Weiterführende Definitionen und Vorgaben für Eingabefelder: Eingabefelder ohne Eingabe Eingabefelder mit Eingabe Texteingabe Roboto Regular 6 sp Schwarz

37 KSB-Mobile-App-Styleguide 3. Android-Smartphone Einstellungen Die Darstellung von Einstellungen erfolgt entsprechend dem Android-Standard. Die Felder gehen über die volle Breite und sind thematisch gruppiert, ohne Abstand zwischen den Zeilen. Weiterführende Definitionen und Vorgaben für Einstellungen: 5 dp Überschrift Texteingabe Roboto Medium sp Grau, #555555

38 KSB-Mobile-App-Styleguide 3. Android-Smartphone Tabs Tabs ermöglichen das Navigieren innerhalb einer Seite. Sie stellen mehrere mögliche Zustände oder Menüpunkte dar. Es ist jeweils nur ein Tabpunkt auswählbar. Der ausgewählte Tabpunkt wird mit einer blauen Linie unterhalb des Tabtitels hervorgehoben. Bei ios werden anstelle von Tabs die Segmented Controls verwendet (siehe..8 Weitere Interaktionselemente). Weiterführende Definitionen und Vorgaben für Tabs: Tabs mit drei Menüpunkten Scrollbare Tabs mit mehr als drei Menüpunkten 74 dp 74 dp Tabtitel Roboto Medium 4 sp KSB-Blau, #336699

39 KSB-Mobile-App-Styleguide 3. Android-Smartphone Schriften Es wird die jeweilige Android-Systemschrift verwendet (bei OS5: Roboto). Um Bild und Text einen besseren Halt und größeren Kontrast zu geben, werden Fließtexte auf hellgrauen Hintergrund gesetzt. Überschriften erscheinen stets in grau, Fließtexte in schwarz und Textlinks in blau. 7 Überschrift Roboto Medium 34 sp 7 Zeilenabstand 44 sp Grau, # dp 3 Überschrift 4 Seitentitel App Bar Roboto Medium sp Roboto Medium 0 sp Zeilenabstand 8 sp Grau, # Grau, # Überschrift 3 Fließtext Roboto Medium 6 sp Roboto Regular 6 sp Zeilenabstand sp Zeilenabstand sp Grau, # Schwarz 6 3 Textlinks Hintergrund Roboto Medium 6 sp Hellgrau, #FFF Blau, # gedrückt: 30% Schwarz

40 KSB-Mobile-App-Styleguide 3. Android-Smartphone Tabellen Tabellen haben einen vollflächigen weißen Hintergrund. Die Überschrift der Tabelle liegt auf hellgrauem Hintergrund. 0 dp 3 0 dp 6 dp Trennlinie dp Hellgrau, #FFF Überschrift 3 Roboto Medium 6 sp Zeilenabstand sp Grau, # Tabellentitel Roboto Medium 4 sp Zeilenabstand sp Schwarz 3 Tabellentext Roboto Regular 6 sp Zeilenabstand sp Schwarz

41 KSB-Mobile-App-Styleguide 3. Android-Smartphone Beispieldesigns Startseite mit vollflächigem Teaser-Button Navigation Drawer Unterseite mit Teaser-Buttons Unterseite mit Tabs

42 KSB-Mobile-App-Styleguide 4 4. Tablet

43 KSB-Mobile-App-Styleguide 4. Tablet Allgemeines Um eine Smartphone-App für das Tablet anzupassen, muss keine neue App programmiert werden. Alle Grafiken und Interface-Elemente des Smartphones können auch für das Tablet verwendet werden. Größen und Stile von Interface-Elementen bleiben gleich, können aber je nach Display in der Breite variieren (z. B. Buttons, Tabellen, Tab Bar und Navigation Bar). Ansonsten gelten die gleichen Vorgaben der Betriebssysteme ios und Android wie beim Smartphone. Beispiele und Hilfen für Tablet-Anpassungen können in den jeweiligen Vorgaben der Betriebssysteme eingesehen werden. Hier wird exemplarisch der Navigation Drawer und der Content-Bereich eines Android-Screens dargestellt. Die Breite des Navigation Drawers und die Höhe der Listenelemente entsprechen den Smartphone-Normen.

44 KSB-Mobile-App-Styleguide 4. Tablet Split-View Der Vorteil von großflächigeren Tablets ist die Kombination mehrerer Smartphone-Seiten, dem Split- View. Der Platz wird so effizienter genutzt und vereinfacht das Navigieren durch die App. Der Split-View bietet dem Nutzer eine schnellere Übersicht über den Inhalt der App. In diesem Android-Beispielscreen wird eine Seite mit Teaser-Buttons mit der Produktseite kombiniert.

45 KSB-Mobile-App-Styleguide 4. Tablet 45 In diesem ios-beispielscreen wird eine Listen-Seite mit einer Teaser-Button-Seite kombiniert.

46 KSB-Mobile-App-Styleguide Displayanpassung

47 KSB-Mobile-App-Styleguide 5. Displayanpassungen Hoch- und Querformat Apps können im Hoch- und/oder im Querformat gestaltet werden. Nicht jede App muss für beide Formate gestaltet werden. Bestimmte Anwendungen tendieren zu einem bestimmten Format, wie beispielsweise Spiele zum Querformat. Aber auch innerhalb einer App kann bei bestimmten Funktionen ein Formatwechsel Sinn machen, wie nachfolgend erläutert. Grundsätzlich bleiben Elementgrößen beim Formatwechsel erhalten. Systembuttons passen sich der entsprechenden Displaybreite an, die Elemente der Tab Bar werden auf die Displaybreite verteilt. Beispiele Es gibt verschiedene Möglichkeiten, eine im Hochformat (Portrait) gestaltete App an das Querformat (Landscape) anzupassen:. Die Interface-Elemente ordnen sich neu an. Beispielsweise stehen im Hochformat zwei und im Querformat drei Teaser-Buttons nebeneinander. Listenelemente passen sich an und werden breiter.. Im Querformat werden zusätzliche Elemente oder Funktionen angezeigt, z. B. einen Steckbrief mit weiteren Produktdetails über eine Pumpe. 3. Im Querformat werden ergänzende oder ähnliche Inhalte dargestellt. Beispielsweise zeigt eine App im Hochformat eine Listenübersicht und im Querformat ein dazugehöriges Diagramm. 4. Im Querformat können auch komplett andere Inhalte dargestellt werden. Im Standard-Hochformat werden z. B. alle Funktionen einer KSB-App angezeigt und das Querformat bietet den Schnellzugang zur Pumpeneinstellung. Exemplarische Ansicht eines ios-smartphones im Hoch- und Querformat Im Querformat kann - falls die App auch im Hochformat konzipiert wurde - die Status Bar und Tab Bar weggelassen werden, um mehr Platz für den Inhalt zu schaffen.

48 KSB-Mobile-App-Styleguide 5. Displayanpassungen Anpassung an andere Displaygrößen Interface-Elemente werden für kleinere und größere Displaygrößen, z. B. vom iphone 6 zum iphone 5 und zum Tablet unterschiedlich angepasst. Dabei behalten Standard-Elemente, wie z. B. die Tab Bar und Navigation Bar, Buttons, Tabellen und Eingabefelder, die gleiche Höhe und passen sich nur in der Breite an. Grafiken und Bilder werden proportional größer. iphone 6 iphone 5 Höhe bleibt gleich proportional Abstände bleiben gleich Breite Icons (= Symbole, Piktogramme) und einzelne Grafiken bleiben gleich