恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
iOS14风格组件新鲜出炉,直接拿去用就完事!
0.0°
2020-07-10 原创文章 经验/观点 举报 1276 1 2 0

前不久苹果开了发布会,宣布 iOS 14 和 macOS Big Sur 的推出。其中,全新的UI改变,绝对是未来的趋势。


今天素材播报就分析一下,这次的变化有哪些,并准备好了相关组件,一起看下去吧~


从平面变立体


过去,产品设计大多都是一些扁平化的设计。


但从去年 iOS13 开始,苹果就在试图变革,想要在 UI 设计上呈现的更具象,比如备忘录的画图工具。




今年,iOS14 则更进一步的强化了这样的风格,在新的 Apple 操作系统里,可以看到很多地方的外观有了更多的阴影、纹理和 3D 形状。


苹果人机界面副总裁艾伦·戴(Alan Dye)是这样说的:“深度,阴影和半透明性用于创建层次结构。新材料丰富而充满活力……”


总结:设计师们可以在设计上,保留简约风格,但增加一些简单的效果(阴影,半透明),以此来建立视觉层次感。


视觉提醒变化


人脑需要提示才能识别物体,所以为了增强提示感,很多人会采取增加按钮的阴影,形成 3D 效果。


除此之外,运动也是一个额外的线索。就像 macOS 工具栏一样,当你移动鼠标光标到相应 icon 上时,它们会变大且背景突出,就是为了鼓励用户进一步的点击。


还有个方法就是采用色彩。苹果希望设计师使用色调使得元素更加的显眼。



对于macOS最大的改变是设计风格越来越趋同于iOS,这也为Apple未来的平台融合的战略打下了基础,这个趋同不仅仅表现在视觉层面,同时也体现在交互层面。


总结:不要害怕没有突出所有选项。不是每个按钮都需要有一个形状。当用户鼠标悬停在它上面时,再出现。在可能的地方尝试色彩,消除视觉复杂性。


透明度和背景模糊


在 iOS7 的时候,苹果开始做一些毛玻璃效果的 UI 风格,像这样:



iOS13 时,大量使用了毛玻璃质感的卡片,并且还设置了四种不同的背景模糊。



而在iOS14,更加强化透明度和背景模糊,提出分层的概念。



总结:多多尝试用阴影、半透明来创建视觉层次。


图标新拟态


苹果对于图标的设计,一直走在行业前沿,默默的影响其他同僚。


但是,今年他们走出了舒适区,迎来了一个新的变化——拟态,改变了扁平化,增强了立体感,有了新的风格。



总结:可以通过阴影和渐变来改变平面iOS图标。


除了上述的这些外,还有圆角变化、小组件等等。


贴心如我们,根据iOS14的特质,上线了一批新的组件,共计 15 个,方便刀友们快速复用。



赶紧去素材广场体验吧~方法如下:


第一步,在素材广场中寻找到所需的目标页面,点击保存。



第二步,点击素材找到刚保存的素材,置入当前页,或是,在右边组件中,直接拖拽到工作区。

如果你还有其他的素材需求,欢迎留言告诉我们哦~


Powered by Froala Editor

更新:2020-07-10

收藏

1人已收藏

墨刀_MockingBot

在线产品设计写作一体化平台

  • 494

    作品

  • 1448

    粉丝

  • 3

    关注

  • 产品经理和设计师谈恋爱,看得我比“老坛酸菜”还酸!
  • Figma”断供“后:墨刀能为中国企业做什么?
  • 产品经理干久了,有哪些后遗症?
  • 超实用的后台原型,产品大佬的摸鱼技巧都在这里!

    猜你喜欢

      2020-07-10 原创文章 经验/观点 举报 1276 1 2 0

      iOS14风格组件新鲜出炉,直接拿去用就完事!

      0.0°

      你确定要举报iOS14风格组件新鲜出炉,直接拿去用就完事!

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年07月10日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      1
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录