界面尺寸规范

用户头像
广州/UI设计师/5年前/1699浏览
界面尺寸规范
用户头像
途遇

界面尺寸规范

图标尺寸规范

可点击高度规范

界面元素之间的距离规范

界面尺寸规范

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;

11
举报
|
35
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】游戏/娱乐icon
【新年UI图标】会员icon
矢量立体简约UI蓝白图标
盲盒APP UI设计
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】钱包icon
科技医疗透明柜UI界面设计
智能家居中心 简约 UI设计组件库
新能源APP应用UIKit
UI界面 组件
UI_3D图标“一本秘籍”(源文件
【新年UI图标】秒杀icon
新拟态风格 UI设计组件库
UI通用设计素材1
【新年UI图标】珠宝icon
钱包ui模板
【新年UI图标】影音icon
APP/小程序商业项目UI模板|99个高保真UI+79个原型
高级表盘系列UI源文件
高级感金属拟物 UI设计组件库
Security Camera UI kit
我的钱包-UI界面设计-app
你可能喜欢
相关收藏夹
大家都在看
登录注册