web-dev-qa-db-ja.com

ウェブサイト上のすべてのリンクを同じ色にする必要がありますか？

私はWebデザイナーではないので、リンクとボタンの色について知りたいのですが。

リンクについて

すべてのリンクを同じ色にする必要があります。リンクが十分に表示されないように背景の色が異なる場合があることを知っていますか？これをどのように扱いますか？

リンクに2または異なる色を使用しても問題ありませんか？

ボタンについて

ボタンについてもほぼ同じ問題があります。ボタンに5色または6色の事前定義された色が必要で、Webサイト全体でそれを処理する必要がありますか？

現在、私はこのようなCSSファイルがあり、約10種類ボタンがあります。

login-button {
    background-color:blue;
    /***/
}
register-button {
    background-color:red;
    /***/
}
upload-button {
    background-color:green;
    /***/
}
add-instrument-button {
    background-color:orange;
    /***/
}
/*
more buttons..
*/

次のようなものがよいでしょう：

blue-button{}
green-button{}
orange-button{}
orange-dark-button{}

だから私は例えばのために再利用できます：.blue-buttonさまざまなアクション。どうやってこれを行うのですか？

website-designbuttonshyperlinks
10
Merlin

リンクについて

ここに一貫性に関する素晴らしい記事があります：

http://www.uxbooth.com/articles/consistency-key-to-a-better-user-experience/

数行

サイトのデザインも一貫している必要があります。ユーザーは、意識しているかどうかにかかわらず、詳細を覚えています。たとえば、ユーザーはWebサイトの特定の色を「リンクの色」として関連付け、ボディコピーの書体などを認識します。したがって、これらの領域で一貫性があると、見栄えが良くなるだけでなく、デザインですが、ユーザーにとってより身近なエクスペリエンスも提供します。

リンクを読みやすくするには、背景色を変更する必要があります。

状態（訪問したかどうか）に応じて、外観（読み取り色）を変えることを忘れないでください。

これも読むことができます：

ハイパーリンクを青にする必要がありますか？

特にこの部分

内部の一貫性は重要です[...]なので、青/紫/赤のパレットに固執する必要はありません。また、リンクを通常のテキストと区別することも重要です。区別は、通常、色、重量、または下線によって行われます。異なるリンク状態の異なる色は、使いやすさを向上させます。

ボタンについて

ボタンの色は、その状態と目的によって異なります。すべての困難は、ボタンの共通点を理解し、色を賢く選択することです。

私はアドバイスしませんが、誠実に3つのタイプの色から始める必要があります：2番目のアクションは淡いグレーまたは白、1番目のアクションは青またはWebサイトのグラフィックチャーターに一致するもの、および通話は非常にコントラストのある色アクションへ（必要な場合）。

13
Gildas Frémont

リンクの色：

  • 少なくとも一貫している必要があります（1つの色に固執する）。

  • また、テキスト内のリンクがどのように見えるかについてのユーザーの既存の知識を活用して、既存の規則に従う必要があると思います（ただし、これが衝突する非常に強力なデザインコンセプトがある場合、「次の規則」ルールは適用されません）石に設定されます）。

ボタンの色：

  • 色だけに頼るのは得策ではありません。多くの人は色が違って見えます（例：赤/緑の色覚異常）。
  • 明確な形状/アイコンにより、ユーザーはさまざまな種類のボタンの機能を簡単に区別できます。追加の場合はプラス（+）アイコン、アップロードの場合は上矢印などを使用できます。ボタンを機能カテゴリに整理し、同様のことを行うボタンを同様に表示します。
2
Franchesca