top

第7回 状態(画面)遷移図、Directorでのキーボードの利用

状態(画面)遷移図 とは

 近年のプロダクトデザインは情報化が進み、その棲み分けが難しくなっていますが、ハードウエアよりの場合「状態遷移図」、ソフトウエアよりの場合「画面遷移図」と表現されるとザックリ捉えてください。基本的な考え方は、ハードウエア/ソフトウエアが、人とどのように対話(インタラクション) するのかを、【ハードウエア/ソフトウエアの状態】と【その遷移】という考え方で記述をする手法です。デザイナがエンジニアさんに、製品等の細かな挙動等を伝達する為の手段の代表的な手法と言え、その重要性は高いものです。

 前回学んだペーパープロトタイプでは、ある1機能、1操作(状態遷移図でいえば、ある状態)のみに着目して記述を行いましたが、今回は、製品の全ての動作(電源ONから電源OFFまで)の全ての人との対話(インタラクション)を描くことに注力してみましょう。


状態(画面)遷移図 の記述方法(基本部分のみ)

状態(画面)遷移図の例

前回のペーパープロトタイプでは

《ハードウエア的ボタン要素》

《アイコン的視角要素》

《ユーザへフィードバックされる何らかの要素をアイコン化した要素》

をベースにある1シーンの検討をしました。それに、「他のシーンへの遷移」を匂わせてみたレベル

ざっくりと、ソフトウエアの「4つの状態」を記述し、各々への「遷移」を記述してみたレベル

ペーパープロトタイプに「単純な遷移(矢印)」を追記したレベル

ペーパープロトタイプに「遷移(矢印)」を追記したレベル

【今回もとめる最低ライン】

(上記の「単純な遷移(矢印)」では気がつかなかった「キャンセルボタン」の発見が可能となる)

詳細なデザイン(ソフトウエアで言えばグラフィックパーツ)を書き込み、それに「(操作対象や操作方法といった)詳細な遷移(矢印)」を追記したレベル

【今回もとめる理想ラインレベル】

ちなみに、これは「ログイン」という1機能の部分の画面遷移図と言えますが、パスコード入力後の表記をどうすればいいか考えてみてください。

ちょっと厳密に書いてみると...

遷移図サンプル

 


Directorによるキーボード入力
Common/配布/プロトタイプ2(柿山)/07/key_base.dir

被験者のキーボード入力を検知することができます。また、キーボードを押す行為で、操作をさせることができます。

(ハンドラ)なんらかのキーが押された時にチェックをして、
(if文による条件確認)そのキーが a であったら、
(コマンド)警告音をならす。

*キーボードの入力を検知する為、このスクリプトは「ムービースクリプト(ムービーが再生されている全ての時間帯に動作)」か「フレームスクリプト(そのフレームに限定して動作)」に記述することになります。(後述)

on keyDown me
 if the key = "a" then
  beep
 end if
end


条件分岐(if 文の利用)


if(条件then

end if    

(if文のはじめ)

(if文の終わり)

if A = 0 then
 
B
end if


もしAの値が0ならば、Bの処理をしなさい
 

if A = 0 then
 
B
else if
A = 1 then
 
C
else
 
D
end if

もしAの値が0ならば、Bの処理、
もしAの値が1ならば、Cの処理、
それ以外ならば、Dの処理をしなさい


if aa = 1 and bb = 1 then
 
cc
end if

もしaaの値が1で、かつ、bbの値が1であるならば、ccの処理をしなさい 


タイピングゲームの作成練習
  Common/配布/プロトタイプ2(柿山)/07/typing_game.dir(完成版)
  Common/配布/プロトタイプ2(柿山)/07/typing_game_0.dir(練習用)

来週の(総合実習3の)プレゼンテーションの仕様に関して

次回までに、ペーパープロトタイプで描いた3つ程度のシーンを中心とし、提案する製品の全ての状態を対象にした状態遷移図を描いてください。ソフトウエア的なグラフィックパーツなどをイラストレータ/フォトショップ等で、ハードウエア的なレンダリングパーツなどをCADソフトなどで緻密に描き、その「(操作対象や操作方法といった)詳細な遷移(矢印)」を書き込んだ1枚のPDFファイルで提出してください。

 

提出先:Common / 提出 / プロトタイプシミュレーション2(柿山)/08_状態遷移図
  形式:【学籍番号.dir】にて提出