Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デザイン管理、どこまで頑張ってます? /android_engineer_design #1
Search
sho5nn
March 28, 2018
Design
0
180
デザイン管理、どこまで頑張ってます? /android_engineer_design #1
Android エンジニア デザイン部 #1
sho5nn
March 28, 2018
Tweet
Share
More Decks by sho5nn
See All by sho5nn
Try Pomodoro Technique
sho5nn
0
60
How ViewModel is retained even when the screen rotates
sho5nn
0
550
Examples Flutter code
sho5nn
1
6.1k
Differences of AccountManager from API 22 to 24
sho5nn
1
2.2k
既存のアプリをMaterialDesign化して得た知見
sho5nn
0
1.1k
Other Decks in Design
See All in Design
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
1.1k
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.4k
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
3
3k
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
190
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
570
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
210
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
270
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
150
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
510
ZKK_001.pdf
nicholaspegu
0
1.5k
How to go from research data to insights?
mastervicedesign
0
220
Masked shaman-Storyboard 2025
ashley0521
0
160
Featured
See All Featured
Speed Design
sergeychernyshev
25
780
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Writing Fast Ruby
sferik
628
61k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
What's in a price? How to price your products and services
michaelherold
244
12k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Designing for humans not robots
tammielis
250
25k
Transcript
σβΠϯཧɺ Ͳ͜·Ͱؤுͬͯ·͢ʁ 2018/03/28 Android ΤϯδχΞ σβΠϯ෦ #1 @sho5nn
None
None
None
ࠣࡉͳ૬ஊͱ͍͏͔࣭͕͋ΔΜͰ͕͢ɺ ฉ͍͍ͯͩ͘͞ɻ Կ͔ݟΛظ͞Εͯͨํ͢Έ·ͤΜɻ
લஔ͖Ͱ͢ — ࠷ۙ Sketch Λߪೖͨ͠ — σβΠϯ·ΘΓͷ࡞ۀΕͨΒ։ൃ্ͩͧ — ฐνʔϜϑϧλΠϜͷσβΠφʔ͞Μ͕͍ͳͯ͘ɺ Sketch
Ͱͷ UI ઃܭ͍͍ͩͨ iOS ϕʔεͷΈ — Android ΤϯδχΞͷ͕ࣗΒͶ୭͕ΔΜͩ — ΤϯδχΞͷࣗσβΠϯΛΞʔμίʔμ͍ٞͨ͠ ͠ɺ Sketch Ͱҙࢥૄ௨͕Ͱ͖ͨΒͬͱྑ͍ΑͶ
લஔ͖Ͱ͢ — ·͍ͣΖ͍Ζ৮ͬͯΈΑ͏ͱ͍͏͜ͱͰ — Sketch -> Zeplin -> ࣮ɺͷྲྀΕΛࣗͰͬͯΈͨ
Sketch Ͱ͢
None
Zeplin Ͱ͢
None
࣮Ͱ͢
None
࣮ߦͰ͢
None
None
None
None
Zeplin Ͳ͓ΓʹͳΒͳ͔ͬͨͰ͢
ͳ͓͔ͥͬͨ͜ — Button ͷ background ʹ Inset Drawable ͱ͍͏ͷ͕͍Δ —
Inset Drawable — Drawable Λแ͍ͯ͠Δ Drawable ͷ͜ͱ — ͱࢠͷ Drawable ͷؒʹ༨നΛઃ͚Δ͜ͱ͕Ͱ͖Δ — View ࣗମͷڥքͱɺ࣮ࡍʹඳը͢ΔڥքΛ͚ΒΕΔ — EditText ͱ͔ͦ͏
ͳ͓͔ͥͬͨ͜ — ͱࢠͷ Drawable ͷؒʹ༨ന͕͋ΔͨΊɺ ݟͨతʹζϨͯΔΑ͏ʹݟ͑ͯ͠·ͬͨ — View ͷڥքࣗମ Zeplin
ͱ߹͍ͬͯΔ
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>
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>
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>
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>
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>
None
͜͜Ͱɺ͜ͷΑ͏ͳ Sketch / Zeplin ͱ࣮ͷεϨҧ͍Λ ͲͷΑ͏ʹͯ͠ྑ͍ײ͡ʹղܾ͢Δ͔ʁͱ͍͏͠·ͤΜɻ
;ͱࢥ͍·ͨ͠ɻ ͜ͷ Inset Drawable ͷྫہॴతͰ͋Δ͚Ͳɺ Sketch / Zeplin Ͱఆٛͨ͠ը໘σβΠϯͱ࣮ͷಉظɺ શʹҡ࣋͢Δͷ͍͠ͷͰʁͱɻ
;ͱࢥ͍·ͨ͠ɻ — ಉظͷཻ — MIN:ΞϓϦͰ͏ΧϥʔίʔυɺϑΥϯτελΠϧɺΞ Πίϯը૾ͳͲΛఆٛ — MAX:֤ը໘ͷσβΠϯΛཏతʹ Sketch ͰΞʔτϘʔυ
Ͱఆٛɺ Zeplin ʹ Export ͞Ε͍ͯΔঢ়ଶ
ฐνʔϜͰ — ฐνʔϜϝϯόʔ — PO:̍ਓ — PM:̍ਓ — iOS:̎ਓ —
Android:̏ਓ — Designer:̍ਓ(िͷՔಇ)
ฐνʔϜͰ — ̎िؒεύϯͷϦϦʔεαΠΫϧ — ΤϯϋϯεʹΑͬͯ UI Λͦͬ͝ͱม͑Δͱ͖͋Δ
ฐνʔϜͰ — Sketch ϑΝΠϧͰσβΠϯཧ͍ͯ͠ΔͷͷɺσβΠφ ʔ͞ΜͷσβΠϯχϡΞϯεΛΤϯδχΞʹڞ༗͢ΔͨΊʹ ͍ͬͯΔͷ͕ݱঢ় — ΞϓϦόʔδϣϯΛ্͛Δ͝ͱʹ Sketch ϑΝΠϧΛ࡞͠ɺ
मਖ਼ or Ճ͢Δը໘σβΠϯΛఆٛͯ͠։ൃΛճͯ͠Δ — ݫີʹ࣮ͱಉظ͍ͯ͠ͳ͍ — ΞΠίϯը૾ඞཁʹԠͯ͡ΤϯδχΞ͕Ͳ͏ʹ͔͠ ͨΓͯ͠Δ
ฐνʔϜͰ — গਓ։ൃͰਓతϦιʔεʹ༨༟ͷͳ͍ݱঢ়͜ΕͰ͍͍ — ͔͠͠ɺকདྷతʹ։ൃϝϯόʔΛ૿͍ͯ͘͠ͷΛݟӽ͢ ͱɺಉظͷऔΕͨσβΠϯఆٛͱ࣮͕͋Δͱɺ୭͕ݟͯ ΩϟονΞοϓ͕͢͠͞ߴͯ͘ϕετ — ৽ϝϯόʔʹਫ਼ਆత҆৺Λײͯ͡ JOIN
ͯ͠΄͍͠͠
;ͱࢥ͍·ͨ͠ɻ ΈΜͳɺσβΠϯཧͱ࣮ͷಉظΛ Ͳ͜·ͰؤுͬͯΔͷ͔ͳʁͱɻ
ࠣࡉͳ૬ஊͱ͍͏͔࣭͕͋ΔΜͰ͕͢ɺ ฉ͍͍ͯͩ͘͞ɻ
— ฉ͖͍ͨ͜ͱ — νʔϜͷنͲΜ͘Β͍Ͱ͔͢ʁσβΠφʔ͞Μ͍ ·͔͢ʁ — Sketch ͷπʔϧͰσβΠϯཧɺͲͷ͘Β͍ؤுͬͯ ·͔͢ʁ࣮ͱͷಉظΛอͭ͜ͱͰ͖ͯ·͔͢ʁ —
ݱࡏͷӡ༻ʹײͯ͡Δ՝͋Γ·͔͢ʁ
@sho5nn