web-dev-qa-db-ja.com

垂直タブのこのプレビューパターンは何と呼ばれますか?

Mac OSXのシステム環境設定では、次のプレビューパターンが表示されます。左側のオプションのリストは垂直タブとして表示され、選択したオプションごとにプレビューウィンドウが表示されます。この特定のケースでは、このオプションを明確にするためにビデオが再生されます。

Mac OSX System Preferences screen

非常に厳密な間隔で情報を表示できるように、グループ化された複数の機能を表示するために、同じパターンが別のWebサイト(アトラシアン)で使用されているのを見ました。

同様のパターンを使用したいので、これらが通常の垂直タブなのか他の何かなのか知りたいです。

4
Levano

オンラインで見てみると、これらは確かに垂直タブであるように見えますが、外観と機能は標準の垂直タブと同じです(チェックボックス機能が追加されています)。

いくつかの異なる例については、以下を参照してください:- https://www.w3schools.com/howto/howto_js_vertical_tabs.asp - https://bootsnipp.com/snippets/featured/simple-vertical -tab

クリック/ホバーしてコンテンツを表示する必要があるという事実私は少し灰色の領域を見つけました:

「インターフェース設計では、タブ付きドキュメントインターフェース(TDI)またはタブは、複数のドキュメントまたはパネルを単一のウィンドウ内に含めることができるグラフィカルコントロール要素であり、ドキュメントのセットを切り替えるためのナビゲーションウィジェットとしてタブを使用します。」 ウィキペディア

NNg は、タブにするためにクリックする必要があることを示しているようです。

これには多くの定義があるようです。

上記の参照と例に基づいて、これは垂直タブであると主張します。これは、クリックではなく、垂直タブと同じ機能とUXをすべて実行しているためです。

2
UIO

これはマスター/詳細パターンに似ており、アイテムのリストが画面の半分に表示され、アイテムが選択されると、その詳細が残りの半分に表示されます。ただし、リスト内の項目数は固定されているため、この例はおそらく単なる垂直タブです。マスター/詳細は、アイテムの長い動的なリスト(メール、ドキュメントなど)がある場合により一般的であると思います。

ここにいくつかの詳細があります: https://docs.Microsoft.com/en-us/windows/uwp/design/controls-and-patterns/master-details

0
cdrini