preface

With the continuous development of Internet design, the improvement of design efficiency promotes the transformation of design thinking. We not only need to complete the design of business requirements, but also need to strengthen the focus on project collaboration and experience on the basis of focusing on visual performance, and gradually form a componentized thinking to do design. We don’t design interfaces, we design the elements that make up interfaces.

So what is a component?

Components are basic modules with standard specifications and reusable scenarios decoupled from design elements. Literally: a “group” is a combination of design elements, and a “piece” is made up of different components. When we componentize the different structures in the page, and then make the different components into the page, when we replace the elements in the component content, the elements in the page are replaced. Atomic design is the core idea of componentized design.

What is the relationship between components and design specifications? After all, they all have the same colors, ICONS, text, pop-ups, etc. I think it should be complementary to each other, both are relatively independent and contain each other, such as the parts in the factory package, punctuated with screw, nut, production assembly instructions, detailed design specification is analogy a paper product assembly instructions, component library are more like a pile of parts + instruction manual, parts assembly is in accordance with the production assembly manual assembly. So our component library is also generated based on the current design specification, and we will produce new components according to the design specification in the future.

Atomic theory

When it comes to UI component libraries, almost every article talks about atomic theory. In chemistry, atoms are the smallest particles in chemical changes. Objects are made up of atoms, and atoms are combined to form molecules, which are combined to form organic matter, and eventually form everything in the universe. In 2013, front-end engineer Brad Forst applied this theory to interface design, forming a design system consisting of five levels: atom, molecule, organization, template and page.

Atomic design is about taking the smallest design elements and piecing them together to form components. For example, a page is composed of navigation, banner, list, bottom navigation and other modules. We can design the navigation, banner, bottom navigation, list and other modules into a single component, and then splicing the components of the four modules into a page to improve the design efficiency. ** This is the fundamental theory of atomic design. ** Based on this, we built a complete and huge component system.

atomic

The atom is the smallest particle of chemical change and the smallest unit in the design system. Atoms include single elements such as color palette, dividing line, font, title, paragraph text and so on. One characteristic of these elements is that the smallest element cannot be cut, as shown in the picture below: search box, search icon, search text, are all atoms.

molecular

Atoms are arranged and combined to form molecules. The interface is mostly in the form of components, such as navigation bar, TAB bar, search box, button, popup, banner, etc.

organization

The arrangement and combination of atoms and molecules constitute the organization, which exists mostly in the form of “modules” in the interface, such as commodity list, content card, entry module, waterfall flow diagram, etc.

template

Atoms, molecules and organizations are arranged and combined to form the template, which is also called “prototype diagram” in the interface, for example: e-commerce display prototype, external selling point single prototype, store details prototype, merchant management prototype, commodity classification, etc.

page

The template is filled with real content (pictures, text, etc.) to form a page, which is often called “visual draft”, such as: commodity list page, external selling point single page, education course page, information management page, etc.

Advantages of componentization

Unity: ensure visual and interactive

  • The business of different modules of the whole product is used in accordance with unified specifications to improve the visual interaction unity of the whole product, reduce development styles and improve development efficiency. For example, the calendar control should exist in a form in the whole product. If it is left and right scrolling, up and down scrolling, and a drop-down list, it will be more messy;
  • Avoid different designers creating different styles of component controls for the same function;
  • Unified interaction design rules, reduce user operation confusion, improve product experience;
  • Unified visual style, ensure unified product tonality. The designer should find the best solution, make it into components and keep it uniform everywhere;

High efficiency: improve design efficiency

  • A set of design specification derived two sets of component library, namely Sketch UI component library and Auxre component library. The Sketch UI component is object-oriented for visual designers and the Auxre Component library is object-oriented for interaction designers and product managers. Designers and product managers drag components to build interfaces to save time and improve work efficiency;
  • Reduce and shorten the design component control time, do not need to redefine the same functional component, improve the design efficiency, put more time on the process experience and design promotion;
  • Create components upfront with component logic in mind and each state in mind. Quickly use components to build complete pages, replace atomic and molecular elements, improve design efficiency;

Flexible:

  • When creating components, set up intelligent layout, which can be flexible to manually change the width and height of components, or components according to the text content adaptive;

Reuse: facilitates subsequent modification and continuation

  • Increase module reuse, different designers for the same module design, can use components directly reuse; Components must be frequently reused. By establishing a complete component library, components can be directly modified according to the change of business scenarios and reused in the page.

Collaboration: facilitate collaboration between different designers

  • There is no need to worry about the increase or decrease of team members, and new people can quickly get familiar with the project through the design specification and component library.

Create components

(1) Component naming

The naming logic of components follows parent-child naming (for example 🌰 : Mrs. Grandpa/great-grandpa/grandpa/Dad/son/grandson 😄). When naming in Sketch, the hierarchy is represented by the/symbol, which sketch recognizes and automatically generates the corresponding architecture.

Naming example: XX page/XX category/XX module/XX component/component status

Of course, it is recommended that we name the components in English

(ii) Component classification

Native components, as the name suggests, are the types of components that come with the system itself, such as buttons, navigation, pop-ups, and so on.

The extension component is based on the original component foundation, for function expansion, for example, in the navigation bar drop-down operation, add operation items in the popup window and so on.

Custom components, the so-called custom components are not in the original system, we create a unique component based on product characteristics.

Package component refers to the complex component that combines and encapsulates a series of scene pages that often appear in the product.

Of these four concepts, native components and extension components are system (official Android & iOS specification) oriented types, so we refer to them collectively as base components; Such components exist in most apps, such as navigation bars, toolbars, pop-ups, toasts, buttons, etc., which are basic components.

Custom components and encapsulated components, with strong product-function orientation, are called property components. Such components are strongly associated with product functions, such as calendar components commonly used in efficiency management apps, player components commonly used in video apps, book list components in reading apps, and market trends components in financial apps.

By making such a distinction, we can have a fuller understanding of components. There are also large differences in the construction of components of the two categories. The distinction helps us better understand, build, and invoke components. With a clear definition, we can define the types of component libraries, plan reasonably, and carry out the early work of building effectively.

(3) Component responsiveness

Let’s take a look at some of the Settings for responsive layouts: fixed sidings, fixed dimensions, fixed widths, heights, and some layouts: left to right, right to left, center, etc.

When creating a component, you can optionally assign attributes in different directions. After assigning attributes to the component, you can increase or decrease the width and height of the component according to the orientation. There can be only one attribute or no attribute.

As shown in the following example, the head picture and product information can be arranged in left-aligned mode, and the buttons on the right can be arranged in right-to-left mode.

(4) Component application

Once we’ve created the Sketch deployment for the component library, we need to put it to work.

We can import our newly deployed Sketch via Sketch/Preferences/Add Component libraries. You can then find the corresponding file in Sketch/Place/Component and use it directly.

How do you do cloud synchronization?

The first thing we need to do is log in to the Sketch Cloud account. After logging in to the Sketch Cloud account, we need to upload the component library source file to the Cloud document (Sketch > Document > Open Cloud Document > New Cloud Document). Here we can also click on the uploaded Cloud component library document to edit and update, and then remember to add colleagues in sketch Cloud. In this way, all design colleagues can update and download the new component library directly in Sketch (generally, there is a “red notification” in the upper right corner of Sketch after cloud component update, so you can directly click on the update to download).

Frame thinking as components

In the last part of this article we talked about componentization of Sketch, now let’s talk about component design content framing.

What is framing?

Framing design, that is, designing in a box. All HTML elements on the front-end page can be regarded as boxes, that is, the whole HTML page is composed of countless boxes combined with specific layout, each box includes content, padding, border and margin. When we do interface design, You can also follow the box model.

The case for framing design

Here are a few examples of how to frame a page.

Frame a calendar component

The diagram below:

Before we want to do a following calendar remind related page, we need to analyze the composition of the page, the calendar needs to have a header (date), the page up and down button, date, week, status (today, events, reminders, selected calendar) and so on. To avoid confusion of thinking, you can list all states in mind map first, and then list components of various states in Sketch.

Next, we can make the page elements into components based on the box model.

  • The column of year has left and right arrows and year, we can put these three elements in a rectangular box, make a rectangular box model;

  • The date and week in the calendar can be placed in rectangular or square boxes according to their own needs to make different states of the date. Ensuring the same size makes it easy for us to do component replacements;

  • Similarly, you can frame it in a box.

    In the picture below, the molecular components of the calendar are framed on the left. On the right is a calendar control that combines molecular components.

By comparison, on the left is the UI that is not framed, on the right is the UI that is framed, obviously the page on the right is orderly.

Do a calendar component, we can find the current component in the current document, select any molecular elements to replace, improve the design efficiency.

Use frame to make a list of financial products

As shown in the picture below, the left side is the financial list component without framing, and the right side is the framed list. The right side is more orderly than the left side.

Note that:

  • When buttons do components, in the layout constraints to choose a good layout from left to right, so that when filling text button width can automatically expand according to the text;
  • When the text characters are uncertain, the maximum text width should be standardized: for example, the maximum text width and the fixed distance from the text on the right should be standardized.

Excellent component library recommendation

IBM Design Component library www.ibm.com/design/lang…

Ant Financial component library Ant. Design/index-CN

Audi Component Library www.audi.com/ci/en/guide…

Apple Apple specification and design components developer.apple.com/design/huma…

Google design components and specifications material. IO /

Original address yolkpie.net/2020/11/04/…