ux设计

by Samuele Dassatti

通过萨穆尔达萨蒂

从UX设计人员的角度来看Microsoft Build 2018 (Microsoft Build 2018 from the perspective of a UX designer)

I recently attended Microsoft Build 2018 in Seattle, because one of my apps was nominated for Design Innovator of the Year at the Windows Developer Awards. During the three-day conference, the Redmond giant detailed, among other things, what’s next for the Fluent Design System. This is the design language announced at last year’s Build, upon which Microsoft hopes to build the UI of Windows and its apps.

我最近参加了在西雅图举行的Microsoft Build 2018，因为我的一个应用程序在Windows Developer Awards上被提名为年度设计创新者。 在为期三天的会议中，这家Redmond巨头详细介绍了Fluent设计系统的下一步发展。 这是去年在Build上宣布的设计语言，Microsoft希望以此为基础来构建Windows及其应用程序的UI。

Here are the most important announcements relative to the future of user experience design on the Windows platform.

这是与Windows平台上用户体验设计的未来有关的最重要的公告。

一切都流利 (Fluent all the things)

One of the biggest trends from a UI perspective that I saw was Microsoft’s willingness to make the new design language available to the greatest number of developers possible, regardless of their framework of choice. We can summarize this strategy with three elements: UWP XAML Islands, the Windows UI library and Fluent Design Web (although just briefly teased). Let’s look at each one a little more closely.

从UI角度来看，我看到的最大趋势之一就是Microsoft愿意将新的设计语言提供给尽可能多的开发人员，无论他们选择哪种框架。 我们可以用以下三个元素来概括该策略： UWP XAML Islands ， Windows UI库和Fluent Design Web (尽管只是简单地进行了介绍)。 让我们更仔细地看看每个。

UWP XAML群岛 (UWP XAML Islands)

So, what are UWP XAML Islands? They are part of a new homonymous library that allows WinForms, WPF, and Win32 applications to feature UI elements that, up to this point, have been limited to UWP applications. This means that developers will be able to start gradually modernizing their applications’ UIs by integrating “islands” (the name finally makes sense) of XAML UI elements.

那么，什么是UWP XAML群岛？ 它们是新同名库的一部分，该库允许WinForms，WPF和Win32应用程序具有UI元素，到目前为止，UI元素仅限于UWP应用程序。 这意味着开发人员将能够通过集成XAML UI元素的“孤岛”(最终使这个名称有意义)来逐步升级其应用程序的UI。

These islands could be a limited area of the UI or an entire window, thus allowing developers to keep the code-behind of a Windows legacy app while modernizing its appearance to increase user engagement and to make the application feel more consistent with the rest of the OS.

这些孤岛可能是用户界面或整个窗口的有限区域，因此允许开发人员将代码保留在Windows旧版应用程序的背后，同时对其外观进行现代化以增加用户参与度，并使该应用程序与其余部分保持一致。操作系统。

A XAML Island is just a standard UWP control or even a complete UWP UI that is seamlessly composed inside of any other UI framework. […] It just works.

XAML岛仅仅是一个标准的UWP控件，甚至是一个完整的UWP UI，可以在任何其他UI框架内部无缝地组成。 […]可以。

Kevin Gallo, head of the Windows Developer Platform, at Microsoft Build 2018

Windows开发人员平台负责人Kevin Gallo在Microsoft Build 2018中

Windows UI库 (The Windows UI library)

The core concept of the Windows UI library (or WinUI, as many Microsoft representatives referred to it) is very similar to that of the UWP XAML Islands. However, its purpose is very different.

Windows UI库(或许多Microsoft代表提到的WinUI)的核心概念与UWP XAML孤岛的概念非常相似。 但是，其目的却大不相同。

Islands focuses on bringing UWP XAML controls on legacy application. On the other hand, WinUI would allow developers to leverage the versatility of XAML control that’s natively available only on the latest versions of Windows on every release of the OS (starting from the Anniversary Update, also known as version 1607). As you may expect, there’s been limited excitement for this new feature, since new Windows updates usually reach almost every Windows device in just a few months. But anyway, it is neat to have this feature.

Islands致力于将UWP XAML控件引入遗留应用程序。 另一方面，WinUI允许开发人员利用XAML控件的多功能性，该功能仅在每个OS发行版(从“周年更新”(也称为版本1607)开始)上仅在Windows的最新版本中本地可用。 如您所料，由于新的Windows更新通常会在短短几个月内几乎覆盖所有Windows设备，因此这项新功能的兴奋性有限。 但是无论如何，具有此功能很方便。

流利的设计网站 (Fluent Design Web)

If this is the first time you heard about this despite having closely followed the Build conference, don’t worry. The project was briefly teased in a Q&A session after a presentation about Progressive Web Apps and, at the time of writing, there has been no official confirmation. So here is what we know about it: Microsoft is trying to push its design system as not just being limited to the Windows platform. This is part of an effort by Microsoft to help web developers make their PWAs feel more native to the OS.

如果这是您在密切关注Build会议之后还是第一次听到此消息，请不要担心。 在介绍Progressive Web Apps之后，在问答环节中对这个项目进行了简短的介绍，在撰写本文时，还没有官方确认。 因此，这就是我们所了解的：Microsoft试图推动其设计系统，而不只是局限于Windows平台。 这是Microsoft努力的一部分，以帮助Web开发人员使他们的PWA对OS更加原生。

By the way, if you are interested in learning how to make your web app feel native, I suggest reading this article.

顺便说一句，如果您有兴趣学习如何使您的Web应用程序具有原生性，建议您阅读本文 。

扩展Fluent工具包 (Expanding the Fluent toolkit)

A key announcement at this year’s Build conference was the introduction of new windowing APIs for UWP apps. In particular, companion windows were finally introduced. I say “finally,” because this will allow the main window of the application to move some of its UI elements on smaller windows that follow the main one. This will make it possible for developers to build more complex apps for the Universal Windows Platform.

在今年的Build大会上，一个关键的公告是引入了用于UWP应用程序的新的窗口API。 特别是，最终引入了伴随窗口。 我说“最后”，是因为这将允许应用程序的主窗口在紧随主窗口的较小窗口上移动其某些UI元素。 这将使开发人员能够为通用Windows平台构建更复杂的应用程序。

Another welcome addition was the new design principles applied to context menus. Not only will they be highlighted by a drop shadow that will render differently based on its position on the Z axis, but they are also subject to light dismiss (that is, the ability to dismiss them by just clicking outside). This will be represented by the use of the iconic acrylic effect.

另一个受欢迎的补充是应用于上下文菜单的新设计原则。 它们不仅会被阴影突出显示，并且阴影会根据其在Z轴上的位置而有所不同，而且还会受到光散射的影响(也就是说，只需单击外部即可将其消散)。 这将通过使用标志性的丙烯酸效果来体现。

I really hope that these subtle design changes will improve productivity for UWP users across the board.

我真的希望这些微妙的设计更改将全面提高UWP用户的生产率。

使Fluent Design成为多设备，多感官的体验 (Making Fluent Design a multi-device, multi-sense experience)

During the second keynote, one of the first products to be mentioned by Joe Belfiore was the Microsoft Launcher for Android. The focus on such a product, which would have been unthinkable just a couple of years ago, highlights how Microsoft is serious about taking the Fluent Design System to other platforms. This also further strengthens Satya Nadella’s vision of the Microsoft experience being a multi-device, multi-sense one. The other key announcement regarding the universal nature of the design system was the new standard of density. It goes from the wide, touch-friendly rectangles of Metro to a healthy middle that allows users to see more details without sacrificing the usability on touch devices. Microsoft also showed an even denser standard, optimized for desktop-first and business apps.

在第二次主题演讲中，Joe Belfiore提到的首批产品之一是Android的Microsoft Launcher。 几年前对这种产品的关注才是不可想象的，它突显了Microsoft如何认真地将Fluent Design System引入其他平台。 这也进一步增强了萨蒂亚·纳德拉(Satya Nadella)对Microsoft作为多设备，多感官的体验的愿景。 关于设计系统通用性的另一个关键公告是密度的新标准。 它从Metro的宽阔，易于触摸的矩形到健康的中间区域，使用户可以在不牺牲触摸设备可用性的情况下看到更多细节。 微软还展示了更密集的标准，针对桌面优先和商业应用进行了优化。

结语 (Wrapping up)

Nothing particularly mind blowing design-wise was introduced. But the announcements from Build 2018 show a design system that, although lacking in certain fields it’s relatively young, is headed in the right direction. I think this is the case because Microsoft is focusing on making it truly universal and more versatile than ever before. I hope this article helped you understand the direction in which the Fluent Design System is headed and, if you have any thoughts about the recent announcements, I’ll be happy to read your responses.

没有特别引人注意的设计方面的介绍。 但是Build 2018的公告显示了一个设计系统，尽管在某些领域缺少它还比较年轻，但朝着正确的方向前进。 我认为是这种情况，因为Microsoft致力于使其真正通用和比以往任何时候都更加通用。 我希望本文能帮助您了解Fluent Design System的发展方向，如果您对最近的公告有任何想法，我将很高兴阅读您的回答。

翻译自: https://www.freecodecamp.org/news/microsoft-build-2018-from-the-perspective-of-a-ux-designer-a9aa77fb6eeb/

ux设计