Tweet
Tweet

Slide 1

Slide 1 text

σβΠϯ؅ཧɺ Ͳ͜·Ͱؤுͬͯ·͢ʁ 2018/03/28 Android ΤϯδχΞ σβΠϯ෦ #1 @sho5nn

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

ࠣࡉͳ૬ஊͱ͍͏͔࣭໰͕͋ΔΜͰ͕͢ɺ ฉ͍͍ͯͩ͘͞ɻ Կ͔஌ݟΛظ଴͞Εͯͨํ͸͢Έ·ͤΜɻ

Slide 6

Slide 6 text

લஔ͖Ͱ͢ — ࠷ۙ Sketch Λߪೖͨ͠ — σβΠϯ·ΘΓͷ࡞ۀ΋΍ΕͨΒ։ൃ଎౓޲্ͩͧ — ฐνʔϜ͸ϑϧλΠϜͷσβΠφʔ͞Μ͕͍ͳͯ͘ɺ Sketch Ͱͷ UI ઃܭ͸͍͍ͩͨ iOS ϕʔεͷΈ — Android ΤϯδχΞͷࣗ෼͕΍ΒͶ͹୭͕΍ΔΜͩ — ΤϯδχΞͷࣗ෼΋σβΠϯΛΞʔμίʔμٞ࿦͍ͨ͠ ͠ɺ Sketch Ͱҙࢥૄ௨͕Ͱ͖ͨΒ΋ͬͱྑ͍ΑͶ

Slide 7

Slide 7 text

લஔ͖Ͱ͢ — ·ͣ͸͍Ζ͍Ζ৮ͬͯΈΑ͏ͱ͍͏͜ͱͰ — Sketch -> Zeplin -> ࣮૷ɺͷྲྀΕΛࣗ෼Ͱ΍ͬͯΈͨ

Slide 8

Slide 8 text

Sketch Ͱ͢

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Zeplin Ͱ͢

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

࣮૷Ͱ͢

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

࣮ߦͰ͢

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Zeplin Ͳ͓ΓʹͳΒͳ͔ͬͨͰ͢

Slide 20

Slide 20 text

ͳ͓͔ͥͬͨ͜ — Button ͷ background ʹ͸ Inset Drawable ͱ͍͏΋ͷ͕͍Δ — Inset Drawable — Drawable Λ಺แ͍ͯ͠Δ Drawable ͷ͜ͱ — ਌ͱࢠͷ Drawable ͷؒʹ༨നΛઃ͚Δ͜ͱ͕Ͱ͖Δ — View ࣗମͷڥքͱɺ࣮ࡍʹඳը͢ΔڥքΛ෼͚ΒΕΔ — EditText ͱ͔΋ͦ͏

Slide 21

Slide 21 text

ͳ͓͔ͥͬͨ͜ — ਌ͱࢠͷ Drawable ͷؒʹ༨ന͕͋ΔͨΊɺ ݟͨ໨తʹζϨͯΔΑ͏ʹݟ͑ͯ͠·ͬͨ — View ͷڥքࣗମ͸ Zeplin ͱ߹͍ͬͯΔ

Slide 22

Slide 22 text

Widget.Material.Button <item name="background">@drawable/btn_default_material</item> <item name="textAppearance">?attr/textAppearanceButton</item> <item name="minHeight">48dip</item> <item name="minWidth">88dip</item> <item name="stateListAnimator">@anim/button_state_list_anim_material</item> <item name="focusable">true</item> <item name="clickable">true</item> <item name="gravity">center_vertical|center_horizontal</item>

Slide 23

Slide 23 text

btn_default_material.xml

Slide 24

Slide 24 text

btn_default_mtrl_shape.xml

Slide 25

Slide 25 text

btn_default_mtrl_shape.xml

Slide 26

Slide 26 text

dimens_material.xml 6dp @dimen/control_inset_material 4dp

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

͜͜Ͱ͸ɺ͜ͷΑ͏ͳ Sketch / Zeplin ͱ࣮૷ͷεϨҧ͍Λ ͲͷΑ͏ʹͯ͠ྑ͍ײ͡ʹղܾ͢Δ͔ʁͱ͍͏࿩͸͠·ͤΜɻ

Slide 29

Slide 29 text

;ͱࢥ͍·ͨ͠ɻ ͜ͷ Inset Drawable ͷྫ͸ہॴతͰ͸͋Δ͚Ͳɺ Sketch / Zeplin Ͱఆٛͨ͠ը໘σβΠϯͱ࣮૷ͷಉظɺ ׬શʹҡ࣋͢Δͷ͸೉͍͠ͷͰ͸ʁͱɻ

Slide 30

Slide 30 text

;ͱࢥ͍·ͨ͠ɻ — ಉظͷཻ౓ — MIN:ΞϓϦͰ࢖͏ΧϥʔίʔυɺϑΥϯτελΠϧɺΞ Πίϯը૾ͳͲΛఆٛ — MAX:֤ը໘ͷσβΠϯΛ໢ཏతʹ Sketch ͰΞʔτϘʔυ Ͱఆٛɺ Zeplin ʹ Export ͞Ε͍ͯΔঢ়ଶ

Slide 31

Slide 31 text

ฐνʔϜͰ͸ — ฐνʔϜϝϯόʔ — PO:̍ਓ — PM:̍ਓ — iOS:̎ਓ — Android:̏ਓ — Designer:̍ਓ(໿ि൒෼ͷՔಇ)

Slide 32

Slide 32 text

ฐνʔϜͰ͸ — ̎िؒεύϯͷϦϦʔεαΠΫϧ — ΤϯϋϯεʹΑͬͯ͸ UI Λͦͬ͝ͱม͑Δͱ͖΋͋Δ

Slide 33

Slide 33 text

ฐνʔϜͰ͸ — Sketch ϑΝΠϧͰσβΠϯ؅ཧ͸͍ͯ͠Δ΋ͷͷɺσβΠφ ʔ͞ΜͷσβΠϯχϡΞϯεΛΤϯδχΞʹڞ༗͢ΔͨΊʹ ࢖͍ͬͯΔͷ͕ݱঢ় — ΞϓϦόʔδϣϯΛ্͛Δ͝ͱʹ Sketch ϑΝΠϧΛ࡞੒͠ɺ मਖ਼ or ௥Ճ͢Δը໘σβΠϯΛఆٛͯ͠։ൃΛճͯ͠Δ — ݫີʹ࣮૷ͱಉظ͸͍ͯ͠ͳ͍ — ΞΠίϯը૾΋ඞཁʹԠͯ͡͸ΤϯδχΞ͕Ͳ͏ʹ͔͠ ͨΓͯ͠Δ

Slide 34

Slide 34 text

ฐνʔϜͰ͸ — গਓ਺։ൃͰਓతϦιʔεʹ༨༟ͷͳ͍ݱঢ়͸͜ΕͰ͍͍ — ͔͠͠ɺকདྷతʹ։ൃϝϯόʔΛ૿΍͍ͯ͘͠ͷΛݟӽ͢ ͱɺಉظͷऔΕͨσβΠϯఆٛͱ࣮૷͕͋Δͱɺ୭͕ݟͯ ΋ΩϟονΞοϓ͠΍͢͞౓͕ߴͯ͘ϕετ — ৽ϝϯόʔʹ͸ਫ਼ਆత҆৺Λײͯ͡ JOIN ͯ͠΄͍͠͠

Slide 35

Slide 35 text

;ͱࢥ͍·ͨ͠ɻ ΈΜͳ͸ɺσβΠϯ؅ཧͱ࣮૷ͷಉظΛ Ͳ͜·ͰؤுͬͯΔͷ͔ͳʁͱɻ

Slide 36

Slide 36 text

ࠣࡉͳ૬ஊͱ͍͏͔࣭໰͕͋ΔΜͰ͕͢ɺ ฉ͍͍ͯͩ͘͞ɻ

Slide 37

Slide 37 text

— ฉ͖͍ͨ͜ͱ — νʔϜͷن໛͸ͲΜ͘Β͍Ͱ͔͢ʁσβΠφʔ͞Μ͸͍ ·͔͢ʁ — Sketch ౳ͷπʔϧͰσβΠϯ؅ཧɺͲͷ͘Β͍ؤுͬͯ ·͔͢ʁ࣮૷ͱͷಉظΛอͭ͜ͱ͸Ͱ͖ͯ·͔͢ʁ — ݱࡏͷӡ༻ʹײͯ͡Δ՝୊͸͋Γ·͔͢ʁ

Slide 38

Slide 38 text

@sho5nn