HCD-Net 教育セミナー「サービスデザイン方法論」の第6回でお話ししたテーマ「スマホのUIパターン」のプレゼン時のスライドです。 HCD-Net | 2013年度HCD-Net教育セミナー「サービスデザイン方法論（全6回)」http://www.hcdnet.org/event/2013hcd-net6_1.php

1. UI Patterns for Smartphone
HCD-Net Seminar - Service Design #6
坂本貴史
2013/11/16
By shioshvili

3. By placeit

4. 必要⼗十分な表現に留留める
ちら⾒見見しやすいようにデザインする
階層を深くしない
⾃自然な形で接点を⾒見見せる
途中で操作を⽌止めても同じ事ができる
時間軸を使って情報を整理理する

5. スマホにおけるデザインパターン
デバイスエコシステム
6
コンテンツ構造や遷移
6
ユーザーインターフェース
10

6. 6
デバイスエコシステム パターン
⼀一貫性の保持
1
状態の同期
2
画⾯面共有
3
デバイス間の移動
4
相互補完
5
同時発⽣生
6

7. ⼀一貫性の保持
どのデバイスでも同⼀一の体験ができること

8. 状態の同期
どのデバイスでも同じ状態になるよう、コンテンツを同期すること

9. 画⾯面共有
複数のデバイスで同⼀一のコンテンツを共有すること

10. デバイス間の移動
ある利利⽤用体験を、別のデバイスに移動すること

11. 相互補完
各デバイスが特定の役割を担い、それぞれの役割を補うこと

12. 同時発⽣生
デバイス別に同時発⽣生する状況を、つながった体験にすること

13. 6
デバイスエコシステム パターン
⼀一貫性の保持
1
どのデバイスでも同⼀一の体験ができること
状態の同期
2
どのデバイスでも同じ状態になるよう、コンテンツを同期すること
画⾯面共有
3
複数のデバイスで同⼀一のコンテンツを共有すること
デバイス間の移動
4
ある利利⽤用体験を、別のデバイスに移動すること
相互補完
5
各デバイスが特定の役割を担い、それぞれの役割を補うこと
同時発⽣生
6
デバイス別に同時発⽣生する状況を、つながった体験にすること

14. 6
コンテンツ構造や遷移 パターン
階層型/ピラミッド型
1
ハブ&スポーク型
2
マトリョーシカ型
3
タブビュー型
4
弁当箱型/ダッシュボード型
5
フィルタビュー型
6

15. 階層型/ピラミッド型
インデックスページとサブページといった親⼦子関係を持つ構造

16. ハブ&スポーク型
中央があり、そこから離離れタスクを実⾏行行し、また中央に戻る構造

17. マトリョーシカ型
直線的にタスクをリードする⽅方法、⼊入れ⼦子関係の構造

18. タブビュー型
同⼀一レベルのコンテンツを並列列に表⽰示する⽅方法

19. 弁当箱型/ダッシュボード型
関連コンテンツを⼀一⽬目で表⽰示する⽅方法

20. フィルタビュー型
同⼀一データを多⾯面的な検索索結果で表⽰示する⽅方法

21. 6
コンテンツ構造や遷移 パターン
階層型/ピラミッド型
1
インデックスページとサブページといった親⼦子関係を持つ構造
ハブ&スポーク型
2
中央があり、そこから離離れタスクを実⾏行行し、また中央に戻る構造
マトリョーシカ型
3
直線的にタスクをリードする⽅方法、⼊入れ⼦子関係の構造
タブビュー型
4
同⼀一レベルのコンテンツを並列列に表⽰示する⽅方法
弁当箱型/ダッシュボード型
5
関連コンテンツを⼀一⽬目で表⽰示する⽅方法
フィルタビュー型
6
同⼀一データを多⾯面的な検索索結果で表⽰示する⽅方法

22. 10
ユーザーインターフェース パターン
ナビゲーション
1
フォーム
2
テーブル・リスト
3
検索索・ソート・フィルタ
4
ツール
5
グラフ
6
誘導
7
フィードバック・アフォーダンス
8
ヘルプ
9
アンチパターン
10

23. ナビゲーション

24. フォーム

25. テーブル・リスト

26. 検索索・ソート・フィルタ

27. ツール

28. グラフ

29. 誘導

30. フィードバック・アフォーダンス

31. ヘルプ

32. アンチパターン

33. 10
ユーザーインターフェース パターン
ナビゲーション
1
メイン画⾯面やそのメニュー表⽰示パターン
フォーム
2
サインインや登録、チェックアウトなどの表⽰示パターン
テーブル・リスト
3
表やリスト、画像付きリストの表⽰示パターン
検索索・ソート・フィルタ
4
テキスト検索索とその候補、並び替えや検索索条件での絞り込み表⽰示パターン
ツール
5
ツールバーやアクションボタンの表⽰示パターン
グラフ
6
棒グラフや円グラフ、データをもとにしたグラフ表⽰示パターン
誘導
7
モーダルウィンドウやバルーン、チップス表⽰示パターン
フィードバック・アフォーダンス
8
レスポンスの表⽰示でエラーや確認の表⽰示パターン
ヘルプ
9
ガイドやコーチ、ツアーなどの表⽰示パターン
アンチパターン
10
パターンに当てはまらない表⽰示パターン

34. スマホにおけるデザインパターン
デバイスエコシステム
6
クロスデバイスでの利利⽤用を検討するため
コンテンツ構造や遷移
6
⽬目的に適した構造や遷移を検討するため
ユーザーインターフェース
10
利利⽤用状況に応じた対応を検討するため

38. Smart Transitions In User Experience Design By Adrian Zumbrunnen

39. Design is not just what it looks like and feels like.
Design is how it works.
Steve Jobs
デザインとは、単なる視覚や感覚のことではない。デザインとは、どうやって動くかだ。

40. T you!
hank
@bookslope