web-dev-qa-db-ja.com

水平スクロールを明確にする方法は?

私が現在取り組んでいる現在のプロジェクトには、垂直にスクロールできるコンテンツのリストを表示する1つの画面があり、ユーザーがコンテンツの共有ボタンをタップすると、コンテンツを共有できる相手のリストが読み込まれます。

新しい画面/アクティビティを開いて人のリストを表示する代わりに、同じ画面の下部に人のリストを表示しました。リストには、人々の写真とそれらの写真の下に表示される名前が含まれています。リストは水平方向にスクロールできます。

問題-水平を明確にする方法がわかりません。これを行うにはいくつかの方法がありますが、それらのすべてに何らかの問題があります

Sol 1-画面に部分的に表示されている最後の項目[picture + name]を表示しますが、それはアプリのバグのように見えます。

Sol 2-右を指す矢印を与え、ユーザーがそれをタップすると、リストは左にスクロールしますが、自然ではありません。何かが水平方向にスクロール可能な場合、人々は水平方向にスワイプして水平方向にスクロールします

あるいは、人々が水平スクロールを理解していないかもしれないと私は考えすぎているのかもしれません。

20
B L Λ C K

部分的に表示されているアイテム(sol 1)のアイデアは、今日では獲得されたものだと思います(2010年にWindows Metro UIから戻ってきました!)。

私の意見では、バグが少なく見えるようにするには、アイテムのリストでボーダーでグラデーションを透明にするグラデーションを使用し、おそらく左側でも同じように実行する必要があります(そしてアイテムを囲むアイテムの「リング」を作成します)。 。

このようなもの: - enter image description here

34
Marco Tatta

マルコTの答えはあなたの最初のオプションのための優れたソリューションだと思います。 2番目の提案の解決策を提供したい

右向きの矢印を付けると、ユーザーがそれをタップすると、リストは左にスクロールしますが、自然ではありません。何かが水平方向にスクロール可能な場合、人々は水平方向にスワイプして水平方向にスクロールします

両方を提供しないのはなぜですか?デスクトップユーザーの場合、現在表示されている範囲の右側にアイテムを表示する矢印を右に配置することは完全に理にかなっています。ie左にスクロール。たぶん、下部エッジをホバーしたときにのみ表示される小さな水平スクロールバー/ハンドルが便利です。マウスでそれをつかんで、ボタンを押したままリストをすばやく移動できます。

タッチスクリーンデバイスの場合、スワイプが最も自然な操作です。ストリップの右側にある右矢印ボタンはリストが水平方向にスクロールすることを示しているので、リストをスワイプしてみることは理にかなっており、中級者から上級者までのユーザーがこの作品を見て喜んでいます。初心者のユーザーは、矢印ボタンを押すだけでよいでしょう。

テキストが明確であることを願っています。これは、両方の要素を示す下書きです(右矢印、およびマウスをホバーすると表示されるスクロールハンドル)。

enter image description here

18
CompuChip

私の推奨は、水平スクロールを使用しないことです。代わりに、左右のスワイプを使用してください。

一般的に言えば、ユーザーは垂直方向にスクロールすることを知っており、水平方向にスワイプすることを知っています。メタファーはページを下にスクロールし、ページのスタックを前後にスワイプします。

水平方向にスクロールさせる場合は、左右にスワイプするインターフェースを作成できる場合があります。次の写真の左端を右に、前の写真の右端を左にして中央揃えの写真を表示すると、スワイプする写真の小さなカルーセルがあることがわかります。

10
Simon White

その上にオーバーレイがあります。

または、背景の色を不透明度にして、色あせたようにすることもできます。

グラデーションもお勧めです。

1
Gaurav