より良いダッシュボードデザインのための4つのヒント - パート2

日付

2019/05/18

カテゴリー

デザイン

以前の投稿では、2つのダッシュボードUI（ユーザーインターフェース）デザインのヒントを共有しました: 境界線を少なく使用する および ビジュアルとドキュメントの階層を分離する。

この記事では、残りのヒントをあなたと共有します。

さあ始めましょう。

ヒント3: ラベルは最後の手段

情報を表示するとき（データベースから）UI（ユーザーインターフェース）で、メタデータ駆動のアプローチを取ることがしばしばあります。

たとえば、ラベル: 値のようになることがあります。

このアプローチは、時々デザインを混乱させ、データの階層を示すことが難しくなると見つけました。なぜなら、すべての情報が同じ重みで与えられているためです。

ある状況では、フォームではない場合には、データのピースがどのようなものかを説明するためのラベルは必要ないことがあります。

この例では、debora@gmail.com は電子メールアドレスであり、0400 1234 5678 はオーストラリアの携帯電話番号であることがわかります。

ラベルを表示せずに、ユーザーが情報を簡単に識別し、デザインでコンテンツの構造を強調することを可能にします。

ラベルを表示せずに、ユーザーが情報を簡単に識別し、デザインでコンテンツの構造を強調することを可能にします。

ラベルがなくても、ユーザーに文脈を提供できる短い文にラベルと値を組み合わせることができます。

たとえば、ファイル共有アプリケーションインターフェースで著者と日付を表示する必要がある場合、By Dave at 6:30 am 10/04/19 のように試すことができます。

この例では、新しいメッセージ: 2 は単に 2 つの新しいメッセージになります

以前にBootstrapフレームワークを使用したことがあれば、ウェブ開発者がレイアウトの決定を簡素化する流動的なグリッドシステムを備えていることを知っているでしょう。

グリッドは便利ですが、デザインに有害であることがあります。

12列のグリッドレイアウトを使用する場合、各グリッドは8.3333% 幅です。要素の幅が8.3333% の倍数である限り、その要素はグリッド上にあると考えています。

私は、いくつかの場合には固定幅を使用する方が理にかなっていると考えました。

たとえば、左サイドバーとメインコンテンツエリアを持つアプリケーションの典型的な2列レイアウトがある場合。

最初は見栄えがしますが、画面ウィンドウのサイズを変更し始めると、サイドバーがあまりにも広くなります。その余分なスペースを代わりにメインコンテンツに使用することができます。

さらに、サイドバーのテキストが折り返されたり、最低の合理的な幅を下回る場合には切り捨てされたりします。

この例では、サイドバーに固定幅を持たせ、メインコンテンツエリアを流動的にしてスペースの残りを埋めることが理にかなっていることがわかります。