蘋果和安卓在界面設計上有什麼區別？要注意什麼？

01-05

先貼兩個官方的設計規範文檔，都寫得很全：

iOS: http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html
Android: http://developer.android.com/design/index.html

自己的感受想到一些說一些吧：

安卓系統需要適配很多解析度，而且不同的開發人員有不同的適配方式。官方文檔里建議要提供 4 種尺寸的界面切圖：LDPI, MDPI, HDPI, XHDPI。而且為了方便計算，官方有 DP 這樣的單位來方便開發；iOS 上一般就是普通解析度的切圖以及 @2x 的切圖，而且是直接倍乘的尺寸，相對比較簡單。
除了切圖以外，界面布局也必須考慮不同解析度下的情況
iOS 的 Tab Bar 是在屏幕底部的，但是 Android 上並沒有這樣的規定。而且考慮到很多安卓手機底部已經有一排實體按鈕，放在頂上有時也是不錯的。
模擬界面字體的時候 Apple 這邊英文部分用 Helvetica Neue，中文部分可以使用 STHeiti；Android 部分可以使用 Droid Sans Fallback
iPhone 各代各批次的屏幕有差，但可以按照主流機型試著調整一下色差，設計效果盡量放到實際機器上看；Android 這邊。。。。就算了吧
iOS 界面開始時很多動效可以直接調用；Android 的話有時需要開發人員自己寫，考慮到各機型適配和性能情況有時候效果會打折扣
Android 下沒有「按狀態欄回頂部的功能」，有時需要照顧一下

首先我推薦你看一本書叫做《android設計指南》

iOS 圖標的圓角半徑是多少？

（註：現在IOS圖標是不需要再畫圓角了，直接方形就OK）

括弧裡面是對應的半徑大小

App store(Retina屏) ─────────────1024px（160px）

iTunes Artwork icon ─────────────512px (90px)

App icon(iPhone4s) ──────────────────114px (20px)

App icon(iPhone5s) ──────────────────120px(22px)

App icon(iPad) ────────────────────72px (12px)

App icon(iPhone 3G/3GS) ───────────────57px(10px)

Spotlight/Settings icon icon(iPhone4) ──────────58px (10px)

Spotlight/Settings icon icon(iPhone 3G/3GS/iPad) ──── 29px (9px)

iPhone、iPad、Android UI常用設計尺寸

iPhone：

—————————————————————–

APPLE APP STORE ICON:512 x 512 PX (圓角弧度80px)

iPhone 5 App Icon：120 x 120 PX (圓角弧度22px)

iPhone 4 App Icon：114 x 114 PX (圓角弧度20px)

iPhone 3GS App Icon：57 x 57 PX (圓角弧度22px)

iPhone 5 326ppi 4英寸1136*640PX

iPhone 4 App UI：960 x 640PX （設計時,高度還需要減去狀態欄40PX）

iPhone 3GS App UI：480x 320PX

iPhone的設計尺寸(IOS尺寸)

iPhone界面尺寸：

設
備解析度狀態欄高度導航欄高度標籤欄(工具欄)高度iPhone6 plus設計版1242 × 220860px132px146pxiOS
APP設計一稿支持iPhone5/iPhone6/Plus設計流程iPhone6 plus物理版1080 ×
192054px132px146pxiOS APP設計一稿支持iPhone5/iPhone6/Plus設計流程iPhone6750 ×
133440px88px98px(88px)iPhone5s640 × 113640px88px98px(88px)iPhone5c640 ×
113640px88px98px(88px)iPhone5640 × 113640px88px98px(88px)iPhone4s640 ×
96040px88px98px(88px)iPhone4640 × 96040px88px98px(88px)

iPhone圖標尺寸：

系統解析度圓角大小iOS 6-90px – 1024px約為圖標寬度 × 0.175iOS 7+90px – 1024px約為圖標寬度 × 0.225

AssetiPhone 6 Plus (@3x)iPhone 6 and iPhone 5 (@2x)iPhone 4s (@2x)iPad and iPad mini (@2x)iPad 2 and iPad mini (@1x)App icon

(required for all apps)180 × 180120 × 120120 × 120152 × 15276 × 76App icon for the App Store

(required for all apps)1024 × 10241024 × 10241024 × 10241024 × 10241024 × 1024Launch file or image

(required for all apps)Use a launch file

(see Launch Images)For iPhone 6, use a launch file

(see Launch Images)

For iPhone 5, 640 × 1136640 × 9601536 × 2048 (portrait)

2048 × 1536 (landscape)768 × 1024 (portrait)

1024 × 768 (landscape)Spotlight search results icon

(recommended)120 × 12080 × 8080 × 8080 × 8040 × 40Settings icon

(recommended)87 × 8758 × 5858 × 5858 × 5829 × 29Toolbar and navigation bar icon

(optional)About 66 × 66About 44 × 44About 44 × 44About 44 × 44About 22 × 22Tab bar icon

(optional)About 75 × 75

(maximum: 144 × 96)About 50 × 50

(maximum: 96 × 64)About 50 × 50

(maximum: 96 × 64)About 25 × 25

(maximum: 48 × 32)Default Newsstand cover icon for the App Store

(required
for Newsstand apps)At least 1024 pixels on the longest edgeAt least
1024 pixels on the longest edgeAt least 1024 pixels on the longest
edgeAt least 1024 pixels on the longest edgeAt least 512 pixels on the
longest edgeWeb clip icon

(recommended for web apps and websites)180 × 180120 × 120120 × 120152 × 15276 × 76

iPad的設計尺寸iPad界面尺寸：

設
備解析度狀態欄高度導航欄高度標籤欄高度iPad6/iPad Air22048 × 153640px88px98pxiPad5/iPad
Air/ipad mini 22048 × 153640px88px98pxiPad4/ipad mini2048 ×
153640px88px98pxiPad3/the new iPad2048 × 153640px88px98pxiPad21024 ×
76820px44px49pxiPad11024 × 76820px44px49pxiPad Mini1024 ×
76820px44px49px

iPad圖標尺寸：

系統解析度圓角大小iOS 6-90px – 1024px約為圖標寬度 × 0.175iOS 7+90px – 1024px約為圖標寬度 × 0.225

AssetiPhone 6 Plus (@3x)iPhone 6 and iPhone 5 (@2x)iPhone 4s (@2x)iPad and iPad mini (@2x)iPad 2 and iPad mini (@1x)App icon

(required for all apps)180 × 180120 × 120120 × 120152 × 15276 × 76App icon for the App Store

(required for all apps)1024 × 10241024 × 10241024 × 10241024 × 10241024 × 1024Launch file or image

(required for all apps)Use a launch file

(see Launch Images)For iPhone 6, use a launch file

(see Launch Images)

For iPhone 5, 640 × 1136640 × 9601536 × 2048 (portrait)

2048 × 1536 (landscape)768 × 1024 (portrait)

1024 × 768 (landscape)Spotlight search results icon

(recommended)120 × 12080 × 8080 × 8080 × 8040 × 40Settings icon

(recommended)87 × 8758 × 5858 × 5858 × 5829 × 29Toolbar and navigation bar icon

(optional)About 66 × 66About 44 × 44About 44 × 44About 44 × 44About 22 × 22Tab bar icon

(optional)About 75 × 75

(maximum: 144 × 96)About 50 × 50

(maximum: 96 × 64)About 50 × 50

(maximum: 96 × 64)About 25 × 25

(maximum: 48 × 32)Default Newsstand cover icon for the App Store

(recommended for web apps and websites)180 × 180120 × 120120 × 120152 × 15276 × 76

Android的設計尺寸：屏幕尺寸

指實際的物理尺寸，為屏幕對角線的測量。

為了簡單起見，Android把實際屏幕尺寸分為四個廣義的大小：小，正常，大，特大。

像素（PX）

代表屏幕上一個物理的像素點代表屏幕上一個物理的像素點。

屏幕密度

為
解決Android設備碎片化，引入一個概念DP，也就是密度。指在一定尺寸的物理屏幕上顯示像素的數量，通常指解析度。
為了簡單起見，Android把屏幕密度分為了四個廣義的大小：低（120dpi）、中（160dpi）、高（240dpi）和超高（320dpi）
像素= DP * （ DPI / 160 ) 例如，在一個240dpi的屏幕里，1DP等於1.5PX。

於設計來說，選取一個合適的尺寸作為正常大小和中等屏幕密度（尺寸的選取依據打算適配的硬體，建議參考現主流硬體解析度），然後向下和向上做小、大、特大和低、高、超高的尺寸與密度。

典型的設計尺寸

? 320dp：一個普通的手機屏幕（240X320，320×480，480X800）

? 480dp：一個中間平板電腦像（480×800）

? 600dp：7寸平板電腦（600×1024）

? 720dp：10寸平板電腦（720×1280，800×1280）

對於解析度繁多的android設備，為了方便原生應用的界面適配，Google按照dpi大小將它們分成了4中模式（MDPI、HDPI、XHDPI和XXHDPI，現在 Android 4.3 已經有了XXXHDPI）：

屏幕DIP類型: xxhdpi xhdpi hdpi mdpi ldpi

ICON尺寸： 144*144 96*96 72*72 48*48 36*36

隨便說一下現在安卓設計稿尺寸設定：

一
般PS新建 1080 x 1920的尺寸，也就是對應該安卓的xxhdpi ,所以切圖也是放入程序中的xxhdpi文件夾
下。所以基本上一套圖就可以了，如果時間充足，做多套尺寸的圖自然沒什麼壞處。雖然只出大尺寸的圖，但設計時一定好考慮好小屏幕適配問題，還要對部分切圖
進行調整重切，因為有些圖等比縮小時會出現糊，或不好看的現象。

Android安卓系統dp/sp/px換算表

名稱解析度比率
rate (針對320px)比率 rate (針對640px)比率 rate (針對750px)idpi240 ×
3200.750.3750.32mdpi320 × 48010.50.4267hdpi480 × 8001.50.750.64xhdpi720 ×
12802.251.1251.042xxhdpi1080 × 19203.3751.68751.5

主流Android解析度和尺寸

設
備解析度尺寸設備解析度尺寸三星Galaxy S34.8英寸720 × 1280三星Galaxy S45英寸1080 × 1920三星Galaxy
S55.1英寸1080 × 1920三星Galaxy S64.5英寸1200 × 1920小米14英寸480 × 854小米1s4英寸480 ×
854小米24.3英寸720 × 1280小米2s4.3英寸720 × 1280小米35英寸1080 ×
1920小米3s(概念)5英寸1080 × 1920小米45英寸1080 × 1920紅米4.7英寸720 ×
1280紅米Note5.5英寸720 × 1280 OPPO Find 75.5英寸1440 × 2560OPPO Find 7
輕裝版5.5英寸1080 × 1920OPPO N1 mini5英寸720 × 1280OPPO R35英寸720 × 1280OPPO
R1S5英寸720 × 1280 鎚子 Smartisan T14.95英寸1080 × 1920 華為 Ascend
P75英寸1080 × 1920華為 Ascend Mate76英寸1080 × 1920華為榮耀65英寸1080 × 1920華為
Ascend Mate26.1英寸720 × 1280華為 C1995.5英寸720 × 1280 HTC One (M8)5英寸1080 ×
1920HTC Desire 8205.5英寸720 × 1280魅族 MEIZU MX45.36英寸1152 × 1920魅族 MEIZU
MX35.1英寸1080 × 1800

大概就是圓角和直角的差別吧。

mark