暗黒の時代がやってくる

または、アプリケーションや Web サイトのダーク モードを開発するときに留意すべきこと

2018 年は、ダークモードが登場しつつあることを示しました。 2019 年も半ばを迎えた今、私たちは自信を持って言えます。彼らはここにいて、どこにでもいます。

古い黒地に緑のモニターの例

ダークモードはまったく新しい概念ではないという事実から始めましょう。 かなり長い間使われてきました。 そしてかつて、実際、長い間、これが唯一使用されていました。モニターは「黒地に緑」の種類のものでしたが、それは放射線にさらされると内部の発光コーティングが緑がかった輝きを発したからにすぎませんでした。 。

しかし、カラー モニターの導入後も、ダーク モードは存在し続けました。 なぜそうなるのでしょうか?

今日、3 人に XNUMX 人がアプリケーションにダーク テーマを追加しようと急いでいる理由を説明する主な動機は XNUMX つあります。 まず第一に、コンピューターはどこにでもあります。 私たちが見ているどこにでも、何らかのスクリーンがあります。 私たちは朝から夜遅くまでモバイルデバイスを使用します。 ダーク モードの存在により、就寝前にソーシャル フィードを「最後に」スクロールする際の目の疲れが軽減されます。 ネットワーク。 (あなたが私と同じなら、「前回」という言葉は XNUMX 時間のスクロールを意味するかもしれません R/エンジニアリングポルノ。 ダークモード？ はい、お願いします！ )

もう一つの理由は、新しいディスプレイ製造技術です。 Apple、Google、Samsung、Huaweiなどの大企業の主力モデルはすべてOLEDスクリーンを搭載しており、LCDディスプレイとは異なりバックライトを必要としません。 これはバッテリーにとって本当に朗報です。 携帯電話で黒い四角の画像を見ていると想像してください。 LCD の場合、画面の大部分が黒であっても、バックライトは画面全体を照らします。 しかし、OLED ディスプレイで同じ画像を表示すると、黒い四角を構成するピクセルがオフになるだけです。 これは、エネルギーをまったく消費しないことを意味します。

このようなタイプのディスプレイにより、ダーク モードがさらに面白くなります。 ダーク インターフェイスを使用すると、デバイスのバッテリー寿命を大幅に延ばすことができます。 昨年 XNUMX 月の Android Dev Summit の事実と数字をチェックして、自分の目で確かめてください。。 ダークモードはもちろん UI の変更と密接に関係しているので、知識を磨きましょう。

ダークモード 101

まず第一に、「暗い」は「黒」と同じではありません。 白い背景を黒い背景に置き換えようとしないでください。影を使用できなくなります。 このようなデザインは（悪い意味で）超フラットになります。

シェーディング/ライティングの基本原則を覚えておくことが重要です。 より高い位置にあるオブジェクトは影が明るくなり、現実の照明とシェーディングをシミュレートする必要があります。 これにより、さまざまなコンポーネントとその階層を区別しやすくなります。

影付きの 100 つの同一の灰色の正方形。121212 つは XNUMX% 黒の背景に、もう XNUMX つは #XNUMX にあります。 オブジェクトが上昇すると、明るいグレーの色合いになります。

ダークテーマでも、コントラストが問題ない限り、通常のベースカラーを使用できます。 例を挙げて説明しましょう。

このインターフェイスでは、主なアクションは下部バーにある大きな青いボタンです。 ライトモードとダークモードを切り替えるときのコントラストの点では問題はなく、ボタンは依然として目を引き、アイコンは鮮明で、全体的にはすべて問題ありません。

同じ色がテキストなど、さまざまな方法で使用される場合、問題が発生します。 メインカラーの（かなり）彩度の低い色合いを使用してみるか、ブランドカラーをインターフェースに組み込む他の方法を探してください。

左: 黒地に赤は見た目が悪い。 右: 彩度を下げると、すべてが良く見えます。 — 約翻訳

警告色やエラー色など、使用した可能性のある他の強い色にも同じことが当てはまります。 Google では、デフォルトのエラー カラーの上に 40% の白いレイヤー オーバーレイを使用しています。 マテリアル デザインのガイドライン ダークモードに切り替えるとき。 これは、AA 標準に一致するようにコントラスト レベルを向上させるため、非常に良い出発点です。 もちろん、設定はいつでも必要に応じて変更できますが、コントラスト レベルを必ず確認してください。 ちなみに、この目的に役立つツールは Sketch プラグインです - スターク、これは 2 つのレイヤー間にどれだけのコントラストがあるかを正確に示します。

テキストについてはどうですか？

ここではすべてがシンプルです。100% 黒で 100% 白であってはならず、その逆も同様です。 白はすべての波長の光波を反射し、黒は吸収します。 100% 黒の背景に 100% 白のテキストを配置すると、文字が光を反射して汚れ、読みにくくなり、可読性に悪影響を及ぼします。

100% 白い背景でも同様で、光が反射しすぎて単語に完全に焦点を合わせることができません。 白い色を少し柔らかくして、背景と黒い背景のテキストにライトグレーを使用してみてください。 これにより目の疲れが軽減され、 彼らの過電圧

ダークモードが登場し、消えることはありません

私たちがスクリーンの前で過ごす時間は増え続けており、毎日、朝起きた瞬間から眠りにつくまで、私たちの生活の中に新しいスクリーンが現れます。 これはかなり新しい現象であり、私たちの目は深夜に画面を見る時間が増加することにまだ慣れていません。 ここでダークモードが活躍します。 この機能が macOS とマテリアル デザイン (おそらく iOS) に導入されたことで、遅かれ早かれ、モバイルとデスクトップの両方のすべてのアプリケーションでデフォルトになると考えられます。 そして、これについては準備をしておいたほうが良いでしょう！

ダーク モードを実装しない唯一の理由は、アプリケーションが明るい日中のみで使用されることが 100% 確実である場合です。 ただし、これは頻繁に起こるわけではありません。

前にまとめた基本原則以外にも、ダーク モードを実装する際に特別な注意が必要な点について言及する価値があります。

アクセシビリティの観点から見ると、ダーク モードは一般的にコントラストが低く、読みやすさがまったく向上しないため、最も便利とは言えません。

ソース

しかし、就寝の準備をしているところを想像してください。本当に眠りたいのですが、眠りにつく直前に、一晩も待てない非常に重要なメッセージを誰かに送信する必要があることを思い出します。 携帯電話を手に取り、電源をオンにすると、ああああ... iMessage の明るい背景で、さらに 3 時間は目が覚めるでしょう。暗い背景に明るいテキストは最もアクセスしやすいとは考えられていませんが、この瞬間にダーク モードを使用すると、利便性がXNUMX万倍向上します。 それはすべて、ユーザーがその時点で置かれている状況によって異なります。

だからこそ私たちは考えるのです 自動ダークモード とてもクールなアイデアです。 夕方になると点灯し、朝になると消灯します。 ユーザーは何も考える必要がなく、非常に便利です。 Twitter はダークモード設定で素晴らしい仕事をしています。 さらに、すべての OLED スクリーンにダーク モードとさらにダーク モードの両方があり、バッテリーとそれに関連するすべてのものが節約されます。 ここで注意すべき重要な点は、ユーザーが望むときにいつでも手動で切り替える機会を与えることです。元に戻すことができないままインターフェイスが自動的に変更されることほど悪いことはありません。

Twitterには、夕方にオンになり、朝になるとオフになる自動ダークモードがあります。

また、テーマを開発するときは、単純に暗くできないものもあることに留意する価値があります。

Pages のようなテキスト エディタを考えてみましょう。 インターフェイスを暗くすることもできますが、シート自体は常に白くなり、実際の紙をシミュレートします。

ダークモードが有効になっているページ

Sketch や Illustrator など、あらゆるタイプのコンテンツ作成エディターにも同じことが当てはまります。 インターフェースを暗くすることもできますが、作業するアートボードはデフォルトでは常に白になります。

ダーク モードでスケッチしても、明るい白いアートボードが表示されます。

したがって、アプリに関係なく、ダーク モードは使用するオペレーティング システムにネイティブで搭載されるため、将来に備えておくことが最善であると考えられます。 暗くなります。 

ダーク UI の開発について詳しく知りたい場合は、必ずガイドラインを確認してください。 材料設計、これがこの記事の主な情報源でした。

出所： habr.com