it-swarm-ja.com

モバイルデバイスに5つ以上の水平タブを表示する方法

これは、水平タブが必要なモバイルWebサイト専用です。

問題は、5〜7個のタブが潜在的に5〜7個存在する可能性があることです。各タブのテキストは長いため、タブが見えにくくなる可能性があります。

これをモバイルユーザーにとって良いエクスペリエンスにするためのさまざまな方法やアプローチを考えるのに苦労しています。

これらの制限を念頭に置いてこのデザインを達成するための提案はありますか?

13
Paul

これは、サイトの水平メインナビゲーションにも当てはまるようです。ブラッドフロストには レスポンシブナビゲーションシステムのいくつかのオプション がありますが、次の2つは、彼のオプションから達成しようとしていることに最も適しているようです。これらの2つと3つ目のアプローチは次のとおりです。

ドロップダウンタブ

これを解決する一般的な方法は タブからドロップダウンに切り替える です。 Dropdown Responsive Tabs

積み上げタブ

別のアプローチは タブをスタックする です。 Stacked Responsive Tabs

スクロール可能なタブ

モバイルインターフェイスに表示されているもう1つのオプションは、スクロール可能なタブです。 Scrollable Tabs from the Android Developer site

11
Matthew Moore

もう1つ例を追加します;)

enter image description here

この相互作用は Rookie で使用されます。私は ハンバーガーメニューに関するこの素晴らしい記事 からGIFを取り出しました。

3
mik01aj

@Matthewがスクロール可能なタブとして提案したiOSの例を1つ示します。

TOI

3
Spicerjet

また、2行で中央に配置して折り返すこともできます(たとえば、上の行に3つのアイテム、下に2つのアイテム)。ボタンのように見せたり、簡単にクリックできるようにするなど、デザインを少し変更する必要があるかもしれません。

2