App Makeover: Set aside a day to give your app a fresh and modern look using Fluent Design
Since the inception of the Windows operating system, Microsoft has continually evolved its interface, and the apps that run on it, to provide better experiences for users. The Fluent Design System is the latest evolutionary change coming to the Windows ecosystem. Expressive, eloquent, adaptive, engaging, natural, captivating — these are just some of the terms used to describe the goals of the Fluent Design System has for modern Universal Windows Platform (UWP) apps.
Due to the sheer size and scope of the Fluent Design System, pieces have rolled out to the public throughout the year, and with the release of the Windows 10 Fall Creators Update, some of the most dynamic and useful components are now live and waiting to be exploited by application developers around the world. Set aside a day to become familiarized with the all the Fluent Design system has to offer and update your app to give it a new fresh and modern look.
A bold, scalable, universal design
Apps today no longer enjoy running on a fixed set of platforms and dimensions. Today’s users are running apps on platforms boasting a wide variability of resolutions and sizes. Modern apps need to scale and adapt their interfaces on a device-by-device basis.
The Fluent Design System provides multiple mechanisms for providing a responsive app that looks great on the variety of devices available to users. UWP apps provide fluid and responsive layout elements such as the Panel-based elements (for example, Canvas, Grid, StackPanel and others). Using layout properties, these visual can create a dynamic and responsive layout by allowing content to resize and flow as needed.
Another method UWP app developers can employ is an adaptive layout approach. By using visual states with an AdaptiveTrigger, app developers can set visual “breakpoints” to manipulate the visual experience based on screen width or height. AdaptiveTriggers are easy to setup in Xaml using the VisualStateManager.
In the following Xaml snippet, an AdaptiveTrigger is set up to change the display, when the device resolution is greater than 720 pixels wide by opening side pane in a SplitView:
<Grid><VisualStateManager.VisualStateGroups><VisualStateGroup><VisualState><VisualState.StateTriggers><! — VisualState to be triggered when thewindow width is >=720 effective pixels. →<AdaptiveTrigger MinWindowWidth=”720" /></VisualState.StateTriggers><VisualState.Setters><Setter Target=”sideView.DisplayMode” Value=”Inline”/><Setter Target=”sideView.IsPaneOpen” Value=”True”/></VisualState.Setters></VisualState></VisualStateGroup></VisualStateManager.VisualStateGroups>…<SplitView x:Name=”sideView” DisplayMode=”CompactInline”IsPaneOpen=”False” CompactPaneLength=”50">…</SplitView></Grid>
Finally, situations can arise when a specific device must be handled separately, whether due to the complexity involved in crafting a universal layout or due to a business need. A tailored layout approach is appropriate for these types of circumstances. A tailored layout simply defines a new page for the device family that contains the customized layout needed.
To provide some organization guidance to developing tailored layouts, developers will need to choose the file or folder naming conventions. Using the “file name” approach requires naming pages with the following format: [pageName].DeviceFamily-[qualifierString].xaml; such as, MainPage.DeviceFamily-Desktop.xaml or MainPage.DeviceFamily-Mobile.xaml.
The “folder-based” approach is similar; simply name the folder using the following format; DeviceFamily-[qualifierString], and put the page’s Xaml file in that folder.
Developers should note that in both cases, the original MainPage.xaml and code-behind file, MainPage.xaml.cs, still exist. This allows all the tailored layouts to share the same code file. If unique code is needed for each tailored layout, then create separate pages and navigate to them directly.
Any combination of layout approaches can be used simultaneously to provide a best user experience possible across the widest range of available devices.
Style makes apps stand out
The Windows 10 Fall Creators Update brings a host of new visual controls, effects and behaviors to Windows 10 UWP apps under the banner of the Fluent Design System. While composing just a part of the overall strategy of the Fluent Design System, Acrylic, Parallax and Reveal are some new additions worthy of discussion.
Acrylic
The acrylic material style is one of the latest advancements brought to Windows 10 by the Fall Creators Update. Some of the default Windows 10 apps, such as Calculator, have been updated to use the new Acrylic styles. In time, all Windows 10 apps will be updated with these new styles to bring a fresh feel to Windows 10.
Creating a sense of depth is one of the fundamental precepts of the Fluent Design System, and the Acrylic brushes provide that by creating semi-translucent surfaces with just a touch of texture. However, developers and designers should be judicial in their application these acrylic styles as too much can be detrimental and negatively affect a user’s experience. Learn more about acrylic materials and best practices to update your app with a modern look.
Parallax
However, the acrylic materials are not the only way to add depth to an app. The Fall Creators Update provides an effortless way for developers to add a parallax effect to their apps. Parallax is a visual illusion that can create a sense of depth, perspective and motion by scrolling a background image at a slower rate than the foreground. The ParallaxView is a new element available for UWP app that provides the tools for developers to create a more visually compelling user interface.
Adding a parallax effect to an app is trivial with the Fall Creators Update:
<Grid><ParallaxView Source=”{x:Bind ForegroundElement}” VerticalShift=”50"><! — Background element →<Image x:Name=”BackgroundImage”Source=”Assets/background.png”Stretch=”UniformToFill”/></ParallaxView><! — Foreground element →<ListView x:Name=”ForegroundElement”>…</ListView></Grid>
The VerticalShift property specifies the vertical scrolling speed of the background element in relation to the foreground. It is worth noting that the ParallaxView control supports a HorizonalShift property to support those scenarios where horizontal scrolling is necessary. Discover all the benefits and capabilities of the parallax effect and learn how to incorporate a stunning visual effect in your app.
Reveal
Another way to add motion, depth and perspective to an app is to employ lighting effects. The Fall Creators Update contains the Reveal behavior, a foundation of brushes and animations to provide additional depth and focus to an app. Reveal is all about exposing hidden visual cues, such as borders and backgrounds, to provide better visual feedback to users of an app.
Many of the controls in UWP already use Reveal by default; such as ListView, GridView, TreeView, and ComboBox to name a few. For other, small controllers, such as the various Button controls, adding a specialized style to control is necessary. For example,
<Button Content=”Button Content” Style=”{StaticResource ButtonRevealStyle}”/>Microsoft has created a set of system brushes for Reveal for use in custom or re-templated controls. Since Reveal is action oriented style, these brushes are best set in a VisualState that responds to user events. To style a control with the Reveal effect when the pointer moves over an element, a developer would need to create a VisualState like the following:
<VisualState x:Name=”PointerOver”><VisualState.Setters><Setter Target=”RootGrid.(RevealBrush.State)” Value=”PointerOver” /><Setter Target=”RootGrid.Background” Value=”{ThemeResource ButtonRevealBackgroundPointerOver}” /><Setter Target=”ContentPresenter.BorderBrush” Value=”Transparent”/><Setter Target=”ContentPresenter.Foreground” Value=”{ThemeResource ButtonForegroundPointerOver}” /></VisualState.Setters></VisualState>
Learn more about this valuable behavior and add it your toolkit and make your apps shine.
Light, Depth, Motion, Material and Scale
The nature of app and user interactions are evolving with each new generation of software. The Fluent Design System for UWP is the answer to that evolution. It is a set of features and guidelines for UWP apps to provide a consistent, rich and compelling experience across a diverse collection of devices, inputs and dimensions.
Some features of the Fluent Design System are automatic and require no additional work by developers to implement, such as default Reveal behaviors most of the default controls. Other features, such as the parallax effect and acrylic, are optional and require a small investment in effort to implement.
Take a day and update your app using the Fluent Design System, your users will appreciate it.
Go here to learn more about making your Apps more engaging.
