Save 37% off PRO during our Black Friday Sale! »

モバイルアプリのリストUIにおける
理想的なState表示について / The ideal state display in a mobile app list UI

070d33664df274636dad3da21c9b21fc?s=47 rockname
November 17, 2021

モバイルアプリのリストUIにおける
理想的なState表示について / The ideal state display in a mobile app list UI

[Online] potatotips #76 iOS/Android開発Tips共有会
https://potatotips.connpass.com/event/224395/

070d33664df274636dad3da21c9b21fc?s=128

rockname

November 17, 2021
Tweet

Transcript

  1. ϞόΠϧΞϓϦͷϦετUIʹ͓͚Δ
 ཧ૝తͳStateදࣔʹ͍ͭͯ גࣜձࣾϛΫγΟ ΈͯͶࣄۀ෦ ϩΫωϜ @_rockname

  2. mixi, Inc. ࣗݾ঺հ ϩΫωϜ / rockname • ϛΫγΟͰʮՈ଒ΞϧόϜΈͯͶʯͱ͍͏ΞϓϦΛ
 ։ൃͯ͠Δ •

    iOSϝΠϯɺAndroid, RailsͳͲ΋ॻ͍ͯΔ • εϚϒϥ͕޷͖
  3. mixi, Inc. ϦετUIʹ͍ͭͯ • ྫ͑͹ɺʮ͜Μͳը໘Λ࣮૷͍ͯͩ͘͠͞ʯͱσβΠφʔ͔ΒFigma͕ڞ༗͞Εͨͱ͢Δ

  4. mixi, Inc. ಡΈࠐΈத͸ͲΜͳUIʁ

  5. mixi, Inc. ಡΈࠐΈʹࣦഊͨ͠Βʁ ಡΈࠐΈத͸ͲΜͳUIʁ

  6. mixi, Inc. ಡΈࠐΈத͸ͲΜͳUIʁ ಡΈࠐΈʹࣦഊͨ͠Βʁ ಡΈࠐΜͩϦετ͕ۭͩͬͨΒʁ

  7. mixi, Inc. ϦετUIʹ͓͚Δ͞·͟·ͳState • ϦετUIͰ͸ɺॳճʹίϯςϯπΛಡΈࠐΉॲཧ͕૸Δ • ͞ΒʹɺϦετͷ্୺, Լ୺͔Β௥ՃͰಡΈࠐΉॲཧ΋ଘࡏ͢Δ • ಡΈࠐΈॲཧ͔Β͸ʮ੒ޭʯʮࣦഊʯʮۭʯͷେ͖͘3ύλʔϯͷ݁Ռ͕ಘΒΕΔ

    • ॳճ͓Αͼ௥ՃͷಡΈࠐΈॲཧʹ͓͚ΔಡΈࠐΈதͷStateɺ͞Βʹ͔ͦ͜ΒಘΒΕΔ݁ ՌͷStateΛ߹ΘͤΔͱɺϦετUIͰ͸දࣔ͢΂͖State͕਺ଟ͘ଘࡏ͍ͯ͠Δ͜ͱ͕Θ͔ Δ
  8. ॳճͷಡΈࠐΈॲཧ

  9. mixi, Inc. ॳճͷಡΈࠐΈॲཧ -Loading State- • ॳճͷಡΈࠐΈॲཧʹ͓͚ΔಡΈࠐΈதͷදࣔʹ ͍ͭͯߟ͑Δ • ҰൠతͳσβΠϯͱͯ͠ਅΜதʹIndicatorΛදࣔ͢

    Δύλʔϯ͕ڍ͛ΒΕΔ
  10. mixi, Inc. Human Interface Guidelines • AppleͷHuman Interface GuidelinesͷLoadingͷ߲໨ʹ͸ɺʮ͙͢ʹը໘Λදࣔ͠ɺίϯ ςϯπ͕·ͩར༻Ͱ͖ͳ͍৔ॴΛࣔͨ͢ΊʹɺϓϨʔεϗϧμʔͷςΩετɺάϥϑΟο

    ΫɺΞχϝʔγϣϯΛ࢖༻͢Δɻʯͱ͍͏Α͏ʹه͞Ε͍ͯΔ https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/loading/
  11. mixi, Inc. Skeleton Screen • ίϯςϯπ͕׬શʹಡΈࠐ·ΕΔલʹϓϨʔεϗϧμʔΛදࣔ ͢ΔUIύλʔϯͱͯ͠ɺSkeleton Screenͱ͍͏ख๏͕ଘࡏ͢Δ • IndicatorΛදࣔ͢Δ͚ͩͷύλʔϯͱ͸ҧͬͯɺͲ͜ʹԿ͕ಡ

    Έࠐ·ΕΔ͔ͱ͍͏৘ใΛϓϨʔεϗϧμʔͰࣔ͢͜ͱʹΑ ΓɺಡΈࠐΈͷϓϩηεͰ͸ͳ͘දࣔ͞ΕΔίϯςϯπ΁Ϣʔ βʔͷҙ͕ࣝ޲͖ɺମײͷ଴͕ͪ࣌ؒݮগ͢ΔޮՌ͕ಘΒΕΔ • SwiftUIͰ͸؆୯ʹ࣮૷Ͱ͖ΔAPI͕ఏڙ͞Ε͍ͯΔɺJetpack ComposeͰ΋Googleఏڙͷ֦ுϥΠϒϥϦͰ؆୯ͳ࣮૷͕Մ ೳ
  12. mixi, Inc. ॳճͷಡΈࠐΈॲཧ -Error State- • ॳճͷಡΈࠐΈॲཧʹ͓͚ΔΤϥʔදࣔʹ͍ͭͯߟ͑Δ • Alert΍DialogΛදࣔͯ͠ϢʔβʔΛϞʔμϧ΁ભҠͤ͞ ͯ͠·͏͜ͱ͸ආ͚͍ͨ

    • ίϯςϯπ͕ಡΈࠐ·ΕΔ͸ͣͩͬͨ৔ॴʹɺԿ͕ى͖ ͔ͨΛϢʔβʔ΁Θ͔Γ΍͘͢දࣔͰ͖Δͱྑ͍ • ϦτϥΠͷಋઢ·ͰදࣔͰ͖͍ͯΔͱͳ͓ྑ͍ https://material.io/archive/guidelines/patterns/errors.html#errors-app-errors
  13. mixi, Inc. ॳճͷಡΈࠐΈॲཧ -Empty State- • ॳճͷಡΈࠐΈॲཧʹ͓͚Δۭදࣔʹ͍͍ͭͯͭͯߟ͑ Δ • Կ΋දࣔ͠ͳ͔ͬͨ৔߹ɺϢʔβʔʹͱͬͯ͸ͦΕ͕Τ

    ϥʔͳͷ͔ۭͨͩͳ͚ͩͳͷ͔൑ผ͕͔ͭͣɺόάͷΑ ͏ʹࢥΘΕͯ͠·͏ • Τϥʔදࣔͱಉ༷ʹɺίϯςϯπ͕ಡΈࠐ·ΕΔ͸ͣ ͩͬͨ৔ॴʹɺϢʔβʔͷΞϓϦ΁ͷཧղΛଅਐΑ͏ͳ ԿΒ͔ͷಋઢΛදࣔͰ͖Δͱྑ͍ https://material.io/design/communication/empty-states.html#content
  14. ௥ՃͷಡΈࠐΈॲཧ

  15. mixi, Inc. ௥ՃͷಡΈࠐΈॲཧ -Loading State- • ϦετUIͷ্Լ͔Β௥ՃͰίϯςϯπΛಡΈࠐΉࡍͷಡ ΈࠐΈதදࣔʹ͍ͭͯߟ͑Δ • ্͔ΒͷಡΈࠐΈ͸ɺPull

    to Refresh͕ύλʔϯͱͯ͠ڍ ͛ΒΕΔ • Լ͔ΒͷಡΈࠐΈ͸ɺϦετ͕Լ·ͰεΫϩʔϧͨ͠ࡍ ʹInidicatorΛԼ෦ʹදࣔ͢Δύλʔϯ͕ߟ͑ΒΕΔ • ௥ՃಡΈࠐΈॲཧ͕ൃੜ͢Δ৔ॴʹద੾ʹIndicatorΛ഑ ஔ͢Δͷ͕ྑ͍
  16. mixi, Inc. ௥ՃͷಡΈࠐΈॲཧ -Error State- • ௥ՃͷಡΈࠐΈॲཧʹ͓͚ΔΤϥʔදࣔʹ͍ͭͯߟ͑Δ • Alert΍DialogʹΑΔදࣔ͸΍͸Γආ͚͍ͨ •

    ॳճͷಡΈࠐΈॲཧʹ͓͚ΔΤϥʔදࣔͷΑ͏ʹը໘શମʹΤϥʔ දࣔΛͯ͠͠·͏ͷ΋ମݧͱͯ͠ѱ͍ͷͰආ͚Δ΂͖ • AndroidͷSnackbarͷΑ͏ͳϢʔβʔͷૢ࡞Λதஅͤ͞ͳ͍ίϯϙʔ ωϯτΛ༻͍ͯΤϥʔΛ௨஌͢Δύλʔϯ͕ྑ͍ • IndicatorΛද͍ࣔͯͨ͠ՕॴʹΤϥʔʹ͍ͭͯͷจݴΛදࣔͯ͋͛͠ Δͷ΋Θ͔Γ΍ͯ͘͢ྑ͍ͩΖ͏ (Twitter͸ͦͷΑ͏ʹͳ͍ͬͯΔ)
  17. mixi, Inc. ௥ՃͷಡΈࠐΈॲཧ -Empty State- • ௥ՃͷಡΈࠐΈॲཧʹ͓͚Δۭදࣔʹ͍ͭͯߟ͑Δ • ॳճͷಡΈࠐΈॲཧͱ͸ҧ͍ϢʔβʔΛҊ಺͢Δඞཁ΋ ಛʹͳ͍ͨΊɺԿ͔Empty

    Stateͱͯ͠දࣔ͢Δඞཁ΋ͳ ͍ͩΖ͏ • গ͠εϖʔεΛ࣋ͨͤͯ͋͛Δͱʮۭ͔ͩͬͨΒ͜ΕҎ ্͸ಡΈࠐΊͳ͍ʯͱ͍͏͜ͱ͕Ϣʔβʔʹ఻ΘΓ΍͢ ͘ͳΔ͔΋͠Εͳ͍ (Twitter͸ͦͷΑ͏ʹͳ͍ͬͯΔ)
  18. mixi, Inc. ·ͱΊ • ϦετUIͰѻ͏΂͖State͸ҙ֎ͱଟ͘ɺ࢓༷ͱͯ͠දݱ͞Εͳ͍··งғؾͰ࣮૷͕ਐ Ή͜ͱ΋ଟ͍ • งғؾͰͷ࣮૷ʹͳͬͯ͠·͏ཧ༝͸ɺ֬ೝͳͲͷίϛϡχέʔγϣϯίετ͕ߴ͍͔Β • ࠓճ͓࿩ͨ͠͠Α͏ͳύλʔϯʹ͍ͭͯ͋Β͔͡ΊνʔϜͰڞ௨ೝࣝΛ߹ΘͤͯΨΠυϥ

    ΠϯԽͰ͖͍ͯΔͱɺίϛϡχέʔγϣϯίετΛ࡟ݮͭͭ͠ΤϯδχΞ͕ࣗ཯తʹ࣮૷ Ͱ͖Δ • ΈͯͶͰ͸͜ͷΑ͏ͳΨΠυϥΠϯΛσβΠϯγεςϜͷҰ෦ͱͯ͠σβΠφʔͱڠྗ͠ ͭͭΤϯδχΞओಋͰӶҙ੍࡞த💪
  19. Thank you!!!