質問: stackexchangeサイトの右側の列のタグで使用されるスペースを最適化するにはどうすればよいですか? stackexchange uiサイトの外観についてのこのメタ質問 では、サイトの設計に取り組んでいます(読み:いじりながら)。私はwebベースのツールを使用してページのcssを編集しています。これにより、サーバーによってレンダリングされる利用可能なhtmlに制限しながら、自由に変更できるようになりました。物事(主にタイポグラフィや視覚的な重みなどの要素)を変更および再編成しているときに、ほぼすべてのstackexchange webサイトに表示されている右側の列はかなり非効率的であることに気付きました。メタサイトでの表示は次のとおりです。タグ(およびその下のバッジ)は、垂直方向よりも水平方向に長い小さなオブジェクトです。それぞれにいくつかの属性があります。 オブジェクトの名前 タグが付与された回数、またはバッジが割り当てられたメンバー オブジェクトの概念を強化する視覚要素 名前の長さに応じた明確な横幅 物事を整理する方法は、今では非常に非効率に感じられます。 水平方向の幅全体を必要としないにもかかわらず、各タグ/バッジは1行分のスペースを占めます。 このページのタグとバッジの視覚的表現は不適切だと感じています。タグとバッジは、質問のタグやメンバーのプロフィールのバッジなど、それ自体で表示されるように設計されていますが、これらの場合、メタデータが付いています:タグが適用された回数、またはメンバーバッジが授与されます。しかし、視覚的表現はまだ一般的なアプリケーションを想定しています。 ほとんどのstackexchangeサイトでは、これらの要素に強い境界線があり、各要素が線上にあると、要素間に不快な否定的なスペースがたくさん作成されます。 私の再設計 では、視覚的なノイズを減らすためにタグの強度を減らすように注意しました(まだバッジに取り組んでいません)が、タグを表現するための良い方法を思い付きませんまだ適用された回数と組み合わせて。私はいくつかのアイデアを持っていますが、どれも正しくないと感じています: それらをタグクラウドでレンダリングします。これにより、水平方向のスペースが増え、垂直方向のスペースが減ります。ただし、タグクラウドはほとんどスキャン可能であり、判読できません。それが問題かどうかはわかりません。 タグと多くのアプリケーションの組み合わせの新しい視覚的表現を検討してください。おそらくタグに番号を含めることによって:<ディスカッション] x14は<ディスカッション| 14]になります。または、タグ要素の高さを増やして、名前の下に「14」を配置します。全体的に垂直方向のスペースが大きくなりますが、各行にいくつかのタグを付けることができます。 特定の数のアプリケーションへの参照を削除し、代わりに視覚的なメタファーを使用して、適用された回数を示します。おそらく温度計パレットを使用することにより、「ホット」タグをより赤く、コールドタグをより青くすることができます。ただし、これは新しいユーザーにはすぐにはわかりません。 特定の数のアプリケーションへの参照を削除し、代わりに幅を使用して熱さを示します。タグの幅が広いほど(右側の列)、人気が高くなります。ただし、上記のように、これは最初はやや混乱します。 質問時間:cssのみを変更でき、改ざんできない場合、右側の列にタグとバッジを表示する方法を再設計するための効果的な方法は何ですか? html?
回答: いくつかのアイデア、sparkに他の何よりもすぐに使える他のアイデア: スライダー(タグのパネルが連続してフェードインおよびフェードアウト) タグのストックティッカー 静的タグチャート インタラクティブタグチャート digg labs での視覚化に似たもの。