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

相关推荐