「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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. ղܾ
   

   View Slide

6. ͠·ͤΜ
   

   View Slide

7. ͳͥ͜͏ݴΘΕΔͷ͔
   ͳͥiOSͳUIͷAndroidΞϓϦ
   ͕ੈʹग़͍ͯΔͷ͔
   

   View Slide

8. ݪҼͷ෼ੳ
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. ݪҼ͔ΒΈΔΤϯδχΞʹ

    ඞཁͱ͞ΕΔ΋ͷ
    1. આ໌͢ΔͨΊͷ৘ใ੔ཧ
    2. ٞ࿦͢ΔͨΊͷ৺ߏ͑ɹ
    3. ࣮ફ͢ΔͨΊͷલఏ஌ࣝɹ
    (ݸਓͷײ૝Ͱ͢)
    

    View Slide

13. આ໌͢ΔͨΊͷ৘ใ੔ཧ 

    ʙͳͥAndroidΒ͘͠࡞Δͷ͔ʙ
    

    View Slide

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

    View Slide

15. ᶄGooglePlayʹ࠷దԽ͢ΔͨΊ
    • GooglePlayͰϑΟʔνϟʔ͞ΕΔ
    • ϥϯΩϯά΍ݕࡧॱҐ΋্͕Δ

    https://support.google.com/googleplay/android-developer/answer/4448378
    

    View Slide

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

    View Slide

17. ٞ࿦͢ΔͨΊͷ৺ߏ͑

    ʙΑ͋͘Δ͝ҙݟͱͦͷରԠྫʙ
    

    View Slide

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

    View Slide

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

    View Slide

20. ʮAndroidͷ͜ͱΛߟ͑Δ
    Ϧιʔε͸ͳ͍ʂʯ
    →໨ͷલͷੜ࢈ੑ্͚͍ͩ͛ͨʁ

    ɾ௕ظతͳੜ࢈ੑΛߟ͑Δ
    ɾΤϯδχΞओମͰਐΊΔ
    ɾڐՄΑΓँࡑͰ΍ͬͯΈͤΔ
    

    View Slide

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

    View Slide

22. ʮiOS͔ΒAndroidʹҠߦͨ͠
    Ϣʔβʔ͸ࠞཚ͢Δʂʯ
    →Ϣʔβʔͷཱ৔ʹཱ͍ͯͯͳ͍ʁ

    ɾͳͥ΍Δͷ͔࠶֬ೝ
    ɾΑ͘ߟ͑ΔͱϢʔβʔ͸ผʹࠔΒͳ͍
    

    View Slide

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

    View Slide

24. ʮϚςϦΞϧσβΠϯͰ࡞ͬͨ
    Βಠࣗੑ͕ͳ͘ͳΔʂʯ
    →ΨΠυϥΠϯͷཧղ͕଍Γͳ͍ʁ

    ɾͳͥͲΜͳಠࣗੑ͕ඞཁͳͷ͔࠶֬ೝ
    ɾݫີʹकΒͳͯ͘΋͍͍
    ɾʮ͋͑ͯ͜͏͢Δʯͱ͍͏ࢪࡦ͸ΊͬͪΌ͋Γ
    

    View Slide

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

    View Slide

26. ʮΨΠυϥΠϯ͕ӳޠͰ
    ಡΊͳ͍ʂʯ
    →ͦ΋ͦ΋ಡΜͩ͜ͱͳ͍ʁ

    ɾ·ͣ೔ຊޠ൛ΛಡΜͰ΋Β͏
    ɾશମΛਤ͚ͩྲྀ͠ಡΉ͚ͩͰ΋ޮՌ͋Γ
    ɾ໨ඪΛཱͯͯྠಡձΛ΍Δ
    

    View Slide

27. ʮiOSͷσβΠϯʹग़དྷͳ͍ͷ͸
    ͋ͳͨͷ࣮ྗ͕଍Γͳ͍͚ͩʂʯ
    

    View Slide

28. ʮiOSͷσβΠϯʹग़དྷͳ͍ͷ͸
    ͋ͳͨͷ࣮ྗ͕଍Γͳ͍͚ͩʂʯ
    →ײ৘ʹૌ͑ͯ͘Δʁ

    ɾ൓࿦͢΂͖ͱ͜Ζ͸ྫྷ੩ʹ൓࿦͢Δ
    ɾ
    ɾ
    

    View Slide

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

    View Slide

30. ࣮ફ͢ΔͨΊͷલఏ஌ࣝɹ

    ʙAndroidΒ͠͞ͱϚςϦΞϧσβΠϯΒ͠͞ʙ
    

    View Slide

31. iOSͱAndroidͷUIରԠද
    

    View Slide

32. ͦΜͳ΋ͷ͸ͳ͍
    • ಉ͡Α͏ͳݟͨ໨ͷUIͰ΋࡞ΒΕͨܦҢ΍

    ໨త͸ҧ͏
    • ୯७ͳൺֱ͸Ͱ͖ͳ͍
    • ͱ͸͍͑ʮࣅͯΔʯUI͸͋Δ
    • ʮ୅༻Ͱ͖Δ͔΋ʯ͘Β͍ʹଊ͑Δ
    

    View Slide

33. AndroidΒ͘͢͠Δɾ
    ϚςϦΞϧσβΠϯΒ͘͢͠Δ
    • ͪΐͬͱ͕ͪ͏
    • AndroidΒ͠͞

    →ඪ४APIͰ୅༻ͯ͠iOSײ͔Β୤٫
    • ϚςϦΞϧσβΠϯΒ͠͞

    →ΨΠυϥΠϯʹ฿ͬͯΑΓ༏ΕͨମݧΛ
    

    View Slide

34. AndroidΒ͘͢͠Δྫ
    

    View Slide

35. right-pointing carets͸࡟আ
    • ը໘ભҠΛࣔ͢͜Ε ʼ
    • AndroidͰ͸ΞΠίϯͷ

    ҙຯΛߟ͑ͤͯ͞͠·͏

    ͜ͱ͸͠ͳ͍

    

    

    

    https://developer.android.com/design/patterns/pure-android.html
    

    View Slide

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

    View Slide

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

    View Slide

38. λονϑΟʔυόοΫΛ͚ͭΔ
    • λοϓՄೳൣғΛࣔ͢
    • ࿈ଓͨ͠ಈ͖ΛݟͤΔ
    • selectableItemBackground,

    selectableItemBackgroundBorderless

    

    

    https://material.io/guidelines/motion/material-motion.html
    https://developer.android.com/training/material/animations.html
    

    View Slide

39. ΦϑϥΠϯͰ΋࢖͑ΔΑ͏ʹ͢Δ
    • ΦϑϥΠϯͰ΋࠷௿ݶͷ

    ػೳ͸ఏڙ͠Α͏
    • ΦϑϥΠϯঢ়ଶͰ͋Δ͜ͱ

    Λ఻͑Α͏
    https://material.io/guidelines/patterns/offline-states.html
    

    View Slide

40. ଓ͖͸WebͰʂʂʂʂʂʂʂ
    

    View Slide

41. ͍͞͝ʹ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide