KSB-Mobile-App-Styleguide

Transkript

1 KSB-Mobile-App-Styleguide Stand Mai 08

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. KSB SE & Co. KGaA / Stand Mai 08

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 Splash-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...45 KSB SE & Co. KGaA / Stand Mai Displayanpassung 5. Hoch- und Querformat Anpassung an andere Displaygrößen...49

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. KSB SE & Co. KGaA / Stand Mai 08

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: 0/07) Alle Größenangaben werden in diesem Styleguide in Retina-Pixel angegeben Alle Designs wurden für das iphone 6s/7/8 (750 x 334 px) und ios gestaltet. Schriftengrößen werden in Pixeln angegeben. Alle Fotos und Bilder müssen Format hinterlegt werden, damit sie nicht unscharf dargestellt werden. Google Android Aktuelle Vorgaben von Androids Betriebssystemversion 8 Oreo (mit Material Design) können im Internet eingesehen werden: (Stand:.08.07) Alle Größenangaben werden in diesem Styleguide in dp angegeben. Alle Designs wurden in MDPI angelegt (360 x 640 px). Schriften werden in Pixel angegeben. 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. KSB SE & Co. KGaA / Stand Mai 08

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: KSB SE & Co. KGaA / Stand Mai 08

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 Callto-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 #FFFFFF RGB 55/55/55 #FF6900 RGB 55/05/0 #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 KSB SE & Co. KGaA / Stand Mai 08 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 Splash-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 Splash-Screen Startseite KSB SE & Co. KGaA / Stand Mai 08

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. KSB SE & Co. KGaA / Stand Mai 08 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 Splash-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 (Beispiel) 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. Alle anderen ios Icon-Größen sind hier zu finden: Android Product Icon (Beispiel) Android Home Screen mit KSB Product Icon 400 x 400 dp 43% 36 x 04 dp KSB SE & Co. KGaA / Stand Mai 08 Hinweis: Die Länge des Display-Namens ist abhängig vom jeweiligen Gerät. Nach einer Maximallänge wird der Name ausgepunktet. Weitere Infos unter:

12 KSB-Mobile-App-Styleguide. Design-Grundlagen.9 Splash-Screen Der Splash-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 Splash-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 Splash- Screen erscheint, wird auch für das App-Icon eingesetzt (Siehe Seite ). Splash-Screens für Apple ios stehen als PSD-Dateien zum Download zur Verfügung. Weiterführende Definitionen und Vorgaben für ios Splash-Screens: ios-smartphone Android-Smartphone 60 px 60 px 0 dp 0 dp 500 px = /3 /3 4 px 90 px /3 /3 dp 45 dp 33% 500 px 37% 7 x 7 dp 7 x 3 dp 344 x 54 px 4 x 64 px dp KSB SE & Co. KGaA / Stand Mai px Überschrift SF Pro Display Bold 70 px Zeilenabstand 88 px Grau, RGB 85/85/85 Überschrift Roboto Bold 34 px Zeilenabstand 44 px Grau, #555555

13 KSB-Mobile-App-Styleguide. Design-Grundlagen 3 Android Tablet Überschrift 0: Roboto Bold 56 px, Zeilenabstand 66 px, 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: SF Pro Display Bold 00 px, Zeilenabstand 0 px, Grau, # px 80 px /3 /3 KSB SE & Co. KGaA / Stand Mai 08 ca. 6% 388 x 60 px ca. 34% 60 px 4 px ca. 0% 36 x 40 px

14 . 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 erscheint in der Navigation Bar der Seitentitel, 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 Status Bar = 40 px Unterseite mit Navigation Bar im Normalzustand 89 x 84 px Navigation Bar = 93 px 3 KSB SE & Co. KGaA / Stand Mai 08 Tab Bar 00px 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). ca. 50 x 50 px 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 Auf der Startseite befindet sich das KSB-Logo mittig in der Navigation Bar. Auf den Unterseiten erscheint links groß der Seitentitel. Wischt der Nutzer nach oben, um den nicht im Anzeigebereich befindlichen Inhalt zu sehen, halbiert sich die Höhe der Navigation Bar und der Seitentitel erscheint verkleinert mittig in der Navigation Bar. Unterseite mit Navigation-Bar im Normalzustand Unterseite mit Navigation-Bar im Scrollzustand Navigation-Bar = 93 px KSB SE & Co. KGaA / Stand Mai 08 Navigation-Bar normal Navigation-Bar halbhoch

17 KSB-Mobile-App-Styleguide. ios-smartphone 7.. 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 0 px KSB SE & Co. KGaA / Stand Mai 08 Nachrichtensymbol Wird z. B. für neue Mitteilungen in der Inbox oder wichtige Meldungen verwendet Größe: 60 px x 44 px Radius: px Textlink SF Pro Display Regular 34 px KSB-Blau, RGB 5/0/53

18 KSB-Mobile-App-Styleguide. ios-smartphone 8..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 88 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 KSB SE & Co. KGaA / Stand Mai 08 Textlinks Textlinks Text: SF Pro Display Medium 34 px KSB-Blau, RGB 5/0/53 Textlinks gedrückt 30% Schwarz

19 KSB-Mobile-App-Styleguide. ios-smartphone 9..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 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. 300 px max. 40 px 88 px 30 px 30 px 30 px KSB SE & Co. KGaA / Stand Mai px Button: KSB-Blau, RGB 3/75/47 Text: SF Pro Display Medium 34 px, Weiß

20 KSB-Mobile-App-Styleguide. ios-smartphone 0..4 Teaser-Buttons Teaser-Buttons klein 30 px Bildhöhe min. 300 px max. 350 px 0 px 30 px 30 px 30 px Hintergrundfarbe Hellgrau, RGB 4/4/4 Nicht erlaubt! Zusammenhängende Teaser-Buttons dürfen nicht getrennt werden. KSB SE & Co. KGaA / Stand Mai 08

21 KSB-Mobile-App-Styleguide. ios-smartphone..5 Listen Interaktive Listenzeilen sind für eine bessere Bedienbarkeit 00 px hoch (höher als die ios-standard-elemente von 88 px). Listenzeilen mit Grafiken sind 30 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 00 px 30 px 3 KSB SE & Co. KGaA / Stand Mai 08 Überschrift 3 SF Pro Display Semibold 34 px Zeilenabstand 46 px Grau, RGB 85/85/85 Textlinks SF Pro Display Regular 34 px Zeilenabstand 40 px KSB-Blau, RGB 5/0/53 gedrückt: 30% Schwarz 3 Bildformat 94 x 94 px

22 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. KSB SE & Co. KGaA / Stand Mai 08

23 KSB-Mobile-App-Styleguide. ios-smartphone 3..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: KSB SE & Co. KGaA / Stand Mai 08

24 KSB-Mobile-App-Styleguide. ios-smartphone 4..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 SF Pro Display Regular 6 px KSB-Blau, RGB 5/0/53 Ausgewählte Punkte sind blau unterlegt. KSB SE & Co. KGaA / Stand Mai 08 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.

25 KSB-Mobile-App-Styleguide. ios-smartphone 5. Schriften Es wird die jeweilige ios-systemschrift verwendet (ios : San Francisco Pro Display für Headlines und San Francisco Pro Text für die Copy). 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 SF Pro Display Bold 70 px Zeilenabstand 88 px Grau, RGB 85/85/85 Überschrift SF Pro Display Bold 50 px Zeilenabstand 66 px Grau, RGB 85/85/85 3 Überschrift 3 SF Pro Display Bold 34 px Zeilenabstand 6 px Grau, RGB 85/85/85 66 px 60 px 7 4 Fließtext SF Pro Text Regular 3 px Zeilenabstand 44 px Schwarz 4 5 Text Navigation Bar SF Pro Text Semibold 34 px Schwarz 6 Textlinks SF Pro Text Regular 34 px KSB-Blau, RGB 5/0/53 gedrückt: 30% Schwarz 7 Hintergrund Hellgrau, RGB 4/4/4 5 KSB SE & Co. KGaA / Stand Mai

26 KSB-Mobile-App-Styleguide. ios-smartphone 6.3 Tabellen Tabellen haben einen vollflächigen weißen Hintergrund. Die Überschrift der Tabelle liegt auf Grau. 36 px 3 Trennlinien px Hellgrau, RGB 4/4/4 KSB SE & Co. KGaA / Stand Mai 08 Überschrift 3 SF Pro Display Bold 34 px Zeilenabstand 46 px Grau, RGB 85/85/85 Tabellentitel SF Pro Display Bold 6 px Zeilenabstand 34 px Grau, RGB 85/85/85 3 Tabellentext SF Pro Display Regular 3 px Zeilenabstand 4 px Schwarz

27 KSB-Mobile-App-Styleguide. ios-smartphone 7.4 Beispieldesigns Startseite mit vollflächigem Teaser-Button Off-Canvas-Menü offen Startseite mit Teaser-Buttons Unterseite mit kleinen Teaser-Buttons KSB SE & Co. KGaA / Stand Mai 08

28 KSB-Mobile-App-Styleguide. ios-smartphone 8.4 Beispieldesigns Listen Listen mit Vorschau-Bildern Produktdetailseite Produktdetailseite mit Tabelle und CTA-Button KSB SE & Co. KGaA / Stand Mai 08

29 KSB-Mobile-App-Styleguide. ios-smartphone 9.4 Beispieldesigns Produktdetailseite mit vollflächiger Grafik KSB SE & Co. KGaA / Stand Mai 08

30 3. Android-Smartphone

31 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 KSB SE & Co. KGaA / Stand Mai 08 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 8 px, KSB-Blau, #336699

32 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 KSB SE & Co. KGaA / Stand Mai 08

33 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ß KSB SE & Co. KGaA / Stand Mai 08 Textlinks Textlink Text: KSB-Blau, # Textlink gedrückt Text: KSB-Blau, # Hintergrund: Mittelgrau, #CCC Textlink inaktiv Text: Mittelgrau, #CCC

34 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 KSB SE & Co. KGaA / Stand Mai 08 Button: KSB-Blau, # Text: Roboto Medium 4 px, Weiß

35 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 KSB SE & Co. KGaA / Stand Mai 08

36 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 KSB SE & Co. KGaA / Stand Mai 08 Überschrift 3 Roboto Medium 6 px Zeilenabstand px Grau, # Listentitel Roboto Medium 6 px Zeilenabstand px Blau, # Bildformat 50 x 50 dp Hintergrundfarbe Hellgrau, #FFF

37 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 KSB SE & Co. KGaA / Stand Mai 08 Texteingabe Roboto Regular 6 px Schwarz

38 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 KSB SE & Co. KGaA / Stand Mai 08 Überschrift Texteingabe Roboto Medium px Grau, #555555

39 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 px KSB-Blau, # KSB SE & Co. KGaA / Stand Mai 08

40 KSB-Mobile-App-Styleguide 3. Android-Smartphone Schriften Es wird die jeweilige Android-Systemschrift verwendet (bei OS8: 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. Weiterführende Definitionen und Vorgaben für Schriften: Überschrift Roboto Medium 34 px Zeilenabstand 44 px Grau, # dp 3 KSB SE & Co. KGaA / Stand Mai 08 3 Überschrift Roboto Medium px Zeilenabstand 8 px Grau, # Fließtext Roboto Regular 6 px Zeilenabstand px Schwarz Hintergrund Hellgrau, #FFF Seitentitel App Bar Roboto Medium 0 px Grau, # Überschrift 3 Roboto Medium 6 px Zeilenabstand px Grau, # Textlinks Roboto Medium 6 px Blau, # gedrückt: 30% Schwarz

41 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 KSB SE & Co. KGaA / Stand Mai 08 Überschrift 3 Roboto Medium 6 px Zeilenabstand px Grau, # Tabellentitel Roboto Medium 4 px Zeilenabstand px Schwarz 3 Tabellentext Roboto Regular 6 px Zeilenabstand px Schwarz

42 KSB-Mobile-App-Styleguide 3. Android-Smartphone Beispieldesigns Startseite mit vollflächigem Teaser-Button Navigation Drawer Unterseite mit Teaser-Buttons Unterseite mit Tabs KSB SE & Co. KGaA / Stand Mai 08

43 4. Tablet

44 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. KSB SE & Co. KGaA / Stand Mai 08

45 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. KSB SE & Co. KGaA / Stand Mai 08

46 KSB-Mobile-App-Styleguide 4. Tablet 46 In diesem ios-beispielscreen wird eine Listen-Seite mit einer Teaser-Button-Seite kombiniert. KSB SE & Co. KGaA / Stand Mai 08

47 5. Displayanpassung

48 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. KSB SE & Co. KGaA / Stand Mai 08

49 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 KSB SE & Co. KGaA / Stand Mai 08 Icons (= Symbole, Piktogramme) und einzelne Grafiken bleiben gleich