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

  • 网页设计色彩搭配:红色

    标准红色的RGB值分别是255、0、0。红色在网络上出现的频率可以说是比较高的,无论是传达吉庆的信息还是商业上的应用,是一种极具有表现力的色彩。 红色容易让人联想到太阳、热血、婚姻、喜庆,给人的感觉当然富有吉祥、吉祥、活力、激动、火暴等寓意。 如图所示: 图 红色基调 红色的波长最长,穿透力最强,感知度也最高。 它经常用来表现太阳、火焰、热血、花卉等,具有积…

    2021年2月4日 网页设计
    7.2K0
  • 你需要知道的色彩基础知识

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

    2018年1月27日
    5.2K0
  • 最完善的前端开发流程(详解)

    前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理。理论上,面向用户的产品里,所有问题(包括产品、设计、后端、甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题、计算问题、安全问题等)暴露在后端,这就意味着前端起到了至关重要的承载和连接作用。 一、前端开发流程 需求评审 一般在做需求评审时,PRD里只有交互稿,尚未有视觉稿。…

    2023年1月18日
    2.9K0
  • 网站logo制作13项实用技巧

    介绍了常用的网站logo制作方法、制作技巧。

    2019年11月16日 网页设计
    6.4K0

发表回复

登录后才能评论