Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

ogapants
March 28, 2018

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

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

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

ogapants

March 28, 2018
Tweet

More Decks by ogapants

Other Decks in Technology

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