Mobile UI: Fruit or Delicious sweets
-
Upload
yonatan-levin -
Category
Software
-
view
505 -
download
0
Transcript of Mobile UI: Fruit or Delicious sweets
![Page 1: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/1.jpg)
Mobile UX: Fruit or Delicious Sweets
![Page 2: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/2.jpg)
Yonatan Levin
![Page 3: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/3.jpg)
> 10M usersRuby, Golang,
Python, Android, iOS
52 cities
![Page 4: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/4.jpg)
> 1000 members
Largest StudyJam
in the World
AndroidAcademy
![Page 5: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/5.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/6.jpg)
How to convert iOS to Android?
![Page 7: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/7.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/8.jpg)
You don’t!
![Page 9: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/9.jpg)
Really,Don’t!
![Page 10: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/10.jpg)
Really,Don’t!
![Page 11: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/11.jpg)
“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](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/12.jpg)
iOS & Android Different Patterns
![Page 13: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/13.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/14.jpg)
Android - Material Design
![Page 15: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/15.jpg)
Material is the metaphor Motion provides meaningBold, graphic, intentionally
Principles
![Page 16: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/16.jpg)
![Page 17: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/17.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/18.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/19.jpg)
So if i convinced you, Let’s start a work :)
![Page 20: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/20.jpg)
Real Buttons
![Page 21: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/21.jpg)
Status Bar
![Page 22: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/22.jpg)
Status Bar & ToolBar Material Design
![Page 23: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/23.jpg)
Navigation
![Page 24: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/24.jpg)
https://design.google.com/articles/design-from-ios-to-android/
![Page 25: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/25.jpg)
![Page 26: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/26.jpg)
Cards
![Page 27: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/27.jpg)
Typography
Roboto San Francisco
![Page 28: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/28.jpg)
Grids - קווי מתאר
Multipliers of 8dp
![Page 29: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/29.jpg)
Button styles
![Page 30: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/30.jpg)
Dropdown - Android only
![Page 31: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/31.jpg)
Segmented controls
![Page 32: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/32.jpg)
Dialogs
![Page 33: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/33.jpg)
Icons
![Page 34: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/34.jpg)
UI Controllers - Loading
![Page 35: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/35.jpg)
Notifications
![Page 36: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/36.jpg)
Notifications - the cool part
![Page 37: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/37.jpg)
Gestures - Long Press
![Page 38: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/38.jpg)
So , what so special about Android
![Page 39: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/39.jpg)
Apps vs. Activities
Let’s ask some one else to work hard
![Page 40: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/40.jpg)
Designing for multiple screen
![Page 41: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/41.jpg)
DP - density independent pixels
![Page 42: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/42.jpg)
SP - same as DP but scaleable
Normal Large Huge
![Page 43: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/43.jpg)
9 patch
![Page 44: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/44.jpg)
Widgets
![Page 45: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/45.jpg)
So… Now you know all major components
![Page 46: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/46.jpg)
Don’t afraid to experiment
![Page 47: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/47.jpg)
![Page 48: Mobile UI: Fruit or Delicious sweets](https://reader033.fdocuments.in/reader033/viewer/2022042619/587201581a28ab176b8b5235/html5/thumbnails/48.jpg)
Good sources
Google Material Design (General)
Google Material Design (Patterns)
androidux.com
pttrns.com
materialup.com