エリアにスクロールバーがないときに、そのエリアをスクロールできることを示す最良の方法は何ですか?


13

私が考えることができた唯一のことは、上の「フルメニューを見るためにスクロールする」ということでした。人々がそれをしている他の方法は何ですか?


3
矢印?コンテキストは非常に重要です。サンプルを投稿できますか?
スコット

2
なぜそれが必要なのですか?モバイルとOSXにはスクロールバーがありません。人々は混乱していません。
bjb568

2
他の誰かが修正できない問題であるため、回避する必要があります。
モーガン

@ bjb568:特定の方向にスクロールできることに気付かなかったいくつかのアプリを使用しました。画面が一方向または他の方向に見えるものの一部を切り取った場合、それは明らかですが、時々物事が画面の境界線にぴったり合っており、ユーザーはスクロールできる/する必要があることに気づきません。たとえば、新しいFacebookアプリを横にスクロールできることに気づくまで少し時間がかかりました。
Mooingダック

@MooingDuck Facebookはカウントしません、それはがらくたです:Pしかし、ええ、あなたは混乱が言ったことのようなものを持っている必要があります。
bjb568

回答:


9

ユーザーは、ユーザーインターフェイスの物理的な相対性とよく関係しています。つまり、インターフェイスを自然に感じたり、コントロールを明確にしたい場合は、物理的なリアリズムの外観を使用してそれを行うことができます。機能を明確にするためには、常に適切なアイコンも必要です。


スクロール領域は物理的にどのように見えますか?シンプル!外枠の下のコンテンツのレイヤー。その外観を実現するには、外側のレイヤーにボックスシャドウを使用します

  • ヒント:CSSのボックスシャドウを作成する場合、複数のシャドウをコンマと一緒に配置できます。良い効果を得るには、強い遠い影と明るい遠い影を使用します。軽いタッチにはRGBA(不透明度コントロール)を使用してください!

次に、スクロールバーなしで思い浮かぶベストプラクティスは、スクロール可能なコンテンツを持つフレームの端にクリック可能なスクロールボックスを付けたJQueryを使用し、内部要素がボックスの外側に突き出たときにボックスが表示されるようにすることです4つの方向のいずれか。

デフォルトでバーを非表示または非表示にする場合は、スクロール領域にカーソルを合わせるかタップするまで非表示または軽く不透明にしてから、スクロールメカニズムを表示します。

  • 簡単な使用:ボックスは、ホバーイベントで軽くアクティブになり(子要素のスクロールを開始し)、マウスダウンで完全にアクティブになります。

デモは次のとおりです。

ここに画像の説明を入力してください

長いスクロール領域の場合、この方法では加速スクロールが必須です。そうしないと、ユーザーがコンテンツをすばやくナビゲートする能力が阻害されます。


これをいじった後、私はJQueryプラグインを作成し、このプラクティスを次のWebアプリに使用できると思います。


6

最初に表示されるデフォルトのコンテンツの下部に、部分的にしか表示されないアイテム(垂直スクロールを想定)が表示されていることを確認します。これにより、さらに下にあることがユーザーに通知され、ユーザーはそれを表示/表示できます。


Windows(/ Phone)8はこれをかなり水平に頻繁に行うようです-タイトルが利用可能な水平スペースより多くを占める場合、左または右にスワイプしてより多くのオプションを表示することをお勧めします。
Katana314

1
おそらく、下部にわずかなフェードアウト/不透明度の勾配があり、それ以上であることを示します。
wchargin

4

ここに私がしようとするものがあります:

コンテンツの一部を覆うソフトなグラデーション。これは、さらに以下があることを示しています。さらに、もちろん小さな矢印を追加できます。

ここに画像の説明を入力してください


ありがとう-私は他の答えをチェックして、繰り返さないようにしました。
ベンテ

2

あなたがそれをどの程度明白にしたいかは、聴衆が誰であると思うか、そして文脈が何であるかによって決まります。

矢印やグラフィックスなど、折り畳みを超えて継続する通常の経路探索技術は、ユーザーの旅に役立ちます。または、多くの単一ページサイトが使用するアンカーメニュー/ナビゲーションシステムを使用することもできます。

最も露骨でandい解決策は、ユーザーにさらにコンテンツをスクロールダウンするよう通知し、アクターがスクロールすると非表示にするポップアップです(Cookie通知スタイル)。


1

もう1つのオプションは、要素の上にカーソルを置いたときにカーソルを下方向を指す移動矢印などのスクロールを示すもの、または「スクロールしてもっと読む」ことを示すものに変更することです。

もちろん、これはデスクトップでのみ機能します。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.