Excite Designer's Blog

【iOS6】ステータスバーの色を検証

iOS6ではナビゲーションバーの色に応じて、ステータスバーの色を自動的に変更してくれます。
どういうルールで色を表示しているのか、検証してみました。

今回は大きい画像が多いです。





色の例

【iOS6】ステータスバーの色を検証_e0292726_1737674.jpg

 

【iOS6】ステータスバーの色を検証_e0292726_17372179.jpg

 

ご覧のように、ナビゲーションバーが赤ければステータスバーも赤。
青ければ青、というように連動しています。



画像の場合

【iOS6】ステータスバーの色を検証_e0292726_17413743.jpg

 

チェックの画像とボーダーの画像を用意しました。
グリーンのチェック画像は、ステータスバーが緑ですね。
くすんだピンクの斜めボーダー画像は、くすんだピンクです。
色の平均値を取っている…?やはりそうなのか…?


【iOS6】ステータスバーの色を検証_e0292726_18144883.jpg


1:下部1pxに青と黄色半々のラインのあるもの
2:下部1pxに赤のラインのあるもの
3:上部1pxに赤のラインのあるもの
4:下部1pxに白と黒半々のラインのあるもの
5:中心1pxに青と黄色半々のラインのあるもの

下部、上部、中心と、それぞれ1pxずつラインを入れてみましたが、あまり影響無いですな。
それぞれ、背景色に近しい色がセレクトされてます。
やはり全体の色の平均値というのが濃厚です。



平均値

【iOS6】ステータスバーの色を検証_e0292726_1933351.jpg

 

わかりやすく左右で2色に塗り分けました。

1:ff0000と0000ff
2:ffff00とff0000
3:ffff00と0000ff

1の平均値はおよそ#7f007f
【iOS6】ステータスバーの色を検証_e0292726_206682.jpg

 

2の平均値はおよそ#ff8001
【iOS6】ステータスバーの色を検証_e0292726_207181.jpg

 

3の平均値はおよそ#808080
【iOS6】ステータスバーの色を検証_e0292726_207447.jpg

 

(※jpgで書き出したのでごくわずかに色が変わってしまっています。)

上の画像と見比べると大体合ってますね!
更にその上に乗算でグレイのグラデーションを乗せている感じでしょうか。


色の平均値を調べるにあたって、下記のサイトを利用しました。
http://whatsitscolor.com/



統括

ナビゲーションバーの色の平均値がステータスバーの色に反映されているようです!

テクスチャや細かい模様の入ったナビゲーションバーを使う時も、上記のサイトのようなところで平均値の色を調べておけばステータスバーが思わぬ色になってギョっとする心配もないですね。
スッキリ。
by spdesigner | 2012-09-28 09:50 | 検証 | Comments(0)


Exciteのデザイナーのブログです。


by spdesigner

検索

カテゴリ

design
アプリ紹介
検証
Tips
ブックマーク
iOS

タグ

外部リンク