UIをデザインしながらマテリアルデザインの「Component」を身につけていくシリーズのお題です。

‍

▼ このお題の「Component」

・Cards
・Buttons: floating action button

‍

▼ 目次

00:00　動画の説明
00:50　どんな画面をデザイン？
02:10　要件の詳細
03:24　Card UIを身につけよう！
05:39　FABボタンを使おう
06:21　デザインする時に注意すること

▼  お題のスライド
https://www.figma.com/proto/LA5PSiEkXTJw67M8uAucty/Weekly02%3A%E3%81%8A%E9%A1%8C-%E8%B3%83%E8%B2%B8%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E3%83%9B%E3%83%BC%E3%83%A0%E7%94%BB%E9%9D%A2?page-id=0%3A1&node-id=1%3A74&viewport=241%2C48%2C0.05&scaling=contain&starting-point-node-id=1%3A74

‍

▼ このお題のUIの基本インプット

○ 「TxtFields」でフォームの基本的なサイズ等を真似する
○ ”選択モード”の遷移挙動について知ろう&実践しよう
　1 【ナビゲーション】＜,←と×の違いを具体例を見ながら考えよう
　2 【ナビと遷移】"×キャンセル"はいつ使うのか？

○ 倍数でサイズを決めよう
　・動画

‍

□ スライド
https://www.figma.com/file/AGq7BtJArbAL6Lut8bCUSI/Weekly03%3A%E3%81%8A%E9%A1%8C-%E3%80%8C%E8%B3%83%E8%B2%B8%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E2%80%9D%E3%81%8A%E6%B0%97%E3%81%AB%E5%85%A5%E3%82%8A%E3%83%AA%E3%82%B9%E3%83%88%E2%80%9D%E3%81%AEUI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3?node-id=1%3A78

▽UIの基本インプット

・境界線の使い方
　https://material.io/components/dividers

・リストデザイン
　https://material.io/components/lists

□ スライド

https://www.figma.com/proto/0wIq8vsYOijWhsa4PE9FXY/Weekly04%3A%E3%81%8A%E9%A1%8C-%E3%80%8C%22%E2%80%9D%E3%81%AEUI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3?page-id=0%3A1&node-id=1%3A256&viewport=241%2C48%2C0.05&scaling=contain&starting-point-node-id=1%3A256

▼ UI基本のインプット

1.ハーフモーダルを使ってデザイン

・ハーフモーダルについてはこちらの記事
・モーダルの考え方についてはこちら

2.チェックボックスとラジオボタン

・「Switches - Other selection controls」をマストで読もう
・「Checkboxes」「Radio buttons」を読もう