Más contenido relacionado Más de Microsoft Mobile Developer (20) Introduction to the new Nokia Asha UI2. Overview
2 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
• UI design changes
• From Series 40 non-touch to Nokia Asha UI
• UX offering
• Take home messages
4. 4 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
The visualization changed,
but the APIs remain compatible.
5. The screen is optimized for mobility,
convenience and effectiveness.
5 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
6. Consider thumb usage.
Make touch areas large enough.
6 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
7. Back-stepping is done via a dedicated
hardware Back/Exit key.
7 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
8. The Swipe is reserved.
8 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
9. Use 25 px margin for
gestures to be Swipe-
safe.
9 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
10. Push notification lets people listen to your
service if there is something new.
10 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
Your service
Nokia server
11. Category bar can have tabs or actions.
Do not mix them.
11 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
12. Indicating selected items has been
simplified.
12 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
13. The popup list has been simplified as well.
Replace it with a list if necessary.
13 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
14. Square Fastlane icon is cut for you into
Home’s icon.
14 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
15. Make sure custom components work with
the light background.
15 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
16. Textual guidelines are simplified.
16 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
18. Remove focus when porting from Series 40
non-touch.
18 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
19. No focus in a list (1).
Highlight only in a picker (2).
19 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
20. Example: List no focus – Picker highlight.
20 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
21. Split non-touch Options menu into Options
menu and Long-press menu.
21 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
22. Long-press menu items must be repeated
in later views.
22 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
24. There are LCDUI and LWUIT UI style guides.
24 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
25. There are UI stencils for Inkscape in
addition to Adobe Illustrator.
25 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
26. Asha UI component demo application is a
Java midlet suite for LCDUI.
26 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
27. Literature and links
27 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
• UX Library for Nokia Asha:
• http://www.developer.nokia.com/Resources/Library/Asha_UI/
#!index.html
• Nokia Asha Web app UX guidelines:
• http://www.developer.nokia.com/Resources/Library/Nokia_As
ha_web_apps_library/#!design-library.html
• Nokia Asha UI component demos:
• https://projects.developer.nokia.com/asha_ui_component_de
mos
29. 29 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
The visualization changed,
but the APIs remain compatible.
30. Back-stepping is done via a dedicated
hardware Back/Exit key.
30 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux
31. Category bar can have tabs or actions.
Do not mix them.
31 © Nokia 2013 Introduction to the new Nokia Asha UI.pptx 2013-08-28 Jan Krebber @krebbixux