オブジェクト指向UIデザイン ワークアウト3 イベント店舗管理アプリケーション

OOUIを勉強中です。

『オブジェクト指向UIデザイン』のワークアウトを行い、noteでアウトプットやその過程などを書いていこうと思います。

オブジェクト指向UIデザイン ――使いやすいソフトウェアの原理

ワークアウト3：イベント店舗管理アプリケーション

1. オブジェクトの抽出（モデルレイヤー）

まずはタスクから名詞を探します。
・「花屋」「ソラリス」の「ブースの場所」を確認する
・「B会場」の「出店」を確認する
・「タイ料理屋」「チェンマイ」の「名称」を変更する
・「写真室」「モモ」の「電話番号」を確認する
・「バー」「セブン」の「メニュー」を確認する
・「店」の「紹介文」を確認する
・「レストラン」「カルデラ」の「写真」を変更する

名詞同士の関係性をつなげます。複雑になってきた〜！

名詞からオブジェクトと、それに付随するプロパティを特定します。

「会場」と「店舗」をメインオブジェクトにしました。あくまでも店舗管理用のアプリで、「メニュー」から探そうとするユースケースなさそうですし。
オブジェクト同士の関係性としては、「会場」ひとつに複数の「店舗」がひもづく形に。

2. ビューとナビゲーションの検討（インタラクションレイヤー）

メインオブジェクトにコレクション（一覧）とシングル（詳細）のビューを想定します。
ビューの参照関係を、矢印で表します。呼び出し元から、呼び出し先に向けて矢印を引きます。この線が、ナビゲーションの遷移の方向になります。

コレクション会場からシングル会場を見て、シングル会場ビュー内にあるコレクション店舗からシングル店舗にたどり着く、、ありそう。

3. レイアウトパターンの適応（プレゼンテーションレイヤー）

オブジェクト指向UIデザインでは、すでに一般化しているデザインパターンをつかいます。

コレクション店舗は、ふつうの表。店舗名とかで一発で出したいだろうから検索欄もつけておきます。

シングル店舗はプロパティ厚めの表示。業務感があふれてしまったな。見た目のシャレオツ化はデザイナーに任せます。
メニューはカード表示しようかとも思ったのですが、あくまでも店舗管理用のアプリだしな〜と思ってふつうの表にしました。

コレクション会場はそんなに数もないだろうからグリッド表示にしました。

シングル会場はフロアマップ的なものをつけて、ブースの場所から店舗を見つけやすくしました。いちおう店舗コレクションを表すのに表も置いておいたけど、解答例には無いしいらなかったかな？

感想

要素が増えてちょっと難しくなってきました…！最後プレゼンテーションまわりをつくるのに、時間が足りなくて雑になっちゃいましたね。よいストレッチになっている気がします。