web-dev-qa-db-ja.com

レスポンシブデザインでタイムラインを使用しますか?

私はすでにこれに対する答えを知っているかもしれませんが、これについてのフィードバック/意見をお願いします。現在、線形水平タイムラインを使用するレスポンシブデザインを作成しています。これはデスクトップからタブレットでは問題なく機能しますが、モバイルでは非常に小さなスケールに縮小されます。

デスクトップ: http://monosnap.com/image/Cy5Iu4tN67dz3zUgNzZ1PXgik.png

レスポンシブデザインを使用した同様のタイムラインを次に示します。 http://monosnap.com/image/tyhdyZlMtXrP2TY8fZweouN78.png

ご覧のとおり、非常に小さいため、使用できません。

2つのモバイルアプリで、ユーザーがスクロールして残りのタイムラインを表示する必要がある、より大きなタイムラインを導入していることがわかりました。

http://monosnap.com/image/UsHIraT6SwCGn4S34pPRDynWZ.png

http://monosnap.com/image/hwuekZxnckLvsuidwjnJ3rgIX.png

携帯電話のサイズになったら、右にスクロールするのが良いオプションだと思います。携帯電話に収まるが、何が起こっているのかほとんど理解できない非常に小さいものに有効な引数はありますか?

ありがとう

7
Xtian

あなたが見ることができる2つのオプションがあります:

  • ユーザーが下にスクロールしてスキャンできるように、水平タイムラインを垂直タイムラインに変換します。水平スクロールは機能しますが、非常に直感的ではありません(タイトルが明確に区切られた個別のセクションがあり、連続画像がうまく機能しない場合に機能します)。したがって、垂直スクロールのタイムラインが役立つ場合があります。

  • 要約されたバージョンが得られるように、5分ごとではなく10分や15分などの詳細を表示したくない場合がある、タイムラインの要約バージョンを表示する必要があります。

2
Mervin

タイムラインを状況に応じて表示し、ユーザーがタイムラインの焦点を合わせたい部分を選択して、それを詳細に表示できます。

SEがレピュテーショングラフで行う処理に沿ったもの: enter image description here

タイムライン全体を水平方向にユーザーに表示し、クリックしてドラッグするか、入力ボックスを提供することでユーザーにセクションを選択させることができます。

1
rk.

大きいのがいいです。ビッグは読みやすいです。

ユーザーに何をする必要があるかをユーザーに示すと、ユーザーフレンドリーになります。ジェスチャーを使ってください。

ユーザーに何をすべきかを指示する何らかの種類の指示を追加し、その機能を使用できるようにする必要があります。

responsive

1
Rosie