のぐそんブログ

暗いおじさんがシコシコ書くブログです。

iOSとAndroidのUIの違い

基本的なUIパーツの名称の違い

ベースとなるUIの名称もiOSとAndroidで少し違います。 共通認識を持つためには正しく覚えておく必要がありそうです。

f:id:nogson2:20191231111125p:plain

戻るボタン

iOSとAndroidで大きく違うのは「戻るボタン」です。

iOS

ナビゲーションバーの左側に配置されることが多いです。

Android

OS標準の物理ボタンとして左下に置いてあります。

Androidのアクションバーの左側に配置されているのは「UPボタン」です。 動き自体は戻るボタンと似ているのですが、前のページ戻るのではなく、親のページを表示します。

f:id:nogson2:20191231111149p:plain

ページ遷移の概念

UIではないのですが、戻るボタンやUPボタンの動きを理解する上でページ遷移の違いについて理解する必要があります。

iOS

iOSのページ遷移はプッシュ遷移が基本です。 階層を掘っていくイメージになります。

Android

Androidはページを積み重ねていくイメージです。 表示中のページが1番上にあります。

Androidの物理ボタンに配置されている戻るボタンは、アプリ外にあるボタンなので押し続けると最終的にはアプリを閉じます。 UPボタンはアプリ内にある為、アプリ内のみページ遷移が有効です。

f:id:nogson2:20191231111211p:plain

タブナビゲーション

グローバルナビのように使われることが多いタブナビゲーションですが、これもiOSとAndroidでよく比較されるUIの1つです。

iOS

画面下に表示します。

Android

画面上部のアクションバーの下に表示します。 下はスプリットアクションバーを原則配置します。

スプリットアクションバー

アクションバーが入りきらないものが、分割されて配置されるスペース

f:id:nogson2:20191231111246p:plain

ラジオボタン、チェックボックス

iOS

リスト型のUIが使われることが多いです。 そもそもチェックボックス、ラジオボタンのようなUIが標準UIに存在しないようです。

Android

Androidの標準コンポーネントに用意されています。

f:id:nogson2:20191231111315p:plain

リストビュー

iOS

リストビューには矢印アイコンが表示されます。

Android

リストビューには矢印アイコンをつけません。 リストはページの移動をイメージさせますが、Androidは新しい画面を重ねていく為 矢印アイコンは付けないほうが良いようです。

f:id:nogson2:20191231111352p:plain

ドロワーナビゲーション(ハンバーガーメニュー)

iOS

iOSの標準コンポーネントには無いです。 一般的なメニューなので、標準コンポーネントではないですがiOSでも利用されています。

Android

Androidの標準コンポーネントにあります。

最近あまり評判のよくないドロワーナビゲーションですが、 表示するリストの数が固定できないなど、用途によっては使用するメリットもありそうです。

f:id:nogson2:20191231111418p:plain

ボタン

iOS

ボタンのサイズは88px × 88px(物理サイズ約7ミリ)以上が推奨です。

Android

ボタンのサイズは96px × 96px(物理サイズ約9ミリ)以上が推奨です。

Androidのほうが少し大きめになります。

iOSとAndroidアプリをデザインする上での注意点

フォントサイズ

iOS

最小サイズは11pt、和文の場合は13ptが推奨です。

Android

標準のフォントサイズは14spです。 英語の場合なので、日本語だと少し大きいのかもしれません。読みやすさをみて判断が必要です。

フォントファミリー

iOS

英語はOS X 10.11から「San Francisco」が採用されました。 日本語はやはりヒラギノなのでしょうか。遊ゴシックの柔らかい感じも好きです。

f:id:nogson2:20191231111439p:plain

Android

Android4.0以降は「Roboto」がシステムフォントして採用されました。 日本語は「モトヤフォント」です。 ただし、6.0 Marshmallowからは「Noto Sans CJK」が採用されたようです。

f:id:nogson2:20191231111507p:plain

UIパーツのサイズ

iOS

44ptを基準で作ると良さそうです。

Android

48dpを基準で作ると良さそうです。

どちらもボタンのサイズを基準にしています。

マージン

iOS

特に指定はありません。

Android

最低8dp開ける必要があります。

iOS、Android共にマージンは8の倍数で作ったほうが良さそうです。

まとめ

プラットフォームごとにそれぞれルールが違うことを改めて勉強することができました。

ただし、プラットフォームのルールに縛らせすぎて、サービス全体でデザインがチグハグになってしまっては問題があります。 ルールを考慮しつつ、バランスを取るのが重要かもしれません。