如何创建一个更好的规范
作者简介：Whitney Quesenbery 是一位用户界面设计者以及可用性专家。她与世界各地的公司合作获得了优胜网站，网站和软件应用等奖项。作为 UPA 评判和可用性项目的主管，她被任命为美国政府在评判系统标准问题上的顾问委员会的委员。 Whitney 还担任着美国 UPA 主席的职务。
1. Building a Better Style Guide
1.1. ABSTRACT（摘要）
Why are style guides so frequently created, but so rarely successful? All too often, businesses ask for a style guide as a means to create a common look and feel, in the belief that it will solve usability problems and establish consistency between applications – only to be disappointed in the results. Even if such a style guide is followed carefully, the resulting interfaces may not meet usability goals.. This paper explores strategies for creating a style guide that is more than a simplistic rules book. By making the style guide part of the process, it can be used to promote a shared vision, to help the product meet business and usability requirements for consistency and…it may actually be used.
为什么规范如此频繁的被创建，但却很少成功的？时常企业创建一个规范的目的是能够创建一致的样子和操作习惯，并且希望透过规范来解决易用性方面的问 题并且能够建立不同产品之间的一致性，但结果却是让人失望。即使规范被严格的遵循，结果却是界面的样式与易用性的目标相违背。这篇文章讨论的就是如何让规 范不仅仅是一个规范手册。让规范融入到开发过程中，用于提升可视的共享（a shared vision？），让产品与商业需求和易用性要求相结合等等。让它真正的被使用。
1.2. INTRODUCTION（简介）
All too many projects to improve the usability of a user interface start with a request to create a style guide. To many user-centered designers, a style guide is the documentation of a design – the end of a design process – not a starting point for usability. And yet, we continue to create them, despite that fact that they may do little to address real usability problems or create a common approach to interaction. This paper describes some tactics and techniques for creating style guides that present and organize the appropriate 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 specific application. 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 the first category. These style guides focus on rules for presentation elements, including visual design elements such as color, logos, fonts or icons; page or screen layouts including spacing, justification and common items; and the correct usage for standard controls such as buttons, drop-down selections, radio button or check boxes.
这种规范的焦点在于陈述基本原理，包括可视化控件的标准例如：按钮、下拉列表、单选框以及复选框。
This focus is understandable for style guides written for operating system platform or software languages. These guides must provide basic information for other groups using their tools to create software products, documenting the capabilities of the platform as well as providing guidance to designers. In Table 1, we see that the Java Look and Feel Guidelines and Macintosh Human Interface Guidelines have very similar tables of contents despite having been written in different eras (as computer eras go) and in different companies. The same general pattern is also followed in sections of the ISO 9241 Ergonomic Requirements for Office Work with Visual Display Terminals. Although this standard also includes guidance and requirements for physical interaction as well as two sections on task requirements and usability,most of the sections focus on visual display guidelines for dialogs, information, and user assistance.
这个焦点用于操作系统平台以及软件开发语言。这个规范同样需要提供基本的信息给那些利用这个开发语言创建其他软件的设计人员，描述系统平台的性能作 为设计人员的指导。从表1，我们可以看到“Java Look and Feel Guideline”和“Macintosh Human Interface Guidelines”拥有许多相似的内容。这些常规规范也是遵循“ISO 9241 Ergonomic Requirements for Office Work with Visual Display Terminals”。
| Java Look and Feel Guidelines |
Macintosh Human Interface Guidelines |
| 1 - The Java Look and Feel |
Preface |
| 3 - Design Considerations 1 - Human Interface Principles |
2 - General Design Considerations |
| 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 Style Guides
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 how the user navigates through it as an important design element. They may also include 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 Design Guidelines.
设计规范特别是那些为网站而写的规范，一般给出常规界面，将描述网站的总体界面效果，以及用户如何导航作为主要的元素。当然也包括最基本的焦点，创建可用的界面设计。例如如下的两个网页规范。
| 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 Style GuidesBoth of these examples offer excellent advice for a user-interface designer, but neither offers a definitive set of standards. Instead, they focus on establishing best-practices in design process and solutions for some common design problems.
这两个例子都为用户界面设计师们提供了极好的建议。但是都没有提供了最权威的标准。他们描述的重点都放在提出最好的设计过程，以及为常见的设计问题提供解决方案。
Neither the platform style guide nor the design guide provide a perfect model for creating a corporate application style guide. The first type is too detailed, and, for product teams working in a familiar environment, spends too much time on platform basics. The second is too general and usually fails to meet the need for definitive answers to basic design questions. The IBM Web Design Guidelines even states this explicitly:
无论是“platform style guide”还是“design guide”都没有提供一个创建公共应用程序规范的完美例子。第一个规范太详细，对于一个相同环境中工作的团队将会花费过多的时间在上面。第二个规范则太 常规，通常不能满足为设计中的问题提供最权威的解决方法的要求。IBM的规范中提到：
“We developed these guidelines by studying a cross-section of users and sites, but there may be contexts that we did not examine. If you learn from your user feedback that a different solution works better in your situation than one we offer here, then of course you should do what works best in your situation. To provide the best Web solutions, always use these guidelines 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 and design guides. They need to provide look and feel guidelines to ensure basic consistency (or compatibility) across the applications they serve. In addition to providing reference material, a corporate style guide also serves an educational purpose, illustrating both the conceptual approach to the user interface and, often, a process to ensure that usability is built into the design from the beginning. (A sample table of contents for a corporate application 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 a corporate style guide is created in the first place. Without knowing what problem the style guide is intended to solve, it is impossible to structure the information effectively, or to plan the process of creation, review and implementation. These scenarios illustrate three possible goals:
这给我们带来面对面的需求来了解为什么要在最初就创建公司程序规范。处了了解规范将要解决什么问题，就不可能将信息有效的组合，或如创建计划，回顾和执行。下面是可能一些目的：
Ø A senior manager says, “We need a style guide to ensure that all of our applications share a common look and feel.” The underlying business goal may be usability, but it may also be to save development time by supplying standard answers to difficult design questions. In this scenario, the style guide may be seen as the simplest executive order that can be given to solve a “problem with usability.”
一个高级管理员说：“我们创建一个规范的目的就是让我们的应用程序可以共享一个共同的外观和感觉。”潜在的商业目的就是可用性。通过提供疑难设计问题的解决权威方案来节省开发时间。从这一点看来，规范可以用作为易用性的为题提供简单的解决方案。
Ø A user-centered design group decides to publish a style guide to assist product groups in creating usable interfaces, saying, “We know a lot about what it takes to create a usable design and would like to communicate this to all of the design teams.” In this scenario, the style guide may be seen as a way to create a formal mechanism for enforcing best practices.
个以用户为中心的设计组织决定发布规范来帮助开发团队创建便于使用的用户界面。说到：“我知道许多关于它的信息，它可以开始创建一个可用的设计并且希望与所有的设计团队沟通”在这种情况，规范可能成为一种为强制执行，被用到开发实际中。
Ø A product team may wish to document their own work – “We need a way to keep track of the decisions we have made, and to communicate them within our team.” This goal is usually based on the demands of working in a large 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 goals for 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 these goals seem controversial, or unattainable, so the answer to why style guides don’t always meet their goals does not lie in the goals themselves. The problem lies in the rest of the ISO 9241 definition of usability – that is applies to specific users, in a specified context. In other words, who is expected to use the style guide and what is the cultural environment of the group for whom it is being created? Is the style guide being imposed on an unwilling audience or is it welcomed by the people who will have to use it? Is usability an accepted or novel concept? Do current products have a similar interface or are there many different approaches? Are the teams collegial or competitive (do they even know each other)?
这些目标并不是存在争议或是难以达到的，因此为什么规范与初始目的背道而驰的答案并不在目标（目的）本身，问题出在“ISO 9241”定义的易用性的其他方面——在一个指定的环境中应用于特殊用户。换句话说，谁期望使用规范？将要创建它的人所处的文化环境是什么？规范是否被其 他人自愿的使用或受将要使用他们的人欢迎？易用性是已经被公认的还是只是一个想法？当前的产品是否拥有类似的界面风格或是个不相同？团队是否拥有相同的权 利还是相互竞争的（他们是否互相了解）？
The answers to these questions may not change the information included in the style guide, but the process of creating, gaining approval and maintaining it must adjust to the context. Simply gaining high-level executive sponsorship is not enough. No matter how high the authority, guidelines imposed on an unconvinced audience are often followed just to the letter of the law – if not simply ignored. The worst-case outcome is a user interface design that follows all of the guidelines, but does not really work well. Its designers are likely to blame the style guide for dictating solutions which hampered the ‘brilliant design’ they wanted to create. Whether those designers are forced to live within the guidelines or allowed to make exceptions, the credibility of the work is damaged.
这些问题的大案可能并不能改变规范中所包含的内容，但创建的过程，讨论通过以及改进却依赖于这些问题的答案。简单的说只是创建一个高水准的执行任务 是不够的。无论有多么的权威，对于不是很信服的人来说最多是逐条的执行，如果没有遗漏的话。最糟糕的是，结果遵循规范但实际上并不能正常工作。遇到这种情 况，设计人员有必要将他们的设计向大家阐述。否则，这些设计人员就有可能不按照规范或是被允许制造特许情况，工作的可信度就有可能遭到破坏。
1.1. WHO USES A STYLE GUIDE?（谁使用规范）
In addition to clarifying the business goals for a style guide, it is also important to know who its users will be. The obvious answer is “user interface designers,” but the answer is not that simple. A more detailed analysis would include in the user group a variety of specialists, and would also take into account differences based on the stage of the project,as seen 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 the style guide shifts during the project. It starts out supplying a conceptual overview, but quickly moves into a role as a detailed reference guide. It is this mix of requirements that makes the contents of a style guide so difficult to structure.
对于任何一个用户组，都会在项目开发的过程中更替使用规范。开始与概念上的设计，但快速的移动到一个角色和详细的参考规范。正是这些混合的需求使得规范的结构难以确定。
There are two other user groups whose members often overlap with the groups listed above:
这儿有两组用户会与上述的用户交迭。
Ø Creators of the Style Guide. The group that creates the style guide needs to be able to manage this process. This includes a need to have 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 because this group controls the guide, their needs will take precedence over the needs of the longer-term users.
规范的创建人员。规范的设计人需要能够对过程进行控制。包括有一个便捷的方式来回顾单独的选择以及全局的规范，以及一个察看整体内容的方法。风险是：这类用户控制着规范，他们的需求可能优先于其他的所有人员。
Ø Modifiers of the Style Guide. Any user may also fall into a 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 lip service. This is especially true if the group creating the style guide feels embattled.
规范的修改人员：所有的人员都可以作为要求修改规范或扩充规范。对于这些需求，就需要将规范不断的修改。风险是：这些需求可能会忽视全局或一些无用的服务。当规范的创建人员感到困难重重的时候这种情况就很有可能发生。
1.1. CREATING AN EFFECTIVE STYLE GUIDE（创建一个有效的规范）
To be effective, a style guide must not only contain good guidelines, it must be used and accepted. The process in this case may be as important as the actual product.
要想有效，规范不仅仅包含一个好的指导方针，它同样要被使用并遵循。这个过程与实际的开发过程同样重要。
1.1.1. Process（过程）
It is impossible to prescribe a single process for all of the 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 is nearly complete to begin assembling the design guidelines, you miss the opportunity to have all design stakeholders invested in its creation and content.
如果你想在设计接近结束的时候才开始规范的编写，你将失去将所有的设计应用的机会。
Ø Make the emerging work widely available（？）
This is an important aspect of building broad support. It makes it possible to solicit comments and questions from stakeholders before the guidelines are final, and to incorporate feedback. One way to make the work available is to work in hypertext and make drafts available online, rather than trying to manage a traditional word-processing document. In a politically-sensitive environment, it can be tempting to work in private until the entire style guide is complete, delaying conflicts until ‘later.’ In any situation, there are risks in making the incomplete work available, but like evaluating an early prototype, the advantages usually outweigh those risks. One example is a situation in which a designer bases decisions on a version of a guideline that changes later. Clear identification of the status of the overall guide and each guideline is essential.
创建更为广泛的支持是一个十分重要的方面。能够在编写规范之前获得问题的解决方案。让工作可用的一种方法就是同过链接和可用的东西放到网上，而不是 传统的文字方面的处理过程。在任何情况下，使用尚未完成的工作都是有风险的，但除了评估和早期的原型，他们的优势通常要比这些风险要大。清楚每个规范所处 的状态并且每个规范都是最精华的。
Ø Make the process transparent（让过程透明、清晰）
Include (or make available) meeting minutes or other discussion topics. Provide links from the minutes to standards or guidelines that 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 concepts or tentative decisions (along with any discussions of alternatives) should be included as long as they are clearly identified as ‘in progress.’
包括会议记录或其他的讨论的纲要。提供讨论的内容在规范或标准中对应的链接，从而使处理人员能够遵循标准处理。不要等到任何一个对象已经完成后再添加注释。早先的观念或暂时的决定在一得到解决后就加入到“过程中”。
Ø Make the context visible（让关系可见）
Many style guides are so formal that they are stripped of any context. Many guidelines are written to resolve conflicts; others provide a definitive answer to design problems for which there are many possible solutions. 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 recognize the implications of the work.
许多的规范太正规以至于忽略了一些具体的环境。一些规范是为了解决冲突而写，其他的为可能存在的多种解决方案确定一个最后的方案。让读者能够意识到规范与实际工作的联系是十分重要的。
1.1.1. Structure and Organization（结构和组织）
One of the biggest mistakes is to treat a style guide as a narrative book rather than a reference work. Only the authors and reviewers will read it all the way through. Everyone else will use the style guide to look up the information they need as they need it.
将规范作为一个叙述性的书籍而不是实际工作的参考书是创建规范的最大问题之一。只有在作者和使用者在开发的过程中不断的阅读，其他的人员则在他们需要的时候查阅规范。
Ø Put it online（将其在网络上发布）
Save trees, costs and time by distributing the style guide online. It is always surprising to see how often web teams and others creating online applications assume that their own documentation must be in a word-processing document. Avoid this trap and plan for online access from the beginning.
通过在网络上发布规范能够节省时间和金钱。它常常可以令人惊奇的发现网络上的团队以及其他的在网络上创建程序的人员将规范只是做为一个文字上的记录而已。为了避免这种情况，就必须在一开始的时候就强制联机的访问。
Ø Write for hyperlinks（为文章添加超级链接）
Use hypertext to connect related topics, link to examples and illustrations, and generally make it possible for users to browse. This also allows you to avoid repeating information in more than one place, with the associated maintenance problems which can cause.
使用超级链接关联相关的主题，实例和图表说明，并确保用户可以阅读到这些信息。这样同样可以让你避免相同的内容出现多次。
Ø Design for reference（设计目录）
Organize topics so that the most important information is at the beginning, rather than at the end of a long narrative. Only one topic should 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 between them, you should create three pages, with links from each control to the comparison.
组织标题，让最重要的信息在最初就体现，而不是藏在很长的叙述之最后。让每个超级链接对应一个主题，让每个主题都能够容易的到达。例如：你描述两个控件并且将它们进行比较，你就应该创建3页，每页队以一个控件以及它们的区别。
1.1.2. Contents（内容）
In distilling the language of guidelines down to the essential rules, the richness of the decision-making process is often lost. An important role for the style guide is to help the entire user interface team work better.
在规范中保留最本质的条款，但设计的过程常常没有包含进去。规范的一个很重要的任务是帮助所有的界面设计团队更好的工作。
Ø Guide design decisions（指导设计的决定）
Style guides are usually effective in documenting simple rules like colors and fonts. The problem is that few of the important design decisions can be based on simple rules; more often “it depends.” Making the guidelines helpful to designers means creating comparison tables between options (for example, showing strengths and weaknesses of lists, trees and grid controls) or providing other information to help them make good design decisions.
规范在定义简单的规则如颜色字体的时候通常是有效的。但问题是很少能够基于简单的规则来处理重要设计的决定。通常情况下它依赖于创建一个更有效的规 范，提供不同方案之间的对比（例如：描述list，tree，改日的controls 这些控件的优点缺点）或提供其他的有助于帮助做出有效的设计决定的信息。
Ø Give design elements ‘mission statements’（描述设计元素的任务）
It can often be difficult to communicate the essence of a design element or interaction style, especially when guidelines are not clear-cut. Rather than bury this information in the formal (“must” and “shall”) language of standards, include a simple mission statement to explain how the element enhances the user experience. These mission statements may be the first step in creating a formal guideline, acting as a checkpoint to ensure that everyone agrees on the basic issues. In some cases, it may not be possible to create a more detailed guideline. In either case, the mission statement serves to document the intent of any later work and can be used as a test against which 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, demographics or 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 a guideline, include it. This not only provides a clear user-centered basis for any decisions, but can also be helpful in determining when a guideline needs to be re-considered or expanded.
在创建规范的时候将用户分析考虑进去。当易用性测试或其他的用户分析与规范不一致的时候，将这些信息添加到规范中。这不仅仅为任何的决定提供一个更为清晰的依据，而且也对是否对规范进行重新审议或扩充起到帮助的作用。
1.1.3. CASE STUDIES（情况分析）
Two examples from Cognetics’ experience illustrate the value 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 a group of UI designers create an interface for a new modular product that would share a common look and feel and be very usable. Each designer worked in a small crossfunctional team on one of the modules. Weekly design meetings served as a forum to compare approaches and resolve any issues. The group created both design guidelines and programming requirements. As decisions were made in these meetings, the information was posted to a web site for review. Topics ranged from visual and layout standards to guidance on design approaches. The style guide functioned both as a collaboration and a publication tool, serving both the 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 design guidelines for a larger group of product and content developers. Both the core group and the product teams were spread out geographically, making collaboration difficult. The style guide became a primary communication tool, with one team member assembling all of the content for the team. Easy access to the growing site also enabled the product designers to review the guidelines and ensure that the work would meet their requirements.
在这个工程中，一个小的核心设计团队为一个大的项目组，开发人员创建规范。开发团队和项目组不在一个地方工作，协作比较困难。规范则变成了主要的交流工具，当一个团队成员作好了所有的内容后很容易的根据规范来查看工作是否与他们的需求相吻合。
Although these two projects differed in terms of organization, and the development and design processes there were many commonalties:
虽然这两个项目是不同组织的团队，但在开发和设计的过程中却有很多相似之处：
Ø Initial attempts to create visual design guidelines quickly revealed dependencies on the design for of user interaction and navigation. 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 that needed to be reconciled. Providing a forum for discussion with concrete examples helped move the conversation from “opinion wars” to a debate on the issues.
两种情况，都有许多设计问题需要解决，针对具体的例子举行讨论，将会议从提出意见到讨论实际的问题。
Ø By using the style guide as a tool during the creation of the 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 there were 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 access the sites on an ongoing basis. In one case, there was a push to add more related information to the style guide site because it was a tool which was already being used.
包含一些评论性的信息给开发人员，例如：图片库以及样式表的实例。另一方面，将会有更多的相关信息添加到规范中，因为规范被当作一个工具使用。
Ø The inclusion of design rationale with visual and interaction rules helped new designers understand the reasoning behind the guidelines. This also provided a good starting point for discussion when a decision 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 all live with common guidelines. As a document, a style guide houses the details of the design that must be followed. As a process, the construction of the style guide can be used to create a shared design vision for the look and feel it documents. Our experience at Cognetics has been that when the style guide is the central location for all design material and its creation is part of the process, the guide itself can help build consensus among the team.
断然的作出设计的决定是比较困难的，特别是当多个来自于不同项目的设计人员必须实行相同的规范时。作为一个文档，规范收藏的设计细节必须被执行。作 为一个过程，构造规范能被用于创建一个描述外观和感觉的共享的设计文档。我们的经验是当规范成为设计人员的日常参考并在贯穿于整个开发过程，那么规范本身 就能够帮助一个团队创建一个一致的意见。
1.1. SAMPLE TABLE OF CONTENTS FOR A CORPORATE APPLICATION STYLE GUIDE（规范范例）
1.1.1. Introduction
Includes all front-matter and preface material, including the scope, authors, review and maintenance process and any terminology that must 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 well as any user analysis. Short general descriptions of designs that implement these 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 or more specific. Related documents should include cross-references to any other corporate guidelines which affect the design or development of the user interface, including localization, corporate identity, or developer information, 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 in which the guide will be used. This is an appropriate place to put information about a general user-centered design process (or specific techniques used). This section may also include links to meeting minutes, or to other related processes 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 and metaphors used. It is more specific than the UCD Principles, documenting an approach to the user interface to be used in all applications included in the scope. In addition, this section may contain any general guidelines on performance or task orientation that must be considered in designing the interface architecture. It also includes an overview of how the interface will provide 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 site structure, the guidelines for it are included here. This may include the function of anchor pages such as the home page or main menu, and navigation methods 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 of a page or window. It includes descriptions of the layout templates for each function or type of page, and should relate these page types to the overall UI architecture. It may also include guidelines for the use of specific page structures 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 guidelines for all controls or other granular design elements.Depending on the development environment, this section may contain only general references or very specific display and interaction specifications. This section is also a place for aids to the designer such as control comparison charts. In some cases it is possible to include samples of each control in action so the designer can exercise it to see 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 interactions with the interface. It may include summaries of control interactions, guidelines for interface behavior or other topics specific to the product environment.
Ø Keyboard Shortcuts
Ø Mouse, Joystick, Tablet or Other Pointers
1.1.9. User Assistance and Text
This section covers all text and other user assistance associated with the user interface, including labels, prompts, help text, messages, tooltips and accessible alternative text. Writing guidelines may be provided in a single section, or included with each type of text in the interface. If there are guidelines for terminology, a glossary of terms to use should 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 common functions, which are typically a group of controls, interactions or text. These may be stand-alone user interfaces such as a search function, or may be a complex element that is used in many functions. The section documents these functions, 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 reference guide, with detailed descriptions of each element and links to resources such as 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 audio or other multimedia elements.
Ø Using Multimedia Elements
Ø Audio
Ø Animation
Ø Video
总结： GUIDE LINE 编写的注意事项：
- 通过对比列表，写明各种方案各自的优缺点，让设计人员更好的决定采用何种方案
- 可以通过一些简单的例子说明规范将如何改善用户体验
- 在写规范的时候将用户的特性考虑进去
- 提出UI设计过程
如何让规范发挥效用：
- 尽早开始使用start early
- 让规范更具广泛性make the emerging style guide widely available
- 让规范在使用的过程中不断的修正和扩充 plan to maintain and extend the style guide over time