iOSとAndroidのUIの違い
基本的なUIパーツの名称の違い
ベースとなるUIの名称もiOSとAndroidで少し違います。 共通認識を持つためには正しく覚えておく必要がありそうです。
戻るボタン
iOSとAndroidで大きく違うのは「戻るボタン」です。
iOS
ナビゲーションバーの左側に配置されることが多いです。
Android
OS標準の物理ボタンとして左下に置いてあります。
Androidのアクションバーの左側に配置されているのは「UPボタン」です。 動き自体は戻るボタンと似ているのですが、前のページ戻るのではなく、親のページを表示します。
ページ遷移の概念
UIではないのですが、戻るボタンやUPボタンの動きを理解する上でページ遷移の違いについて理解する必要があります。
iOS
iOSのページ遷移はプッシュ遷移が基本です。 階層を掘っていくイメージになります。
Android
Androidはページを積み重ねていくイメージです。 表示中のページが１番上にあります。
Androidの物理ボタンに配置されている戻るボタンは、アプリ外にあるボタンなので押し続けると最終的にはアプリを閉じます。 UPボタンはアプリ内にある為、アプリ内のみページ遷移が有効です。
タブナビゲーション
グローバルナビのように使われることが多いタブナビゲーションですが、これもiOSとAndroidでよく比較されるUIの１つです。
iOS
画面下に表示します。
Android
画面上部のアクションバーの下に表示します。 下はスプリットアクションバーを原則配置します。
スプリットアクションバー
アクションバーが入りきらないものが、分割されて配置されるスペース
ラジオボタン、チェックボックス
iOS
リスト型のUIが使われることが多いです。 そもそもチェックボックス、ラジオボタンのようなUIが標準UIに存在しないようです。
Android
Androidの標準コンポーネントに用意されています。
リストビュー
iOS
リストビューには矢印アイコンが表示されます。
Android
リストビューには矢印アイコンをつけません。 リストはページの移動をイメージさせますが、Androidは新しい画面を重ねていく為 矢印アイコンは付けないほうが良いようです。
ドロワーナビゲーション(ハンバーガーメニュー)
iOS
iOSの標準コンポーネントには無いです。 一般的なメニューなので、標準コンポーネントではないですがiOSでも利用されています。
Android
Androidの標準コンポーネントにあります。
最近あまり評判のよくないドロワーナビゲーションですが、 表示するリストの数が固定できないなど、用途によっては使用するメリットもありそうです。
ボタン
iOS
ボタンのサイズは88px × 88px(物理サイズ約7ミリ)以上が推奨です。
Android
ボタンのサイズは96px × 96px(物理サイズ約9ミリ)以上が推奨です。
Androidのほうが少し大きめになります。
iOSとAndroidアプリをデザインする上での注意点
フォントサイズ
iOS
最小サイズは11pt、和文の場合は13ptが推奨です。
Android
標準のフォントサイズは14spです。 英語の場合なので、日本語だと少し大きいのかもしれません。読みやすさをみて判断が必要です。
フォントファミリー
iOS
英語はOS X 10.11から「San Francisco」が採用されました。 日本語はやはりヒラギノなのでしょうか。遊ゴシックの柔らかい感じも好きです。
Android
Android4.0以降は「Roboto」がシステムフォントして採用されました。 日本語は「モトヤフォント」です。 ただし、6.0 Marshmallowからは「Noto Sans CJK」が採用されたようです。
UIパーツのサイズ
iOS
44ptを基準で作ると良さそうです。
Android
48dpを基準で作ると良さそうです。
どちらもボタンのサイズを基準にしています。
マージン
iOS
特に指定はありません。
Android
最低8dp開ける必要があります。
iOS、Android共にマージンは8の倍数で作ったほうが良さそうです。
まとめ
プラットフォームごとにそれぞれルールが違うことを改めて勉強することができました。
ただし、プラットフォームのルールに縛らせすぎて、サービス全体でデザインがチグハグになってしまっては問題があります。 ルールを考慮しつつ、バランスを取るのが重要かもしれません。
