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
1.8k
モバイルアプリのリスト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 App Development
rockname
0
28
ゼロから理解するDependency Injection / Understanding Dependency Injection from the Ground Up
rockname
2
3.6k
サブスクリプション機能制御の設計における勘所
rockname
0
970
Anatomy of Dynamic color
rockname
1
1.1k
キャッシュによる状態管理のアーキテクチャ / Cache-based state management architecture
rockname
10
19k
Optimistic Updatesで UXを向上させる / Improve UX with Optimistic Updates
rockname
3
1.3k
オンデバイスで学習可能になったCreate MLで画像分類器を作ってみた💪 / Developing an app to train an image classifier on iOS Device using Create ML
rockname
4
480
The practice of inclusive design -WWDC21-
rockname
1
1.2k
AndroidアプリでLine Heightを 設定するときに注意したいこと / Things to keep in mind when setting Line Height in your Android app
rockname
1
5k
Other Decks in Design
See All in Design
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
780
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4.1k
ネットワークセキュリティ科 学科紹介
sklbj_unz
0
160
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
200
発表資料テンプレート / My slide template
thatblue
0
200
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
510
ZKK_001.pdf
nicholaspegu
0
1.5k
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
230
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
550
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
140
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
980
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
130
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
RailsConf 2023
tenderlove
29
1k
A better future with KSS
kneath
238
17k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
BBQ
matthewcrist
86
9.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Building Applications with DynamoDB
mza
93
6.2k
Code Reviewing Like a Champion
maltzj
521
39k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
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!!!