Designing For Android
-
Upload
two-toasters -
Category
Technology
-
view
3.151 -
download
0
description
Transcript of Designing For Android
![Page 1: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/1.jpg)
04/12/2023
TWO TOASTERS
ANDROIDDESIGNING FOR
![Page 2: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/2.jpg)
WHO ARE YOU?
ADIT SHUKLACo-Founder & Creative Director of Two Toasters
As design lead, he oversees product conceptualization, creative strategy sessions, and visual design. He has led Two Toasters' design contribution on dozens of apps on both iOS and Android, ranging from Airbnb and Simple, to Go Try It On and Lexus.
![Page 3: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/3.jpg)
WORKED WITH…
SMASHING!
![Page 4: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/4.jpg)
BEGIN ANSWERINGWhy should I design natively for Android?
How can I start designing idiomatically?
What should I probably avoid?
Where do I begin?
DRROOOIIID
![Page 5: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/5.jpg)
USERS SPEAK IN ANDROIDNot literally, of course
But, if you don’t design with Android paradigms, you must either teach the user a new way of interacting or risk losing them entirely.
IS THERE A ROSETTA
STONE ADD ON FOR
THAT?
![Page 6: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/6.jpg)
Using elements from another platform is like forcing a toilet to flush in a different direction.
THAT’S TOTALLY NOT IDIOMATIC!
![Page 7: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/7.jpg)
LET’S START WITH BASICS TERMS
LDPI, MDPI, HDPI and XHDPI
By far, XHDPI and HDPI are the most common resolutions and LDPI is almost completely deprecated.
Ratio of screens: 3:4:6:8
THAT’S KINDA COMPLICATED.
![Page 8: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/8.jpg)
WHAT THE HECK?
LET’S START WITH BASICS TERMS
Density Independent Pixels (DP)
8 DP @ LDPI = 6 px
8 DP @ MDPI = 8 px
8 DP @ HDPI = 12 px
8 DP @ XHDPI = 16 px
![Page 9: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/9.jpg)
INTERESTING!
LET’S START WITH BASICS TERMS
Back Up
• Always go to previous screen
• Can navigate to outside the app
• Always go higher within screen hierarchy
• Can only navigate inside app
![Page 10: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/10.jpg)
WHERE AM I?
SOME BASIC NAVIGATION• Action bar
• Action bar - Tabs
• Action bar – View Control
• Drawer
![Page 11: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/11.jpg)
THE ACTION BAR
OH YEAH, LET’S SEE SOME ACTION.
As defined by Android guidelines:
The action bar is a
dedicated piece of real
estate at the top of each
screen that is generally
persistent throughout the
app.
“
![Page 12: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/12.jpg)
THE ACTION BAR
AH! SO THAT’S WHERE IT GOES.
It is 48dp tall in portrait
![Page 13: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/13.jpg)
THE ACTION BAR
This is basically what it looks like
OK, GOT IT!
![Page 14: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/14.jpg)
THE ACTION BAR
COOL, SO I GUESS I CAN TAP ON IT?
Usually the application icon
![Page 15: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/15.jpg)
THE ACTION BAR
MAKES A WHOLE LOT MORE SENSE.
When in screens further down in navigation stack, the up carat will typically be placed here.
![Page 16: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/16.jpg)
THE ACTION BAR
Obviously, this is where you see the screen title.
It can also be great place for logotype.
CONTEXTUAL!
![Page 17: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/17.jpg)
THE ACTION BAR
These icons represent the actions the user is most likely going to require on this screen
SO LIKE REFRESH, SEARCH..ETC?
![Page 18: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/18.jpg)
THE ACTION BAR
Any action buttons that don’t fit on screen get placed in overflow menu
SWEET, I CAN ADD A BUNCH OF ACTIONS.
![Page 19: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/19.jpg)
TAB NAVIGATION
SO TABS GO UP TOP?It’s also 48dp tall in portrait
![Page 20: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/20.jpg)
TAB NAVIGATION
Tab bar styling is very simplified. Interestingly, when user switches to landscape or tablet, the tab bar gets incorporated into action bar.
PRETTY SIMPLE.
![Page 21: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/21.jpg)
TAB NAVIGATION
Scrollable tab bars offer you more space, but obfuscates the total number of tabs. This is 32dp tall.
IT SLIDES!
![Page 22: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/22.jpg)
VIEW CONTROL
Instead of tabs or drop downs, use the view control spinner to handle modifications to the view below
LIGHTWEIGHT.
![Page 23: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/23.jpg)
EASY PEEZY.
SIDE DRAWER
It’s important to note that most side drawer libraries on Android normally require the action bar
![Page 24: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/24.jpg)
THINGS TO AVOID• Chevrons
• Back Buttons
• Text Action Icons
• Rounded App Icons
AH, THE BAD SIDE OF TOWN.
![Page 25: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/25.jpg)
CHEVRONSThese are a very common design element, but don’t belong in Android. List actions that require tapping behavior should be obvious.
YOU’RE KIDDING!
![Page 26: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/26.jpg)
BACK BUTTONSRely on up and back behavior rather than designing back buttons. This is, very specifically, iOS elements.
WE COVERED THIS?
![Page 27: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/27.jpg)
TEXT ACTIONSButtons in the action bar should be icons. For save or done actions, use contextual action bar. For next buttons, rely on bottom navigation.
ICONS ARE HARD…
![Page 28: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/28.jpg)
ROUNDED APP ICONSAndroid gives you the ability to use transparent PNGs so you can shape icons in any format.
I’M SO USED TO ROUNDED SQUARES!
![Page 29: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/29.jpg)
WHERE TO BEGIN• The Set Up
• Style Guide
• Fragmentation
• Multiple Resolutions
• Landscape
• Tablet
• Slicing for Multiple Resolutions
• 9Patching
I’M READY!
![Page 30: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/30.jpg)
THE SETUP• Personally…Photoshop
• Use a single PSD and a combo of layer comps with smart objects to keep app-wide easy
• Designing at XHDPI (768x1280px)
• 144DPI
• Use Skala Preview
• Use Invision for prototyping
TAKING NOTES.
![Page 31: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/31.jpg)
STYLE GUIDE• Simplify
• Simplify
• Simplify
• Everyone’s going simple
GEEZ, WE GET IT…YOU LIKE THINGS SIMPLE
![Page 32: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/32.jpg)
TWEET TWEET.
![Page 33: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/33.jpg)
A TO THE Z.
![Page 34: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/34.jpg)
SPOT-IFY
![Page 35: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/35.jpg)
MULTIPLE RESOLUTIONS
XHDPI
25.9%
HDPI
38.5%
MDPI
23.4%
THAT’S LIKE 88% OF USERS COVERED?
![Page 36: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/36.jpg)
MULTIPLE RESOLUTIONS
• No easy answer, other than to
try and design a fluid layout.
• Use fewer textures and
patterns
• Use 9patches (stretchable
assets)
WHAT’S A 9PATCH?
![Page 37: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/37.jpg)
LANDSCAPE LAYOUTS• Absolutely necessary and
expected
• Don’t just stretch
elements, try to see if a
new layout emerges that
works better in landscape
DO I REALLY HAVE TO WORRY ABOUT IT?
![Page 38: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/38.jpg)
TABLETS• Try to compound layouts
for large tablets
• For smaller tablets, you
should be fine scaling up
your HDPI or XHDPI assets
and keeping the design
relatively the same
• This is where planning for
landscape layouts pays off
THEY’RE KINDA POPULAR RIGHT NOW…
![Page 39: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/39.jpg)
SLICING FOR MULTIPLE RESOLUTIONS• A Tutorial
SWEET, TIME FOR PHOTOSHOP!
![Page 40: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/40.jpg)
9PATCHING
SWEET DESIGN BRO.
9patching lets you compress an element like this to stretch without artifacts.
![Page 41: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/41.jpg)
9PATCHING
OK?
First, reduce the element down to as small as you can get it with stretchable areas in mind.
![Page 42: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/42.jpg)
9PATCHING
FREE STUFF! NICE.
Drop it into the 9patch utility (available for free)
![Page 43: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/43.jpg)
9PATCHING
SAY THAT AGAIN?
Draw outlines for portions of the element that you want stretchable.
![Page 44: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/44.jpg)
9PATCHING
THAT MAKES SENSE…
Right and bottom edge define the area that’s “content.”
Top and left edge define areas that are stretchable.
![Page 45: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/45.jpg)
TO CONCLUDE…It’s important to consider the idiomatic approach because it simplifies the interactions you have to worry about. However, it’s not the end all be all. Be cognizant of these idioms so you can push them further.
DONE YET?
![Page 46: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/46.jpg)
Q&A TIME OOO! PICK ME FIRST!
![Page 47: Designing For Android](https://reader035.fdocuments.in/reader035/viewer/2022070318/556f74c6d8b42a9d338b5232/html5/thumbnails/47.jpg)
TWO TOASTERS
Thank You!