从零开始做APP界面设计二:App界面设计尺寸

Android SDK模拟机的尺寸

屏幕大小 低密度(120) 中等密度(160) 高密度(240) 超高密度(320)
小屏幕 QVGA(240×320) 480×640
普通屏幕 WQVGA400(240×400) WQVGA432(240×432) HVGA(320×480) WVGA800(480×800) WVGA854(480×854) 600×1024 640×960
大屏幕 WVGA800 *(480×800) WVGA854 *(480×854) WVGA800 *(480×800) WVGA854 *(480×854) 600×1024
超大屏幕 1024×600 1024×768 1280×768WXGA(1280×800) 1536×1152 1920×1152 1920×1200 2048×1536 2560×1600

Android的图标尺寸

屏幕大小 启动图标 操作栏图标 上下文图标 系统通知图标(白色) 最细笔画
320×480 px 48×48 px 32×32 px 16×16 px 24×24 px 不小于2 px
480×800px 480×854px 540×960px 72×72 px 48×48 px 24×24 px 36×36 px 不小于3 px
720×1280 px 48×48 dp 32×32 dp 16×16 dp 24×24 dp 不小于2 dp
1080×1920 px 144×144 px 96×96 px 48×48 px 72×72 px 不小于6 px

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界面尺寸

设备 分辨率 PPI 状态栏高度 导航栏高度 标签栏高度
从零开始做APP界面设计二:App界面设计尺寸iPhone X 1125×2436 px 458PPI 88px 176px
从零开始做APP界面设计二:App界面设计尺寸iPhone6P、6SP、7P、8P 1242×2208 px 401PPI 60px 132px 146px
从零开始做APP界面设计二:App界面设计尺寸iPhone6 – 6S – 7 750×1334 px 326PPI 40px 88px 98px
从零开始做APP界面设计二:App界面设计尺寸iPhone5 – 5C – 5S 640×1136 px 326PPI 40px 88px 98px

 

从零开始做APP界面设计二:App界面设计尺寸

iPhone图标尺寸

设备 App Store 程序应用 主屏幕 Spotlight搜索 标签栏 工具栏和导航栏
从零开始做APP界面设计二:App界面设计尺寸iPhone6P – 6SP – 7P – 8P(@3×) 1024×1024 px 180×180 px 114×114 px 87×87 px 75×75 px 66×66 px
从零开始做APP界面设计二:App界面设计尺寸iPhone6 – 6S – 7 (@2×) 1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px
从零开始做APP界面设计二:App界面设计尺寸iPhone5 – 5C – 5S (@2×) 1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px

 

从零开始做APP界面设计二:App界面设计尺寸

iPad的设计尺寸

设备 尺寸 分辨率 状态栏高度 导航栏高度 标签栏高度
从零开始做APP界面设计二:App界面设计尺寸

iPad 3 – 4 – 5 – 6 – Air – Air2 – mini2

2048×1536 px264PPI40px88px98px
从零开始做APP界面设计二:App界面设计尺寸iPad 1 – 21024×768 px132PPI20px44px49px
从零开始做APP界面设计二:App界面设计尺寸iPad Mini1024×768 px163PPI20px44px49px

 

从零开始做APP界面设计二:App界面设计尺寸

iPad图标尺寸

设备 App Store 程序应用 主屏幕 Spotlight搜索 标签栏 工具栏和导航栏
从零开始做APP界面设计二:App界面设计尺寸

iPad 3 – 4 – 5 – 6 – Air – Air2 – mini2

1024×1024 px180×180 px144×144 px100×100 px50×50 px44×44 px
从零开始做APP界面设计二:App界面设计尺寸iPad 1 – 21024×1024 px90×90 px72×72 px50×50 px25×25 px22×22 px
从零开始做APP界面设计二:App界面设计尺寸iPad Mini1024×1024 px90×90 px72×72 px50×50 px25×25 px22×22 px

 

从零开始做APP界面设计二:App界面设计尺寸

 

上一篇:从零开始做APP界面设计一:iOS 界面设计规范

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/1760.html

(1)
江山如画的头像江山如画管理团队
上一篇 2018年4月20日 下午9:05
下一篇 2018年4月22日 下午4:09

99%的人还看了以下文章

  • 两天入门React+ Node,全栈工程师培训教程(精)

    两天入门React+Node(全栈工程师培训教程),教程内容完整、脉络清晰、通俗易懂,能帮助初学者看清技术路径,快速入门。所有内容都配有 Demo 和操作指导。

    2018年2月13日
    4.6K0
  • 提高网页制作水平的7个要点

    1. 学好HTML和CSS编程 这是网页设计中最基础,也是最重要的部分。《web前端开发学习路线》 2. 清晰的导航 导航栏是页面中最重要的部分,因为它是用户使用网站最主要的途径。通过使用简单清晰的导航栏,可以提升网站的易用性,还可以减少用户在寻找自己需要的内容时遇到的麻烦。 3. 高质量的图片 高质量的图片,能大大提升网站的逼格。图片应当辅助你的设计来推销…

    2019年7月9日 网页设计
    6.5K0
  • 那些漂亮的网页banner,用的什么字体?

    banner的字体选用要根据banner的主题,去挑选,因为字体本身也是有性格的。 一、稳定型(协调,齐全,稳定,高质) 微软雅黑、冬青黑体、宋体、华文细黑 方正正中黑 方正兰亭系列 二、刚硬,锐利,清晰,强烈 造字工坊力黑体 造字工坊版黑体 造字工坊劲黑体 锐字逼格锐线体简 张海山锐线体 华康儷金黑 蒙纳超刚黑体 (更适用大气,热烈,权威,声明等主题) 三…

    2019年10月22日 网页设计
    10.4K0
  • 网页设计之前端开发工具和学习资源大全(精)

    前端文档 MDN 官方文档:https://developer.mozilla.org/zh-CN/docs/Web 前端社区 GitHub stackoverflow 掘金 JS 学习资源 现代 JavaScript 教程:https://zh.javascript.info/ 阮一峰 JS教程:https://wangdoc.com/javascript…

    2023年1月18日
    7.7K0
  • 网页制作实战项目六:中融宝企业网站制作

    【时间要求】 2 学时( 45 分钟× 2=90 分钟) 【上机内容】 中融宝企业网站制作 【上机目的】 1 、掌握网页布局的方法和技巧 2 、掌握HTML及CSS的使用 3、掌握表单及表单元素的使用 4、培养团队意识和协作精神 【上机重点】 1 、网页布局 2 、表单制作 3 、HTML及CSS的使用 【上机难点】 1、网页布局 2、CSS的定义和使用 【…

    2018年5月17日 网页设计
    13.1K1

发表回复

登录后才能评论