進化したタブバーの3つの働き｜UI・UX

こんにちは、中国人デザイナーのYINGです。
今日はタブバーについてお話をします。

モバイルアプリのナビゲーションとして、下部にタブバーを設置する形式は非常に主流で、基本的なパターンです。

タブバーのアイコンやテキストは、ユーザーがアプリの世界を旅する時の道標であり、現在地はどこなのか、どの道（タブ）がどの場所（ページ）に繋がっているのかを示しています。

スマホの時代になり、タブバーはアプリの重要な部品として広く使われ、様々なニーズに応えて進化をしてきました。

今の時代のタブバーは、決してナビゲーションだけの意味を持っているわけではありません。

UI・UXがアップデートされ続けてきたなか、タブバーは「ブランド表現」、「ユーザー誘導」、「導線強調」の3つの働きを持つようになりました。

１、ブランド表現

アプリのメインカラーはブランド色をよく使用し、タブバーのアイコンと文字もブランド色で表現するケースが多いです。

色だけではなく、ブランドロゴやサービスアイコンをタブバーのアイコンとして使用することもあり、ブランドイメージへの表現が強化できます。

ブランド戦略を意識したデザインは、タブバーを見るだけで、どのアプリなのか認識させる工夫がされています。

２、ユーザー誘導

ユーザーに使ってほしい機能、優先度の高い機能が存在する場合、それをタブバーの中央に置き、色や形で強調することで、ユーザーを誘導することができます。

例えば、PayPayのような決済ツールでは、ユーザーの使用頻度が一番高いのは「支払い」機能です。
お店でQRCode、スキャン機能をすぐ出せるように、タブバーのアイコンと文字を存在感の強いボタンとして表現しています。

中国のメルカリと呼ばれる、アリババ系のフリマアプリ「閑魚(XianYu)」はタブバーで「出品」を強くアピールしています。

このアプリのコンセプトは、「誰もが持つ眠ってるモノを魚が泳いでいるように動かせる」であり、中古品の出品側を重要視しています。
閑魚はメルカリよりユーザーの出品を強化していることがタブバーの比較でわかります。

ユーザー数が1億以上の動画サービス「iQIYI (アイチーイー)」のアプリは、有料会員登録の促進のため、タブバーで課金導線と有料コンテンツの存在感をアピールしています。

３、導線強調

タブバーの基本型は平均的で、各メニューを平等的に扱っています。

ユーザーの目を引きたい情報がある場合、または同じタブで二つの機能を持つ場合、そのタブに変化を持たせ、情報や導線を増やすことができます。

例えば、日本にも進出している網易(ワンイー)のECアプリ「網易厳選」は、タブバーの一番左のタブが二つの機能を持っています。

ユーザーがホームページの上部にいる時、「推薦」の文字と矢印を表示し、下部の「おすすめ商品」エリアへスクロールできます。
下部の「おすすめ商品」にいる時は、「ホームページ」の文字とサービスアイコンを表示し、ホームページの上部へスクロールできます。
つまり、ページ内の導線とトップへ戻る機能を複合させています。

似たようなデザインはアリババのECアプリ「淘宝(タオバオ)」や「フリギー(Fliggy)」でも使われています。

今回はナビゲーション以外のタブバーの機能について、下記の三つを紹介しました。

1、ブランド表現
2、ユーザー誘導
3、導線強調

タブバーをデザインをする際に気をつけたい点はまた別の記事で紹介したいと思います。

ご清聴ありがとうございました！