About how I design an app, the flow and how to implement for IOS and Android platform.

1. UxJohnson’s
UI Design Example
2004 - 2012

2. What is this?

3. Software Design
the process of making dream come true...

4. There are
Three Stage of Dreaming
Imagination Drawing
Do It

5. And it repeats
over and over again
Imagination Drawing Do It
Imagination
Drawing
Do It
Imagination
Drawing Do It Imagination
Drawing

6. Imagination
Drawing Do It
!

7. Providing
Fresh Cooked
Meals
The Requirements Of
FamilyMart Pre-Order App
Too many
people
wait in line
Pre-order with mobile phone
Prepare before customer come
Arrange orders automatically
Checkout quickly

8. The Environment

9. The Environment

10. The Environment

11. The People
Engineer
Quick
Efficiency
Cheap
Business
Quick
Communication
Others
Quick
Salesman
Project Manager
Programmer
HW Engineer
IT Guys
Accounting
Marketing Operator

12. The Time
Primary Traffic
Secondary Traffic

13. Write Down the Definition
• The App is...
Not a Commercial App.
a Tool.
Quick.

14. Imagination
Drawing
Do It

15. Possible Functions
Search Store
Browse Menu
Request Order
Pay on-line
Calculate Calories
Show Product Details
“Like” the Product on Facebook
Promote New Product
Advertising via Push Notification
VIP Card, Credits, Coupons

16. Possible Functions
Search Store - There’s only one store.
Browse Menu
Request Order
Pay on-line
Calculate Calories - Not necessary for an order tool.
Show Product Details - Most product content is easy to tell via name.
“Like” the Product on Facebook - Not important for a tool.
Promote New Product - It can be done by simply change the photo.
Advertising via Push Notification - Not commercial app.
VIP Card, Credits, Coupons - Not commercial app.

17. Time Region
Category & Menu
Action
Shop cart Summaries selected items
Filter menu for different sales region
For product selection.
Works as a list table.
Checkout, setup and check history.
Works like toolbar.

18. Shop cart
Time Region
Category & Menu
Action
Tap to open / close
Swipe to delete (hidden)
Show Subtotal,Total Amounts
Adjust Quantity
All shop cart feature come from top.
The badge indicates how it works.
The “- , +” button tells user the quantity is
changeable.
The animation of blue area indicates user
may swipe down to open it.

19. Time Region
Category & Menu
Action
Shop cart
Swipe to change filter
Tap also works.
Allow un-limited time region. (or category)
The triangle indicates current region.
And it also hints the following content is
under the selected region.

20. Time Region
Category & Menu
Action
Shop cart
Tap photo to add. (need try)
Tap “-” badge to remove.
Swipe vertically to navigate.
Icon view allows more product in a page.
Quantity over photo also indicates which
product is selected.
The background style tells the menu may
have more below.

21. Time Region
Category & Menu
Action
Shop cart
Active while
checkout is
available.

22. The Animation shows
where the view go,
which indicate how
user should navigate
between views.

23. icon
Easy to identify.
Easy to tell the key function from icon.
Without Chinese Text.
Better jump out of page.

24. Easy to identify.
Easy to tell the key function from icon.
Without Chinese Text.
Better jump out of page.
Survey Concept
Design
Acceptable...
1st. it’s Food
2nd. Popup!
Food + Popup
it’s Food
Popup!
it’s Food

25. Imagination Drawing
Do It

26. Demo

27. Implementation
How to layout the App?
The difference between Android & IOS?

28. Visualized Components
Find your visualized components.
It is possible to find views to be combined
together as an interact unit.
Name it, and sync through Photoshop group
name, UI layout item name, class define in
program, with same define.
Such as ProductView

29. Visualized Components
NavigationBar: UINavigationBar | FrameLayout
BillItemListView:TableView | ListLayout
CategoryView: UIScrollView | PageView
MenuRowView: UITableViewCell | GridLayout
Toolbar: UIToolbar | FrameLayout

30. Difference Between Android & IOS
Plan the layout for each platform,
sync the abstract idea of virtual components.Window
UIView
UINavigationBar
UIScrollView
UIScrollView: Horizontal
UITableView UITableView
UIToolbar
UITableViewCell
IOS
Navigator
CategoryView
MenuView
ProductView
ToolbarView
ListLayout
FrameLayout
Container
PageView
GridLayout GridLayout
FrameLayout
Android
Navigator
CategoryView
MenuView
ProductView
ToolbarView

31. App Core
Store
Difference Between Android & IOS
Define an abstract data model for both
runtime,
storage and data transmission.
All platform should share the same
abstract data model design, but the
implementation may be different.
Better not use the JSON lib output as
runtime data model.
Products
Product
ProductProduct
Product
Promotions
Product
ProductProductPromotion
Content
User Data
Orders
Product
Product
Product
Order
{
Store : {
Products: [
{ /* Product */ }, { /* Product */ } ...
],
Promotions: [
{ /* Promotion */ } ...
]
}
}
{
User : {
Orders: [
{ /* Order */ } ...
]
}
}

32. AppDelegate
Difference Between Android & IOS
Window
UIView
UINavigationBar
UIScrollView
UIScrollView: Horizontal
UITableView UITableView
UIToolbar
UITableViewCell
IOS
RootViewController UIMenuViewController
init
Use the MVC framework suggested by
IOS design guide lines. Better not to make
your own UI framework.

33. Difference Between Android & IOS
ListLayout
FrameLayout
Container
PageView
GridLayout GridLayout
FrameLayout
Activity
Fragment Fragment
init
Use fragment for each virtual component
instead of use activity directly.The layout
flexibility will be better.
In Android framework, resource for an UI will be
divide into several part, such as layout.xml,
shap.xml, images mapping, fragment and data
adapter for interface.You better organize a naming
system to management them all together.

34. Some Hints

35. Some Hints
Don’t block user from operating UI
Show Layout ASAP.
Cache regular data.
Load without blocking other UI.
Update existed UI instead of re-generate it.

36. Some Hints
Only key process needs to be BRIEF
Keep key process on the focus line:
left-top to right-bottom.
There’s always only one primary process for a view.
Hide advance features.

37. Some Hints
Layout first, then color...
Design the layout to highlight key feature.
Use every possible skill to make operation flow work before adding any
color or texture.
Leave color for content, not interface.
Mostly, color used as representation of states between contents.

38. Some Hints
Animate for showing how App works,
not for fancy.

39. Some Hints
App is personal, forget about portal.
People pay for useful tool, and carry around.
No one likes to carry DM around.
Mobile phone isn’t made for share, but for personal.
People share by network, not by passing the phone itself.
Operate immediately without login again and again.
Provide key function at first sight, not operation menu.