Use C # development of Metro-style application roadmap-Metro Design Principles

Use Metro Style Design

Content is the core of Metro style applications, and content placement before borders is the key to Metro style application design. Everything else is affiliated-or inlaid-to help display and interact with the content.

Display content

Design your application UI to display the content.

Clear and open layout

• Keep the most relevant elements on the screen to minimize interference and help people immerse themselves in the content.
• Remove lines, frames, and unnecessary graphic effects (such as blur and gradient), so that the interface has sufficient space to display the content. Use open space to build a content framework.
• Restrict the navigation boxes that are permanently displayed on the screen, such as tabs. Let people focus on the current content and avoid distracting fancy borders.

Clear information hierarchiesThe Metro design language is built on a neat and beautiful layout to help you understand the hierarchical structure of the content. Use the layout instead of lines and boxes to help build structures and hierarchies.

• The same size, width, and color of the text can be used to transmit the importance information of the content. Various changes are minor, so that people can easily see the combination of content in the overall hierarchy. See the text and layout guide.
• Use the default style sheet to obtain the pre-defined type gradient of the text.

Metro style silhouetteWhen people focus on content, the components that make up the content form an application identifier. A familiar silhouette can help people instinctively recognize your application as a Metro style (like a web page ).

• Consistent with Metro silhouette, this creates a sense of intimacy and trust.
• First, use the Visual Studio grid or split Project template to obtain the layout. See the Javascript Project template guide for Visual Studio Metro style applications.

Interaction with content

Interactions allow users to gain control and feel confident.

Direct interactionThe most natural way for people to interact with content is to directly participate without intermediate borders.

• If possible, people are required to perform operations by directly controlling the content, rather than using controls for indirect control.

  For example, let people click a project to view its details, slide horizontally to select it, drag it to move it, zoom out to view the complete Context -, instead of adding buttons on the screen to perform these operations.

• You can use the semantic scaling method to navigate a long content list. This method is fast, smooth, and content-centric.

EdgeSome operations cannot be completed through direct control. Commands that need to be displayed according to the context are displayed only when needed to avoid messing up your canvas. Using screens or the edge of devices, people can safely FIND commands.

• Place these commands in the application bar. In this way, you can click the top or bottom edge to display the commands as needed and cancel the commands after the user completes the operation.
• You can use the superbutton to call the "Search", "share", "device", or "set" superbutton.
• Do not permanently place commands on the screen, and avoid displaying duplicate entry points that can be accessed using the superbutton.
• The design should meet the comfortable requirements and place the commonly used interactive surface near the edge.

For more information, see command design.

Fast and smooth

Quickly respond to user operations with the corresponding energy.

Targeted Animation

Motion is the core part of the metro design language. Well-designed animations can enrich applications and improve the experience.

• The use of targeted animation can be intuitively associated with the experience and elaborated. In a smooth interface, everything comes along.
• The animation library set of a specific scene animation is used to transmit information. Familiar sports can enhance understanding of concepts, help people understand the expected content, and build confidence. See the animation guide in implementing UI animation.

Touch Function Design

The touch function must be considered in the design of Metro style applications. They take advantage of hands and fingers and consider comfort and ergonomics.

• Make full use of the Windows 8 touch language and use the prescribed gestures, so that people can always naturally control the content. For more information, see touch interaction design.
• Keep the content closely following your fingers. In addition to clicking and pressing, sliding interaction (such as semantic scaling) allows people to quickly and easily navigate and interact with content.
• Provides instant visual feedback on the touch function, so that people can safely know whether they have hit the expected target. Interaction is always reversible, and operations are submitted only when confirmed, so as to provide space for error discovery and encourage exploration.
• Do not build independent touch and mouse interactions.

Built-in controls

Use built-in controls to get smooth, elegant, consistent animations and optimized touch behavior. The following are examples:

• The selection function of the swipe gesture (horizontal sliding) is built in the listview control. It can be expanded to semantic scaling, allowing people to quickly and smoothly navigate in the long list. See the listview control guide.
• The flipview control allows you to move between projects by dragging and has a built-in transition animation.
• The buttons, switches, check boxes, single-choice buttons, rating, and slider controls provide visual feedback on the downward touch. You can only submit the operation when you touch up, and cancel the operation by dragging, to cancel the operation. See the button, switch, check box, single-choice button, date and time selector, rating, and slider control guide.

See the list of built-in controls for detailed user experience (UX) Guide.

Cleverly stick and zoom

An excellent experience is created for each appearance specification, and each view option is made public to the user.

Scale multiple appearance specifications in proportionYour applications have the opportunity to be used on hundreds of millions of computers running Windows 8. The screen sizes and resolutions of these computers vary widely from <10 "tablet to> 27.

• Use the built-in flow layout support in the platform control to make full use of real estate on the screen. For example, listview will automatically rearrange the content based on the available space.
• The Platform automatically scales according to the screen size and resolution of the device. Provides three types of assets or vector graphics using a scalar to ensure that your application looks clear and perfect. See the proportional zoom screen guide and the proportional zoom pixel density guide.
• Use a simulator in Microsoft Visual Studio to view the appearance of your application on different visual specifications.

Design of viewing statusPeople usually run multiple tasks and run two applications side by side. All applications must be stuck in the status, and a long posting status requires you to keep your application on the screen for a long time. See the reference and filling view guide.

• Design a useful post view that provides the application function view. The user's context is retained when switching between multiple views.
• The application width is fixed to 320 pixels, but the height is variable. Vertical translation can avoid conflicts with edges and edges.
• When your application is on the screen, it can also be pasted with other applications, so please design your application to be smoothly rearranged from the minimum width of 1024 pixels.

Use the correct contract

A contract is the bond that binds Metro-style applications with the system UI. Two applications that have achieved the same contract can be used together to complete a wide range of or complex solutions.

• For some of the most common contracts such as search, sharing, and file selector, use the corresponding Visual Studio Project template first.
• Rely on the superbutton to obtain a consistent call model that users can safely use. Avoid creating alternative UIS on the application canvas to call contracts, which may confuse users.
• See the full list of application contracts.

ShareSharing Contracts allow people to share data in one application with other applications. The source application provides applications that want to share content, and the target application receives shared content in a group of common data formats. See shared content guide.

• Each application should be a shared source and adopt the most extensive format as much as possible.
• Applications used to publish, store, or convert shared data are ideal for sharing purposes. For example, applications for communications, social networks, and connected devices.

SearchSearch contracts allow people to search for apps anywhere in windows. The results are provided by the application and displayed in the application UI. See the Search Guide and check list.

• Use search superbuttons instead of custom in-app searches, especially when the scope is the entire content set of an application (such as a product in a search shop application. Do not use search as a ready-made "Search" function. The range of this function is limited to the current view (such as searching for a word in a document ).
• Providing search recommendations can help people find some content faster.
• Provides a way to navigate between the result page and the main UI of the application.

File SelectorThe file selector contract allows people to access the content of an application from other applications. When you call the file selector, you can browse and select files in other applications that store locally or support the file selector contract. See the document selector guide.

• This contract can be used if your application accesses or stores files that are useful to users in other contexts.
• The listview control can be used to obtain the built-in flow layout and selection behavior.

Investment in powerful magnetic stickers

The tile function is a portal in the application. The tile is located on the "Start" screen and is an extension of the application. It provides more personalized and attractive information than traditional icons. Investing in powerful magnetic stickers will attract people's attention to your applications. See the tile guide.

• Make the content displayed on the tile meet your needs, and update the content when the application content changes to keep the content updated. Provides a variety of pre-defined tile templates, you can choose the most suitable content type design.
• Refer to the content on your application homepage so that you can easily find the application after you start it.
• The secondary tile is used to stimulate people's interest. The sub-part content in the "Start" screen is often updated. See the auxiliary tile guide.

Feeling connected and active

New content is provided through real-time tile and notification, making people feel connected to your application. The real-time tile and notification use the same infrastructure. They can be updated at any time or at a scheduled time when the application is running locally.

Real-time TileProvide dynamic, related, and personalized content on your application tile to keep people's attention focused. The novel tile content gives people reason to place the tile in a conspicuous position on the "Start" screen and start the application multiple times.

• A Real-time tile can cycle between up to five updates. For example, a real-time Tile of a news application can cycle between multiple events every day.
• The content displayed in real-time updates can be accessed from your application homepage. If these expired notifications become irrelevant or cannot be accessed from the home page, delete them.
• Use the screen lock reminder to display simple numbers or glyphs.

NotificationApplications can use notifications to briefly display time-sensitive messages that need to be interrupted from any location in windows. See the toast notification guide.

• Most applications should be unresponsive-people should choose to enable notifications in applications.
• People can control the notification functions of applications so that they can only be notified when they are indeed time-sensitive and relevant. If they are important, a missed notification will be displayed on the application's tile.
• If multiple updates appear in a short period of time, the notifications are combined.
• Do not use notifications to display errors or warnings. Errors should also be displayed in inline or pop-up projects and message dialog boxes.

Roaming to cloud

RoamingUsing roaming data to form a continuous experience between devices, people can correctly select the task they quit. See the roaming application data guide.

• Use Microsoft accounts and cloud storage for each user to store and roam data, statuses, and a small amount of user content.
• Examples of application settings that are suitable for roaming are:
  • Cities in weather applications, along with Celsius temperature and Fahrenheit temperature preferences
  • RSS feeds subscribed by users in news applications
  • Favorite teams in sports
• Examples of application statuses that are ideal for roaming include:
  • The farthest place to read from the application
  • The Last checkpoint or action completed in the game
  • Tracks played last time in the music app

Process lifecycle management (Application lifecycle)The user status is retained without explicit save operations to ensure a continuous experience. See the application lifecycle management guide.

• In general, you can restore the application when the user exits, rather than restarting the application. People should be able to switch to other apps and return to shopping cart, unfinished emails, or the games they suspend when they exit.
• If the user has been accessing the application for a long time and the previous context becomes irrelevant, restart the application. For example, in a news application, if a user has been reading an article that has expired for a long time, the user is directed to the homepage.
• Do not terminate an application when it is moved out of the screen. Keep the application lifecycle consistent with the system to ensure that your users can return to your application as effectively as possible. Do not provide users with methods to terminate your application.

Make full use of Metro Style Design Principles

Use these principles to help guide your design. For more information, see metro style design principles.

Proud of your outstanding skills

• Devote yourself to some details that many people often see.
• Designed a perfect experience for each stage.

Achieve great success with less investment

• Solve interference problems and do not stop innovation. Immerse people in things they like and they will explore other things.
• Only keep the most relevant elements on the screen to form a targeted and concise experience, so that people can immerse themselves in the content.

Fast and smooth

• Enables people to interact directly with the content and respond to the operation with the same energy.
• By using meaningful sports, you can enrich your experience, build a sense of continuity, and describe it.

Achieve real digitalization

• Make full use of digital media. Break through the physical limitations and create a more effective and easier experience than the actual ones.
• Accept the fact that we are all pixels on the screen. The colors and images used in the design should be conspicuous, dynamic, and bright, beyond the limitations of real-world materials.

Win-win cooperation

• Use the ecosystem and use it with other applications, devices, and systems to provide various solutions for people.
• Conforms to the UI model to reduce redundancy. Make full use of people's knowledge to provide a sense of familiarity, control, and self-confidence.