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
2k
モバイルアプリのリスト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
Unlock the Potential of Swift Code Generation
rockname
0
400
生成AIを活用したレシート読み取り機能のアプリ開発の裏側 / AI Receipt Scan App Development
rockname
0
91
ゼロから理解するDependency Injection / Understanding Dependency Injection from the Ground Up
rockname
2
4k
サブスクリプション機能制御の設計における勘所
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
The practice of inclusive design -WWDC21-
rockname
1
1.3k
Other Decks in Design
See All in Design
mento Design Team Portfolio
mento0fficial
1
670
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
150
decksh object reference
ajstarks
2
1.3k
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.3k
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
440
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
880
CursorでAI活用のナレッジベースを構築する
kanzaki
0
670
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
530
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
300
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
110
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
The World Runs on Bad Software
bkeepers
PRO
70
11k
We Have a Design System, Now What?
morganepeng
53
7.8k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Balancing Empowerment & Direction
lara
3
620
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Fireside Chat
paigeccino
39
3.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Bash Introduction
62gerente
615
210k
Optimizing for Happiness
mojombo
379
70k
What's in a price? How to price your products and services
michaelherold
246
12k
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!!!