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

  • 制作网页,你需要掌握以下知识

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

    2023年10月4日
    4.9K0
  • 你需要知道的色彩基础知识

    色彩基础知识 光与色彩 色彩三要素 色彩的冷暖 色彩深度 光与色彩 1666年,牛頓以三棱镜分解太阳光,发現看似无色的光线,经过三棱镜時,会依其波长和折射关系, 依序分为紅、橙、黃、绿、青、蓝、紫七色光。 光的物理性质:波长:产生色相的区別波长短的偏蓝,波长长的偏红振幅:产生明暗的区別振幅大的偏亮,振幅小的偏暗 【练习】哪一個较偏蓝?以下哪一個较亮?  人类…

    2018年1月27日
    5.8K0
  • web开发技术课程项目考查

    考查目的 一、专业能力目标 ①检验学生对《web开发技术》课程的理解与掌握情况 ②锻炼学生运用所学知识解决实际问题,进行项目开发的能力。 ③掌握web项目的开发流程,网站建设的技术和方法,具备一定的网站设计能力及网页制作能力。 ④培养学生网站规划建设、发布,以及管理维护的基本技能。 ⑤培养学生掌握项目开发的的思想和方法,树立严肃认真的工作作风。 二、技能目标…

    2018年6月1日
    5.9K0
  • 网页设计常用色彩搭配表《配色表》

    该配色表将网页设计中常见的色彩搭配按照色相的顺序归类。每类都以该色相为主,配以其他色相或者同色相的,应用对比和调和的方法,并按照从轻快到浓烈的顺序排序。 按色相的搭配分类 红色、橙色、 黄色、 黄绿色、 绿色、 青绿色、 蓝色、 蓝紫色、 紫色、 紫红色 按印象的搭配分类 柔和、明亮、温柔柔和、洁净、爽朗可爱、快乐、有趣活泼、快乐、有趣运动型、轻快轻快、华丽…

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

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

    2019年2月21日 网页设计
    5.5K0
  • web开发技术项目评分标准

    是否符合网站建设规范(10分) 包括文件名、目录、代码、选择器命名、有无适当的注释等。 主题突出(10分) 全站围绕一个主题及其周边内容进行建设,不存在和主题不相关的其他信息。 内容丰富、完整,工作量饱满(20分) 内容健康、积极向上,具有可读性、艺术性。设计思路清晰,明确表达设计意图。网站页面数量要求包含至少一个主页和四个或以上的二级页面、三级页面。每页页…

    网页设计 2018年6月1日
    5.5K0

发表回复

登录后才能评论