Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
モバイルアプリのリストUIにおける 理想的なState表示について / The ideal s...
Search
rockname
November 17, 2021
Design
7
2.1k
モバイルアプリのリスト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
AIを活用したレシート読み取り機能の開発から得られた実践知 / AI Receipt Scan Practice
rockname
2
1.5k
Unlock the Potential of Swift Code Generation
rockname
0
410
生成AIを活用したレシート読み取り機能のアプリ開発の裏側 / AI Receipt Scan App Development
rockname
0
110
ゼロから理解するDependency Injection / Understanding Dependency Injection from the Ground Up
rockname
2
4.1k
サブスクリプション機能制御の設計における勘所
rockname
0
1.1k
Anatomy of Dynamic color
rockname
1
1.2k
キャッシュによる状態管理のアーキテクチャ / Cache-based state management architecture
rockname
10
20k
Optimistic Updatesで UXを向上させる / Improve UX with Optimistic Updates
rockname
3
1.4k
オンデバイスで学習可能になったCreate MLで画像分類器を作ってみた💪 / Developing an app to train an image classifier on iOS Device using Create ML
rockname
4
510
Other Decks in Design
See All in Design
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
550
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
310
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
490
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.8k
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
260
Goodpatch Tour💙 / We are hiring!
goodpatch
31
890k
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
900
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.5k
Findyのプロデチームの 歩みとこれから
satty9556
0
290
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
340
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
400
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
160
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Gamification - CAS2011
davidbonilla
81
5.5k
Writing Fast Ruby
sferik
629
62k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Making Projects Easy
brettharned
118
6.4k
How GitHub (no longer) Works
holman
315
140k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
GraphQLとの向き合い方2022年版
quramy
49
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
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!!!