web-dev-qa-db-ja.com

有効なスティッキートップバーの基準

すべてのデバイスでデザインに反応するウェブサイトがたくさんあります。CSSスタイルでユーザー[、デザイナー、開発者]が努力したと言えます。彼らは、サイトの最上部にあるバナー/ヘッダー/メニューバーを使用しています。厚みは35px以下、その他は50px以上あります。検索フィールドがあるものもあれば、ないものもあります。一部にはメニュー項目があり、他にはロゴがあります。

Im not スティックトップバーをいつ使用するべきか、いつ使用すべきでないかを尋ねる。私はそれのためにトップバーの基準がどうあるべきかを尋ねていますスティッキー- "認定"。彼らは、モバイルデバイス用ではないトップバーはすべて適格であると言っていますが、スティックトップバーを使用した優れたモバイルデザインを見てきました。接着する前にまず薄くするように言う人もいますが、厚いバナーが接着される場合もあります。

厚いバナーがある場合がありますが、下にスクロールすると、上部の端に接着して薄くなります。それでも、スクロールしたときに接着されて縮小されない厚いバナーがあります。それでも、接着されていない厚いバナーがいくつかあります... 3番目のバナーの開発者が粘着性にならないように、3番目のバナーにない最初の2つのバナーは何ですか?

デザイナーがトップバーを固定する理由がすべてある場合(たとえば、重要なナビゲーションリンクが含まれているなど)であっても、デザイナーはのためにそれをそのままにします基準」

5
Gideon

基準はさまざまであり、通常の答えは「依存する」です。私はこの原則に従っています

ユーザーがスクロールまたは複雑な操作を行ってPAGE:AのUI:Aに到達し、操作してPAGE:Bに移動する必要がある場合は、UI:Aをスティッキーにします。

その構成、および起源は常識です。

しかし、medium.com のようなサイトには、この粘着性のあるトップバーのバリエーションがあります。ユーザーが上にスクロールすると、サイトは上部のバーを押して表示し、固定します。もう一度スクロールダウンするか、その寿命が続くまで、つまりタイムアウトイベントが発生するまで、スタックしたままです。

メディアはブログなので、ここでのコンセプトは機能します。コンテンツは下に流れ、ユーザーが上にスクロールすると、ユーザーはメニューを探しているか、単にスクロールして過去にスクロールしたものを見やすくしていることがわかりました。それは認知科学の非常に良い使い方です。

これがあなたが探しているものを見つけるのに役立つことを願っています。

1
Rayraegah

スティッキーヘッダーには、いつでもどこからでもアクセスする必要があるWebサイトにとって非常に重要なツールまたは情報を含める必要があります。

これは、Googleでの検索とその設定、オンラインバンキングのウェブサイトでの金額、Twitchで現在実行中の人気のあるライブストリームで、視聴するものを検索している場合があります。

たとえばFacebookやTwitterは、スティッキーヘッダーを使用してコンテンツを作成する機能を提供しています。これは、コンテンツが適切に機能するために必要なため、存続に重要です。

twitterheader

モバイルデバイスでそのスペースを節約することはできませんが、通常のダウンスクロールではバーを非表示にして、ユーザーが少し上にスクロールした場合にのみバーを表示することができます。これは、あなたが思っているよりもモバイルユーザーにとって自然なことです。

facebookmobileheader

2
BlueWizard