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

B8117b63a3ee26533bc5980d8134d1e7?s=47 sho5nn
March 28, 2018

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

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

B8117b63a3ee26533bc5980d8134d1e7?s=128

sho5nn

March 28, 2018
Tweet

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