Muokkaa

Jaa

Style for Windows apps

  • Artikkeli

Style is what makes your app stand out. The style guidelines in this section help you create a Fluent Design through color, typography, and new features such as acrylic material and reveal highlight.

We use the WinUI to deliver the latest styles across our UI components. Be sure to use the latest WinUI version to keep your apps up-to-date with the current Windows app Fluent styles. For more info about how to do this, see XAML styles.

Image depicting a color gradient.

Color

Color provides intuitive wayfinding through an app's various levels of information and serves as a crucial tool for reinforcing the interaction model.

Image depicting typography.

Typography

As the visual representation of language, typography’s main task is to be clear. Its style should never get in the way of that goal. The following guidelines focus on how to use typography to help users understand content easily.

Image depicting icons.

Icons

Good icons harmonize with typography and with the rest of the design language. They don’t mix metaphors, and they communicate only what’s needed, as speedily and simply as possible.

Image depicting acrylic.

Acrylic

Create a sense of depth with acrylic, a brush that creates stunning, translucent surfaces.

Image depicting reveal focus.

Reveal focus

Reveal focus is a lighting effect for 10 foot experiences, such as Xbox One and television screens, and animates the border of focusable elements.

Image depicting sound.

Sound

Sound helps complete an application's user experience, and gives them that extra audio edge they need to match the feel of Windows across all platforms.

Short movie with a blinking cursor and then the words Writing style being typed out.

Writing style

Writing style can make a big difference between an awful user experience and a better one.

XAML brushes

You can customize the appearance of your apps in many ways by using the XAML framework. Styles let you set control properties and reuse those settings for a consistent appearance across multiple controls.

XAML styles

You can customize the appearance of your apps in many ways by using the XAML framework. Styles let you set control properties and reuse those settings for a consistent appearance across multiple controls.

Spacing

Optimize your Windows application and provide a user experience that is most appropriate for your app's functionality and interaction requirements.

Corner radius

Evoke warmth and trust, and make the UI easier for users to visually process, with rounded corners.