web-dev-qa-db-ja.com

アイテムをマークする色、白黒のアイテムはどうですか?

乗換案内アプリを作成し、色を使用して列車の路線を示したいと考えています(これは、鉄道会社の説明と一致します:黄色い線、青い線など)。そこで、非常に基本的なスクリーンショットを添付しました。

enter image description here

しかし、世界の一部の地域では、黒い線、白い線があります!ちょっとこだわっています、何か考えはありますか? Tks。

2

@laurendankiewiczが提案したように、写真のように輪郭が描かれたアイコンを使用できます。
enter image description here

しかし、私はあなたも考慮する必要があると思います:

  1. アクセシビリティの理由で情報を伝えるための唯一の手段として、カラーコードを使用しないでください。 NoCoffeeビジョンシミュレーター などのツールを使用して評価できます。
  2. 線の色がユーザーにとって重要な情報である場合は、目立つように強調表示することをお勧めします。線の色は(地下鉄マップのように)コンテキストで理解できるように見えますが、色付きのアイコンのみを使用すると、それほど目立たない情報が伝達されます
3

ユーザーの視覚的インジケータとして色を使用するだけでアクセシビリティの重要な懸念があります色覚異常のユーザーが異なる色を互いに区別するのに苦労して、アプリを役に立たなくする可能性があるため。 WCAGガイドラインを引用するには

色なしで表示したときにテキストとグラフィックスが理解できることを確認してください。

色だけを使用して情報を伝える場合、特定の色を区別できない人と、非カラーまたは非視覚ディスプレイを備えたデバイスを使用しているユーザーは、情報を受け取りません。

たとえば、先ほど提供したスクリーンショットを撮ると、デューテラノープ(赤と緑の色覚異常)を持つ人が次のように見えます。

enter image description here

あなたが見ることができるように、彼は緑の線が実際に茶色の線ではないことを見つけるのに苦労しました(あなたが1つを持っていると仮定してなど)。

私の提案はまた、アイコンと一緒にテキストを提供して、それがどのラインであるかをユーザーに通知することです。これは、視覚的なインジケーターとして色のみに依存するという問題の解決にも役立ちます

Googleマップはアイコンに単一の色を使用しますが、それらが言及する色の視覚的インジケーターとしてそれらに言及された色の陰影付きボックスを使用します

enter image description here

1
Mervin

白い電車の場合、灰色で円の輪郭を描くことができ(円自体が白で塗りつぶされます)、電車の輪郭が灰色になります。このように、あなたはあなたの白い背景を得て、列車はまだ見えています。

黒の電車線の場合、背景の円を黒にし、電車を白にすることができます。

1

あなたがそれを白/黒にした場合、私は推測しますとの関係で背景と他のトラック、あなたは大丈夫でなければなりません。

プラス白い線でさえ、看板や情報掲示板などの他の非デジタルの場所でいくつかの方法で示されますあなたはそのデータから手がかりをとることができます。レンガとモルタルの存在は、アプリがそれを表現する方法と非常によく似ています。これは相対性理論(および該当する場合はブランディング)に不可欠です

FFFのみが白を作成しません。青/赤/白の場合、他のトラックと簡単に区別できる非常に明るい色で、背景は白を表すのに十分なはずです。黒色も同じです。

HTMLカラーロースターには多くの明るい色があり、ボーダーやストロークと組み合わせるとうまくいくはずです。

より根本的な考えは、国に基づいて個別に展開し、列車の資産をW、G、Bなどの円に置き換えることですが、それをスクラッチすると、これは非常に最後の手段です。私自身はあまり好きではありません。

0
Sol

「白い線」の場合は、黒と同じ色を塗りつぶしてください。そして、「黒い線」のために、灰色の塗りつぶしの黒い電車に行き、#efefefまたは#f0f0f0のような色。

0
user2042215