O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

WebにおけるUI設計 実践編

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 46 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (18)

Semelhante a WebにおけるUI設計 実践編 (20)

Anúncio

Mais recentes (20)

WebにおけるUI設計 実践編

  1. 1. WebにおけるUI設計 実践編
  2. 2. 仕事とは
  3. 3. 自己実現 社会貢献 給料 仲間
  4. 4. 人によって様々です
  5. 5. 期日までに成果をあげること
  6. 6. UIデザイナーの 仕事とは
  7. 7. UIをプロダクトに反映すること
  8. 8. 反映するまでの主な中間成果物
  9. 9. ワイヤーフレーム アセット モック
  10. 10. 制作チームにおけるUIの代表的な立ち位置 企画 機能ツリー 遷移図 ワイヤーフレーム モック 実機確認 リリース アセット コーデッドプロトタイプ ロジック DB設計 フロントエンドバックエンド ユーザニーズ、ゲームの目的、コンテンツ要求 機能要求 インフォメーション・アーキテクチャ、ナビゲーション・デザイン インフォメーション・デザイン、インタフェース・デザイン 視覚的デザイン、インタラクション・デザイン
  11. 11. 企画 機能 遷移 ワイヤー FE BE 実装 UI設計のプロセス トップダウン
  12. 12. 1 2 3 4 5 6 7 8 9 10 概念 1 概念 2 概念 3 カテゴリー1 カテゴリー2 生データ 概念生成 カテゴリ ー フロー フロー1 フロー2 UI設計のプロセス ボトムアップ
  13. 13. UI設計のプロセス ボトムアップによるUI トップダウンによるUI
  14. 14. 人間中心設計のプロセス 人間中心設計 プロセス計画 使用状況の 理解と明確化 ユーザーの要 求事項 の明確化 ユーザーの要求事項に適合するように デザインによる解決案を作成 デザインを要求事項に 照らして評価 デザインによる 解決案は 要求事項に適合 ISO9241-210
  15. 15. ISO9241-210 人間中心設計のプロセス 人間中心設計 プロセス計画 使用状況の 理解と明確化 ユーザーの要 求事項 の明確化 ユーザーの要求事項に適合するように デザインによる解決案を作成 デザインを要求事項に 照らして評価 デザインによる 解決案は 要求事項に適合 ボトムアップによるUI トップダウンによるUI
  16. 16. 具体的な制作事例
  17. 17. 例えば Webメールの受信ボックス
  18. 18. ① 機能ツリー - 受信ボックス メールボックス 受信ボックス 閲覧 返信 転送 削除
  19. 19. ② 遷移図 - 受信ボックス ログイン等 メール本文 メール一覧 メール作成 メール削除
  20. 20. ③ ワイヤーフレーム - メール一覧 from subject date from subject date from subject date 閲覧 閲覧 閲覧 from subject date 閲覧
  21. 21. ④ ワイヤーフレーム - メール本文 閲覧(メール本文) from to date subject body attachment 返信 転送 削除
  22. 22. 企画・仕様から①機能ツリー②遷移図 ③ワイヤーフレームを作成 (トップダウン)
  23. 23. メール等のコンテンツから 必要な機能や遷移を発見 (ボトムアップ)
  24. 24. ①に戻る
  25. 25. ① 機能ツリー - 受信ボックス メールボックス 受信ボックス 閲覧 返信 転送 削除 検索 スター 表示設定
  26. 26. ② 遷移図 - 受信ボックス ログイン等 メール本文 メール一覧 メール作成 メール削除
  27. 27. ③ ワイヤーフレーム - メール一覧 from ☆ subject date from ☆ subject date 閲覧 閲覧 検索 並替▼
  28. 28. ④ ワイヤーフレーム - メール本文 閲覧(メール本文) ☆ from to date subject body attachment 返信 転送 削除
  29. 29. ①に戻る
  30. 30. 機能ツリー - 受信ボックス メールボックス 受信ボックス 閲覧 返信 転送 削除 検索 スター 表示設定 既読未読 保護 報告 移動 登録 各種設定へ
  31. 31. ② 遷移図 - 受信ボックス ログイン等 メール本文 メール一覧 メール作成 メール削除
  32. 32. ③ ワイヤーフレーム - メール一覧 from ☆ subject date from ☆ subject date 閲覧 閲覧 検索 並替▼ 各種設定⇒
  33. 33. ④ ワイヤーフレーム - メール本文 閲覧(メール本文) ☆ from to date subject body attachment 返信 転送 削除 保護 報告 移動 登録 各種設定⇒
  34. 34. ワイヤーフレームがある程度固まってき たらアセット・モックの段階へ進みます
  35. 35. ⑤ アセット・モック - メール一覧 from ☆ subject date from ☆ subject date 閲覧 閲覧 検索 並替▼
  36. 36. ⑥ アセット・モック - メール本文 閲覧(メール本文) ☆ from to date subject body attachment 返信 転送 削除 保護 報告 移動 登録 各種設定⇒
  37. 37. ⑦ ブラッシュアップ - メール一覧
  38. 38. ⑧ ブラッシュアップ - メール本文
  39. 39. 余談 ボトムアップによるUI トップダウンによるUI
  40. 40. 余談 ボトムアップによるUI トップダウンによるUI 一人で進めるのではなく 複数人で進めると UX改善の網羅率の向上 を期待できます
  41. 41. 余談 UI 使いやすい!
  42. 42. 余談 UI 使いやすい! UX改善の網羅率の向上
  43. 43. まとめ
  44. 44. 企画 機能 遷移 ワイヤー FE BE 実装 UI設計のプロセス トップダウン
  45. 45. 1 2 3 4 5 6 7 8 9 10 概念 1 概念 2 概念 3 カテゴリー1 カテゴリー2 生データ 概念生成 カテゴリ ー フロー フロー1 フロー2 UI設計のプロセス ボトムアップ
  46. 46. UI設計のプロセス ボトムアップによるUI トップダウンによるUI

×