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
190
デザイン管理、どこまで頑張ってます? /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
70
How ViewModel is retained even when the screen rotates
sho5nn
0
590
Examples Flutter code
sho5nn
1
6.2k
Differences of AccountManager from API 22 to 24
sho5nn
1
2.3k
既存のアプリをMaterialDesign化して得た知見
sho5nn
0
1.1k
Other Decks in Design
See All in Design
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
370
freee + Product Design FY25Q4
freee
4
14k
How to get a Tiger to Tulsa
mcduckyart
0
110
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
150
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
470
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
140
CIRCULAR ECONOMY + SERVICES
jmanooch
0
120
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
1.3k
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
690
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4k
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
2.9k
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
440
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
KATA
mclloyd
30
14k
Rails Girls Zürich Keynote
gr2m
95
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
The Invisible Side of Design
smashingmag
301
51k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Gamification - CAS2011
davidbonilla
81
5.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
GitHub's CSS Performance
jonrohan
1031
460k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Making Projects Easy
brettharned
116
6.3k
Docker and Python
trallard
44
3.5k
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