文章链接：《The Design System Encyclopedia》

我想说，这篇文章太丰富了，逐渐开始理解“程序员的知识是有边界的”这句话，因为时间有限，我们不可能把所有的原理和知识都弄清楚，只有当有需求是才会深入理解它。

根据这篇文章，给了做一整套 UI 组件库的方向。英文原文通读了一篇，在这里把整体结构贴在这里。

一、Visual Language

The visual language is how your product, brand, and system look and feel visually.

1. Color Definitions

  • Brand colors: primary, secondary, tertiary
  • State colors: Error, warning, success, info
  • UI colors: black, white, grey

2. Grids & Spacing

  • Define: column widths, gutter widths, margins, padding, vertical rhythm

3. Iconography

  • Feature icons: Home, Calendar, Profile, etc.
  • Action icons: add, delete, edit, etc.
  • UI icons: arrows, flags, checks, etc.

4. Illustrations

  • Define: illustration style, subject, color usage

5. Motion & Animation

  • Define: style, complexity, speed, easing, sound effects, music, format (gif/svg/mov)

6. Photography

  • Define: photo style, subject, color treatment, size, crop, angle

7. Typography Definitions

  • Define: size, weight, tracking, leading, line-height, color

二、UI Tokens

UI tokens are the most basic building blocks of a digital product. In the book Atomic Design by Brad Frost, UI tokens are the atoms–the foundational blocks–which comprise our interface designs.

1. Avatar

An avatar is a visual representation of a user.

2. Badges

Badges are small, visual status descriptors for various interface elements.

3. Buttons

Buttons execute various actions in the system.

4. Camera Upload

Camera upload enables the user to take and upload photos directly from their device camera. It is required by law to ask the user’s permission before accessing their camera.

5. Checkboxes

Checkboxes let users make a binary choice between two distinct options. Groups of checkboxes may be used when the user can make more than one selection from a list of homogenous (similar) options.

6. Chips

Chips are small, visual, interactive descriptors for interface elements.

7. Color Picker

A color picker allows the user to select a color to be applied to a system object.

8. File Upload

A file uploader allows the user to upload external files into the product. Depending on the uploader, files may come from the user’s computer or an online cloud storage service like Dropbox.

9. Image

Images can be large or small, and cropped in different ways to fit the space.

10. Ordered List

Ordered lists are used to represent items that must be viewed or completed in a specific sequence.

11. Radio Buttons

Radio buttons allow the user to choose a single option from a set of mutually exclusive options.

12. Range Slider

A range slider is an interactive control that allows the user to slide a handle along a predetermined scale to set a numeric input.

13. Switches

A switch is a binary, skeuomorphic control used to activate or inactivate a setting.

14. Text Fields

Text fields receive, store, and present alphanumeric content.

15. Thumbnail

A thumbnail is a smaller version of a large image.

16. Unordered List

Unordered lists are used to organize items which do not need to be viewed or completed in a specific sequence.

三、Interaction Patterns

1. App Onboarding

Onboarding is a technique for teaching the user about your product at the moment they begin using it.

2. Authentication

Authentication helps verify that the user is who they claim to be. Verification can be done via a third party tool or by asking personally-identifying information.

3. Autocomplete

Autocomplete is a text field enhancement which predicts the rest of a word the user is typing. Predictions generally appear in a dropdown menu below the text box, and can be navigated using keyboard arrows.

4. Create an Object

The method by which objects are added to the system by the user. Object creation can be simple or advanced depending on the complexity of the object.

5. Delete an Object

The method by which objects are permanently removed from the system by the user. Depending on the complexity of the object, deletion may be immediate, or protected by a confirmation step.

6. Drag-and-Drop

Drag-and-drop allows the user to click (or tap) and drag an object from one place to another. It is typically used for file uploading, but can also be used in list builders and to reorder items in a list.

7. Feature Onboarding

Feature onboarding is a technique for teaching the user about a specific feature at the moment they first encounter it. This in-the-moment teaching can be informational or interactive.

8. Forgot Username/Password

The forgot username/password interaction enables users to recover credentials which they cannot remember. Recovery generally happens via email, security questions, or SMS.

9. Form

A form includes one or more components such as text fields, check boxes, or drop-downs, and is used to collect input from the user. Once completed and validated, this data is submitted and/or saved to the system.

10. Invite

The invite flow enables users to grant system access to others who lack the appropriate rights or permissions to do so on their own.

11. Log In

The log in flow validates the identity of a user with at least two credentials — typically an email or username and a password.

12. Onboarding Spotlight

Spotlights are an onboarding technique for drawing focused attention to specific portions of the screen using a darkened scrim and a “spotlight”. Spotlight onboarding steps can be mandatory or optional.

13. Permissions

Permissions grant users certain abilities or access within an app.

14. Reset Password

The reset password flow enables a user to update forgotten credentials after verifying their identity.

15. Settings

Settings enable users to configure specific details for how the system operates.

16. Setup Assistant

A setup assistant guides the user through specific steps, sequenced or not, in order to teach them how to do specific tasks.

17. Share

Sharing grants users without access the ability to see and/or interact with certain objects in the system. The act of sharing can occur via email, hyperlink, or SMS.

18. Sign Up

Sign up is the method by which users present and verify their identity in order to register or enlist for a product. These credentials are used to validate the identity of a user each time they attempt to access the system.

19. Upgrade

Upgrading is the act of moving from one package of features to another, typically at a greater expense.

20. Walkthrough

A walkthrough is a specific sequence of guided steps whereby a user is ushered through successive tasks in order to complete an objective.

21.Wizard

A wizard is a set of tasks to be completed by the user, but in no particular order.

四、UI Components

Components are complex UI elements consisting of multiple UI tokens. They are the molecules of atomic design, as they are comprised of several atoms.

1. Action Bar

An action bar is a group of tools for manipulating objects or performing activities.

2. Activity Feed

An activity feed is a chronological record of system events or user actions.

3. Avatar Group

An avatar group is a visual representation of multiple users.

4. Breadcrumbs

Breadcrumbs are a visual record of a user’s location in a hierarchy of objects.

5. Calendar

A calendar is a visual arrangement of time, typically represented in days, weeks, months, or years.

6. Card

Cards are visually-contained groups of similar content and/or actions about a single object or subject.

7. Carousel

A carousel is a series of content items, displayed one at a time.

8. Chat (live)

Chat enables synchronous or asynchronous communication between two users, or one user and a scripted chat engine.

9. Comments

Comments are written remarks about a particular system object. Comments are often combined with a rating or score.

10. Cookie Notification

A cookie notification is a visual alert informing the user that a website has stored a small piece of data on their computer so that it can remember important information about them later for things such as advertising.

11. Data Table

A data table is a tabular collection of like-objects which can be searched, filtered, sorted, and/or manipulated by the user.

12. Date Picker

A date picker is an interface control which enables the user to select a date visually using a small calendar.

13. Dialog

A dialog is a small, floating window that communicates information to the user, and/or prompts them for a response.

14. Drawer/Accordion

An accordion is a vertical or horizontal list of items which can be expanded or collapsed to show or hide additional information.

15. Filters

Filters are groups of attributes which can be toggled on or off to show or hide objects with those matching attributes.

16. Hint

A hint is a graphical icon, usually a question mark or a lower case “I”, which displays additional information when the user pauses the mouse cursor on top of it.

17. List Builder

A list builder is a two-sided control element which allows a user to move list items back and forth between two lists, with one list representing selected items, and the other representing unselected items.

18. Loading Spinner

A loading spinner is a graphical indicator used to signify when an operation is being performed, but isn’t yet finished. It is meant to signify that the system has received the user’s request, but has not yet finished processing it.

19. Map

A map is a graphical representation of geospatial information.

20. Menu/Dropdown

A menu (or dropdown) is a list of options or actions from which the user can choose. When a menu is closed, the options are hidden from view.

21. Modal

A dialog is a small, floating window that communicates information and collections input from the user.

22. Notification Banner

A notification banner is a thin, horizontal bar or box containing important information, usually appearing at or near the top of an interface for visibility.

23. Notification Snackbar

A snackbar is a thin, horizontal bar or box containing important information, usually appearing briefly at the bottom-center of an interface, before disappearing. A snackbar may additionally contain an action that can be triggered during the period in which it is visible.

24. Notification Toast

A toast notification is a thin, horizontal bar or box containing important information and/or actions, usually appearing at the bottom- or top-right of the interface. A toast notification is named as such due to how it animates into and out of the viewport.

25. Notification Menu

A notification menu is an activity feed within a dropdown.

26. Page Header

  • Considerations: Icon, page title, subtitle, metadata, breadcrumbs, team members
  • Tools & actions: primary, secondary, overflow

27. Page Tabs

Tabs can help divide and organize detailed content on a page. Page tabs generally appear as plain text directly on the background with the active tab underlined.

28. Pagination

Pagination is a technique for dividing a list of objects into multiple pages. This eases the load on the database, and often returns results faster than infinite scroll.

29. Paper Tabs

Tabs can help divide and organize detailed content on a page. Paper tabs mimic the appearance of tabs in a binder or atop a manilla folder.

30. Popover

Popovers combine the contextual convenience of a tooltip with the content detail of a dialog box. Popovers are generally (but not always) triggered by a click, and appear over or near the triggering item. Popovers may be purely informational, or provide interactive controls.

31. Pre-formatted Text (Code)

Pre-formatted text tells the browser to display text exactly as it is written, instead of rendering it based on browser rules. Pre-formatted text is generally rendered in a monospaced typeface for increased readability.

32. Primary Navigation Menu

The primary navigation menu divides an app into unique functional areas.

33. Progress Bar

A progress bar is a visual status indicator of a determinate or indeterminate process. They are used to let the user know the system is successfully performing an action when a process may take a long time.

34. Ratings

A rating is a visual representation of rank or grade. Rating systems may vary in step quantity, which is a key factor in understanding how a user rates something, and what their rating means.

35. Reviews

A review is a formalized, written assessment or examination of something with the possible intention of influencing others.

36. Rich Text Editor

A rich text editor, sometimes called a WYSIWYG (“what you see is what you get”) editor, is an interface for visually altering the appearance of text.

37. Search

Search is a function or process whereby the user attempts to locate specific objects by inputting relevant, related words or phrases.

38. Sidebar

A sidebar is a vertical menu used for holding navigational elements, contextual information, or useful tools.

39. Sub-navigation Menu

A sub-navigation menu is a set of child pages or functional areas related to a shared parent.

40. Table

A table is list of homogenous items or objects. Tables are useful for presenting detailed information in an easy-to-consume layout.

41. Testimonial

A testimonial is written or spoken statement praising the virtue of something.

42. Timestamp

A timestamp is a digital record of the date and/or time of an event.

43. Tips

Tips are contextual popovers used to guide the user through a specific task or introduce a new feature.

44. Toolbar

A toolbar is a collection of controls and actions used to manipulate data on a page.

45. Tooltips

A tooltip is a snippet of relevant information that appears while hovering over a specific trigger point.

46. Tree

A tree is a visual hierarchy of information, typically used for files and folders.

47. Video Player

A video player displays multimedia content with controls for manipulating playback.

五、Page Templates

Page templates are layouts for common pages. Despite the variety of digital products, all pages tend to boil down to a small set of general layouts. While this isn’t a comprehensive list, these cover most use cases.

1. Article

An article is a piece of writing and mixed media about a specific topic.

2. Cart

A cart is where user-selected items are stored before checkout.

3. Checkout

Checkout is the process by which items are purchased. Checkout requires the user to specify shipping information (when relevant), payment information, and other related details.

4. Dashboard

A dashboard is the first screen a user encounters when logging into a system. Dashboards present textual and graphical summaries of important information which a user can or should act upon.

5. Forgot Password

The forgot password page collects an identifying piece of information from the user in order to send them instructions for resetting their password.

6. Getting Started

A getting started page is a form of onboarding which tasks the user with completing a number of steps in order to prime the system with information, or learn how it works.

7. Kanban

A kanban board is an interactive visualization of information grouped by a unique attribute (like status). Information snippets are presented on cards which can be moved from one column (or status) to the next.

8. List

A list is used for presenting simple, actionable data objects. Lists are simpler than tables, and typically don’t include tools like filtering and sorting.

9. Log In

The log in page validates the identity of a user with at least two credentials — typically an email or username and a password.

10. Media Lightbox

A media lightbox draws focus to a single piece of media by enlarging it and obscuring the interface with a scrim.

11. Notification Center

A notification center is and audit trail of all system and user notifications.

12. Object Details

An object detail modal or page visually organizes object attributes in a consumable layout.

13. Order Summary

An order summary provides the user with confirmation that their purchase was processed successfully, and summarizes what they bought.

14. Payment

A payment page is a secure portal for collecting tender details from the user. This page may also include fields for discounts and/or coupon codes.

15. Product Details

A product detail modal or page visually organizes product attributes in a consumable layout to aid users in purchasing decisions.

16. Reset Password

The reset password page enables a user to update forgotten credentials according to specific password requirements.

17. Search Results

A search results page includes the objects located which match the user-specified search criteria.

18. Settings

Settings are where the user can configure various details about how the system can be accessed, how it operates, and/or how it looks.

19. Sign Up

The sign up page is where users present and verify their identity in order to register or enlist for a product.

20. Split View

A split view is a vertically- or horizontally-divided interface for co-displaying related information.

21. User Profile

The user profile is where access credentials and personal information about a user are stored.

六、Documentation

Documentation is written guidelines and annotations of a process or requirement. They are critical in a design system for chronicling important decisions, conditions, and necessities.

1. Accessibility Guidelines

Accessibility guidelines specify how a product should be designed and written to accommodate users of diverse physical and cognitive abilities.

2. Branding Guidelines

Branding guidelines specify the limitations of how a brand can and should be expressed in various contexts.

3. Coding Standards

Coding standards help developers maintain a consistent, organized, and coherent code base to ensure maximum team efficiency.

4. Downloadable Assets

Downloadable assets are centralized and universally-available resources enabling interdisciplinary collaboration and consistency.

5. Editorial Guidelines

Editorial guidelines are a set of writing rules to ensure brand consistency in voice, tone, and style so that content is consistent across all mediums and channels.

6. Employee Onboarding

An employee onboarding process is the set of procedures necessary for welcoming, training, and enabling a new hire.

7. Governance Process

A governance process is a quality control exercise to ensure consistent usage, growth, and maintenance of a design system, brand identity, or style guide.

8. Personas

A persona is a set of characteristics and behaviors defining a particular type or profile of user, stakeholder, or buyer.

9. Research Guidelines

User research guidelines specify the methods and techniques for conducting, collecting, and analyzing research.

10. Team Structure

A team structure diagram illustrates the hierarchical organization of a team. This diagram can serve as a reference for decision-making, responsibilities, and project ownership.

七、Visualizations

Visualizations are visual techniques for displaying and representing data. While they should never be used as a crutch, visualizations are highly effective for giving meaning to large amounts of data.
It’s critical to understand the difference between visualizations and when to use them. Using the wrong visualization can lead to misunderstanding, misdirection, or erroneous action.

1. Activity Gauge

Used to show progress toward multiple, recurring goals.

2. Area

Used when data points are highly variable over time. If data points have little variance, consider using a line chart instead.

3. Area Range

Used to show the delta or difference between two values.

4. Area Range + Trendline

Used to show how the delta or difference between two values changes over time.

5。 Bar

Use to present categorical data with rectangular bars with heights or lengths proportional to the values that they represent. Most commonly used when sorted by descending value.

6. Bell Curve

Used to illustrate the distribution of values across a population.

7. Bubble

Used when data has three dimensions, each containing a set of values. The first dimension represents the y-axis value, the second value represents the x-axis value, and the third dimension represents the size of the bubble.

8. Bullet Graph

Used for comparing the performance of a primary measure to one or more other measures. A bullet graph can be useful replacement for a gauge or meter.

9. Butterfly

Used to represent and compare two data series side-by-side.

10. Candlestick Chart

Used by stock traders to determine possible price movement based on past patterns. A candlestick chart displays four price points — open, close, high, and low — across a specified period of time.

11. Chord Dependency Wheel

Used to show relationships between items.

12. Choropleth Map

Used to represent an aggregate summary of a geographic characteristic within an area.

13. Column

Used to present categorical data with rectangular bars with heights or lengths proportional to the values that they represent.

14. Column Range

Used to show the range of a particular value in a category.

15. Comparative Bar

Used to compare two sets of data on the same axis.

16. Directed Graph

Used to represent asymmetrical, directional relationships between objects (called nodes).

17. Donut

Used to illustrate numerical percentage, where the arc length of each slice is proportional to the quantity it represents. The area in the center can be used to show additional information.

18. Euler Diagram

Used to illustrate the relationships between sets or groups, like explaining complex hierarchies and overlapping definitions.

19. Funnel Chart

Used to represent values at successive stages of a process.

20. Gantt

Used for displaying overlapping tasks over time.

21. Gauge

Used for comparing values between a small number of variables, either with multiple needles on the same gauge, or multiple gauges.

22. Grouped Bar

Used for showing multi-category change over time.

23. Grouped Column

Used to compare multiple sets of data.

24. Heat Map

Used to show the magnitude of a phenomenon as color in two dimensions.

25. Hierarchy

Used to portray the elements of a system, organization, or concept from its highest position to the lowest. Connecting lines explain the relationship between different objects.

26. Histogram

Used to represent an approximate representation of the distribution of numerical data.

27. Honeycomb / Hexbin

Used in place of a choropleth map to avoid area bias, since each region is represented by a hexagon of equal size.

28. Interactive Map

Used to enable the exploration of a geographic area.

29. Line

Used to track changes over short and long periods of time. When smaller changes exist, line graphs are better to use than bar graphs. Line graphs can also be used to compare changes over the same period of time for more than one group.

30. Multi-Area

Used to display multiple categories when their data points are highly variable over time.

31. Multi-Line

Used to track changes over time for two or more categories.

32. Packed Bubble

Used to compare values of multivariate data. The positioning of the bubbles carries no meaning; the chart is optimized for compactness.

33. Percentage Area

Used to display the proportions of various categories over time, and how each contributes to the cumulative total.

34. Percentage Bar

Used to represent percentages instead of values.

35. Percentage Column

Used to represent percentages instead of values.

36. Pie

Used to illustrate numerical percentage, where the arc length of each slice is proportional to the quantity it represents.

37. Radar Chart

Used to display multivariate data in the form of a two-dimensional chart of three or more quantitative variables, represented on axes starting from the same point.

38. Radial Bar

Used to present a bar chart in a polar coordinate system.

39. Sankey Diagram

Used to display flows and their quantities in proportion to one another, using the width of arrows or lines to show their magnitudes.

40. Scatter Plot

Used to display values in a large set of data with two variables. Scatter plots are useful for visualizing clustering, trending, and movement over time.

41. Semicircle Donut

Used to more concisely display donut chart data.

42. Sparkline

Used to present the general shape of the variation in some measurement when space is limited.

43. Spiderweb

Used to display multivariate data in the form of a two-dimensional chart of three or more quantitative variables, represented on axes starting from the same point.

44. Split Packed Bubble

Used to compare values of multivariate data. Bubbles are packed and organized into their respective categories.

45. Stacked Area

Used to display cumulative totals of multiple categories over time.

46. Stacked Bar

Used to show the parts of multiple totals.

47. Stacked Column

Used to show the parts of multiple totals, and how they change over time.

48. Streamgraph

Used to display high-volume datasets and discover trends and patterns over time across a wide range of categories.

49. Synchronized

Used to compare multiple data points over time.

50. Timeline

Used to visualize time lapses between events, durations), and the simultaneity or overlap of spans and events.

51. Tree Map

Used to display hierarchical data using nested rectangles.

52. Upset Plot

Used to visualize intersections of multiple sets of data, as in a Venn diagram.

53. Venn Diagram

Used to see the relationships between two or three sets of items.

54. Waterfall Chart

Used for displaying sequential activities over time.

55. Windrose

Used by meteorologists to give a succinct view of how wind speed and direction are distributed at a particular location.

56. Word Cloud

Used to illustrate the importance, weight, or occurrence of various words.

「浪里淘沙的小法师」