web-dev-qa-db-ja.com

読みやすくするための数値フォーマットのヒント

ダッシュボードを設計しています。ダッシュボードのコンポーネントの1つは、さまざまな単位で値を表示するタイルパネルです。問題は、これらの数字が非常に大きくなる可能性があることです。わかりやすくするために、サフィックスを使用してフォーマットしています(kは1000、Mは100万など)。

これまでのところ私はこのデザインを持っています:

enter image description here

私が抱えている問題は、「サフィックス」を表示するための適切な方法が見つからないことです。現在の方法では、必要な注意を引いていないと思います。kを渡すだけなので、ユーザーは3000と3を同じ数値として読み取る可能性があります。

これに関するヒントや良い習慣はありますか?特定のものが見つかりませんでした。

ありがとう

8
João Menighin

クライアントに多くのオプションを提示した後、彼が選択したのはこれでした。

enter image description here

34,51k = 34510,00(カンマは小数点です)

基本的に、@ dutoのアイデアと他のヒントを組み合わせたものです。なぜこれが良いアイデアであるか、または良いアイデアではないかについては、まだ議論の余地がありますが、私は結果が気に入ったと認めます。欠点の1つは、ユーザーがこれを「34k、51」と読み、34510,00ではなく34000,51に変換する可能性があることです。

再度、感謝します!

2
João Menighin

このUIで要素のサイズを変更すると役立つ場合があります。

まず、これらの最初の数字は巨大であり、それに続くものは非常に小さいです。読みづらく、一見して読めない。それらを同じサイズにして、それらを短縮することに問題はありません。

次に、数百万のサフィックスを追加して数千削除します。これは、丸められたり短縮されたりすることが一般的に受け入れられているため、数百万のサフィックスの方が簡単です '[〜#〜] m [〜# 〜] '。数千の場合、それが丸め数値の場合、[〜#〜] k [〜#〜]に丸められます。たとえば、34kまたは34.1kは、一般的に受け入れられている数千の数の省略形であり、34,51kは、追加の「0」を追加するか、または10の数を取り除きます(0.00 bold)読みやすくし、慣例に従っています。

enter image description here

上の画像を参照して、私の意味を説明してください。これにより、すべての数値が一目でわかりやすくなります。 (灰色のボックスは、設計のように値の上下のテキストを表します)

8
UIO

2つの提案:

1)すべての桁と単位を同じサイズにして、小数点以下の桁が小さくなりすぎないようにします。次に、他のすべてと同じサイズの「k」サフィックス。

2)または、代わりに正方形の下部にある「ユニット」のサフィックス部分(例ではR $/t)を作成し、このユニットを大きくします(k R $/t)。

5
qoba

私はあなたのssで遊んだところです。私の意見では、「、51K」を太字で使用した方がよいでしょう。また、この説明により、接尾辞が読みやすくなります。完璧な解決策ではないかもしれませんが、それは素晴らしいオプションだと思います。

enter image description here

0
duto