画面のモデル(模型)の主な手法は以下の4つ。
1.手書きの紙芝居
2.線画
3.モックアップ(静止画)
4.プロトタイプ(動画)
この順番で、作ったり、直したりに時間がかかる。
ICONIXプロセスと画面の定義
ドメインモデリングの最初は、手書きの紙芝居で出発する。
だんだん、線画、モックアップ、プロトタイプと詳細化・具体化していく。
画面の模型を試作・実装の作業と、ドメインモデリング、ユースケースモデリング、ロバストネス分析の作業は同時並行です。画面デザインを専門家にまかせた場合でも、頻繁にコミュニケーションしながら、同時に進める作業です。
1.画面の紙芝居
原文では、 GUI Story Board です。
例えば、こんな感じ ストーリボードの例
もともとは、映画、芝居、アニメなどの企画段階で、シナリオをざっと紙芝居に
したもののようです。
ユースケースシナリオ、アクター(登場人物)、紙芝居( Story Board) というのは、すべて、
映画や芝居の世界から流用したやり方です。
(意識的に流用した)
手書きでちゃちゃっと書く感じですね。
2.Line Drawing (線画)
64ページの図3.3が「線画」の例です。
(98ページでは「線図」になっている。訳語にゆらぎがありますね)
あと、画面のレイアウトを四角(直線)で表現したのもこの範疇かな?
線画の例
1.の手書きの紙芝居に比べると、デザインぽくなっている。
最近は、線画は手書きより、パソコンを使うことが多い。
EA で、ダイアグラムの追加で「その他」から「画面設計」ダイアグラムを選ぶと、簡単に
画面の線画を描くツールがでてきますね。
あまりきっちり描きすぎると、開発がかなり進んでいるという誤解をあたえるといけないので、
こんな雰囲気で 手書き風の例
「まだ、手書きだよ」、「紙ナプキンの裏に描いてみただけだからね」という雰囲気の絵を描く専用ツールがあるようです。
3.画面のモックアップ
実物大の模型ですね。
フォトショップとかお絵かき系のツールで、見た目は、本物と同じ画面を作る。
4.画面のプロトタイプ
HMTL と CSS で作る、実際の画面ですね。
リンクと画面遷移なども一部は実際に動く。
1.手書きの紙芝居
2.線画
3.モックアップ(静止画)
4.プロトタイプ(動画)
この順番で、作ったり、直したりに時間がかかる。
ICONIXプロセスと画面の定義
ドメインモデリングの最初は、手書きの紙芝居で出発する。
だんだん、線画、モックアップ、プロトタイプと詳細化・具体化していく。
画面の模型を試作・実装の作業と、ドメインモデリング、ユースケースモデリング、ロバストネス分析の作業は同時並行です。画面デザインを専門家にまかせた場合でも、頻繁にコミュニケーションしながら、同時に進める作業です。
1.画面の紙芝居
原文では、 GUI Story Board です。
例えば、こんな感じ ストーリボードの例
もともとは、映画、芝居、アニメなどの企画段階で、シナリオをざっと紙芝居に
したもののようです。
ユースケースシナリオ、アクター(登場人物)、紙芝居( Story Board) というのは、すべて、
映画や芝居の世界から流用したやり方です。
(意識的に流用した)
手書きでちゃちゃっと書く感じですね。
2.Line Drawing (線画)
64ページの図3.3が「線画」の例です。
(98ページでは「線図」になっている。訳語にゆらぎがありますね)
あと、画面のレイアウトを四角(直線)で表現したのもこの範疇かな?
線画の例
1.の手書きの紙芝居に比べると、デザインぽくなっている。
最近は、線画は手書きより、パソコンを使うことが多い。
EA で、ダイアグラムの追加で「その他」から「画面設計」ダイアグラムを選ぶと、簡単に
画面の線画を描くツールがでてきますね。
あまりきっちり描きすぎると、開発がかなり進んでいるという誤解をあたえるといけないので、
こんな雰囲気で 手書き風の例
「まだ、手書きだよ」、「紙ナプキンの裏に描いてみただけだからね」という雰囲気の絵を描く専用ツールがあるようです。
3.画面のモックアップ
実物大の模型ですね。
フォトショップとかお絵かき系のツールで、見た目は、本物と同じ画面を作る。
4.画面のプロトタイプ
HMTL と CSS で作る、実際の画面ですね。
リンクと画面遷移なども一部は実際に動く。