Help us understand the problem. What is going on with this article?

iOS&Androidアプリのデザインをする人に知っておいてもらいたいこと

More than 5 years have passed since last update.

知り合いのデザイナーさんから「iOS&Androidアプリをデザインする時に何か知っておくべき事ってありますか?」と質問を受けたので、思い浮かんだ事をずらっと書いてみました。他にも何かありましたらコメントお願いします!ツッコミも歓迎(´ロ`)

iOS

モバイルアプリデザインの原則とiOS

量が少し多いが、公式のiOSヒューマンインターフェイス ガイドラインは必読。(※ダウンロードに時間かかるので注意)
iOSだけに限らず、モバイルアプリのデザインをするにあたって重要な事がまとまっている。

載っていること

  • ヒューマンインターフェイスの原則
  • アプリケーション設計戦略
  • iOSテクノロジーの使用に関するガイドライン
  • 標準で用意されている各UI要素(タブやツールバー等)の使い方

マルチスクリーン対応

どのような違いがあるのかを把握する

画面密度の違いへの対応

  • 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による違い

Android

デザインガイドを読む

Androidもアプリをデザインするならデザインガイドは必読。日本語訳は非公式なものなので、必ず公式と比べながら読むこと。

マルチスクリーン対応

どのような違いがあるのかを把握する

画面密度の違いへの対応

  • 画面レイアウトを設計する時、それぞれの要素(画像やボタン等)の大きさが画面密度が違っても変わらないように、"px(pixel)"でなく"dp(Density Independent Pixel)"という単位を使う
  • 本来は画面密度毎(mdpi, hdpi, xhdpi等)に画像を用意する必要があるが、それだと容量が大きくなるので、とりあえず xhdpi の画像だけ用意して、それで荒く見える画像だけ高解像度のを用意するとかやる(ケースバイケースなので要相談)

画面サイズの違いへの対応

フォントサイズ

  • ユーザのフォントサイズ設定によって表示されるサイズが変えることが出来る"sp"という単位がある
  • フォントサイズを変えられるとレイアウトが崩れる場合は、dpでフォントサイズを指定する

OS Versionの違い

両方に対応するアプリをデザインする場合

iOS/Androidの違いを把握する

  • それぞれのデザインガイドを読めば分かるが、デザイン方針に違いがある
  • それぞれのデザイン方針で作られたアプリに、それぞれのプラットフォームのユーザは慣れている
  • iOSのUIに合わせてデザインしたものをAndroidにも適用とかすると、Androidに慣れたユーザにとって違和感のあるUIになってしまう
  • 違いを把握して、iOS/Androidのそれぞれに適したデザインを考える必要がある
  • デザインの手間がかかる為それが出来ない場合、「デザインガイドに反したUIを実装するのは手間がかかるケースが多い」という事を理解して、プログラマーと相談しながら決めていくと良い

  • タブバー
    • iOSは下部に配置
    • Androidは上部に配置
  • 戻るボタン
    • ナビゲーションバーの左側に配置
    • システムによってBackボタンが用意されている。アクションバーの左側に配置されるのはUpボタン

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした