web-dev-qa-db-ja.com

ログインフォームが中央に配置されるのはなぜですか?

ログインフォームが常に画面の中央に配置されるのはなぜですか?最も水平方向、一部垂直方向にも。 Apple/Amazon/Adob​​e/Microsoft/Google/Paypal/Instagram/Twitterなどのサイトがすべて集中管理されています!これは文書化されていないベストプラクティスですか?

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

明らかにそれは美的に最も楽しいですが、なぜ他の理由がありますか?

編集:これらのサイトの多くはモバイルもサポートしていないため、そのために特別に作られたわけではありません。

9
bfritz

このアプローチには、実際には他にもいくつかの利点があります。

人間工学。

デジタルは人体によって制限されているとは見なされないため、UIデザインの見落とされがちな部分です。しかし、まっすぐ前を向いている、または左か右のどちらを向いているのがより快適なのでしょうか?電話では、画面の中央も横よりもかなり簡単にアクセスできます。


フォーカス

あなたはあなたのサイトを見るために、人々にログインして欲しいです。ログインを中央に配置すると、使用する要素と画面外の世界との間に可能な限り多くのバッファスペースが作成されます。


他のサイトとの整合性

他のサイトがそれをするので、あなたはうまく適合します。打たれた道をたどることが常に最良の選択肢であるとは限りませんが、UXでは学習曲線を下げるため、それは良いことです。このデザインは非常に典型的であり、人々はページの目的と次に何をすべきかを即座に認識するでしょう。


バリエーション内の一貫性

LTRとRTLのテキストにまったく同じレイアウトを使用できます。スマートフォンやパソコンに搭載でき、レイアウトも同じように感じられます。等しい空白は周辺にフェードインしますが、片側のみの空白(または空白がない)は、サイトの大小が大きく異なるように感じます。 enter image description here

18
PixelSnader

まず第一に

ログインフォームが常に画面の中央に配置されるのはなぜですか?

そうではありません。いくつかの有名な例には FacebookStack Overflow 、 Office 365 (最近の設計変更により、ログインフォームが中央に配置されました)、 RediffmailYahoo (Yahoo!を思い出してください)

対称

対称性は、宇宙全体で注目される現象です。これにより、ページは見た目が美しく、きれいになり、OCDが抑制されます。中央揃えにすると、レイアウトのバランスを取りやすくなりますが、それほど簡単ではありません。これが良い 参照 です

負のスペース

それはアーティストや写真家によって広く使用されているコンセプトです。ログインフォームが一般的に小さいことを考えると、処理する空白がたくさんあります。レイアウトが中央に配置されている場合、左が多すぎる、高さが高すぎるなどの質問に答えられます。

レスポンシブなアプローチ

これらのサイトは、ある時点で応答性を高める必要があることを考えると、中心からの圧縮とストレッチは比較的簡単です。

6

明らかにそれは美的に最も楽しいですが、なぜ他の理由がありますか?

それだけです。

中央揃えのログインレイアウトは、それらを囲むより楽しい視覚的な空白を持っています。これは確かにより視覚的に楽しいです。さらに、中央に配置された小さなdivは、レスポンシブデザインとモバイルブラウジングのためにログインフォームを調整する方が一般的に簡単であることを意味します。

3
denveruxer

あなたがそれを中央に置きたいと思う多くのグラフィックデザインの理由がありますが、それはまた注目を集めます。画面の中心は通常、注意の中心であり、仮定です。ユーザーの視野の周辺でフォーム(ダイアログ)を開くと、ボタンをクリックしても効果が表示されない場合があるため、ボタンが機能しないと考えられます。

また、ログインしていない場合はご利用いただけません。

ログインしていない場合でも使用できるフォーラムを見ると、その多くは右上のどこかにログインフォームを持っているか、2つのテキストフィールドを持っているか、[ログイン]ボタンからのポップアップとして表示されます。

2
uliwitness