ios11 and iphoneX UI设计规范

ios11 and iphoneX UI设计规范

近期苹果发布了ios11系统、iPhone8、iPhone 8 Plus、iPhone X等,but 网上的设计规范零散,于是入行两年的我做了一些总结,如有雷同请各位体谅,此次总结望对各位设计界的同仁有所帮助。(如有错误,请各位指出)!

iOS 11

《ios11 and iphoneX UI设计规范》

iOS 11是苹果公司研发的操作系统。北京时间2017年6月6日凌晨1点, WWDC(苹果全球开发者大会)2017在加州圣何塞麦克恩利会议中心召开,苹果系统iOS 11正式亮相。
正式版iOS 11在2017年9月份随着新品iPhone的发布推送更新升级。2017年9月20日,iOS 11正式版发布,增加的特定功能是:二维码扫描、诈骗短信识别、拼音键盘以及上海话语音识别等,其中,二维码扫描还支持“扫码解锁”摩拜单车。

动态效果

Dock 可以出现在任何应用的界面上,只要从屏幕下方划出就可以了。长按一个应用图标,可以将它拖到正在使用的应用之上。
也就是说,屏幕上会同时显示出两个应用,再次拖动一个应用的边缘,界面就演化成 1:1 或者 1:2 的分屏。这个操作的过程有些细节,比如拖动应用边框,界面较大的那个会在边缘向内收缩——这是在告诉你它即将缩小、另一个应用要出现在隔壁了。

《ios11 and iphoneX UI设计规范》

动态特效

比如录屏,点击它你会看到一个从 3 到 1 的倒计时,然后它才开始录屏;电池图标点一下会变成黄色,用来开启省电模式。更多的情况下,长按图标会进入一个二级页面,比如屏幕明暗的调节。这让你更直观的看到亮度的变化。

锁屏界面

Apple Music 在锁屏上占据的位置更少,它变成了一张卡片,显示歌名和控制按键。原本 Music 会占据一整个锁屏,有些第三方应用还会在这里展示滚动歌词。现在的样子更清新一些了。

搜索顺序

在Spotlight 键入关键词,紧接着它的是推荐的关键词、通讯录、短信内容等等融合在一起的一个下拉菜单,在这下方才是与这个关键词有关的应用程序。在 iOS 10 上,这个顺序是反过来的。以及,Spotlight 会一直顶在主屏左边、也就是摆放各种插件的界面。

模块变样

Apple Music 在控制中心中有点特殊,如果你长按,会看到这个框上不仅显示正在播放的歌曲名称、以及暂停播放和前后首按钮,右上角还有一个小小的信号图标,这里可以让你切换正在使用的蓝牙设备,比如 AirPods、各种音响。相比之下,iOS 10 切换蓝牙设备的时候还需要你到设置中找到“蓝牙”,再一个个查看。

拖动图标

同时拖动多个图标到文件夹,这也是效率提升的体现,如果你要把几个应用拖进某个文件夹,iOS 11 上可以长按一个图标、同时点选其他应用,就可以把它们几个同时拖进目标文件夹之中。手机上也支持这个操作。

《ios11 and iphoneX UI设计规范》

相关UI

《ios11 and iphoneX UI设计规范》

一、图标
在比较中寻求进步
iOS 10 VS iOS11

《ios11 and iphoneX UI设计规范》

2PX线性图标

特点:
1. 未选中时图标是以2px线框形展现,选中后的当前页以填充形态展现;
2. 设计、语言一致性,图标精致轻巧。

《ios11 and iphoneX UI设计规范》

面性图标

特点:用轻量化的面性图标代替2 PX的线性图标,以较为圆润的外观展现,使整体更加具有亲和力。

二、字体

iOS 11粗体标题

《ios11 and iphoneX UI设计规范》

《ios11 and iphoneX UI设计规范》

粗体
特点:粗体,且字体像素大,标题醒目(开个玩笑:典型的老夫设计)

《ios11 and iphoneX UI设计规范》

在扁平化设计中的优点:在扁平化设计中文字排版影响着信息层级展示的清晰与否,通过文字的字号、字重、颜色等的对比去建立清晰的信息层级,而不用太多的装饰元素。

三、设计元素

圆角、卡片化、投影元素

《ios11 and iphoneX UI设计规范》

特点:圆角弧度的增大让用户的视觉更轻快,柔和;卡片式设计贯穿在界面各个图文排版中,起到了规整图文内容的作用。投影元素的加入,令设计元素更加独立醒目,强有力的抓住用户的注意力。

四、界面布局中的留白

《ios11 and iphoneX UI设计规范》

特点:大标题文本包含一组带有图片和描素的元素,组元素和组元素之间保持较大的间距。
优点:设计元素和元素之间保持足够的间距,可以减少用来区分层级关系的不必要装饰块元素,使界面简洁、干练。

支持设备

iphone5s及5s以上
ipad air/air2及以上
ipod touch第六代

iPhone X

《ios11 and iphoneX UI设计规范》

iPhone界面规范

《ios11 and iphoneX UI设计规范》

《ios11 and iphoneX UI设计规范》

不同机型升级iOS 11效果展

《ios11 and iphoneX UI设计规范》

iPhone X规范

《ios11 and iphoneX UI设计规范》

《ios11 and iphoneX UI设计规范》

《ios11 and iphoneX UI设计规范》

分享iOS11 GUI视觉规范(附PSD+Sketch+Adobe XD源文件)

《ios11 and iphoneX UI设计规范》

百度网盘下载地址:

  1. 665M PSD格式下载地址:链接: https://pan.baidu.com/s/1i5CFD8D 密码: v3km
  2. 38.5M sketch格式下载地址:链接: https://pan.baidu.com/s/1c163YcK 密码: j4hs
  3. 7.7M Illustrator格式下载地址: 链接: https://pan.baidu.com/s/1i5nDgBr 密码: 5c27
  4. 三个打包下载地址:链接: https://pan.baidu.com/s/1slFNbtV 密码: xaqt

本文作技术分享,原始文章链接:
1、iPhone8和iPhoneX发布了,iOS11视觉规范源文件也来了
2、ios11 and iphoneX UI设计规范

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注