Androidエンジニア デザイン部 #1 https://nohana.connpass.com/event/80530/
続きのwebはこちら https://qiita.com/ogapants/items/8a551ed3b16bcf0cc3ed
ʮAndroidiOSͱಉ͡σβΠϯͰʂʯͱݴΘΕͨͱ͖ͷTips2018/03/28@ogapants
View Slide
ࣗݾհ• ͓͕ͺΜ@ogapants• Android։ൃྺ4͘Β͍• ࡞ͬͨ৽نϓϩμΫτ7ͭ͘Β͍• GooglePlayϕετΞϓϦͱͬͨ
ʮAndroidiOSͱಉ͡σβΠϯͰʂʯ
ʮ͍ɺiOSώϡʔϚϯΠϯλʔϑΣʔεΨΠυϥΠϯʹଇΓɺAndroidϚςϦΞϧσβΠϯΨΠυϥΠϯʹଇΓɺͦΕͧΕదͳUI/UXΛઃܭ͠·͠ΐ͏ʂʯ
ղܾ
͠·ͤΜ
ͳͥ͜͏ݴΘΕΔͷ͔ͳͥiOSͳUIͷAndroidΞϓϦ͕ੈʹग़͍ͯΔͷ͔
ݪҼͷੳ
ᶃاըσβΠφʔ͕AndroidΒ͘͢͠ΔརΛΒͳ͍
ᶄΤϯδχΞ͕ٞͰԡ͠ෛ͚ͨ
ᶅΤϯδχΞ͕AndroidΒ͍͠UIΛΒͳ͍
ݪҼ͔ΒΈΔΤϯδχΞʹ ඞཁͱ͞ΕΔͷ1. આ໌͢ΔͨΊͷใཧ2. ٞ͢ΔͨΊͷ৺ߏ͑ɹ3. ࣮ફ͢ΔͨΊͷલఏࣝɹ(ݸਓͷײͰ͢)
આ໌͢ΔͨΊͷใཧ ʙͳͥAndroidΒ͘͠࡞Δͷ͔ʙ
ᶃݮͷͨΊ• ࣮ͷ্• อकੑɺ֦ுੑͷ্
ᶄGooglePlayʹ࠷దԽ͢ΔͨΊ• GooglePlayͰϑΟʔνϟʔ͞ΕΔ• ϥϯΩϯάݕࡧॱҐ্͕Δ https://support.google.com/googleplay/android-developer/answer/4448378
ᶅϢʔβʔ͕ҧײͳ͘ૢ࡞Ͱ͖ΔΑ͏ʹ͢ΔͨΊ• ݟ׳ΕͨUIͰࢹೝੑൈ܈• ͍׳ΕͨUXͰૢ࡞ੑൈ܈
ٞ͢ΔͨΊͷ৺ߏ͑ ʙΑ͋͘Δ͝ҙݟͱͦͷରԠྫʙ
ࣄྫ※ඞͣ͠શͯʹͯ·ΔͷͰͳ͍Ͱ͢※ٞख๏ͷ͡Όͳ͍Ͱ͢※ݸਓͷײͰ͢
ʮAndroidͷ͜ͱΛߟ͑ΔϦιʔεͳ͍ʂʯ
ʮAndroidͷ͜ͱΛߟ͑ΔϦιʔεͳ͍ʂʯ→ͷલͷੜ࢈ੑ্͚͍ͩ͛ͨʁ ɾظతͳੜ࢈ੑΛߟ͑ΔɾΤϯδχΞओମͰਐΊΔɾڐՄΑΓँࡑͰͬͯΈͤΔ
ʮiOS͔ΒAndroidʹҠߦͨ͠ਓࠞཚ͢Δʂʯ
ʮiOS͔ΒAndroidʹҠߦͨ͠Ϣʔβʔࠞཚ͢Δʂʯ→Ϣʔβʔͷཱʹཱ͍ͯͯͳ͍ʁ ɾͳͥΔͷ͔࠶֬ೝɾΑ͘ߟ͑ΔͱϢʔβʔผʹࠔΒͳ͍
ʮϚςϦΞϧσβΠϯͰ࡞ͬͨΒಠࣗੑ͕ͳ͘ͳΔʂʯ
ʮϚςϦΞϧσβΠϯͰ࡞ͬͨΒಠࣗੑ͕ͳ͘ͳΔʂʯ→ΨΠυϥΠϯͷཧղ͕Γͳ͍ʁ ɾͳͥͲΜͳಠࣗੑ͕ඞཁͳͷ͔࠶֬ೝɾݫີʹकΒͳ͍͍ͯ͘ɾʮ͋͑ͯ͜͏͢Δʯͱ͍͏ࢪࡦΊͬͪΌ͋Γ
ʮΨΠυϥΠϯ͕ӳޠͰಡΊͳ͍ʂʯ
ʮΨΠυϥΠϯ͕ӳޠͰಡΊͳ͍ʂʯ→ͦͦಡΜͩ͜ͱͳ͍ʁ ɾ·ͣຊޠ൛ΛಡΜͰΒ͏ɾશମΛਤ͚ͩྲྀ͠ಡΉ͚ͩͰޮՌ͋ΓɾඪΛཱͯͯྠಡձΛΔ
ʮiOSͷσβΠϯʹग़དྷͳ͍ͷ͋ͳͨͷ࣮ྗ͕Γͳ͍͚ͩʂʯ
ʮiOSͷσβΠϯʹग़དྷͳ͍ͷ͋ͳͨͷ࣮ྗ͕Γͳ͍͚ͩʂʯ→ײʹૌ͑ͯ͘Δʁ ɾ͖͢ͱ͜Ζྫྷ੩ʹ͢Δɾɾ
Α͋͘Δ͝ҙݟͷରԠྫ·ͱΊ• ൃݴͷࠜڌΛཧղ͢Δ• Βͳ͍͜ͱڭ͑߹͏• ͓ޓ͍Λଚॏ͠߹͏
࣮ફ͢ΔͨΊͷલఏࣝɹ ʙAndroidΒ͠͞ͱϚςϦΞϧσβΠϯΒ͠͞ʙ
iOSͱAndroidͷUIରԠද
ͦΜͳͷͳ͍• ಉ͡Α͏ͳݟͨͷUIͰ࡞ΒΕͨܦҢ తҧ͏• ୯७ͳൺֱͰ͖ͳ͍• ͱ͍͑ʮࣅͯΔʯUI͋Δ• ʮ༻Ͱ͖Δ͔ʯ͘Β͍ʹଊ͑Δ
AndroidΒ͘͢͠ΔɾϚςϦΞϧσβΠϯΒ͘͢͠Δ• ͪΐͬͱ͕ͪ͏• AndroidΒ͠͞ →ඪ४APIͰ༻ͯ͠iOSײ͔Β٫• ϚςϦΞϧσβΠϯΒ͠͞ →ΨΠυϥΠϯʹ฿ͬͯΑΓ༏ΕͨମݧΛ
AndroidΒ͘͢͠Δྫ
right-pointing caretsআ• ը໘ભҠΛࣔ͢͜Ε ʼ• AndroidͰΞΠίϯͷ ҙຯΛߟ͑ͤͯ͞͠·͏ ͜ͱ͠ͳ͍ https://developer.android.com/design/patterns/pure-android.html
ઢϘλϯΘͳ͍• AndroidͰجຊRaisedButton(͔FlatButton)• PlayετΞͰݟ͔͚ΔͷͰ࣮ΞϦ…ʁ!https://material.io/guidelines/components/buttons.html
ϚςϦΞϧσβΠϯΒ͘͢͠Δྫ
λονϑΟʔυόοΫΛ͚ͭΔ• λοϓՄೳൣғΛࣔ͢• ࿈ଓͨ͠ಈ͖ΛݟͤΔ• selectableItemBackground, selectableItemBackgroundBorderless https://material.io/guidelines/motion/material-motion.htmlhttps://developer.android.com/training/material/animations.html
ΦϑϥΠϯͰ͑ΔΑ͏ʹ͢Δ• ΦϑϥΠϯͰ࠷ݶͷ ػೳఏڙ͠Α͏• ΦϑϥΠϯঢ়ଶͰ͋Δ͜ͱ Λ͑Α͏https://material.io/guidelines/patterns/offline-states.html
ଓ͖WebͰʂʂʂʂʂʂʂ
͍͞͝ʹ
ॾҙ• طଘͷϢʔβʔʹྀ͢Δ• ඪΛཱͯΔ• ࣈΛνΣοΫ͢Δ• όϥϯεΑ͘Δ
·ͱΊ• ͳͥAndroidΒ͘͠࡞Δͷ͔ཧ͢Δ• ݐઃతͳٞΛ͢Δ• ΤϯδχΞͷ͍͖ͬͯ• Ұ൪ଚॏ͖͢Ϣʔβʔ͠ʮAndroidiOSͱಉ͡σβΠϯͰʂʯͱݴΘΕͨΒ…
͋ͱΩϛͷͰ͔֬Ίͯ͘Εʂ