Skip to content

Latest commit

 

History

History
368 lines (215 loc) · 8.09 KB

slide.md

File metadata and controls

368 lines (215 loc) · 8.09 KB
Raw
marp theme paginate
true
uncover
true

使いやすいUIデザイン

目次

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

1. UIとは

User Interface (UI)

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

ui-sample

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

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

height:150px

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

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

今回はUIデザインの話

早速UIを作ってみよう

ToDoアプリを考えてみる

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

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

これらの機能が実現できること

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

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

bg contain right:40%

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

ToDoというオブジェクトを抽出する

bg contain right:40%

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

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

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

3. UIデザインの流れ

UIデザインの流れの図

height:460px

3.1 オブジェクト抽出

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

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

  • オブジェクトの詳細やプロパティとして、属性を持つ

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

CRUDは、Create Read Update Delete

  • Readはビューで実現する。アクションにしない

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

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

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

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

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

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

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

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

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

  • オブジェクトは、ToDo
  • ToDoの属性は、タイトル・詳細・完了したか
  • ToDoのアクションは、Create・Update

bg height:460px right:30%

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

height:460px

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

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

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

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

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

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

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

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

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

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

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

  1. コレクションからシングルへナビゲーション
  2. 別オブジェクトからのナビゲーション

bg contain right:40%

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

  • 複数のビューを1つのビューにまとめる
  • 必要のないナビゲーションをなくす

bg contain right:40%

ToDoアプリで、ビュー

  • ToDoリストが並ぶコレクションビュー
  • ToDoのタイトルと詳細があるシングルビュー

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

height:300px

3.3 レイアウト

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

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

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

  • リスト 📜
  • グリッド #️⃣
  • マッピング 🌐

bg contain right:50%

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

  • 属性とアクションだけ
  • 関連オブジェクトをプレビュー
  • 関連オブジェクトのコレクションビューを含む

bg contain right:40%

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

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

オブジェクト ナビゲーション
height:300px height:300px

ToDoアプリで、レイアウト

  • ToDoリストが並ぶコレクションビュー
  • ToDoのタイトルと詳細があるシングルビュー

bg contain right

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

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

4. ビジュアルデザイン

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

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

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

ビジュアルデザインの例

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

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

まとめ

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

出典