デスクトップのタイムラインとモバイルのタイムライン

Question

タイムラインを使用して最新のアップデートを表示するデスクトップ、タブレット、モバイル向けの機能を構築します。タイムライン上の更新の量は予測できません。モバイルの場合、最新の更新が上になる垂直のタイムラインをすでに使用しています（モバイルアプリは縦向きモードでのみ使用できます。Webおよびタブレットバージョンの場合、これまで見てきたように、水平のタイムラインを使用する方が良いでしょう。ほとんどの場合、デスクトップのタイムラインは水平でしたが、これらは主に履歴を表すケースです。

したがって、水平方向のタイムライン上で最新の更新がどちらになるか。左か右か？そして、デスクトップの水平タイムラインが直面する問題は何ですか。予想される課題は、水平スクロールが直感的でないことです。

Devin · Accepted Answer

UXのすべてと同様に、コンテキストに依存します。たとえば、タイムラインに表示されるデータが支払い、または何かに加えた変更（アプリのファイルを変更したか、アバターを更新したとしましょう）の場合、最新のアクティビティが一番上になり、水平レイアウト。

ただし、タイムラインが履歴に関するものである場合は、最新のイベントを右端（または最後）に配置することをお勧めします。もちろん、西洋人向けのレイアウト、またはLTRの読み方に慣れている他の文化について言えば.

最適なオプションを考えるために、次のアプローチを適用できます。

アプローチ1

タイムラインが累積プロセスの表現であり、各イベントが前のイベントの結果である場合は常に、最初に前のイベントを表示してから、最後のインスタンスで終了するエクスペリエンスを「構築」することをお勧めします。明らかに、歴史はより直接的な例であり、他の社会科学と同じです。

this question から取られた以下の画像を参照してください

アプローチ2

一方、前のインスタンスは基本的に以前のステータスのログであるため、最後のプロセスが前のプロセスを置き換える場合は、最後のプロセスを最初に表示できます。プロファイルエディションは良い例です：以前のインスタンスは興味があるかもしれませんが（たとえば、上記のインスタンスに戻るため）、それらは実際には現在のステータスに影響を与えないため、最新のインスタンスにコンテキストを与える必要はありません。

タイムラインの設計中に学んだレッスン からの以下の例を参照してください：

アプローチ3

最後に、3番目に一般的でないオプションがあります。タイムラインが将来のステップを検討する場合です。これは、計画がある開発中のプロセスで発生する可能性があります。たとえば、アプリの構築：忠実度の高いモックアップを構築している段階にいるとしましょう。そうすれば、これと最終的なデプロイメントの間（およびさらに）のすべてのインスタンスが将来的にはありますが、以前のインスタンスは調査のようになります。ワイヤーフレームとスケッチは過去のものになります。この場合、最初の（現在の）スポットを中央にロードする必要があります。その後、将来のインスタンスは右側に配置され、前のインスタンスは左側に配置されます（RTL方向が使用されている場合は、逆になります）。

これを視覚的に展開する方法については、以下の画像を参照してください。

これはすべての水平レイアウトに適用されます。重要な部分は、現在のインスタンスを以前または将来のインスタンスよりも高いレベルで分類することです。これは、私が述べた3番目のケースを表していますが、最初のインスタンスから移動している限り、他のオプションにも適用されます

UIの実装とインスピレーション

ビジュアライゼーションアプローチのヘルプが必要な場合は、 Dribbleのタイムラインタグ を参照してください。これらはすべて、異なる方法で3つのケースに言及

Zoe K · Answer

目標が、最初からストーリー全体ではなく最新の更新を表示することであり、タイムライン全体にも焦点が当てられている必要があり、タイムラインが非常に長い場合は、縦のレイアウト、最新の更新を上に使用します。

ただし、タイムラインが短く、焦点を合わせる必要がある場合は、水平で最新の更新が右側になるようにします。また、水平スクロールは直感に反するものですが、カードのスタックを水平方向にフリックすることはできません。したがって、私はタイムラインをカードのスタックとして扱い、各カードは1つのタイムラインポイントを示します（ワイヤフレームを参照）。このようにして、キーポイントのコンテンツのために十分なスペースを確保します。