[SwiftPH + PADC Meetup - May 2019] Mobile Interface Guidelines Comparison (iOS & Android)
0 likes139 views
This document summarizes the key differences between iOS and Android interface guidelines for mobile app development. It discusses guidelines for app icons, launch screens, navigation bars, screen resolution, images, and typography. The main points are that iOS guidelines emphasize simplicity and consistency while Android allows for more variation. iOS strictly enforces guidelines while Android guidelines are more flexible. Developers must consider a variety of Android devices and configurations compared to the limited number of iOS devices.
[SwiftPH + PADC Meetup - May 2019] Mobile Interface Guidelines Comparison (iOS & Android)
- 1. Mobile Interface Guidelines for iOS & Android (Mobile) Devices Michie Ang twitter: @michieriffic SwiftPH
- 2. What are interface guidelines? - Guidelines set by companies such as Apple and Google for designers/ developers when we are designing and creating our apps.
- 3. What is it for? - Quality Control (eg compatibility, performance,security,accessibility and more) - Help us make the best user friendly app as possible
- 4. Why is it different form one another? - Each company has their own demographic of user
- 5. iOS developer.apple.com/ design/human-interface- guidelines/ios/ Android Material Design developer.android.com/ design Where can I find the guidelines set for iOS & Android dev’t?
- 6. Is it a must to follow these guidelines? iOS Android YES!!! MAYBE?!
- 7. Comparing Apple’s iOS Human Interface Guidelines & Android Material Design
- 8. App Icons - First time of communication with your users - Use in App Store or Play Store - Use in Settings, Notifications, etc
- 9. App Icons iOS App Icons - App’s Purpose - Rounded Square https://developer.apple.com/design/human- interface-guidelines/ios/icons-and-images/ app-icon/ Android Product Icons - Branded Identity - Nothing specific https://material.io/design/iconography/product- icons.html
- 10. App Icons iOS App Icons - App’s Purpose - Rounded Square https://developer.apple.com/design/human- interface-guidelines/ios/icons-and-images/ app-icon/ Android Image Asset Studio https://developer.android.com/studio/ write/image-asset-studio
- 11. Launch Screen - user’s first experience of your app - gives an impression that your app is fast and responsive - tips: use static files
- 12. Launch Screen iOS - Nearly identical to the first screen of your app - Don’t advertise or do something here Android - Branded Launch Screen - Placeholder UI
- 13. Bars Top Section iOS Navigation Bar - Top - Goes to hierarchy of screens - Has back button (if goes to the next view) Android App Bar: Top - provides content and actions related to the current screen - sometimes with back button
- 14. Bars Top Section iOS Android Tabs - organizes content in different screens
- 15. Bars Bottom Section iOS Tab Bar - ability to switch from different section Android Bottom Navigation - To switch destination’s top level view - Should be 3-5 destination
- 16. Bars Bottom Section iOS Tool Bar - contains buttons for performing actions relevant to the current view or content within it Android App Bar: Bottom - Displays navigation and key actions at the bottom of mobile
- 17. Navigation - movement inside the app from one view/ screen to another
- 18. Navigation iOS Hierarchical Navigation Android Forward Navigation - moving between screens in consecutive level of hierarchy
- 19. Navigation iOS Flat Navigation Android Lateral Navigation - moving between screens in same level of hierarchy
- 20. Navigation iOS Content-Driven or Experience- Driven Navigation - Move freely thru content or the content itself defines the navigation. Android Reverse Navigation - moving backward thru screens within an app or within different apps Others (unrelated)
- 21. Navigation Android Navigation Drawer - If you have more than 5 top-level destination
- 22. Screen Resolution iOS - Points Android Density Independent Pixel (DP)
- 23. Image (Graphic) Sizes iOS - Limited Sizes - Only one manufacturer - PNG Android - Different Screen Sizes - Different Resolution https://blog.mindorks.com/understanding- density-independent-pixel-sp-dp-dip-in- android Device Scale Factor iPhone Xs Max, iPhone Xs, iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6 Plus @3x iPhone XR, iPhone 8, iPhone 7, iPhone 6s, iPhone SE @2x iPhone 5, iPhone 4 @1x
- 24. How to make it work with so many devices? iOS Auto Layout, Constraints, Size Classes https://developer.apple.com/library/ archive/documentation/UserExperience/ Conceptual/AutolayoutPG/index.html Android ConstraintsLayout https://developer.android.com/reference/ android/support/constraint/package- summary.html
- 25. The Notch iOS iPhone X, iPhone XR, iPhone Xs, iPhone Xs Max - Use the safeAreaLayoutGuide https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and- layout/
- 28. Mobile Interface Guidelines for iOS & Android (Mobile) Devices Michie Ang twitter: @michieriffic SwiftPH