「AndroidはiOSと同じデザインで！」と言われたときのTips

Slide 1

Slide 1 text

ʮAndroid͸iOSͱಉ͡ σβΠϯͰʂʯ ͱݴΘΕͨͱ͖ͷTips 2018/03/28 @ogapants

Slide 2

Slide 2 text

ࣗݾ঺հ • ͓͕ͺΜ@ogapants • Android։ൃྺ4೥͘Β͍ • ࡞ͬͨ৽نϓϩμΫτ7ͭ͘Β͍ • GooglePlayϕετΞϓϦͱͬͨ

Slide 3

Slide 3 text

ʮAndroid͸iOSͱ ಉ͡σβΠϯͰʂʯ

Slide 4

Slide 4 text

ʮ͍΍ɺiOS͸ώϡʔϚϯΠ ϯλʔϑΣʔεΨΠυϥΠϯ ʹଇΓɺAndroid͸ϚςϦΞ ϧσβΠϯΨΠυϥΠϯʹଇ ΓɺͦΕͧΕద੾ͳUI/UXΛ ઃܭ͠·͠ΐ͏ʂʯ

Slide 5

Slide 5 text

ղܾ

Slide 6

Slide 6 text

͠·ͤΜ

Slide 7

Slide 7 text

ͳͥ͜͏ݴΘΕΔͷ͔ ͳͥiOSͳUIͷAndroidΞϓϦ ͕ੈʹग़͍ͯΔͷ͔

Slide 8

Slide 8 text

ݪҼͷ෼ੳ

Slide 9

Slide 9 text

ᶃاը΍σβΠφʔ͕ AndroidΒ͘͢͠Δར఺Λ஌Βͳ͍

Slide 10

Slide 10 text

ᶄΤϯδχΞ͕ٞ࿦Ͱԡ͠ෛ͚ͨ

Slide 11

Slide 11 text

ᶅΤϯδχΞ͕AndroidΒ͍͠ UIΛ஌Βͳ͍

Slide 12

Slide 12 text

ݪҼ͔ΒΈΔΤϯδχΞʹ  ඞཁͱ͞ΕΔ΋ͷ 1. આ໌͢ΔͨΊͷ৘ใ੔ཧ 2. ٞ࿦͢ΔͨΊͷ৺ߏ͑ɹ 3. ࣮ફ͢ΔͨΊͷલఏ஌ࣝɹ (ݸਓͷײ૝Ͱ͢)

Slide 13

Slide 13 text

આ໌͢ΔͨΊͷ৘ใ੔ཧ   ʙͳͥAndroidΒ͘͠࡞Δͷ͔ʙ

Slide 14

Slide 14 text

ᶃ޻਺࡟ݮͷͨΊ • ࣮૷଎౓ͷ޲্ • อकੑɺ֦ுੑͷ޲্

Slide 15

Slide 15 text

ᶄGooglePlayʹ࠷దԽ͢ΔͨΊ • GooglePlayͰϑΟʔνϟʔ͞ΕΔ • ϥϯΩϯά΍ݕࡧॱҐ΋্͕Δ  https://support.google.com/googleplay/android-developer/answer/4448378

Slide 16

Slide 16 text

ᶅϢʔβʔ͕ҧ࿨ײͳ͘ ૢ࡞Ͱ͖ΔΑ͏ʹ͢ΔͨΊ • ݟ׳ΕͨUIͰࢹೝੑൈ܈ • ࢖͍׳ΕͨUXͰૢ࡞ੑൈ܈

Slide 17

Slide 17 text

ٞ࿦͢ΔͨΊͷ৺ߏ͑  ʙΑ͋͘Δ͝ҙݟͱͦͷରԠྫʙ

Slide 18

Slide 18 text

ࣄྫ ※ඞͣ͠΋શͯʹ౰ͯ͸·Δ΋ͷͰ͸ͳ͍Ͱ͢ ※ٞ࿦ख๏ͷ࿩͡Όͳ͍Ͱ͢ ※ݸਓͷײ૝Ͱ͢

Slide 19

Slide 19 text

ʮAndroidͷ͜ͱΛߟ͑Δ Ϧιʔε͸ͳ͍ʂʯ

Slide 20

Slide 20 text

ʮAndroidͷ͜ͱΛߟ͑Δ Ϧιʔε͸ͳ͍ʂʯ →໨ͷલͷੜ࢈ੑ্͚͍ͩ͛ͨʁ  ɾ௕ظతͳੜ࢈ੑΛߟ͑Δ ɾΤϯδχΞओମͰਐΊΔ ɾڐՄΑΓँࡑͰ΍ͬͯΈͤΔ

Slide 21

Slide 21 text

ʮiOS͔ΒAndroidʹҠߦ͠ ͨਓ͸ࠞཚ͢Δʂʯ

Slide 22

Slide 22 text

ʮiOS͔ΒAndroidʹҠߦͨ͠ Ϣʔβʔ͸ࠞཚ͢Δʂʯ →Ϣʔβʔͷཱ৔ʹཱ͍ͯͯͳ͍ʁ  ɾͳͥ΍Δͷ͔࠶֬ೝ ɾΑ͘ߟ͑ΔͱϢʔβʔ͸ผʹࠔΒͳ͍

Slide 23

Slide 23 text

ʮϚςϦΞϧσβΠϯͰ࡞ͬ ͨΒಠࣗੑ͕ͳ͘ͳΔʂʯ

Slide 24

Slide 24 text

ʮϚςϦΞϧσβΠϯͰ࡞ͬͨ Βಠࣗੑ͕ͳ͘ͳΔʂʯ →ΨΠυϥΠϯͷཧղ͕଍Γͳ͍ʁ  ɾͳͥͲΜͳಠࣗੑ͕ඞཁͳͷ͔࠶֬ೝ ɾݫີʹकΒͳͯ͘΋͍͍ ɾʮ͋͑ͯ͜͏͢Δʯͱ͍͏ࢪࡦ͸ΊͬͪΌ͋Γ

Slide 25

Slide 25 text

ʮΨΠυϥΠϯ͕ӳޠͰ ಡΊͳ͍ʂʯ

Slide 26

Slide 26 text

ʮΨΠυϥΠϯ͕ӳޠͰ ಡΊͳ͍ʂʯ →ͦ΋ͦ΋ಡΜͩ͜ͱͳ͍ʁ  ɾ·ͣ೔ຊޠ൛ΛಡΜͰ΋Β͏ ɾશମΛਤ͚ͩྲྀ͠ಡΉ͚ͩͰ΋ޮՌ͋Γ ɾ໨ඪΛཱͯͯྠಡձΛ΍Δ

Slide 27

Slide 27 text

ʮiOSͷσβΠϯʹग़དྷͳ͍ͷ͸ ͋ͳͨͷ࣮ྗ͕଍Γͳ͍͚ͩʂʯ

Slide 28

Slide 28 text

ʮiOSͷσβΠϯʹग़དྷͳ͍ͷ͸ ͋ͳͨͷ࣮ྗ͕଍Γͳ͍͚ͩʂʯ →ײ৘ʹૌ͑ͯ͘Δʁ  ɾ൓࿦͢΂͖ͱ͜Ζ͸ྫྷ੩ʹ൓࿦͢Δ ɾ ɾ

Slide 29

Slide 29 text

Α͋͘Δ͝ҙݟͷରԠྫ·ͱΊ • ൃݴͷࠜڌΛཧղ͢Δ • ஌Βͳ͍͜ͱ͸ڭ͑߹͏ • ͓ޓ͍Λଚॏ͠߹͏

Slide 30

Slide 30 text

࣮ફ͢ΔͨΊͷલఏ஌ࣝɹ  ʙAndroidΒ͠͞ͱϚςϦΞϧσβΠϯΒ͠͞ʙ

Slide 31

Slide 31 text

iOSͱAndroidͷUIରԠද

Slide 32

Slide 32 text

ͦΜͳ΋ͷ͸ͳ͍ • ಉ͡Α͏ͳݟͨ໨ͷUIͰ΋࡞ΒΕͨܦҢ΍  ໨త͸ҧ͏ • ୯७ͳൺֱ͸Ͱ͖ͳ͍ • ͱ͸͍͑ʮࣅͯΔʯUI͸͋Δ • ʮ୅༻Ͱ͖Δ͔΋ʯ͘Β͍ʹଊ͑Δ

Slide 33

Slide 33 text

AndroidΒ͘͢͠Δɾ ϚςϦΞϧσβΠϯΒ͘͢͠Δ • ͪΐͬͱ͕ͪ͏ • AndroidΒ͠͞  →ඪ४APIͰ୅༻ͯ͠iOSײ͔Β୤٫ • ϚςϦΞϧσβΠϯΒ͠͞  →ΨΠυϥΠϯʹ฿ͬͯΑΓ༏ΕͨମݧΛ

Slide 34

Slide 34 text

AndroidΒ͘͢͠Δྫ

Slide 35

Slide 35 text

right-pointing carets͸࡟আ • ը໘ભҠΛࣔ͢͜Ε ʼ • AndroidͰ͸ΞΠίϯͷ  ҙຯΛߟ͑ͤͯ͞͠·͏  ͜ͱ͸͠ͳ͍        https://developer.android.com/design/patterns/pure-android.html

Slide 36

Slide 36 text

࿮ઢϘλϯ͸࢖Θͳ͍ • AndroidͰ͸جຊRaisedButton(͔FlatButton) • PlayετΞͰݟ͔͚ΔͷͰ࣮͸ΞϦ…ʁ! https://material.io/guidelines/components/buttons.html

Slide 37

Slide 37 text

ϚςϦΞϧσβΠϯΒ͘͢͠Δྫ

Slide 38

Slide 38 text

λονϑΟʔυόοΫΛ͚ͭΔ • λοϓՄೳൣғΛࣔ͢ • ࿈ଓͨ͠ಈ͖ΛݟͤΔ • selectableItemBackground,  selectableItemBackgroundBorderless      https://material.io/guidelines/motion/material-motion.html https://developer.android.com/training/material/animations.html

Slide 39

Slide 39 text

ΦϑϥΠϯͰ΋࢖͑ΔΑ͏ʹ͢Δ • ΦϑϥΠϯͰ΋࠷௿ݶͷ  ػೳ͸ఏڙ͠Α͏ • ΦϑϥΠϯঢ়ଶͰ͋Δ͜ͱ  Λ఻͑Α͏ https://material.io/guidelines/patterns/ofﬂine-states.html

Slide 40

Slide 40 text

ଓ͖͸WebͰʂʂʂʂʂʂʂ

Slide 41

Slide 41 text

͍͞͝ʹ

Slide 42

Slide 42 text

ॾ஫ҙ • طଘͷϢʔβʔʹ഑ྀ͢Δ • ໨ඪΛཱͯΔ • ਺ࣈΛνΣοΫ͢Δ • όϥϯεΑ͘΍Δ

Slide 43

Slide 43 text

·ͱΊ • ͳͥAndroidΒ͘͠࡞Δͷ͔੔ཧ͢Δ • ݐઃతͳٞ࿦Λ͢Δ • ΤϯδχΞͷ΍͍͖ͬͯ • Ұ൪ଚॏ͢΂͖͸Ϣʔβʔ ΋͠΋ʮAndroid͸iOSͱಉ͡σβΠϯͰʂʯͱݴΘΕͨΒ…

Slide 44

Slide 44 text

͋ͱ͸Ωϛͷ໨Ͱ ͔֬Ίͯ͘Εʂ