设计师能从iOS 14和 macOS Big Sur中学到哪些干货？

Posted 2021-03-29 静Design

据说点击蓝色字体关注同学都升职加薪了

随着ios 14和macOS Big Sur的推出，我们见证了UI设计中的下一个重大事件。虽然这个变革并没有像7年前的iOS那样具有革命性，但毫无疑问，它向我们透露了UI设计师未来所要遵循的趋势…

但，这个趋势绝对不是“新拟物（Neuomorphism）”。

扁平化设计不再是趋势

简约并不意味着扁平，请不要把它们混为一谈。新的Apple操作系统保持极简主义，但是他们加入了更多阴影，纹理和3d形状。

苹果人机界面副总裁Alan Dye说：“深度，阴影和半透明性用于创建层次结构。新材料丰富而充满活力……” 

Apple降低了视觉复杂性，并使设计更加简约。有些元素比较扁平，但感觉却相反。iOS和macOS都为用户带来了更多的3D体验。

小提示：想想看，简约可以让你的设计空间更有“呼吸感”。观察一下，简单的效果（阴影，半透明）如何建立视觉层次。

微妙的新变化

人脑需要一个提示来识别物体。我们倾向于将3d对象视为可以交互的对象。这就是为什么许多按钮仍带有阴影的原因。 

但是，运动也具有很好的提示性。苹果设计师知道，macOS工具栏图标弱化了形状，以消除视觉复杂性。但是，当用户在周围拖动光标时，图标的背景会出现，突出显示并鼓励他们作出相应的操作。 

最后一个明显的变化是颜色。苹果希望设计师使用Tint（强调色）来使活动元素更加可见。这种颜色也是品牌或产品颜色，使用它，可以立即在公司和应用程序之间建立联系。

小提示：并非每个按钮都需要具有形状。当用户将鼠标悬停在其表面上时，它可能会出现。尝试色调，并尽可能消除视觉上的复杂性。

数字化设计物料

始于Google的Material Design，向我们展示了数字纸的愿景，然后Microsoft引入了Fluent Design，它具有多种数字纹理的概念。苹果公司紧随其后，而且他们将其提升到了一个新的高度。

这是个很好的决定，数字材料比原始像素正方形更令人愉悦。它们使用户界面更加人性化。 

小提示：使用深度，阴影和半透明来创建视觉层次。如果您还不熟悉Material Design或Fluent Design System，请阅读他们的设计指南。

塑造质感的小细节

一些微小的交互效果可以让你的设计与众不同。您无法从模型或屏幕截图中看到所有这些内容，因为其中一些是运动或声音（是的，Big Sur引入了数十种新的和增强的UI声音）。 

设计师最先看到的是下一代模糊效果-称为渐进模糊。这种模糊是渐变式的，而不是将其隐藏在不透明度或阴影下。 

小提示：考虑一下如何将渐进模糊应用到您的设计中。哪些设计工具现在可以达到这种效果？

“深度，阴影和半透明性用于创建层次结构。” -艾伦·戴（Alan Dye）

图标中的新拟态设计

在过去的几年中，macOS风格中的程序图标，大多为扁平化，并以圆形来围绕图标的方式实现。但是现在，大多数图标都具有“类似于iOS的形状”，但它并不平坦。它是拟态的！ 

我个人认为，macOS中的许多新图标看起来都很漂亮，但是有些图标的设计不是那么优秀（例如Stock应用程序图标）。 

提示：探索的新图标表现形式。了解阴影和渐变如何变化，以便完全适合Big Sur图标风格的平面iOS图标的感觉。考虑对某些元素使用3D形状。

用Widgets即时显示信息

iOS 14为小部件带来了全新的展示方法。它们直接显示在主屏幕中。这些小部件在iPad OS上看起来几乎相同，并且与macOS Big Sur上的新部件非常相似。

Apple建议我们将小部件集中在一个内容主题上。仅显示与之相关的信息，仅此而已。显示随时间变化的动态信息也很重要，因为小部件的作用，不仅是鼓励用户打开应用程序，而是让操作更加便捷。

小提示：思考一下，你的应用中，哪一部分的内容是最重要的，并把它们提取出来，作为小部件的内容基础。记住，要支持黑暗模式！

面向生态系统的设计方法

所有的Apple iOS，iPadOS，macOS甚至watchOS都可以作为单个生态系统工作。他们具有相同的字体，图标和几乎相同的视觉样式，一致性使用户感到熟悉和自信。它与用户建立了更多的信任，并与品牌建立了更好的联系。

提示：如果您正在创建一个全渠道的解决方案，适用于所有类型的设备，观察一下，苹果的应用程式如何在不同的平台进行改变和调整？在哪里保持一致性？在哪里进行更改？这都有利于搭建一个快速有效的设计方案系统。

下面苹果的官方文档可供参考：

https://developer.apple.com/design/human-interface-guidelines/macos/overview/whats-new-in-macos/

https://developer.apple.com/design/whats-new/

原文：https://uxdesign.cc/what-can-designers-learn-from-ios-14-and-macos-big-sur-bab6e188ba4e

翻译：静电

——————————————————

▼

往期精彩回顾

▼

静电的UI设计教室 暑期特训班开营啦

新版课程设计 面向实战及就业 备战秋招

7月6日火爆开课 名额有限 抓住最后机会

↓↓长按二维码咨询报名↓↓

我就知道你“在看”