web-dev-qa-db-ja.com

異なる形状のボタンを一緒に持つことは意味がありますか?

通常、一緒に表示されるボタンも視覚的に似ています。

異なる形状のボタンを一緒に表示することが理にかなっている状況はありますか?例えば。丸い長方形のボタンと円形のボタン

分析する大まかな例として、ここにスケッチがあります。 enter image description here

4
Yogesch

私はあなたがほとんどのウェブサイトのように行うことをお勧めします。同じ形、並べて、色違い。メインの使用済みボタンを強調表示して最初に配置します。以下の良い例を参照してください。

あなたはフォーマットについてだけ尋ねますが、私の答えはもう少し複雑ですが、これは間違いなく役立つかもしれません。

ボタンの位置を直感的に変更できるようにします

より多くのボタン、より多くのオプション、より多くの決定。何もしない、または間違った行動を取るのは簡単です。

ユーザーに影響を与えて、各リンクまたはボタンに適切な優先順位を与え、適切なアクションを実行する必要があります。 font-weight、font-size、colorsを使用できます。もちろん、最大のボタンが最も重要です。

位置は、ユーザーが逆ページスキャンを防止するために非常に重要です。リバースページスキャンは適切ではなく、自然な流れを壊し、不必要なスクロールを生成し、おそらく疑問が生じます。繰り返しになりますが、疑問や選択肢が多すぎるユーザーは、何もしないか間違った行動を取る傾向があります。

いくつかの例を参照してください:

PS:これはモバイルの例ですが、デスクトップでもまったく同じように機能します。最も重要なのはコンセプトです。

enter image description hereenter image description hereenter image description hereenter image description hereenter image description hereenter image description here

数か月前に X Movement の投稿でこれらの画像を見つけましたが、残念ながら名前を覚えていませんでした。

10
Rafael Perozin

ボタンに使用できる形状は限られています-長方形、角丸長方形、円。

ボタンの形状が多すぎると、ボタンではなくアイコンのように見えません。

人々は一般にインターフェースをスキャンし、一貫性はアクションに対するユーザーの注意を固定するのに役立つため、アクションボタンの一貫した形状を維持する必要があります。繰り返しになりますが、ナビゲーション用の矢印形状、何かを追加するための+付きの丸いボタン、展開するための+付きの正方形のボタンなど、一部のボタンがユーザーのメンタルモデルで定義済みの意味を持つ場合、これらの形状を使用することには意味があります。

ただし、アクションとしてテキストが表示されているボタンは、形が一貫している必要があります。それらの状態、アフォーダンス、可用性は、フォント/カラー効果を介して表すことができます。

2
Omkar Chogale

使用しているメタファーとそのルーツを検討してください。ボタン。ボタンとは?これらは、「押す」または「クリックする」ことでアクションを実行できる要素です。この比喩はどこから来たのですか?物理マシンから。

物理マシンには、サイズや形が異なるボタンが互いに近くにありますか?はい!目の前のキーボードを見下ろしてください。グリッドレイアウトのPlanck、Preonic、またはその他のオーソリニアを使用していないとすると、1u(1つのキーユニット)、2u、1.5u、2.25u、6u、およびおそらく同じ長さの他のすべてのキーが表示されます。 。車のダッシュボードや産業環境のHMIを見ると、通常、ボタンにはさまざまなサイズと形状(色、高さ、テクスチャ、ラベルなど)があります。

したがって、そうです、特に、多くのボタンが存在するか、区別したい場合は、さまざまな形状のボタン(形状のバリエーションまたは同じ形状ファミリのボタンを含む)を使用することが理にかなっていると思いますボタンの範囲を広げます。

2
sintax

ボタンが意味的/機能的に関連している場合、ボタンは外観に関係なく近接している必要があります。

例としては、「キャンセル」ボタンと「送信」ボタンを持つウィンドウ/スクリーンがあります。一般的な方法は、ウィンドウ/スクリーンの反対側に配置することですが、人々の中心視野が非常に限られているため、これは理想的ではありません。

各ボタンには個別の機能がありますが、一般的な効果ははるかに明白です。どちらも現在のウィンドウ/画面を閉じます。それらは中央で互いに並んでいる必要がありますが、より目立つように作成することもできます。

この例のボタンは兄弟と考えてください。外観は同じではないかもしれませんが、共通点があるため、一緒に行く必要があります。

2
Tim Huynh