日9:論理的にWebアプリボタンのダークモードカラーパレットを選ぶ

TLドクター
埋め込みGoogleマップを使用してWebアプリケーション上のボタンのダークモードのカラースキームを設計するには、暗いモードUIが視覚モードの対応と視覚的に一致するように、光モードのカラースキームを設計するために使用可能な限り、同じロジックを適用します.
しかし、私はダークモードについてユニークなものがいくつかあることを学びました.
不透明度は、視覚的に類似した半透明レベルを達成するために、光モードよりも低くする必要がある(第2節参照).
また、グロー効果のための影のぼかし半径は、光る光を自然に見えるために、光モードより長くなければなりません(セクション6を見てください).

導入
私は設計/コーディング理想的な地図アプリ、Googleマップのユーザーエクスペリエンスを向上させるWebアプリケーション(詳細を参照).
アプリの主なユーザーインターフェイスは、Googleマップのフルスクリーンを埋め込む主要な機能のボタンを地図の上に画面の角に配置されます.
これらのボタンのデザインとコーディングはこのブログシリーズで説明されています.

Day 7: Making buttons look like "clouds" for embedded Google Maps

Masa Kudamatsu ・ Sep 30 ・ 25 min read

#svg #buttons #uidesign #webdev

Day 8: Positioning buttons over embedded Google Maps

Masa Kudamatsu ・ Oct 7 ・ 18 min read

#googlemaps #styledcomponents #css #uidesign

この記事は、ボタンのダークモードカラースキームをどのように設計したかを説明するボタンデザインの第3です.

1 .光モードとの整合性
色計画が暗くて軽いモードの間で矛盾しているならば、ユーザーは異なるアプリケーションとして各々のモードを知覚するかもしれません.それはアプリをブランディングの失敗になります.
光と暗いモードを互いに一致させる1つの方法は、可能な限りの両方のモードの色の選択の背後に同じロジックを使用することです.
理想的な地図アプリでは、ボタンのライトモードのカラースキームは次のとおりです
ボタンのデフォルト状態に対する光モードカラースキーム(画像源:著者)
ボタンのフォーカス／ホバー状態のための光モードカラースキーム(画像源:著者)
各色は理由(詳細を参照)のために選択されます.私は暗いモードの対応する色を選択するには、可能な限り同じ理由に従います.

塗りつぶし色
ライトモードのためにrgba(255, 255, 255, 0.93) , 半透明白色の理由

“Clouds are white. Making the button semi-transparent allows the map beneath to be partially visible, creating an impression that the cloud-shaped button is floating over the map. The opacity value of 0.93 is chosen to strike the balance between making it recognized as a button and creating the “floating” impression.” — Section 6.1 of

暗いモードでは、純粋な白は、ユーザーの目のためにあまりにも強烈になります.任意のグレアを避けるために、ボタンの色は、暗いオレンジ色の地図上で明るい色に同じようなレベルの輝度を持つ必要があります#ae6f2f ) (詳細を参照)

私の理想的な地図アプリの暗いテーマで埋め込まれたGoogleマップ(著者によるスクリーンショット)
上記のスクリーンショットでは、Googleマップの白いデフォルトの検索ボックスのボタンは、地図の暗いテーマに対してglaringどのように注意してください.
暗いテーマのためのボタンの色を埋めるので、私は選ぶrgb(123,123,123) その輝度は、通りの暗いオレンジ色に似ています:

輝度コントラスト比rgb(123, 123, 123) and #ae6f2f (画像ソース:contrast-ratio.com )
雲の外観を強化するために、私はボタンが半透明であることを望みます.私は不透明度のいくつかの値を試した0.8 ルックスベスト、下の地図を少しボタンをされている印象を失うことなく表示することができます.
興味深いことに、これは不透明度よりも低い0.93 昼間色計画のために.暗いテーマの全体的な輝度のより低いレベルが半透明の観察を成し遂げるために不透明度のより低いレベルを必要とするということを、私は知りました.

アウトラインカラー
ライトモードのボタンのアウトラインについてはrgb(148,148,148) 以下の理由から:

“The relative luminance in the map’s color scheme ranges from 6 of the gray of city blocks (#898989 ) to 21 of the pure white of streets (where the value refers to the contrast ratio against pure black). ... If the cloud-shaped button is above streets on the map, however, it visually merges with them due to the lack of luminance contrast. A solution is to outline the cloud-shaped button with a shade of gray that’s just enough to satisfy the 3-to-1 contrast ratio against pure white. — Section 6.3 of

暗いモードでは、私はちょうど地図上の通りの色に輝度の類似したレベルを持っているボタンの塗りつぶし色を設定しました.従って、ライトモードの場合と同様の配慮が必要である.
それで、私は都市ブロックと同じ灰色の輪郭にアウトラインを加えます.#2b2b2b , ボタンに.シティブロックと街路の色が輝度の3 - 1コントラスト比を満たすために選ばれたので、これはその背景に対する知覚的に異なったボタンを確実にします.

シャドウカラー
ライトモードでは、ボタンの影の色はrgba(0,0,0,0.33) , 半透明の黒.この影の色は

“the distinction between the button outline and the shadow gets blurry, and the outline’s gray will be perceived as part of the shadow.” — Section 7.5 of

暗いモードのためにこのデザイン戦略を実装するために、私は地図の暗いオレンジ色の通りの背景に対する輝度コントラストがボタンのアウトラインの暗い灰色に類似している黒の不透明度のレベルを捜します.#2b2b2b ). 0.65の不透明度が仕事をしていることが分かります.

輝度コントラスト#ae6f2f and rgba(0, 0, 0, 0.65) 背景として前者を使用する場合(画像ソース).contrast-ratio.com )

輝度コントラスト#ae6f2f and #2b2b2b (画像ソース:contrast-ratio.com )
でも使えないrgba(0,0,0,0.65) シャドウ色として、ボタンの影が自然に見えるために、それはぼかし半径の異なる程度で3つの層の低下影である必要がありますAhlin 2019 ).
3層の影で0.65(または35 %の透明度)の不透明度を達成するためには、各層は0.3(または70 %の透明度)の不透明度を必要とする.ぼかし半径の正の値で、影のついた要素の端の影の不透明度は、指定された半分の半分です.それで、我々は0.3の不透明度を二倍にして、GETrgba(0,0,0,0.6) 影の色として.
ボタンの影のCSS宣言は次のようになります.

filter: 
  drop-shadow(0px 0px 1px rgba(0,0,0,0.6)) 
  drop-shadow(0px 0px 2px rgba(0,0,0,0.6))
  drop-shadow(0px 0px 4px rgba(0,0,0,0.6));  

使用するfilter: drop-shadow() の代わりにbox-shadow 我々のボタンがSVGコードでできているのでOlawanle 2021 ).
この方法では、ボタンのアウトラインは、影にきれいにブレンド.

ボタンラベル色
ダークモードのボタンラベルの色については、ライトモードから別のロジックが必要です.ライトモードでは、ボタンの塗りつぶし色は白、灰色の色合いの広い範囲が視覚的に特徴的です.しかし、暗いモードでは、ボタンの塗りつぶし色は灰色の中程度の濃淡であり、それに対して明るさコントラストの十分なレベルを持つ灰色の淡い色合いの限られた範囲しかない.
私は行くrgb(218,218,218) 輝度コントラスト比は、ボタンの塗りつぶし色に対して3.02から1であるrgb(123,123,123) :
輝度コントラスト比rgb(123,123,123) and rgb(218,218,218) (画像ソース:contrast-ratio.com )
ボタンのデフォルト状態のダークモードカラースキームを要約します.

ボタンのデフォルト状態に対するダークモードカラースキーム(画像源:著者)

6 .フォーカス/ホバー状態スタイル
ライトモードでは、ボタンのフォーカスとホバーの状態は、シアンブルーの陰を備えていますrgb(69, 159, 189) ) その輪郭と影の色として、輝く効果を作成します.そして、この色は、ボタンの塗り潰し色に対する3 - to - 1輝度コントラスト比を満たす.
暗いモードのために、私はそれが焦点であるとき、ボタンが月光で照らされるように見えて欲しいです.移動する簡単な方法は、アウトラインのためのシャドウと半透明ホワイトの単層のために純粋な白を使用することです.したがって、次のCSSコードに従います.

button:focus #cloud,
button:hover #cloud {
  stroke: rgba(255,255,255,0.4);
}

button:focus svg,
button:hover svg {
  filter: drop-shadow(0 0 10px rgb(255,255,255));
}

私はstorke プロパティではなくborder , ボタンがSVGのもので描かれているのでアウトラインカラーを指定するには<path id="#cloud"> 要素.
私の使用rgba(255,255,255,0.4) 輪郭色として.0.4の不透明度は、アウトラインがあまりにも明白ではないことを保証します.
それから、私はぼかし半径を設定します10px 影のために、昼間のスタイルのために使われる5 pxより大きい.私は正確に理由を知りません、しかし、これらの調整はそれ以外の輝きより自然に見えます.おそらく、光る光が昼間より夜に広まったように見えるからです.
対応して、フォーカス/ホバー状態のボタンラベル色を純粋な白に設定しますrgb(255,255,255) ) 同様に

button:focus svg,
button:hover svg {
  fill: rgb(255, 255, 255);
}

ここで私はfill プロパティではなくcolor ボタンのラベルがSVGイメージであるためです.
フォーカス/ホバー状態のダークモードカラースキームをまとめます.

ボタンのフォーカス／ホバー状態のためのダークモードカラースキーム(画像源:著者)
純粋な白は夜に見られるときに輝いているかもしれません.私は光モードのフォーカス状態を変更するので、この決定をレビューします.

アクティブな状態
ライトモードの場合、アクティブ状態(すなわち、ユーザーがボタンをタップ/クリックしたときの外観)は、ユーザーのアクションに応答してボタンをフリッカにするためにアウトラインとシャドウを削除するようにスタイル設定されます.
我々が暗いモードのためにこれを変える理由がありません.したがって:

  button:active #cloud {
    stroke: none;
  }
  button:active svg {
    filter: none;
  }

次のステップ
ボタンのすべての設定のダークモードのテーマでは、私の理想的なマップのアプリは以下のように暗いモードのUIを表示する必要があります

暗いモードでダークモードボタンを内蔵Googleマップ
CSSとJavaScriptを使用してダークモードUIを実装するためのケーキの一部でなければなりません.標準的なテクニックは、CSS変数を属性セレクタで使用し、暗黒モードをオンとオフに切り替えるときに属性を切り替えることですAdhuham 2020 and Dodds 2020 ).
まあ、それは私の最初の考えだった.そして、私は間違っていました.
(このブログシリーズの次の記事に続きます)

参考文献
アダム(2020年)A Complete Guide to Dark Mode on the Web ”, CGIトリック、2020年1月1日.
アハリン,トビアスSmoother & sharper shadows with layered box-shadows ”, トビサザリン2019年9月19日.
ドッド、ケントC .(2020)Use CSS Variables instead of React Context ”, 壮大な反応、2020年10月.
Olawanle , Joel ( 2021 )Adding Shadows to SVG Icons With CSS and SVG Filters ”, 2021年11月11日.