从iOS 11 UI Kit中谈谈iOS 11的新变化

北京时间9月20日凌晨1点,iOS 11终于迎来了正式版的推送,相信各位小伙伴已经在第一时间进行了升级。iOS 11毫无疑问是一次大规模的系统更新,UI、系统内核、锁屏等多方面都进行了不同程度的改进。小编第一时间为大家整理好了iOS 11优秀 UI Kit的下载资源,并且与大家谈一谈UI Kit背后的iOS 11的新变化。

1、 iOS 11 UI 的新变化

在准备着手设计前,首先我们来梳理一下iOS 11 的设计理念。在iOS系统的长期发展中,随着功能和界面的不断丰富,整个系统日趋复杂,App内部的功能架构也有同样的情况。因此,Apple设计团队在新系统中强调了“指引”这一设计思维,并充分地把这一设计思维贯彻到了iOS 11的方方面面。

此外,我们再来看看苹果设计团队的设计原则:

• 内容凸显的第一原则

• UI元素不与内容竞争,除非是帮助用户去理解潜在功能的作用

在这样的设计思维和原则的基础上,我们从以下几个角度进行分析。

(1)粗体标题导航栏

扁平化设计中,文字排版影响着信息层级的展示的清晰与否,通过文本的字号、字重、颜色等的对比去建立清晰的信息层级,而不用太多的装饰元素。iOS 11中最让你印象深刻的莫过于粗体大标题栏的变化。

如果你想要打造顶层是标签栏结构的APP,这种设计规范就会非常适合,使用粗体大标题能够让用户在大量的标签切换中快速地意识到自己目前所处在的位置;

尤其是对于内容丰富的APP,大量的页面和各种深度的结构层次,在使用大标题后,相信可以起到很好的页面引导作用。

但是我们看到的是,时钟这项系统应用仍然保持了原有的字体排版模式,其原因在于这项应用在内容和功能上互相平行独立,非常容易分辨,如果在每项的界面继续采用大标题,UI元素会潜在对内容造成了竞争,从而违背了基本设计规则。相应的如果是内容和布局类似的APP的话,粗体标题就会起到很好的指示作用。

(2)提升设计层次

“层次(层次)”是UI很重要的元素,让重要的,不重要的东西区隔开来,引导使用者的阅读动线。清晰的层次可以减轻用户的阅读负担,降低信息寻找的脑力消耗,从而让主次关系更加协调统一。

•卡片式和投影

在新版的iOS 11界面中,不少地方采用了卡片式或是宫格式的排列模式,视觉上一致,也易于设计上的迭代。这种主要适用于流量分发的渠道型页面,能够结构层次清晰地展示图文的层级关系,起到规整图文内容的作用;

伴随卡片式的内容一起出现的还有投影的大量使用,令设计元素更加独立醒目,极好的抓住用户的注意力。

•界面布局中的留白

iOS 11的大标题文本中都包含一组带有图片和描述的元素,组元素和组元素之间保持较大的间距。这样的话,设计元素和元素之间保持足够的间距,可以减少用来区分层级关系的不必要装饰元素。

•颜色/字号/字重

iOS 11中也大量使用了颜色深浅、字号大小和文本粗细来展示标签的不同层次,我们可以看到照片APP在iOS 10中章节标题和照片对比不明显,在更新后,章节标题主标题字体变大加粗,副标题字体变大,颜色变为了灰色,整体层次得到了提升。

(3)圆角图标

iOS 11中的大量的图标由2px线性改为了面型,从线框状态变得更加圆润,亲和力。总体来说边角更圆润,空心变为实心,色快感变重,使iOS的视觉更加轻快、柔和。

系统图标中,状态栏讯号强度从•••••改回阶梯式,电量图标的线面比例变得更均衡一些,标签栏图标从空心/实心两态变成全实心粗线条设计,配合整体设计调性。

2、原型设计

在使用Sketch设计完基于iOS 11系统的静态视觉稿后,想要对设计稿进行进一步的交互设计和团队协作的话,推荐在Sketch中安装Mockplus插件,结合Mockplus就可以轻松将Sketch中完成的设计稿转变成可交互原型,从而在Mockplus中进行快速原型设计,并且与团队成员进行协作和批注。

下载地址:https://www.mockplus.cn/download

3、iOS 11 UI Kit资源集锦

(1)Apple官方下载地址(PS、Sketch):

https://developer.apple.com/design/resources/#ios-apps

(2)iOS Design Kit下载:

https://www.iosdesignkit.io/ios11-gui/

(3)UI 8 下载:

https://ui8.net/products/sparks-ios-11-ui-kit

(4)Sketch APP Source下载:

https://www.sketchappsources.com/free-source/2689-ios-11-app-store-design-uu-sketch-freebie-resource.html

(5)Applypixels下载:

https://applypixels.com/template/ios-11-ui-kit/

相信有了这些资源和工具后,大家能够快速地做出适配iOS 11的APP视觉稿和原型,关于更多详细的设计规范和资源,大家可以参考苹果官方的人机交互指南:

苹果人机交互指南

https://developer.apple.com/ios/human-interface-guidelines/overview/themes/

iPhone X适配指南

https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏美团技术团队

Hyperloop,让发布简洁高效

Hyperloop 是什么? Hyperloop 是服务于美团点评客户端的组件发版、持续集成、App 打包构建、资源调度等各个环节的发布调度系统。名称起源于美国...

43270
来自专栏美团技术团队

Shield:支撑美团点评品类最丰富业务的移动端模块化框架开源了

引言 一直以来,如何能更高效地开发与维护页面是Android与iOS开发同学最主要的工作和最关心的问题。随着业务的不断发展,根据特定业务场景产生的定制化需求变得...

52190
来自专栏美团技术团队

关于刘海打理这种事儿,美团点评的iOS工程师早就有经验了,不信你看!

背景 iPhone X 刘海机于9月13日发布,给科技小春晚带来一波高潮。作为开发人员却多出来一份忧虑,iPhone X 怎么适配?我们 App 的脑袋会不会也...

40370
来自专栏AI科技评论

学界 | 全景照片不怕歪!Facebook 用神经网络矫正扭曲的地平线

AI科技评论按:最近微博上的全景照片很火呀,相比各位都已经在自己的iPhone或者iPad上品鉴了多家IT公司的办公室、游玩了多个旅游胜地、享受了被小猫小狗环绕...

41270
来自专栏程序员互动联盟

如何入门移动端app开发

随着互联网时代的到来,安卓和苹果的火热,移动端app的需求越来越多。这就催生了越来越多的开发人员加入移动端app开发的队伍中。目前移动端主要被三大操作系统占据着...

49850
来自专栏人工智能LeadAI

OpenCV人脸识别之三:识别自己的脸

本系列人脸识别文章用的是opencv2,最新版的opencv3.2的代码请参考文章: OpenCV之识别自己的脸——C++源码放送(请在上一篇文章末尾查看) ...

58440
来自专栏新智元

揭秘《星球大战》机器人BB-8技术原理,跑这么萌是有原因的

这应该是影视史上最受关注的非人类角色之一了。 没错,就是那个正在美国热映的《星球大战:原力觉醒》中的机器人BB-8。从去年10月官方放出的首支预告片开始,结构奇...

31340
来自专栏JadePeng的技术博客

weex官方demo weex-hackernews代码解读(上)

一、介绍 weex 是阿里出品的一个类似RN的框架,可以使用前端技术来开发移动应用,实现一份代码支持H5,IOS和Android。最新版本的weex已默认将v...

37650
来自专栏腾讯研究院的专栏

可穿戴技术攻坚战:将心跳变成现金

等到苹果明年春季发布Apple Watch之时,全球将无人不想知道这款让众人期待已久的可穿戴设备到底具备何种功能,佩戴的感觉如何,以及其所代表的含义。不过,关...

36090

方舟的移动钱包即将推出

在过去的几周里,Ark一直在缓慢而稳定的上涨。Ark似乎因市场整体上涨而推高。

48270

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励