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
170
デザイン管理、どこまで頑張ってます? /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
42
How ViewModel is retained even when the screen rotates
sho5nn
0
450
Examples Flutter code
sho5nn
1
5.7k
Differences of AccountManager from API 22 to 24
sho5nn
1
2.1k
既存のアプリをMaterialDesign化して得た知見
sho5nn
0
1k
Other Decks in Design
See All in Design
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
470
プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
140
行動変容ワークシート / Behavior Change Worksheet
dmattsun
0
260
リリース1ヶ月後で機能をなくした話
hinofu
1
650
Wolf and the seven goatkids
_limex_
PRO
0
300
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.5k
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
1
630
UX/UI改善に貢献するユーザーテストとは? 基礎知識から実施のプロセスまで解説
ncdc
0
280
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
3
380
フロントエンドエンジニアが知っておくべきUIUX心理学
yukiringo
1
220
意志と、デザインと、ときどきお金
transit_kix
2
1.9k
Lecciones de desarrollo de producto en Get on Board
getonbrd
0
200
Featured
See All Featured
Gamification - CAS2011
davidbonilla
76
4.5k
Building Effective Engineering Teams - LeadDev
addyosmani
25
1.8k
Code Reviewing Like a Champion
maltzj
512
39k
Designing for humans not robots
tammielis
247
25k
Six Lessons from altMBA
skipperchong
19
2.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
RailsConf 2023
tenderlove
0
510
Raft: Consensus for Rubyists
vanstee
130
6.2k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
Infographics Made Easy
chrislema
237
18k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
The Pragmatic Product Professional
lauravandoore
24
5.7k
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