Introducing Fluent, Windows 10’s modern UI approach

Every OS has its own look and feel that goes beyond positions of buttons and controls. Some try to imitate the real world, adding physics-like behaviors. Others revel in their digital nature, with a focus on text and geometry. Microsoft has been tracing a path between those two extremes, first with Windows Vista’s Aero Glass effects, then swinging to Windows 8’s Metro and its typographical designs.

Windows 10 originally took a Metro-like approach, mixing it with familiar metaphors from Windows 7. But that was only a start, and over multiple releases it’s begun to deliver its own style. Taking lessons from Metro, it still has a focus on typography in its live tiles and icons. But it’s also starting to build on the capabilities of modern GPUs, adding transparency and animation effects that move it from a 2D world to one that’s starting to show some 3D elements.

Introducing Fluent Design System

Microsoft describes its Fluent Design System as a tool for creating “adaptive, empathic, and beautiful user interfaces.” It’s an ambitious statement, but one that aligns with its Universal Windows Platform (UWP) approach. While it’s yet to be extended to Xamarin Forms, Fluent is slowly being rolled out across the various Windows versions, from tablets to desktop to mixed reality.

Building on the existing and familiar XAML control model, Fluent Design mixes out-of-the box features with new control options. Some elements come automatically with new releases of the Windows SDK, and only require a rerelease of your app with updated controls. Others, like Fluent’s Acrylic textures, need additional code.

One of Fluent’s nicer features is the Reveal tool that illuminates the borders around an object, showing quickly which screen elements allow interaction, lighting up as you mouse over or tab into an active field. It’s especially effective when used with Windows 10’s new dark mode.

Adding connected animations

Another option is what Microsoft calls connected animations, which that take you from one view to another. Instead of flipping between screens when you click on an element—for example, clicking an item in an online to open a details view—the selected element is animated to give a link between the two views. This approach keeps users in the flow of an interaction; it is intended to keep context during a switch between pages in an application. Fluent provides tools for switching forward and backward, with three animation types.

Because Windows handles the actual animation for you, setting up connected animations is fairly simple: First you define the source image in your page XAML and then you add code to enable an animation. In the target page, you set a destination image as the target; it calls the animation as the page is loaded. The process is reversed for navigation back. Specific methods in the UWP GridView and ListView controls add connected animations from list elements to detail views,

Adding transparency with Acrylic

A new textured display modelcalled Acrylic is at the heart of Fluent’s look and feel. Mixing transparency and highlights, it helps relevant information stand out, showing what users have selected and how one view relates to another.

Microsoft describes the translucent Acrylic effect as a “material,” borrowing a term from Google and its Material Design. Applied as a brush to supported controls, the effect gives windows and control areas a plastic-like effect that blurs out the background. You can layer different Acrylic-styled controls to create layout depth. You can control the amount of blur used to distinguish your app from the background, from showing the shape of an underlying image to giving color cues that help blend window and background.

Effects can be used in and outside an app; background effects work with screen backgrounds and in-app effects work with in-app overlays. Acrylic works for separating navigation elements from content in an app. You’ll use it for navigation panes, and for standard background colors and images for your app content. The in-app option works well for content that appears and disappears in your app, like contextual menus or dropdown menus. In the same way, the background Acrylic effect works well for any elements that appear as secondary windows, anywhere on screen.

Coloring Acrylic windows

Acrylic effects can be color-neutral, picking up colors from the background and from whether you’ve selected a light or dark Windows theme. There’s also the option of using a tint from the Windows accent color. However, Microsoft recommends using this rarely, only as a highlight. Similarly, you can choose your own colors to add branding, though again it’s best used only as a highlight or as a visual cue.

Like much of Fluent, Acrylic simplifies a specific design task. In the past, composing and displaying layered bordered windows often left users wondering where that dialog box had gone. By making it a transient element of a window and using Acrylic effects to show its relationship to both app and screen, it’s easier for users to see what needs to be done, so they can quickly complete tasks and avoid leaving hidden modal dialogs that block further interactions until found and dismissed.

Visual effects like transparency do require GPU support, and there needs to be a fallback option for when devices are running in battery-saver mode (which turns off the GPU). If you’re using the default colors and tints, this is handled automatically for you. However, if you’re using a custom acrylic tint, you need to specify a fallback color, which will be rendered as a solid.

One design, many devices

With Fluent intended to support multiple devices, you’re going to need to think about how to use UWP to support responsive design. Key to this approach is the idea of breakpoints, focusing on a set of app widths to handle automatic changes in screen sizes. The same code should run on the large screen of a modern desktop PC and on the smaller displays of devices like the Surface Go laptop. While responsive designs will work in many cases, extreme differences like adding Surface Hub support might require using separate UI models for different screen sizes to deliver functionality to both the smallest and the largest displays.

With Microsoft adding Fluent design elements to Windows 10 and to its default bundled applications, it’s worth considering updating any UWP apps to support elements of Fluent. You don’t need to add them all at once, but adding one or two elements with every update to your code will make your apps more attractive—and more in tune with the direction Microsoft is taking the Windows user experience. Fluent’s support for most common design tools, also eases developers’ journeys into Fluent.