1か月の予算画面-月の初めか遅いかを考慮する必要があります
現在、予算管理モバイルアプリに取り組んでいます。アプリにはカテゴリのリストを表示する画面があり、カテゴリごとに次の情報が表示されます。
- ユーザーがカテゴリに割り当てた支出金額
- 今月カテゴリに実際に費やされた金額
- 彼が割り当てられた金額より多かれ少なかれ費やしたかどうかの指標
この画面の目的は、ユーザーがすべての異なるカテゴリの概要を確認し、特定の月のいずれかのカテゴリで支出超過か支出不足かを認識できるようにすることです。
非常に大まかなイラスト：
私が追加しようとしているのは、月の初めから経過した時間のある種の指標です。なぜなら、月の終わりに近づいていて、ユーザーがすべての予算を使い切っていない場合、それは彼が過剰支出をしないという彼の目標に近づいているので、それは良いこととして示されるべきです。
一方、月初だけの場合は、予算制限にまだ達していないのに、月が始まったばかりなので、表示が異なるはずだと思います（ユーザーがまだ必要であることを知っているため）その月の残りの時間は使いすぎないように注意してください）。
このような情報を画面に組み込む方法については、私が喜んで考えています。モバイルバージョンのみを実行しているので、画面の領域が明らかに制限されていることを覚えておいてください。
ありがとう！
時間と予算における現在の位置を棒グラフとして表示します。
これにより、彼らがその月のこの時点であるはずの場所の予算を上回っているか下回っているか、または1か月の予算全体を上回っていることが明らかになります。
比例配分された金額を使用して、支出が予算を下回っているか超過しているかを判断します。
たとえば、$ 1,000の食料品予算は1日あたり約$ 33になります。これに当月の日を掛け、その金額を使用して、ユーザーが予算を超過しているかどうかを判断します（ユーザーが全額に達する前に）。
これにより、毎月異なる色が良いか悪いかをユーザーにトレーニングする必要なく、月を通して正確なフィードバックを提供できます。また、その行動によりすぐに予算超過になる可能性が高い場合、月の最初の$ 999の支出を「良い」または「中立」として表示しないことも意味します。
さらに、この情報を使用して、支出がラインを超えて予算を超えた時期を示すグラフを作成できます。 （おそらく別の画面に表示されます。）
このシナリオでは、プログレスバーがその役割を果たします。
ファイナンスアプリは数字に合うフォントを使用する必要があるため、日付に使用するフォントを変更することもお勧めします。ここでは、9のベースラインが異なります。 Robotoは良い例ですが、オリジナルではありません。 
可能なextensionから maxathousandの優れた答え として、計画されている次の費用をカバーするようにアイデアを拡張しようとしました/月の後半にコミットされましたが、実際にはまだ使用されていません。
以下は、$ 30が既に使用される予定であるが、実際には実際には使用されていない状況を示しています。 $ 240の1か月の予算のうち、$ 210が追跡されます。 「順調」な支出は現在$ 140（$ 210の3分の2）であるため、128ドルの実際の支出はその目標よりも$ 12低くなります。
いくつかの設計上の考え：
あなたは計画された支出によって1か月の予算を削減するだけです（実質的には210ドルになります）。これには2つの問題があります。1つ目は、お金が使われるという事実を隠し、自分のお金に自己満足しやすくなることです。支出。 2番目の反対点は、将来の支出へのコミットメントの程度によっては、予算を超過することに気付いた場合に支出を「計画から外す」ことが可能な場合があることです。全体の予算が単純に削減された場合、これは明白ではありません。
別の代替案は、「今月の支出」バー（の濃い緑色のバー）の終わりに計画された支出を追加することです。上記の例）。これはおそらくもっと好みの問題ですが、私には–が使われていないため（まだ）使われていません–に追加しないでください「私が費やしたもの」バー。また、maxathousandのオリジナルのデザインが生み出す明確な「20日のラインの下または上am」の効果が濁っているのではないかと思います。 （上記の例では、ハッチングされたボックスが$ 140マーカーをまたぐため、予算が不足しているか超過しているかがわかりにくくなります。
「私が費やしたもの」バーのサイズを決定する方法に関するいくつかのメモ：
一貫性を保つために、「ターゲット支出」マーカー（上記の例では$ 140）は同じである必要があります物理的な支出の他のカテゴリとしての位置。
ターゲットの支出のamountは、計画された支出を考慮して計算されます：$ 240の予算-$ 30の計画=月の残りの$ 210。この場合、£210 * 20/30 = $ 140です。
Maxathousandのオリジナルの明瞭さは、「これまでに費やしたもの」バーの終わりが左側にあるかどうかに由来します（=good）または20日間の行の右（=bad）。したがって、濃い緑色のバーのサイズは$ 140ポイントを基準にして決定されます。上記の例では、128/140です。番目 20日の行の。これまでのところ$ 140の支出は20日間の線に触れるだけです。
計画された支出が実際の支出に変わると、斜線のボックス削除され、元のように濃い緑色のバーが拡張されます。
上記の潜在的な問題の1つは、予定された支出が残っている状態で月末に近づきすぎると、ターゲットマーカー（140ドル）が「30ドルの計画済み」の凡例と衝突する可能性があることです。その場合は、情報を行の下の凡例にマージする必要がある場合があります（「$ 128 + $ 240のうち$ 30」など）。