web-dev-qa-db-ja.com

ナビゲーションバーはサイドバーにフェードインしていますか？

いくつかの人気サイトは、ナビゲーションバーを左側に移動しています。これは主に、画面サイズの小さいポータブルデバイスとワイドスクリーンモニターの進化によるものです。ワイドスクリーンモニターが標準になりました。サイトの左側にナビゲーションバーがある場合は、タブレットまたは携帯電話のバージョンのように見えます。このようにして、ユーザーは携帯電話やタブレットで慣れているようにサイトをナビゲートできます。 iOSプラットフォームには、iPad用のUISpliViewとiPhone用のフライアウトナビゲーションメニューがあります。
Androidプラットフォームには、タブレット用のマルチペインレイアウトと、左側からのカスタムフライアウトナビゲーションメニューがあります。サイドバーにナビゲーションバーがあると、より多くのコンテンツが表示されますユーザーは、どこにいてもメニューにアクセスできます。

  1. ナビゲーションバーがサイドバーにフェードインしていると本当に思いますか？
  2. あなたはどちらが良いと思いますか、そしてその理由は？
  3. この主題について私が読むことができるいくつかの良い習慣/記事？

失礼します！

携帯電話やタブレット版のような新しいFacebookテーマの例。もう1つの例はgoogle +です。 enter image description here

タブレットのAndroid enter image description here

タブレットのiOS
desc

Androidの電話
enter image description here

iOSの電話
enter image description here

誰かがこれらの画像を1つの画像に変換できますか？美しいレイアウトで？私はLinuxで実行しているので、フォトショップはありません。

navigationlookandfeel
5
user22847

サイドバーは多くの理由により優れています。

それらは新しいものではなく、しばらくの間ここにあり、特にコンテンツと構造の豊富なインターフェース（Gmail、MS OutlookまたはほとんどすべてのメールまたはマルチPIMアプリケーション、Total Commander、Forkliftなどのファイルマネージャーのフォルダーリスト、または組み込みのWindowsでも使用されています） ExplorerまたはFinder、iTunes ...）。

最近、このアプローチを使用するインターフェースが増えています（特にレスポンシブデザインの時代では、インターフェースを複数の画面サイズ、解像度、および方向に調整する必要があるため、インターフェースの調整が必要になります）。私たちが使用するサービスは、「もっと」を同時に提供する傾向があります（一般化されていることはわかっていますが、「もっと」はユーザーがサービスを使用するためのドライバーであり、この「もっと」はどこかにパックする必要があります）。

これを念頭に置いて、サイドバーがほぼ完璧であり、ますます人気が高まる理由は次のとおりです（実際、これらのいくつかは既に質問で述べています）。

  1. 彼らはより良い垂直方向のスペースを使用することができます：

    • 横画面の向き（ほとんどのデスクトップ画面、横向きのタブレット）の場合、特にコンテンツ自体に960pxグリッドで十分な場合は、コンテンツの側面に使用する多くのスペースがあります。これらのWebサイトはフルスクリーンになり、サイドバーまたはダブルサイドバー（Facebookなど）の追加スペースの一部を使用できます。

  2. 適切なアプローチで、それらはほとんど向きを証明します：

    • それらは幅方向に調整可能です-Wordpressバックエンドのように、サイドバーを拡大/縮小できます（縮小されている間はアイコンのみに縮小されます）。

    • それらは完全に非表示にすることもできます-一部のサイト（モバイルのWikipedia.comなど）またはアプリ（iOSのFacebookアプリなど）は同じアプローチを共有します。スワイプジェスチャーまたはアイコンのタップでサイドバーを表示/非表示にできます。

  3. 内容に柔軟性があります。

    • インターフェースを完全に再設計することなく、トップレベルの構造を簡単に拡張できます

    • サイドバーの項目の制限は、水平メニューの場合よりもはるかに高いです（実際には、3つの制限のみがあります：インターフェース全体の高さ、折りたたみ、適切な数の項目）。

    • この制限は、よりわかりやすい名前を付けても減少しません（水平メニューを使用した場合は減少します）。

    • アイテムをセクションにグループ化することで、サイドバーのコンテンツを簡単に整理できます

    • これらのセクションはアコーディオンスタイルで拡張できます。これにより、サイドバー内により多くのアイテムを詰め込み、混乱を制御できます。

  4. それらは機能性をよりよく通信することを可能にし、より簡単に対話することができます：

    • サイドバーで関数に名前を付ける際に、よりわかりやすくすることができます。これは、トップバーナビゲーションではトリッキーになります（もちろん、これらのツールチップを使用できますが、ホバー状態をトリガーできないため、タッチデバイスでは機能しません）。

    • 垂直方向と水平方向の制限が少ないため、クリック/タップ可能な要素を大きくすることができます。

いくつかのリンク：

4
Dominik Oslizlo

サイドバーの「ナビゲーション」は、より抽象的な概念的な意味で、70年代から存在しています。 enter image description here

初期の慣習では、ウィンドウペイン（またはパネル）がそれらのペインのコンテンツをその右または下に制御していました。これは理解しやすく、すぐに習得できました（私はそれを「直感的」と呼びたくなりますが、それは実際には適切な言葉ではありません）。

AppleのGUIをSmalltalk-80の（上）から派生させた場合、ほとんどの場合、ウィンドウ内に複数のペインを配置することを排除したため、ウィンドウ内のナビゲーションの抽象的な概念=現時点ではメインストリームコンピューティングにはなりませんでした。しかし、すぐにウィンドウ内の複数のペインの有用性が（再）理解され、これが普及するにつれて、ウィンドウペイン（またはパネル）の規則が上向きのペインによって制御されるようになりましたまたはそれの左側は再び現れた。

したがって、メインコンテンツの上または左側にWebページのナビゲーションを配置することは、十分に確立された規則であり、両方の一般的なレイアウトが適切に機能します。ナビゲーションを左側に配置すると、メインコンテンツの縦方向のスペースが確保できるという利点がありますが、ナビゲーションを上部に配置すると、メインコンテンツの幅が広くなります。

0
obelia