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


时间: 2021-07-30 10:21:01 人气: 10 评论: 0

北京时间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、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/

 

本文由 @jongde 原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
6人打赏
---蛙鱼源码WAYUYM.COM---专业提供网站模板,网站源码下载,教程培训,程序插件,网站素材等建站资源,主要收集各类精品源码资源,包含CMS程序模板、网站源码、游戏源码、APP源码等 ,所有资源都没有水印适合搬运,我们致力于打造一个优秀的建站资源共享学习平台!

专业厂家,设备先进,技术力量雄厚,自动化生产技术先进,产品质量符合国家标准,价格合理,https://www.69shenlan.com/,具有质量保证,生产及时,交货快捷的特点。 我们的宗旨:做我们擅长的事,希望用我们的创意和创意为客户实现战略定位,塑造品牌,强化形象!
我们的要求:坚持“优质产品、优质服务、优惠价格、快速交货”的经营方针,努力开拓市场,真诚为客户服务! 我们的发展:以独特的专业和专业精神,https://www.69shenlan.com/1:1--

iOS 11

评论