web-dev-qa-db-ja.com

プロフィール写真が最近丸められているのはなぜですか?

なぜ多くのウェブサイトやアプリケーションが円形のプロフィール写真を使用しているのですか? GoogleやApple=のようなトッププレイヤーでさえ、従来の長方形のフレームの上に丸いプロファイルの写真を使用しています。なぜですか?

90
Kay Gee

顔の写真のコーナー(ほとんどの人はアバターとして選択します)は、不必要な視覚的なノイズだけでなく、画像の処理が難しくなる場合があります。丸いエッジを持つものは、鋭いエッジを持つものより 目にやさしい と見なされます。円は視覚システムの処理が容易であるため、認知負荷が少なくなります。

しかし、長方形のアバターで育った私たちの多くは、長方形のスペースを最大限に活用するように設計しています。おそらく、時間と それほど正方形になるのをやめる を取得する必要があります。

70
Franchesca

これが私の考えです。

画像を見る場合、それが何であるかを理解するために必要なのは、その画像の最も中央の領域です。画像の中心を削除すると、画像の内容を理解するのが非常に難しくなります。一方、コーナーを削除して中心を維持すると、画像の内容を把握できます。

Examples of rounded avatars, square avatars, and avatars with a hole in them

上記はほとんどの場合に当てはまります。被写体が写真の中央にない場合でも例外が発生することがあります。

なぜ誰もが正方形のアバターではなく丸みを帯びたアバターを使用している理由については、なぜフラットデザインに移行しているのかを尋ねるようなものです。

これがお役に立てば幸いです。

44
raz0r

enter image description here

これは、丸みを帯びたプロフィール写真での私の計算です。

  1. 以前に正方形のプロフィール写真があったのはなぜですか?

    アイデアは正方形のフォトフレームから派生したもので、現実の世界と一致するようにプロファイルの写真は正方形でした。

  2. なぜラウンドなのか?

    今では、変形形態のデザインから、デジタルワードでより効率的なデザインに徐々に移行していると思います。また、それは伝統的な正方形のプロフィール写真から際立っている新しいものです。

  3. なぜ成功したのですか?

    写真の上に、正方形のプロファイル写真の場合、集中する5つのポイントがある(コーナーに4つ、中央に1つ)ことがわかります。 ほとんどの場合、顔のビジュアルは中央にあります。したがって、エッジ上の他のコーナーポイントは、オブジェクトから集中してフォーカスを奪いますが、 中央に1つの集中点のみがあり、エッジに集中する明確な点がない丸いプロファイルの写真を参照してください。

    要するに、丸いプロファイルの写真では、中心にあるオブジェクトに簡単に焦点を合わせることができますが、四角形の場合は、集中の一部となる4つのコーナーポイントのために困難です。

9
sandeep_jagtap

誰もがクリーンでレスポンシブなウェブサイトを作るために「Twitter Bootstrap」を使っているからです。

ツールキットの一部は、追加したimg-circleクラスであり、円形の画像、直径140pxです。それは簡単なことではありません。

http://getbootstrap.com/css/#images

丸い形が流行している理由はもっと科学的な理由があるかもしれませんが、大量採用はTwitter Bootstrapを使用すると非常に簡単になるためです。

6
Theodores

なぜ今日ですか?おそらく、CSS3(1999年に採用されたが、一般的に数年前に実装されただけ)が border-radius プロパティ。これにより、丸みを帯びたボーダーをブラウザで動的に簡単に実装できます。以前は、Photoshopを起動するか、サーバー側でGd Graphics LibraryまたはImageMagickを使用して画像操作コードを作成し、同じ効果を達成する必要がありました。

しかし、コンピュータとユーザーエクスペリエンスの歴史の中で、次のことができます Steve Jobsの使用に対する情熱を振り返ってください Apple Lisa(Macintoshの前身)の開発中) 1981年:

ビルはデモを開始し、リサの画面をランダムなサイズの楕円形ですぐに埋めました。しかし、何かがスティーブ・ジョブズを悩ませていました。 「まあ、円と楕円はいいですが、しかし、角が丸い長方形を描くのはどうですか?それはできますか今もですか?」

「いいえ、それを行う方法はありません。実際、それを行うのは非常に難しく、私たちは本当にそれを必要としているとは思いません。」スティーブは速い楕円形を絶賛しておらず、それでももっと欲しかったので、ビルは少し不満を抱いたと思います。

スティーブは突然より激しくなった。 「角の丸い長方形はどこでも!この部屋を見回すだけ!」。そしてもちろん、ホワイトボードや机やテーブルなど、たくさんありました。それから彼は窓を指摘した。 「そして外を見ると、実際にはどこを見てももっとたくさんあります!」彼はビルに、彼と一緒にブロックの周りを少し歩くように説得し、見つけた角の丸い長方形をすべて指摘しました。

スティーブとビルが角の丸い駐車禁止標識を通過したとき、それはトリックをしました。 「よし、あきらめる」とビルは懇願した。 「私が思ったほど難しいかどうかを確認します。」彼はそれに取り掛かるために家に帰った。

ビルは翌日の午後、大きな笑顔でテキサコタワーズに戻りました。彼のデモは現在、美しく丸い角を持つ長方形を、ほとんど無地の長方形の速度で、猛烈に速く描画しています。 LisaGrafにコードを追加したとき、彼はnewprimitive "RoundRects"という名前を付けました。今後数か月の間に、roundrectsは機能しユーザーインターフェースのさまざまな部分に働きかけ、すぐに必須です。

そうは言っても、私がやや面白かったと思うのは、AppleがiOS 7のUIの純粋な円に向かっていることです。Windows8には何がありますか?インターフェース用の非円形の四角形がたくさんあります。= Appleは丸められ、Microsoftは二乗されます!

4
JakeGould

顔は丸みがあります。画像の角をトリミングすると、ボーダーのカーブが頭のカーブに近づくので、同心性が高まります。これは、被写体に直接目を向け、特に顔をフレーミングします。

3
ahmacleod

昔は、複雑なjavascriptマスキングが必要だった、または丸みのある画像を取り除くために画像操作だけが必要でした。 border-radiusを使用すると、丸みのある画像を作成するのが簡単になります。それで、最も簡単な答えは、それが簡単で、通常の正方形の画像の型を壊すので、人々がそれをすることだと思います。

2
riotgear

最初の回答の同じ例を使用すると、円は(元の列よりも左から1番目の)四角形が少なくなる可能性がありますが、中央(左端の列)に冗長な背景があります。

小さい方の長方形(左から3番目の列)にトリミングすると、顔だけに集中できます。

四角形が退屈に思える場合は、他の形状を試すことができます。台形。最後の例(一番下の行)では、私が作成した高速台形作物は実際に顔と一致し、19世紀末のフレームのように見える円よりも男をより面白く見せています。退屈に見える男も、他の人より退屈に見えません。

enter image description here

1
Danny Varod

円と丸みを帯びたエッジは、直線と硬いエッジよりも認識負荷がかかりません。

「鋭いエッジのある長方形は、実際には、たとえば同じサイズの楕円よりも少し認知的な目に見える労力を要します。私たちの「中心窩」は、円を記録する際にさらに高速です。エッジは追加の神経画像ツールを含みます。したがって、プロセスは減速した」と語った。 -JürgNänni教授

角丸長方形の実現

0
RobbyReindeer

顔はプロフィール写真の最も重要な部分です。背景領域が少ないほど、より多くのユーザーが顔にfocusできます。

丸みを帯びたプロフィール画像は、コーナーの背景領域をトリミングします。

また、プロフィール写真と単純な写真をコンテンツから区別するのにも役立ちます。

0
Madalina Taina

トレンディなので丸くなっています。他の理由はありません。角のために人が顔を認識するのに苦労したことはありません。人間の脳の巨大な部分は顔認識専用であるため、顔を星型にしても認識に影響はありません。

0
Randy