Ux & hybrid app
Download as PPTX, PDF4 likes1,040 views
This document discusses best practices for developing hybrid mobile apps across platforms. It emphasizes using density independent pixels (DP) to support varying screen densities, providing splash screens and navigation optimized for each platform. While tools like Intel's App Framework aim to build truly cross-platform apps, the document argues that building native versions for each platform is ultimately easier since it avoids challenges of differing interaction patterns and screen usages across Android and iOS. Examples of successfully cross-platform apps are provided.
Ux & hybrid app
- 1. UX & Hybrid App The challenge of going mobile
- 3. Cars
- 4. Bad experiences ! They stick with you! Get to your nerves
- 5. Good experiences ! They stick with you too
- 10. Android Touch Double touchSwipe or drag Long press drag Long press developer.android.com
- 11. Android Double touch drag Pinch close Pinch Open developer.android.com
- 12. iOS
- 15. quojs.tapquo.com
- 17. Measurements That’s a cool Icon you designed with a graphic tool. ( think 1 cell= 10px). How you seen it on your pc
- 18. Measurements Suppose your pc has a depth of 160px per inch which we call 160DPI Screen. Dpi= Dot per inch. Androids are usually have more DPI(260-640DPI). Your icon - ~160 DPI (Feels ok ) ~240 DPI ( Bit small but ok ) ~ 640DPI (Aw!can’t see it :o )
- 19. Possible Solutions? • Vector!!! Maybe!! But How smartphones will understand what to show ? • The web works with pixels but phones cant work with this thing only because of large pixel density. • We need density independent unit for that purpose. • DP = DIP = Density Independent Pixel. ( Used for all type of graphics) • SP = SIP = Scale Independent Pixel. ( Used for fonts )
- 20. Measurements • 2:3:6:8 Scaling Ratio • MDPI= 1x (~160 DPI) • HDPI=1.5x(~240DPI) • XHDPI= 2x(~320DPI) • XXHDPI= 3x(~480DPI) • XXXHDPI=4x(~640DPI) • Example: • 48*48px(~160DPI) • 72*72px(~240DPI) • 96*96px(~320DPI) • 144*144px(~480DPI) • 192*192px(~640DPI)
- 21. Icons • They are like doors. • Start Big, If possible vector. • Common names are easy to implement • Optimize with Optipng/pngcrush • http://docs.phonegap.com/en/3.5.0/config_ref_images.md.html
- 22. Other things that makes difference • Splashscreen. • Actionbar/Toolbar. • Navigation way. • Using the best possible screen realestate
- 23. Will build one app and build it to all platform
- 24. Bad idea !/Way more to think off/ too much Challenge
- 25. Building Native things => easy. Less to think about
- 26. Tools I don’t recommend this one Intel's App Framework
- 27. Some apps to look onto • Flipboard ( they made it cross platform ) • Instagram • Health • BBC • Exfm • Rormix • Fruitsalad • twist • IGN Dominate
- 28. Ahmad Firoz Visual Designer & Student ahmadfiroz@outlook.com ahmadfiroz.com