Tweet
Tweet

Slide 1

Slide 1 text

㥶⡦鏤鎙"OESPJE6* ⢪欽4LFUDI CC Image courtesy of Yuri Samoilov on Flickr

Slide 2

Slide 2 text

"OESPJE 4LFUDI 3FTPVSDFT

Slide 3

Slide 3 text

8IBUJT%1

Slide 4

Slide 4 text

8IBUJT%1*

Slide 5

Slide 5 text

DPI : Dots Per Inch

Slide 6

Slide 6 text

DPI : Dots Per Inch MDPI HDPI XHDPI XXHDPI XXXHDPI DPI 160 240 320 480 640

Slide 7

Slide 7 text

ፘݶ Size ጱ瑽粙牧ࣁ犋ݶጱ DPI Ӥ

Slide 8

Slide 8 text

ྋ嘦䛑扗ฎ

Slide 9

Slide 9 text

)FMMP%1

Slide 10

Slide 10 text

DP DIPฎ Density-independent pixel DP 傶蒅硈薹ຉଶ牧ፓጱ傶ᰁ玕憙憽Ӥጱय़ੜ 獍ୗ px = dp * (dpi / 160)

Slide 11

Slide 11 text

MDPI HDPI XHDPI XXHDPI XXXHDPI DPI 160 240 320 480 640 SCALE 1x 1.5x 2x 3x 4x DP 100dp 100dp 100dp 100dp 100dp px 100px 150px 200px 300px 400px

Slide 12

Slide 12 text

晝꬗銴㢵㣐

Slide 13

Slide 13 text

MDPI 1:1 犥 Sony Z3 傶ֺ 物 DPI物XXHDPI 3x 䋿褬疳ੑ物1920px * 1080px 蕣֢疳ੑ物 640px * 360px

Slide 14

Slide 14 text

MDPI 1:1 অ蒂物犋አ px 旉矦 dp 瓥蒂物ࣁ戔懯碻牧毆薩碻०፥

Slide 15

Slide 15 text

螕䛑介手秚 犥 Sony Z3 傶ֺ 物 DPI物XXHDPI 3x 䋿褬疳ੑ物1920px * 1080px 蕣֢疳ੑ物1920px * 1080px

Slide 16

Slide 16 text

螕䛑介手秚 অ蒂物戔懯碻牧毆薩犋०፥ 瓥蒂物 px 襑旉矦 dp

Slide 17

Slide 17 text

鏤鎙㤛♶♳⿡

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

⡹铞➊랃䧮聃♶䥢

Slide 22

Slide 22 text

Tab Toolbar (Action bar) Status Bar List

Slide 23

Slide 23 text

Grid Card

Slide 24

Slide 24 text

Navigation Drawer Dialog

Slide 25

Slide 25 text

Menu

Slide 26

Slide 26 text

Floating action button

Slide 27

Slide 27 text

5PPMT

Slide 28

Slide 28 text

Google Material Design

Slide 29

Slide 29 text

Roboto & Noto Sans

Slide 30

Slide 30 text

Skala Preview 1. Macᒒ Sketch plugin牏ಋ秚ᒒ ӥ斉 Android APP 2. ಋ秚膏襎脲ֵአፘݶጱ Wifi 翕᪠ 3. ࣁ Sketch 螡䢔ᥝ毆薩ጱ Artboard 4. 毆薩盠蝧棎物CMD + P 5. ෝಋ秚Ӥ毆薩向ᶎ

Slide 31

Slide 31 text

4UZMF

Slide 32

Slide 32 text

Grid Baseline grid 傶 8dp * 8dp
 
 MDPI 1x物 8px * 8px
 XHDPI 2x物 16px * 16px
 XXHDPI 3x物 24px * 24px

Slide 33

Slide 33 text

Margin • Margin: 16dp • Content Left Margin: 72dp

Slide 34

Slide 34 text

Height • Status bar: 24dp • Toolbar(ActionBar): 56dp • Title and list items: 72dp • Subtitle: 48dp • Space between content areas: 8dp

Slide 35

Slide 35 text

Icon • 䋿褬疝ଶ 48dp • 獉਻疝ଶ 24dp

Slide 36

Slide 36 text

Button • 䋿褬ṛଶ 48dp • 獉਻ṛଶ 36dp • 磧ੜ疳ੑ物48dp * 48dp

Slide 37

Slide 37 text

Font • sp 傶ਁ羷ጱ㻌֖ • 1px = 1dp = 1sp • sp 䨝狅ᆙֵአᘏጱ羬翄戔 ਧ㬵婘硯牐

Slide 38

Slide 38 text

Color Android 氅ᜋ蔭纈ဩ物# + 蝚กଶ + hex
 #FF000000 傶ਠ獊犋蝚กጱἓᜋ #00FFFFFF 傶ਠ獊蝚กጱጮᜋ #CC000000 傶蝚กଶ 80% ጱἓᜋ