How Fluent Design System Redefines Adaptive UI for AR/VR Devices

With the emergence of VR, AR, and MR devices, traditional flat design languages no longer meet multi‑device needs. Designers, including those at Xiaomi, have turned to Microsoft’s Fluent Design System (FDS) to create designs that match products and connect to the future.

Hololens, released by Microsoft in January 2015, is a mixed‑reality head‑mounted display that enables holographic interaction with the real world, allowing users to play games, view recipes while cooking, stream movies in bed, or demonstrate 3D models in class.

Fluent Design System, abbreviated as FDS, is built to support multidimensional design. Microsoft proposes three principles:

Adaptive – Fluent experiences feel natural on each device.

Empathetic – Fluent experiences are intuitive and powerful.

Beautiful – Fluent experiences are engaging and immersive.

Adaptive (Adaptability)

Adaptability means FDS works smoothly on multiple dimensions, sizes, and devices, making the interface feel purpose‑designed rather than automatically fitted. Microsoft suggests four design elements to achieve this: correct breakpoints, responsive layout, device adaptation, and appropriate input methods.

1. Correct Breakpoints

Breakpoints (key widths) categorize devices into large, medium, and small based on effective pixels. Designing according to FDS‑provided key widths simplifies design time and code, ensuring a natural look across screens.

Effective pixels consider both screen size and viewing distance; for example, a TV’s 1080p resolution may be treated as 540p effective pixels when viewed from a typical distance, aligning it with small‑device guidelines.

Microsoft’s recommendations for small devices include:

Set left/right margins to 12 px.

Use a bottom docked app bar for accessibility.

Display one column/region at a time.

Show a search icon instead of a full search box.

Use overlay mode for the navigation pane to save space.

In outline‑detail mode, use stacked presentation to conserve screen real estate.

2. Responsive Layout

Responsive layout enables a UI to adapt to various terminals, offering benefits such as efficient screen‑space usage, automatic detection of device capabilities (e.g., GPS on phones, none on TVs), and UI re‑arrangement to match platform conventions (bottom navigation on mobile, top navigation on PC).

FDS defines six adaptive techniques: reset, adjust, reorder, show/hide, replace, and redesign. Animated demos of each technique are available on Microsoft’s documentation site.

Animation reference: https://docs.microsoft.com/zh-cn/windows/uwp/design/layout/responsive-design

3. Multi‑Device Support

FDS covers devices supported by the UWP platform, including phones, tablets, laptops, and TVs. It describes how applications appear on each device, typical usage scenarios, input methods, and UI design considerations.

4. Input/Output Methods

Interaction methods include game controllers, touch, mouse, eye‑tracking, voice, gestures, keyboard, and stylus. This article focuses on three emerging techniques: eye‑tracking, voice, and surface dial.

(1) Eye‑Tracking

Eye‑tracking devices let users control the pointer and type via an on‑screen keyboard using their gaze. This technology benefits users with neuromuscular disorders (e.g., Stephen Hawking’s eye‑typing system) and hands‑busy scenarios such as gaming or shopping.

(2) Voice

Voice interaction has become a major trend, with products from Amazon, Google, and Chinese brands like XiaoAi and Tmall Genie. Voice can supplement or replace traditional input, offering natural, hands‑free control. Three usage patterns are highlighted:

Natural Language : Conversational agents aim to understand and respond like humans, though current systems still struggle with varied phrasing and grammar.

Command & Control : Voice commands trigger specific actions, such as activating buttons or selecting menu items (e.g., Hammer TNT’s voice‑driven numeric input).

Dictation : Simple speech‑to‑text conversion, as seen in messaging apps.

Video example of Cortana vs. Siri: https://www.bilibili.com/video/av5014875/

(3) Surface Dial

The Windows Wheel is a peripheral that can be placed on the surface of another device, allowing the non‑dominant hand to rotate the dial while the dominant hand operates the primary device, enabling multitasking without switching hands.

This concludes the first part of the FDS introduction. Future articles will explore the Empathetic and Beautiful dimensions.

References:

Fluent Design official site: https://www.microsoft.com/design/fluent/

Hololens official site: https://www.microsoft.com/en-us/hololens

Comprehensive analysis of Microsoft Fluent Design: http://www.ui.cn/detail/184864.html