web-dev-qa-db-ja.com

[登録]ボタンと[ログイン]ボタンの色は何ですか?

現在のログインページは次のようになります。 Login page

私は基本的にランダムに緑と灰色を選び、それらを適切に表現する方法を考えています。この画面は、URLを直接入力するユーザーにのみ表示されるため、ログインボタンが主なアクションです。

これをどのように表示できますか?

13
penalosa

ログインボタンの色は、スタイルテーマのメインの色と一致している必要があります。

どうやら、あなたは材料設計を使用しています。たとえば、テーマで青(#2196F3)をプライマリカラーとして使用している場合、プライマリアクションボタンも青にして、ページの他の部分と対比させて簡単に区別できるようにする必要があります。

login page with blue colored log in button and colorless and borderless registration button

ページの2次アクションである[登録]ボタンは、1次アクションより目立たないようにする必要があるため、色を付けません。 Googleマテリアルデザインから カラースタイル および ボタンガイドライン を表示できます。

Google material design style guidelines for the buttons and their color

25

「行動を促すフレーズ」は緑である必要はなく、一貫している必要があります。設計ガイドがある場合はそれから始め、ない場合は作成して、アプリケーション/サイト全体で一貫したルックアンドフィールを提供します。

7
DarrylGodden

特定の色に関連付けられているactionsはごくわずかです。これらの4つの「色」(表現を単純にするために灰色を色として数える)は、UI要素が色だけで何をするのかを理解できる色の例です。

  1. 終了する場合は赤:キャンセル(アクションを終了)、削除(存在を終了)、クローズ(アプリケーション/ポップアップを終了)、受話器を置いて(通話を終了)最も一般的なものに名前を付けます。
  2. 承認のために緑色:呼び出しを受け入れ、アクションを確認します。
  3. ハイパーリンクの青いフォント
  4. 無効状態の場合は灰色

ログインまたは登録には、(少なくとも私の知る限り)一般的な色はありません。したがって、アクションを説明するために色を使用しようとするのではなく、色と非色の違いを使用してください。色はテーマの定義色でなければなりません。

通常、ビューごとに1つの「デフォルト」ボタンのみに色を付けます。デフォルトのボタンは、人々が通常使用するボタンです(心理的には、あなたが使用するボタンであると主張することもできますwant使用する人々)。

ログインフォームの場合、一度ログインすると毎回ログインするため、「ログイン」となります。したがって、登録ボタンの色は「なし」(ボタンを使い続ける場合はリンクまたは白いボタンのみ)である必要がありますが、ログインボタンの色は「企業のデザイン」によって異なります。

それ以外に、特にあなたが提供した「ランダムな」デザインがその最良の例であるため、カラーリングの1つの一般的な側面を強調したいと思います。

常に、ユーザーグループの約5%が色覚異常であることを覚えておいてください。あなたの例では、それらの人々は2つの灰色のボタンを見るでしょう。

6
LWChris

登録しようとしている新しいユーザーに、存在しないパスワードの要求が表示されているのはわかりませんか?または、そのボタンを押したときに登録されるパスワードを要求されていますか?その場合、彼はそれを正しく入力したことをどのようにして知るのですか?

したがって、ユーザーに最初に表示されるのは、LOGIN(既存のアカウントへ)とREGISTER(新しいユーザーとして)の2つのボタンがあるだけだと思いました。画面のボタンの近くに括弧で囲まれたテキストがあると便利です。その後、LOGINはユーザーIDとパスワードを要求し、新しいユーザーを作成する前に、他に必要なものを登録します。

効率上の理由でサーバーへの複数回の往復を望まない場合は、[ログイン]ボタンがクリックされるまで、電子メールとパスワードのフィールドを非表示にしてください。マルチスクリーン登録プロセスでない場合は、REGISTERとその関連フィールドについても同様です。

または、明らかに異なる「まだ登録されていませんか?ここをクリックして無料アカウントを作成してください」などのボタンだけではなく、明らかなハイパーリンクのスタイルでログイン専用画面を表示します。

もう1つ不足していることがあります。「パスワードを忘れた」(ハイパーリンク)

結局のところ、エラー-警告-期待のアラートスペクトル(通常は赤から黄色)でなければ、ボタンの色が重要であると考える傾向はありません。個人的には青が好きです。サイトの全体的なカラーテーマはここに関連しています。

2
nigel222

@KristiyanLukanovの回答に加えて、ボタンが無効になっている場合は色を使用しないでください。

  • 無効:ボタンが有効になっていない場合、ボタンに色を付けることはできません。

disabled buttons

  • 有効:強調したい場合は、両方のボタンで アクセントカラー または1つだけを使用できます。

enabled buttons

1
Alvaro