回答:
[ Go ]ボタンは 大きくする 必要があり、主要なものであるため、すべてのコントラストが最も高くなります。
[ クリア ]ボタンは二次的なアクションであり、ニュートラルでなければならないため大丈夫です。
私にとって、スイッチボタンはサイズと制約の両方で存在感が強すぎます。Origin-Destinationのドロップダウンの間に配置します。このドロップダウンは、「単独で」より理にかなっています。
ここで、私にとって非常にクリーンで、この特定の目的のために使いやすさを提供する2つの同様のソリューション(私は個人的に最初のものを選択します):
参考までに、私はFont-Awesom eアイコンを使用しました。最初の画像のアイコンは(バージョンに応じて)icon-exchange / fa-exchangeであり、矢印はicon- arrow-left / rightおよび fa-arrow-left /です。正しい
場合はクリアボタン(へ/から)のみ2つのフィールドがクリアされます、とにかくのために必要であると思われないユーザーは、各ドロップダウンをクリックして選択を確認する必要がありますし、あなたはクリアボタンを追加する場合、これは変更されません。
この場合、削除することをお勧めします。これにより、よりクリーンなインターフェイスを取得し、ユーザーが値を追加しないアクションを実行できないようにします(さらに、選択したものを意図せずに削除します)。
解決策の1つは、優先順位によってボタンを視覚的に分離することです。
通常、プライマリボタン、セカンダリボタン、場合によってはターシャリボタンや非優先アクションボタンがあります。
プライマリとセカンダリでは、通常、2つのコントラストのレベルで好みのブランド色(純粋に主観的)をお勧めします。プライマリのコントラストが高く、セカンダリのコントラストがわずかに低い。
三次ボタンは、通常は避けて、代わりにリンクなどのまったく異なるビジュアルを使用しようとします。
だから、あなたの例を与えて、コンテキストを私ができると賭けて解釈すると、私はこのようなものを提案します:
これは非常に簡単な例であり、コントラストがアクセシビリティガイドラインを満たし、無効になっていないことを確認する必要があります(私の場合はそうであるため、微調整が必要です)
更新:これを投稿しているときに、これがStackExchangeが新しい投稿を作成するときに使用するパターンであることに気付きました。SAVEボタンはプライマリ、CANCELはターシャリで、ボタンではなくリンクとして表示されます。
コントラストの高い(たとえば黒白)色が常に最適であり、これによりオレンジ色のオプションがなくなります。そして、マーケティングに少し加えて、ボタン、アプリケーションの面であなたのページの残りの部分に使用されるカラースキームは何ですか?しかし、私が選択しなければならなかった場合:行く:緑。スイッチ...:マリンブルー; クリア:黒白。色も好みに関連していることを覚えておいてください。
(トピック外:2つのフィールド間でアイコンラベルの付いたボタンを使用すると、切り替え用の長いラベルを削除できます)
強調を示すために色の同様の色合いのコントラストを変更すると思います。どうして?(男性の12人に1人が色盲であり、女性の200人に1人が色盲です
また、システムを通過する目的のパスにユーザーを誘導したいので、Goボタンを暗くします。彼らはすべてのボタンをスキャンして処理するか、暗い色や大きなサイズのようなものを使用して、最初に見えるように意図した選択肢または80%の最も一般的な選択肢に引き付け、時間を節約するというyesと言うことができます。
この記事では、最も重要なボタンをそのように見せるべきだと述べています
以下の例を参照してください
下の画像ほど良く見えない(私の意見では)
その記事では、ボタンを適切な順序に並べることにも言及しています。だから私の意見では、英語を話すユーザーは左から右に行くので、右に行くボタンを置くでしょう(したがって、彼らは自然に終了記号を右に見ます)。アラビア語ユーザーの場合は左側に配置します。それがどのように私がそれを英国の市場に配置するかです。
その記事の最後のトピックは、破壊的なボタンを見つけにくくすることです 。あなたのシナリオでは、あなたが行くをクリックして誤って左に逃した場合、アクションを破壊するのではなく配送場所を変更する可能性がある場合、注文をそのように切り替えます。また、破壊的なタスクが必要だと感じた場合は確認できます(つまり、本当に?)。