オブジェクト指向UIデザインの本
こんにちは、おそのです。
UI/UXの知識をしっかり身に付け、パワーアップしてデザイナーになる！
ために、UI/UXについてのアウトプットをnoteに書きます。
UIデザインの本を探していると、この本をUIデザイナーの方、UIデザインを勉強してる方、エンジニアの方が、よく勧められます。
町の本屋さんに置いて無かったので、アマゾンでポチりました。
初心者にも、わかりやすくオブジェクト指向UIとは何か？
オブジェクト指向UIの反対はタスク指向UIっていいってね。と言って実際の例を交えて、説明されています。
ただこの本を読ませるだけでなく、自分でオブジェクト指向UIを考える実践チャレンジ（ワークアウト）があります。
この本が人気のになるのが、納得です！
年始、オフライン環境に居ました。
スマホはあるけれど…電波が悪い所です。
でも、PCが無くても楽しく、進めてられました。
この本とペンと紙で読み、ワークアウトに挑戦♪する前の予備知識を書きます。
ワークアウト前のオブジェクト指向UIについて、まとめた内容をnoteに書きます。
オブジェクト指向UIとは何か？
オブジェクト指向UIとは、オブジェクトを手掛かりに操作設計されたUIのことです。
例）読書アプリであったら、対象は『本』。この時の目当ては、『本』がオブジェクトにあたります。
オブジェクト指向UIと対比のタスク指向UI
例の中で、自動販売機やATMは複雑ではなく、簡単な操作で済むためタスク指向UIになっているんだろうと思いました。
GUIって？
（グラフィカル・ユーザー・インターフェイス）
スマホ、PCのことを言います。
情報、機能をグラフィックで示し、指、マウスで直接触れるように操作できます。
オブジェクト指向UIの原則を「グラフィック」によって適用したものです。
NG‼単に画面を絵で構成する
∟オブジェクトをベースに操作されてなければ使いにくいシステムになるので注意が必要です。
CLIって？
(コマンド・ライン・インターフェイス)タスク指向
たまに出る、PCの黒い画面とテキストのみの初期画面。
コマンド起点の操作モデル。コマンド文を使って間接的に処理を依頼します。
オブジェクト指向UIの原則
オブジェクトを知覚できて直接的に働きかけられます。
例）
アプリケーション、コンテンツ、入力フォームなど、ユーザーがマウスや日指を使って対象を指し示し変化、作業を進められます。
✅オブジェクトは自身の性質と状態を体現する
✅オブジェクト選択→アクション選択の操作順序
・GUIは名詞▶動詞（オブジェクト指向UI）
・CLIは動詞▶名詞（タスク指向UI）
✅すべてのオブジェクトが互いに協調しながらUIを構成する
ユーザー、タスク、オブジェクトの関係
オブジェクト指向UI
オブジェクト指向UIは、オブジェクトを前面に表示させます！
ユーザーの操作数を減らせます。
タスク指向UI
タスク指向UIは『やること』の選択が入口になっています。
UIはユーザーとその関心対象（オブジェクト）を接続する空間。
実際に画面に表示されるグラフィックやその動きとして、ユーザーから認知されます。
情報空間をソフトウェアのアーキテクチャとして、実現するオブジェクト指向設計(OOD)では、
ユーザーが持っている関心対象についての構造的概念=メンタルモデル
ソフトウェアデザイン
ユーザーが目にするインターフェイスは、ソフトウェアデザインの構造基盤オブジェクトモデルを反映しているものです。
内部のデータモデルは、ユーザーのメンタルモデルを反映したものです。
インターフェイスの表現は、複数のオブジェクトを構造的に合わせたもの。
それぞれの要素が情報階層や状態変化などで現されるシステムになっています。
ビュー同士の関係を通じてユーザーとの相互作用を成立させる動きが、必要です。
この操作を提供するオブジェクト指南のUIをソフトウェアデザイン観点から分割すると、モデル、インタラクション、プレゼンテーションのレイヤーに分けられることができます。
オブジェクト指向UI設計の基本
👇ここからは後日の実践を行う時に、使いました。
オブジェクト指向UI設計の基本3Step
アプリケーションが扱うメインオブジェクトの一覧は早い段階で見せます。
メインオブジェクト＝エンティティと呼ばれています。
（ドメインにおける主要な概念物）
画面に見えていると、用途、作業範囲を把握し、直感的に操作ができます。
オブジェクト一覧がどの形式で表しているかで、アプリケーションの操作イディオム（UIのルック&フィールが合わす慣用句てきな意味合い）が推測されてきます。
アプリケーションの操作はオブジェクト選択▶アクション選択で行う仕様にします。
∟対象選択待ちモード（モードレス）ではなくなります。
×タスク(機能)
〇オブジェクト（対象）
👇設計作業のStep
Step1.オブジェクトの抽出(モデルレイヤー)
ユーザーメンタルモデル、業務の概念があるか調べます。
例）Eメール
∟ユーザー活動領域は「メッセージ」が重要。
「送信したメッセージ」もあるけれど、「受信したメッセージ」がある。
×「メッセージを受信する」
〇「受信したメッセージ」
・数えられる名詞として表せる
・同種の集合として管理され得る
・共通のアクションをもっている
Step2.ビューとナビゲーションの検討
ウィンドウ、ページ、分割されたレイアウト内の一つのペイン、メニューとして示す一つのリスト。ユーザーが画面で見る、ひとまとまり
例）Eメール
∟メッセージ一覧の表示領域
メッセージのシングルビューはメッセージのコレクション（一覧）からユーザーが任意の1件を選ぶことで、呼び出されるのが自然。
基本の形式
①コレクションビュー
②シングルビュー
Step3.レイアウトパターンの適用
デバイス画面サイズによって変わる。
PC向け、モバイル向けで異なる画面環境に対応。
以上、オブジェクト指向UIデザインをまとめた内容です。
長くなりそうです。
読むだけではなく、自分で考えて、作らないと意味がないと感じました。
読んだだけは、インプットできた！勉強した！ってなるけれど、
それはただの自己満なだけ。
脱、前の私。
実践すると、理解できていないところ、足りないところが見える。
本の実践について、次回書きます。
でわでわ
この記事が気に入ったらサポートをしてみませんか？