光対応ユーザー インターフェイスの基礎

光対応 UI という用語は、暗闇から直射日光までのさまざまな光の状態で最適な操作性を得るために、光センサー データを使用してコンテンツ、コントロールおよびその他のグラフィックスを最適化するプログラムを表します。通常、直射日光下では画面が見にくくなるため、見やすさ、読みやすさ、および操作性の最適化が最も重要になります。ここでは、3 つの UI プロパティである、拡大縮小、コントラスト、および色について詳しく説明します。これらのプロパティを変更することで、視覚的な操作性を最適化できます。

拡大縮小と輝度

一般に、大きいオブジェクトは確認が容易です。コンピューターが悪条件の光の状態に置かれている場合 (直射日光など)、コンテンツを大きくすると見やすさと対話性を向上できます。

次の 2 つの写真は、直射日光の環境に置かれた通常の画面輝度とズーム レベルのラップトップと、同じ光の状態で光対応 UI を使用したラップトップを比較しています。最初の写真では、画面が、通常のズーム レベルで輝度 40% に設定されています。2 番目の写真では、画面が、拡大されたズーム レベルで輝度 100% に設定されています。

 

通常のズーム レベルで輝度 40% のラップトップ画面

 

 

拡大されたズーム レベルで輝度 100% のラップトップ画面

 

フォント サイズの変更

テキストの表示に使用するフォントのサイズを大きくすると、悪条件の光の状態でもテキストが見やすくなります。フォント スタイル、フォント フェイス、およびその他の特性を変更して、見やすさと読みやすさを変えることもできます。たとえば、通常、sans serif フォントは serif フォントよりも読みやすくなります。

 

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

 

コンテンツのズーム

プログラムにズーム機能を実装すると、その機能を使用してコンテンツを拡大縮小できます。ズーム インすると見やすさが向上するのに対し、ズーム アウトするとより多くのコンテンツを表示できます。

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

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

コントラクト

明るい光の状態で LCD 画面を使用する場合、画面の全体的なコントラストが低下します。画面上に光があふれていると (たとえば、日光)、画面の暗い領域に対するユーザーの認識度が低下します。通常、環境光が明るい場合、コンテンツおよび UI のコントラストを高くする必要があります。可能な場合は、モノクロの配色を使用して、これらの光の状態に対して最大のコントラストを設定します。コントラストを高める別の方法では、低コントラストのコンテンツ (地図プログラムの航空写真モードなど) を高コントラストの要素 (白地に黒の道路のベクター グラフィックス モードなど) に置き換えます。

プログラムでコンテンツの表示に使用する色が、全体的な操作性やレンダリングされたコンテンツの見やすさに大きな効果を発揮する場合があります。環境光に基づいて色のコントラストを変更することにより、明るいアウトドアの光や暗い室内の光など、悪条件の光の状態でもコンテンツの読みやすさを向上できます。

色のコントラストを向上させる方法の 1 つは、色の彩度を使用することです。別の方法では、隣接色の代わりに補色を使用して読みやすさを向上させます。補色は、青色と黄色などの反対の色相を持つ色の組み合わせです。次の左右の例は、補色を使用すると色のコントラストがどのように向上するかを示しています。

 

読みやすさに関するテキストの色の効果の例。

 

 

 

コミュニティの追加

追加
表示:
© 2014 Microsoft