見出し画像

オブジェクト指向UIでデザインしてみた【レベル1. メモアプリ】

こんにちは、わたるです。

UI/UXデザイナー必読書の「オブジェクト指向UIデザイン」にあるワークアウト(レベル1. メモアプリケーション)をやってみました。


進め方

指示されたタスクをもとにして、オブジェクト指向UIをデザインします。

本の記入例にならって「モデル」「インタラクション」「プレゼンテーション」を作成していきます。

レベル1. メモアプリケーション

メモアプリケーションのタスク

ヒント

単純なメインオブジェクトを扱い、オブジェクトの抽出からレイアウトパターンの適用までの流れを理解すること。

複雑ではないので、あまり深読みせずにやってみると良い。

名詞の関係性を抽出

名詞の関係性

名詞の数は3つしかありませんでした。かなりシンプルですね。

オブジェクトの抽出

オブジェクトの抽出

これは迷うまでもなく「メモ」ですね。

モデルの作成

モデルの作成(誤)

アクションの書き方が少し違っていました。「変更する」を同じアクションにしていたのですが、主語が「タイトル」と「内容」で別なのでアクションも分ける必要があります。

モデルの作成(正)

こちらが正解です。

インタラクションの作成

インタラクション

めちゃくちゃシンプルですね。コレクションビューからシングルビューを呼び出すだけの単純な構造です。

プレゼンテーションの作成(モバイル)

プレゼンテーション(モバイル)

iPhoneのメモアプリを参考に作成しました。機能要件は全て満たせているかと思います。

コレクションビューに1項目内にタイトルと概要を表示する形式にしています。

モデルにはタイトルと内容を変更するアクションがありますが、「編集」ボタンは設けず、常時編集可能にしました。

プレゼンテーションの作成(PC)

プレゼンテーション(PC)

こちらはMacのメモアプリを参考に作成しました。iPhone版の2つのビューを1つの画面に表示しています。

こちらも編集ボタンは設けず常時編集可能としています。

まとめ

今回はレベル1ということでかなりシンプルな内容でした。これがオブジェクト指向UIの最も単純かつ基本となる形なので、この基本を抑えながら次のワークアウトに進みます。

いいなと思ったら応援しよう!