web-dev-qa-db-ja.com

モバイルデバイスでスクロールできることを示す最良の方法は何ですか?

私は、モバイルデバイスでユーザーが<div>

IPhone/iPadにはスクロールバーがないため、スクロールできることを示すインジケーターが必要です。これは微妙ですが、アイデアをうまく​​提示する必要があります。

25

これらは私が見つけた一般的な推奨事項です。これはApple製品(Mac OS X、そして私はiOSも信じている))で行われていることですが、一部はAndroidでも行われています。

  • スクロールバーは、スクロール可能なパネルが最初に表示されてから消える瞬間に表示されます。
  • ユーザーがスクロール可能なコンテンツに触れると、ユーザーが指を離すまでスクロールバーが表示されます。
  • スクロール中は、スクロールバーが表示されます。コンテンツが「スロー」された場合、スクロールバーは慣性がなくなるまで残ります。
  • また、スクロール可能なコンテンツに触れるだけで、コンテンツが少し移動して、スクロール可能であることを示します。
  • 他の投稿で説明されているように、コンテンツの一部が部分的に表示されるようにします(たとえば、テキスト行の上部のみ、または画像の一部など)。

あなたは本 Brave NUI World を見てみてください。これは、自然なユーザーインターフェースでいくつかの素晴らしいことを行うことができます。この質問は、この本で扱われているポイントの1つです。

さらに、GmailのラベルとGoogleリーダーのフィードのリストも確認できます。スクロール可能なリストの上部と下部のボーダーは、スクロール可能なコンテンツの上にいくらかの影を落とし、ボーダーが何かの「上部」にあり、読むべきものがまだあることを示唆しています。このようなもの:

Google Reader

または、シャドウを使用する代わりに、上下にスクロールしたコンテンツをフェードアウトすることもできます。どこで見たのか覚えていませんが、もう一度探します。

16
Padrig

通常、彼らは、他にも何かがあることを理解させる部分的なコンテンツがあることを確認することでこれを解決します。物語が終わらない場合、ユーザーはもっとあると思い込み、スクロールしようとします。文字通りに、そして抽象的に話をしてください...

5
Aadaam

私は最近同様の質問をしました( モバイルデバイスでワイドテーブルを表示する際の標準は何ですか? )訪問者に、モバイルデバイスは横にスクロールできます。

私たちが行った最終結果は、タッチスクリーンデバイスに「ぼやけたグラデーション」エッジを使用したことです。このstackexchangeユーザーの例については、JeffHが次のリンクを投稿しました: http://filamentgroup.com/lab/sensitive_design_approach_for_complex_multicolumn_data_tables/ そして、最初にスクロールしてください私が話している「ぼやけたグラデーション」の種類を確認するための2つのスクリーンショットの例。

次に、タッチスクリーン以外のデバイスでは、ユーザーにタブを付けるために二重矢印(>>または<<)を使用しました。ここまでは順調ですね。

2
rlsaj