mobile ui: fruit or delicious sweets

49
Mobile UX: Fruit or Delicious Sweets

Upload: yonatan-levin

Post on 08-Jan-2017

505 views

Category:

Software


0 download

TRANSCRIPT

Page 1: Mobile UI: Fruit or Delicious sweets

Mobile UX: Fruit or Delicious Sweets

Page 2: Mobile UI: Fruit or Delicious sweets

Yonatan Levin

Page 3: Mobile UI: Fruit or Delicious sweets

> 10M usersRuby, Golang,

Python, Android, iOS

52 cities

Page 4: Mobile UI: Fruit or Delicious sweets

> 1000 members

Largest StudyJam

in the World

AndroidAcademy

Page 5: Mobile UI: Fruit or Delicious sweets

Our menu?

➔ How to convert iOS to Android➔ Know the rules➔ Talk language of your users➔ Design Patterns

Page 6: Mobile UI: Fruit or Delicious sweets

How to convert iOS to Android?

Page 7: Mobile UI: Fruit or Delicious sweets

Real story:

Product: We have new featureDesign: Here the mockupAndroid Developer: It’s iOS mockupDesign: No problem. Use the same for Android.

Page 8: Mobile UI: Fruit or Delicious sweets

You don’t!

Page 9: Mobile UI: Fruit or Delicious sweets

Really,Don’t!

Page 10: Mobile UI: Fruit or Delicious sweets

Really,Don’t!

Page 11: Mobile UI: Fruit or Delicious sweets

“It’s important to understand the idioms and behaviors of each platform

before you start design and development.”

Page 12: Mobile UI: Fruit or Delicious sweets

iOS & Android Different Patterns

Page 13: Mobile UI: Fruit or Delicious sweets

General Style

iOS - flatter design style driver by 3 core philosophies: deference, clarity and depth.

Content is a king

Page 14: Mobile UI: Fruit or Delicious sweets

Android - Material Design

Page 15: Mobile UI: Fruit or Delicious sweets

Material is the metaphor Motion provides meaningBold, graphic, intentionally

Principles

Page 16: Mobile UI: Fruit or Delicious sweets
Page 17: Mobile UI: Fruit or Delicious sweets

Trello

“One of our guiding themes during the Material redesign was simplicity, and we think this paid off nicely.”

Hamid Mobile Lead

Page 18: Mobile UI: Fruit or Delicious sweets

Trello

10% increase in sessions per user

per week.

42% more boards created per

session.

63% more people added to boards

per session.

Page 19: Mobile UI: Fruit or Delicious sweets

So if i convinced you, Let’s start a work :)

Page 20: Mobile UI: Fruit or Delicious sweets

Real Buttons

Page 21: Mobile UI: Fruit or Delicious sweets

Status Bar

Page 22: Mobile UI: Fruit or Delicious sweets

Status Bar & ToolBar Material Design

Page 23: Mobile UI: Fruit or Delicious sweets

Navigation

Page 24: Mobile UI: Fruit or Delicious sweets

https://design.google.com/articles/design-from-ios-to-android/

Page 25: Mobile UI: Fruit or Delicious sweets
Page 26: Mobile UI: Fruit or Delicious sweets

Cards

Page 27: Mobile UI: Fruit or Delicious sweets

Typography

Roboto San Francisco

Page 28: Mobile UI: Fruit or Delicious sweets

Grids - קווי מתאר

Multipliers of 8dp

Page 29: Mobile UI: Fruit or Delicious sweets

Button styles

Page 30: Mobile UI: Fruit or Delicious sweets

Dropdown - Android only

Page 31: Mobile UI: Fruit or Delicious sweets

Segmented controls

Page 32: Mobile UI: Fruit or Delicious sweets

Dialogs

Page 33: Mobile UI: Fruit or Delicious sweets

Icons

Page 34: Mobile UI: Fruit or Delicious sweets

UI Controllers - Loading

Page 35: Mobile UI: Fruit or Delicious sweets

Notifications

Page 36: Mobile UI: Fruit or Delicious sweets

Notifications - the cool part

Page 37: Mobile UI: Fruit or Delicious sweets

Gestures - Long Press

Page 38: Mobile UI: Fruit or Delicious sweets

So , what so special about Android

Page 39: Mobile UI: Fruit or Delicious sweets

Apps vs. Activities

Let’s ask some one else to work hard

Page 40: Mobile UI: Fruit or Delicious sweets

Designing for multiple screen

Page 41: Mobile UI: Fruit or Delicious sweets

DP - density independent pixels

Page 42: Mobile UI: Fruit or Delicious sweets

SP - same as DP but scaleable

Normal Large Huge

Page 43: Mobile UI: Fruit or Delicious sweets

9 patch

Page 44: Mobile UI: Fruit or Delicious sweets

Widgets

Page 45: Mobile UI: Fruit or Delicious sweets

So… Now you know all major components

Page 46: Mobile UI: Fruit or Delicious sweets

Don’t afraid to experiment

Page 47: Mobile UI: Fruit or Delicious sweets