Excite Designer's Blog

【iOS 7】デザイナーが真っ先にやるべき4つのこと

e0292726_17375511.jpg

iOS 7がリリースされましたね。
事前に対応してる方がほとんどだと思いますが、忘れてた!といううっかりな方のために、取り急ぎこれだけは絶対にやっておこうというものを4つまとめました。






1.アイコンの変更

アイコンサイズ
KindPixelsResource
iPhone 非Retina (~iOS 6.1)57 X 57Icon
iPhone (~iOS 6.1)114 X 114Icon@2x
iPhone Retina120 X 120
iPad 非Retina (~iOS 6.1)72 X 72Icon-72
iPad (~iOS 6.1)144 X 144Icon-72@2x
iPad 非Retina76 X 76
iPad Retina152 X 152

※新規3サイズのアイコンについては、命名規則を見つけられませんでした。

iOS 7 iPhone(Retina)用のアイコン:120x120
iOS 7 iPad用のアイコン:76x76
iOS 7 iPad(Retina)用のアイコン:152x152

以上の3つのサイズが増えました!
ユニバーサル対応のアプリは、上の表にある7種類のアイコンが必要です。多い!
リサイズのみでいける作業ならば、さくさく対応してしまいましょう。

角半径の変更
以前のものよりも丸みの強い形に変更されました。
端の方に文字を置いたり、キモになるオブジェクトを置いている場合、欠けてしまいます。
e0292726_19332915.gif

だいぶ丸っこいですよね。
純正のアイコンがフラットデザインに変わったこともあり、アイコン・アプリのデザインも変更する必要があるかもしれません。
全てのデザインを刷新するのは時間がかかる作業ですので、文字が欠けてしまったり影の形が合わなかったりするならばアイコンだけでも早めに対応するのが良さそうです。
気をつけるべき点は、iOS 6とiOS 7、両方に対応したアイコンであること!です。



2.アプリのナビゲーションバー

アプリのナビゲーションバーの背景をグラデーションにしている場合、全てベタ一色になってしまっているはずです。
アプリ全体のデザインとしてグラデーションを使っているので、ナビゲーションバーだけ単色だとおかしいですよね。
こちらもデザイン全てを刷新するのは時間がかかってしまうので、まずは暫定処置として画像で補いましょう。
e0292726_1935584.jpg


背景の色と文字色がかぶってると読めなくなってしまうので、当たり前ですが全部のアプリをチェックしましょう!


3.起動画面の画像サイズの変更

ステータスバーの20px(Retinaだと40px)分を引いたサイズで起動画面を作成している場合、画像が縦に引き延ばされて表示されてしまいます。
640x960 ないし、640x1136のフルサイズで起動画面を作成しましょう。


上記3つは、アプリをiOS 7用にバージョンアップする際に必要となる作業です。


4.Safariのbackground-size

最適化サイトやアプリ内のWebビューでbackground-sizeを使っていて複数のタグに指定している場合、最初の1つ以外はサイズ指定が無効になってしまいます。
個別に指定することで解決できます。

cssだけではなくhtmlにも手をいれないといけない場合もあるので、しっかり検証しましょう。


便利

最後に、デザイナー向けの便利なまとめをいくつかご紹介します。

IOS 7 Guide Freebie PSD-dribbble-
The iOS Design Cheat Sheet
細かすぎて伝わりづらい! iOS 7のデザイン変更点まとめ。

クラスメソッドさんのiOS 7特集
by spdesigner | 2013-09-17 10:00 | design | Comments(0)


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


by spdesigner

プロフィールを見る

検索

カテゴリ

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

外部リンク