デザイン管理、どこまで頑張ってます？ /android_engineer_design #1

Transcript

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

2. None
3. None
4. None

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

6. લஔ͖Ͱ͢ — ࠷ۙ Sketch Λߪೖͨ͠ — σβΠϯ·ΘΓͷ࡞ۀ΋΍ΕͨΒ։ൃ଎౓޲্ͩͧ — ฐνʔϜ͸ϑϧλΠϜͷσβΠφʔ͞Μ͕͍ͳͯ͘ɺ Sketch

   Ͱͷ UI ઃܭ͸͍͍ͩͨ iOS ϕʔεͷΈ — Android ΤϯδχΞͷࣗ෼͕΍ΒͶ͹୭͕΍ΔΜͩ — ΤϯδχΞͷࣗ෼΋σβΠϯΛΞʔμίʔμٞ࿦͍ͨ͠ ͠ɺ Sketch Ͱҙࢥૄ௨͕Ͱ͖ͨΒ΋ͬͱྑ͍ΑͶ

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

8. Sketch Ͱ͢

9. None

10. Zeplin Ͱ͢

11. None

12. ࣮૷Ͱ͢

13. None

14. ࣮ߦͰ͢

15. None
16. None
17. None
18. None

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

20. ͳ͓͔ͥͬͨ͜ — Button ͷ background ʹ͸ Inset Drawable ͱ͍͏΋ͷ͕͍Δ —

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

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

    ͱ߹͍ͬͯΔ

22. Widget.Material.Button <!-- Bordered ink button --> <style name="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> </style>

23. btn_default_material.xml <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?attr/colorControlHighlight"> <item android:drawable="@drawable/btn_default_mtrl_shape" /> </ripple>

24. btn_default_mtrl_shape.xml <inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetTop ="@dimen/button_inset_vertical_material" android:insetBottom="@dimen/button_inset_vertical_material" android:insetLeft ="@dimen/button_inset_horizontal_material" android:insetRight ="@dimen/button_inset_horizontal_material">

    <shape android:shape="rectangle" android:tint="?attr/colorButtonNormal"> <corners android:radius="@dimen/control_corner_material" /> <solid android:color="@color/white" /> <padding android:left="@dimen/button_padding_horizontal_material" android:top="@dimen/button_padding_vertical_material" android:right="@dimen/button_padding_horizontal_material" android:bottom="@dimen/button_padding_vertical_material" /> </shape> </inset>

25. btn_default_mtrl_shape.xml <inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetTop ="@dimen/button_inset_vertical_material" android:insetBottom="@dimen/button_inset_vertical_material" android:insetLeft ="@dimen/button_inset_horizontal_material" android:insetRight ="@dimen/button_inset_horizontal_material">

    <shape android:shape="rectangle" android:tint="?attr/colorButtonNormal"> <corners android:radius="@dimen/control_corner_material" /> <solid android:color="@color/white" /> <padding android:left="@dimen/button_padding_horizontal_material" android:top="@dimen/button_padding_vertical_material" android:right="@dimen/button_padding_horizontal_material" android:bottom="@dimen/button_padding_vertical_material" /> </shape> </inset>

26. dimens_material.xml <resources> <!-- Default insets (outer padding) around buttons -->

    <dimen name="button_inset_vertical_material">6dp</dimen> <dimen name="button_inset_horizontal_material">@dimen/control_inset_material</dimen> <!-- Default insets (outer padding) around controls --> <dimen name="control_inset_material">4dp</dimen>
27. None

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

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

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

    Ͱఆٛɺ Zeplin ʹ Export ͞Ε͍ͯΔঢ়ଶ

31. ฐνʔϜͰ͸ — ฐνʔϜϝϯόʔ — PO:̍ਓ — PM:̍ਓ — iOS:̎ਓ —

    Android:̏ਓ — Designer:̍ਓ(໿ि൒෼ͷՔಇ)

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

33. ฐνʔϜͰ͸ — Sketch ϑΝΠϧͰσβΠϯ؅ཧ͸͍ͯ͠Δ΋ͷͷɺσβΠφ ʔ͞ΜͷσβΠϯχϡΞϯεΛΤϯδχΞʹڞ༗͢ΔͨΊʹ ࢖͍ͬͯΔͷ͕ݱঢ় — ΞϓϦόʔδϣϯΛ্͛Δ͝ͱʹ Sketch ϑΝΠϧΛ࡞੒͠ɺ

    मਖ਼ or ௥Ճ͢Δը໘σβΠϯΛఆٛͯ͠։ൃΛճͯ͠Δ — ݫີʹ࣮૷ͱಉظ͸͍ͯ͠ͳ͍ — ΞΠίϯը૾΋ඞཁʹԠͯ͡͸ΤϯδχΞ͕Ͳ͏ʹ͔͠ ͨΓͯ͠Δ

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

    ͯ͠΄͍͠͠

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

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

37. — ฉ͖͍ͨ͜ͱ — νʔϜͷن໛͸ͲΜ͘Β͍Ͱ͔͢ʁσβΠφʔ͞Μ͸͍ ·͔͢ʁ — Sketch ౳ͷπʔϧͰσβΠϯ؅ཧɺͲͷ͘Β͍ؤுͬͯ ·͔͢ʁ࣮૷ͱͷಉظΛอͭ͜ͱ͸Ͱ͖ͯ·͔͢ʁ —

    ݱࡏͷӡ༻ʹײͯ͡Δ՝୊͸͋Γ·͔͢ʁ

38. @sho5nn