大画面の不動産の設計の課題をどのように克服しますか?[閉まっている]


10

この質問はもう少し主観的ですが、私はいくつかの新しい視点を得ることを望んでいます。私は特定の画面サイズ(通常は1024x768)の設計に慣れているので、そのサイズは問題にはなりません。サイズを1280x1024に拡大しても、かなりの違いを生み出すのに十分な画面領域は購入できませんが、少し余裕ができます。基本的には、「グリッドサイズ」を拡張するだけで、わずかに小さい画面でも同じ基本設計が機能します。

ただし、最後の2つのプロジェクトでは、私のクライアントはすべて1080p(1920x1080)画面を使用しており、可能な限り多くの不動産を使用するソリューションを求めていました。幅1920ピクセルの幅は、私が慣れている幅の2倍をわずかに下回っています。ワイドスクリーンを使用すると、昔の設計の一部がうまく機能しなくなります。私が遭遇している問題は、非常に多くのスペースが提示されると、いくつかの大きな問題に直面することです。

  • いくつの列を使用する必要がありますか?ワイドフォーマットは、2:1:1の分割(つまり、コンテンツ列が他の2つよりも大きい)での3列の分割に適しています。ただし、3つの列を使用する場合、その追加の列はどうすればよいですか?
  • 画面の領域を効率的に使用するにはどうすればよいですか?すべてを一度に画面に表示したいという誘惑はありますが、情報が多すぎると、実際にはアプリケーションが使いにくくなります。空白は、複雑な情報を理解するために重要ですが、多すぎると、関連する概念の分離が強すぎます。
  • 私は通常、複雑なデータを持つWebアプリケーションを使用しています。生データを理解するには、視覚化とプレゼンテーションが重要です。ユーザーも大画面(少なくとも24インチ)を使用している場合、一部の情報は視界の外にあり、ポインターを遠くに移動する必要があります。必要なものすべてを視覚的なホットポイント内に確実に収めるにはどうすればよいですか?
  • ブログのような単純なサイトは、幅が制限されていると実際にパフォーマンスが向上し、その結果、多くの無駄な不動産が発生します。テキストボックスとテキストプレビューを並べて表示することは、そのタイプの画面の管理者側にとって大きなメリットになるのでしょうか。(1:1 2列分割)。

あなたの答えとして、私はデザインのほとんどすべてが「依存する」ことを知っています。私が探しているのは:

  • 使用する一般原則
  • デザインへのアプローチがどのように変わったか

この異なる形式での作業方法を自分で再訓練する必要があることがわかりました。私がこれまで取り組んできた解像度のすべてのバンプは、約25%です。640〜800(25%増加)、800〜1024(28%増加)、1024〜1280(25%増加)。ただし、1280から1920へのジャンプは、スペースの50%の増加に相当します。640から1024へのジャンプに相当します。レッスンを徐々に学習するために一般的に使用される中間サイズはありませんでした。


空のスペースを埋めるために、UIコントロールを大きくすることはできますか?
FrustratedWithFormsDesigner

@フラストレーション:たとえばタッチスクリーン用に設計していない限り、それは目的を無効にしないでしょうか?
マイケルK

@Michael:まあ、OPはプログラムの使用を難しくするため、表示されるコントロールの数を変更したくないようで、空のスペースも好きではありません。スペースを埋める新しい機能がない場合は、スペースを埋める必要があります...?
FrustratedWithFormsDesigner

2
それは、新しいコントロールやサイトとの相互作用の方法について私の心を広げようとすることの問題です。すべてを大きくするだけでは目的は達成できません。次に、「大きな光沢のある赤いボタン症候群」または1つの大きな見出しを読んでいるようなテキストがあります。デザインの懸念のバランスをとろうとするとき、それは本当に複雑な問題です。
Berin Loritsch、2011

1
@Berin:スーパーサイズのインターフェースサイズについて特定のリクエストがあり、それが唯一の大きな変更である場合は、レイアウトとデザインに懸念があることを伝え、スペースを最大限に活用する方法についてアイデアがあるかどうか尋ねます。結局のところ、彼らはユーザーであり、この特定の要求を行う理由があったはずです。「ダッシュボードウィジェットを空のスペースに置く」などと言うかもしれません...巨大な空白のモックアップスクリーンショットに「ここに何が欲しいですか」というテキストを送信します。この設計に関する懸念事項がわかっていることを確認してください。
FrustratedWithFormsDesigner

回答:


1

これが私がこの問題に取り組む方法です。

まず、データを論理ブロックに分割します。論理ブロックごとに異なるascxファイルを作成することもできます。各ブロックは、それがどのように表示されるかを知っています(最小/最大幅)。私はこれをb / cしてコードを書き換えるのは好きではありません。複数の解像度サイズをサポートするためにアプリを拡張する必要がある可能性がある場合、これはコントロールごとのコントロールを容易にするのに役立ちます。

次に、より大きな解像度用の新しいスタイルシートを作成します。ボタンと見出しを大きくします。要素の周囲に空白を追加します。このように、2つの解像度タイプを切り替えることは、スタイルシートを交換するだけです。

難しい部分であるレイアウトについて説明します。あなたが言ったように、レイアウトはその量の不動産で非常に異なります。警戒の答えは、ユーザーがiGoogleページのように、必要な場所に要素を配置できるようにすることです。ユーザーは、必要に応じて2列または3列を選択できます。作成している画面の種類がわからないので、これが本当に役立つかどうかはわかりません。

2番目の回答は、これらのページの設計を支援するUIエキスパートを雇うことです。過去にUIの専門家と仕事をしたことがあるので、このようなことについて専門家の意見を得ることは100%の価値があると言えるでしょう。クライアントが製品を見る前に、問題を特定し、解決策を提案できます。

自分でやる必要がある場合は、固定アイテムを側面に配置し、中央の領域を拡張して残りのスペースを埋めます。真ん中のセクションを埋めるように成長する可能性のあるデータがあります。

これがあなたにとってどれほど役立つかわかりませんが、いくつかのアイデアが得られることを願っています。


これはおそらく、この質問に対して私がUIとプログラマの両方に渡った最も合理的な答えです。UIの人々が私に言った「すべてを大きくする」よりもずっと便利です。注:aspxはテクノロジー固有の用語ですが、UIを個別のファイルに分割することが適切なアプローチです。
Berin Loritsch


2

私はUIの専門家ではありませんが、Eclipseで毎日1920x1080の画面を使用しています。Eclipseには非常に簡単に構成可能なインターフェースがあり、1280と1920の間で切り替えるときの私の観察の一部を以下に示します。

  • どちらの解像度でも、作業しているウィンドウを同じサイズで表示したいと考えています。小さい解像度では、余分なパネルを非表示にする傾向がありますが、より高い解像度では、より多くのパネルを出力します。
  • 少し大きいボタンの方がいいです。大きいモニターに比例して占有するスペースが少なくなり、マウスの動作が速くなります。
  • プレビューを拡大して画面全体を使用することがよくあります。つまり、左側にコード、右側にプレビューがあります。最終的には2列の形式になります。それ以外は、フッター付きの3列を使用します。
    1. 左:ファイルナビゲーション
    2. 中央:コード(最大、おそらく画面幅の2/3)
    3. 右:コードのナビゲーションとタスク
    4. フッター:ステータス(コンソール、サーバーなど。かなり短く、おそらく1 / 5-1 / 6画面の高さ)

ビューとコントローラーを2列モードで並べて配置することもありますが、これは間違いなくプログラマー固有です。:)

より大きな画面で、それを使用して、できる限り多くの情報を表示しながら、簡単に見つけたいと思っています。コンポーネントの周囲のスペースが広いほど、情報コレクションを区別するのに役立ちます。タブ上のアイコンは、各コンポーネントの意味に注意を引くのに役立つ1つの方法です。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.