オブジェクト指向UIでデザインしてみた【レベル2. 社員名簿アプリ】
こんにちは、わたるです。
UI/UXデザイナー必読書の「オブジェクト指向UIデザイン」にあるワークアウト（レベル2. 社員名簿アプリケーション）をやってみました。
進め方
指示されたタスクをもとにして、オブジェクト指向UIをデザインします。
本の記入例にならって「モデル」「インタラクション」「プレゼンテーション」を作成していきます。
レベル2. 社員名簿アプリケーション
ヒント
・複数のメインオブジェクトを扱い、ナビゲーションやループに適したりアウトパターンを理解する。
・複数のメインオブジェクトを抽出し、それぞれのビューの呼び出し関係を整理する。
・単一のツリー構造ではなく、ユーザーの思考の起点となるメインオブジェクトをルートナビゲーションに配置する。
名詞の関係性を抽出
チームに所属する固有の社員名は名前に統一しました。
オブジェクトの抽出
名詞の抽出では社員と名前が紐づいていなかったのですが、実際は「社員＞名前」の関係が成り立ちます。
ここを気をつけながらオブジェクトの抽出を行いました。
モデルの作成
今回のメインオブジェクトは「チーム」と「社員」に設定しました。
それぞれのプロパティやアクションはモデル図の通りで、チームと社員は「１対多」の関係が成り立ちます。
本にある参考例と少し中身は違いましたが、根本的な問題はありませんでした。
インタラクションの作成
社員は1つだけのチームに所属するものと仮定しています。
ただ、この例だと社員とチーム（シングル）でループすることになるので、画面では社員（シングル）からチーム（シングル）への遷移は行えないようにします。
ルートナビには「チーム」と「社員」を配置します。
プレゼンテーションの作成
コレといった参考になるアプリはあまりなかったのですが、iPhone純正の「連絡先」や「メッセージ」を少し取り入れました。
インタラクションのフェーズで書きましたが、社員（シングル）からは所属チームに遷移できないようにしました。
ただし、本の参考画面ではループできるようになっています。ここをループさせるかどうかはどちらでも間違いではないので、作り手次第かなと思います。
個人的にループするとどこの階層にいるのかわからなくなる気がするのでループはやめました。
まとめ
レベル1よりモデルが1つ増えた程度であまり難しくはないのですが、考えることはかなり増えたように感じました。
また、今回は社員は1つのチームにしか所属できないことにしているので、この辺りの制限を止めるともう少し複雑になると思います。
この調子でレベル3を進めていきます。
この記事が気に入ったらサポートをしてみませんか？