WY 关于WY

地球人,专注用户体验设计与前端开发。爱读书爱运动爱设计...[更多]

扫描用手机阅读此文
支持Android/iPhone

您的位置:首页 > 记录 > 设计记录

(包含iPhone X适配)IOS11设计指南尺寸规范

文/ WY 2018-07-27 10:57:37 3362阅读

ios11-guifan

2018年9月13号出了IPHONE Xs 和 IPHONE Xs MAX,主要是多了一个1242 x 2688这尺寸,好在这个尺寸直接用@3x的切图即可,对目前设计师来说工作量主要是增加1242 x 2688的引导页图片。其他没有什么大的变化,还是按照以前的做法做:750*1334做设计稿(sketch用一倍图做也行),然后切图2套 @2x 和@3x。

现在做APP界面设计稿主要是用到SKetch(mac电脑)和XD(pc和mac都可以安装使用)这2个。鉴于大部分人没有mac电脑,目前很多设计师还逐步用XD来替代PS做APP的设计工作,XD的出现预计要爆发一波,win10系统可以用上XD啦。ADOBE XD 可以打开PS、AI、Sketch文件,并且PC和MAC都能安装使用,并且是免费安装使用,目测要火了!下载安装:官方中文免费版ADOBE XD

facebook出品的iOS 10 GUI (iPhone)源文件

点击上图下载苹果官方UI组件库,方便大家研究组件的尺寸,摸不准的就量一量尺寸。

 

如果是用PS做设计稿就用750*1334,如果是用SKetch或者XD来设计,常见是用1倍尺寸来说,也就是375*667或者375*812(iPhone X)。

 

分辨率和显示规格

设备名称屏幕尺寸PPIAsset竖屏点(point)竖屏分辨率(px)
iPhone XS MAX6.5 in458@3x414 x 8961242 x 2688
iPhone XS5.8 in458@3x375 x 8121125 x 2436
iPhone XR6.1 in326@2x414 x 896828 x 1792
iPhone X5.8 in458@3x375 x 8121125 x 2436
iPhone 8+ , 7+ , 6s+ , 6+5.5 in401@3x414 x 7361242 x 2208
iPhone 8, 7, 6s, 64.7 in326@2x375 x 667750 x 1334
iPhone SE, 5, 5S, 5C4.0 in326@2x320 x 568640 x 1136
iPhone 4, 4S3.5 in326@2x320 x 480640 x 960
iPhone 1, 3G, 3GS3.5 in163@1x320 x 480320 x 480
iPad Pro 12.912.9 in264@2x1024 x 13662048 x 2732
iPad Pro 10.510.5 in264@2x834 x 11121668 x 2224
iPad Pro, iPad Air 2, Retina iPad9.7 in264@2x768 x 10241536 x 2048
iPad Mini 4, iPad Mini 27.9 in326@2x768 x 10241536 x 2048
iPad 1, 29.7 in132@1x768 x 1024768 x 1024

 

ultimate-guide-to-iphone-resolutions

 

下面4张图片摘自:超全面的UI设计规范整理汇总(包含iPhone X适配

 

 

下面2张图片摘自淘宝团队出的一个规范文档。

chicun

2-(1)

 

字体:

zitibao

app所用的字体大礼包下载(虎哥整理的)

中文字体:PingFang SC

英文字体:SF UI Text 、SF UI Display

其中SF UI Text适用与小于19pt的文字,SF UI Display适用于大于20pt的文字

注意:下面字号pt单位是按照1倍说明的,如果你是按照750*1334设计的话,需要自己乘2得到PX像素值。

 

常见的字体大小:

24px、26px、28px、30px、32px、34px,36px等等。记住是偶数的。最小字号20px。

元素字重字号(pt)行距字间距
Title 1Light28pt34pt13pt
Title 2Regular22pt28pt16pt
Title 3Regular20pt24pt19pt
HeadlineSemi-Bold17pt22pt-24pt
BodyRegular17pt22pt-24pt
CalloutRegular16pt21pt-20pt
SubheadRegular15pt20pt-16pt
FootnoteRegular13pt18pt-6pt
Caption 1Regular12pt16pt0pt
Caption 2Regular11pt13pt6pt
元素字号(pt)字重字距(pt)类型
Nav Bar Title17Medium0.5Display
Nav Bar Button17Regular0.5Display
Search Bar13.5Regular0Text
Tab Bar Button10Regular0.1Text
Table Header12.5Regular0.25Text
Table Row16.5Regular0Text
Table Row Subline12Regular0Text
Table Footer12.5Regular0.2Text
Action Sheets20Regular / Medium0.5Display

 

图标 Icon

从iOS 7开始,app图标一直使用超椭圆的形状,原来旧的简单圆角半径值没有了。所以在为iOS设计应用程序图标时,我建议使用Apple提供的官方应用程序图标模板。

圆角的图形不应该包含在最终的输出成品中,但如果你想要添加和应用程序icon拐角对齐的描边和阴影效果,那你可能还会用到圆角图形。

提醒:如果你要使用超椭圆形状对icon进行蒙板(遮罩),又希望将应用效果和icon拐角对齐,那你要确保在遮罩外的区域不能使用任何透明的图形。应用程序icon不支持透明度,相反作为纯黑色进行渲染。如果你的遮罩不是百分百精确,那用户将会在圆角边缘看 到黑色的锯齿。推荐将canvas的背景设置成和app icon一样的背景。

设备名称应用图标App Store图标Spotlight图标设置图标
iPhone X, 8 , 7 , 6s , 6s180 x 180 px1024 x 1024 px120 x 120 px87 x 87 px
iPhone X, 8, 7, 6s, 6, SE,5s, 5c, 5,
4s, 4
120 x 120 px1024 x 1024 px80 x 80 px58 x 58 px
iPhone 1, 3G, 3GS57 x 57 px1024 x 1024 px29 x 29 px29 x 29 px
iPad Pro 12.9, 10.5167 x 167 px1024 x 1024 px80 x 80 px58 x 58 px
iPad Air 1 & 2, Mini 2 & 4,
3 & 4
152 x 152 px1024 x 1024 px80 x 80 px58 x 58 px
iPad 1, 2, Mini 176 x 76 px px1024 x 1024 px40 x 40 px29 x 29 px

我们一般做1024×1024尺寸,一般做方形无圆角。然后用 IconTemplate 自动切图一套图标资源丢给程序员就ok了。

注意:我打开了裁切圆角的开关,所以自动生存的都是圆角的,主要是为了过稿子给大家看着方便。

给程序小哥的素材资源不用打开这个开关,那么自动切出就是方角的,直接一包图标素材丢给程序小哥就行了。

 

记住画图标的时候图形尽量在下图所示的圆形内。

 

 

自定义图标 Custom Icons

设备名称导航栏和工具栏图标尺寸标签栏图标尺寸
iPhone 8 , 7 , 6 , 6s66 x 66 px75 x 75 px  最大144 x 96 px
iPhone 8, 7, 6s, 6, SE44 x 44 px50 x 50 px  最大96 x 64 px
iPad Pro, iPad, iPad mini44 x 44 px50 x 50 px  最大96 x 64 px

 

界面的图标切图:

  1. 蓝湖切图教程

  2. Cutterman选中@2x @3x导出。

sample1

 

界面主流标注工具:

ios开发里单位是pt

750×1334尺寸的换算关系 1pt=2px,也就是说程序员拿到我们的px单位的标注稿,自己除以2就是pt了。

 

  1. PS蓝湖插件下载>> 

  2. SKetch插件下载>>

  3. 蓝湖手机预览APP下载>>

  4. 蓝湖自动同步网盘团队协作>>

  5. 蓝湖详细使用教程

 

其他标注工具:

  1. 马克鳗

  2. PxCook 像素大厨

  3. Parker标

交接给程序:

最好是一个界面一个文件夹。文件夹里包括:界面效果图,标注文件图,切图资源文件包。

 

引导页:

值得注意的是引导页切图需要单独设计多套(640×1136、750×1334、1125×2436、1242×2208)这个可别傻乎乎的用Cutterman切几套图,这就尴尬了。

 

适配方法3个原则:(不清楚的在网站搜索适配2字)

  1. 文字流式

  2. 控件弹性

  3. 图片等比缩放

 

配色

 

注意:下面pt单位是按照1倍说明的,如果你是按照750*1334设计的话,需要自己乘2得到PX像素值。

导航栏(Navigation Bar)

导航栏包含了可以导航整个应用、管理当前界面内容的控件。它一般都存在于屏幕的顶部,状态栏的下方。 在默认情况下,导航栏是半透明的,并且会把被导航栏遮住的页面内容进行模糊处理。当然,导航栏也可以 被设置为不透明的纯色背景、渐变色背景甚至是一个自定义的位图。

随着IOS 11的发布,苹果介绍了一种新的导航栏样式:当应用的滚动位置处于0时(即在顶部),标题会移 动到导航栏的下方单独成一行,并且被大幅放大(就是上图第三种状态)。当用户开始将界面往下滚动时, 这个大标题就会淡出屏幕,并以它原本的大小回归到导航栏的中间位置(上图第一、二种状态)。

横屏模式下iPhone的导航栏状态。除了iPad设备,其他设备的状态栏的高度都会被缩减12pt。当然在横屏模式下隐藏掉导航栏也是 一种很常见的做法。

 

导航栏中的元素必须遵守如下几个对齐原则:

  • 返回按钮必须在左边对齐。

  • 当前界面的标题必须在导航栏正中。

  • 其他控制按钮必须在右边对齐。如果可以的话,尽量留存一个主要的控制按钮来保持界面的简洁和避免 按钮的点按失败。

 

工具栏(Tool Bar)

工具栏包含了一组可以管理或操作当前页面内容的动作。在iPhone上,它一直显示在屏幕的底部。不过在iPad 上,它也可以显示在屏幕的顶部。

和导航栏类似,工具栏的背景是可以被设置的,如果是在默认模式,它就会变成半透明,并对下面被遮住的 页面内容做模糊处理。

当一个页面需要超过三个主要的操作按钮时,就可以把这些按钮放到工具栏里了,因为这些按钮很难被放入 导航栏中,即便放进去了也有可能会让界面看起来很凌乱。

 

搜索栏(Search Bar)

在默认模式下,搜索栏有两种风格:突出显示的(搜索栏很醒目,为亮色)和不突出显示的(搜索栏和周围 环境对比度不高,为暗色)。两种版本都拥有同样的功能。

  • 只要用户还没有输入内容,搜索栏内就会显示占位符,同时根据当时情况,应该有一个书签图标可以让 用户访问最近搜索的内容或用户自己保存的搜索词条。

  • 一旦用户输入了内容,占位符就会消失,同时清除按钮就会出现在右侧边缘,用来清除用户输入的内容。

搜索栏可以使用一个简短的句子来做为搜索提示,介绍一下可以搜索出内容的搜索词条,比如“输入城市名、 邮政编码或者机场名”。

突出显示的搜索栏风格(亮色),上图是搜索栏分别在没有提示语句和包含提示语句情况下的样式。

 

不突出显示的搜索栏风格(暗色)。

为了加强对搜索结果查询的控制,我们可以为搜索栏绑定一个范围选择栏(Scope Bar)。范围选择栏和搜 索栏的风格一致,而且在我们已经明确知道搜索结果种类的情况下会很有用。比如,在一个音乐应用里,搜 索结果就可以通过表演家、专辑名和歌曲名这几个分类进行再过滤。

 

标签栏(Tab Bar)

标签栏可以让用户快速地在一个应用的几个页面之间来回切换,并且也只有存在这个需求的时候我们才会用 到标签栏。它通常出现在屏幕的底部边缘,在默认情况下,它也是半透明风格并像导航栏一样将被遮住的页 面做模糊处理。

标签栏所能装下的标签个数是有限的,如果超过了最大值,那么最后一个标签就会被替换成“更多”选项,该 选项会引出一个列表,里面全是被隐藏掉的标签以及一个可以将所有标签进行重新排序的选项。

 

iPhone设备上最多允许展示5个标签,不过在iPad上最多可以展示7个(不包括更多选项)。

 

为了通知用户来自某个界面的新消息,在对应标签按钮上标记出消息条数就显的很有意义。另外,如果某个 界面是暂时不可用的,那么它对应的标签按钮也不应该完全隐藏,而是应该整体变淡呈现出一种视觉上的不 可点击状态。

 

列表菜单(Table View)

列表菜单是用来展示单列或多列的包含大大小小的列表样式的信息,它既支持将多行信息划分成为一个单独 的部分,也支持将信息划分为多个部分,进行分组。

根据你需要展示的数据类型,有两种基本的列表菜单形式可供你选择。

 

平铺

一个平铺的列表菜单通常包含很多行数据,顶部可以有一个标题,底部可以有一个页脚。这种列表形式可以 用来作为一个垂直的导航出现在屏幕的右侧边缘,这样一来,当你要呈现的数据非常多并且可以按照某种规 律来排序时(比如按字母的降序排列),用上这种垂直导航就会很方便了。

 

分组

一个分组式的列表菜单可以允许你对列表行进行分组,每一组可以有一个标题(描述这一组数据的内容)和 一个页脚(帮助信息)。一个分组式的列表菜单需要包含至少一组的信息并且每一组至少包含一行数据。

 

两种列表类型都支持多种风格用来展示你的数据信息,以便让用户可以轻松的浏览、阅读和修改。

 

默认

默认风格的列表行会在左侧显示选项图标和选项标题。

 

分段控件(Segment Controls)

分段控件包含了一组(至少两个)分段,它可以用来过滤内容或者为那些有清晰的分类类型的信息创建标签。

 

每一个分段都包含一个文本标签或者一个位图(图标),但绝不是同时包含。另外,在一个分段里使用混合 数据类型(文本和图像)也是极其不推荐的。每个分段的宽度按照分段的数量进行自适应适配(2个分段时: 每个分段宽度占50%,5个分段时:每个分段宽度占20%)。

 

滑块(Sliders)

滑块控件允许用户在固定范围内选择一个数值。使用滑块会让整个选择过程很顺利并且没有多余的步骤,所 以用来选择不精确的模糊值最适合不过了。比方说,在调节音量时,使用滑块控件就非常合适,因为用户可 以通过倾听来辨别音量是大,还是过大,但是如果是通过设置一个精确的分贝值来设置音量,就会显得很不 合实际。

 

 

滑块控件是可以为最小值和最大值设置图标的,将它们分别放在滑块控件的头部和尾部,这样一来你就可以 更加直观的感受到这个滑块的目的。

 

步进器(Stepper)

当用户需要在一组固定值范围内选择输入一个精确的值时(比如1-10),就可以使用步进器。步进器包含两 个按钮,一个用来减少当前值,另一个用来增加当前值。

 

 

视觉上来说,步进器是可以被高度自定义化的:

你可以为步进器的按钮设置自己的图标。

当你想要保持IOS风格的外观时,你可以用一个浅浅的颜色来自定义边框、背景和图标,这样这些元素 就会被自动设置成你选择的颜色。

如果你还想更进一步,你可以为步进器按钮和分隔符设置完全自定义化的背景图片。

 

开关(Switch)

 

开关允许用户快速的在开和关两种状态之间切换。它是IOS应用的复选框。它的开与关状态的颜色可以被自 定义化,但是它的外观和大小就不能被改变了。

 

本文到此就要告一段落了,如果对你有帮助,能否打赏请我喝杯奶茶呢~ 感谢你的阅读。 

关注微信公众号「木小夭设计」,回复关键字“666”,免费领取一线大厂(BAT)产品的设计规范大礼包等,

muxiaoyao.jpg 

打赏鼓励

如本文对您有帮助,就请我喝杯奶茶吧!

  • 支付宝打赏
    支付宝扫描打赏
    微信打赏
    微信扫描打赏