「AndroidはiOSと同じデザインで！」と言われたときのTips

Androidエンジニア デザイン部 #1
https://nohana.connpass.com/event/80530/

続きのwebはこちら
https://qiita.com/ogapants/items/8a551ed3b16bcf0cc3ed

Transcript

1. ʮAndroid͸iOSͱಉ͡ σβΠϯͰʂʯ ͱݴΘΕͨͱ͖ͷTips 2018/03/28 @ogapants
2. ࣗݾ঺հ • ͓͕ͺΜ@ogapants • Android։ൃྺ4೥͘Β͍ • ࡞ͬͨ৽نϓϩμΫτ7ͭ͘Β͍ • GooglePlayϕετΞϓϦͱͬͨ
3. ʮAndroid͸iOSͱ ಉ͡σβΠϯͰʂʯ
4. ʮ͍΍ɺiOS͸ώϡʔϚϯΠ ϯλʔϑΣʔεΨΠυϥΠϯ ʹଇΓɺAndroid͸ϚςϦΞ ϧσβΠϯΨΠυϥΠϯʹଇ ΓɺͦΕͧΕద੾ͳUI/UXΛ ઃܭ͠·͠ΐ͏ʂʯ
5. ղܾ
6. ͠·ͤΜ
7. ͳͥ͜͏ݴΘΕΔͷ͔ ͳͥiOSͳUIͷAndroidΞϓϦ ͕ੈʹग़͍ͯΔͷ͔
8. ݪҼͷ෼ੳ
9. ᶃاը΍σβΠφʔ͕ AndroidΒ͘͢͠Δར఺Λ஌Βͳ͍
10. ᶄΤϯδχΞ͕ٞ࿦Ͱԡ͠ෛ͚ͨ
11. ᶅΤϯδχΞ͕AndroidΒ͍͠ UIΛ஌Βͳ͍
12. ݪҼ͔ΒΈΔΤϯδχΞʹ
 ඞཁͱ͞ΕΔ΋ͷ 1. આ໌͢ΔͨΊͷ৘ใ੔ཧ 2. ٞ࿦͢ΔͨΊͷ৺ߏ͑ɹ 3. ࣮ફ͢ΔͨΊͷલఏ஌ࣝɹ (ݸਓͷײ૝Ͱ͢)
13. આ໌͢ΔͨΊͷ৘ใ੔ཧ 
 ʙͳͥAndroidΒ͘͠࡞Δͷ͔ʙ
14. ᶃ޻਺࡟ݮͷͨΊ • ࣮૷଎౓ͷ޲্ • อकੑɺ֦ுੑͷ޲্
15. ᶄGooglePlayʹ࠷దԽ͢ΔͨΊ • GooglePlayͰϑΟʔνϟʔ͞ΕΔ • ϥϯΩϯά΍ݕࡧॱҐ΋্͕Δ
 https://support.google.com/googleplay/android-developer/answer/4448378
16. ᶅϢʔβʔ͕ҧ࿨ײͳ͘ ૢ࡞Ͱ͖ΔΑ͏ʹ͢ΔͨΊ • ݟ׳ΕͨUIͰࢹೝੑൈ܈ • ࢖͍׳ΕͨUXͰૢ࡞ੑൈ܈
17. ٞ࿦͢ΔͨΊͷ৺ߏ͑
 ʙΑ͋͘Δ͝ҙݟͱͦͷରԠྫʙ
18. ࣄྫ ※ඞͣ͠΋શͯʹ౰ͯ͸·Δ΋ͷͰ͸ͳ͍Ͱ͢ ※ٞ࿦ख๏ͷ࿩͡Όͳ͍Ͱ͢ ※ݸਓͷײ૝Ͱ͢
19. ʮAndroidͷ͜ͱΛߟ͑Δ Ϧιʔε͸ͳ͍ʂʯ
20. ʮAndroidͷ͜ͱΛߟ͑Δ Ϧιʔε͸ͳ͍ʂʯ →໨ͷલͷੜ࢈ੑ্͚͍ͩ͛ͨʁ
 ɾ௕ظతͳੜ࢈ੑΛߟ͑Δ ɾΤϯδχΞओମͰਐΊΔ ɾڐՄΑΓँࡑͰ΍ͬͯΈͤΔ
21. ʮiOS͔ΒAndroidʹҠߦ͠ ͨਓ͸ࠞཚ͢Δʂʯ
22. ʮiOS͔ΒAndroidʹҠߦͨ͠ Ϣʔβʔ͸ࠞཚ͢Δʂʯ →Ϣʔβʔͷཱ৔ʹཱ͍ͯͯͳ͍ʁ
 ɾͳͥ΍Δͷ͔࠶֬ೝ ɾΑ͘ߟ͑ΔͱϢʔβʔ͸ผʹࠔΒͳ͍
23. ʮϚςϦΞϧσβΠϯͰ࡞ͬ ͨΒಠࣗੑ͕ͳ͘ͳΔʂʯ
24. ʮϚςϦΞϧσβΠϯͰ࡞ͬͨ Βಠࣗੑ͕ͳ͘ͳΔʂʯ →ΨΠυϥΠϯͷཧղ͕଍Γͳ͍ʁ
 ɾͳͥͲΜͳಠࣗੑ͕ඞཁͳͷ͔࠶֬ೝ ɾݫີʹकΒͳͯ͘΋͍͍ ɾʮ͋͑ͯ͜͏͢Δʯͱ͍͏ࢪࡦ͸ΊͬͪΌ͋Γ
25. ʮΨΠυϥΠϯ͕ӳޠͰ ಡΊͳ͍ʂʯ
26. ʮΨΠυϥΠϯ͕ӳޠͰ ಡΊͳ͍ʂʯ →ͦ΋ͦ΋ಡΜͩ͜ͱͳ͍ʁ
 ɾ·ͣ೔ຊޠ൛ΛಡΜͰ΋Β͏ ɾશମΛਤ͚ͩྲྀ͠ಡΉ͚ͩͰ΋ޮՌ͋Γ ɾ໨ඪΛཱͯͯྠಡձΛ΍Δ
27. ʮiOSͷσβΠϯʹग़དྷͳ͍ͷ͸ ͋ͳͨͷ࣮ྗ͕଍Γͳ͍͚ͩʂʯ
28. ʮiOSͷσβΠϯʹग़དྷͳ͍ͷ͸ ͋ͳͨͷ࣮ྗ͕଍Γͳ͍͚ͩʂʯ →ײ৘ʹૌ͑ͯ͘Δʁ
 ɾ൓࿦͢΂͖ͱ͜Ζ͸ྫྷ੩ʹ൓࿦͢Δ ɾ ɾ
29. Α͋͘Δ͝ҙݟͷରԠྫ·ͱΊ • ൃݴͷࠜڌΛཧղ͢Δ • ஌Βͳ͍͜ͱ͸ڭ͑߹͏ • ͓ޓ͍Λଚॏ͠߹͏
30. ࣮ફ͢ΔͨΊͷલఏ஌ࣝɹ
 ʙAndroidΒ͠͞ͱϚςϦΞϧσβΠϯΒ͠͞ʙ
31. iOSͱAndroidͷUIରԠද
32. ͦΜͳ΋ͷ͸ͳ͍ • ಉ͡Α͏ͳݟͨ໨ͷUIͰ΋࡞ΒΕͨܦҢ΍
 ໨త͸ҧ͏ • ୯७ͳൺֱ͸Ͱ͖ͳ͍ • ͱ͸͍͑ʮࣅͯΔʯUI͸͋Δ • ʮ୅༻Ͱ͖Δ͔΋ʯ͘Β͍ʹଊ͑Δ
33. AndroidΒ͘͢͠Δɾ ϚςϦΞϧσβΠϯΒ͘͢͠Δ • ͪΐͬͱ͕ͪ͏ • AndroidΒ͠͞
 →ඪ४APIͰ୅༻ͯ͠iOSײ͔Β୤٫ • ϚςϦΞϧσβΠϯΒ͠͞
 →ΨΠυϥΠϯʹ฿ͬͯΑΓ༏ΕͨମݧΛ
34. AndroidΒ͘͢͠Δྫ
35. right-pointing carets͸࡟আ • ը໘ભҠΛࣔ͢͜Ε ʼ • AndroidͰ͸ΞΠίϯͷ
 ҙຯΛߟ͑ͤͯ͞͠·͏
 ͜ͱ͸͠ͳ͍
 
 
 
 https://developer.android.com/design/patterns/pure-android.html
36. ࿮ઢϘλϯ͸࢖Θͳ͍ • AndroidͰ͸جຊRaisedButton(͔FlatButton) • PlayετΞͰݟ͔͚ΔͷͰ࣮͸ΞϦ…ʁ! https://material.io/guidelines/components/buttons.html
37. ϚςϦΞϧσβΠϯΒ͘͢͠Δྫ
38. λονϑΟʔυόοΫΛ͚ͭΔ • λοϓՄೳൣғΛࣔ͢ • ࿈ଓͨ͠ಈ͖ΛݟͤΔ • selectableItemBackground,
 selectableItemBackgroundBorderless
 
 
 https://material.io/guidelines/motion/material-motion.html https://developer.android.com/training/material/animations.html
39. ΦϑϥΠϯͰ΋࢖͑ΔΑ͏ʹ͢Δ • ΦϑϥΠϯͰ΋࠷௿ݶͷ
 ػೳ͸ఏڙ͠Α͏ • ΦϑϥΠϯঢ়ଶͰ͋Δ͜ͱ
 Λ఻͑Α͏ https://material.io/guidelines/patterns/offline-states.html
40. ଓ͖͸WebͰʂʂʂʂʂʂʂ
41. ͍͞͝ʹ
42. ॾ஫ҙ • طଘͷϢʔβʔʹ഑ྀ͢Δ • ໨ඪΛཱͯΔ • ਺ࣈΛνΣοΫ͢Δ • όϥϯεΑ͘΍Δ
43. ·ͱΊ • ͳͥAndroidΒ͘͠࡞Δͷ͔੔ཧ͢Δ • ݐઃతͳٞ࿦Λ͢Δ • ΤϯδχΞͷ΍͍͖ͬͯ • Ұ൪ଚॏ͢΂͖͸Ϣʔβʔ ΋͠΋ʮAndroid͸iOSͱಉ͡σβΠϯͰʂʯͱݴΘΕͨΒ…
44. ͋ͱ͸Ωϛͷ໨Ͱ ͔֬Ίͯ͘Εʂ