Ux Example
-
Upload
johnson-wang -
Category
Technology
-
view
263 -
download
0
description
Transcript of Ux Example
Ux Johnson’sUI Design Example
2004 - 2012
What is this?
Software Designthe process of making dream come true...
There are
Three Stage of Dreaming
Imagination Drawing
Do It
And it repeats over and over again
Imagination Drawing Do It
Imagination
Drawing
Do It
ImaginationDrawing Do It Imagination
Drawing
Imagination
Drawing Do It
!
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
The Environment
The Environment
The Environment
The People
EngineerQuick
Efficiency
Cheap
BusinessQuick
Communication
OthersQuick
SalesmanProject Manager
Programmer
HW EngineerIT Guys
Accounting
Marketing Operator
The Time
Primary Traffic
Secondary Traffic
Write Down the Definition
• The App is...
Not a Commercial App.
a Tool.
Quick.
Imagination
Drawing
Do It
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
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.
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.
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.
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.
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.
Time Region
Category & Menu
Action
Shop cart
Active while checkout is available.
The Animation shows where the view go, which indicate how user should navigate between views.
icon
Easy to identify.
Easy to tell the key function from icon.
Without Chinese Text.
Better jump out of page.
Easy to identify.
Easy to tell the key function from icon.
Without Chinese Text.
Better jump out of page.
Survey Concept
DesignAcceptable...
1st. it’s Food2nd. Popup!
Food + Popup
it’s Food
Popup!
it’s Food
Imagination Drawing
Do It
Demo
Implementation
How to layout the App?
The difference between Android & IOS?
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
Visualized Components
NavigationBar: UINavigationBar | FrameLayout
BillItemListView: TableView | ListLayout
CategoryView: UIScrollView | PageView
MenuRowView: UITableViewCell | GridLayout
Toolbar: UIToolbar | FrameLayout
Difference Between Android & IOSPlan 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
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
ProductProductProduct
Product
Promotions
ProductProductProductPromotion
Content
User Data
Orders
ProductProductProduct
Order
{Store : {
Products: [{ /* Product */ }, { /* Product */ } ...
],Promotions: [
{ /* Promotion */ } ...]
}}
{User : {
Orders: [{ /* Order */ } ...
]}
}
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.
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.
Some Hints
Some Hints
Don’t block user from operating UIShow Layout ASAP.Cache regular data.Load without blocking other UI.Update existed UI instead of re-generate it.
Some Hints
Only key process needs to be BRIEFKeep key process on the focus line: left-top to right-bottom.There’s always only one primary process for a view.Hide advance features.
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.
Some Hints
Animate for showing how App works, not for fancy.
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.