地図上で移動した方向を表示するにはどうすればよいですか？

Question

ユーザーからの位置を示す地図があります。時々これらは疎（500メートルごとに1つの場所）であり、時々（100メートルごとに多くの場所）密になります。次のように、それらを地図上にプロットします。

ただし、私のアプリケーションでは、それらは常にAからBへのパスではありません。時々、それは家を出て、ドライブに行き、その後再び戻ってくる人です。これにより、ルートは基本的に円になります（ルートのホームがアウトのルートと同じになることもありますが、完全に重なることはありません-道路の別の側）。進行方向を地図上に表示したいのですが。

1つのオプションは矢印を描くことですが、常に可能であるとは限りません。このことを考慮：

私が密集した地域にいる場合は、many矢印を描画します。これらの矢印は重なり、非常に乱雑になります。または、密集した領域に矢印を描画しない場合、矢印の描画間に非常に長い距離がある可能性があります。

この種のベストプラクティスはありますか？方向性が特によく伝わるアプリは？

Shreyas Tripathy · Accepted Answer

更新：タイムラインのようなビューの場合（ポイントAからBだけではありません）

タイムラインビューだけのGoogleマップの例を、さまざまな旅行を色で表すマップトラックに加えて説明します。ただし、ここで他のユーザーが指摘したように色覚異常を考慮していないため、色の表現がはっきりしません。また、経路が重なって視覚的に表現しづらい場合も無効になります。

ソリューション-地図の横（またはモバイルデバイスの下部）にタイムラインを示し、方向を明確に示します。

これは、おおよその外観です。ポイントは、方向の変化またはよく知られている場所に依存しているか、方向の変化を明確にするために平均化された場所に配置されている可能性があります

他のシナリオの場合

Googleマップでは、青い点を使用して現在の場所を表し、赤いピンを使用して青い点=開始点および赤いピン=終了点方向を明確にします。

Uberは色redとgreenを使用して、Green = Pickupおよび赤=ドロップオフ

類似したものを使用するか、FromやToなどの表記を使用して方向を表すことができます

maxathousand · Answer

アニメーションを使用する

主な使用例がデジタルデバイスであると想定すると、アニメーションを利用してもUIに混乱が生じることはありませんが、移動方向を効果的に伝えることができます。

たとえば、一部のWindowsロードアニメーションのように、パスを最初から最後まで移動する短いパルスを表示できます。

または、次の例のように、目的地に向かって移動する微妙なパターンを使用することもできます（テーマ/設定に合うようにパターンを選択します）。

さらに、スクリーンショットが必要な情報を伝えられるように、開始と終了にラベルを付けます。

Sam Weaver · Answer

別のオプションは、パスにグラデーションを使用することです。すぐにわかるとは限りませんが、継続して使用すると、ユーザーはこの傾向に気付くでしょう。この例はLyftです。

example

Roger Attrill · Answer

1つのエッジが暗くなる太い線を描きます。ダークエッジを運転する道路の脇にしてください（国によって異なります）。

その場合、データのスケール、ズーム率、データのスパース性は関係ありません。適切な太さで線を引く限り、常にどちらの側を走っているのかがわかるので、進行方向がわかります。

例（米国の道路の右側の運転に基づく）：

編集：コメントに示されているように、および反対投票:)で判断すると、ユーザーがそのような装飾が移動方向を示していること、および矢印が方向の識別に役立つことをユーザーがすぐに認識できない場合があることに同意します。

しかし、それはまったく新しいアイデアではありません。英国では、人気のあるA〜Zの町の地図で、より重要な道路に同様の装飾を使用して、一方通行の道路とその移動方向を示しています。進行方向は赤い矢印で示されていますが、また道路の片側が他の側よりも大胆に描かれている-厚い方のエッジは、運転する道路の脇にあります（英国では左側）。