web-dev-qa-db-ja.com

ボタンの隅にあるカウンター

私は本質的に幅の広いタイルのようなボタン(Windows 8の「幅の広い」スタートメニュータイルと考えてください)であるユーザーコントロールを作成していますが、右上隅にカウンターを含む暗い領域があります。この数値の範囲は0〜99999です(厳密には、数値はさらに大きくなる可能性がありますが、実際のシナリオでは、5桁の20000を超えることはありません)。

ボタンの中央にも白いアイコンがあり、次のスクリーンショットでは表示されません。

Tile with non-rotated counter

問題は次のとおりです。

a)数が少ない場合、見た目がひどくずれています。より多くのスペースを占めるように拡大縮小することはできますが、数字が異なる2つのタイル(数字が少ないタイルと数字が多いタイル)は奇妙に見えます。これは、数字の表示サイズが異なるためです。

b)カウンター内の数値を45度回転させてみました。これにより、水平方向のスペースが広がります。この並べ替えにより、表示サイズの問題は解消されますが、ユーザーは奇妙な角度で数値を読み取らなければなりません。

Tile with rotated counter

c)最大数の制限(たとえば、999)を設定してみました。その数を超えると、最後に+が表示されます(つまり、999 +になり、それ以上増加しません)。これにより、ユーザーが受け取る情報の量が多少制限されます(ただし、数値がそのような値に増えても、ユーザーはそれほど多くの情報を失うことはありません-高い場合は数値を知っています。これは重要です)。少なくとも4文字に収まる...

全体として、これは私が直面している小さなUXの問題ですが、しばらくの間私を悩ませてきました。これに取り組むための最良の方法は何でしょうか。

編集:私は追加するかもしれません-ボタンはWindows Metroのようなグリッドに表示されるので、ボタンは互いに隣接しています。すべてのボタンにカウンターがあるわけではありません。現在、ボタンにカウンターがない場合、暗くなった領域はまったく表示されません。

編集2:私も注意する必要があります-表示された数は...ボタンは、ワーカー(ユーザー)に割り当てられたさまざまなタイプのタスクを表します。カウンターは、割り当てられている各タイプのタスクの数を表します。一部のボタンはシステムに割り当てられていないタスクであるため、カウンターがありません。そうでなければ、私にとって、最も重要な情報は実際に割り当てられているタスクの数ではないようですが、次のようになります。

  • タスクが割り当てられているかどうか
  • タスクの数が変わった場合
  • 割り当てられたタスクの一般的なスコープ-10秒?何百? 1000年代?

したがって、私はより多くの美学のために多少読みやすさを気にせずに行きました。

編集3:

私の友人は以下を提案しました:

Tile with rotated counter

10
Shaamaan

角のあるコーナーの使用に制限されていますか?

そうでない場合、ボックスははるかにシンプルで洗練されたものになります。

enter image description here

それ以外の場合、斜めのコーナーを使用してスタックしている場合は、中央ではなく右上に合わせるのがおそらく最善の策です。 enter image description here

21
alexbouchard

試すことができる1つのオプションは、桁数に応じて、暗い領域を可変にすることです。このようにして、暗い領域は視覚的な手掛かりとしても機能し、数値の大きさを示します。

enter image description here

enter image description here

11
DesignerAnalyst

比較可能な画像でのサンプルのサイズに応じたテキストのスケーリングは、多くの場合、悪い結果をもたらします。それを回避してみましょう。

小さな数字(1桁の数字など)は、大きなキャンバスに表示すると、孤立しすぎて美しくないように見える場合があります。

enter image description here

これは、デフォルトで10の位に値を保持させることである程度回避できます(この場合は0)。例えば、

enter image description here

このパターンの後に '99'までの数字が続き、通常のように、次のようにします。

enter image description here

番号がユーザーに関連している場合(そうでない場合は最初に表示されるべきではないので、推測します)、カーソルを合わせたときに整数全体を表示することを計画しているのでない限り、切り捨てないでください/フォーカス。美的に配置することができれば、サイズは問題になりません。

enter image description here

余談ですが、完全に非公式な設定でない限り、ユーザーの視点に対してテキストを配置しないことをお勧めします。与えられたキャンバスは最終版ではないと想定しているため、フォントサイズを少し減らして配置を微調整すると、コントロール全体がよりエレガントに見える可能性があることに言及する価値があります。お気に入り、

enter image description here

プロジェクトで頑張ってください。

2
JaikGeorge

桁数に基づいて値をシフトしてみましたか?

つまり、1桁の数字の垂直オフセットを設定して空白を削除し、桁数が増えるにつれて数字を上に移動します。

fewer digitsmore digits

このアプローチのプラス面は、すでに存在する視覚的な長さベースの並べ替えに加えて、高さベースの並べ替えも使用できることです。これは、アイコンの値が低くなるためです。

0
shade4159