web-dev-qa-db-ja.com

デスクトップアプリケーションのラテラル、フォワード、リバースナビゲーションの例

レイヤーベース ナビゲーションとの関連性についてマテリアルデザインを研究しています。

ナビゲーション方向アプリの情報アーキテクチャに基づいて、ユーザーは3つのナビゲーション方向のいずれかに移動できます。

Lateralナビゲーションとは、同じ階層レベルの画面間を移動することです。アプリの主要なナビゲーションコンポーネントは、その階層の最上位にあるすべての目的地へのアクセスを提供する必要があります。

Forwardナビゲーションとは、連続する階層レベルの画面間、フローのステップ間、またはアプリ全体の移動を指します。フォワードナビゲーションは、ナビゲーション動作をコンテナー(カード、リスト、画像など)、ボタン、リンク、または検索を使用して埋め込みます。

Reverseナビゲーションとは、時系列で(1つのアプリ内または異なるアプリ間)または階層的に(アプリ内で)画面を逆方向に移動することを指します。プラットフォームの規則により、アプリ内のリバースナビゲーションの正確な動作が決まります。

これを実証するモバイルおよびデスクトップアプリのオンライン例を知っている人はいますか?

どこにでもあるモバイルアプリのデザインでそれが見られます。しかし、これらのレイヤーがモバイルレイアウトとデスクトップレイアウトの間でどのように変換されるかは、例を見つけることができません。

更新:
モバイルベースの例として、Hoang NguyenのBook Loverアプリを追加したいと思いました。 enter image description here

これらのナビゲーションはレイヤーであることがわかります。この場合、戻る矢印は、この本の詳細レイヤーの背後にあるページへの「上向き」のナビゲーションです。 PWAの登場により、ネイティブではないデザインでこれがさらに多く見られるようになります。

では、この例はどのようにデスクトップサイズの画面に変換されるのでしょうか。

更新2
Googleの仕様で説明されているように、レイヤードナビゲーションはネイティブのモバイルアプリやインストール可能なウェブアプリ向けであり、ブラウザーの[戻る]ボタンや[進む]ボタンが存在せず、私たちの開発者がそれらを統合する責任があると私は信じ始めています。

1
Ben Racicot

これは2ページに分割される可能性があります。書籍のリストのカテゴリページと、書籍の詳細の単一ページビューで、左上にある戻るボタンがあります。

別の本にすばやくアクセスするために、詳細ビューの下部/上部にあるカルーセルとしてカテゴリスクロールコンポーネントを維持できます。これは、関連する本や顧客が購入した本を示すために使用できます。

2ページのアプローチの良い例は、本のiTunesチャートページです。

カテゴリビュー

enter image description here

詳細ビュー

enter image description here

別のオプションとして、すべてを同じページに表示したい場合は、アコーディオン( https://jqueryui.com/accordion/ )を使用して本のコンテンツを表示することができます。

デスクトップでのこのタイプのパラダイムの良い例は、Netflixです。

カテゴリビュー

enter image description here

詳細ビュー

enter image description here

1
David Saunders

ナビゲーションは通常、アプリケーションの情報アーキテクチャに基づいて設計されているため、さまざまな種類の対話(マウス、タッチなど)によって提供されるより複雑な情報階層により、デスクトップアプリケーションで使用される例はたくさんあると思います。 、キーボード)、インターフェース設計に対応するためのより大きな画面スペース。

最も一般的な例は、(プロセス内の定義されたステップを介した)古典的な「ウィザード」スタイルの順方向および逆方向ナビゲーションと、フローから(保存またはキャンセルによって)ジャンプして別のプロセス(横方向のナビゲーション)。

enter image description here

これは、モバイルアプリケーションとデスクトップアプリケーションの両方で使い慣れたeコマースまたはショッピングカートの機能(ルックアンドフィールは類似)を備えたWebベースのアプリケーションに似ています。

enter image description here

専門分野で使用されるような複雑なデスクアプリケーション(UXデザインもその1つである)には、これらのタイプのナビゲーションパターンを組み込んだ非常に特殊なワークフローがあります。たとえば、 'から特定の機能を選択できるように機能するデザインツールツールバーのスタイルのメニューパネル。階層内を移動し(通常はホバーするか、ショートカットキーを使用して)、同じ方法でメニューを前方または後方に移動できます。

enter image description here

1
Michael Lai