![見出し画像](https://assets.st-note.com/production/uploads/images/99608241/rectangle_large_type_2_2ba05b0ecc4ce8c70b214fe0c61561d1.png?width=1200)
イベント管理アプリ/オブジェクト指向UIデザインのワークアウトLv.3に挑戦
こんにちは、おそのです。
UI/UXの知識をしっかり身に付け、パワーアップしてデザイナーになる!
ために、UI/UXについてのアウトプットをnoteに書きます。
前回、ワークアウトのレベル2を書きました。
この本は、自分でオブジェクト指向UIを考えるワークアウトがあります。
今回は、そのワークアウトのレベル3にチャレンジしたのでnoteに残します。
ワークアウト(実践)はレベル18まであります。
それでは早速、レベル3:タスクからイベント管理アプリをデザインしていきます。
先見せ👀Figmaで作ったものがこちら
![](https://assets.st-note.com/img/1678088926824-M5ZmqpbsMA.png?width=1200)
![](https://assets.st-note.com/img/1678022548270-tExfXG4Sxl.png?width=1200)
本の通り3ステップを踏みます🚗
Step1.オブジェクトの抽出(モデルレイヤー)
Step2.ビューとナビゲーションの検討(インタラクションレイヤー)
Step3.レイアウトパターンの適用(プレゼンテーションレイヤー)
Step1.モデルレイヤー
「名詞」とそれらの関係を抽出
![](https://assets.st-note.com/img/1677548804275-l2i75mmpr8.png?width=1200)
「名詞」を汎化、粒度を揃えていきます。
![](https://assets.st-note.com/img/1677548846143-21kdsQnDSF.png?width=1200)
お店は「店舗」にしました。
「名詞」の関係を繋げて、オブジェクト=目当てを特定します。
![](https://assets.st-note.com/img/1677549015338-aci0GIe1wa.png?width=1200)
タスクからアクションを見つけていきます。
![](https://assets.st-note.com/img/1677549269538-w8hfqq3uih.png?width=1200)
この社員名簿アプリは『会場』『店(店舗)』がメインオブジェクトになります。
本で答え合わせをすると『会場』のアクションに『編集する』は不要でした。
『店(店舗)』のアクションに『写真を削除する』が本にはあります。
私の中では『編集する』に入っています。
Step2.インタラクションレイヤー
ビューとナビゲーションの検討をします。
![](https://assets.st-note.com/img/1677549701467-WZ4LidmXqk.png?width=1200)
当たってて嬉しいです☺️
Step3.プレゼンテーションレイヤー
ワイヤーフレームの検討をします。
参考サイトはgooglemap、地図やナビアプリ。お店予約アプリ。
ショッピングモールのフロアマップやショップリストです。
![](https://assets.st-note.com/img/1677550070660-MFFy2iQsAT.png?width=1200)
![](https://assets.st-note.com/img/1677550084214-lZvck75ruD.png?width=1200)
この手描きのラフから、Figmaで画面まで作りました。
![](https://assets.st-note.com/img/1678088957784-rmbG2AokIR.png?width=1200)
![](https://assets.st-note.com/img/1678022603636-RjwqkpLmuF.png?width=1200)
実際作るとスマホはすぐ完成したのですが、PC版はスマホより余白もあるし、ラフから作り込んで行くと何か違う…とやり直しを数回…ちょいむずでした。
難しい方が面白いですね。
以上、レベル3です。
ワークアウト完了のレベル18まで、地道に進めていきたいと思います。
でわでわ
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?