界面尺寸规范
界面尺寸规范
图标尺寸规范
可点击高度规范
界面元素之间的距离规范
界面尺寸规范
1、界面尺寸大小是:750x1334px。
2、状态栏(status bar):就是电量条,其高度为:40px;
3、导航栏(navigation):就是顶部条,其高度为:88px;
4、主菜单栏(submenu,tab):就是标签栏,底部条,其高度为:98px;
5、内容区域(content):就是屏幕中间的区域,其高度为:1334px-40px-88px-98px=1108px
6、使用的字体一般为苹方(点/像素)
图标尺寸规范
1、导航栏和工具栏尺寸大小 44x44px;
2、标签栏尺寸大小高 98px,标签页高88px
3、导航栏的文字大小最大值是 32 36pt,标签栏的图标下方的文字大小为24pt。
4、内容区域的文字大小是:12 24 28 32 36
(4 8 12 16 20 24 28 32 36 40 44 48 52 56 60 64 68 72 76 80 84 88 92 96 100。)
设置界面的图标高度88px 和开关滑动按钮的高度80px / 64px
可点击高度规范
在iPhone8的原型图上,高88px。在750X1334设计稿中,88px是一个常用的设计尺寸。
搜索栏高度规范
搜索栏的高度,在iPhone8的原型图上,高64px。
界面元素之间的距离规范
在iPhone8设计稿中,界面元素之间的常用距离,亲密距离:16px;疏远距离:32p x。
A、疏远距离:比如,所有元素距离手机屏幕最左边的距离。
B、亲密距离:比如,左边图标与右边文字之间的距离。
原型设计中,需要考虑不同屏幕尺寸的苹果手机,在@1x的情况下的适配情况。
iPhone6在@2x屏幕尺寸是:750x1334px;对应的@1x,屏幕尺寸就是375x667px;
![](https://static.zcool.cn/git_z/z/images/new/page-loading.gif)
![立即打卡](https://static.zcool.cn/git_z/z/images/new/check-in-now.gif)