エレガントでシンプルな明らかなサブタブ？
タブとサブタブを必要とする簡単なナビゲーション設定があります。メインタブを用意しました：
しかし、サブタブを適合させてユーザーフレンドリーにする方法はわかりません。これを処理する良い方法は何ですか？
シンプル：
まず、 タブのベストプラクティスに関するこの質問 が興味深いかもしれませんが、ネストされたタブの代替として ファセットナビゲーション が提案されています。コメントが指摘するように、これは情報アーキテクチャの根深い問題である可能性があり、それに対処すると、ネストされたタブを完全に作成できなくなる可能性があります。
また、 複数のタブに関するこの質問 はタブのメタファーを調査し、他のいくつかの代替案を提案します。
とは言っても、情報量の多いサイトは通常 厳密な階層パターンで構成され、UIでは次のように変換されます。 マルチレベルメニュー 、 ナビゲーションタブ 、または ブレッドクラム 。
マルチレベルのタブを使用する大量の情報を含むサイトの例は、ニュースサイトです。
これらのナビゲーションメニューは実際にはtabメタファーを使用していませんが、そのように機能しています。
明白：
私たちは最近マルチレベルのタブで作業しており、デザイナーはいくつかのデザインアイデアを検討して、どれがより効果的かを見つけました。
ユーザーはコントラストの低いものに気付かず、サブセクションを見つけるのが困難であることがわかりました。また、タブの代わりに「 ピル 」を使用して、タブ内のタブ（ネストされたタブ）というメタファーを回避することもできます。
次の理由により、最後の選択肢を使用することになりました。
- ハイコントラスト：情報量の多いサイトで簡単に見つけることができます。
- アフォーダンス：UIタブを明示的に使用すると、正しいメッセージが表示されます。これらはナビゲーション用です。他の例にはタブのアフォーダンスがなく、通常のリンクや広告と混同される可能性があります。
- 統合：ネストされたタブの背景として父親の選択した色を使用することで、サブタブがナビゲーションであることを明確に伝えますwithin選択したメニューオプション。
エレガント：
エレガンスはかなり主観的です。 私の意見は、エレガンスはシンプルさと細部への注意と調和しているということです。おまけとして、 Smashing Magazineのエレガントな再コンパイルサイト （このブログが大好きです）。
私はこのマルチレベルのタブ付きインターフェースが好きですが、それがあなたのニーズを満たしているかどうかはわかりません： 
もともとはここにあります： Designmodo Futurico UI Pro
このUIパターンはGithubでも使用されます。 
http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/ は、いくつかの良い点を示しています。水平方向のサブメニューに関しては、私は間違いなく同意します。私が現在取り組んでいるアプリケーションには1つあり、使用するたびに呪いをかけます。
少なくとも垂直方向のドロップダウンでは、ホバートンネルははるかに大きくなり、マウスの動きやクリックで同じレベルの精度を必要としません。