使いやすいUIデザイン

目次

  1. UIとは
  2. UIを作ってみる
  3. UIデザインの流れ
  4. ビジュアルデザイン
1. UIとは

1. UIとは

1. UIとは

User Interface (UI)

UIは、ユーザーと情報の境界。情報をやり取りする

ui-sample

1. UIとは

UIは、情報の表示と操作を提供する

  • ユーザーに情報を表示する
  • 情報の操作をユーザーに提供する

1. UIとは

UIデザインとビジュアルデザインは別

  • ビジュアルデザインは、表現や装飾を重視
    • 色や形、フォントなどを考える
  • UIデザインは、UserInterfaceの設計を重視
    • 情報の表示と操作を考える

今回はUIデザインの話

2. UIを作ってみる

早速UIを作ってみよう

2. UIを作ってみる

ToDoアプリを考えてみる

2. UIを作ってみる

やってみよう: ToDoアプリのUI

  • ToDo一覧を見る
  • 新しいToDoを追加する
  • 追加したToDoを完了にする
  • ToDoのタイトルと詳細を書く

これらの機能が実現できるアプリ

2. UIを作ってみる

機能から直接UIを作ると、使いにくい

  • 同じ画面がたくさんある
  • ToDoがすぐ表示されない
  • 機能を選択してToDoが表示
2. UIを作ってみる

機能を抽象化してUIを作ると、使いやすい

2. UIを作ってみる

機能からオブジェクトを抽出する

  • オブジェクトを基準にUIを考える
  • 機能から直接UIを作らない
2. UIを作ってみる

オブジェクトを抽出してから、UIを作ろう

3. UIデザインの流れ

3. UIデザインの流れ

3. UIデザインの流れ

UIデザインの流れの図

3.1. UIデザインの流れ オブジェクト抽出

3.1 オブジェクト抽出

  • 機能からオブジェクトを抽出
  • オブジェクトは、属性とアクションを持つ
  • わかる人向け: UMLのクラス図のようなイメージ
3.1. UIデザインの流れ オブジェクト抽出

オブジェクトとは、ユーザーが操作する対象物

  • オブジェクトの詳細やプロパティとして、属性を持つ
3.1. UIデザインの流れ オブジェクト抽出

アクションはC(R)UDで考える

CRUDは、Create Read Update Delete

  • Readはビューで実現する。アクションにしない
3.1. UIデザインの流れ オブジェクト抽出

ToDoアプリで、オブジェクト抽出

  • ToDo一覧を見る
  • 新しいToDoを追加する
  • 追加したToDoを完了にする
  • ToDoのタイトルと詳細を書く
3.1. UIデザインの流れ オブジェクト抽出

ToDoアプリで、オブジェクトはToDoだけ

  • ToDo一覧を見る
  • 新しいToDoを追加する
  • 追加したToDoを完了にする
  • ToDoのタイトルと詳細を書く
3.1. UIデザインの流れ オブジェクト抽出

ToDoアプリで、ToDoの属性はタイトル・詳細・完了したか

  • ToDo一覧を見る
  • 新しいToDoを追加する
  • 追加したToDoを完了にする
  • ToDoのタイトルと詳細を書く
3.1. UIデザインの流れ オブジェクト抽出

ToDoアプリで、ToDoのアクションはCreate・Update

  • ToDo一覧を見る (Read)
  • 新しいToDoを追加する (Create)
  • 追加したToDoを完了にする (Update)
  • ToDoのタイトルと詳細を書く (Update)
3.1. UIデザインの流れ オブジェクト抽出

ToDoアプリのオブジェクトを抽出した結果

  • オブジェクトは、ToDo
  • ToDoの属性は、タイトル・詳細・完了したか
  • ToDoのアクションは、Create・Update
3.1. UIデザインの流れ オブジェクト抽出

オブジェクト抽出ができました

3.2. UIデザインの流れ ビュー・ナビゲーション

3.2. ビュー・ナビゲーション

3.2. UIデザインの流れ ビュー・ナビゲーション

ビューとは、ユーザーに情報を表示する領域

例えば、リストやフォームやページなど
ビューには、コレクションビューとシングルビューがある

3.2. UIデザインの流れ ビュー・ナビゲーション

コレクションビューは同じオブジェクトを複数表示する

Create・Deleteアクションを配置する

オブジェクトによっては、Updateアクションも配置

3.2. UIデザインの流れ ビュー・ナビゲーション

シングルビューは1つのオブジェクトを表示する

Update・Deleteアクションを配置する

3.2. UIデザインの流れ ビュー・ナビゲーション

ナビゲーションとは、ビュー同士の呼び出し関係

どのビューからどのビューに遷移できるか

3.2. UIデザインの流れ ビュー・ナビゲーション

まず、遷移できるナビゲーションを全て書き出す

  1. コレクションからシングルへナビゲーション
  2. 別オブジェクトからのナビゲーション
3.2. UIデザインの流れ ビュー・ナビゲーション

その後、ビュー・ナビゲーションを削る

  • 複数のビューを1つのビューにまとめる
  • 必要のないナビゲーションをなくす
3.2. UIデザインの流れ ビュー・ナビゲーション

ToDoアプリで、ビュー

  • ToDoリストが並ぶコレクションビュー
  • ToDoのタイトルと詳細があるシングルビュー
3.2. UIデザインの流れ ビュー・ナビゲーション

ToDoアプリで、ナビゲーション

3.3. UIデザインの流れ レイアウト

3.3 レイアウト

3.3. UIデザインの流れ レイアウト

ビュー・ナビゲーションから、レイアウトを考える

  • いわゆるワイヤーフレーム
  • ビューの数だけレイアウトを考える
  • 既存アプリを参考にしよう
3.3. UIデザインの流れ レイアウト

コレクションビューのレイアウト3種

  • リスト 📜
  • グリッド #️⃣
  • マッピング 🌐
3.3. UIデザインの流れ レイアウト

シングルビューのレイアウト3種

  • 属性とアクションだけ
  • 関連オブジェクトをプレビュー
  • 関連オブジェクトのコレクションビューを含む
3.3. UIデザインの流れ レイアウト

アクションはオブジェクトの近くにレイアウトする

3.3. UIデザインの流れ レイアウト

やってみよう: ToDoアプリで、レイアウト

オブジェクト ナビゲーション
3.3. UIデザインの流れ レイアウト

ToDoアプリで、レイアウト

  • ToDoリストが並ぶコレクションビュー
  • ToDoのタイトルと詳細があるシングルビュー
3.3. UIデザインの流れ レイアウト

UIデザインの流れのまとめ

  1. オブジェクト抽出
  2. ビュー・ナビゲーション
  3. レイアウト
4. ビジュアルデザイン

4. ビジュアルデザイン

4. ビジュアルデザイン

ビジュアルデザインは、UIの見た目をデザインする

4. ビジュアルデザイン

ビジュアルデザインのポイント

  • 既存のビジュアルデザインを真似て作る
  • ビジュアルデザインを学ぶと個性が出せる
  • ただ、難しい
4. ビジュアルデザイン

ビジュアルデザインの例

  • デザイン4つの基本原則
    • コントラスト 反復 整列 近接
  • デザインシステム
    • ビューやナビゲーション、ビジュアルデザインを体系立ててまとめたもの
    • アプリ全体で一貫したデザインにできる

例えば、デジタル庁のデザインシステムやMaterialDesign

まとめ

  • UIとは、情報の表示と操作を提供する
  • UIデザインは、オブジェクトから考える
  • UIデザインの流れは、オブジェクト抽出、ビュー・ナビゲーション、レイアウト
  • ビジュアルデザインは、UIの見た目をデザインする

出典

textlint-disable ja-technical-writing/ja-no-mixed-period