Designing for Tablet - Patterns and Best Practices

Post on 11-Feb-2017

67 views 5 download

transcript

MAR IO V IV IAN IT E C H N O L O G Y E V A N G E L I S T, A M A Z O N A P P S T O R E U K

@mariux theone http://www. l inke d in .com/ in/ mar iov iv ian i

OPT IM I S ING APPS U I

FOR F IRE TABLETS

IT ’S A -ME!

Mar io V iv ian i

Technology Evangelist, Amazon Appstore UK

@mariuxtheone

Android Developer from 201095+ apps published12.000.000+ downloadsGoogle Developer Expert 2013-15Startup Founder, Co-WorkerSpeaker at: Droidcon, Android Dev Days, Google I/O 2015

ANDROID PHONES & TABLETS

FIRE TV & FIRE TV STICK

BLACKBERRYFIRE TABLETS

FIRE TABLET 7’’

J e f f B e z o s

A m a zo n Q 3 Ea r n i n g s , O c t 2 0 1 5

FIRE SETS A NEW BAR FOR WHAT

CUSTOMERS SHOULD EXPECT FROM A

LOW-COST TABLET.

THIS IS ONE MORE STEP IN OUR

MISSION TO BRING CUSTOMERS

PREMIUM PRODUCTS AT

NON-PREMIUM PRICES.

#1 SELLING CONSUMER ELECTRONIC

DEVICE ON AMAZON.COM

VOICE NOTEPAD PRO (2010)

Voice Recognition

M A I N F E AT U R E S

Dictate your Notes

Internal Database

Save, Retrieve, Delete Notes

Easy, User-Friendly Interface

VOICE NOTEPAD PRO DOWNLOADS

0

50

100

150

200

250

300

350

400

450

2010 2011 2012 2013 2014 2015 2016

Downloads

Android 4.0 Announced

Material Design

Announced

TO PUSH THE BOUNDARIES, YOU NEED TO KNOW WHERE THE EDGES ARE.

M a r k B o u l t o n

D e s i g n e r

U S E A F L E X I B L E L AY O U T

ConstraintLayout

RelativeLayout

FrameLayout

GridLayout

Fragments

UNDERSTANDING

SCREEN DENSITY

PIXELS

RGB

DOTS PER INCH

FIRE HD 8 FIRE HD 10

1280 X 800 PX

FIRE HD 8 FIRE HD 10

1’’

189 DPI 149 DPI

density–independent

pixels

dp (or dip)

dpVIRTUAL PIXELS

MAINTAIN SCALING

OF UI COMPONENTS

MEDIUM DENSITY

DISPLAY (160 DPI)HIGH DENSITY

DISPLAY (240dpi)

1dp

1dp

1dp

1dp

160

DPI

320

DPI

1 dp

1 dp

1 px

1 px

1 dp

2 px

2 px

1 dp

px = dp * (DPI/160)

2 = 1 * (320/160)

px = dp * (DPI/160)

USING

QUALIFIERS

SCREEN DENSITY QUALIF IERS

ldpi mdpi hdpi xhdpimdpi hdpi

FIRE 7’’

FIRE HD 10

FIRE HD 8

( tvdpi )

GENERAL SCREEN S IZE QUALIF IERS

small normal large xlarge

2’’ 4’’ 7’’ 10’’

FIRE 7’’

FIRE HD 8FIRE HD 10

DENSITY, SCREEN SIZE…

WHAT’S THE

BEST SOLUTION?

SMALLEST SCREEN WIDTH QUALIF IERS

Width of the

smallest side

in dp units

SMALLEST SCREEN WIDTH QUALIF IERS

sw800dpsw800dpsmallest

width

width of

smallest side

in dp units

HOW TO CALCULATE SMALLEST SCREEN WIDTH

FIRE HD 10

1280x800 px

149 DPI

? dp

HOW TO CALCULATE SMALLEST SCREEN WIDTH

px = dp * (DPI/160)

HOW TO CALCULATE SMALLEST SCREEN WIDTH

800= dp * (149/160)

dp = 800 / 0.93

= 860.21

sw800dp

SMALLEST SCREEN W IDTH QUAL IF I ERS – F IRE TABLETS

sw600dp sw800dp

FIRE 7’’

FIRE HD 8

FIRE HD 10

FULLY SUPPORT

FIRE TABLETS

COMBINE D IFFERENT STRATEGIES

GRAPHICAL ASSETS

res/drawable-hdpi (Fire HD 8)

res/drawable-mdpi (Fire and Fire HD 10)

RESOURCE FOLDERS

LAYOUT FOLDERS

res/layout-sw600dp (Fire and Fire HD 8)

res/layout-sw800dp (Fire HD 10)

D E C L A R E S U P P O RT F O R TA B L E T S

I N A N D R O I D M A N I F E S T

<supports-screens

android:smallScreens="false"

android:normalScreens="false"

android:largeScreens="true"

android:xlargeScreens="true"

android:requiresSmallestWidthDp="600"/>

OPTIMIZE YOUR ICON

Fire HD 8

hdpi

xhdpi

Fire 7’’

Fire HD 10

TOOLS TO HELP YOU

MAKE GREAT APP ICONS

OPTIMIZE YOUR ICON

bit.ly/MakeGreatIcons

bit.ly/LauncherIconGuidelines

FIRE OS LAUNCHER ICONS

GUIDELINES

THANK YOU!

Mario Viviani@mariuxtheone

@AmazonAppDev

vivianim@amazon.co.uk

developer.amazon.com/appstore bit.ly/AmazonSummitFeedback