iOS と Android アプリのデザインの違い 32選
(medium.com)単純な比較だけでなく、各 OS の UI の特長を理解するのにも役立つ記事
基本的な違い
-
HIG vs. Material Design
-
単位: pt vs. dp
-
画面: 320pt x 568pt vs. 360dp x 640dp
-
フォント: San Francisco vs. Roboto
-
Android ナビゲーションバー
-
Material Design の Shadow と Elevation
-
命名:
→ Tab bar vs. Bottom Navigation Bar
→ Navigation Bar vs. Top App Bar,
→ Segmented Controls vs. Tabs
→ Alerts vs. Dialogs
→ Touch ID vs. Android Fingerprint
-
トップレベルナビゲーションの方法
-
タブバーとボトムナビゲーションバーの違い
-
Android タブの特別な機能
-
下位ページの見せ方の違い
-
ナビゲーションドロワー（Drawer）の呼び出しパターン
-
スクロール時の動作の違い
-
検索動作の違い
コンポーネント（UI）の違い
- iOS にないもの
→ Navigation Drawer, Backdrops, Banner, Snackbar, Chips, Bottom App Bar, FABs(Floating Action Button), Bottom Navigation Drawer, Side Sheet, Expanding Bottom Sheet, Standard Bottom Sheet,
- Android にないもの
→ Page Control, Toolbars, Steppers, Popovers
-
同じようで違う Status Bar
-
Refresh Content Control vs. Swipe to refresh
-
コントロールのビジュアルの違い
-
戻る矢印の形とヘッダー位置の違い
-
「点が3つ」のアイコンの違い
-
Pickers: iOS の日付選択はドラム型、Android は一般的なカレンダー形状
-
テキストフィールドの違い
→ iOS はラベルをフィールド上に表示し、入力時に消える。Android は入力時に上へ移動
→ 内容を消去する Clear ボタンは似ている
→ Material Design は入力時に下線を Primary カラーで強調
-
Context Menus vs. Menus
-
Action View/Activity View vs. Modal Bottom Sheet
-
Edit Menus vs. Text Selection Toolbar
-
ディバイダーのサイズ: iOS 0.5pt vs. Android 1dp
その他の違い
-
タップ領域のサイズ: iOS 44x44pt, Android 48x48dp
-
App Store vs. Google Play
-
iOS の独特な Undo/Redo: ユーザーがスマホを振ると Undo 機能が動作
-
ランチ画面の違い: Material はランチ画面にアプリロゴを許容するが、HIG はランチ画面をマーケティング用途で使うことを推奨していない。プレースホルダーとしてのみ使用
-
Material Design の追加要素: Data Format, Data Visualization, Empty States, Offline States など
2件のコメント
スタートアップなのですが、アプリは何で開発すべきですか？ という質問に対する私の基本的な答えは、
#1 アプリが必須ではないサービスなら、まずはモバイルWebだけをしっかり作れば十分です。
#2 アプリが必須なら、初期段階では React Native や Flutter で iOS/Android プラットフォームを同時にサポートしてください。
#3 ユーザーが増え、開発者も増え、資金もできたら、各OSに最適化されたネイティブアプリに切り替えてもよいです。 (Swift & Kotlin)
でも、これは10年前と答えがまったく同じです。
あの頃は HTML5、Hybrid(Phonegap)、Objective C++ & Java だっただけで…
今はWebを React で作れば、React Native のおかげで少し楽ではありますね。
#1は必須、#2を推奨、#3は選択
このUI比較の記事は、#3の段階ではきちんと理解しておくべきで、#2の段階でも読んでおくとよい記事です。
xguruさんが残したコメントに続いて
ただし、カメラ、GPS、加速度センサーなど、ハードウェア依存の強いサービスであれば、すぐに3番へ進んでください。
（例：リアルタイムのビデオフィルターアプリを作る → #3へ…）