iPhone、iPad分辨率和显示屏规格

设备 分辨率 状态栏高度 导航栏高度 标签栏(工具栏)高度
iPhone6 plus设计版 1242 × 2208 60px 132px 147px
iPhone6 plus物理版 1080 × 1920 54px 132px 147px
iPhone6 750 × 1334 40px 88px 98px(88px)
iPhone5s 640 × 1136 40px 88px 98px(88px)
iPhone5c 640 × 1136 40px 88px 98px(88px)
iPhone5 640 × 1136 40px 88px 98px(88px)
iPhone4s 640 × 960 40px 88px 98px(88px)
iPhone4 640 × 960 40px 88px 98px(88px)
iPad 1024 × 768 20px 44px 49px(44px)
iPad(@2x) 2048 × 1536 40px 88px 98px(88px)

iPhone分辨率和显示屏规格

 

iPad分辨率和显示屏规格

iPhone6+缩减像素取样

在iOS上渲染像素和物理像素(physical pixels)是等同的,只有一个例外:iPhone 6 Plus的Retina HD显示屏。
由于它屏幕的像素分辨率要低于一个常规的@3x分辨率,所以被渲染内容会自动调整为原始尺寸的87%(从2208*1242像素来适应为1920*1082像素的显示屏分辨率)

ICON规格

描述 iPhone 6 Plus (@3x) iPhone 6 and iPhone 5 (@2x) iPhone 4s /4/iPod touch(@2x) iPad and iPad mini(@2x) iPad 2 and iPad mini (@1x)
应用程序图标(应用程序所需的所有)

180 x 180

120 x 120

120 x 120

152 x 152

76 x 76

为App Store(应用程序所需的所有应用程序图标)

1024 x 1024

1024 x 1024

1024 x 1024

1024 x 1024

1024 x 1024

启动影像(所有的应用程序所需的)

设计版:1242 × 2208

物理版:1080 × 1920

iPhone 6: 750 × 1334

iPhone 5: 640 x 1136

640 x 960

1536 x 2048 (纵向)

2048 x 1536 (横向)

768 x 1024 (纵向)

1024 x 768 (横向)

Spotlight搜索结果图标(推荐)

120 x 120

80 x 80

80 x 80

80 x 80

40 x 40

设置图标(推荐)

87 x 87

58 x 58

58 x 58

58 x 58

29 x 29

工具栏和导航栏图标(可选)

约 66 x 66

约 44 x 44

约 44 x 44

约 44 x 44

约 22 x 22

标签栏图标(可选)

About 75 x 75 (maximum: 144 x 96)

约 50 x 50 (最大: 96 x 64)

约 50 x 50 (最大: 96 x 64)

约 50 x 50 (maxi最大mum: 96 x 64)

约 25 x 25 (最大: 48 x 32)

默认报刊亭盖为App Store图标(书报亭应用程序所需

至少为 1024 像素的最长边

至少为 1024 像素的最长边

至少为 1024 像素的最长边

至少为 1024 像素的最长边

至少为 512 像素的最长边

网页剪辑图标(推荐的Web应用程序和网站)

180 x 180

120 x 120

120 x 120

152 x 152

76 x 76

iPhone ICON规格

 

iPad ICON规格

附录:

1:iPhone 5S, 6 以及6+显示屏区别的详细信息可参: The Ultimate Guide To iPhone Resolutions

2:圆角ICON: 非官方的模板

3:iOS版本中默认字体: 完整的预置字体列表

参考引文:

iOS Human Interface Guidelines - Apple 

iOS Accessibility Guidelines - Apple

Why Control Center in iOS 10 makes sense - Darin Dimitroff 

Apple’s new design style in iOS 10 is a statement on accessibility - Connor Mason

Complexion Reduction: A New Trend In Mobile Design - Michael Horton

「后扁平化时代」的 i18n 和 L10n - JJYing

The new Music app in iOS 10: a big bold confusing mess - Sébastien Page 

Big, bold, and beautiful: Apple's design language is changing in iOS 10 - Serenity Caldwell

Designing a New Look for Instagram, Inspired by the Community - Ian



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寸平板电脑(600x1024)
• 720dp:10寸平板电脑(720x1280,800x1280)


Android安卓系统dp/sp/px换算表

名称 分辨率 比率 rate (针对320px) 比率 rate (针对640px) 比率 rate (针对750px)
idpi 240 × 320 0.75 0.375 0.32
mdpi 320 × 480 1 0.5 0.4267
hdpi 480 × 800 1.5 0.75 0.64
xhdpi 720 × 1280 2.25 1.125 1.042
xxhdpi 1080 × 1920 3.375 1.6875 1.5

iPhone分辨率和显示屏规格

设备 尺寸 分辨率 设备 尺寸 分辨率
三星Galaxy S3 4.8英寸 720 × 1280 三星Galaxy S4 5英寸 1080 × 1920
三星Galaxy S5 5.1英寸 1080 × 1920 三星Galaxy S6 4.5英寸 1200 × 1920
小米1 4英寸 480 × 854 小米1s 4英寸 480 × 854
小米2 4.3英寸 720 × 1280 小米2s 4.3英寸 720 × 1280
小米3 5英寸 1080 × 1920 小米3s(概念) 5英寸 1080 × 1920
小米4 5英寸 1080 × 1920 红米 4.7英寸 720 × 1280
红米Note 5.5英寸 720 × 1280      
OPPO Find 7 5.5英寸 1440 × 2560 OPPO Find 7 轻装版 5.5英寸 1080 × 1920
OPPO N1 mini 5英寸 720 × 1280 OPPO R3 5英寸 720 × 1280
OPPO R1S 5英寸 720 × 1280      
华为 Ascend P7 5英寸 1080 × 1920 华为 Ascend Mate7 6英寸 1080 × 1920
华为 荣耀6 5英寸 1080 × 1920 华为 Ascend Mate2 6.1英寸 720 × 1280
华为 C199 5.5英寸 720 × 1280      
HTC One (M8)

约 66 x 66

约 44 x 44

HTC Desire 820 5.5英寸 720 × 1280
魅族 MEIZU MX4 5英寸 1080 × 1920      
锤子 Smartisan T1 4.95英寸 1080 × 1920 魅族 MEIZU MX3 5.1英寸 1080 × 1800

 

 

 

 



Web的设计尺寸

Windows XP任务栏的高度30px Windows 7任务栏的高度40px
主流浏览器的界面参数:
浏览器 状态栏 菜单栏 滚动条
Chrome浏览器 22px(浮动出现) 60px 15px
火狐浏览器 状态栏高度 导航栏高度 标签栏高度
IE浏览器 状态栏高度 导航栏高度 标签栏高度
360浏览器 状态栏高度 导航栏高度 标签栏高度

中国网民的分辨率使用情况分析报告:

根据CNZZ数据中心对国内网民上网终端分辨率的统计分析,2013年5月中国网民上网终端分辨率从使用率来看,1024×768、1440×900、1366×768与4月份环比呈现增长趋势,而1280×800、1680×1050、800×600、1152×864分辨率趋势恰好相反,其他分辨率趋势变化不大。从占有率来看,1440×900、1366×768与4份相比有所增长,而1024×768、1280×800、800×600、1152×864分辨率趋势恰好相反。


分辨率 使用率
1366x768 22.74%
1440x900 20.89%
1024x768 17.61%
1920x1080 14.41%
1280x800 5.94%
1280x1024 4.80%
1680x1050 4.13%
1280x768 3.00%
800x600 2.33%
1152x864 2.13%
1280x960 1.80%
1920x1200 0.22%
960x640 0.00%
1136x640 0.00%


网页宽度与首屏高度:

安全宽度1002 px 可建议较大宽度1258 px
Window XP首屏大小580 px Window 7 首屏大小710 px


 


1、常见界面、控件、功能、状态命名集合:

APP产品经理、APP设计师、APP开发工程师,包括H5前端开发人员都可以记住的文件命名规范。
界面命名              
整个主程序 App 搜索结果 Search results 活动 Activity 信息 Messages
首页 Home 应用详情 App detail 探索 Explore 音乐 Music
软件 Software 日历 Calendar 联系人 Contacts 新闻 News
游戏 Game 相机 Camera 控制中心 Control center 笔记 Notes
管理 Management 照片 Photo 健康 Health 天气 Weather
发现 Find 视频 Video 邮件 Mail 手表 Watch
个人中心 Personal center 设置 Settings 地图 Maps 锁屏 Lock screen

 

系统控件库              
状态栏 Status bar 搜索栏 Search bar 提醒视图 Alert view 弹出视图 Popovers
导航栏 Navigation bar 表格视图 Table view 编辑菜单 Edit menu 开关 Switch
标签栏 Tab bar 分段控制 Segmented Control 选择器 Pickers 弹窗 Popup
工具栏 Tool bar 活动视图 Activity view 滑杆 Sliders 扫描 Scanning


功能命名              
确定 Ok 添加 Add 卸载 Uninstall 选择 Select
默认 Default 查看 View 搜索 Search 更多 More
取消 Cancel 删除 Delete 暂停 Pause 刷新 Refresh
关闭 Close 下载 Download 继续 Continue 发送 Send
最小化 Min 等待 Waiting 导入 Import 前进 Forward
最大化 Max 加载 Loading 导出 Export 重新开始 Restart
菜单 Menu 安装 Install 后退 Back 更新 Update

 

资源类型              
图片 Image 滚动条 Scroll 进度条 Progress 线条 Line
图标 Icon 标签 Tab Tree 蒙版 Mask
静态文本框 Label 勾选框 Checkbox 动画 Animation 标记 Sign
编辑框 Edit 下拉框 Combo 按钮 Button 动画 Animation
列表 List 单选框 Radio 背景 Backgroud 播放 Play

 

常见状态              
普通 Normal 获取焦点 Focused 已访问 Visited 默认 Default
按下 Press 点击 Highlight 禁用 Disabled 选中 Selected
悬停 Hover 错误 Error 完成 Complete 空白 Blank

 

位置排序              
顶部 Top 底部 Bottom 第二 Second 页关 Header
中间 Middle 第一 First 最后 Last 页脚 Footer

 

2、以iOS为范例(安卓通用)的切片文件命名规范如下:

个人觉得标识符命名原则,尽可能的用最少的字符而又能完整的表达标识符的含义(如:Navigation bar可以缩减成nav)。