Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

sho5nn
March 28, 2018

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

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

sho5nn

March 28, 2018
Tweet

More Decks by sho5nn

Other Decks in Design

Transcript

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

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

    Inset Drawable — Drawable Λ಺แ͍ͯ͠Δ Drawable ͷ͜ͱ — ਌ͱࢠͷ Drawable ͷؒʹ༨നΛઃ͚Δ͜ͱ͕Ͱ͖Δ — View ࣗମͷڥքͱɺ࣮ࡍʹඳը͢ΔڥքΛ෼͚ΒΕΔ — EditText ͱ͔΋ͦ͏
  3. 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>
  4. 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>
  5. 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>
  6. 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>
  7. ฐνʔϜͰ͸ — ฐνʔϜϝϯόʔ — PO:̍ਓ — PM:̍ਓ — iOS:̎ਓ —

    Android:̏ਓ — Designer:̍ਓ(໿ि൒෼ͷՔಇ)
  8. ฐνʔϜͰ͸ — Sketch ϑΝΠϧͰσβΠϯ؅ཧ͸͍ͯ͠Δ΋ͷͷɺσβΠφ ʔ͞ΜͷσβΠϯχϡΞϯεΛΤϯδχΞʹڞ༗͢ΔͨΊʹ ࢖͍ͬͯΔͷ͕ݱঢ় — ΞϓϦόʔδϣϯΛ্͛Δ͝ͱʹ Sketch ϑΝΠϧΛ࡞੒͠ɺ

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