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 state display in a mobile app list UI
Search
rockname
November 17, 2021
Design
7
1.4k
モバイルアプリのリスト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
ゼロから理解するDependency Injection / Understanding Dependency Injection from the Ground Up
rockname
1
2.6k
サブスクリプション機能制御の設計における勘所
rockname
0
690
Anatomy of Dynamic color
rockname
1
980
キャッシュによる状態管理のアーキテクチャ / Cache-based state management architecture
rockname
10
18k
Optimistic Updatesで UXを向上させる / Improve UX with Optimistic Updates
rockname
3
990
オンデバイスで学習可能になったCreate MLで画像分類器を作ってみた💪 / Developing an app to train an image classifier on iOS Device using Create ML
rockname
4
380
The practice of inclusive design -WWDC21-
rockname
1
1.1k
AndroidアプリでLine Heightを 設定するときに注意したいこと / Things to keep in mind when setting Line Height in your Android app
rockname
1
3.7k
2021年度 ミクシィ新卒研修 -iOSアプリ開発- / 2021 iOS mixi training
rockname
6
47k
Other Decks in Design
See All in Design
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.1k
UX/UI改善に貢献するユーザーテストとは? 基礎知識から実施のプロセスまで解説
ncdc
0
330
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
230
リリース1ヶ月後で機能をなくした話
hinofu
1
700
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
310
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
7.8k
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
2
760
TrollsTopia: Funtography- Part 1
kenijam
1
210
Web 組版の課題とその解法
yamatoiizuka
0
110
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
170
The Fight
euralisw
0
110
PRDがデザインプロセスを高速化した話
tooomo
1
320
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Designing with Data
zakiwarfel
96
4.8k
Building an army of robots
kneath
300
41k
What the flash - Photography Introduction
edds
64
11k
Practical Orchestrator
shlominoach
182
9.7k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
How GitHub (no longer) Works
holman
304
140k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
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!!!