web-dev-qa-db-ja.com

携帯電話のメニュー画面のアイコンが正方形または長方形で、円形ではないのはなぜですか?

IOS、Android、Ubuntu、Win8、BADAなどのモバイルOSのアプリページを見ると、すべて丸い角または鋭い角の正方形のアイコンがあります(最初の画像に表示されています)。

企業が円形のアイコンを使用しない理由を知りたいのですが(2番目の画像の例)。

Image of iPhone with rounded corner square iconsImage with circular icons

これの背後にある理由は何でしょうか?

8
Ankit

あなたはiOSと携帯電話を混同しています。

アイコンは丸形でも四角形でもないにする必要があります。可読性を向上させて使いやすくするために、一意のアウトラインを許可する必要があります。

これはまさにAndroid=が行ったことであり、iOSに対するUXの大幅な改善です。

enter image description here

編集:多くの人々はアイコンの形状に焦点を合わせることができず、画像の他の側面に焦点を合わせることができないようです。そのため、画像を1つに変更しましたそれはより近代的なAndroidですが、アイコンの形があまりよく表示されません。

29
JohnGB

その理由は、アイコンバッジ内のスペース使用量の増加である可能性があります。正方形または丸みを帯びた正方形を使用すると、内部に大きなアイコンを配置して、無駄なスペースを減らすことができます。

Icon shapes rounded square vs. cicrular

破線は、インターフェース内のアイコンとアプリ名のプレースホルダーを表します。このスペース内のバッジ自体は、丸みを帯びたものよりも四角形の方が大きい場合があります。これにより、使用するスペースが増えます。

同時に、バッジの画像/アイコンはさらに大きくなります(ただし、丸いアイコンもあり、丸いバッジにほぼ完全に適合します。ただし、これにより、アイコンは丸みを帯びている必要があります。それ以外の場合は、縮小またはカットする必要があります。使用した例でも確認できます)。アイコンを大きくすることは、その詳細を維持し、ユーザーがアイコンを認識しやすくするために重要です。

ただし、丸いアイコンまたはほぼ丸いアイコンのインターフェイスがあります。例の1つはNokiaです。

enter image description here

18
Dominik Oslizlo

表示領域とクリック可能領域は異なる場合がありますが、ユーザーが期待することをインターフェイスが実行する場合は、それらをできるだけ密接に配置する必要があります。長方形の角をタップすると、デバイスが長方形を選択したことを認識するはずです。しかし、円の間の対角線上の広い領域をタップするとどうなりますか?プログラムがうまく構築されていれば、おそらく最も近い円が選択されますが、切断されているように感じます。ボタンの領域内を実際に触れずにボタンを選択したため、実際にボタンを押したようには見えません。

ゲシュタルトの閉包原理 も機能します。電話OSの設計者はおそらく、インターフェースを一貫性のあるものにしたいと考えていました。長方形のエッジにより、アイコン間の暗黙の線がより明確になります(これにより、意図した場所をタップしやすくなります)。

4
Graham Herrli

アイコンのスタイリングは、主にブランドのアイデンティティと一貫性に関係するデザインの決定であり、実際にはUXまたはユーザビリティの決定ではありません。 AppleのiOSブランドアイデンティティは、丸みを帯びた丸いものです(iOSアプリのアイコンを作成すると、角を丸くしてフラットにすることができ、iOSは自動的に丸みを帯びた光沢に変換します)が、他のブランドには独自の視覚スタイル/アイデンティティがあります。

1
obelia