![見出し画像](https://assets.st-note.com/production/uploads/images/29695555/rectangle_large_type_2_cbd73ff9788cd277092aa0e26988ecf1.jpeg?width=1200)
コンポーネントについて 第一話
こんばんわ。大谷郡司です。
今日は「はじめてのUIデザイン」第二章を読んでいきます。
UIデザインのコンポーネントについて学べます!基礎の基礎やね!
コンポーネント ナビゲーション系
ナビゲーションバー
・ヘッダーのコンポーネントでもよく使うやつ
・左に戻る、真ん中に今いるページの名前、右にアイコン配置して別画面への導線を配置することが多い
・どの画面でも出てくるやつなので設計は気を付けて行うべき
タブバー
・画面の下に固定配置して別画面へ横断するためのナビゲーション
・下部に配置されてるからユーザーはすぐに操作できる
・異なるコンテキストの移動に使える
・3~5個が基本的
・iOSはタブバー、AndroidはButtomNavigationという
タブ
・タブバーはタップすると画面が遷移されるがタブはスワイプするだけで移動できる
・項目が増えても対応できる
・カテゴリーの切り替えを行うのに使える
フッター
・Webサイトの一番下にあるやつ
・利用規約とかお問い合わせとか優先度の低い情報への導線を配置する際によく使う
・サイトマップとしての機能を持たせることが多い
ドロワー
・ハンバーガーボタンまたは画面を右にスワイプすると出てくるやつ
・中の項目が隠れてまうし、別画面に遷移するのに一手間かかるので主要ナビゲーションにするには使い勝手悪め
・元画面を多く使えるメリットあり
・縦に項目配置するから多くの項目配置するのに使える
・メインの画面を広く使用したい、ナビゲの重要度低めな時に検討
コンポーネント バー系
サーチバー
・長澤まさみ謝罪とは笑
・検索のためのコンポーネント
アドレスバー
・アドレス先を指定するURLや検索ワードも入れれますねぇ
コンポーネント ボタン系
プライマリボタン
・画面において最も重要なアクションをするためのボタン
・基本的にプライマリボタンは一画面に一つ
・他の要素よりもユーザーが認識しやすい色にする
・ブランドカラーやアクセントカラーを用いるとプライマリボタンと認識しやすくなる
セカンダリボタン
・同一画面内で二番目以降に重要なアクションを取るボタン
・プライマリボタンと明確な差が必要
テキストボタン
・枠や背景などを付けない文字だけのボタン(これ、アラートでした!すんません!まぁなんかこんな文字だけのやつよ!!)
・テキストだけでボタンを表現できる
感想
確かに知ってはいたけど改めてコンポーネントの基礎を学べて凄い良いなと思った。名称とか知らんかったし、使いどころについても書いてくれてるし、コンポーネントの基礎を学べるのは良いですねぇ!!!
コンポーネントについてはまだまだあるので、明日からもやっていきますよ〜〜!!!
コンポーネントの基礎を理解できるようになりましょう!
雑談コーナー
今日オラファーエリアソンって人の展示観に行ってんけどめっちゃおもろかった。久しぶりにインスタレーション観たんすけどやっぱいいよねぇ!!!シンプルに楽しかった!!!