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

  • 汉字发展简史:甲骨文-金文-大篆-小篆-隶书-魏碑-草书-楷书-行书

    中国具有五千年文字历史,文字中所包涵的精髓,值得每一位设计师学习、继承与探究。设计师需要熟悉各种字体的风格特征,并能灵活运用字体进行编排设计,才能使作品的内容更清晰、更有条理地传达给读者。

    2023年1月18日 网页设计
    9.1K0
  • 制作网页,你需要掌握以下知识

    推荐:如何制作网页,网站制作流程 HTML(超文本标记语言):HTML是用于构建网页结构的标记语言。你需要学习HTML标签、属性和元素的使用,了解如何创建网页的基本结构、标题、段落、链接、图像等。推荐学习:Html入门教程(零基础)、跟永哥学HTML5 CSS(层叠样式表):CSS用于为网页添加样式和布局。你需要学习CSS选择器、属性和值的使用,了解如何设置…

    2023年10月4日
    5.4K0
  • Div+CSS网页布局项目实战一(含设计图、HTML和CSS源文件)

    网页的布局与规划 本次网页制作的效果图如上图所示,分析一下该图,我们不难发现,图片大致分为以下几个部分: 1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片; 2、内容部分又可分为侧边栏、主体内容; 3、底部,包括一些版权信息。 有了以上的分析,我们就可以很容易的布局了,我们设计层如下图: 根据上图,我再画了一个实际的页面布局图,说明一下层的…

    2018年7月31日
    12.4K0
  • 第2章HTML基础

    HTML的基本结构
    HTML语言的语法
    HTML语言的常用标记
    HTML 5新增结构元素

    2018年3月16日
    5.4K0
  • 网页制作实战项目四:使用DIV+CSS制作网页

    【时间要求】 2 学时( 45 分钟× 2=90 分钟) 【上机内容】 使用DIV+CSS制作网页——个人站点制作 【上机目的】 1、 掌握CSS盒模型 2、掌握网页元素的定位 3、掌握DIV+CSS布局的方法和技巧 【上机重点】 1 、网页元素的定位 2、DIV+CSS布局的方法和技巧 【上机难点】从表格布局向DIV+CSS布局的转变 【上机教学方法】 1…

    2018年5月3日
    11.4K0
  • 如何制作自己的网页

    要制作网页,建议你要具备的条件:对电脑熟练操作,使用电脑最好在一年以上,对网页设计感兴趣,有较充足的学习时间,熟悉office办公软件。当然,这些不是一定必须的。 第一阶段:开始时最好是学些网页编辑软件 如:Dreamweaver,hbuiler X,webstorm,Sublime Text 这样可以使您更了解网页制作与运营的原理。最好是结合教程边学习边制…

    2020年2月18日
    3.7K0

发表回复

登录后才能评论