Presentation is loading. Please wait.

Presentation is loading. Please wait.

Microsoft Wang Li, Wang Yini, Li YIcheng.  This is a presentation about Microsoft Windows7 guidelines  Wang Li K8wali00  Li Yicheng K8liyi00  Wang.

Similar presentations

Presentation on theme: "Microsoft Wang Li, Wang Yini, Li YIcheng.  This is a presentation about Microsoft Windows7 guidelines  Wang Li K8wali00  Li Yicheng K8liyi00  Wang."— Presentation transcript:

1 Microsoft Wang Li, Wang Yini, Li YIcheng

2  This is a presentation about Microsoft Windows7 guidelines  Wang Li K8wali00  Li Yicheng K8liyi00  Wang Yini k9wayi00

3  This style guide gives descriptions about Design Principles, Controls, Commands, Text, Messages, Interaction, Windows, Visuals, Experiences, Windows Environment

4  Describe what the style guide says about navigation  What features are important for navigation? -Recognizable, Obvious, Relevant,  Nail the basics  Design experinces, not features  Be great at something  Don’t be all thing to all people  Make the hard decisions  Make the experience like a friendly conversation  Do the right thing by default  Make it just work  Ask questions carefully  Make it a pleasure to use  Make it responsive  Keep it simple  Avoid bad experiences  Design for common problems  Don't be annoying  Reduce effort, knowledge, and thought  Follow the guidelines  Test your UI

5 The following fonts and colors are defaults for Windows Vista and Windows 7

6 Choose fonts and optimize window layouts based on the UI technology and the target version of Windows:

7  Color is typically used in UI to communicate:  Meaning. The meaning of a message can be summarized through color. For example, color is often used to communicate status— where red is a problem or error, yellow is caution or warning, and green is good.  State. An object's state can be indicated through color. For example, Windows® uses color to indicate selection and hover states. Links within Web pages use blue for unvisited and purple for visited.  Differentiation. People assume that there is a relationship between items of the same color, so color coding is an effective way to differentiate between objects. For example, in a control panel item, task panes use a green background to visually separate them from the main content. Also, Microsoft® Outlook® allows users to assign different colored flags to messages.  Emphasis. Color can be used to draw users' attention. For example, Windows uses blue main instructions to help them stand out from the other text.

8 Application icons and Control Panel items: The full set includes 16x16, 32x32, 48x48, and 256x256 (code scales between 32 and 256). The.ico file format is required. For Classic Mode, the full set is 16x16, 24x24, 32x32, 48x48 and 64x64. List item icon options: Use live thumbnails or file icons of the file type (for example,.doc); full set. Toolbar icons: 16x16, 24x24, 32x32. Note that toolbar icons are always flat, not 3D, even at the 32x32 size. Dialog and wizard icons: 32x32 and 48x48. Overlays: Core shell code (for example, a shortcut) 10x10 (for 16x16), 16x16 (for 32x32), 24x24 (for 48x48), 128x128 (for 256x256). Note that some of these are slightly smaller but are close to this size, depending on shape and optical balance. Quick Launch area: Icons will scale down from 48x48 in Alt+Tab dynamic overlays, but for a more crisp version, add a 40x40 to.ico file. Balloon icons: 32x32 and 40x40. Additional sizes: These are useful to have on hand as resources to make other files (for example, annotations, toolbar strips, overlays, high dpi, and special cases): 128x128, 96x96, 64x64, 40x40, 24x24, 22x22, 14x14, 10x10, and 8x8. You can use.ico,.png,.bmp, or other file formats, depending on code in that area.

9  Menu bars. A menu bar is best used to catalog all the available top-level commands within a program. New users of your program are likely to review all the commands in the menu bar to answer questions like: What can the program do?  What commands does the program have?  What are the shortcut keys for the common commands? Effective menu bars are comprehensive, well organized, and self-explanatory. Efficiency is desirable, but not crucial (and often not possible). Consider menu bars to be primarily a learning and discovery tool, especially for new users.  Toolbars. A toolbar is best used for quick, convenient access to frequently used, immediate commands. They don't have to be comprehensive or even self-explanatory—just direct and efficient.  Command buttons. Command buttons are a simple, visible, direct way to expose a small number of primary commands. However, they don't scale well, so you should use menus in primary windows for more than a few commands.  Context menus. Context menus are simple, direct, and contextual. They are also efficient because they display only the commands and options that apply to the current context. Because they are displayed at the pointer's current location, they eliminate the need to move the mouse to display a menu. However, they normally have no visible presence on the screen. Consider context menus appropriate only for redundant contextual commands and options targeted at advanced users.

10 A Help system is composed of various types of content designed to assist users when they are unable to complete a task, want to understand a concept in more detail, or need more technical details than are available in the UI.


12 ses/styleguide/WIN7_UXGuide.pdf

Download ppt "Microsoft Wang Li, Wang Yini, Li YIcheng.  This is a presentation about Microsoft Windows7 guidelines  Wang Li K8wali00  Li Yicheng K8liyi00  Wang."

Similar presentations

Ads by Google