アイコン、テキスト、数字を限られたスペースにレイアウトする方法は？

Question

スペースが限られている場合、通常は「4 Strength」や「Strength 4」のように通常は綴ることができないほど狭くなっています。これにより、フォントがほとんど読めなくなるためです。

アイコン、テキスト、数を限られたスペースにレイアウトするにはどうすればよいですかなので、それらがすべて関連していることを確認して理解するのが最も簡単ですか？

更新：これはアイコンのコンテキストです。これはアプリの実際のフォントを使用します： 

推奨事項を適用した後： 

Answer 1

次のマイクロ変更により、現在のデザインを改善できると思います。

1. アイコンの周りの灰色の枠を削除します。フレームの垂直線は 連続性のゲシュタルト原理 を「アクティブ化」し、アイコンの下のテキストのスペースを制限します。図の赤い線を参照してください。
   
2. 可能な場合は、Word全体を使用してアイコンを説明します。私はネイティブスピーカーではないので、Conは私を混乱させます。
3. 単語間のスペースが狭いため、単語間のコントラストを上げて単語を区切ります。わずかに透明な単語の終わりと次の近い単語のより目立つ始まりの組み合わせを使用して、コントラストをはっきりさせます。コントラストを上げるために、最初の文字のフォントサイズを大きくし、色をより明るくしました。残りのシンボルはわずかに灰色になります。写真をご覧ください。
   

全体像は次のとおりです。

Answer 2

アイコンの上に数字を、アイコンの下にテキストを入れてみてください。

Answer 3

AndroidとMicrosoftのユーザーエクスペリエンスガイド）、画像テキストと番号レイアウトに関する優れたガイドが多数あります。 ユーザーエクスペリエンスマガジン =。

UXコンテキストはわかりませんが、アプリケーションで使用できるスペースの量に基づいて調整する必要があるいくつかのアイデアを次に示します。これは、相互作用が何であるかに依存する可能性があります（用語は、次のように参照されるUX環境によって多少異なります）。

1. ボタンの選択。 アップル
2. ユーザーのための情報。
3. バッジ情報。 ブートストラップ ; Microsoft Metro
4. トースト通知。 Android
5. 通知メッセージ。 XBooth ; Microsoft Metro Tiles

Answer 4

画像を失い、テキストのみを使用します。これにより、次のレイアウトが得られます。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

その理由は、アイコン内の画像は追加情報を提供しないためです（すべてのゲーマーが英語を知っていると想定）。アイコンのバランスがよくなり、乱雑になることはありません。シンプルでノルディックなまばらなデザイン。

Answer 5

正直なところ、これは多くのUXのベストプラクティスとガイドラインに違反していますが、効果的でスケーラブルであり、当面の問題に非常に適していると思います。より大きな数字を使用して、縮小も回避できます。

Answer 6

画面に基づいて、長い名前を簡単に使用できるようにレイアウトを再調整する場合があります。これは、左から右に読む言語に役立つはずのモックアップです。また、文字オプションの循環方法ではなく、セクションごとに情報をグループ化します。以前。