【BONO】UIビジュアル基礎 TRY3まとめ
こんにちは、zoeです。
TRY3お題：動画詳細UIをリデザイン
「サイズの定義」に着目してUIのリデザインを行いました。
余白・フォント・オブジェクトのサイズごとの役割を定義し、UIに反映しました。
結果
進め方
①構造の整理
②サイズルールの定義
③装飾要素の調整
①構造の整理
「伝えたいこと」を整理するため、
始めに情報のグループ分けを行います。（近接の原理！）
サイドバーを除いて、ざっくり以下の5グループに分けました。
動画
動画の補足情報や動画に付随するアクション
チャンネル情報
コメント欄・コメント投稿
関連動画
②サイズのルール定義
次に余白・フォント・オブジェクトのサイズの定義を行います。
余白
なるべくシンプルに定義しました。
8の倍数をベースとし、
「①構造の整理」で定義したグループ間の余白：24px
「①構造の整理」で定義したグループ内の余白：16px
と設定しました。
「①構造の整理」で定義したグループをより視覚的にわかりやすくすること
を意識して設定しています。
フォント
フォントサイズ14pxをベースとして
それ以外のサイズは強弱をつけるために使いました。
動画のタイトル：20px（動画の理解を促進する部分でユーザーに見てもらいたいため）
動画のカテゴリ＃・再生回数：12px （動画の補足情報にあたりそこまで大事でないと思ったため）
それ以外：14px
オブジェクト
サイドバーを除いた赤枠の部分を100%として
メインの動画がある緑枠部分は60％
補足情報がある青枠部分は40％
と定義しました。
それ以外のオブジェクト（ボタンやアイコンサイズ）のサイズは今回細かくは定義しませんでした（どうやって定義したらよいのだろう、、？）
③装飾要素の調整
色を使う部分の定義を行いました。
「色は目立たせたいメインアクションにつけることが多い」
（コントラストの原理！）
と学んだため、再生ボタンやチャンネル登録ボタン、
そして現在位置を示すためにサイドバーのホーム部分にも使いました。
いいねボタンや動画シェアなど他のボタンは、
サービスにおいて再重要ではないと考えたため、
メインカラー以外のグレーを使いました。
チャンネル情報を囲む枠線は
「色を薄くしても役割を果たせる」と考え薄いグレーに設定しました。
関連動画グループの左にも縦枠線がありましたが、
動画が左で整列して「線」のような印象を与えているので（整列の原理！）
枠線は取っ払ってみました。
（ただ、何が正解かわからないので、色んなUIを観察してみたいと思います）
学び
①構造の整理は重要
→情報をグループに整理しないとユーザーにとってわかりづらいUIになる
（整理されていない勉強ノートと同じ。情報が構造化されていないと、何の情報を見ているか考える必要があり、重要部分が読み取りづらくなる）
→整理されていないと、サイズのルールを定義する際の基準がない
②余白は8pxがベストプラクティス
→多くのデバイスは8の倍数で縦横が割り切れる
→8の倍数で設定すると、倍数に沿った余白が設定できないなどで困ることが少なくなるのでよい
③装飾要素でも情報の強弱が付けられる
→同じフォントサイズで色をグレーと黒にすれば強弱が生まれる
UIアウトプット
構造化＋サイズ定義を行うことは大事！
サイズ定義にはTRY2で作ったデザインシステムが役立つなーと感じました。
今後もルール定義を怠らず、少しでも「説明できるUI」を目指したいと思います。