web-dev-qa-db-ja.com

ウェブサイトの「コンテナ」要素は画面の下部に到達する必要がありますか?

SEやTwitterによく似た固定幅のレイアウトサイトがあり、「短い」ページがページの下部に到達しないと、個人的にバグが発生します。私はこれが純粋に文体の問題なのか、それともこのような状況に対する調査や基準があるのか​​疑問に思っていました。それはすべての要素を空間的一貫性の最高レベルに保つだろうと私は思われ、Twitterのような大きなサイトはすべての垂直の不動産を「パディング」ではなく「コンテナ」で埋める傾向があることに気付きました。

これは、サイトの非常に空のページの1280x1024モニターの例です。ご覧のとおり、目に見えるパディングがたくさんあります。一方、多くの空白文字は、「固定された」高さのソリューションに置き換えられます。

enter image description here

現時点ではページのフッターは使用されていません(これはイントラネットサイトであり、クライアントが下部にある単純な著作権情報を選択した/忘れていたと思います)。この場合、これはそれほど重要ではないと考えましたが、「現代「サイトがこれを行うので、問題について正式な研究/議論があるかどうか疑問に思いました。変更したいのですが、オリジナルのデザインを作成していなかったため、根本的な理由もなくユーザーインターフェースを変更したくありません。

5
Ben Brocka

私はWebデザイナーではありませんが、ここでの問題は、コンテナーが高さいっぱいになっている場合でも、塗りつぶすための空きスペースが非常に多いということです。目はその空の空間から引き離される必要があります。それは、上部を明るくするために背景をシェーディングすることによって行うことができます。

また、フォームは左揃えになります。フォームにフォーカスを合わせるために、エッジから離れて中央揃えにするのに役立つ場合があります。

最後に、メインコンテンツは、背景をより鮮明にするブレンディングではなく、単なるストップのようなものです。多くのサイトでは、移行を支援するためにドロップシャドウを使用しています。

私は変更をモックアップしました-しかし、これは実際には単なる考えの糧です-他の人がより良いアイデアを持っているかもしれません。

enter image description here

3
Roger Attrill

ホワイトスペースについての私のコメントをさらに詳しく説明するために、ここで私が何を得ているかを非常にすばやく視覚化します。

Showing whitespace

アイデアは、要素にいくらかの余裕を与えることです。マージンまですべてを混雑させないでください。また、SAVEボタンを大きくし、キャンセルボタン(2次アクション)の視覚的な重みを少なくしました。

対処する必要がある他の多くの問題があります...配色がそれらの1つである(なぜピーグリーンが選ばれたのですか?)また、モーダルウィンドウのような感触があるため、これはまったく異なるユーザーフロー

2
DA01

画面は画家のキャンバスのようなものです。キャンバスの一部しか使用しないのはなぜですか?上の画像を見て、人を想像してみてください。彼らは、「ああ、見た目がいいね。愛を込めてページを作ったみたいだ」と言っていますか?それとも彼らはそれが醜くて単なる形だと思いますか?

大きなフォーム要素を使用して、画面を液体にします。見栄えの良いコンテナを作ります。あなたの聴衆に優しくすれば、彼らはあなたにも優しくなります。まともなページを作成します。上の画像は目障りです。

それを本物にしようとするだけです... :)

1
Glen Lipka

私の経験では、完全な深さのコンテナーを維持する歴史的な理由の1つは、スクロールバーが一貫して表示されるデザインを可能にすることです。スクロールバーが表示されたり消えたりするWebサイトをナビゲートするのは、コンテンツ/デザインがわずかにシフトして余計な幅に対応するため、当惑します。

これが問題であるかどうかはわかりませんが、コンテンツが完全に表示されていない場合でも、スクリーンショットには非アクティブなスクロールバーがはっきりと表示されます。

0
DannyBoyNYC