diff --git a/design/imgs/fig-action-place.svg b/design/imgs/fig-action-place.svg new file mode 100644 index 00000000..51adcc4c --- /dev/null +++ b/design/imgs/fig-action-place.svg @@ -0,0 +1,66 @@ + + + + + コレクションビュー + + + 備品の一覧 + + + + + + + + + 返す + + + + + + + + 借りる + + + + + + + + + 借りる + + + + 借りる + 返す + + + シングルビュー + + + 備品の詳細 + + + + + + + + + + 借りる + + + 借りる + + + どちらも備品が見えているから、どちらにも置ける + diff --git a/design/imgs/fig-answer.svg b/design/imgs/fig-answer.svg new file mode 100644 index 00000000..f3e8351e --- /dev/null +++ b/design/imgs/fig-answer.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + 備品の一覧 + + + + + + + + + + 返す + + + + + + + + + 借りる + + + + + + + + + + 借りる + + + + + + + + 備品の詳細 + + + + + + + 名前 + + 数 + + + + 借りる + diff --git a/design/imgs/fig-bridge.svg b/design/imgs/fig-bridge.svg new file mode 100644 index 00000000..c85e08ff --- /dev/null +++ b/design/imgs/fig-bridge.svg @@ -0,0 +1,24 @@ + + + + + + + + 画面の部品 + 今日つかう言葉 + + + 見せるもの + が集まると + + ビュー + モノが見えているところ + + + 操作するもの + がすることが + + アクション + モノにできること + diff --git a/design/imgs/fig-collection.svg b/design/imgs/fig-collection.svg new file mode 100644 index 00000000..2b4f8976 --- /dev/null +++ b/design/imgs/fig-collection.svg @@ -0,0 +1,40 @@ + + + + + 備品の一覧 + + + + + + + + + + 返す + + + + + + + + + + 借りる + + + + + + + + + + + 借りる + + 同じ備品が、並んでいる + diff --git a/design/imgs/fig-compare.svg b/design/imgs/fig-compare.svg new file mode 100644 index 00000000..f3be7c46 --- /dev/null +++ b/design/imgs/fig-compare.svg @@ -0,0 +1,99 @@ + + + + + + + + + + + やり方A + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 一覧 + 詳細 + 一覧 + 一覧 + 同じ一覧が3枚も要る + + タップ + 2回 + 画面 + 5枚 + + + やり方B + + + + + + + + + + + + + + + + + + + + + + + + + 一覧 + 詳細 + 画面はこの2枚だけ + + タップ + 1回 + 画面 + 2枚 + diff --git a/design/imgs/fig-extract-demo.svg b/design/imgs/fig-extract-demo.svg new file mode 100644 index 00000000..bd359289 --- /dev/null +++ b/design/imgs/fig-extract-demo.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + 備品 + の一覧を + 見る + + + + 備品 + の + 名前 + と + 数 + を + 見る + + + + + + 備品 + を + 借りる + + + + 借りた + 備品 + を + 返す + + diff --git a/design/imgs/fig-flow-step1.svg b/design/imgs/fig-flow-step1.svg new file mode 100644 index 00000000..20300ac9 --- /dev/null +++ b/design/imgs/fig-flow-step1.svg @@ -0,0 +1,32 @@ + + + + + + + + + + 仕様 + + + + + 1 + モノを決める + オブジェクト抽出 + + + + + 2 + 画面を決める + ビュー・ナビゲーション + + + + + 3 + ならべ方を決める + レイアウト + diff --git a/design/imgs/fig-flow-step2.svg b/design/imgs/fig-flow-step2.svg new file mode 100644 index 00000000..234ed230 --- /dev/null +++ b/design/imgs/fig-flow-step2.svg @@ -0,0 +1,32 @@ + + + + + + + + + + 仕様 + + + + + 1 + モノを決める + オブジェクト抽出 + + + + + 2 + 画面を決める + ビュー・ナビゲーション + + + + + 3 + ならべ方を決める + レイアウト + diff --git a/design/imgs/fig-flow-step3.svg b/design/imgs/fig-flow-step3.svg new file mode 100644 index 00000000..d4e0a1a3 --- /dev/null +++ b/design/imgs/fig-flow-step3.svg @@ -0,0 +1,32 @@ + + + + + + + + + + 仕様 + + + + + 1 + モノを決める + オブジェクト抽出 + + + + + 2 + 画面を決める + ビュー・ナビゲーション + + + + + 3 + ならべ方を決める + レイアウト + diff --git a/design/imgs/fig-flow.svg b/design/imgs/fig-flow.svg new file mode 100644 index 00000000..3c088375 --- /dev/null +++ b/design/imgs/fig-flow.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + 仕様 + + + + + + 1 + モノを決める + オブジェクト抽出 + + + + + + 2 + 画面を決める + ビュー・ナビゲーション + + + + + + 3 + ならべ方を決める + レイアウト + + + + 行き来しながら決めていく + diff --git a/design/imgs/fig-interface.svg b/design/imgs/fig-interface.svg new file mode 100644 index 00000000..98ad32c1 --- /dev/null +++ b/design/imgs/fig-interface.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + ユーザー + + + + + + UI + + + + + + + + + + + + + + サービス + diff --git a/design/imgs/fig-item-navigation.svg b/design/imgs/fig-item-navigation.svg new file mode 100644 index 00000000..7b2abc19 --- /dev/null +++ b/design/imgs/fig-item-navigation.svg @@ -0,0 +1,19 @@ + + + + + + + + + + 備品のコレクション + 備品が並ぶ一覧 + + + 行き来する + + + 備品のシングル + 名前と数を見る + diff --git a/design/imgs/fig-item-object.svg b/design/imgs/fig-item-object.svg new file mode 100644 index 00000000..6a923812 --- /dev/null +++ b/design/imgs/fig-item-object.svg @@ -0,0 +1,24 @@ + + + + + + + 備品 + + + 属性 + 名前 + 数 + 借りているか + + + + + アクション + 借りる + 返す + + + diff --git a/design/imgs/fig-layout-list.svg b/design/imgs/fig-layout-list.svg new file mode 100644 index 00000000..9d2d1441 --- /dev/null +++ b/design/imgs/fig-layout-list.svg @@ -0,0 +1,32 @@ + + + + + + + + + + リスト + 上から下に並べる + + + + + + + + グリッド + 格子状に並べる + + + + + + + + + マッピング + 地図の上に置く + diff --git a/design/imgs/fig-layout-single.svg b/design/imgs/fig-layout-single.svg new file mode 100644 index 00000000..3056c650 --- /dev/null +++ b/design/imgs/fig-layout-single.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + 属性だけ + 中身とアクション + + + + + + + + + + + + 関連を少し + 別のモノを添える + + + + + + + + + + + 関連を一覧で + 別のモノを並べる + diff --git a/design/imgs/fig-object-to-screen.svg b/design/imgs/fig-object-to-screen.svg new file mode 100644 index 00000000..242b6b83 --- /dev/null +++ b/design/imgs/fig-object-to-screen.svg @@ -0,0 +1,62 @@ + + + + + + + + + + 主役に決めたモノ + + 備品 + + + + + できあがる画面 + + + + + + + + + + + + + + + + + + + + + + + + + + 備品の一覧 + + + + + + + + + + + + + + + 借りる + + 備品の詳細 + diff --git a/design/imgs/fig-single.svg b/design/imgs/fig-single.svg new file mode 100644 index 00000000..ff9c6c56 --- /dev/null +++ b/design/imgs/fig-single.svg @@ -0,0 +1,24 @@ + + + + + 備品の詳細 + + + + + + + + 名前 + ノートPC + + 数 + 3台 + + + + 借りる + + 備品が、1つだけ見える + diff --git a/design/imgs/fig-summary.svg b/design/imgs/fig-summary.svg new file mode 100644 index 00000000..e0b0a761 --- /dev/null +++ b/design/imgs/fig-summary.svg @@ -0,0 +1,78 @@ + + + + + + + + + 仕様 + + + 1 + モノを決める + + + 2 + 画面を決める + + + 3 + ならべ方を決める + + + + + + + + + + + + + + 備品 + + + + + + + + + + + + + + + + + 一覧 + + + + + + + + 詳細 + + + + + + + + + + + + + + + + + オブジェクトから考える + diff --git a/design/imgs/fig-tap-a.svg b/design/imgs/fig-tap-a.svg new file mode 100644 index 00000000..c36c8fa8 --- /dev/null +++ b/design/imgs/fig-tap-a.svg @@ -0,0 +1,86 @@ + + + + + + + + + + + + + + + 備品貸出システム + + + 一覧 + + + 備品情報 + + + + 貸出 + + + 返却 + + + + + 1 + + + 押すと + + + + + + 貸出 + + 貸し出す備品を選んでください + + + + + + + + + + + + ノートPC + 3台 + + + + タブレット + 5台 + + + + + スピーカー + 1台 + + + + + 延長コード + 4本 + + + + + 2 + + + まだ借りられない + ここでやっと借りられる + diff --git a/design/imgs/fig-tap-b.svg b/design/imgs/fig-tap-b.svg new file mode 100644 index 00000000..c83fddff --- /dev/null +++ b/design/imgs/fig-tap-b.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + 備品貸出システム + + + + + + + ノートPC + 3台あり + + + 1 + + + + + + + + + + タブレット + 5台あり + + + 0 + + + + + + + + + + + スピーカー + 1台あり + + + 0 + + + + + + + + + + 延長コード + 4本あり + + + 0 + + + + + + + + 借りる + + + + + 1 + diff --git a/design/imgs/fig-ui-vs-visual.svg b/design/imgs/fig-ui-vs-visual.svg new file mode 100644 index 00000000..deab34b3 --- /dev/null +++ b/design/imgs/fig-ui-vs-visual.svg @@ -0,0 +1,40 @@ + + + + + + + + + UIデザイン + 何を、どこに置くか + + + + + + + + + 今日のメインはこっち + + + 見た目をつける + + + + ビジュアルデザイン + どんな見た目にするか + + + + + + + + + + + + 最後に少し触れます + diff --git a/design/imgs/fig-ui.svg b/design/imgs/fig-ui.svg new file mode 100644 index 00000000..c40b65cc --- /dev/null +++ b/design/imgs/fig-ui.svg @@ -0,0 +1,42 @@ + + + + + 見せるもの + + + + + 文字 + + + + + リスト + + + + + 画像 + + + 操作するもの + + + + ボタン + + + + チェック + + + + + 入力欄 + + + この2つを、どこに置くか決める + diff --git a/design/imgs/fig-way-a.svg b/design/imgs/fig-way-a.svg new file mode 100644 index 00000000..76665ab4 --- /dev/null +++ b/design/imgs/fig-way-a.svg @@ -0,0 +1,29 @@ + + + + + + + 備品貸出システム + + メニューを選んでください + + + + 一覧 + + + + 備品情報 + + + + 貸出 + + + + 返却 + diff --git a/design/slide.md b/design/slide.md index cdf9e029..721cce26 100644 --- a/design/slide.md +++ b/design/slide.md @@ -2,15 +2,252 @@ marp: true theme: uncover paginate: true +style: | + /* 見出しは2行になっても、行の長さが揃うようにする */ + section h1, + section h2 { + letter-spacing: 1px; + line-height: 1.25; + text-wrap: balance; + } + + section li { + line-height: 1.5; + } + + /* 見出しと本文、図のまわりの余白をそろえる */ + section h2 { + margin: 0 0 0.5em; + } + + section p:has(img) { + margin: 0.5em 0 0; + } + + /* 箇条書きは内容の幅で中央に置き、見出しと中心をそろえる */ + section ul, + section ol { + display: table; + margin: 0 auto 0.3em; + } + + /* ヘッダーがあるスライドは、上に余白を足して見出しとぶつからないようにする */ + section[data-header] { + padding-top: 76px; + } + + /* 箇条書きの点を、見出しと同じアクセントカラーの四角にする */ + section ul { + list-style: none; + padding-left: 0; + } + + section ul > li { + padding-left: 1.1em; + position: relative; + } + + section ul > li::before { + background: var(--color-highlight-heading); + border-radius: 3px; + content: ""; + height: 0.36em; + left: 0; + position: absolute; + top: 0.6em; + width: 0.36em; + } + + /* 番号は、丸バッジにして順序を目立たせる */ + section ol { + counter-reset: item; + list-style: none; + padding-left: 0; + } + + section ol > li { + counter-increment: item; + padding-left: 1.9em; + position: relative; + } + + section ol > li::before { + background: var(--color-highlight-heading); + border-radius: 50%; + color: var(--color-background); + content: counter(item); + font-size: 0.6em; + font-weight: 700; + height: 1.65em; + left: 0; + letter-spacing: 0; + line-height: 1.65em; + position: absolute; + text-align: center; + top: 0.45em; + width: 1.65em; + } + + /* 目次は行間を広げる */ + section.agenda li { + margin-bottom: 0.4em; + } + + /* 章の扉は、見出しを大きくしてアクセントカラーの下線を引く */ + section.chapter h2 { + font-size: 2.1em; + } + + section.chapter h2::after { + background: var(--color-highlight-heading); + border-radius: 3px; + content: ""; + display: block; + height: 6px; + margin: 0.45em auto 0; + width: 2.2em; + } + + /* 小節の扉は、章の扉より1段小さくして親子関係がわかるようにする */ + section.chapter.sub h2 { + font-size: 1.5em; + } + + /* 章の結論は、囲み枠にして「あとで戻ってくる場所」にする */ + section.point h2 { + color: var(--color-header); + font-size: 1.1em; + } + + section.point h2 + p { + background: var(--color-background-code); + border: 3px solid var(--color-highlight-heading); + border-radius: 12px; + display: table; + font-size: 1.35em; + font-weight: 700; + /* 見出しと同じ字間にしないと、中心がわずかにずれて見える */ + letter-spacing: 1px; + line-height: 1.4; + margin: 0 auto; + padding: 0.7em 1em; + text-wrap: balance; + } + + /* 手を動かすスライドは、見出しの上にラベルを置いて説明と見分けられるようにする */ + section.exercise h3 { + background: var(--color-highlight-heading); + border-radius: 999px; + color: var(--color-background); + display: table; + font-size: 0.6em; + letter-spacing: 2px; + margin: 0 auto 0.5em; + padding: 0.2em 1.1em; + } + + /* つくるアプリの仕様は、カードに入れて何度でも同じ形で見せる */ + section.spec ul { + background: var(--color-background-code); + border-left: 6px solid var(--color-highlight-heading); + border-radius: 6px; + display: table; + font-size: 1.15em; + padding: 0.6em 1.3em; + } + + /* 仕様のどこに注目しているかを、色でも示す */ + section.spec li strong { + color: var(--color-highlight-heading); + } + + /* 仕様カードの上に置くラベル */ + section.spec h2 + p { + font-size: 0.8em; + } + + /* 見出しのなかで、いちばん言いたい一語だけを大きくする */ + section h2 .big { + color: var(--color-highlight-heading); + display: block; + font-size: 1.5em; + margin-top: 0.15em; + } + + /* 図を並べる表は、罫線を消してラベルを控えめにする */ + section table > thead > tr > th { + border-bottom: none; + color: var(--color-header); + font-size: 0.7em; + font-weight: 400; + } + + /* テキストと図を1行に並べ、余った幅をスライドの左右に均等に配る。 + bg right は図をパネル中央に固定するので、テキストとのあいだだけが空く */ + section.split { + text-align: left; + } + + section.split header { + text-align: center; + } + + section.split .cols { + align-items: center; + display: flex; + gap: 56px; + justify-content: center; + width: 100%; + } + + /* 行頭を揃えるため、左のテキストは1つの塊にする。 + 幅を固定しないと、テキスト量の差で図の位置がスライドごとに動き、 + 送ったときにガタつく。入りきらないときは flex が縮めてくれる */ + section.split .txt { + width: 640px; + } + + section.split .cols p:has(img) { + margin: 0; + } + + section.split h2 { + font-size: 1.3em; + } + + section.split ul, + section.split ol { + font-size: 0.95em; + margin-left: 0; + } + + section.split p { + font-size: 0.95em; + } + + /* リンクが多いスライドは、文字を小さくして1行に収める */ + section.small ul { + font-size: 0.7em; + } --- # 使いやすいUIデザイン - + --- -## 目次 + + +## この時間の目標 + +**チームで作るアプリの画面**を
自分で考えられるようになる + +--- + + + +## 今日は4本立て 1. UIとは 2. UIを作ってみる @@ -20,347 +257,342 @@ paginate: true --- + ## 1. UIとは --- -## User Interface (UI) +## 「UI ＝ 見た目」
**ではない** -UIは、ユーザーと情報の境界。情報をやり取りする +**UI**と聞くと、
色や形を思い浮かべがち -![ui-sample](./imgs/design-ui-sample.png) +--- + +## UIデザインと
ビジュアルデザインは別 + +![height:330px](./imgs/fig-ui-vs-visual.svg) --- -## UIは、情報の**表示**と**操作**を提供する +## **UI** ＝ **User Interface** -- ユーザーに**情報を表示**する -- **情報の操作**をユーザーに提供する +ユーザーと**サービス**の
**あいだ**にあるもの -![height:150px](./imgs/design-ui.svg) +![height:280px](./imgs/fig-interface.svg) --- -## UIデザインとビジュアルデザインは別 - -- ビジュアルデザインは、表現や装飾を重視 - - 色や形、フォントなどを考える -- UIデザインは、UserInterfaceの設計を重視 - - 情報の表示と操作を考える +## その**あいだ**にあるのは、
この**2種類** -今回は**UIデザイン**の話 +![height:420px](./imgs/fig-ui.svg) --- + -## 早速UIを作ってみよう +## 2. UIを作ってみる --- -## ToDoアプリを考えてみる + ---- +### ハンズオン ① -## やってみよう: ToDoアプリのUI +## 備品貸出アプリを考えてみよう！ -- ToDo一覧を**見る** -- 新しいToDoを**追加する** -- 追加したToDoを**完了にする** -- ToDoのタイトルと詳細を**書く** +学校の備品を借りるアプリ -これらの機能が実現できるアプリ +- 備品の一覧を**見る** +- 備品の**名前と数を見る** +- 備品を**借りる** +- 借りた備品を**返す** --- -## 機能から**直接**UIを作ると、使いにくい -- 同じ画面がたくさんある -- ToDoがすぐ表示されない -- 機能を選択してToDoが表示 + -![bg contain right:40%](./imgs/design01.png) +
+
---- +## 機能から**直接**UIを作ると
使いにくい -## 機能を**抽象化**してUIを作ると、使いやすい +
+![h:330](./imgs/fig-way-a.svg) -![bg contain right:40%](./imgs/design02.png) +
--- -## 機能からオブジェクトを抽出する +## ボタンを並べると**2タップ必要** -- オブジェクトを基準にUIを考える -- 機能から直接UIを作らない +![height:410px](./imgs/fig-tap-a.svg) --- -## **オブジェクトを抽出**してから、UIを作ろう +## 備品を並べると**1タップ** + +![height:480px](./imgs/fig-tap-b.svg) --- - +## 同じ画面を**何枚も作らずに済む** -## 3. UIデザインの流れ +![height:470px](./imgs/fig-compare.svg) --- -## UIデザインの流れの図 + -![height:460px](./imgs/design-flow.svg) +## 主役にした**備品**を
**オブジェクト**と呼ぶ ---- +**オブジェクト**を決めてから、
画面を作る - +LINEならトーク、Amazonなら商品 -## 3.1 オブジェクト抽出 +--- -- 機能から**オブジェクト**を抽出 -- オブジェクトは、**属性**と**アクション**を持つ -- わかる人向け: UMLのクラス図のようなイメージ +## **備品**を主役にしたから、
画面はこの2つになった + +![height:360px](./imgs/fig-object-to-screen.svg) --- -## オブジェクトとは、ユーザーが操作する対象物 + + -- オブジェクトの詳細やプロパティとして、属性を持つ +## 3. UIデザインの流れ ---- +![height:340px](./imgs/fig-flow.svg) -## アクションは**C(R)UD**で考える +--- -CRUDは、Create Read Update Delete +## **ビュー**はモノが見える場所、
**アクション**はモノにできること -- Readはビューで実現する。アクションにしない +![height:340px](./imgs/fig-bridge.svg) --- -## ToDoアプリで、オブジェクト抽出 + + + +## 3.1 モノを決める -- ToDo一覧を見る -- 新しいToDoを追加する -- 追加したToDoを完了にする -- ToDoのタイトルと詳細を書く +仕様から**オブジェクト**を拾い出す + +![height:180px](./imgs/fig-flow-step1.svg) --- -## ToDoアプリで、オブジェクトは**ToDo**だけ +## モノには**情報**があり、
**できること**がある -- **ToDo**一覧を見る -- 新しい**ToDo**を追加する -- 追加した**ToDo**を完了にする -- **ToDo**のタイトルと詳細を書く +- 持っている情報を**属性**という +- できることが**アクション** --- -## ToDoアプリで、ToDoの属性は**タイトル・詳細・完了したか** +## モノを拾い出す手順は3つ -- ToDo一覧を見る -- 新しいToDoを追加する -- 追加したToDoを**完了**にする -- ToDoの**タイトル**と**詳細**を書く +1. 名詞に**線**を引く +2. 同じものを**まとめる** +3. **属性**と**アクション**に分ける --- -## ToDoアプリで、ToDoのアクションは**Create・Update** +## 名詞に線を引くと、
**備品**だけが残る -- ToDo一覧を**見る** (Read) -- 新しいToDoを**追加する** (Create) -- 追加したToDoを**完了にする** (Update) -- ToDoのタイトルと詳細を**書く** (Update) +![height:340px](./imgs/fig-extract-demo.svg) --- -## ToDoアプリのオブジェクトを抽出した結果 + + +### ハンズオン ② -- オブジェクトは、**ToDo** -- ToDoの属性は、**タイトル・詳細・完了したか** -- ToDoのアクションは、**Create・Update** +## 仕様に出てくる**名詞**を
書き出してみよう -![bg height:460px right:30%](./imgs/design-todo01.svg) +スケッチブックに、思いつくものを全部（**1分**） --- -## オブジェクト抽出ができました + -![height:460px](./imgs/design-todo01.svg) +
+
---- +## アクションは
**つくる・かえる・けす** - +英語でCreate・Update・Delete -## 3.2. ビュー・ナビゲーション +**見る**はアクションにしない。
押した先にあるのは画面だけ ---- +
-## ビューとは、ユーザーに情報を表示する領域 +![h:300](./imgs/fig-way-a.svg) -例えば、リストやフォームやページなど -ビューには、**コレクションビュー**と**シングルビュー**がある +
--- -## コレクションビューは**同じオブジェクトを複数**表示する - -**Create**・**Delete**アクションを配置する + -オブジェクトによっては、Updateアクションも配置 +
+
---- +## 備品は、属性3つと
アクション2つを持つ -## シングルビューは**1つのオブジェクト**を表示する +- 属性は
**名前・数・借りているか** +- アクションは
**借りる・返す** -**Update**・**Delete**アクションを配置する +**つくる・けす**は、先生の仕事。
だから仕様になく、作らない ---- +
-## ナビゲーションとは、ビュー同士の呼び出し関係 +![h:440](./imgs/fig-item-object.svg) -どのビューからどのビューに遷移できるか +
--- -## まず、遷移できるナビゲーションを全て書き出す + + -1. **コレクション**から**シングル**へナビゲーション -2. 別オブジェクトからのナビゲーション +## 3.2 画面を決める -![bg contain right:40%](./imgs/design-view.svg) +モノが見える場所（**ビュー**）と、
その行き来（**ナビゲーション**） ---- +![height:180px](./imgs/fig-flow-step2.svg) -## その後、ビュー・ナビゲーションを削る +--- -- 複数のビューを1つのビューにまとめる -- 必要のないナビゲーションをなくす +## ビューは「**一覧**」と
「**詳細**」の2種類 -![bg contain right:40%](./imgs/design-navigation.svg) +| コレクションビュー（一覧） | シングルビュー（詳細） | +| --- | --- | +| ![height:380px](./imgs/fig-collection.svg) | ![height:380px](./imgs/fig-single.svg) | --- -## ToDoアプリで、ビュー +## アクションは、そのモノが
見えている**ビュー**に置く -- ToDoリストが並ぶコレクションビュー -- ToDoのタイトルと詳細があるシングルビュー +![height:380px](./imgs/fig-action-place.svg) --- -## ToDoアプリで、ナビゲーション + -![height:300px](./imgs/design-todo02.svg) +
+
---- +## ナビゲーションは
ビュー同士の行き来 - +一覧から備品を選ぶと詳細へ。
詳細から戻ると一覧へ -## 3.3 レイアウト +オブジェクトが増えたら、
まず全部書き出してから削る ---- +
-## ビュー・ナビゲーションから、レイアウトを考える +![h:380](./imgs/fig-item-navigation.svg) -- いわゆるワイヤーフレーム -- ビューの数だけレイアウトを考える -- 既存アプリを参考にしよう +
--- -## コレクションビューのレイアウト3種 + + -- リスト :scroll: -- グリッド :hash: -- マッピング :globe_with_meridians: +## 3.3 ならべ方を決める -![bg contain right:50%](./imgs/design05.png) +**レイアウト**。色や飾りはつけず、
置き場所だけを描く（**ワイヤーフレーム**） ---- +![height:180px](./imgs/fig-flow-step3.svg) -## シングルビューのレイアウト3種 +--- -- 属性とアクションだけ -- 関連オブジェクトをプレビュー -- 関連オブジェクトのコレクションビューを含む +## 画面のならべ方には、
決まった型がある -![bg contain right:40%](./imgs/design04.png) +| 一覧のならべ方 | 詳細のならべ方 | +| --- | --- | +| ![height:250px](./imgs/fig-layout-list.svg) | ![height:250px](./imgs/fig-layout-single.svg) | --- -## アクションは**オブジェクトの近く**にレイアウトする + ---- +### ハンズオン ③ -## やってみよう: ToDoアプリで、レイアウト +## 3ステップで、
描き直してみよう -| オブジェクト | ナビゲーション | -| --- | --- | -| ![height:300px](./imgs/design-todo01.svg) | ![height:300px](./imgs/design-todo02.svg) | +1. **モノ**を決める +2. **画面**を決める +3. **ならべ方**を決める + +新しいページに。
最初の絵は消さないでください --- -## ToDoアプリで、レイアウト + -- ToDoリストが並ぶコレクションビュー -- ToDoのタイトルと詳細があるシングルビュー +
+
-![bg contain right](./imgs/design03.png) +## 答え: 備品貸出アプリの
レイアウト ---- +- 備品が並ぶ
**コレクションビュー** +- 備品1つが見える
**シングルビュー** + +最初の絵と、
見比べてみてください -## UIデザインの流れのまとめ +
-1. オブジェクト抽出 -2. ビュー・ナビゲーション -3. レイアウト +![h:420](./imgs/fig-answer.svg) + +
--- -## 4. ビジュアルデザイン - ---- +## 見た目は、この**4つ**で
だいぶよくなる -## ビジュアルデザインは、UIの**見た目**をデザインする +- **近接**: 関係あるものを近づける +- **整列**: 端をそろえる +- **反復**: 同じものは同じ見た目にする +- **コントラスト**: 差をはっきりつける --- -## ビジュアルデザインのポイント +## 見た目は、発明しない。真似る -- 既存のビジュアルデザインを真似て作る -- ビジュアルデザインを学ぶと個性が出せる -- ただ、難しい +似たようなアプリを見て、
同じように置けばいい --- -## ビジュアルデザインの例 + -- **デザイン4つの基本原則** - - コントラスト 反復 整列 近接 -- **デザインシステム** - - ビューやナビゲーション、ビジュアルデザインを体系立ててまとめたもの - - アプリ全体で一貫したデザインにできる +## まとめ -例えば、デジタル庁のデザインシステムやMaterialDesign +![height:440px](./imgs/fig-summary.svg) --- - +## 明日から、自分のチームの
アプリでやる -## まとめ +仕様を書いたら、**名詞に線を引く** -- UIとは、情報の表示と操作を提供する -- UIデザインは、オブジェクトから考える -- UIデザインの流れは、オブジェクト抽出、ビュー・ナビゲーション、レイアウト -- ビジュアルデザインは、UIの見た目をデザインする +それだけで、つくる画面が見えてくる --- -## 出典 + + +## 出典・もっと知りたくなったら -- デジタル庁デザインシステムウェブサイト -- オブジェクト指向UIデザイン -- ノンデザイナーズ・デザインブック -- MaterialDesignGuidelines +- オブジェクト指向UIデザイン（今日の中核） +- ノンデザイナーズ・デザインブック（4つの原則） +- デジタル庁デザインシステム +- MaterialDesignGuidelines（レイアウトの型） - HumanInterfaceGuidelines +