web-dev-qa-db-ja.com

キャレットとシェブロンの違い

enter image description here

キャレットとシェブロンの間に機能的な違いはありますか?私たちの議論は、ドロップダウンとアコーディオンに何を使うべきか、そしてそれらを異なるものにするべきかどうかについてです。

7
Ana Neto

この2つに機能的な違いはないと思います。違いは、美学と視覚的な影響にあります。それに基づいて、決定を下す前に、以下の考慮事項を考えることができます。

1。近接

ドロップダウンまたはアコーディオンの場合、コンテンツと形状の間に大きな空白があると、ユーザーはアコーディオンのタイトルまたはドロップダウンの選択された値と開閉する形状を簡単に区別できます。ウィジェット。閉じたドロップダウンウィジェットには山形がある場合があり、十分な空白がない場合は、英語のVまたはWと混同される可能性があります。そのため、空白の近接性により違いが生じます。

enter image description here

この例が少しお役に立てば幸いです。ドロップダウンリストの選択した値が長くなる可能性があります。シェブロンに非常に近づくと混乱の可能性があり、デザイン言語を作成している間、デザインがほとんどの考慮事項に適合するようにこれを考慮する必要があります。

2。コントラスト

この意味で対照的に、形状とその背景を区別するユーザーの能力です。マテリアルデザインでは、大量のホワイトスペースを推奨しており、小さなシェブロンを見つけやすくしています。同時に、三角形がブロブとして表示され、不必要な存在が存在する場合があります。

ただし、色の味覚が要求するために暗闇で暗闇をデザインする場合は、十分な違いを作り、ユーザーの視覚的な負荷を減らして、小さな形と背景の違いを理解する必要があります。

enter image description here

これがFacebookが選択した三角形です。それは黒で、かなり暗い青の色合いの上に座っています。目立たせてユーザーの目ですばやく登録するには、違いを見つけるためにかなりの色のバリエーションがあることが不可欠です。山形は、そこではすぐに識別できない場合があります。

3。チェーンの一部とターミネーター

これはグラフィックとアートの側面からです。山形はチェーンの一部と見なされます。シェブロンはその前にシェブロンがあることを示します。ただし、ドロップダウンまたはアコーディオンの場合、方向を示すものであり、チェーンの一部ではありません。


これらの点についての裏付けデータはありませんが、これまでの私の経験に基づいたより多くの考えです。しかし、それは設計標準とユーザーのメンタルモデルに要約されます。最近のWeb UIの場合、シェブロンのオープンクローズがしばらく前から見られているため、3番目のポイントは適切ではない可能性があります。したがって、最低限の条件は、要件と、少なくとも上記の最初の2つの考慮事項に基づいて行う設計の選択に依存するということです。

私が助けてくれたことを願っています。

4
Sol

最近のウェブでは、この2つの間に大きな違いは見られません。 しかし、ユーザーのメンタルモデルについて考えると、シェブロンはドロップダウンやアコーディオンのキャレットに最適です

誰かがどちらかを選ぶ理由は、視覚的なバランスを維持するために、デザインのタイプに完全に基づいています。

Airbnb ドロップダウンにシェブロンダウンを使用:

enter image description here

そして [〜#〜] puma [〜#〜]

enter image description here

しかし、Facebookはキャレットを使用します。

enter image description here

3
DPS