web-dev-qa-db-ja.com

余分なスペースに対処する方法

私はすでにレスポンシブデザイン(ブートストラップ)を使用しており、小さな解像度でうまく機能するWebアプリケーションを開発しています。しかし、最近のデスクトップ画面の幅は1920pxになり、今のところ主な対象者です(ITプロフェッショナル向けのWebアプリです)。

ほとんどのページは、論理的な入力順序を持つフォームであり、トップダウンで読むことを好み、垂直に配置します。そのため、問題があります。幅よりも高さを使用する必要があり、画面内に未使用のスペースがさらに残ります。

製品の所有者はすでに左側の空白について不満を言っていましたが、下の私のドラフトに見られるように、フォームフィールドを水平に配置することはオプションではないようです。

Draft with the two approaches for form content distribution

このドラフトの縮尺はあまり適切ではありません。1920pxの幅の画面がはるかに離れています左側に空白スペースがあり、 2番目のアプローチでは、互いに離れた入力

TL; DR

ワイド画面に空白を残すか、関連する入力を互いに離れた場所に置くかを選択する必要があります。 IMHOの#1アプローチ(写真を参照)の方が良いですが、本当に最高のソリューションであるかどうかを皆さんから指摘されたら、私は製品の所有者にこの方法または別の方法でより優れていると確信させることができます。


[〜#〜]編集[〜#〜]

DA01の回答 に基づいて、彼の考慮事項に従ってドラフトを更新しました。

Improved draft

コンテンツの中央揃えについては、サイドバーの概念と矛盾する可能性があるので、動作を変更しました。以前は、サイドバーはボタンと画面のコーナー(スワイプ)から切り替えることができましたが、小さなデバイスではサイドバーが非表示になり、画面に切り替え用のボタンが表示され、スワイプジェスチャーが有効になります。

今ではもっとすっきりしていますが、このセットアップの理想的なサイドバーの動作が何かはわかりません...

4
2grit

「すべての余分なスペース」について不満を言うクライアントは、通常、UX /使いやすさの観点からではなく、視覚的なデザインレイアウトの観点から物事を見ていて、まるで芸術作品としてサイトを印刷して暖炉の上にぶら下げています。

はい、ブラウザを1920に拡大すると、多くのWebサイトに多くの空白スペースができます。それはサイトのユーザビリティを変えません、そして意図的にそして任意に事物を1920に引き伸ばすことは通常事情をUX /ユーザビリティPOVから悪化させます。

実際、サイトを900〜1100程度に拡大することはほとんどありません。それを超えると、アスペクト比がとんでもないものになり始め、テキストの行の長さが判読できなくなります。人々はフォームに関しては主に上から下に作業するので、フォームのレイアウトを水平よりも垂直に保ちたいと思うでしょう。

このタイプの苦情の一般的な「修正」は、次のとおりです。

  • コンテンツ領域に最大幅を設定する
  • コンテンツ領域を中央に配置する
  • コンテンツ領域の背後に「きれいなパターン/色」を配置します。

これにより、文字通り空白ではないスペースの上に、適切に中央に配置された「サイト」ができます。

10
DA01

フォームの境界線を避け、ボディと同じ背景色を使用すると、視覚的によく見えます。

コンテンツに分離が必要な場合は、境界線でスペースを制限する必要があります。フォーム領域は、分離する必要がないため、ここで分離する必要はありません。国境は、私の意見では、ノイズを追加しているだけです。また、垂直線は、ページ内で失われたり浮いたりしないことを保証しています。

1
Shaurya Rawat