オブジェクト指向UI（OOUI）の制作３ステップ

オブジェクト指向UI（OOUI）の制作はこの３ステップ。
1.オブジェクトを定義する
2.UIフロー図を定義する
3.UIパターンを出す

1.オブジェクトを定義する

まずは、UIで表現するメインオブジェクト（コンテンツ）を決める。
このメインオブジェクトを中心にしてページの構成を決めていく。

このページだと投稿フィード一覧。

①要件から動作フローを整理する

オブジェクトを定義するには、
まず、要件を動作フローに整理する。

「新規作成」→、、、とか、
「通知確認」→、、、とか。

ここはまだ開発側。機能要件。客観的な視点。

②動作フローからユーザーの行動に変換する

ここが重要なポイント。
動作フローをユーザーの行動に変換する。

「新規作成」だったら、
→「新しく投稿を作成する」とか、

「通知確認」だったら、
→「通知を確認する」とか。

ユーザーの動作フローを
1つ1つユーザー視点での行動に翻訳、変換する。

③行動から名詞を取り出す

「新しく投稿を作成する」からは、
→「投稿」とか、

「通知を確認する」からは、
→「通知」とか。

はい、出ました。
これらが「メインオブジェクト」です。
このメインオブジェクトを中心にページを構成していきます。

2.UIフロー図を定義する

メインオブジェクトを定義したら、
お次はUIフロー図を定義していきます。

①オブジェクトから必要な情報・アクションを決める

そのオブジェクトのページに表示させる
・情報（プロパティ）
・アクション
この2つを決めていく。

「通知」のオブジェクトだったら、
・情報（プロパティ）は、
相手のアイコン
相手の名前
相手のID
相手の行動内容（いいねなのかフォローなのか…）
行動日時、、、など。
・アクションは、
リフォローする
コメントを返す、、、など。

②階層関係をフロー図で整理する

オブジェクトから、
ページに表示させる必要な情報・アクションが決まったら、
各々のページの階層関係をフロー図で遷移を整理していく。
関連のあるアクションを意識するのがポイント。

⇒ここまでやったら一度、
　要件を満たすか構造かどうかを確認した方が良い。

3.UIパターンを出す

①ルートナビを定義する

グローバルナビゲーション、ボトムナビゲーションと言われているところを定義する。
最上位のナビゲーション項目、起点になるページ、サービスを利用する理由となるところ、一番重要なコンテンツ。

②レイアウトを決める

これまででページに表示させる下記3点が決まりました。
・コンテンツ
・アクション
・ナビゲーション

あとは、これらをどこに表示させるか決めていきます。
コンテンツはメインとなるので中央にドーン。

あとは、ナビゲーションとアクション。

この2つはざっくり言うと、
ヘッダーに配置するか、フッターに配置するか、だけ（超ざっくり）。

＋１パターンとしては、
アクションをコンテンツ内に直接置くパターン。
これは、コンテンツ情報の一部に対してのアクションであった場合。

コツは、
・グルーピングすることと、
・優先度を明確にすること。
そして何より、コンテンツ情報／アクション／ナビゲーションとちゃんと分類されて整理されていること。
これらが出来ているとパターンが出しやすくなる。

③プロトタイピング

もうここからはたくさんのパターンでプロトタイピングして、
作って壊す、作って壊すの繰り返し。
行ったり来たりしながら、解像度がますます上がっていく。
とにかくグルグル回し続ける。