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

Android エンジニア デザイン部 #1

Transcript

1. σβΠϯ؅ཧɺ Ͳ͜·Ͱؤுͬͯ·͢ʁ 2018/03/28 Android ΤϯδχΞ σβΠϯ෦ #1 @sho5nn
5. ࠣࡉͳ૬ஊͱ͍͏͔࣭໰͕͋ΔΜͰ͕͢ɺ ฉ͍͍ͯͩ͘͞ɻ Կ͔஌ݟΛظ଴͞Εͯͨํ͸͢Έ·ͤΜɻ
6. લஔ͖Ͱ͢ — ࠷ۙ Sketch Λߪೖͨ͠ — σβΠϯ·ΘΓͷ࡞ۀ΋΍ΕͨΒ։ൃ଎౓޲্ͩͧ — ฐνʔϜ͸ϑϧλΠϜͷσβΠφʔ͞Μ͕͍ͳͯ͘ɺ Sketch Ͱͷ UI ઃܭ͸͍͍ͩͨ iOS ϕʔεͷΈ — Android ΤϯδχΞͷࣗ෼͕΍ΒͶ͹୭͕΍ΔΜͩ — ΤϯδχΞͷࣗ෼΋σβΠϯΛΞʔμίʔμٞ࿦͍ͨ͠ ͠ɺ Sketch Ͱҙࢥૄ௨͕Ͱ͖ͨΒ΋ͬͱྑ͍ΑͶ
7. લஔ͖Ͱ͢ — ·ͣ͸͍Ζ͍Ζ৮ͬͯΈΑ͏ͱ͍͏͜ͱͰ — Sketch -> Zeplin -> ࣮૷ɺͷྲྀΕΛࣗ෼Ͱ΍ͬͯΈͨ
8. Sketch Ͱ͢
10. Zeplin Ͱ͢
12. ࣮૷Ͱ͢
14. ࣮ߦͰ͢
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>
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