web-dev-qa-db-ja.com

横スクロールはモバイルビューで使用できますか?

コンテンツボックスのグリッドを含むページのレスポンシブビューを構築する場合、水平スクロールを使用することは良い解決策ですか?ヘッダー、コンテンツのメイン列(680px)、サイドバー(300px)のあるページレイアウトを想像してください。サイドバーには、メンバー、ウィジェット、タグクラウド、関連トピックなどのウィジェットがあります。モバイルビューでは、これらのウィジェットを配置するのが目的です。上部(ヘッダーの下とコンテンツの上)で、ウィジェットの水平スクロールを使用します。

1
Eran Ayalon

Example Scrolls メニューの水平スクロールの使用に問題はありません。そうは言っても、要素をスクロールする機能が明らかでない場合、一部のモバイルアプリで問題が発生することに気づきました。水平スクロールは、ユーザーがモバイルで行うことを想定しているものではないため、メニューがスクロール機能をユーザーに通知する方法に注意する必要があります。

ユーザーが水平スクロールを見つけるのに役立ついくつかのトリック:

  1. 一部のウィジェットをオフセットして、それらがEdgeを越えて拡張されるようにして、右側に非表示の要素がさらにあることは明らかです。
  2. 最初にアプリをロードしたとき、または常にロードしているときに、スクロールバーをオンボーディングアニメーションとして簡単に表示します。
  3. メニューをわずかにスクロールし、ページを初めてロードしたときにメニューを元の位置に戻す、別のオンボーディングアニメーションを使用します。
1
Mike W

何故なの?コンテキストが非常に少ないため、知るのは困難です。

ページ内を移動する主な方法として水平スクロールを使用しないでください。垂直スクロールよりも手間がかかります。

しかし、サイドナビゲーションやページの一部については、これを使用して最小のビューポートでスペースを確保してみませんか?

本当に、もっと洞察を得たいなら、質問を書き直すをすべきです。

1
Leths

うまく設計されていれば、ユーザーは問題なく使用できると思います。

しかし、もっと自然になるでしょう。

1)コンテンツボックスの幅をモバイル画面の100%に配置します
2)スワイプを左右に実装し、スワイプで次または前のボックスに移動する
3)左右のスワイプが上部のどこかにあることを示します
4)スワイプ用の素敵なアニメーションを配置します

1
xul