iPhoneのお話です。
デフォルトで作ることのできるタブバーについて簡単にまとめました。

タブバーとは

下図にあるとおり、アプリ内の下部にある「画面を切り替えるためのボタンが配置されている領域」です。





「App Store」や「ミュージック」などApple純正アプリでも使われていますよね。
今回はデフォルトで作ることのできるタブバーデザインの画像アイコンについて、いくつか実験をしてみました。

色違い

背景を透過している透過png、60px × 60px（Retinaサイズ）。
白、黒、赤、青、黄色の5種の家アイコン画像を用意しました。





それぞれのアイコンを取り込んで表示します。





全部一緒だ！
色がどうってよりアルファで判断してるんですね。
というわけで色の違いではグラデや見え方の違いはありませんでした。

アルファいろいろ

色は白一色で、アルファにグラデーションをかけたものを3種類用意しました。
グレイが透けてるところは透過してます。





取り込んでみました。





これは…！
おかしな横線が入ったり綺麗なグラデになってないです。これは駄目ですねー。

サイズ違い

縮小したものと拡大したものも作ってみました。
切り出しサイズは60px × 60px（Retinaサイズ）です。
60px以上のサイズのものでも、自動的に60pxサイズに縮小して表示してくれるようですね。





取り込みました。





ミニマムなアイコンも可愛いですね。全体的にシンプルなデザインなら合いそうです。
大きいものはちょっとうるさい気がしますよ。

統括

・切り出しサイズは60px × 60px（Retinaサイズ）
・画像の色は何色でも良い
・アルファは100％必須
・アイコン自体のサイズは54px × 54px（Retinaサイズ）くらいがちょうどいいかと
・ミニマムサイズも新鮮

です！


弊社では、デザイナーはデザインして切り出した画像をエンジニアに渡し、組み込まれたものを実機検証するという工程で開発を進めています。
ですが、デザイナーももっとXcodeを触ってみるべきなんでしょうね。
まだまだ知らないことがたくさんありそうです。
さわろう！

コメントする