如何创建一个更好的规范

作者简介：Whitney Quesenbery 是一位用户界面设计者以及可用性专家。她与世界各地的公司合作获得了优胜网站，网站和软件应用等奖项。作为UPA 评判和可用性项目的主管，她被任命为美国政府在评判系统标准问题上的顾问委员会的委员。 Whitney 还担任着美国 UPA 主席的职务。

1. Building a Better Style Guide

1.1. ABSTRACT（摘要）

Why are style guides so frequently created, but so rarelysuccessful? All too often, businesses ask for a style guide as a means tocreate a common look and feel, in the belief that it will solve usabilityproblems and establish consistency between applications – only to bedisappointed in the results. Even if such a style guide is followed carefully,the resulting interfaces may not meet usability goals.. This paper exploresstrategies for creating a style guide that is more than a simplistic rulesbook. By making the style guide part of the process, it can be used to promotea shared vision, to help the product meet business and usability requirementsfor consistency and…it may actually be used.

为什么规范如此频繁的被创建，但却很少成功的？时常企业创建一个规范的目的是能够创建一致的样子和操作习惯，并且希望透过规范来解决易用性方面的问 题并且能够建立不同产品之间的一致性，但结果却是让人失望。即使规范被严格的遵循，结果却是界面的样式与易用性的目标相违背。这篇文章讨论的就是如何让规范不仅仅是一个规范手册。让规范融入到开发过程中，用于提升可视的共享（a shared vision？），让产品与商业需求和易用性要求相结合等等。让它真正的被使用。

1.2. INTRODUCTION（简介）

All too many projects to improve the usability of a userinterface start with a request to create a style guide. To many user-centereddesigners, a style guide is the documentation of a design – the end of a designprocess – not a starting point for usability. And yet, we continue to createthem, despite that fact that they may do little to address real usabilityproblems or create a common approach to interaction. This paper describes sometactics and techniques for creating style guides that present and organize theappropriate information in a usable structure.

很多项目为了提高用户界面的易用性从创建一个规范开始。太多以用户为中心的设计者把规范作为设计最后的设计的文档，而不是易用性的起点。我们不断地创建它，而不顾它实际上不能解决实际的易用性问题或是达成共同的交互方式。

1.3. WHAT’S IN A STYLE GUIDE?（规范中包含什么内容？）

Style guides can be classified as platform (or language)guide, general design guides, or corporate style guides for a specificapplication. Although they overlap in many ways, each has a different focus.

Style guides可以分为：开发语言规范（？）、通用设计规范或特殊应用程序通用样式规范。虽然他们通过许多的途径交迭，但有各自不同的焦点。

1.3.1. Platform Guides

The vast majority of publicly-available guides are in thefirst category. These style guides focus on rules for presentation elements,including visual design elements such as color, logos, fonts or icons; page orscreen layouts including spacing, justification and common items; and thecorrect usage for standard controls such as buttons, drop-down selections,radio button or check boxes.

这种规范的焦点在于陈述基本原理，包括可视化控件的标准例如：按钮、下拉列表、单选框以及复选框。

This focus is understandable for style guides written foroperating system platform or software languages. These guides must providebasic information for other groups using their tools to create softwareproducts, documenting the capabilities of the platform as well as providingguidance to designers. In Table 1, we see that the Java Look and Feel Guidelinesand Macintosh Human Interface Guidelines have very similar tables of contentsdespite having been written in different eras (as computer eras go) and indifferent companies. The same general pattern is also followed in sections ofthe ISO 9241 Ergonomic Requirements for Office Work with Visual DisplayTerminals. Although this standard also includes guidance and requirements forphysical interaction as well as two sections on task requirements andusability,most of the sections focus on visual display guidelines for dialogs,information, and user assistance.

这个焦点用于操作系统平台以及软件开发语言。这个规范同样需要提供基本的信息给那些利用这个开发语言创建其他软件的设计人员，描述系统平台的性能作 为设计人员的指导。从表1，我们可以看到“Java Look and Feel Guideline”和“Macintosh Human InterfaceGuidelines”拥有许多相似的内容。这些常规规范也是遵循“ISO 9241 Ergonomic Requirements for Office Workwith Visual Display Terminals”。

Java Look and Feel Guidelines

Macintosh Human Interface Guidelines

1 - The Java Look and Feel
2 - The Java Foundation Classes

Preface

3 - Design Considerations 1 - Human Interface Principles

2 - General Design Considerations
3 - Human Interface Design and the Development Process

4 – Visual Design

9 – Color

5 – Application Graphics

8 – Icons

6 – Behavior

10 – Behaviors

7 – Windows, Panes, and Frames

5 – Windows

8 – Dialog Boxes

6 – Dialog Boxes

9 – Menus and Toolbars

4 – Menus

10 – Basic Controls

7 – Controls

11 – Text Components

11 – Language

12 – Lists, Tables and Trees

 

Table 1: Comparison of Tables of Contents for Two StyleGuides

1.1.1. Design Guides(设计规范)

Design guides, especially those written for web interfaces,often take a broader view, looking at the overall structure of a site and howthe user navigates through it as an important design element. They may alsoinclude a primary focus on the process for creating a usable interface design.For an example of each type of design guides compare the Web Style Guide(published on the web as the “Yale Style Manual”) and the IBM Web DesignGuidelines.

设计规范特别是那些为网站而写的规范，一般给出常规界面，将描述网站的总体界面效果，以及用户如何导航作为主要的元素。当然也包括最基本的焦点，创建可用的界面设计。例如如下的两个网页规范。

Web Style Guide

IBM Web Design Guidelines

Interface Design 

Basic Interface Design – Information Access –Navigation – Links and Navigation

Site Design

Site Structure – Site Elements – Intranet Design -Site Covers

Page Design

Graphic Design – Design Grids – Headers and Footers – Typography – Consistency – Tables –Page Length – Cross Platform Issues – Editorial Style – Frames

Web Graphics

Color Primer – Graphic File Formats – Illustrations – Optimizing Graphics – Tags – Backgrounds – Image Maps

Web Multimedia and Animation

Design and AudioVisual Elements – Digital Video –Digital Audio – GIF Animation

Planning 

User AnalysisCompetitive and Market Analysis - Strategy - Content - Development Tools and Technology - Schedule of Time and Resources

Design

Structure - Navigation - Text - Visual Layout and Elements – Media

Production

Preparation - Browser Compatibility - Creating Images - Cascading Style Sheets - Final Testing – Rollout

Maintenance

Administration

e-Commerce Topics

Customer Support

Trust - Product Navigation - Product Information -Purchase Transaction

Table 2: Tables of Contents for Design-Type StyleGuidesBoth of these examples offer excellent advice for a user-interfacedesigner, but neither offers a definitive set of standards. Instead, they focuson establishing best-practices in design process and solutions for some commondesign problems.

这两个例子都为用户界面设计师们提供了极好的建议。但是都没有提供了最权威的标准。他们描述的重点都放在提出最好的设计过程，以及为常见的设计问题提供解决方案。

Neither the platform style guide nor the design guideprovide a perfect model for creating a corporate application style guide. Thefirst type is too detailed, and, for product teams working in a familiarenvironment, spends too much time on platform basics. The second is too generaland usually fails to meet the need for definitive answers to basic designquestions. The IBM Web Design Guidelines even states this explicitly:

无论是“platform style guide”还是“design guide”都没有提供一个创建公共应用程序规范的完美例子。第一个规范太详细，对于一个相同环境中工作的团队将会花费过多的时间在上面。第二个规范则太常规，通常不能满足为设计中的问题提供最权威的解决方法的要求。IBM的规范中提到：

“We developed these guidelines by studying a cross-sectionof users and sites, but there may be contexts that we did not examine. If youlearn from your user feedback that a different solution works better in yoursituation than one we offer here, then of course you should do what works bestin your situation. To provide the best Web solutions, always use theseguidelines in conjunction with a usercentered design process.”

“我们通过a cross-section of users and sites创建这个规范，但是还有可能有内容我们没有调查道。如果你通过一个不同的解决方案来获取用户的反馈信息，并且能够更有效的完成，当然采用你自己的解决方案。为了提供最好的网站解决方案通常将本规范与用户为中心的设计过程相结合。”

1.1.1. Corporate Application Guides（公司程序规范）

Corporate style guides are a hybrid of platform guides anddesign guides. They need to provide look and feel guidelines to ensure basicconsistency (or compatibility) across the applications they serve. In additionto providing reference material, a corporate style guide also serves aneducational purpose, illustrating both the conceptual approach to the userinterface and, often, a process to ensure that usability is built into thedesign from the beginning. (A sample table of contents for a corporateapplication style guide is included as an appendix to this document.)

公司程序规范提供公司软件的一致视觉效果以及使用感觉。另外它还起到教育的目的。例如：即达到概念上的用户界面一致，又让易用性设计不用再从头开始。

1.1.2. GOALS FOR A CORPORATE APPLICATIONS STYLE GUIDE（创建公司程序规范的目的）

This brings us face-to-face with a need to understand why acorporate style guide is created in the first place. Without knowing whatproblem the style guide is intended to solve, it is impossible to structure theinformation effectively, or to plan the process of creation, review andimplementation. These scenarios illustrate three possible goals:

这给我们带来面对面的需求来了解为什么要在最初就创建公司程序规范。处了了解规范将要解决什么问题，就不可能将信息有效的组合，或如创建计划，回顾和执行。下面是可能一些目的：

Ø A senior manager says, “We need a style guide to ensurethat all of our applications share a common look and feel.” The underlyingbusiness goal may be usability, but it may also be to save development time bysupplying standard answers to difficult design questions. In this scenario, thestyle guide may be seen as the simplest executive order that can be given tosolve a “problem with usability.”

一个高级管理员说：“我们创建一个规范的目的就是让我们的应用程序可以共享一个共同的外观和感觉。”潜在的商业目的就是可用性。通过提供疑难设计问题的解决权威方案来节省开发时间。从这一点看来，规范可以用作为易用性的为题提供简单的解决方案。

Ø A user-centered design group decides to publish a styleguide to assist product groups in creating usable interfaces, saying, “We knowa lot about what it takes to create a usable design and would like tocommunicate this to all of the design teams.” In this scenario, the style guidemay be seen as a way to create a formal mechanism for enforcing best practices.

个以用户为中心的设计组织决定发布规范来帮助开发团队创建便于使用的用户界面。说到：“我知道许多关于它的信息，它可以开始创建一个可用的设计并且希望与所有的设计团队沟通”在这种情况，规范可能成为一种为强制执行，被用到开发实际中。

Ø A product team may wish to document their own work – “Weneed a way to keep track of the decisions we have made, and to communicate themwithin our team.” This goal is usually based on the demands of working in alarge design team, or a need to hand the design work from one group to another,for example, from an outside consultant to an internal staff, or to new hires.

一个开发团队可能希望将他们的工作文档化。“我们需要一个途径使使我们已经作出的决定明了化，并能够就这些决定于我们的团队进行沟通”这个目的通常是对于一个大的工作团队的要求，或者将设计工作从一个团队传递到其他的团队中。例如：公司与顾问公司之间或给新来的员工。

These scenarios can be summarized in terms of usability goalsfor efficiency, effectiveness and satisfaction:

这些情节可以一归纳出团队对于易用性的目标是：有效、效率以及满意。

Usability Characteristic 

易用性的特征

Goal 

目标

Efficient 

高效

Improved Quality: The time required to design of the user interface will be reduced because basic guidelines are clearly documented, tools are shared, and best practice guidance is available for other decisions 

提高品质：用户界面设计所需要的时间将会减少，因为基本的指导方针已经制定，工具已经共享，基本的实践指导能够购被其他的决定所使用。

Effective 

有效

improved Process: User interface will be able to work together better because shared design guidelines are available. Initial designs will be more effective, with less re-work to solve usability problems required 

过程得以改进：用户界面能够更好的一起工作，因为有共享的设计规范使用。最初的设计将会更加的有效，在解决易用性问题上可以减少反复。

Satisfying 

满意

Improved Usability: The user experience will be improved, both for the designers and users. Designers will have the satisfaction of creating excellent interfaces, while users will benefit from increased usability. 

提高可用性：无论对于设计人员或是用户而言，用户体验将会被提升。设计人员满意于创建卓越的用户界面，对于用户来说将得益于易用性的提高。

Table 3: Usability Goals For Corporate StylesNone of thesegoals seem controversial, or unattainable, so the answer to why style guidesdon’t always meet their goals does not lie in the goals themselves. The problemlies in the rest of the ISO 9241 definition of usability – that is applies tospecific users, in a specified context. In other words, who is expected to usethe style guide and what is the cultural environment of the group for whom itis being created? Is the style guide being imposed on an unwilling audience oris it welcomed by the people who will have to use it? Is usability an acceptedor novel concept? Do current products have a similar interface or are theremany different approaches? Are the teams collegial or competitive (do they evenknow each other)?

这些目标并不是存在争议或是难以达到的，因此为什么规范与初始目的背道而驰的答案并不在目标（目的）本身，问题出在“ISO9241”定义的易用性的其他方面——在一个指定的环境中应用于特殊用户。换句话说，谁期望使用规范？将要创建它的人所处的文化环境是什么？规范是否被其 他人自愿的使用或受将要使用他们的人欢迎？易用性是已经被公认的还是只是一个想法？当前的产品是否拥有类似的界面风格或是个不相同？团队是否拥有相同的权利还是相互竞争的（他们是否互相了解）？

The answers to these questions may not change theinformation included in the style guide, but the process of creating, gainingapproval and maintaining it must adjust to the context. Simply gaining high-levelexecutive sponsorship is not enough. No matter how high the authority,guidelines imposed on an unconvinced audience are often followed just to theletter of the law – if not simply ignored. The worst-case outcome is a userinterface design that follows all of the guidelines, but does not really workwell. Its designers are likely to blame the style guide for dictating solutionswhich hampered the ‘brilliant design’ they wanted to create. Whether thosedesigners are forced to live within the guidelines or allowed to makeexceptions, the credibility of the work is damaged.

这些问题的大案可能并不能改变规范中所包含的内容，但创建的过程，讨论通过以及改进却依赖于这些问题的答案。简单的说只是创建一个高水准的执行任务 是不够的。无论有多么的权威，对于不是很信服的人来说最多是逐条的执行，如果没有遗漏的话。最糟糕的是，结果遵循规范但实际上并不能正常工作。遇到这种情况，设计人员有必要将他们的设计向大家阐述。否则，这些设计人员就有可能不按照规范或是被允许制造特许情况，工作的可信度就有可能遭到破坏。

1.1. WHO USES A STYLE GUIDE?（谁使用规范）

In addition to clarifying the business goals for a styleguide, it is also important to know who its users will be. The obvious answeris “user interface designers,” but the answer is not that simple. A moredetailed analysis would include in the user group a variety of specialists, andwould also take into account differences based on the stage of the project,asseen in the table below:

在澄清了企业创建规范的目的外，了解规范的使用者同样重要。最明显的答案就是“用户界面设计人员”，但是答案并不是那么简单。更多的细节分析参看下表：

User Group 

用户组

Design Concept - Analysis Stages 

设计观念——分析阶段

Detailed Design - QA Stages 

详细设计——质量检测

All 

所有

What are the rules I must follow in my work? 

在我的工作中我必须遵循的规范是什么？

Have I followed those rules? 

我是否遵循了这些规范？

UI Designers 

(Architecture or Concept)

UI设计人员

How should the interface be structured, both for layout and navigation? 

界面将如何编排？包括界面效果以及导航？

Does the interface fit any structural guidelines? 

界面是否遵循了结构方面的规范？

System Architects 

系统设计师

What are the implications for the architecture of any UI decisions? 

任何一个UI的决定都有哪些含义？

Can all of the UI requirements be met? 

所有的UI需求都实现了吗？

UI Designers 

(Detailed Functions)

UI设计人员（细节问题）

How do individual functions fit into the 

program structure?

What screen/page or interaction templates are available?

如何让个别的功能融入到程序结构中？

哪些视觉或交互的模板可用？

What are the rules for layout, color, etc. that the design must support? 

How should design elements be specified?

界面的颜色等方面的规范是什么？设计必要的支持是什么？

如何让设计的元素表达清楚？

Developers 

开发人员

How should the UI code be structured to meet design requirements? 

What controls or widgets are needed?

如何让UI代码与设计的需求相融合？

需要什么样的控件或窗体部件？

What color, styles, etc. are available to use? 

How can I match them to the design specifications?

什么颜色样式等等可以使用？

如何使他们与设计的规范相符？

User Assistance

How will assistance be offered to users? 

What standard UI elements are used? How should they be documented?

什么UI元素被采用？

他们是如何被表达的？

What assistance does a user need for this function/page/screen? 

What method should be used to include it?

哪些帮助用户需要？

采用什么样的方法来包含这些内容？

Quality Assurance 

质检人员

Are there templates or standard approaches which can be tested globally? 

原型和标准可遵循，那些可以测试？

Does the interface meet all standards? 

界面是否与所有的标准相符？

Table 4: Style Guide UsersFor each user group, use of thestyle guide shifts during the project. It starts out supplying a conceptualoverview, but quickly moves into a role as a detailed reference guide. It isthis mix of requirements that makes the contents of a style guide so difficultto structure.

对于任何一个用户组，都会在项目开发的过程中更替使用规范。开始与概念上的设计，但快速的移动到一个角色和详细的参考规范。正是这些混合的需求使得规范的结构难以确定。

There are two other user groups whose members often overlapwith the groups listed above:

这儿有两组用户会与上述的用户交迭。

Ø Creators of the Style Guide. The group that creates thestyle guide needs to be able to manage this process. This includes a need tohave a convenient way to review both individual sections and the entire guide,and a way to see an overview of the contents. The danger here is that becausethis group controls the guide, their needs will take precedence over the needsof the longer-term users.

规范的创建人员。规范的设计人需要能够对过程进行控制。包括有一个便捷的方式来回顾单独的选择以及全局的规范，以及一个察看整体内容的方法。风险是：这类用户控制着规范，他们的需求可能优先于其他的所有人员。

Ø Modifiers of the Style Guide. Any user may also fall intoa group of people who want to request changes or extensions to the guidelines.To meet this need, there must be a plan for maintaining the guide over time.The danger here is that this need will be ignored entirely or only given lipservice. This is especially true if the group creating the style guide feelsembattled.

规范的修改人员：所有的人员都可以作为要求修改规范或扩充规范。对于这些需求，就需要将规范不断的修改。风险是：这些需求可能会忽视全局或一些无用的服务。当规范的创建人员感到困难重重的时候这种情况就很有可能发生。

1.1. CREATING AN EFFECTIVE STYLE GUIDE（创建一个有效的规范）

To be effective, a style guide must not only contain goodguidelines, it must be used and accepted. The process in this case may be asimportant as the actual product.

要想有效，规范不仅仅包含一个好的指导方针，它同样要被使用并遵循。这个过程与实际的开发过程同样重要。

1.1.1. Process（过程）

It is impossible to prescribe a single process for all ofthe organizational and political contexts in which a style guide is created.There are, however, some general approaches that can be applied.

难以为如何创建规范规定唯一的处理过程。但可以采用一些常规的方法。

Ø Start early（尽早开始）

This is especially true if the style guide is supporting(or an outgrowth of) a current design effort. If you wait until the design isnearly complete to begin assembling the design guidelines, you miss theopportunity to have all design stakeholders invested in its creation andcontent.

如果你想在设计接近结束的时候才开始规范的编写，你将失去将所有的设计应用的机会。

Ø Make the emerging work widely available（？）

This is an important aspect of building broad support. Itmakes it possible to solicit comments and questions from stakeholders beforethe guidelines are final, and to incorporate feedback. One way to make the workavailable is to work in hypertext and make drafts available online, rather thantrying to manage a traditional word-processing document. In apolitically-sensitive environment, it can be tempting to work in private untilthe entire style guide is complete, delaying conflicts until ‘later.’ In anysituation, there are risks in making the incomplete work available, but likeevaluating an early prototype, the advantages usually outweigh those risks. Oneexample is a situation in which a designer bases decisions on a version of aguideline that changes later. Clear identification of the status of the overallguide and each guideline is essential.

创建更为广泛的支持是一个十分重要的方面。能够在编写规范之前获得问题的解决方案。让工作可用的一种方法就是同过链接和可用的东西放到网上，而不是 传统的文字方面的处理过程。在任何情况下，使用尚未完成的工作都是有风险的，但除了评估和早期的原型，他们的优势通常要比这些风险要大。清楚每个规范所处的状态并且每个规范都是最精华的。

Ø Make the process transparent（让过程透明、清晰）

Include (or make available) meeting minutes or otherdiscussion topics. Provide links from the minutes to standards or guidelinesthat are discussed, so that stakeholders can follow the progress of the work.Don’t wait until an item is complete to include it for comment. Early conceptsor tentative decisions (along with any discussions of alternatives) should beincluded as long as they are clearly identified as ‘in progress.’

包括会议记录或其他的讨论的纲要。提供讨论的内容在规范或标准中对应的链接，从而使处理人员能够遵循标准处理。不要等到任何一个对象已经完成后再添加注释。早先的观念或暂时的决定在一得到解决后就加入到“过程中”。

Ø Make the context visible（让关系可见）

Many style guides are so formal that they are stripped ofany context. Many guidelines are written to resolve conflicts; others provide adefinitive answer to design problems for which there are many possiblesolutions. Although you certainly don’t want to drag all of your ‘dirty linen’into the final style guide, it is important that readers be able to recognizethe implications of the work.

许多的规范太正规以至于忽略了一些具体的环境。一些规范是为了解决冲突而写，其他的为可能存在的多种解决方案确定一个最后的方案。让读者能够意识到规范与实际工作的联系是十分重要的。

1.1.1. Structure and Organization（结构和组织）

One of the biggest mistakes is to treat a style guide as anarrative book rather than a reference work. Only the authors and reviewerswill read it all the way through. Everyone else will use the style guide tolook up the information they need as they need it.

将规范作为一个叙述性的书籍而不是实际工作的参考书是创建规范的最大问题之一。只有在作者和使用者在开发的过程中不断的阅读，其他的人员则在他们需要的时候查阅规范。

Ø Put it online（将其在网络上发布）

Save trees, costs and time by distributing the style guideonline. It is always surprising to see how often web teams and others creatingonline applications assume that their own documentation must be in aword-processing document. Avoid this trap and plan for online access from thebeginning.

通过在网络上发布规范能够节省时间和金钱。它常常可以令人惊奇的发现网络上的团队以及其他的在网络上创建程序的人员将规范只是做为一个文字上的记录而已。为了避免这种情况，就必须在一开始的时候就强制联机的访问。

Ø Write for hyperlinks（为文章添加超级链接）

Use hypertext to connect related topics, link to examplesand illustrations, and generally make it possible for users to browse. Thisalso allows you to avoid repeating information in more than one place, with theassociated maintenance problems which can cause.

使用超级链接关联相关的主题，实例和图表说明，并确保用户可以阅读到这些信息。这样同样可以让你避免相同的内容出现多次。

Ø Design for reference（设计目录）

Organize topics so that the most important information isat the beginning, rather than at the end of a long narrative. Only one topicshould be included in each hypertext page so that topics can be linked easily.For example, if you have a description of two controls and a comparison betweenthem, you should create three pages, with links from each control to thecomparison.

组织标题，让最重要的信息在最初就体现，而不是藏在很长的叙述之最后。让每个超级链接对应一个主题，让每个主题都能够容易的到达。例如：你描述两个控件并且将它们进行比较，你就应该创建3页，每页队以一个控件以及它们的区别。

1.1.2. Contents（内容）

In distilling the language of guidelines down to theessential rules, the richness of the decision-making process is often lost. An importantrole for the style guide is to help the entire user interface team work better.

在规范中保留最本质的条款，但设计的过程常常没有包含进去。规范的一个很重要的任务是帮助所有的界面设计团队更好的工作。

Ø Guide design decisions（指导设计的决定）

Style guides are usually effective in documenting simplerules like colors and fonts. The problem is that few of the important designdecisions can be based on simple rules; more often “it depends.” Making theguidelines helpful to designers means creating comparison tables betweenoptions (for example, showing strengths and weaknesses of lists, trees and gridcontrols) or providing other information to help them make good designdecisions.

规范在定义简单的规则如颜色字体的时候通常是有效的。但问题是很少能够基于简单的规则来处理重要设计的决定。通常情况下它依赖于创建一个更有效的规 范，提供不同方案之间的对比（例如：描述list，tree，改日的controls 这些控件的优点缺点）或提供其他的有助于帮助做出有效的设计决定的信息。

Ø Give design elements ‘mission statements’（描述设计元素的任务）

It can often be difficult to communicate the essence of adesign element or interaction style, especially when guidelines are notclear-cut. Rather than bury this information in the formal (“must” and “shall”)language of standards, include a simple mission statement to explain how theelement enhances the user experience. These mission statements may be the firststep in creating a formal guideline, acting as a checkpoint to ensure thateveryone agrees on the basic issues. In some cases, it may not be possible tocreate a more detailed guideline. In either case, the mission statement servesto document the intent of any later work and can be used as a test againstwhich proposed guidelines are measured.

通常很难以讨论设计元素和交互样式的本质，特别是当规范没有表达清晰的时候。通过描述一些简单的任务来说明这些元素是如何提高用户体验的，而不是将这些信息隐含在形式上的标准。这些mission将起到检测大家已经达成共识的观点。

Mission Statement ExamplePopup windows will: 

1. Reduce the need for navigation by…(通过…来减少导航的需要)

_ showing additional detail（显示而外的细节）

_ collecting input just-in-time（实时的搜集输入信息）

2. Increase user success in navigation by..（通过…来提高用户导航的成功率）

_ providing better information scent（提供更好的信息线索）

_ showing options for actions（显示操作的选择）

_ collecting missing information（收集遗漏的信息）

3. Stop the action for a user response for…

Ø Connect design guidelines to user analysis（将设计规范与用户分析相结合）

Include documentation of user characteristics, demographicsor profiles for all of the user groups considered in creating the style guide.When there is data from usability tests or other user analysis to back up aguideline, include it. This not only provides a clear user-centered basis forany decisions, but can also be helpful in determining when a guideline needs tobe re-considered or expanded.

在创建规范的时候将用户分析考虑进去。当易用性测试或其他的用户分析与规范不一致的时候，将这些信息添加到规范中。这不仅仅为任何的决定提供一个更为清晰的依据，而且也对是否对规范进行重新审议或扩充起到帮助的作用。

1.1.3. CASE STUDIES（情况分析）

Two examples from Cognetics’ experience illustrate thevalue of using a style guide to document and support an ongoing design process:

同过连个实例来说明使用规范来指导设计过程的价值。

Ø A multi-designer, complex product

In this project, the goal of the style guide was to help agroup of UI designers create an interface for a new modular product that wouldshare a common look and feel and be very usable. Each designer worked in asmall crossfunctional team on one of the modules. Weekly design meetings servedas a forum to compare approaches and resolve any issues. The group created bothdesign guidelines and programming requirements. As decisions were made in thesemeetings, the information was posted to a web site for review. Topics rangedfrom visual and layout standards to guidance on design approaches. The styleguide functioned both as a collaboration and a publication tool, serving boththe design group and (later) the program architects and developers.

在这个工程中，规范的目标是帮助一组的ui设计人员创建一个标准组件的用户界面，用于分享一个公用的外观和感觉。每个设计人员在一个模块的一个小功能组内工作。每个星期，设计人员对任何的问题和设计进行讨论。这组人员创建了设计规以及规范的环境。当设计人员开这些讨论会的时候，信息将会在网络上发 布。规范作为协作和发布的工具，为设计小组，及之后的程序设计小组和开发小组服务。

Ø A web site for online sales of several publications

In this project, a small central design team created designguidelines for a larger group of product and content developers. Both the coregroup and the product teams were spread out geographically, making collaborationdifficult. The style guide became a primary communication tool, with one teammember assembling all of the content for the team. Easy access to the growingsite also enabled the product designers to review the guidelines and ensurethat the work would meet their requirements.

在这个工程中，一个小的核心设计团队为一个大的项目组，开发人员创建规范。开发团队和项目组不在一个地方工作，协作比较困难。规范则变成了主要的交流工具，当一个团队成员作好了所有的内容后很容易的根据规范来查看工作是否与他们的需求相吻合。

Although these two projects differed in terms oforganization, and the development and design processes there were manycommonalties:

虽然这两个项目是不同组织的团队，但在开发和设计的过程中却有很多相似之处：

Ø Initial attempts to create visual design guidelinesquickly revealed dependencies on the design for of user interaction andnavigation. Create a structure for the style guide that allowed us to collect(and link between) different aspects of the design as it emerged was important.

最初都努力创建设计规范，尽快显示用户的交互及连接的信息。创建规范的结构允许收集不同的设计样式。

Ø In both cases, there were many strong design voices thatneeded to be reconciled. Providing a forum for discussion with concreteexamples helped move the conversation from “opinion wars” to a debate on theissues.

两种情况，都有许多设计问题需要解决，针对具体的例子举行讨论，将会议从提出意见到讨论实际的问题。

Ø By using the style guide as a tool during the creation ofthe design, the staff became accustomed to using it as a daily reference tool.In addition to the obvious value of creating a useful tool, it meant that therewere fewer surprises when the guide was released.

通过将规范作为一个工具贯穿于设计的始终，每个人将它作为日常的参考工具。

Ø The inclusion of critical information for the developers,such as image libraries and style sheet examples, gave them a reason to accessthe sites on an ongoing basis. In one case, there was a push to add morerelated information to the style guide site because it was a tool which wasalready being used.

包含一些评论性的信息给开发人员，例如：图片库以及样式表的实例。另一方面，将会有更多的相关信息添加到规范中，因为规范被当作一个工具使用。

Ø The inclusion of design rationale with visual andinteraction rules helped new designers understand the reasoning behind theguidelines. This also provided a good starting point for discussion when adecision had to be revisited.

包含将视觉和交互设计规则作为基本原理帮助新来的设计人员了解规范后面的论证。对于一个比较难见解决的问题，他意味着讨论的一个好的开始。

1.1.4. USING A STYLE GUIDE TO BUILD CONSENSUS（使用规范指导内容的创建）

Making and living with design decisions can be difficult,especially when several different products and different designers must alllive with common guidelines. As a document, a style guide houses the details ofthe design that must be followed. As a process, the construction of the styleguide can be used to create a shared design vision for the look and feel itdocuments. Our experience at Cognetics has been that when the style guide isthe central location for all design material and its creation is part of theprocess, the guide itself can help build consensus among the team.

断然的作出设计的决定是比较困难的，特别是当多个来自于不同项目的设计人员必须实行相同的规范时。作为一个文档，规范收藏的设计细节必须被执行。作 为一个过程，构造规范能被用于创建一个描述外观和感觉的共享的设计文档。我们的经验是当规范成为设计人员的日常参考并在贯穿于整个开发过程，那么规范本身就能够帮助一个团队创建一个一致的意见。

1.1. SAMPLE TABLE OF CONTENTS FOR A CORPORATE APPLICATIONSTYLE GUIDE（规范范例）

1.1.1. Introduction

Includes all front-matter and preface material, includingthe scope, authors, review and maintenance process and any terminology thatmust be established. Topics in this section include:

Ø Scope

Ø Authors

Ø Using this Style Guide

Ø Update and Maintenance Process

1.1.2. User-Centered Design Principles

Includes all basic principles and usability goals as wellas any user analysis. Short general descriptions of designs that implementthese principles may be included here, along with links to related documents.Depending on the scope of the style guide, this material may be very general ormore specific. Related documents should include cross-references to any othercorporate guidelines which affect the design or development of the userinterface, including localization, corporate identity, or developerinformation, as well as useful design references.

Ø Design Heuristics

Ø Usability Goals

Ø User Characteristics (and sample user data for mockups)

Ø Accessibility Guidelines

Ø Related Documents

1.1.3. Design Process

The contents of this section depends on the context inwhich the guide will be used. This is an appropriate place to put informationabout a general user-centered design process (or specific techniques used). Thissection may also include links to meeting minutes, or to other relatedprocesses such as requirements analysis or development processes.

Ø User-Centered Design Process

Ø Relationship to the Development Process

Ø Design Tools and Templates

1.1.4. User Interface Metaphors

This section documents the user interface concept andmetaphors used. It is more specific than the UCD Principles, documenting anapproach to the user interface to be used in all applications included in thescope. In addition, this section may contain any general guidelines onperformance or task orientation that must be considered in designing theinterface architecture. It also includes an overview of how the interface willprovide user assistance.

Ø UI Concept or Vision

Ø Key Metaphors

Ø User Assistance Design

1.1.5. Architecture or Structure

If the style guide prescribes a standard frame or sitestructure, the guidelines for it are included here. This may include thefunction of anchor pages such as the home page or main menu, and navigationmethods or devices that are supported.

Ø UI Architecture or Site Structure

Ø Menus or Control Bars

Ø Home Page (or Desktop or Main Menu)

1.1.6. Page or Window Layout

This section includes guidelines for the overall layout ofa page or window. It includes descriptions of the layout templates for eachfunction or type of page, and should relate these page types to the overall UIarchitecture. It may also include guidelines for the use of specific pagestructures such as popup windows,wizards or frames.

Ø Page Structure

Ø Layout Templates or Grids

Ø Using Popup Windows

Ø Using Frames

Ø Headers and Footers

1.1.7. Controls

This section includes specifications and usage guidelinesfor all controls or other granular design elements.Depending on the developmentenvironment, this section may contain only general references or very specificdisplay and interaction specifications. This section is also a place for aidsto the designer such as control comparison charts. In some cases it is possibleto include samples of each control in action so the designer can exercise it tosee if it meets their needs.

Ø General Guidelines

Ø Control Comparison Charts

Ø Descriptions Of Each Controls

1.1.8. Interactions

The guidelines in this section cover the user interactionswith the interface. It may include summaries of control interactions,guidelines for interface behavior or other topics specific to the productenvironment.

Ø Keyboard Shortcuts

Ø Mouse, Joystick, Tablet or Other Pointers

1.1.9. User Assistance and Text

This section covers all text and other user assistanceassociated with the user interface, including labels, prompts, help text,messages, tooltips and accessible alternative text. Writing guidelines may beprovided in a single section, or included with each type of text in theinterface. If there are guidelines for terminology, a glossary of terms to useshould be included.

Ø Text in the Interface

Ø Labels and Prompts

Ø User Terminology Glossary

Ø Writing Guidelines

Ø Messages

Ø Status Bar Messages

Ø Error Messages

Ø User Assistance

Ø Types of User Assistance

Ø Tooltips

Ø Embedded Help

1.1.10. Common Functions

In many cases, a style guide may include designs for commonfunctions, which are typically a group of controls, interactions or text. Thesemay be stand-alone user interfaces such as a search function, or may be acomplex element that is used in many functions. The section documents thesefunctions, including any guidelines for their use.

Ø Required Fields

Ø Any Other Common Functions

1.1.11. Visual Design

The visual design section should be written as a referenceguide, with detailed descriptions of each element and links to resources suchas images or stylesheets.

Ø Logos

Ø Fonts

Ø Colors

Ø Images and Icons Styles

Ø Image Library

1.1.12. Audio and Multimedia Design

This section includes any guidelines for the use of audioor other multimedia elements.

Ø Using Multimedia Elements

Ø Audio

Ø Animation

Ø Video

总结： GUIDE LINE 编写的注意事项：

1. 通过对比列表，写明各种方案各自的优缺点，让设计人员更好的决定采用何种方案
2. 可以通过一些简单的例子说明规范将如何改善用户体验
3. 在写规范的时候将用户的特性考虑进去
4. 提出UI设计过程

如何让规范发挥效用：

1. 尽早开始使用start early
2. 让规范更具广泛性make the emerging style guide widely available
3. 让规范在使用的过程中不断的修正和扩充 plan to maintain and extend the style guide over time