<< 実践 ICONIXプロセス : 予備設計レビュー | main | 実践 ICONIXプロセス : 蛍光ペンテスト(間違い探しゲーム) >>

実践 ICONIXプロセス : 画面の模型

画面のモデル(模型)の主な手法は以下の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 で作る、実際の画面ですね。
リンクと画面遷移なども一部は実際に動く。

コメント
コメントする









この記事のトラックバックURL
トラックバック
calendar
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
<< July 2017 >>
システム設計日記を検索
プロフィール
リンク
システム開発日記(実装編)
有限会社 システム設計
twitter @masuda220
selected entries
recent comment
  • 番号より名前。 ニーモニックコードより名前。 【パターン】
    師子乃 (03/10)
  • Smart UI が優れている?
    masuda220 (03/10)
  • Smart UI が優れている?
    kagehiens (03/09)
  • オブジェクト指向プログラミングの教え方?
    masuda220 (12/05)
  • オブジェクト指向プログラミングの教え方?
    ZACKY (12/04)
  • 「オブジェクトの設計力」 スキルアップ講座やります
    masuda220 (08/14)
  • 「オブジェクトの設計力」 スキルアップ講座やります
    kompiro (08/14)
  • 「オブジェクトの設計力」 スキルアップ講座やります
    masuda220 (06/13)
  • 「オブジェクトの設計力」 スキルアップ講座やります
    JHashimoto (06/13)
  • 「オブジェクトの設計力」 スキルアップ講座やります
    masuda220 (02/28)
recent trackback
categories
archives
others
mobile
qrcode
powered
無料ブログ作成サービス JUGEM