ios macos_设计师可以从iOS 14和macOS Big Sur中学到什么?

ios macos

重点 (Top highlight)

With the introduction of iOS 14 and macOS Big Sur, we are the witness of the next big thing in UI Design. Changes are not so revolutionary like in iOS 7 years before, but they undoubtedly present the trend UI Designers will follow in the future…

随着iOS 14和macOS Big Sur的推出,我们见证了UI设计中的下一个重大事件。 改变并不像7年前的iOS那样具有革命性,但无疑,它们呈现了UI设计人员未来将遵循的趋势…

…and it won’t be Neuomorphism. 😉

……这不会是神经同质 。 😉

平面设计不再是趋势 (Flat Design is No Longer A Trend)

Let’s make it clear — minimalistic does not mean flat. Some people tend to use these terms as one thing. New Apple Operating Systems remain minimalistic, but their appearance gains more shadows, textures, and 3d shapes.

让我们说清楚-简约并不意味着扁平。 有些人倾向于将这些术语当作一件事。 新的Apple操作系统保持极简主义,但是它们的外观获得更多阴影,纹理和3d形状。

Like Alan Dye, VP Human Interface at Apple said: “Depth, Shading and Translucency are used to create the hierarchy. New materials are rich and vibrant….”

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

Apple reduces visual complexity and makes the design even more minimalistic. Some elements are flatter, but the feel is the opposite. Both iOS and macOS brings more 3d dimensions to their user experience.

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

👋 Tip for Designers: Think how minimalism may gain space in your design. Observe how simple effects (shadows, translucency) build visual hierarchy.

for设计师提示: 考虑极简主义如何在您的设计中获得空间。 观察简单的效果(阴影,半透明)如何建立视觉层次。

macOS Big Sur User Interface
Apple苹果

新的微妙功能 (New Subtle Affordances)

The human brain needs a hint to recognize the object. We tend to perceive 3d objects as interactive ones. That’s why lots of buttons still have a shadow.

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

However, motion is also an additional clue. Apple designers know that and the macOS toolbar icons lost their shapes to remove visual complexity. But, when a user drags the cursor around, their background highlights and encourage them to press the action.

但是, 运动还是另外一条线索。 苹果设计师知道,macOS工具栏图标失去了形状以消除视觉复杂性。 但是,当用户在周围拖动光标时,他们的背景会突出显示并鼓励他们按下操作。

The last obvious affordance is color. Apple wants designers to use Tint (or Accent) color to make active elements more visible. This tone should reflect the brand or product color. Thanks to this user immediately build a mental connection between the company and the application.

最后一个明显的负担是颜色。 苹果希望设计师使用色调(或口音)颜色来使活动元素更加可见。 此色调应反映品牌或产品颜色。 多亏了该用户,才能立即在公司和应用程序之间建立精神联系。

👋 Tip for Designers: Don’t be afraid of not highlighting all options. Not every button needs to have a shape. It may appear when a user hovers over its surface. Experiment with tints and remove visual complexity where it is possible.

Designer设计师提示: 不要担心没有突出显示所有选项。 并非每个按钮都需要具有形状。 当用户将鼠标悬停在其表面上时,它可能会出现。 尝试色调,并尽可能消除视觉上的复杂性。

Icons in the toolbar of macOS app
Apple苹果

制作数字资料 (Crafting in digital materials)

It has begun with Material Design from Google that showed us the vision of digital paper, then Microsoft introduced Fluent Design with the concept of multiple digital textures. It looks like Apple followed that, what’s more they moved it to the next level!

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

It is a great decision because digital Materials are more pleasant to our minds than raw pixelated squares. They make User Interface more human friendly.

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

👋 Tip for Designers: Play with the concept of digital material. Use depth, shadows, and translucency to create visual hierarchy. If you are not yet familiar with Material Design or Fluent Design System, read their guidelines to understand the concept.

for设计师提示: 发挥数字材料的概念。 使用深度,阴影和半透明来创建视觉层次。 如果您还不熟悉 Material Design Fluent Design System ,请阅读他们的指南以了解概念。

New Visual Hierarchy & Digital Materials in macOS
Apple苹果

微妙的效果营造了质量意识 (Subtle Effects Build The Sense of Quality)

There are tiny details that make a difference. You cannot see all of them from mockups or screenshots, because some of them are motion or sound (yeah, Big Sure introduces dozens of new and enhanced UI sounds).

有一些微小的细节会有所作为。 您无法从模型或屏幕截图中看到所有这些声音,因为其中一些声音或声音(是的,Big Sure引入了数十种新的和增强的UI声音)。

The thing that is primarily visible to Designers is the next generation of blur effect — called Progressive blur. It is about making the gradient of blur levels instead of hiding it below opacity or shadow.

设计师最主要看到的是下一代模糊效果-称为渐进模糊 。 这是关于使模糊级别渐变,而不是将其隐藏在不透明度或阴影下。

👋 Tip for Designers: See where and how Progressive Blur is used around the new OS. Think about how it may be applied in your designs. Which design tools may achieve that effect now?

Designer设计者提示: 了解在新OS的何处以及如何使用渐进式模糊。 考虑一下如何将其应用到您的设计中。 哪些设计工具现在可以达到这种效果?

“Depth, Shading & Translucency are used to create the hierarchy.”

“深度,阴影和半透明性用于创建层次结构。”

– Alan Dye

–艾伦·戴(Alan Dye)

图标中的新拟态 (New Skeumorphism in Icons)

In the last years, the macOS style was flattening the app icons and surrounded the symbols with mainly circular shapes. This has changed. Now the majority of icons gained “iOS-like” shape, but it is not flat. It is Skeuomorphic!

在过去的几年中,macOS风格使应用程序图标扁平化,并以圆形符号围绕符号。 这已经改变了。 现在,大多数图标都具有“类似于iOS的形状”,但它并不平坦。 这是拟态的!

Personally, I think that lots of new icons in the macOS look stunning, but some are not designed so well (for example Stock app icon).

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

👋 Tip for Designers: Explore the gallery of the new icons. See how additional shadows and gradients change the feeling of flat iOS icons that perfectly fits the Big Sur icon style. Consider using 3D shapes for some elements.

Designer设计师提示: 浏览新图标的库。 了解其他阴影和渐变如何改变完全适合Big Sur图标样式的平面iOS图标的感觉。 考虑对某些元素使用3D形状。

New App Icon style
Apple苹果

使用小部件显示即时信息 (Show Immediate Information with Widgets)

iOS 14 brings a totally new approach to widgets. They are displayed directly in a Home Screen. These widgets look almost identical on iPad OS and very similar to the new ones on macOS Big Sur.

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

Apple recommends us to focus the widget on one idea. To display only the information that’s is related to it, nothing more. It is also important to display dynamic information that is changing through time because the widget should not only encourage to open the app.

Apple建议我们将小部件集中在一个想法上。 仅显示与之相关的信息,仅此而已。 显示随时间变化的动态信息也很重要,因为小部件不仅应鼓励打开应用程序。

👋 Tip for Designers: Think which information from your app is the most important to the users. This type of content may be a foundation of a useful widget. Try to experiment with the new dimensions (Small, Medium, and Large) of widgets displayed directly in the Home Screen. Remember, to support Dark Mode!

Designer设计者提示: 考虑您应用中的哪些信息对用户来说最重要。 这种类型的内容可能是有用的小部件的基础。 尝试尝试直接在主屏幕中显示的小部件的新尺寸(小,中和大)。 记住,要支持黑暗模式!

iOS 14 Widgets on Homescreen
Apple苹果

整体生态系统方法 (Holistic Approach to The Ecosystem)

All Apple Systems iOS, iPadOS, macOS even watchOS works as a single ecosystem. They have got the same font, iconography, and almost identical visual styles.

所有Apple Systems iOS,iPadOS,macOS甚至watchOS都可以作为单个生态系统工作。 他们具有相同的字体,图标和几乎相同的视觉样式。

Consistency gives the user a feeling of familiarity and confidence. It builds more trust and a better connection with the brand.

一致性使用户感到熟悉和自信。 它建立了更多的信任并与品牌建立了更好的联系。

👋 Tip for Designers: If you are creating an omnichannel solution, available to all kinds of devices, observe how Apple apps change through platforms. Where is the consistency maintained? Where are the changes made? What features are added to different platforms? You may also want to read Task Driven Design to know more.

Designer设计人员提示: 如果要创建可用于所有设备的全渠道解决方案,请观察Apple应用程序如何在平台之间发生变化。 哪里保持一致性? 在哪里进行更改? 哪些功能已添加到不同的平台? 您可能还想 阅读“任务驱动设计”以了解更多信息

The official Human Interface Guidelines are always the best source for deep analysis of the new style and features. Feel free to read them here:

官方的人机界面指南始终是深入分析新样式和功能的最佳来源。 随时在这里阅读它们:

  • macOS Big Sure Guidelines

    macOS Big Sure准则

  • iOS 14 — What’s New Guidelines

    iOS 14-新增功能指南

Apple introduced lots of new inspiring things. While widgets, clips, and Progressive Blur in iOS 14 bring a lot of fresh experience to the mobile OS — it is the Big Sure that revolutionizes the way we use our macs. Even with its name — did you notice that it is named macOS 11?

苹果推出了许多新的启发性的东西。 尽管iOS 14中的小部件,剪辑和渐进式模糊为移动操作系统带来了很多新鲜体验,但是Big Sure彻底改变了我们使用Mac的方式。 即使使用它的名称-您是否注意到它的名称为macOS 11

Observing how digital systems evolve and impact design is my passion. I also create time-saving 🧰 UX Resources and write ✍️ UI Design Tutorials. The article originally published on my blog. Thanks for reading!

我热衷于观察数字系统如何发展和影响设计。 我还创建了省时的🧰UX 资源,并编写了✍️UI 设计教程 。 该文章最初发表在我的博客上 。 谢谢阅读!

Image for post
UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women),这是一个巴西组织,致力于通过采取行动,赋权和知识共享的举措来促进科技行业中的黑人女性平等。 对系统性种族主义保持沉默是不可行的。 建立您相信的设计社区。

翻译自: https://uxdesign.cc/what-can-designers-learn-from-ios-14-and-macos-big-sur-bab6e188ba4e

ios macos

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/276110.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Web开发性能优化总结 转载

1. 使用存储过程, (如果在程序里用exec 存储过程 参数,这样执行似乎并没有快多少) 在数据库里是预编译的,也不需要在字符串传输上花费大量时间。 防sql注入攻击。 2. 尽量优化数据库语句,使逻辑尽量…

金三银四的腾讯、阿里、​字节等大厂前端社招面经

大家好,我是若川。最近金三银四,今天分享一篇腾讯、阿里、字节等大厂的前端社招面试经验的好文,相信看完会有所收获。也欢迎点击下方卡片关注或者星标我的公众号若川视野作者面了将近一个月,目前还没挂过,但由于各种因…

JS中创建函数的几种方式

使用 "函数声明" 创建函数 语法:* function 函数名([形参1,形参2...形参N]){* 语句...* } */function fun2(){console.log("这是我的第二个函数~~~");alert("哈哈哈哈哈");document.write("~~~~…

ssm提交post_我用spring mvc做,用post方式提交,后台获取不到参数值,用get方式就可以,什么问题...

展开全部因为form表单e68a843231313335323631343130323136353331333365646330的enctype编码方式不同导致的;enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。默认地,表单数据会编码为 "application/x-www-form-urlencoded"。就…

网页设计简约_简约网页设计的主要功能

网页设计简约重点 (Top highlight)Minimalism is synonymous with simplicity. Not quite. As the name suggests, minimalism is definitely not about opulent design. But the assumption that minimalism is design-less and plain is also wrong. Minimalism is simple ye…

MySQL_数据库数据类型(data type)介绍

转载链接:http://www.360sdn.com/mysql/2013/0511/78.html MySQL_数据库数据类型(data type)介绍 mysql数据库的数据类型(data type)分以下几种:数值类型,字符串类型 一、数值类型 MySQL 的数值类型可以大致划分为两个类别,一个是整数,另一…

Expo 2010 Japan Pavilion

^_^转载于:https://www.cnblogs.com/mmmhhhlll/archive/2010/04/16/1713680.html

深度对比学习Vue和React两大框架

作为国内应用最广的两个框架,Vue 和 React 是前端必须掌握的内容,也是面试的重点。但大多数读者都只擅长其中一个框架,当面试涉及到另一个框架的内容时,就答不好了。比如虚拟dom,两个框架中都有应用,面试官…

PHP Token(令牌)设计

转载链接:http://www.jb51.net/article/13756.htm PHP Token(令牌)设计 设计目标: 避免重复提交数据. 检查来路,是否是外部提交 匹配要执行的动作(如果有多个逻辑在同一个页面实现,比如新增,删除,修改放到一个PHP文件里操作) 这里所说的token是在页面显示的时候,写到…

java rwd_面向任务的设计-不仅限于Mobile First和RWD

java rwdWe already know that majority of solutions should start with a design for smartphones, we know that all websites should be responsive. Now, it’s time to think about holistic solutions with specific tasks adapted to all kind of devices.我们已经知道…

python中关键字 表示空类型_python中什么表示空类型

python中什么表示空类型?python中None表示空类型。表示该值是一个空对象,空值是Python里一个特殊的值,用None表示。None不能理解为0,因为0是有意义的,而None是一个特殊的空值。可以将None赋值给任何变量,也…

HOJ 1015 Nearly prime numbers

代码 //Nearly prime number is an integer positive number for which it is possible //to find such primes P1 and P2 that given number is equal to P1*P2.#include <stdio.h>#include <stdlib.h>#include <math.h>//decide n whither is a nearly pri…

「前端工程化」该怎么理解?

大家好&#xff0c;我是若川。今天分享一篇「前端工程化」的好文。非广告&#xff0c;请放心阅读。可点击下方卡片关注我&#xff0c;或者查看系列文章。今天发文比较晚&#xff0c;以往都是定时早上7:30发文&#xff0c;也不知道是不是有点早。一.什么是前端工程&#xff1f;一…

axure文本框值相加_Axure教程:计数文本域实现

原标题&#xff1a;Axure教程&#xff1a;计数文本域实现制定UI规范时&#xff0c;遇到实现“限制字数的文本域”的交互问题&#xff0c;即当用户输入的字数长度超过限制要求&#xff0c;如何只保留规定长度的文本&#xff1f;效果如下&#xff1a;我们知道【Number】类型的文本…

figma下载_Figma和ProtoPie中的原型制作,比较

figma下载第1部分 (Part 1) Prototyping has never had such a high profile with a whole host of tools that now give you varying ability to realize your designs beyond their static UI and into a working usable thing. It’s fair to say that prototyping within t…

拗口翻译

I find many times people use temporary tables because they learned in other databases that joining too many tables in a single query is a ʹbad thingʹ. This is a practice that must be unlearned for Oracle development. Rather then trying to out‐smart the …

javascript 手机手势动作touch触屏原理分析

转载链接&#xff1a;http://www.lvtao.net/web/220.html $(function(){document.getElementById("moveId").addEventListener(touchstart, touchStart);document.getElementById("moveId").addEventListener(touchmove, touchMove);document.getElementBy…

并发工具类(四)线程间的交换数据 Exchanger

前言JDK中为了处理线程之间的同步问题&#xff0c;除了提供锁机制之外&#xff0c;还提供了几个非常有用的并发工具类&#xff1a;CountDownLatch、CyclicBarrier、Semphore、Exchanger、Phaser&#xff1b;  CountDownLatch、CyclicBarrier、Semphore、Phaser 这四个工具类提…

「前端组件化」该怎么理解?

大家好&#xff0c;我是若川。今天分享一篇关于「前端组件化」的好文。欢迎点击下方卡片关注我。以下是正文~这里我们一起来学习前端组件化的知识&#xff0c;而组件化在前端架构里面是最重要的一个部分。讲到前端架构&#xff0c;其实前端架构中最热门的就有两个话题&#xff…

大屏设计的视觉统一_视觉设计中的统一

大屏设计的视觉统一视觉设计的统一性是什么&#xff1f; (What is unity in visual design?) The concept of unity in visual design means a group of elements working together to create a greater whole. It means, as the clich goes: A whole that is greater than th…