私は基本的にランダムに緑と灰色を選び、それらを適切に表現する方法を考えています。この画面は、URLを直接入力するユーザーにのみ表示されるため、ログインボタンが主なアクションです。
これをどのように表示できますか?
「行動を促すフレーズ」は緑である必要はなく、一貫している必要があります。設計ガイドがある場合はそれから始め、ない場合は作成して、アプリケーション/サイト全体で一貫したルックアンドフィールを提供します。
特定の色に関連付けられているactionsはごくわずかです。これらの4つの「色」(表現を単純にするために灰色を色として数える)は、UI要素が色だけで何をするのかを理解できる色の例です。
ログインまたは登録には、(少なくとも私の知る限り)一般的な色はありません。したがって、アクションを説明するために色を使用しようとするのではなく、色と非色の違いを使用してください。色はテーマの定義色でなければなりません。
通常、ビューごとに1つの「デフォルト」ボタンのみに色を付けます。デフォルトのボタンは、人々が通常使用するボタンです(心理的には、あなたが使用するボタンであると主張することもできますwant使用する人々)。
ログインフォームの場合、一度ログインすると毎回ログインするため、「ログイン」となります。したがって、登録ボタンの色は「なし」(ボタンを使い続ける場合はリンクまたは白いボタンのみ)である必要がありますが、ログインボタンの色は「企業のデザイン」によって異なります。
それ以外に、特にあなたが提供した「ランダムな」デザインがその最良の例であるため、カラーリングの1つの一般的な側面を強調したいと思います。
常に、ユーザーグループの約5%が色覚異常であることを覚えておいてください。あなたの例では、それらの人々は2つの灰色のボタンを見るでしょう。
登録しようとしている新しいユーザーに、存在しないパスワードの要求が表示されているのはわかりませんか?または、そのボタンを押したときに登録されるパスワードを要求されていますか?その場合、彼はそれを正しく入力したことをどのようにして知るのですか?
したがって、ユーザーに最初に表示されるのは、LOGIN(既存のアカウントへ)とREGISTER(新しいユーザーとして)の2つのボタンがあるだけだと思いました。画面のボタンの近くに括弧で囲まれたテキストがあると便利です。その後、LOGINはユーザーIDとパスワードを要求し、新しいユーザーを作成する前に、他に必要なものを登録します。
効率上の理由でサーバーへの複数回の往復を望まない場合は、[ログイン]ボタンがクリックされるまで、電子メールとパスワードのフィールドを非表示にしてください。マルチスクリーン登録プロセスでない場合は、REGISTERとその関連フィールドについても同様です。
または、明らかに異なる「まだ登録されていませんか?ここをクリックして無料アカウントを作成してください」などのボタンだけではなく、明らかなハイパーリンクのスタイルでログイン専用画面を表示します。
もう1つ不足していることがあります。「パスワードを忘れた」(ハイパーリンク)
結局のところ、エラー-警告-期待のアラートスペクトル(通常は赤から黄色)でなければ、ボタンの色が重要であると考える傾向はありません。個人的には青が好きです。サイトの全体的なカラーテーマはここに関連しています。
@KristiyanLukanovの回答に加えて、ボタンが無効になっている場合は色を使用しないでください。