web-dev-qa-db-ja.com

モバイルアプリの日付範囲ピッカー

現在のプロジェクトでは、日付範囲でリストをフィルタリングしたいと思います。

範囲を簡単に選択できるようにインターフェイスをどのように設計すればよいかわかりません。私の最初のアイデアは、次のように実装することでした:

possible solution

ソース: http://analyticsapp.com |ターゲットデバイスはiPhoneである必要はありません

ただし、ほとんどの場合、ユーザーは正確な日付を知らないため、正確な日付範囲は必要ありません。

いくつかの使用例と制限:

  • 日付が現在から離れているほど、結果は不正確になります。 (例:4月7日か4月14日かは関係ありませんが、2002年の1月5日か2002年の1月25日かは関係ありません)
  • デフォルトの範囲:現在<->現在+ 30日
  • 1週間の精度で十分です

最終的に、次のような(疑似)対数目盛の範囲スライダーを探しました。

  • 12か月前
  • 6か月前
  • 2ヶ月前
  • 1ヶ月前
  • 3週間前
  • 2週間前
  • 1週間前
  • プレゼント
  • [同上]

このような日付範囲ピッカーをどのように実装しますか?あなたは古典的な解決策に固執しますか、それとも別のアプローチを知っていますか?

6
SecStone

それはかなりいい挑戦です。あなたが示す例は、正確な開始日と終了日を選ぶのに最適だと思います。私見それは日付範囲ではうまく機能しません:

  • 最大8回のクリック(クリックの開始日、日、月、年+日付を設定するためのスクロール)
  • 再び変更するには、多くのクリックが必要です
  • 日付範囲が数年前であれば正確な日付は関係ありません
  • 正確な日付ピッカーには「インスピレーションを与える要素」もありません。つまり、「過去30日間」などの範囲の例があります。

レンジスライダーを使用したソリューションは非常にうまく機能すると思います。課題は

  1. 正確な日付を選択した場合、ずっと前の時間枠ではより正確な結果が返されないことを明確にします
  2. 正確な日付とより大きな時間枠の両方を簡単に選択できるように、スライダーの相互作用を設計します
  3. 過去と未来の時間枠に対処する

多分2つの異なるインターフェースが役立ちますか?ユーザーは、時間枠を使用するか正確な日付を使用するかを選択し、適切なコントロールを表示します。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

決してこれが最終的な解決策ではありませんが、おそらくこれを解決するためのあなたや他の人たちのインスピレーションになるかもしれません。

7
greenforest

問題は、あなたが述べたユースケースでは、1つのクエリ内で2つの異なるレベルの粒度になる可能性があることだと思います。ユースケースを理解している場合、クエリは(たとえば)2002年1月から2012年3月27日まで可能性があります。開始日の精度は月単位で、終了日の精度は日単位です。

対数目盛は、終了日が固定されている場合(つまり現時点)でのみ機能すると思います。 2つの対数スケールを使用すると、次のような結果になります。

開始日: 6か月前

終了日: 2週間前

これはかなりわかりにくい構造だと思います。

私の考えでは、最も使いやすい方法は、従来の日付コントロールを使用することであり、ユーザーはboth開始日と終了日。

ただし、実際の結果セットはファジーマッチングシステムを使用します。たとえば、ユーザーが2002年1月12日から2012年3月27日までを入力した場合、その期間の一致が返されますplus 2002年1月の残り(または過去のその時点で適用可能な任意の精度レベル)。

選択した特定の範囲外の一致については、「2日12/01/02の前に」のようなメッセージが含まれる可能性があります。

Advantage:サーバー側のすべてのレベルの粒度に簡単に適応できるため、ユーザーは混合粒度の概念に頭を悩ます必要はありません。

欠点:ユーザーが2002年1月14日exactlyを非常に慎重に選択すると、フラストレーションが発生する可能性があります。その月の。

2
Alex