これはどのUIデザインパターンですか？ （記事の上部にある進行状況バー）
「Scroll Spy」は、通常、ユーザーがページを下にスクロールすると動的に変化する上部または側面のナビゲーションを指します。
スクロールスパイはダイナミックナビゲーションに固有のものだと思いますが、「スクロールプログレスバー」のようなものでもかまいません。
ここに、JSとCSSについてさらに洞察を与えるかもしれないフィドルがあります。
一部の人々がすでに指摘したように、その特定のサイトでこのUI要素を使用する方法は冗長です。値を指定せず、ネイティブブラウザのスクロールバー情報を複製するだけです。
この要素の使い方は間違っていると思います。私はこの影響をYouTubeで最初に考えたと思います。そして、それはajax呼び出しを介してロードされている新しいコンテンツがあることを示すために使用されました。あなたはこのjsプラグインをチェックすることができます：
http://ricostacruz.com/nprogress/
使い方は非常に簡単で、さまざまな目的に使用できます。ロードの進行状況の表示から、スクロールスパイとしての使用まで。
[〜＃〜]更新[〜＃〜]
もう少し強調するために、なぜ特定のスクロールバースパイが気に入らなかったのか-ゼロの値を追加します。それが提供する唯一の情報はスクロールバーの現在の位置だからです。アイキャンディーとしてのみ使用されます。
そう言って、私は追加したいのですが、より良い方法で行われるスクロールバースパイがあり、ページに有用な情報を追加します。私のお気に入りの例は discurce.orgで使用されているもの です。これは画面の下部にあり、スクロールが無限のページでは「ページ付け」のように見えます。最後のアイテムからどれだけ離れているかを示していますが、現在画面に表示されている最後のアイテムからではなく、このページで使用できる最後のアイテムからです。 別の例ですが、項目が増えています
これですばらしい仕事をしたと感じた2つのサイトは次のとおりです。
X1プラットフォームの場合。スクロールすると、バーの進行状況を確認できますが、バーが表示されているセクションのインジケータも追加されます。
次に、MapQuestがあります。
http://mobile.mapquest.com/#intro
これは垂直インジケーターですが、各ステップに移動すると、スライドのように実際に次のセクションが読み込まれるのが気に入っています。とてもいいものです。
それを「読書進捗インジケータ」のようなものと呼んでいます。
読んでいくと、徐々にフィードバックが返ってくるのが楽しいです。ただし、いくつかの問題があります。
スクロールバーが常に表示されている場合、要素は冗長です。ただし、使用していないときにスクロールバーを非表示にすることはますます一般的になっています。個人的にはこの傾向は好きではありませんが、ここで説明するパターンは、一目で記事を読むのがどこまで進んでいるかわからなくなるという事実を緩和するのに役立ちます。
また、ここに示されているインジケーター（mapquestを除く）は、進行状況バーの読み込みに非常によく似ています。私が実際にサイトを試してみて、スクロールにどのように反応するかを確認する機会がなかったとしたら、それは読み込みインジケータであったに違いない。それが実際にスクロールインジケーターであることに気づいたら、私はそれを試してみて、実際の読み取りがパターンによって妨げられます。
ただし、このパターンには多くの機会があります。どのように反応するかは完全に制御できるため、2つの記事が次々に表示されるページがある場合は、次の記事が表示されたときにページをリセットできます。また、ヘッダー、フッター、その他の無関係なコンテンツではなく、実際の記事にのみマッピングされるようにすることもできます。一部のサイトと同様に、見出しの一部を表示してナビゲーションパターンと統合できるため、スキミングしながら次のセクションにすばやく移動できます。グローバルな進捗状況とローカルな進捗状況を組み合わせて、現在のセクションまでの距離を示すこともできます。
デザインの曖昧さを除いて、私はそれが長い記事でうまく機能すると思います。たとえば、より短い段落とより多くの見出しを持つ技術文書では、見出しがリストされ、現在の位置が強調される、より伝統的なスクロールスパイナビゲーションパターンのほうが適切だと思います。
これまでに見たことはありませんが、ページの読み込みを示すプログレスバーとして使用されているものを誤って使用して、ページの進行状況を示しているようです。
IOS7から始まったと思いますが、他のサイトで見たことがありますが、このパターンはページの読み込みにのみ使用されており、非常に洗練されており、効率的です。
他の人が述べたように、これは冗長であるだけでなく、ほとんどのiOSユーザーがこれをページローダーとして解釈する傾向があるため、誤解を招きます。
それを使用することをお勧めしません。
モバイルビデオゲームで非常によく似たバーを見たことがあります。これは、次のレベルまでのプレーヤーの進行状況を示すために使用されていました。主な関心は、それが非常にコンパクトであることであり、主な欠点は、それが何のためにあるのかを理解する必要があることです（したがって、何が進行しているかについて曖昧さがなく、ユーザーがどこにいるかわからないまま生活できる場合にのみ使用してください）最初に情報を見つけるために）。
私は、スクロールバーがないモバイルブラウザーでこれを使用すると思いますが、デスクトップブラウザーの既存のスクロールバーとはかなり冗長です。
基本的には、単純な固定ナビゲーションオーバーレイの3列のレイアウトだと考えます。
http://bradfrost.github.io/this-is-sensitive/patterns.htmlhttp://www.adtile.me/fixed-nav/
しかし、私は固定ナビゲーションの上部にある赤いスクロール進行状況インジケーターが本当に気に入っています。これは素晴らしいタッチであり、ユーザーに配慮し、スクロールバーが永続的でないデバイス（iOS 7を見ている）で役立ちます。 ）。
レイアウトがおかしい（電話形式の見出しにパディングがない、サイドバーの周りの列が奇妙にシフトしているなど）があり、Beeサイトの他のページは（存在するとしても）多くはないようです。エントリのコンテキスト/ルートは何ですか？