Share
Embed
Slide 1
Slide 1 text
1
Slide 2
Slide 2 text
noppe
‣
DAWN for Mastodon
‣
Pococha at DeNA
2
Slide 3
Slide 3 text
3
Slide 4
Slide 4 text
iOSDCでUIの話をする
4
Slide 5
Slide 5 text
UIについて考えていること
5
Slide 6
Slide 6 text
UIについて考えていること
6
Slide 7
Slide 7 text
ライフステージの変化とUIの柔軟性
7
Slide 8
Slide 8 text
UIの柔軟性とは？
状況を問わずに価値を提供すること
8
Slide 9
Slide 9 text
9
Slide 10
Slide 10 text
10
Slide 11
Slide 11 text
11
Slide 12
Slide 12 text
アプリの前提が変わっている
単一の画面サイズを前提にできなくなっている
12
Slide 13
Slide 13 text
13
Slide 14
Slide 14 text
14
Slide 15
Slide 15 text
15
Slide 16
Slide 16 text
16
Slide 17
Slide 17 text
環境の変化が前提になった
‣ ウィンドウサイズが変わる
‣ 同じアプリが異なる環境に表示される
‣ 画面の形そのものも変わる
→ OSは「どの環境でも柔軟に見た目を変えてくれるもの」として
扱うように。
17
Slide 18
Slide 18 text
18
Slide 19
Slide 19 text
UIを観察する
19
Slide 20
Slide 20 text
20
Slide 21
Slide 21 text
21
Slide 22
Slide 22 text
目的
ユーザーが実現したいこと
‣ 例： 音楽を再生したい、写真を撮りたい
22
Slide 23
Slide 23 text
コンテキスト
ユーザーが置かれている状況
‣ iPadを使っている
‣ 怪我をしている
‣ 車を運転している
‣ 周囲が暗い など
23
Slide 24
Slide 24 text
インターフェース
最終的にユーザーが目的を実現するための手段
‣ ボタンがある
‣ 音声で呼び出せる
‣ 画面をスワイプできる
‣ など
24
Slide 25
Slide 25 text
例：ホーム画面
‣ 目的：アプリを起動する
‣ コンテキスト：iPhoneを使っている
‣ インターフェース：アプリアイコンのボタンが並ぶ
25
Slide 26
Slide 26 text
Q.３つの要素のうち、何を柔軟にするのか
26
Slide 27
Slide 27 text
目的とインターフェー
スが固定
コンテキストを変える必要がある
‣
目的：アプリを起動する
‣
インターフェース：グリッドにアプリ
‣
コンテキスト：車を運転している →
車を止めて、スマホを操作する
27
のボタンが並ぶ
Slide 28
Slide 28 text
目的とコンテキストが
固定
インターフェースを変える必要がある
‣
目的：アプリを起動する
‣
コンテキスト：車を運転している
‣
インターフェース：ボイスコマンドで
アプリを起動できる
28
Slide 29
Slide 29 text
コンテキストとインタ
ーフェースが固定
目的を変える必要がある
‣
コンテキスト：車を運転している
‣
インターフェース：グリッドにアプリ
‣
目的：アプリを起動する → 断念・延
期する
29
のボタンが並ぶ
Slide 30
Slide 30 text
固定する要素
柔軟性が求められる要素
目的とインターフェース
コンテキスト
目的とコンテキスト
インターフェース
インターフェースとコンテキス 目的
ト
30
Slide 31
Slide 31 text
A.インターフェースを柔軟にする
31
Slide 32
Slide 32 text
同じ目的に、複数のインターフェースを持て
る
32
Slide 33
Slide 33 text
33
Slide 34
Slide 34 text
34
Slide 35
Slide 35 text
35
Slide 36
Slide 36 text
36 p=purpose
Slide 37
Slide 37 text
デザインデータは「ある条件での正解」
（余談1）
37
Slide 38
Slide 38 text
38
Slide 39
Slide 39 text
39
Slide 40
Slide 40 text
インターフェースは目的とコンテキストによって決
定する
‣ 現実世界のコンテキスト
‣ 車を運転している
‣ 老眼である
‣ ソフトウェアのコンテキスト
‣ ウィンドウのサイズ
‣ ダークモードなど
40
Slide 41
Slide 41 text
41
Slide 42
Slide 42 text
42
Slide 43
Slide 43 text
43
Slide 44
Slide 44 text
全部のパターンを用意する？
44
Slide 45
Slide 45 text
45
Slide 46
Slide 46 text
コンテキストの変化にどう応答するか
‣ 連続的な適応
‣ 段階的な適応
46
Slide 47
Slide 47 text
連続的な適応
47
Slide 48
Slide 48 text
段階的な適応
48
Slide 49
Slide 49 text
49
Slide 50
Slide 50 text
50
Slide 51
Slide 51 text
ブレークポイントの見つけ方
‣ 増えすぎると実装パターンが増えてしまう
‣ 少なすぎるとインターフェースが十分に適応できない
‣ 同じインターフェースのまま、目的を十分に達成できるかどうか
51
Slide 52
Slide 52 text
休憩
52
Slide 53
Slide 53 text
実際のレイアウトでの活用
53
Slide 54
Slide 54 text
コンポーネント境界を見極める
54
Slide 55
Slide 55 text
55
Slide 56
Slide 56 text
56
Slide 57
Slide 57 text
57
Slide 58
Slide 58 text
連続的レイアウトと段階的レイアウト
58
Slide 59
Slide 59 text
59
Slide 60
Slide 60 text
60
Slide 61
Slide 61 text
連続的なレイアウトのパターン
枠のサイズが変化する時の対応
1. 枠にサイズを合わせる
2. ビューのサイズを優先する
61
Slide 62
Slide 62 text
枠のサイズに合わせる
62
Slide 63
Slide 63 text
枠に合わせたスクロールビューを挟む
63
Slide 64
Slide 64 text
固定サイズは問題が起きやすい
64
Slide 65
Slide 65 text
ビュー自身のサイズを優先する
65
Slide 66
Slide 66 text
66
Slide 67
Slide 67 text
段階的なレイアウト
67
Slide 68
Slide 68 text
段階的なレイアウトのパターン
境界に応じて、構造や表現そのものを切り替える
1. 表示する情報を増やす・減らす
2. 情報をまとめる・展開する
3. レイアウトの構造を組み替える
68
Slide 69
Slide 69 text
1.表示する情報を増やす・減らす
69
Slide 70
Slide 70 text
1.表示する情報を増やす・減らす
‣ 優先度の高いプロパティを残す
‣ 優先度は目的から逆算する
70
Slide 71
Slide 71 text
1.表示する情報を増やす・減らす
71
Slide 72
Slide 72 text
2.情報をまとめる・展開する
‣ セクション化して、格納・展開できるようにする。
72
Slide 73
Slide 73 text
2.情報をまとめる・展開する
73
Slide 74
Slide 74 text
AIによる新しい段階的レイアウトのパターン
（余談2）
74
Slide 75
Slide 75 text
75
Slide 76
Slide 76 text
76
Slide 77
Slide 77 text
連続的レイアウトと段階的レイアウトを
組み合わせて柔軟性を実現する
77
Slide 78
Slide 78 text
段階的レイアウトの発展系
段階的なレイアウトはビュー内で完結するものに限らない
ナビゲーションを含む構造の切り替えにも活用できる
78
Slide 79
Slide 79 text
79
Slide 80
Slide 80 text
コンテナビューコントローラ
UIKitやSwiftUIでは、このような高度な段階的レイアウトを持たせ
たコンテナビューコントローラーを標準で提供している。
80
Slide 81
Slide 81 text
81
Slide 82
Slide 82 text
82
Slide 83
Slide 83 text
83
Slide 84
Slide 84 text
標準UIは柔軟性においてベストプラクティス
‣ 複雑なコンテキストの変化に対応するためには、標準APIを使う
のがベストプラクティス
‣ カスタム実装は、作り手が意識したコンテキストにしか対応で
きない
‣ 標準APIと同レベルの柔軟性を自作するなら、それなりの覚悟が
必要
84
Slide 85
Slide 85 text
まとめ
85
Slide 86
Slide 86 text
絵としてのUIを作るのではなく、ユーザーの
目的とコンテキストから導出されるUIを作る
86
Slide 87
Slide 87 text
コンテキストをどこまで考慮できるかの勝負
自分以外の経験、異なる視点のユーザーの声
に耳を傾ける
87
Slide 88
Slide 88 text
無限に存在するコンテキストの組み合わせに
対して、作るべきものを見抜く
88
Slide 89
Slide 89 text
ご清聴ありがとうございました
89
Slide 90
Slide 90 text
Q&A
90
Slide 91
Slide 91 text
91