知り合いのデザイナーさんから「iOS&Androidアプリをデザインする時に何か知っておくべき事ってありますか？」と質問を受けたので、思い浮かんだ事をずらっと書いてみました。他にも何かありましたらコメントお願いします！ツッコミも歓迎(´ﾛ｀)
iOS
モバイルアプリデザインの原則とiOS
量が少し多いが、公式のiOSヒューマンインターフェイス ガイドラインは必読。(※ダウンロードに時間かかるので注意)
iOSだけに限らず、モバイルアプリのデザインをするにあたって重要な事がまとまっている。
載っていること
- ヒューマンインターフェイスの原則
- アプリケーション設計戦略
- iOSテクノロジーの使用に関するガイドライン
- 標準で用意されている各UI要素(タブやツールバー等)の使い方
マルチスクリーン対応
どのような違いがあるのかを把握する
- 画面密度(ppi)や画面サイズなど
- 参考：iPhone, iPod touch, iPad, iPad mini
画面密度の違いへの対応
- Retinaと非Retinaで画面密度が丁度倍違う。
- 画面レイアウトを設計する時、それぞれの要素(画像やボタン等)の大きさが画面密度が違っても変わらないように、"px(pixel)"でなく"pt(point)"という単位を使う。(非Retina:1pt=1px, Retina:1pt=2px)
- 画像を綺麗に表示するには、それぞれの画面密度に合わせた画像を用意する必要がある。
- 画像ファイル名を同じにしてRetina用は末尾に"@2x"を付ければ、自動的に出し分けてくれる仕組みがあるのでそれを利用する
- 例： 非Retina用->
sample.png, Retina用->sample@2x.png
画面サイズの違いへの対応
- iPhone4Sまで3.5インチで、iPhone5から4インチになった
- 横幅は同じで高さが違うだけ。3.5インチに合わせてデザインし、4インチで表示する時に伸ばす場所を決める。
- iPadの対応はよく知らないのでノーコメント…
OS Versionによる違い
- 6と7で見た目が大幅に変わった
- バージョンごとのシェア率
- App Store Distribution - Support - Apple Developer
- 古いの使ってる人はあんまりいない
Android
デザインガイドを読む
Androidもアプリをデザインするならデザインガイドは必読。日本語訳は非公式なものなので、必ず公式と比べながら読むこと。
マルチスクリーン対応
どのような違いがあるのかを把握する
- スマートフォン比較表
- iOSと違って画面密度(dpi)や物理的な画面サイズの種類がめちゃくちゃ多いので、ざっくり分類されている
- シェア率を把握する
画面密度の違いへの対応
- 画面レイアウトを設計する時、それぞれの要素(画像やボタン等)の大きさが画面密度が違っても変わらないように、"px(pixel)"でなく"dp(Density Independent Pixel)"という単位を使う
- 本来は画面密度毎(mdpi, hdpi, xhdpi等)に画像を用意する必要があるが、それだと容量が大きくなるので、とりあえず xhdpi の画像だけ用意して、それで荒く見える画像だけ高解像度のを用意するとかやる(ケースバイケースなので要相談)
画面サイズの違いへの対応
- 小さい画面(横320dp)に合わせてデザインし、大きい画面で表示する時に伸ばす場所を決める
- 画像を伸ばして表示したい場合は、普通に伸ばすと汚くなるので9patchを利用する
- 画面サイズによって、別のレイアウトを使う事もできる
フォントサイズ
- ユーザのフォントサイズ設定によって表示されるサイズが変えることが出来る"sp"という単位がある
- フォントサイズを変えられるとレイアウトが崩れる場合は、dpでフォントサイズを指定する
OS Versionの違い
- Androidのバージョン履歴 - Wikipedia
- 2.x系と4.x系で見た目が大幅に変わった
- バージョンごとのシェア率
- Dashboards | Android Developers
- 2.x系に対応するのは非常に面倒だが、使ってる人が結構いる
両方に対応するアプリをデザインする場合
iOS/Androidの違いを把握する
- それぞれのデザインガイドを読めば分かるが、デザイン方針に違いがある
- それぞれのデザイン方針で作られたアプリに、それぞれのプラットフォームのユーザは慣れている
- iOSのUIに合わせてデザインしたものをAndroidにも適用とかすると、Androidに慣れたユーザにとって違和感のあるUIになってしまう
- 違いを把握して、iOS/Androidのそれぞれに適したデザインを考える必要がある
- デザインの手間がかかる為それが出来ない場合、「デザインガイドに反したUIを実装するのは手間がかかるケースが多い」という事を理解して、プログラマーと相談しながら決めていくと良い
例
- タブバー
- iOSは下部に配置
- Androidは上部に配置
- 戻るボタン
- ナビゲーションバーの左側に配置
- システムによってBackボタンが用意されている。アクションバーの左側に配置されるのはUpボタン