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,一经查实,立即删除!

相关文章

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

网页设计简约重点 (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…

Expo 2010 Japan Pavilion

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

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

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

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.我们已经知道…

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;一…

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…

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

大家好&#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…

跟着官方文档能学懂React Hooks就怪了

大家好&#xff0c;我是若川。今天分享一篇关于「React Hooks」的好文。欢迎点击下方卡片关注我。以下是正文~回想下你入门Hooks的过程&#xff0c;是不是经历过&#xff1a;类比ClassComponent的生命周期&#xff0c;学习Hooks的执行时机慢慢熟练以后&#xff0c;发现Hooks的执…

origin图上显示数据标签_Origin(Pro):寒假都结束了,这个图还是不会画?【数据绘图】...

寒假前给大家分享了一个图&#xff0c;大家要的教程来了。【数据绘图】好图分享&#xff1a;寒假&#xff1f;不存在的&#xff01;​mp.weixin.qq.com绘图思路&#xff1a;左侧起止时间&#xff1a;散点图&#xff0c;交换XY坐标轴&#xff1b;中间的连线为Drop Lines&#xf…

可以激发设计灵感的音乐_建立灵感库以激发您的创造力

可以激发设计灵感的音乐I often find a lot of inspiration from work I see while scrolling social media. Saving art or images that inspire you allows you to build a library of resources to draw from whenever you’re working on a project.在滚动社交媒体时&#…

若川知乎问答:做前端感觉很吃力怎么办?

前些日&#xff0c;我发了一篇推文《做前端感到越来越吃力了&#xff01;怎么办&#xff1f;》&#xff0c;虽然是推广&#xff0c;但阅读量却很高&#xff0c;推广标题我们大概率不能改&#xff0c;感觉骗了大家&#xff0c;掉粉挺多人。写稿的人可能就是看到了知乎这个问答。…

d3 制作条形图_停止制作常见的坏条形图的5个简单技巧

d3 制作条形图Bar charts were probably the first type of chart you were ever introduced to in first grade. Their simplicity makes them a standard in visualizing data, but it is its accessibility that leads visualizers to often be careless with bar charts.乙…

SVN之使用原则

以下是我起草的部门SVN规范里原则的一部分。文件提交时要求必须提交注释&#xff0c;注明相关修改信息&#xff0c;例如bug号、任务描述等。具体内容可采用约定或者设置的形式。你所提交的改变将体现给其他开发者&#xff0c;要明白提交的后果&#xff0c;提交之前要慎重。代码…

图解 React-router 源码

大家好&#xff0c;我是若川。欢迎加我微信 ruochuan12今天分享一篇react-router源码文章&#xff0c;深入理解路由的本质。微信预计阅读只需8分钟。点击下方卡片关注我&#xff0c;或者查看源码系列文章。阅读源码小 tips&#xff1a;从整体到细节&#xff0c;刚开始不要太拘泥…

android 辅助功能_辅助功能简介

android 辅助功能Accessibility may be more than a moral imperative to ensure products are inclusive of more people who already experience barriers in daily life — it has a very practical outcome, benefiting everyone including the person with the disability…

推荐几个前端大佬,真的厉害!

新的一年&#xff0c;推荐几个还在坚持输出的高质量前端公众号&#xff0c;你想要的&#xff1a;React/Vue/Node/工程化/面试经验等&#xff0c; 这里都有。不多说&#xff0c;直接看介绍。???? 程序员成长指北考拉&#xff0c;一个有趣且乐于分享的妹子&#xff0c;专注 N…

RawCode-本身就是实验性的8位类型

What if a type is created solely from the bit-representation of characters?如果仅根据字符的位表示形式创建类型怎么办&#xff1f; This question was the basis of creating this experimental type. The type no longer uses familiar characters. ‘A’ looks like …

2d访问冲突_Light | 基于环形分隔微镜阵列的高速随机访问轴向聚焦系统

撰稿 | OSANJU 刘 扬01导读近日&#xff0c;来自美国加州大学伯克利分校的Rikky Muller教授团队&#xff0c;在国际顶尖学术期刊《Light: Science & Applications》发表了题为“A micromirror array with annular partitioning for high-speed random-access axial focus…