Day2_1 ui deep dive fundamentals

555 views

Published on

http://winstore.vn

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
555
On SlideShare
0
From Embeds
0
Number of Embeds
35
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Day2_1 ui deep dive fundamentals

  1. 1. LCDUI and LWUIT UI components in Nokia Asha UI Cao Phong Developer Tech Support Manager Aug 07, 2013
  2. 2. Overview • What’s new? • Essentials • Nokia UI • LCDUI • LWUIT • Patterns • Take home messages
  3. 3. The visualization changed, but the APIs remain compatible.
  4. 4. What’s new?
  5. 5. Design drivers are direct access and direct manipulation.
  6. 6. The Swipe is reserved.
  7. 7. The screen is optimized for mobility, convenience and effectiveness.
  8. 8. Back-stepping is done via a dedicated hardware Back/Exit key.
  9. 9. Obey the minimum touch area.
  10. 10. Push notification lets people listen to your service if there is something new.
  11. 11. Toolbar area can host actions or tabs, but no combination of those.
  12. 12. Indicating selected items has been simplified.
  13. 13. Launcher icon is cropped automatially from Fastlane icon.
  14. 14. Make sure custom components work with the light background.
  15. 15. Essentials
  16. 16. Use standard gestures as intended Drag Move item Swipe Flick Scroll quickly Pinch open Zoom in Pinch close Zoom out Press down Open, select Long press Opens item menu
  17. 17. Only one application can run at a time.
  18. 18. Portrait and landscape orientation are supported.
  19. 19. Status bar, Header bar and optional toolbar area are chrome.
  20. 20. Options menu contains only actions affecting the entire view.
  21. 21. Context menu is only a collection of shortcuts of single item actions.
  22. 22. Treat LWUIT and LCDUI as separate offerings – do not mix them.
  23. 23. Select your approach according to your requirements. Custom UI on Canvas LCDUI components LWUIT components
  24. 24. Exercise: Do you use LWUIT or LCDUI or full custom solution? Why?
  25. 25. Nokia UI
  26. 26. Category bar can have tabs or actions. Do not mix them.
  27. 27. If there is no Category bar, an Option’s item will be shown as textual button.
  28. 28. PopupList may replace the long-press menu when necessary.
  29. 29. Push notification shows only your service’s information, no app statuses.
  30. 30. LCDUI
  31. 31. LCDUI components are backward compatible.
  32. 32. LCDUI requires only little layout work when using components.
  33. 33. LCDUI is based on few view types. Displayable ScreenCanvas With chrome Full screen Alert List Form TextBox Choice Group Date Field Text Field Gauge String Item Image Item Custom Item Spacer Implicit choice Exclusive choice Multiple choice
  34. 34. There are 2 types of displayable (views). Displayable ScreenCanvas With chrome Full screen Alert List Form TextBox Choice Group Date Field Text Field Gauge String Item Image Item Custom Item Spacer Implicit choice Exclusive choice Multiple choice
  35. 35. Screens use pre-defined elements, but in a canvas you can draw freely.
  36. 36. From UX point of view, there 2 different Canvases. Displayable ScreenCanvas With chrome Full screen Alert List Form TextBox Choice Group Date Field Text Field Gauge String Item Image Item Custom Item Spacer Implicit choice Exclusive choice Multiple choice
  37. 37. Use header and optionally the toolbar area to maintain look and feel.
  38. 38. Alerts can only be shown inside an application. Displayable ScreenCanvas With chrome Full screen Alert List Form TextBox Choice Group Date Field Text Field Gauge String Item Image Item Custom Item Spacer Implicit choice Exclusive choice Multiple choice
  39. 39. In Alerts, place positive action at the top and negative action at the bottom.
  40. 40. Lists allow only one list item type. Displayable ScreenCanvas With chrome Full screen Alert List Form TextBox Choice Group Date Field Text Field Gauge String Item Image Item Custom Item Spacer Implicit choice Exclusive choice Multiple choice
  41. 41. Implicit choice Lists are made for drill down flows.
  42. 42. Exclusive choice List must have always exactly one item highlighted.
  43. 43. Multiple selection list should have select/unselect all actions in Options.
  44. 44. Multiple choice List and Exclusive choice List require a ”Done” button.
  45. 45. No focus in a list (1). Highlight only in a picker (2).
  46. 46. A form is the most versatile screen to use with LCDUI components. Displayable ScreenCanvas With chrome Full screen Alert List Form TextBox Choice Group Date Field Text Field Gauge String Item Image Item Custom Item Spacer Implicit choice Exclusive choice Multiple choice
  47. 47. Popup ChoiceGroup is preferred over the exclusive ChoiceGroup.
  48. 48. The DateField components can only be used for setting a date and time.
  49. 49. Hint text disappears now immediately when opening TextField.
  50. 50. Gauge can be a slider or a progress indicator.
  51. 51. StringItem displays text and allows hyperlinks and button creation.
  52. 52. ImageItem crops the image if necessary.
  53. 53. CustomItem allows drawing new elements e.g. a switch.
  54. 54. Spacer adds space between two Form items.
  55. 55. A text box can show editable text or non-editable text. Nothing else. Displayable ScreenCanvas With chrome Full screen Alert List Form TextBox Choice Group Date Field Text Field Gauge String Item Image Item Custom Item Spacer Implicit choice Exclusive choice Multiple choice
  56. 56. Text color is changed according to the text state: non-editable, edit, edited.
  57. 57. Ticker is available in Canvas, List, Form and TextBox. Displayable ScreenCanvas With chrome Full screen Alert List Form TextBox Choice Group Date Field Text Field Gauge String Item Image Item Custom Item Spacer Implicit choice Exclusive choice Multiple choice
  58. 58. Ticker always appears right below the Header bar.
  59. 59. LWUIT
  60. 60. LWUIT is based on components instead of ready screens.
  61. 61. LWUIT runs in LCDUI’s Canvas with or without Canvas’ chrome.
  62. 62. Styled components are made of LWUIT components but named differently.
  63. 63. LWUIT (Feedback) Banner is only for in-app-notification.
  64. 64. Button may contain text or icon and can be customized.
  65. 65. Dialogs should have not more than one accent button – if any.
  66. 66. Grid or table should not exceed the screen horizontally.
  67. 67. Usually the header is sticky, but not all views require a header.
  68. 68. Group header groups content and does not separate single items.
  69. 69. Use Label to give components a title.
  70. 70. Lists can be customized to create fancy, exclusive and multiple choice lists.
  71. 71. Picker should be opened in a new view and not be an in-line-edit item.
  72. 72. Usually a determinate progress bar is preferred over a spinner.
  73. 73. Use Slider for a continuous range of numerical values.
  74. 74. LWUIT long-press menu and LCDUI long-press menu work in the same way.
  75. 75. Tabs can use text or icons and they can be customized.
  76. 76. Switch should only be used with truly opposite items.
  77. 77. Text field is for one line. Text area is for multiple lines.
  78. 78. Patterns
  79. 79. Indicate empty states and enable people to add content there.
  80. 80. Highlight errors and help fixing them; either with an Alert or inline.
  81. 81. In full screen view show the chrome before you hide it.
  82. 82. “Delete” should have a confirmation. “Remove” does not require a query.
  83. 83. If people can populate a list, enable clean sweep.
  84. 84. Refresh content by drag-down from top. Add more content by drag-up from bottom.
  85. 85. Add Cancel to each individual process.
  86. 86. Drill down means also a clear single back-stepping path.
  87. 87. Tabs are not inherited to the next lower hierarchy level.
  88. 88. Since filtering by categories is based on textual items, it may replace tabs.
  89. 89. Progressive Search is ideal for large internal content.
  90. 90. Take home messages
  91. 91. The visualization changed, but the APIs remain compatible.
  92. 92. Back-stepping is done via a dedicated hardware Back/Exit key.
  93. 93. Treat LWUIT and LCDUI as separate offerings – do not mix them.
  94. 94. Literature and links • 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_A sha_web_apps_library/#!design-library.html • Nokia Asha UI component demos: • https://projects.developer.nokia.com/asha_ui_component_de mos
  95. 95. THANK YOU! Nokia Vietnam – Developers Experience: https://www.facebook.com/groups/viet.nok.dev/

×