次の方法で共有


Light-Aware ユーザー インターフェイスの基礎

ライト対応 UI という用語は、光センサー データを使用してコンテンツ、コントロール、およびその他のグラフィックスを最適化し、暗さから太陽光までの多くの照明条件で最適なユーザー エクスペリエンスを実現するプログラムを指します。 おそらく、最も重要な最適化は、画面が通常これらの条件でうまく動作しないため、読みやすさ、読みやすさ、および直接の日差しでの相互作用です。 このセクションでは、スケール、コントラスト、色の 3 つの UI プロパティについて説明します。 これらのプロパティは、視覚的なユーザー エクスペリエンスを最適化するために変更できます。

スケールと明るさ

一般に、大きなオブジェクトは見やすくなります。 コンピューターの照明条件が悪い場合 (たとえば、日光の当たる場所) でコンテンツを大きくすると、そのコンテンツの読みやすさと対話性が向上します。

次の写真は、一般的な画面の明るさとズーム レベルを持つ太陽光のノート PC と、ライト対応 UI を使用した同じ照明条件のノート PC を比較しています。 最初の写真は、通常のズーム レベルで 40% 明るさに設定された表示を示しています。 2 つ目の写真は、ズーム レベルを上げた 100% 明るさに設定されたディスプレイを示しています。

ラップトップディスプレイは、通常のズームレベルで40% 明るさ 、ズームレベルを上げた100% 明るさでラップトップディスプレイ

フォント サイズの変更

テキストの表示に使用するフォントのサイズを大きくすると、照明条件が悪い場合にテキストの読みやすさが向上します。 フォント スタイル、フォントフェイス、その他の特性を変更して、読みやすさと読みやすさを最適化することもできます。 たとえば、sans serif フォントは、通常、セリフ フォントよりも読みやすいです。

sans serif フォントと serif フォントの比較

コンテンツのズーム

プログラムがズームを実装している場合は、それを使用してコンテンツをスケーリングできます。 拡大すると読みやすさが向上し、縮小すると、プログラムにより多くのコンテンツが表示されます。

ベクター グラフィックレンダリングプロパティの変更

プログラムでベクター グラフィック プリミティブ (線、円など) をレンダリングする場合、レンダリングの特性を変更して読みやすさを最適化できます。 たとえば、プログラムで四角形をレンダリングする場合、四角形のレンダリングに使用される線の幅を拡大 (屋外では広く、屋内では狭く) して、ベクター グラフィック コンテンツの外観と読みやすさを最適化できます。

対照

明るい照明条件で液晶画面を使用すると、画面全体のコントラストが低下します。 画面が光であふれた場合 (太陽など)、画面の暗い領域に対するユーザーの認識が低下します。 一般に、環境光が明るい場合は、コンテンツと UI のコントラストを上げることが重要になります。 これらの照明条件でコントラストを最大化するためにモノクロ配色を使用することが望ましい場合があります。 コントラストを上げるもう 1 つの方法は、低コントラストのコンテンツ (マッピング プログラムの航空写真モードなど) をハイ コントラスト要素 (黒と白のストリート ベクター グラフィックス モードなど) に置き換える方法です。

プログラムがコンテンツを表示するために使用する色は、レンダリングされたコンテンツの全体的なユーザー エクスペリエンスと読みやすさに大きな影響を与える可能性があります。 環境光に基づいて色のコントラストを変更することで、明るい屋外光や暗い室内光などの有害な照明条件でコンテンツをより読みやすくすることができます。

色のコントラストを上げる 1 つの方法は、色の彩度です。 もう 1 つの方法は、隣接する色の代わりに補色を使用して読みやすくすることです。 補色は、青や黄色など、反対の色合いの色のペアです。 次のサイド バイ サイドの例は、補色を使用して色のコントラストを向上させる方法を示しています。

テキストの色が読みやすさに与える影響の例です。