みなさんこんにちは。
UIUXデザイナーのa.nです。
今日はモバイルデザインをする上で大切なiOS とAndroid UIの違いについて5 個ご紹介します。
今回取り上げるOSの違いはMaterial Design, Human Interface Guidelinesで定義されているものを参照しています。
過去にMaterial Design, Human Interface Guidelinesの概要についてもご紹介していますので、よければご参照ください！
1.システムフォント
iOSはSan Francisco、 Android はRobotoを標準フォントとしています。
San Franciscoがかなり直線的なのに対して、Robotoはより丸みがあります。
こちらのサイトが2つのフォントの比較に参考になり直感的で面白かったです。
2. 単位 と最小押下面積
iOSは44x44 pt、Androidは44×44dpと定義しています。
最小押下面積は、指の大きさに関係しているみたいです！
ちなみに人差し指の平均幅は45〜72 ピクセルだそう。。
3.内蔵ナビゲーション
iOS とは異なり、Android 9まではナビゲーション ツールが組み込まれています。
内蔵ナビゲーションは、「戻る」ボタン、「ホーム」ボタン、「タスク管理」ボタンで構成されています。
4.上部,下部のナビゲーションバー
iOSは上部のナビゲーションバーを「Navigation bars」下部のナビゲーションバーを「Tab bar」
Androidは上部のナビゲーションバーを「Top app bars」下部のナビゲーションバーを「Navigation bar」と呼んでいます。
デザインは似ていますが、UIの名前が違うので注意が必要です。
5.モーダル
iOSは「Modality（設計手法）」、Androidでは「Dialogs」「Bottom Sheets（Component）」に定義されています。
iOSではUIを使う目的に応じて、「Alert」「Action Sheets」「Sheet」「Activity view」の中からコンポーネントを使い分ける必要があります。
以上5つご紹介しました！
モバイルデザインの参考になれば幸いです。
