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
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
370
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
510
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4.1k
TUNAG BOOK 2024
stmn
0
470
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
3.3k
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
120
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.4k
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.4k
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
200
Goodpatch Tour💙 / We are hiring!
goodpatch
31
790k
(第1回) アーキテクト・テックリード育成講座
masakaya
0
160
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Code Reviewing Like a Champion
maltzj
521
39k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Fireside Chat
paigeccino
34
3.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
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