Prottを使ってペーパープロトを作成する方法
Prottというサービスを使ってペーパープロトを作成する方法をメモしておきます。
prottapp.com
Prottとは
紙にスケッチした画面を撮影して、遷移の仕方を指定するだけで、簡単にプロトタイプを作成できるサービスです。
Prottの画面遷移
スケッチした画面を撮影して、画面遷移を作っていきます。
Prottのジェスチャーとトラジション
下のジェスチャーとトラジションから1つずつ選択して画面遷移を作ります。
アクションを発生させるためのジェスチャー
次のページに移動するときのトラジション
TODOアプリの画面遷移
サンプルとしてTODOアプリを作ってみました。
トップ画面とログイン画面のジェスチャー、トラジションをメモしておきます。
トップ画面
ターゲット:ログイン
ジェスチャー:タップ
トラジション:プッシュレフト
※ログインしか作りませんでした。
ログイン画面
ターゲット:戻る
ジェスチャー:タップ
トラジション:プッシュライト
※プッシュライトで戻る動きを表現しています。
ターゲット:ログイン
ジェスチャー:タップ
トラジション:ディゾルブ
※ポップアップへのトラジションが難しかったです。
※ディゾルブ(フェードアウトとフェードインをくり返す)で表現したけどちょっとしっくりきてないかも。
デモ
下の流れでデモしています。
トップ→ログイン→戻る→トップ→ログイン→ログイン成功→戻る→トップ→ログイン→ログイン成功→TODOを追加→キャンセル→TODOを追加→OK→OK→削除→キャンセル→削除→OK
最後に
今回は単純なTODOアプリのペーパープロトを作成してみました。
次作るアプリもProttを使ってペーパープロトを作成してから、作りたいと思います。
気が向いたら、また書きます。