ひ to り go と

iOS 7 キーカラーの落とし穴

MacDev

iOS 6 以前は、それぞれの UI 部品の挙動をユーザに想像&認識させるために光源と陰/影の再現による立体的な描写が用いられてきた。押せるものは立体的に膨らんでいるし、手前にある物体の背後には影がある。
これは現実世界における現象と同じで、人間の脳にもともと備わっている形状認識機能を活かすことができ、とても自然で合理的なやり方である。Mac OS や Windows など、PC の世界でも長いこと使われてきた手法。

iOS 7 では方針が大幅に変更された。ほとんどの UI 部品からは立体表現が消え、単純な線や塗りつぶしのみで表現されるようになった。ボタンなんて枠すらついていない。UI 部品がすっきりすればユーザがコンテンツに集中できるようになるはずだと。
でもそれだけではコンテンツ表示部と操作可能な部分の区別がつかないので、アイブ率いる新 UI チームが取った手法はキーカラー。App 内で一つのカラーを決めておき、ボタンのように押せるものはそれで塗りつぶす。人間が何かを探すときまず初めに認識するのは色なので、どこにボタンがあるのか、一瞬でわかる。

でも、この方法って無理がある。1 つのカラーに特定の役割を持たせるならコンテンツ内で似たようなカラーを使うとユーザの混乱の原因になるし、キーカラーの選択も難しい:

1. 鮮やかで濃いキーカラー
→ コンテンツよりも目立って邪魔になる(コンテンツと同列な見た目なので余計に)
2. 鮮やかで薄いキーカラー
→ 読みにくい、見にくい(iOS 7 は細いラインが多いので余計に)
3. くすんだキーカラー
→ ラベルと区別がつきにくくなる
4. 薄いキーカラー
→ 非アクティブ(Disabled 状態)に見えてしまう
5. ラベルのカラーと同じキーカラー
→ だめ!

上記の問題を解決しないままリリースされている App がいくつもある。特に 4 と 5 はよくない。5 をやるんだったら、せめて Windows Phone みたいに徹底的に ○ で囲むとか、何か区別をつけないと。

Share

(参考になったらぜひ。記事を書くモチベーションの向上に役立てます。)