#8 フィルターUIデザインの基本

フィルターUIをデザインしよう

コンテンツのリストをある条件でフィルターするUIはよく出てくるパターンの代表格です。
何をフィルタするか？フィルタできる変数の個数は？でもちろんUIの内容は大きく変わります。

今回はシンプルなフィルターUIを題材に、”どこに配置すべきか？”、"デザインする時の状態の基本"などをデザインをトレースしながら学んでいきます。

動画の目次

• 00:12 今日のポイント
• 04:22 盗むUIをまず探す
• 11:21 UI配置位置を考える
• 18:07 絞り込みUIのデザイン
• 28:28 スタイルの微調整
• 36:52 ON状態のUIをデザイン
• 46:50 次で最後

ポイントのスライド

こちら。振り返りに使えるなら使ってくれ〜い

Figmaのデータ

こちら〜！

https://www.figma.com/file/GMEs9Al3RXlXUEfhOTCsih/%F0%9F%A7%81%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%81%A7%E5%AD%A6%E3%81%B6UI%E8%A6%8B%E3%81%9F%E7%9B%AE%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9-(Copy)?type=design&node-id=421%3A23292&t=EB03GQ1RVMJgSrKb-1

‍

‍

‍

‍

‍

フィルターUIをデザインしよう

コンテンツのリストをある条件でフィルターするUIはよく出てくるパターンの代表格です。
何をフィルタするか？フィルタできる変数の個数は？でもちろんUIの内容は大きく変わります。

今回はシンプルなフィルターUIを題材に、”どこに配置すべきか？”、"デザインする時の状態の基本"などをデザインをトレースしながら学んでいきます。

ポイントのスライド

こちら。振り返りに使えるなら使ってくれ〜い

Figmaのデータ

メンバーになると閲覧できるよ！

‍

‍

‍

‍

‍