WP8.1 Learning Series (17th)--windows Phone important graphics, visual indicators and notifications

Aesthetics is essential in mobile applications and is synonymous with intuitive operation. In Windows Phone, the visual elements of your tiles, splash screens, icons, controls, and navigation cause users to be aware of the tasks, priorities, or actions within the application, and to display information in a novel and compelling way. Your app will require a custom design of live tiles, animated icons, and splash screen images (to introduce the app to users when they load the app). These designs and other visual indicators are the subject of this section.

Use as little graphics as possible. Keep in mind that you use content and typography that can be visually appealing, and never use purely natural-modified visual elements.

Keep in mind that simplicity is the most attractive and important resource on a mobile platform. If the art image is appropriate, use a high quality, original graphic art image, brand, or photographic work. Ensure that art images meet or exceed the size required for the application and are clear and understandable.

Magnetic Stickers

A tile is an easy-to-recognize visual shortcut for apps or their content that users can set up in the start screen of a phone. You can customize which tiles to display on the Start screen by pinning the app's tiles to the view. A live tile is more valuable than an icon because it can display information about the app or its relevance. For example, a weather-applied tile can dynamically display temperature. We strongly recommend that you use this feature because it will make your app more useful.

The best tiles can send information about your app, highlight your personality brand, and stand out from all the other tiles on the screen. A tile can send information to the user by displaying an optional counter that uses the system font, updating the provided tile background image, or displaying an optional tile that uses a fixed size and color for the system font. Use the tile Notification service to control counters, background images, and tile updates. The subject color of the counter is always the theme color selected by the user. The counter display is optional.

Microsoft and its mobile operator and hardware manufacturer partners have installed Windows Phone devices with certain tiles. These tiles consistently reflect the unique Windows Phone experience.

For more information, see Guidelines for tiles and badges.

Tile art images are very important

If you use multiple tile images, they should be visually consistent with each of the other images and have recognizable themes or styles. You cannot change the color, font, font color, or size of the counter display.

Apps that don't contain a tile image or title will display a system-defined generic icon and project name. If the design of the development application budget is not high, you can go to a lot of reasonable price of the website purchase icon. Whether you're designing the tile yourself, pay or buy the tile to keep it simple. The icon should have simple geometry and limit the number of fine patterns. If they can, they should use metaphors that people already know.

Note Use tile notifications with caution. Excessive use can shorten battery life.

The style to avoid

• 3D layout
• An icon or background with a gradient, bevel, or cast shadow
• Rounded Corners
• Black or white background; the tile background disappears in a dark or light theme
• Use ambiguous non-descriptive icons
• Transparent background with color images

Correct and incorrect tile usage

Tile background Color

A tile has two key elements: an icon or logo that appears in the foreground, block, and color background. The two images will complement each other.

Select a background color that represents your brand and makes the foreground icon easy to view or read. Shows the three examples that follow the guide.

Phone Company, Adatum, Margie ' s travel

You should avoid using a black or white background, because the tile background disappears in a dark or light theme.

Incorrect usage of black tile background color

If you want your tile background to use the same theme color as your phone's UI, you can set the tile background to be transparent. If you do this, you need to understand the following important considerations:

• Set your tile to be transparent only. Other tiles submitted with your app should not have a transparent background.
• Set your foreground icon to white. If the foreground icon is colored, the icon will not be visible, or it may appear to be discordant with some phone theme colors, as shown in.

Issue when the foreground icon is not set to white

splash screen

Many applications take some time to load. Take this opportunity to introduce your app to the user through the splash screen. The splash screen is visible only in seconds, so we recommend that you do not use any text that requires user attention or time to read. Instead, use this space to convert the user's attention to an app that has graphics. A good splash screen is a graphical ad for your app and always uses colors and graphics.

Correct and wrong splash screen

Keep the following points in mind when planning your app's Open view:

• If your app uses the load or introduction page, these pages should not be included in the back stack. In other words, these pages should be skipped when the user presses the Back button.
• There are several authentication requirements related to the Back button and the first of the application. For more information, see Technical Certification requirements for Windows Phone.

Visual indicators

Windows Phone uses three different types of indicators to display task progress, scrolling views, signal strength, battery life, and other important information.

Progress indicator

A progress indicator displays in-app activities related to an activity or a series of events. It is a system control that can be integrated into the status bar and can be displayed on multiple app pages. For more information about the status bar, see the "Status Bar" section later in this topic.

note As with the standard progress bar, the status bar progress indicator can be deterministic or indeterminate. The determined progress indicator has a start and end point. An indeterminate progress indicator will continue to run unless the task is completed.

Use a determined progress indicator for tasks such as downloading content, and use an indeterminate progress indicator for tasks such as remote connections.

For more information about how to display task progress to a user, see progress controls.

Scroll indicator

The page scrolls when the content on the screen, such as longer text or images, exceeds the bounds of the visible page, and the user pans or swipes. When the user scrolls, for vertical scrolling, the visible scroll indicator is displayed on the right, while for horizontal scrolling, the indicator is displayed along the bottom. These scroll bars indicate that the content is longer or wider than the page and represents the current position on the page. At the end of a page scroll, the scroll indicator fades out of view after one second.

The scroll indicator is not the user's action behavior, but rather overrides the content beneath it. Its main function is to provide users with a hint about the size of the page.

With a pan and zoom control called the Scroll viewer, you can scroll through the app. The scroll viewer usually fills the screen and contains content larger than itself. This allows the user to navigate around the content area that extends outside the screen boundary.

Status bar

The status bar is an indicator bar that allows you to display system-level status information in the App workspace Reservation section with a simple, clean diagram. It automatically updates to provide different notifications and lets users notice the status at the system level.

For more information, see the "Status bar" section in the first impression of Windows Phone.

App Bar

The app bar gives you a place to display up to four of the most frequently used app tasks and views as icon buttons. This column provides a view that displays icon buttons with text prompts, and an optional context menu called the App Bar menu (activated when the user taps the visual indicator of a sequence point or when the app bar is flick up).

App Bar

Use the app bar instead of creating your own menu system. This helps create a consistent user experience across all apps on your device. The app bar gives you menu animation and rotation support.

You can add an app bar to an app page that's all tagged.

Design Considerations:

• Use a user-defined system theme color unless there is a compelling reason to override the theme color. Using custom colors affects the display quality of button icons, causes abnormal visuals in menu animations, and shortens battery life on some devices.
• The opacity of the app bar can be fine-tuned, but we recommend that you use an opacity value of 0, 0.5, and 1.
• As with the manipulate button (back, start, and search), the app bar is always on the same display edge and extends vertically or horizontally to the entire width of the screen. The icon button itself rotates to align the direction of the phone.
• The width of the app bar height and landscape mode in portrait mode is fixed and cannot be modified. It can be set to show or hide.

For instructions and examples on how to localize the app bar, see how to build a localized app for Windows Phone.

App Bar Menu

The App bar menu is an optional way for users to select from the app bar when they access a specific task. Places fewer tasks to use in the app bar menu.

This menu is activated when the user taps the visual indicator of a sequence point or swipes the app bar up. You can cancel the view by tapping the outside or point of the menu area, using the Back button, or by selecting the menu item or app Bar icon.

App Bar Menu

Design Considerations:

• To prevent a menu from scrolling, limit the number of items displayed in the menu to 5.
• If the text of the app bar menu item is too long, the text will go beyond the screen. For menu item text, we recommend a maximum length between 14 and 20 characters. Similarly, in this space, less is more.
• If the menu item is not displayed, only the icon text prompt is displayed.
• The app bar menu remains on the screen until the user performs an action.

App bar icon

The app bar icon should be clear and easy to understand, and should use the actual metaphor that the user is familiar with. The best icons should have simple geometries and limit the number of fine patterns.

The button should contain an icon and a text hint. Text hints should be brief and provide context for the actions that the button performs, but they do not require a full description. For example, a button that flips an image horizontally. There is no need to "flip horizontally", "rollover" is sufficient.

Note The button should contain an icon and a text hint.

The app bar button can be displayed as enabled or disabled. An example of a disabled button is a delete button in a read-only scenario.

App bar icon

Use icon buttons for the most commonly used primary actions in your app. Do not blindly use more icons.

Precautions for use:

• Some operations are difficult to express clearly through an icon. Place these actions in the App bar menu.
• When the user displays the app bar menu, a text prompt appears for the app bar icon.
• Do not use the icon button that represents the Back button, which can be navigated backwards in the page stack. All Windows Phone devices have a dedicated hardware back button, which should always be used for back navigation.
• When you rotate the app bar, select an icon that has a clear meaning. The app bar automatically handles changes in the orientation of the screen. When the device is in landscape orientation, the menu is displayed vertically on one side of the screen. Rotates the icon button so that the icon is displayed vertically to the user, but the order of the icons in the list does not change. Consider whether the original intent of the icon will be unclear when a rotation occurs, especially if the icon or symmetry icon is similar.

Design Considerations:

• The icon image size should be x 76 pixels.
• The icon image should use the white foreground on a transparent background using the alpha channel. The white foreground shape of the button should fit in the X 41 Square area of the center of the image so that it does not overlap the circle.
• Images that are not recommended size will be scaled to fit and may degrade the overall image quality of the app bar icon.
• The circles displayed on each icon button are drawn through the app bar and should not be included in the source image.

Example Icon Asset

A set of app bar icon assets in PNG format (dark and light) will be installed as part of the Windows Phone SDK. Only the white icon (the icon in a folder named "Dark") should be used in the app bar. To find these items, navigate to:

C:\Program Files (x86) \microsoft SDKs\Windows Phone\<version>\icons\dark

Notice

For app development, the WINDOWS Notification Service is designed to provide cloud services with dedicated, resilient, and durable channels to send notifications to mobile devices.

When a cloud service needs to send a push notification to a device, it sends a notification request to the WINDOWS notification service to route the notification to the app or device as a tile notification, Toast notification, or RAW notification.

There are three ways to display push notifications: Tile notifications, Toast notifications, and raw notifications.

Tile notifications

Tile notifications Notify users of possible changes or events that are not disruptive to user workflows. They appear on the "Start" tile. With tile notifications, you can dynamically set properties, such as counts, background images, and titles, on a tile.

Tile notifications

Use tile notifications for awareness-only notifications.

Toast Notifications

A WEB service can generate a special push notification called a TOAST notification that can be requested from a user for an action. A TOAST notification displays a banner (which is an opaque bar in the theme color at the top of the screen) to display a scaled-down version of the app icon on the left. provides two fields of text: One is a bold heading and the other is a normal subtitle. Text that is longer than the display area is truncated.

The banner is displayed for 10 seconds and then disappears. If you click on the banner, the app that sent the TOAST notification will start. Toast notifications are system-wide notifications, but they do not interfere with user flow and do not require intervention to resolve. For example, a user is notified when a text message or instant message is received.

Banner

Use Toast notifications for notifications of action requests. For example, notifications generated by an Instant messaging client or peer app. However, use these notifications with caution; All apps have access to Toast notifications, and too many banners can be annoying to the user.

The app must turn off Toast notifications by default. Toast notifications should be personally relevant to the user and are sensitive to time. Typically, they preserve peer-to-peer communication, just as they do in SMS applications.

Original notification

Notifications that require in-app actions are completely controlled by the app and reflect only that app. These notifications are called raw notifications. They can be generated by the app themselves or sent from a Web service. There is no system-wide method for displaying the original notification.

Original notification

Use raw notifications that require user action for in-app notifications.

The situation of network interruption

• If there is no network connection, the app should provide the appropriate warning. You can test the warning using airplane mode.
• Verify that the app can still navigate when there is no available network. Although there may not be incoming data, the app's navigation functionality should still work.
• If a feature or action is interrupted by a network outage, always let the user know what's going on.

Include end-User license Agreement

The End User License Agreement (the EULA) is a set of usage guidelines that users are allowed to follow when they first launch the app. It will list the user's rights, as you might imagine. It is an agreement between you and the user who purchased the app, which stipulates that users cannot misuse the app.

The use of the app should be based on whether the user accepts the EULA. If the user does not accept the EULA terms, the user is not allowed to use the app.

This statement should discuss the behavior and use of the apps you support, including specific terms for content, licenses, installation, activation, authentication, Internet-based services, or the use of certain information. It's also a good way to notify users to update your plans, provide app upgrades, or use software formats and standards. If your app is associated with an enterprise, your EULA should also indicate where your business is registered and whether you provide any form of guarantee.

WP8.1 Learning Series (17th)--windows Phone important graphics, visual indicators and notifications