von ios zu android - der weg eines app-designs
DESCRIPTION
Der vorherrschende Weg vieler Mobile Apps ist noch immer von iOS zu Android. Anhand eines Beispiels sollen die Möglichkeiten und Fallstricke der Transformation einer nativen App von iOS zu Android im Hinblick auf Struktur, Design und Navigation aufgezeigt werden.TRANSCRIPT
Von iOS zu AndroidDer Weg eines App-Designs
Tim Roes | inovex GmbH
Über mich
Tim Roes
inovex GmbH | Mobile Development
www.timroes.de
Über diesen Vortrag
What NOT to do
What to do
How to do it
What NOT to do
What to do
Schritt 1: Design Styleguides lesen
https://developer.apple.com/library/ios/design
https://developer.android.com/design
Schritt 2: Zielplattform benutzen
Wahlweise Schritt 1 und 2 vertauschen
Schritt 3: Bookmarks aufräumen
Phonegap
Cordova
$CrossPlatformFramework
Schritt 4: Portieren, nicht kopieren
How to do it
Beispielanwendung: Day One
Quelle: https://itunes.apple.com/us/app/day-one-journal-diary/id421706526
Struktur analysieren
Theme
Branding
Akzentfarben
Logo in ActionBar
Navigation Drawer
Hauptnavigation
Erst bei mehreren Elementen
Navigationselemente,
keine Aktionen
Collapse/Expand
Counters
Navigation: Spinner
Alternative Ansicht
auf dieselben Daten
Ggf. gefilterte Daten
Navigation: Tabs
Bei wenigen
Navigationspunkten
Oft auch für
alternativer Ansicht
Aktionen
Action Buttons
Kontextbezogen
i
Overflow
Bei zu wenig Platz
Selten genutzte Aktionen
Einstellungen
Hilfe
Icons
Standard Icons nutzen, wenn möglich
Listen: GridView
Gut geeignet
für Vorschaubilder
Skalierbar
Listen: ListView
Keine Listcarets
Suche
Aktionen II
Split Action Bar
Nicht verwechseln mit
iOS Bottom Tabs
Swipen zum Wechseln
Up vs. Back Navigation
Zeitlich vs. hierarchisch
eigentlich …
Außerdem…
Umsetzungsdetails
Verschiedene Screendensities (mdpi, hdpi, xhdpi, …)
Android Asset Studio
Responsive Design
Design Candies
Notifications, Widgets
und vieles mehr …
Wichtige Ressourcen
Google+
+NickButcher, +RomanNurik, +AdamKoch (Google)
+JuhaniLehtimäki, +TaylorLing
YouTube: Android Design in Action
www.androiduipatterns.com