Próximos SlideShares
"UI Patterns for Smartphone" HCD-Net SD #6
- 1. UI Patterns for Smartphone HCD-Net Seminar - Service Design #6 坂本貴史 2013/11/16 By shioshvili
- 2. By placeit
- 3. 必要⼗十分な表現に留留める ちら⾒見見しやすいようにデザインする 階層を深くしない ⾃自然な形で接点を⾒見見せる 途中で操作を⽌止めても同じ事ができる 時間軸を使って情報を整理理する
- 4. スマホにおけるデザインパターン デバイスエコシステム 6 コンテンツ構造や遷移 6 ユーザーインターフェース 10
- 5. 6 デバイスエコシステム パターン ⼀一貫性の保持 1 状態の同期 2 画⾯面共有 3 デバイス間の移動 4 相互補完 5 同時発⽣生 6
- 6. ⼀一貫性の保持 どのデバイスでも同⼀一の体験ができること
- 7. 状態の同期 どのデバイスでも同じ状態になるよう、コンテンツを同期すること
- 8. 画⾯面共有 複数のデバイスで同⼀一のコンテンツを共有すること
- 9. デバイス間の移動 ある利利⽤用体験を、別のデバイスに移動すること
- 10. 相互補完 各デバイスが特定の役割を担い、それぞれの役割を補うこと
- 11. 同時発⽣生 デバイス別に同時発⽣生する状況を、つながった体験にすること
- 12. 6 デバイスエコシステム パターン ⼀一貫性の保持 1 どのデバイスでも同⼀一の体験ができること 状態の同期 2 どのデバイスでも同じ状態になるよう、コンテンツを同期すること 画⾯面共有 3 複数のデバイスで同⼀一のコンテンツを共有すること デバイス間の移動 4 ある利利⽤用体験を、別のデバイスに移動すること 相互補完 5 各デバイスが特定の役割を担い、それぞれの役割を補うこと 同時発⽣生 6 デバイス別に同時発⽣生する状況を、つながった体験にすること
- 13. 6 コンテンツ構造や遷移 パターン 階層型/ピラミッド型 1 ハブ&スポーク型 2 マトリョーシカ型 3 タブビュー型 4 弁当箱型/ダッシュボード型 5 フィルタビュー型 6
- 14. 階層型/ピラミッド型 インデックスページとサブページといった親⼦子関係を持つ構造
- 15. ハブ&スポーク型 中央があり、そこから離離れタスクを実⾏行行し、また中央に戻る構造
- 16. マトリョーシカ型 直線的にタスクをリードする⽅方法、⼊入れ⼦子関係の構造
- 17. タブビュー型 同⼀一レベルのコンテンツを並列列に表⽰示する⽅方法
- 18. 弁当箱型/ダッシュボード型 関連コンテンツを⼀一⽬目で表⽰示する⽅方法
- 19. フィルタビュー型 同⼀一データを多⾯面的な検索索結果で表⽰示する⽅方法
- 20. 6 コンテンツ構造や遷移 パターン 階層型/ピラミッド型 1 インデックスページとサブページといった親⼦子関係を持つ構造 ハブ&スポーク型 2 中央があり、そこから離離れタスクを実⾏行行し、また中央に戻る構造 マトリョーシカ型 3 直線的にタスクをリードする⽅方法、⼊入れ⼦子関係の構造 タブビュー型 4 同⼀一レベルのコンテンツを並列列に表⽰示する⽅方法 弁当箱型/ダッシュボード型 5 関連コンテンツを⼀一⽬目で表⽰示する⽅方法 フィルタビュー型 6 同⼀一データを多⾯面的な検索索結果で表⽰示する⽅方法
- 21. 10 ユーザーインターフェース パターン ナビゲーション 1 フォーム 2 テーブル・リスト 3 検索索・ソート・フィルタ 4 ツール 5 グラフ 6 誘導 7 フィードバック・アフォーダンス 8 ヘルプ 9 アンチパターン 10
- 22. ナビゲーション
- 23. フォーム
- 24. テーブル・リスト
- 25. 検索索・ソート・フィルタ
- 26. ツール
- 27. グラフ
- 28. 誘導
- 29. フィードバック・アフォーダンス
- 30. ヘルプ
- 31. アンチパターン
- 32. 10 ユーザーインターフェース パターン ナビゲーション 1 メイン画⾯面やそのメニュー表⽰示パターン フォーム 2 サインインや登録、チェックアウトなどの表⽰示パターン テーブル・リスト 3 表やリスト、画像付きリストの表⽰示パターン 検索索・ソート・フィルタ 4 テキスト検索索とその候補、並び替えや検索索条件での絞り込み表⽰示パターン ツール 5 ツールバーやアクションボタンの表⽰示パターン グラフ 6 棒グラフや円グラフ、データをもとにしたグラフ表⽰示パターン 誘導 7 モーダルウィンドウやバルーン、チップス表⽰示パターン フィードバック・アフォーダンス 8 レスポンスの表⽰示でエラーや確認の表⽰示パターン ヘルプ 9 ガイドやコーチ、ツアーなどの表⽰示パターン アンチパターン 10 パターンに当てはまらない表⽰示パターン
- 33. スマホにおけるデザインパターン デバイスエコシステム 6 クロスデバイスでの利利⽤用を検討するため コンテンツ構造や遷移 6 ⽬目的に適した構造や遷移を検討するため ユーザーインターフェース 10 利利⽤用状況に応じた対応を検討するため
- 34. Smart Transitions In User Experience Design By Adrian Zumbrunnen
- 35. Design is not just what it looks like and feels like. Design is how it works. Steve Jobs デザインとは、単なる視覚や感覚のことではない。デザインとは、どうやって動くかだ。
- 36. T you! hank @bookslope
Entre para ver os comentários