Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
モバイルアプリのリストUIにおける 理想的なState表示について / The ideal state display in a mobile app list UI
rockname
November 17, 2021
Design
5
850
モバイルアプリのリストUIにおける 理想的なState表示について / The ideal state display in a mobile app list UI
[Online] potatotips #76 iOS/Android開発Tips共有会
https://potatotips.connpass.com/event/224395/
rockname
November 17, 2021
Tweet
Share
More Decks by rockname
See All by rockname
Optimistic Updatesで UXを向上させる / Improve UX with Optimistic Updates
rockname
2
400
オンデバイスで学習可能になったCreate MLで画像分類器を作ってみた💪 / Developing an app to train an image classifier on iOS Device using Create ML
rockname
4
210
The practice of inclusive design -WWDC21-
rockname
1
740
AndroidアプリでLine Heightを 設定するときに注意したいこと / Things to keep in mind when setting Line Height in your Android app
rockname
2
960
2021年度 ミクシィ新卒研修 -iOSアプリ開発- / 2021 iOS mixi training
rockname
7
38k
iOSアプリでLine Heightを 設定するときに注意したいこと / Things to keep in mind when setting Line Height in your iOS app
rockname
1
790
2020年度 ミクシィ新卒研修 -設計・テスト- / 2020 design test mixi training
rockname
0
910
デザインにオブジェクト指向を適用する / Apply Object-Oriented to your design
rockname
12
3.8k
モバイルアプリを開発する上で理想的な色の命名規則 / Ideal color naming convention for developing mobile apps
rockname
13
1.9k
Other Decks in Design
See All in Design
なみなみかみっ
naminamikami2021
1
240
リサーチ文化を組織に埋め込むために実践したこと
hiranotomoki
5
2.1k
Детский парк Фили
zapoimu
0
580
Designing for trust: Applying Promise Theory to collaborate effectively with your remote teams
akiramotomura
0
440
Interest + Curiosity Booklet
juliaso
0
130
Illustration journey @Yahoo
xuechunwu
0
620
サービス設計12箇条で紐解く「サービスデザイン思考」
y150saya
0
430
The Triangle
wallabites
0
130
今から始めるFigma超入門
448jp
0
590
Design System ガイドライン策定のススメ
tadaking
4
1.2k
hourly comics (2022)
gyroidz
0
280
デザイン編 Hatena Engineer Seminar #19
takuwolog
2
700
Featured
See All Featured
How GitHub (no longer) Works
holman
296
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
Raft: Consensus for Rubyists
vanstee
126
5.5k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
A designer walks into a library…
pauljervisheath
196
16k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
We Have a Design System, Now What?
morganepeng
35
3k
Gamification - CAS2011
davidbonilla
75
3.9k
Adopting Sorbet at Scale
ufuk
63
7.6k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Code Reviewing Like a Champion
maltzj
506
37k
Transcript
ϞόΠϧΞϓϦͷϦετUIʹ͓͚Δ ཧతͳStateදࣔʹ͍ͭͯ גࣜձࣾϛΫγΟ ΈͯͶࣄۀ෦ ϩΫωϜ @_rockname
mixi, Inc. ࣗݾհ ϩΫωϜ / rockname • ϛΫγΟͰʮՈΞϧόϜΈͯͶʯͱ͍͏ΞϓϦΛ ։ൃͯ͠Δ •
iOSϝΠϯɺAndroid, RailsͳͲॻ͍ͯΔ • εϚϒϥ͕͖
mixi, Inc. ϦετUIʹ͍ͭͯ • ྫ͑ɺʮ͜Μͳը໘Λ࣮͍ͯͩ͘͠͞ʯͱσβΠφʔ͔ΒFigma͕ڞ༗͞Εͨͱ͢Δ
mixi, Inc. ಡΈࠐΈதͲΜͳUIʁ
mixi, Inc. ಡΈࠐΈʹࣦഊͨ͠Βʁ ಡΈࠐΈதͲΜͳUIʁ
mixi, Inc. ಡΈࠐΈதͲΜͳUIʁ ಡΈࠐΈʹࣦഊͨ͠Βʁ ಡΈࠐΜͩϦετ͕ۭͩͬͨΒʁ
mixi, Inc. ϦετUIʹ͓͚Δ͞·͟·ͳState • ϦετUIͰɺॳճʹίϯςϯπΛಡΈࠐΉॲཧ͕Δ • ͞ΒʹɺϦετͷ্, Լ͔ΒՃͰಡΈࠐΉॲཧଘࡏ͢Δ • ಡΈࠐΈॲཧ͔Βʮޭʯʮࣦഊʯʮۭʯͷେ͖͘3ύλʔϯͷ݁Ռ͕ಘΒΕΔ
• ॳճ͓ΑͼՃͷಡΈࠐΈॲཧʹ͓͚ΔಡΈࠐΈதͷStateɺ͞Βʹ͔ͦ͜ΒಘΒΕΔ݁ ՌͷStateΛ߹ΘͤΔͱɺϦετUIͰද͖ࣔ͢State͕ଟ͘ଘࡏ͍ͯ͠Δ͜ͱ͕Θ͔ Δ
ॳճͷಡΈࠐΈॲཧ
mixi, Inc. ॳճͷಡΈࠐΈॲཧ -Loading State- • ॳճͷಡΈࠐΈॲཧʹ͓͚ΔಡΈࠐΈதͷදࣔʹ ͍ͭͯߟ͑Δ • ҰൠతͳσβΠϯͱͯ͠ਅΜதʹIndicatorΛදࣔ͢
Δύλʔϯ͕ڍ͛ΒΕΔ
mixi, Inc. Human Interface Guidelines • AppleͷHuman Interface GuidelinesͷLoadingͷ߲ʹɺʮ͙͢ʹը໘Λදࣔ͠ɺίϯ ςϯπ͕·ͩར༻Ͱ͖ͳ͍ॴΛࣔͨ͢ΊʹɺϓϨʔεϗϧμʔͷςΩετɺάϥϑΟο
ΫɺΞχϝʔγϣϯΛ༻͢Δɻʯͱ͍͏Α͏ʹه͞Ε͍ͯΔ https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/loading/
mixi, Inc. Skeleton Screen • ίϯςϯπ͕શʹಡΈࠐ·ΕΔલʹϓϨʔεϗϧμʔΛදࣔ ͢ΔUIύλʔϯͱͯ͠ɺSkeleton Screenͱ͍͏ख๏͕ଘࡏ͢Δ • IndicatorΛදࣔ͢Δ͚ͩͷύλʔϯͱҧͬͯɺͲ͜ʹԿ͕ಡ
Έࠐ·ΕΔ͔ͱ͍͏ใΛϓϨʔεϗϧμʔͰࣔ͢͜ͱʹΑ ΓɺಡΈࠐΈͷϓϩηεͰͳ͘දࣔ͞ΕΔίϯςϯπϢʔ βʔͷҙ͕͖ࣝɺମײͷ͕ͪ࣌ؒݮগ͢ΔޮՌ͕ಘΒΕΔ • SwiftUIͰ؆୯ʹ࣮Ͱ͖ΔAPI͕ఏڙ͞Ε͍ͯΔɺJetpack ComposeͰGoogleఏڙͷ֦ுϥΠϒϥϦͰ؆୯ͳ࣮͕Մ ೳ
mixi, Inc. ॳճͷಡΈࠐΈॲཧ -Error State- • ॳճͷಡΈࠐΈॲཧʹ͓͚ΔΤϥʔදࣔʹ͍ͭͯߟ͑Δ • AlertDialogΛදࣔͯ͠ϢʔβʔΛϞʔμϧભҠͤ͞ ͯ͠·͏͜ͱආ͚͍ͨ
• ίϯςϯπ͕ಡΈࠐ·ΕΔͣͩͬͨॴʹɺԿ͕ى͖ ͔ͨΛϢʔβʔΘ͔Γ͘͢දࣔͰ͖Δͱྑ͍ • ϦτϥΠͷಋઢ·ͰදࣔͰ͖͍ͯΔͱͳ͓ྑ͍ https://material.io/archive/guidelines/patterns/errors.html#errors-app-errors
mixi, Inc. ॳճͷಡΈࠐΈॲཧ -Empty State- • ॳճͷಡΈࠐΈॲཧʹ͓͚Δۭදࣔʹ͍͍ͭͯͭͯߟ͑ Δ • Կදࣔ͠ͳ͔ͬͨ߹ɺϢʔβʔʹͱͬͯͦΕ͕Τ
ϥʔͳͷ͔ۭͨͩͳ͚ͩͳͷ͔ผ͕͔ͭͣɺόάͷΑ ͏ʹࢥΘΕͯ͠·͏ • Τϥʔදࣔͱಉ༷ʹɺίϯςϯπ͕ಡΈࠐ·ΕΔͣ ͩͬͨॴʹɺϢʔβʔͷΞϓϦͷཧղΛଅਐΑ͏ͳ ԿΒ͔ͷಋઢΛදࣔͰ͖Δͱྑ͍ https://material.io/design/communication/empty-states.html#content
ՃͷಡΈࠐΈॲཧ
mixi, Inc. ՃͷಡΈࠐΈॲཧ -Loading State- • ϦετUIͷ্Լ͔ΒՃͰίϯςϯπΛಡΈࠐΉࡍͷಡ ΈࠐΈதදࣔʹ͍ͭͯߟ͑Δ • ্͔ΒͷಡΈࠐΈɺPull
to Refresh͕ύλʔϯͱͯ͠ڍ ͛ΒΕΔ • Լ͔ΒͷಡΈࠐΈɺϦετ͕Լ·ͰεΫϩʔϧͨ͠ࡍ ʹInidicatorΛԼ෦ʹදࣔ͢Δύλʔϯ͕ߟ͑ΒΕΔ • ՃಡΈࠐΈॲཧ͕ൃੜ͢ΔॴʹదʹIndicatorΛ ஔ͢Δͷ͕ྑ͍
mixi, Inc. ՃͷಡΈࠐΈॲཧ -Error State- • ՃͷಡΈࠐΈॲཧʹ͓͚ΔΤϥʔදࣔʹ͍ͭͯߟ͑Δ • AlertDialogʹΑΔදࣔΓආ͚͍ͨ •
ॳճͷಡΈࠐΈॲཧʹ͓͚ΔΤϥʔදࣔͷΑ͏ʹը໘શମʹΤϥʔ දࣔΛͯ͠͠·͏ͷମݧͱͯ͠ѱ͍ͷͰආ͚Δ͖ • AndroidͷSnackbarͷΑ͏ͳϢʔβʔͷૢ࡞Λதஅͤ͞ͳ͍ίϯϙʔ ωϯτΛ༻͍ͯΤϥʔΛ௨͢Δύλʔϯ͕ྑ͍ • IndicatorΛද͍ࣔͯͨ͠ՕॴʹΤϥʔʹ͍ͭͯͷจݴΛදࣔͯ͋͛͠ ΔͷΘ͔Γͯ͘͢ྑ͍ͩΖ͏ (TwitterͦͷΑ͏ʹͳ͍ͬͯΔ)
mixi, Inc. ՃͷಡΈࠐΈॲཧ -Empty State- • ՃͷಡΈࠐΈॲཧʹ͓͚Δۭදࣔʹ͍ͭͯߟ͑Δ • ॳճͷಡΈࠐΈॲཧͱҧ͍ϢʔβʔΛҊ͢Δඞཁ ಛʹͳ͍ͨΊɺԿ͔Empty
Stateͱͯ͠දࣔ͢Δඞཁͳ ͍ͩΖ͏ • গ͠εϖʔεΛ࣋ͨͤͯ͋͛Δͱʮۭ͔ͩͬͨΒ͜ΕҎ ্ಡΈࠐΊͳ͍ʯͱ͍͏͜ͱ͕ϢʔβʔʹΘΓ͢ ͘ͳΔ͔͠Εͳ͍ (TwitterͦͷΑ͏ʹͳ͍ͬͯΔ)
mixi, Inc. ·ͱΊ • ϦετUIͰѻ͏͖Stateҙ֎ͱଟ͘ɺ༷ͱͯ͠දݱ͞Εͳ͍··งғؾͰ࣮͕ਐ Ή͜ͱଟ͍ • งғؾͰͷ࣮ʹͳͬͯ͠·͏ཧ༝ɺ֬ೝͳͲͷίϛϡχέʔγϣϯίετ͕ߴ͍͔Β • ࠓճ͓ͨ͠͠Α͏ͳύλʔϯʹ͍ͭͯ͋Β͔͡ΊνʔϜͰڞ௨ೝࣝΛ߹ΘͤͯΨΠυϥ
ΠϯԽͰ͖͍ͯΔͱɺίϛϡχέʔγϣϯίετΛݮͭͭ͠ΤϯδχΞ͕ࣗతʹ࣮ Ͱ͖Δ • ΈͯͶͰ͜ͷΑ͏ͳΨΠυϥΠϯΛσβΠϯγεςϜͷҰ෦ͱͯ͠σβΠφʔͱڠྗ͠ ͭͭΤϯδχΞओಋͰӶҙ੍࡞த💪
Thank you!!!