从零开始做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%的人还看了以下文章

  • 网页制作实战项目五:根据网页效果图制作网页

    了解网页制作全过程,能够根据网页效果图PSD源文件,切图并制作出网页。

    2018年5月3日
    7.5K0
  • 网页设计技巧:3步提升网页品质

    网页设计中的细节通常是束缚我们想像和内容设置的枷锁。要提升网页设计品质,特别是活动或专题页面的视觉效果,请学习网页设计师必须知道的设计技巧:减法、分块、加法。 1.减法 网页设计中原先的细节经常是束缚我们想像和内容设置的枷锁。保留梁柱和承重墙是必需的,这便是我们在网页设计方法中提到的特征。 2.分块 在功能划分前,进行网页分区前所要做的信息消化。比如我们希望…

    2019年2月21日 网页设计
    3.9K0
  • 网页设计中字体运用的12个技巧一超实用!

    文字、文本排版是日常网站设计工作中经常用到,看似简单的文字,实际上排版也是很有讲究。 1. 了解字体的性格 每个字体都有性格,人们比较喜欢一些有特色的东西。那么这些被喜欢的存在什么规则呢,了解你的目标人群,知道你文档的用途,选择一类字体,使用你的目标人群所期望的字体,是你的文档的用途所需要的字体。 更多请阅读:网页设计字体篇:字体的性格 2. 避免使用默认字…

    2019年10月26日 网页设计
    4.3K0
  • 初学网页制作从这里开始

    本系列教程的目的就是:通过简单、全面和正确的介绍,教会你如何创建网站。本教程将从基础讲起,不要求你具备任何编程知识。假如你继续阅读本教程的话,你将能在一小时内制成一个网站。

    2020年2月22日
    5.2K0
  • 福利!13款免费商用黑体字体推荐

    “黑体”结构清晰、简洁有力的字形风格能使版面显得庄重醒目并富有现代感。无论是识别性、适用面、视觉效果都非常好。本期推荐 13 款免费商用黑体,前 6 款为各大品牌开发的黑体字型,后 7 款是在传统黑体上进行设计改造,形成各有特点的黑体变体。 Adobe 和 Google 共同开发的免费黑体。字体设计优雅,显示效果优秀,可以满足不同场景下的文字显示需求。由于字…

    2023年1月20日 网页设计
    6.8K0
  • 最全的前端开发框架介绍

    前端框架一般指用于简化网页设计的框架,比如,jquery,extjs,bootstrap等等,这些框架封装了一些功能,比如html文档操作,漂亮的各种控件(按钮,表单等等)。前段框架的好处:对于互联网的产品而言,前端用户体验往往决定了一款产品的竞争力和吸引力;而对于前端工程师来说,考虑的问题更为复杂,他们既要为网站上提供的产品和服务实现一流的Web页面、优化…

    2023年1月18日
    1.3K0

发表回复

登录后才能评论