ios界面设计规范尺寸规范(ios界面设计稿尺寸)

移动端设计尺寸是做App设计的设计师必须懂得的设计标准,然而很多UI新手都很头疼这个问题,其实并不复杂,只要记住常用的几个设计尺寸,即可。

首先,来看看各种iPhone的分辨率和界面尺寸:

移动端界面设计规范(ios尺寸篇)

iPhone分辨率

移动端界面设计规范(ios尺寸篇)

iPhone尺寸

移动端界面设计规范(ios尺寸篇)

看到上图之后,你的内心是不是崩溃的(反正我的内心是拒绝的),难道每个尺寸都要出一套设计稿? No No No,答案当然是否定的。

320x480px(也叫一倍图)是iPhone2G、3G、3GS手机的大小,在2017年的时候已经基本被淘汰不用了。640x960px(iPhone 4/4s)、640x1136px(iPhone5/5s)、750×1334(iphone6/6s/7/8)对应的则是2二倍图,尽管它们的尺寸不同,但计算出来的dpi是相同的,因此有三个2倍图。3倍图则是1080x1920px(iphone6p/7p/8p物理版)、1242x2208px(iphone6p/7p/8p设计版)。

由于iPhone X只是增加了高度,所以你不必担心,目前不会有4倍图的出现。所以我们选择750×1334的尺寸作为设计图,以此来向下向上都是极易方便的,本来plus我们要用1242x2208px来做设计,但是苹果公司用他们自己的方法再适配到1080x1920px尺寸的大小上,因此苹果只需要出两套图。

界面:750x1334px

尺寸高度

  • 状态栏:40px 状态栏字体:24px

  • 导航栏:88px 导航栏字体:34px 中等 可以大于34px但不能小于34px

  • 导航栏中搜索框:56~60px

  • 主菜单栏:98px 菜单栏图标下使用字体:20~24px 常规

  • 按钮最小为44px(手指可触控的最小区域),通栏按钮至少60px

  • 文本框大小为80~88px

  • 弹框遮罩:深色遮罩20%~40%透明度 浅色遮罩40%~60%透明度

  • 文本框之间的间距使用8的倍数(也称8像素原则),例如8px、40px等。

iPhone图标尺寸

移动端界面设计规范(ios尺寸篇)

这些尺寸比较多,小编在刚开始接触的时候都是一个个去制作(是不是很傻呀),然后输入给程序员哥哥的,后来才知道Ps中有一款神器,能够一键导出所有的icon,神器叫:IconTemplate,很好用的一款插件。

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:dandanxi6@qq.com

(0)
上一篇 2024年 1月 1日 下午4:48
下一篇 2024年 1月 2日 上午9:02

相关推荐

  • 收货地址为啥没有红谷滩区(红谷滩中兴华庭收货地址)

    “为什么淘宝网的收货地址里没有红谷滩区?”今年“双11”期间,家住南昌市红谷滩区丰和社区的陈奶奶在家人的帮助下学会了手机网购,然而当她兴致勃勃地打开淘宝网,在填写地址时却犯了难。最…

    数码教程 2023年 4月 15日
  • 手机qq聊天字体调最大还是太小

    当我们使用手机聊QQ,从一部小屏幕手机换到大屏幕手机,或者从大屏幕手机换到小屏幕手机的时候,我们就会发现聊天窗口的字体太小或者太大,其实这些都是可以从手机QQ本身的设置去调整字体的…

    2023年 5月 6日
  • 手机回收怎么卖高价

    又到了一年一度的圣诞新年购物旺季了,对于很多年轻人来说,用新手机迎接新年的到来是一件非常值得Happy的事情,而各手机商家也不愿错过这个一年当中最重要的赚钱良机,纷纷推出各种购机优…

    2023年 2月 2日
  • 请问显示器IPS屏和SPVA屏哪个好

    电脑显示器目前市场都是以LCD为主,也就是我们所说的液晶。大致分为TN、IPS、VA三种面板类型,每种面板技术都有其优点和缺点。 TN面板 TN(Twisted Nematic)面…

    2023年 5月 1日
  • vivo x9 plus

    1:序言 前段时间我们已经为大家带来了vivo X9的相关评测了,作为vivo旗舰的当红炸子鸡,X9相比上代X7在稳步提升的基础上把自拍再次提升到另外一个境界,前置2000W柔光双…

    2023年 10月 17日
  • 怎么在分期乐里借钱,分期乐是高利息吗

    上一篇文章发出后,很多小伙对于分期乐如何实现提前还款来减免借贷利息的问题不是太清晰,所以小编立刻为大家做了一个图解版的操作流程,我在担心会不会被分期乐暴打。。。 点击这里查看上一篇…

    2023年 1月 29日
  • 小米商城天猫京东哪个更好抢手机

    机身设计方面,在小米6上面,可以看到很多小米5/5s的设计元素。具体来说,前后两代产品的机身轮廓变化不太,小米6只是相对圆润了一点。小米6延续小米5双面玻璃机身设计,以及小米5s的…

    2023年 11月 18日
  • 手机上隐藏的扫描仪功能

    在工作和生活中,我们有时需要扫描文件,相信大家都会去打印店,其实在我们的手机上隐藏着一个扫描仪功能,很多人都不知道,今天就来教你如何使用。 首先打开我们手机上自带的【备忘录】,进入…

    2023年 6月 11日
  • 安卓手机文件传输到苹果电脑,安卓手机怎么连苹果电脑传文件

    今天讲一下电脑和安卓手机之间的文件传输的方法,看看这些你都知道吗。 1 USB数据线法 用手机数据线和电脑USB连接,然后手机上设置文件传输,就可以互传了。 2蓝牙互传文件,首先我…

    2023年 5月 16日
  • 苹果手机怎么修改隔空投送名称,苹果隔空投送怎么设置名字

    隔空投送是个比较实用的小功能,类似于蓝牙传送,我们可以通过隔空投送,将手机里的资料传给好友,相比于蓝牙,速度那是快上不少。并且,可以根据需要修改下自己的名字,以免传送错误。 那么,…

    2023年 12月 31日