オブジェクト指向UIデザイン ワークアウト1 メモアプリケーション

OOUIを勉強中です。

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

こちらの本から演習課題を行い、noteでアウトプットやその過程などを書いていこうと思います。

ワークアウト1：メモアプリケーション

やること

指定されたタスクを手掛かりに、アプリケーションをデザインします。
制限時間は30分です。

私はデザイナーではないので、詳細なデザインの作り込みなどはせずに、手書きでザクザクいきます。

やってみる

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

まずはタスクから名詞を探します。
・「メモ」を確認する
・ある「メモ」の「内容」を確認する
・ある「メモ」の「内容」を変更する
・ある「メモ」の「タイトル」を変更する
・ある「タイトル」の「メモ」の「内容」を変更する
・ある「メモ」を削除する
・「メモ」を新規作成する

名詞どうしの関係性をつなげます。
・メモー内容
・メモータイトル

名詞からオブジェクトと、それに付随するプロパティを特定します。
タイトルと内容をプロパティに持ち、新規作成・編集・削除をアクションとする「メモ」オブジェクトになりました。

これでモデル部分のできあがりです。
今回あつかうオブジェクトは「メモ」のひとつだけなので、オブジェクトどうしの多重性は考えずにすみました。

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

メインオブジェクトにコレクション（一覧）とシングル（詳細）のビューを想定します。
ものによってはどちらかが省略されることもありますが、今回の場合は両画面とも必要そうなので置いておきます。

ビューの参照関係を、矢印で表します。
呼び出し元から、呼び出し先に向けて矢印を引きます。この線が、ナビゲーションの遷移の方向になります。

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

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

かなり一般的な、左ペインにコレクション表示、右ペインにシングル表示のレイアウトにしました。
macに入っているメモ帳にならいました。世界のアッポーゥがやってるんだから間違いなかろう。モバイル表示では、それぞれのペインを2画面に分けました。これもiPhoneに入っているメモ帳のぱくりです。

編集モード/閲覧モードに分けるのは冗長な気がしたので、常に編集できる状態かつ自動保存でいきます。

感想

まずは単純な単一オブジェクト相手のデザインでした。
今回私はモデル→インタラクション→プレゼンテーションの順で考えましたが、これは固定の順番ではなく、どこから始めてもよい、また、行ったり来たりしてよいものだそうです。

少しずつでもワークアウト進めて、実務で活かせるようにしていきます。