小さな領域に大きな数字を表示する
複数の注文を表示する会計アプリを開発しています。すべての注文には価格があります。以下に示すように、価格を表示したいボックスがあります。
これはかなり小さい数でかなりうまく機能しますが、すぐに大きな数を持ち始めると、ボックスはもう適していません。
私が思いついた解決策は、以下に示すように数千のみを表示することです：
- 私のユーザーの何人かは、数千を示す
Kという文字を気に入らない。 - それらのいくつかは、正確な価格とすべての桁を一度に望んでいます。
すべての価格の数字に合わせてボックスのサイズを変更することはオプションではありません。これにより、一部のボックスが他のボックスよりも大きくなり、対称性が失われます。
この種の問題を処理する他の方法はありますか？
最良の解決策は、ボックスのサイズを増やすことです。レイアウトを変えずにできればいいです。
フォントサイズを小さくするには、降順ではなく単一のサイズを使用することをお勧めします。読みやすいです。
また、 'k'表現を実行する場合は、ツールチップまたはその他のキューを使用して、ユーザーが実際の番号にアクセスできるようにしてください。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
レイアウトはコンテンツをサポートする必要があります。最初のコンテンツ、次に適切なレイアウト。物理的な制約（小さな画面など）を簡単に破ることはできませんが、最大の数でさえ、最小の画面に別の行として配置される可能性があります。
また、ソフトウェアに関する3つの段階に留意することをお勧めします。
- 便利（機能）
- 使用可能（使いやすさ）
- 美学
順序は重要です。そのため、美学が機能性と使いやすさを上回らないようにしてください。
ここでstackexchangeで行われることは色を使用をkと組み合わせて重みを表示することです（私はmも推測しています）。
さまざまな色がさまざまな重さをどのように表しているかを見てください。kと組み合わせて、紛れもなく使用可能で理解可能なものを受け取っています。
さらに読む：正確な数を表すツールチップ/ポップオーバーの追加を検討しましたか？
適切な価格を含めるのに十分な大きさのボックスを作成します。
アプリに6桁までの価格がある場合は、価格ボックスを6桁の価格にするのに十分な大きさにします。レイアウトを変更する必要がある場合や、スペースが限られているためにスペースを確保するために何かを犠牲にする必要がある場合でも、これを行ってください。 「K」またはその他の省略形を使用して価格領域を小さくしないでください。正しく言うと、誰もが理解できるわけではありません。
私がこれを言っている理由は、ショッピング価格を行うほとんどの人にとって、基本的な「これは何であるか」情報以外の何よりも重要な情報の非常に重要な部分であるということです。さらに、人々は価格に惑わされるのを本当に嫌います。あなたが価格について前向きであるように見えない場合、人々はあなたがそれらをだまそうとしていると考えます-あなたがそうでなくても。 Stack Overflowのレピュテーションとの比較およびKの使用は、レピュテーションが価格ほど重要ではなく、オーディエンスが略語を理解する可能性が低いため、有効ではありません。
質問されたように、箱のサイズには制限がありますか？私がこれを尋ねる唯一の理由は、おそらくあなたがボックスのサイズをあなたが持っている最も高い価格の幅に変更し、それをボックスの固定幅として設定できるという事実によるものです。次に、ボックス内の価格を中央に配置します。可能な限り高い価格を使用してバッファリングしているため、他の価格が幅を超えることができないことがわかります（表示する最大サイズにさらに数桁を追加することができます）。
また、10進数の価格を使用する場合は、ボックスを可能な限り最大のサイズで1回サイズ調整するだけで、ボックスのサイズが変わることを心配する必要はありませんが、価格の中央に配置できます。したがって、サイトの外観が統一されます。
マウスオーバーですべての桁を妥協するか（オプションの場合）、または末尾の桁を小さくするか細くします（解像度がある場合）。
私はCalibri + Arialナローで試してみましたが、これはあまりあなたを買いません：
（ 'k'を使用する場合は小さい数字を使用しますが、数字と区別がつきやすく、SIで正確です。'Mfor million 'のような運はありません。）
一般に、画面上の情報全体を減らすことを検討してください。すでにデータを詰め込む必要がある場合、問題は個々の要素ではありません。
あなたは通貨記号+値のために行くことができ、
123.786ドル
よりコンパクトにすることができます
123k
価格
[編集]要求どおり：最も重要な情報（ "123"（k））を強調するが、詳細は保持するという考え方です。私は「1ステップ」バージョン（2番目と3番目の例）を何度か見ましたが、通常は情報密度に対処するためではなく、美学/スタイルのためです。連続して小さい数字を使用することは、これを拡張する自発的なアイデアでした。
例が示すように、「1つのステップ」はピクセルの点であまり購入しません。2番目のステップは、混乱しないとしても、少なくとも異常に見えます。
科学表記では、これを1.23e5と表示します、単位に関しては「より正確」です：1.23e5 mは正しいですが、123k mはそうではありません（123 kmである必要があります）。
ただし、ユーザーが「k」の接尾辞に満足できない場合は、これほど気に入っているとは思えないので、完全を期すために単に言及します。
他の可能性は次のようなものを持つことかもしれません：123あなたは または123、000
詳細を知らずに言うのは難しいですが、いくつかの可能なオプションがあります：
- すべてのボックスのサイズを変更して、最大数のボックスと同じ大きさにします
- 大きな数字の左/右のパディングを減らして、ボックスに収まるようにします
- 数字のテキストを小さくする
- 123Kを保持し、ある種のトグル（クリックまたはホバーなど）で全額を表示するオプションがあります
そこにあるソーシャルメディアウィジェットからヒントを取得します。 Like/Follower/+ 1などのボタンはすべて、小さな小さなスペースに大きな数を表示する必要があります。