Von iOS zu Android
Der 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
Des...
Wichtige Ressourcen
Google+
+NickButcher, +RomanNurik, +AdamKoch (Google)
+JuhaniLehtimäki, +TaylorLing
YouTube: Android D...
Von iOS zu Android - der Weg eines App-Designs
Von iOS zu Android - der Weg eines App-Designs
Upcoming SlideShare
Loading in …5
×

Von iOS zu Android - der Weg eines App-Designs

363 views
278 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
363
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Von iOS zu Android - der Weg eines App-Designs

  1. 1. Von iOS zu Android Der Weg eines App-Designs Tim Roes | inovex GmbH
  2. 2. Über mich Tim Roes inovex GmbH | Mobile Development www.timroes.de
  3. 3. Über diesen Vortrag What NOT to do What to do How to do it
  4. 4. What NOT to do
  5. 5. What to do
  6. 6. Schritt 1: Design Styleguides lesen https://developer.apple.com/library/ios/design https://developer.android.com/design
  7. 7. Schritt 2: Zielplattform benutzen Wahlweise Schritt 1 und 2 vertauschen
  8. 8. Schritt 3: Bookmarks aufräumen Phonegap Cordova $CrossPlatformFramework
  9. 9. Schritt 4: Portieren, nicht kopieren
  10. 10. How to do it
  11. 11. Beispielanwendung: Day One Quelle: https://itunes.apple.com/us/app/day-one-journal-diary/id421706526
  12. 12. Struktur analysieren
  13. 13. Theme
  14. 14. Branding Akzentfarben Logo in ActionBar
  15. 15. Navigation Drawer Hauptnavigation Erst bei mehreren Elementen Navigationselemente, keine Aktionen Collapse/Expand Counters
  16. 16. Navigation: Spinner Alternative Ansicht auf dieselben Daten Ggf. gefilterte Daten
  17. 17. Navigation: Tabs Bei wenigen Navigationspunkten Oft auch für alternativer Ansicht
  18. 18. Aktionen Action Buttons Kontextbezogen i
  19. 19. Overflow Bei zu wenig Platz Selten genutzte Aktionen Einstellungen Hilfe
  20. 20. Icons Standard Icons nutzen, wenn möglich
  21. 21. Listen: GridView Gut geeignet für Vorschaubilder Skalierbar
  22. 22. Listen: ListView Keine Listcarets
  23. 23. Suche
  24. 24. Aktionen II Split Action Bar Nicht verwechseln mit iOS Bottom Tabs Swipen zum Wechseln
  25. 25. Up vs. Back Navigation Zeitlich vs. hierarchisch eigentlich …
  26. 26. Außerdem… Umsetzungsdetails Verschiedene Screendensities (mdpi, hdpi, xhdpi, …) Android Asset Studio Responsive Design Design Candies Notifications, Widgets und vieles mehr …
  27. 27. Wichtige Ressourcen Google+ +NickButcher, +RomanNurik, +AdamKoch (Google) +JuhaniLehtimäki, +TaylorLing YouTube: Android Design in Action www.androiduipatterns.com

×