MS Vista未正式的图标制作指导（英）
翻译PuMel
这些是临时设计指导
Windows VistaTM
图标开发指导
for distribution via MSDN
January 2007

这个指南反映的是最近微软发表的版本。因为微软会随着市场改变做出必要的更改，所以不能保证这些指南最后不会被改变。
这些视觉元素知识产权为微软所有，所有没有标注版权的视觉元素，都遵规训这个条款。
@2007 微软版权所有
大纲
Aero风格画法
标志风格一览
制作需求
图标制作
Aero风格理论基础及画法
AERO 是Windows Vista新用户体验方案之一名字，它既代表好看的美学设计，同时也包括隐藏在其后的用户交互界面。
可信，积极，成熟，开放.AERO目标是专业且漂亮的设计. AERO 目标是专业且漂亮的设计.

The aesthetic of AERO需要让用户感觉并爱上这套高质量，一流体验的风格。
图标以及图形对于AERO来说至关重要。VISTA推出一种新的图标风格，带来更高层次细节及更加精巧的WINDOWS.

Vista图标与XP图标风格的不同表现在以下几点:
1.更加真实，但不是照片，图标是一种象征性图像，这样比照片来的效果更好。
2.图标最大尺寸为256*256像素，这样能适应更高的分辨率显示。这些高分辨率图标在大图标列表的情况下，能提供高质量的视觉体验。
3.只要可行(编者注:通常是图片文件，比如图片与视频),那么图标会变成这个文件的缩图，这样人们会更容易识别和找到它。
4.顶部工具栏的图标，细节会更少，而且没有透视。以此来获得最小的图片尺寸以及与其他应用程序图标区分开来。

精心设计的图标:
1.增强你程序的视觉传达
2.强烈影响用户对你程序视觉设计的总体印象
3.让你的程序有充实的使用体验以及呈现精致的适用度与完成度
4.改善使程序，对象，动作更容易辨认，学习和找到。
aero 风格： 可信，精致，高细节

"还原真实比"画"来的更好"但是也不完全是现实主义的.

These are temporary guidelines. Our target date for the final icon guidelines is July 2007.

Windows Vista^TM
Icon Development Guidelines
for distribution via MSDN

January 2007

 

The guidance in this presentation represents the current view of Microsoft Corporation as at the date of publication. Because Microsoft must respond to changing market conditions, there is no guarantee that the guidance will not change.

The visual elements in this presentation are intellectual property owned by Microsoft.  No express or implied rights to these visual elements are granted.

© 2007 Microsoft Corporation. All rights reserved.

Outline

      Aero Vision for iconography

      Overview of Icon Style

      Development Requirements

      Icon Development

AERO vision for aesthetics and iconography

      AERO is the name for the new User Experience of Windows Vista, representing both the values embodied in the design of the aesthetics, as well as the vision behind the user interface.

      Authentic, Energetic, Reflective and Open. AERO aims to establish a design that is both professional and beautiful.
The aesthetic of AERO creates a high quality and elegant experience that users can be productive in and even fall in love with.

Icons and graphics form an important part of the product aesthetic. Windows Vista introduces a new style of iconography bringing a higher level of detail and sophistication to Windows.

Windows Vista icons differ from Windows XP-style icons in the following ways:

      The style is more realistic than illustrative, but not quite photorealistic. Icons are symbolic images—they should look better than photorealistic!

      Icons have a maximum size of 256 x 256, making them suitable for high-DPI displays. These high-resolution icons allow for high visual quality in list views with large icons.

      Wherever practical, fixed document icons are replaced by thumbnails of the content, making documents easier to identify and find.

      Toolbar icons have less detail and no perspective to optimize for smaller sizes and visual distinctiveness.

Well-designed icons:

      Improve the visual communication of your program.

      Strongly impact users' overall impression of your program's visual design.

      Give your program a quality appearance by enriching users' overall experience and showing refined fit and finish.

      Improve usability by making programs, objects, and actions easier to identify, learn and find.

aero style: authentic, crisp and detailed
'Rendered rather than Drawn' but not completely photorealistic.

Windows Vista                            Windows XP

aero style: professional & beautiful
Attention to details, raise the level of icon production quality

Windows Vista                            Windows XP

aero iconography style: summary

      High-quality icons that look great whether big, small, up-close, or from a distance

      Ready for Hi-Resolution screens

The goal being optical balance and perceived accuracy in perspective and details.

aero style: types of icons

3D object in Perspective     Front Facing (flat)     Toolbar icons     Flat vector graphics     Simple glyphs

Windows Vista Icon topics covered in this section

1. Perspective
2. Light Source
3. Shadows
4. Color & Saturation
5. Size Requirements
6. Detail
7. Icon Development
8. UI Context Examples

1.1     Perspective vs. flat

Icons in Windows Vista are either three-dimensional shown in perspective as solid objects, or two-dimensional objects shown straight-on.

1.2 Perspective

Three-dimensional objects are represented in perspective as solid objects seen from a low birds-eye view with two vanishing points.

1.3 Perspective

One in the same icon may change from perspective to straight-on in the smaller sizes. Only 256x through 24x are ever in perspective. For 16×16 straight-on rendering is used.

Icons appearing on toolbars (16x and 24x), require straight-on perspective.

2. Light source

      The light source for objects within the perspective grid is above, is slightly in front and slightly to the left of the object.

      The light source casts shadows that are slightly to the rear and right of the object's base. It is important to note that all light rays are parallel and strike the object along the same angle (like the sun).

      The goal is to have a uniform lighting appearance across all icons and spotlight effects. Parallel light rays will produce shadows that all have the same length and density, providing further unity across multiple icons.

3.1 Shadows for icons (flat & 3D)

      Use shadow to lift objects visually from the background and to make 3D objects appear 'grounded', rather than awkwardly floating in space

      Use an opacity range of 30% – 50% for shadows: Sometimes a different level of shadow needs to be used depending on the shape or color of an icon for it to look right

      The shadow sometimes needs to be feathered or shortened to keep it from being cropped by the icon box size

      Don't use shadows in icons at 24x or below

3.2 Shadow: flat icons

      Flat icons are generally used for file icons and real-world 'flat' objects like a document or a piece of paper.

      Flat icon lighting is coming from upper left at 130 degrees.

      Smaller sized icons (16×16, 32×32) are simplified for readability. However, if they contain a reflection within the icon (often simplified) and have a tight drop shadow. The drop shadow ranges in opacity (30-50%).

      Layer effects can be used for flat icons but should be compared with other flat icons. The shadows for objects will vary somewhat according to what looks best and is most consistent within the size set and with the other icons in Windows Vista. On some occasions, it may even be necessary to tweak the shadows. This will especially be true when objects are laid over others.

      A subtle range of colors may be used to achieve desired outcome. Shadows help objects sit in space. Color impacts the perceived weight of the shadow and if too is too heavy may distort the image.

3.2 Shadow: flat icons

Basic Flat Icon Shadow Ranges
Blend mode:	Multiply
Opacity:	22% to 50% – depends on color of the item.
Angle:	130 to 120, use global light
Distance:	3 (256 thru 48x), Distance = 1 (32x, 24x)
Spread:	0
Size:	7 (256x thru 48x), Spread = 2 (32x, 24x)

3.3 Shadow: 3D icons

Shadows for 3D icons are created on a case-by-case basis with an effort to fit within a range of cast distance and feathering to fully transparent

These examples help demonstrate variations that need to be created based on the shape and position of the object itself. The shadow sometimes needs to be feathered or shortened to keep it from being cropped by the icon box size.

4.0 Color & Saturation

Color: clean, sophisticated, transparent and translucent

      Colors are less saturated for the most part than they were XP

      Gradients are used to create a more realistic looking image

      No specific color palette for standard icons, but they need to work well together in many contexts and themes

      Icon files require 8 bit and 4 bit palette versions as well to support default setting in remote desktop. These files can be created through a batch process, but they should be reviewed, as some will require retouching for better readability.

There is no strict color palette restriction. Only full-saturation (top right) is avoided

      Bit Levels: ICO design for 32 bit (alpha included) + 8bit +4 bit (dithered down automatically > pixel poke only most critical). Only a 32 bit copy of the 256 image should be included and only the 256 image should be compressed to keep the file size down. Several icon tools offer compression for Windows Vista within.

      Bit Levels: Toolbars 24bit + alpha (1 bit mask), 8 Bit and 4 bit

      Toolbars or AVI files: Use magenta (R255 G0 B255) as the background transparency color.

5.0 Size requirements

Special attention should be paid to high visibility icons such as main application icons, file icons that can appear in Windows Explorer, and icons appearing in the Start Menu or on the desktop.

      Application icons and Control panels: Full set 16, 32, 48, 256 (Code will scale between 32 and 256) Format =ICO (required)(For Classic Mode the full set is 16, 24, 32, 48 and 64)

      List item icon options: use live "thumbnailing" or file icons of the file type (ex: .doc) full set

      Toolbar icons: 16×16, 24×24, 32×32. Note that 16×16 and 24×24 are flat style anything above 24 would be 3D if it makes sense for the object (flat objects don't need to be)

      Dialog and Wizard icons: 32×32 and 48×48

      Overlays: core shell code (ex: shortcut) 10×10 (for16x16), 16×16 (for 32×32), 24×24 (for 48×48), 128×128 (for 256×256). Note that some of these are slightly smaller but are close to this size depending on shape and optical balance

      Quick launch: icons will scale down from 48×48 in Alt +Tab dynamic overlays, but for a more crisp version, add a 40×40 to .ico file.

      Balloon icons: 32×32 and 40×40

      Additional Sizes: additional sizes are useful to have on hand as resources to make other files (ex: used for annotations, toolbar strips, overlays, HIDPI and special cases) 128, 96, 64, 40, 24, 22, 14, 10, 8. Format =ICO, PNG, BMP or other depending on code in that area

5.1 Size requirements for HIDPI

The Windows Vista targets 96dpi and 120dpi.

      Note, based on the information on the previous slide, that not all of these sizes must be included in the ICO file. The code will scale larger ones down.

 

Examples of scaling ratios applied to two common icon sizes:

DPI	Icon size	Scale factor
96	16 x 16	1.0 (100%)
120	22 x 22	1.375 (137 1/2%)
144	24 x 24	1.5 (150%)
192	32 x 32	2.0 (200%)
DPI	Icon size	Scale factor
96	32 x 32	1.0 (100%)
120	40 x 40	1.25 (125%)
144	48 x 48	1.5 (150%)
192	64 x 64	2.0 (200%)

5.2 .ico sizes: standard set

5.3 .ico sizes: special cases

6.0 Detail

      16 x16 size of many of these icons is still one of the most used and therefore important sizes.

      The details in the icon of this size must be handled so that key point of the icon is very clear.

      As an icon gets smaller, transparency and some special details found in larger sizes need to be foregone in order to simplify and get the point across.

      Attributes and colors need to be exaggerated and used to emphasize the key forms.

At 16×16, the icon for the portable audio device could easily be mistaken for a cell phone — so the ear piece is a key visual detail to show.

      Simply scaling down from the 256x does not work.

      All sizes need relevant level of detail, the smaller the icon the more you need to exaggerate the defining details.

7.0 Icon development

1. Designing and producing icons
2. From concept sketch to end-product
3. Tools
4. Production steps
5. Evaluating icons
6. UI Contexts

7.1 Designing and producing icons

      Hire an experienced graphic designer
For great graphics, images and icons work with experts. Experience in illustrations using vector art or 3D programs is recommended.

      Plan to do series of iterations
From initial concept sketches, to in-context mock-ups, to final production review and fit-and-finish of icons in the working product.

      Think ahead… icon creation can be expensive!
Round up all existing details and requirements, such as: the complete set of icons needed, the main function and meaning for each, 'families' or clusters in the set you want to be apparent, brand requirements, the exact file names, image formats used in your code, sizes requirements, etc. Ensure up front you can make the most of your time with the designer!

      Remember the designer may not be familiar with your product, so provide functional information, screen shots and spec sections can be very helpful.

      Plan for Geopolitical and Legal reviews as appropriate.

      Map out a timeframe and have regular communication.

7.2 From concept sketch to end-product

      Create concept sketches

      Try out the concept in different sizes

      Render in 3D if necessary

      Test sizes on different background colors

      Evaluate icons in-context of the real UI

      Produce final .ico file or other graphic resource formats

7.3 Tools

      Pencil & paper: Initial concept ideas, listed and sketched

      3D Studio Max: Render 3 dimensional objects in perspective

      Adobe Photoshop: Sketch and iterate, mock up in context and finalize details

      Adobe Illustrator/ Macromedia Freehand: Sketch and iterate, finalize details

      Gamani Gif Movie Gear: Produce . ICO file (with compression if needed)

      Axialis Icon Workshop: Produce . ICO file (with compression if needed)

      Microsoft Visual Studio doesn't support Windows Vista icons (there is no support for alpha channel or more than 256 colors)

7.4 Production
Step 1: Conceptualize

      Use established concepts where possible to ensure consistency of meanings for the icon and its relevance to other uses. If it is a good time to, update existing icon designs to be more simple and direct.

      Consider how the icon will appear in context of the user interface and how it might work as part of a set of icons.

      If revising an existing icon, consider if complexity can be reduced.

      Consider the cultural impact of your graphics. Avoid using letters, words, hands, or faces in icons. Depict representations of people or users as generically as possible if they are needed.

      If combining multiple objects into 1 image in an icon, consider how the image will scale to smaller sizes. Use no more than 3 objects in an icon (2 is preferred). For the 16×16 size, you can also consider removing objects or simplifying the image to improve recognition.

      Do not use the Windows flag in icons.

7.5 Production
Step 2: Illustrate

      To illustrate Windows Aero style icons use a vector tool such as Macromedia Freehand or Adobe Illustrator. Use the palette and style characteristics as outlined previous slides.

      Illustrate image using Freehand or Illustrator. Copy and paste the vector images into Adobe Photoshop.

      Make and use a template layer in Photoshop to make sure that work is done within square regions of the regulated sizes.

      Create the images in a size a bit smaller than the overall icon size demands to allow space for a drop shadow (for those sizes that will require one).

      Place images at the bottom of the squares so that all icons in a directory will sit approximately on the same bottom line. Be careful not to cut off shadows.

      If you are adding another object to an image or a series. Keep the main object in a fixed position and place flat smaller sized images in a fixed position such as the lower left or upper right depending on the case.

7.6 Production
Step 3: Creating the 24 bit images

      Once you've pasted sizes in Photoshop, check the readability of images, especially at 16×16 and smaller sizes. Pixel-poking using percentages of colors may be required. Reduction of transparency may also be needed depending on the case. It is common to exaggerate aspects at smaller sizes and to eliminate aspects as well, in order to focus on the key point.

      The 8-bit icons will be displayed in any color mode lower than 32-bit and will not have the 8-bit alpha channel so they may need to have their edges or more cleaned up because there's no anti-aliasing (edges may jaggy and image may be hard to read).

      In Photoshop, duplicate 24-bit image layer and rename the layer to 4-bit images. Index 4-bit images to the Windows 16 color palette.

      Clean up images using only the colors from the 16 color palette. Outlines made from darker or lighter versions of the object's colors is usually preferable to grey or black.

      If working on a bitmap, be sure that the background color isn't used in the image itself because that color that will be the transparent color. Magenta (R255 G0 B255) is often used as the background transparency color.

7.7 Production
Step 4: Creating the 8-bit and 4-bit images

      Now that the 24-bit images ready to be made into 32-bit icons, 8-bit versions need to be created.

      This is a great time to test in contextual screen shots. It's amazing what can be discovered once comparisons to others in context or with other icons in a family of icons is done. As noted before, this step can save time and money. It is much better to catch issues before files go through production and are handed off.

      Add the drop shadow to your images in sizes that require them.

      Merge the drop shadow and the 24-bit images together.

      Create a new Photoshop file for each size. Copy and paste the appropriate image. Save each file as a .psd file.

      Do NOT merge the image layer with the Background layer. It's helpful to include the size and color depth in the file name while working, but the file may ultimately need to be re-named

7.8 Production
Step 5: Creating the .ico file

      Choose the application that best meets needs and skills of artists. Remember that icons to be used in a shipping product must be created in a tool that has been purchased or licensed. This means that trial versions cannot be used.

      Both of the products listed below have been used by designers who have produced icons for Windows Vista and each offers and ability to export to Adobe Photoshop CS.

      Gamani Gif Movie Gear: Produce . ICO file

      Axialis Icon Workshop: Produce . ICO file

      Visual Studio doesn't support Windows Vista icons (there is no support for alpha channel or more than 256 colors), so its use is not recommended.

      Icon (.ico format) files will need to contain the 4 & 8 bit versions as well as the 24bit +alpha.

      Save files as a "Windows icon (.ico)" no matter which Icon creation program you choose to use.

      Some iconographic assets may actually be bitmap strips which also require an alpha channel (for toolbars for example) or .pngs saved with transparency. Not all are necessarily .ico format; check for what format is supported in code.

7.9 Evaluating icons

      Look at all sizes

      Look at the family together to evaluate family resemblance optical balance and distinction

      Look at in context to evaluate relative weights and visibility (make sure that one doesn't dominate)

      Consider cases that may not be used now, but could be in the near future

      Look at in code

8.0 UI contexts: list view control

Icons that appear in list view controls to represent files

      For Windows Vista the recommendation is to use thumbnails for files holding content that is visually distinct at small scale, such that users can directly recognize the file they are looking for. (use the Windows Thumbnailing API for this)

      Application icon overlays (not shown here) on thumbnails helps association with the application for the file type in addition to showing the file's preview

Note: For files without visually distinct content "thumbnailing" should not be used. In those cases use traditional symbolic file icons showing object representation and associated application or 'type'

8.1 UI contexts: toolbars

Icons that appear in a toolbar must have an optical balance in size, color and complexity.

      It is important to test potential icons in a contextual screen shot to avoid any undesired dominance or imbalances.

      Testing in screen shots easily helps avoid expensive iterations in code.

      Icons should certainly be reviewed in code as well. Motion and other factors can impact the success of an icon, in some cases further iterations may be needed.

In the above example the optical balance has not yet been achieved

Try iterations in context

8.2 UI contexts: tree view control

Optical balance is needed to preserve the hierarchy in a tree view control.

      Therefore icons that are typically used in this context should be evaluated there. Sometimes a particular 16×16 needs to be made smaller because its shape has an optical dominance over others.

      Compensation for optical imbalances is an important part of producing top quality icons.