トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

タブバーのデザインまとめ【アプリ事例】

下のボタンを押したら画面が切り替わる。

随時追加する。

VR

ambr

f:id:bibinbaleo:20200527210339p:plain

avatarが服なのが面白い。socialで人型を使ったからかな。それともアバターは着るものという考えが現れているのか

itemはバッグのマーク

ios

iosではアイコンの数は3~5、アイコンサイズは24*24pxが推奨

f:id:bibinbaleo:20200414093616p:plain

f:id:bibinbaleo:20200414093620p:plain

AppStore(iPad)

f:id:bibinbaleo:20200501112746p:plain

f:id:bibinbaleo:20200625225645p:plain

選択時:青

文字ラベル:右

GooglePlayStore

f:id:bibinbaleo:20200625222651p:plain

f:id:bibinbaleo:20200625223426p:plain

選択時:コンテンツになって色が違う。アイコンは塗りつぶしされる

文字ラベル:下

タッチしたときにUIが微妙にアニメーションする。マイクロインタラクション!

Googleフォト

f:id:bibinbaleo:20200625223435p:plain

選択時:青くなる。アイコンは塗りつぶしされる

文字ラベル:下

タッチしたときに背景がパーってなる。

Twitter

f:id:bibinbaleo:20200625222654p:plain

選択時:青くなって線が太くなる

文字ラベル:なし

Instagram

f:id:bibinbaleo:20200625225922p:plain

f:id:bibinbaleo:20200625223429p:plain

f:id:bibinbaleo:20200625223432p:plain

選択時:塗り潰されたり、虫眼鏡は線が太くなる

文字ラベル:なし

デンソーのQRコード

f:id:bibinbaleo:20200625222659p:plain

選択時:線が赤くなる

文字ラベル:なし

Googleフォトと同じく、タッチした時背景がパーンってなる。

マテリアルデザインで推奨されているんだっけ。。。

Yahoo乗り換え

f:id:bibinbaleo:20200625222703p:plain

選択時:緑に塗りつぶされる

文字ラベル:下

背景の四角がパーンってグレーになる

時計(Android公式?)

Pixel3aにもとから入っていた時計アプリ

f:id:bibinbaleo:20200625222705p:plain

選択時:青くなる

文字ラベル:下

Lips

f:id:bibinbaleo:20200625222709p:plain

選択時:濃くなる

文字ラベル:下

ユニクロ

f:id:bibinbaleo:20200625222712p:plain

選択時:線が濃くなる

文字ラベル:下

GU

f:id:bibinbaleo:20200625224941p:plain

Honeys

f:id:bibinbaleo:20200625224944p:plain

f:id:bibinbaleo:20200625224947p:plain

塗りつぶし方がおしゃれ

東京流通センター

f:id:bibinbaleo:20200625224949p:plain

Honeysとホームやカートのアイコン同じだ。どこのだろう?

ABCマート

f:id:bibinbaleo:20200625224952p:plain

背景の色が変わる

ノジマ

f:id:bibinbaleo:20200625224955p:plain

押した物が薄くなる!珍しい!

最後に

ほぼどのアプリでもあるなー

アイコンも色々あっていいね。やっぱアイコン必要かー

この本、Amazonでも販売されたんだ!すごくよかったのでぜひ

他のデザインまとめ記事まとめ

bibinbaleo.hatenablog.com

Unityで作る

bibinbaleo.hatenablog.com