When the product develops steadily, the product positioning and brand image have entered a stable state, more and more people participate in the design, and the problem of the unity and efficiency of the design has gradually emerged. Therefore, in order to ensure the unity of platform design, improve team work efficiency and polish detailed experience, we need to define and sort out design specifications.

Define specification content

Design specifications are a key step in UI design. The well-known large factories basically have a complete set of their own standard system. When sorting out the design specifications, we take the large platform standard system as a reference, add and delete according to the product’s own situation, and sort out the required standard content, which can effectively avoid the omission of the standard content.

Color specification

Color is the most important element in design, and the use and collocation of color determine the sense of quality of design. In UI design, the use of color standards mainly lies in: brand color, text color, interface color (background color, wire frame color) and so on.

The font specification

Different fonts have different temperament, and different scenes bring different feelings. Therefore, it is necessary to consider the design effect of the font when designing, and then indicate it in the design specification.

Icon in the specification

In THE UI interface, the graphics with the nature of identification are ICONS. As an important design module in UI design, ICONS may exist on every page of the product. In the design specification, ICONS are generally divided into two categories according to their uses: application ICONS and function ICONS.

App ICONS: Identifiers for various applications, some of which are downloaded from the app store.

Functional ICONS: it is best to indicate the format and usage of ICONS in the specification. For example, in Web design, images can be managed using IconFONT and generated code can be delivered to the front-end development; If it is a native APP, you need to mark the icon export format and size.

The picture specification

As an important part of interface design, pictures need to be marked with size specifications, divided into different types of use.

Design size & grid system

Design size refers to the size of the drawing board selected during design. For example, whether 750*1334 or 375*667 is designed by each company according to different standards, so there is no stipulation that only one size can be used in the design. In our design, we used a double plot for the standard design, and the standard size is 375*667.

Grid system, which uses fixed grid to design layout, is widely used in UI design and front-end development. In the design of the size of the grid system mentioned, because now the design of the basic are adapted to a multi-terminal, and the grid system can be a good solution to this problem.

Interface layout

Layout is the premise of a page and the basis for subsequent interaction and visual design. Common layout templates can be provided in design specifications to ensure consistency between similar products. Designers should pay attention to the following principles before selecting a layout:

  • Identify the main tasks that the user performs in this scenario and the decision information that needs to be obtained.
  • Make clear the priority and content characteristics of decision information and operation, and choose reasonable layout.

Control specification

A control is an operational part of a product interface, which is somewhat different from a component. The Control is translated as Control and the Component is translated as Component.

The popular explanation is that components are composed of multiple elements and controls are composed of a single element.

Common UI controls (Control) : button, input box, drop-down list, drop-down menu, single box, check box, TAB, search box, paging, switch button, stepper, progress bar, corner markers, etc.

Here are some of the things we’ve sorted out in the APP design specification.

1. The button

The button has five states: Normal, Click, Hover, load, and Disable. These five states need to be listed separately in the specification, with corresponding button fill color, border color, rounded corner value, button width and height, button text size, and color value. In the case of an icon button, the space between the icon and the button text and the size of the icon icon must be marked in addition to the above parameter values.

2. Input box

For single line information input text up and down center display, support keyboard input and clipboard input text, the specific format of text processing: password hidden display, ID card, card number segmented display, marking width and height.

3. Select

Selection can be divided into single selection and multiple selection, and there are five different states: unselected, selected, unselected hover, selected invalidation, unselected invalidation. All effect states should be shown in the specification.

4. The TAB

Used to allow users to switch between different views. Number of labels, usually 2-5; Among them, the copy in the label needs to be simplified, generally 2-4 words. The width of each label can be adjusted.

5. Slide switch

A slide switch has two mutually exclusive options (such as on/off, Yes/No, and On/Off) and is a control used to turn options on or off. Selecting one of the options will perform the action immediately.

6. The progress bar

Used to show the user the number of steps of a step and the current process.

7. Angle

An aggregated message prompt usually appears in the upper right corner of the notification icon or profile picture to attract users’ attention through striking visual form.

Component specifications

Common UI components: table, dialog box, prompt bar, bubble prompt, date picker, multilevel picker, label input box, combo box, upload, etc.

△ Ant Design moves components

When designing in Skecth, use Symbol to create components, which can save a lot of time in post-finishing.

Of course, Figma also has the ability to create components that exist in Assets.

The default page

  • Empty page: displays the corresponding empty page icon and adds the corresponding guide button.
  • No network: Prompt page when no network is connected.
  • 404&505 pages: pages where an unknown error occurred.

Specification priority

After understanding what the content of the specification is, we need to confirm the priority of the specification. The content of the specification is huge and complex. The basic, necessary and cost-effective ones should be put in the first version, and the complex ones should be put in the future.

A good specification should be efficient and easy to understand. In the specific implementation, we should ensure that the classification is reasonable, the specification itself remains consistent, and the layout is easy to read, so as to improve the efficiency of designers to consult; Make sure the definition is clear, the description is accurate, and the scene is complete to help the designer understand and use it. However, it is worth noting that the design specification is not the “Bible”, do not limit their thinking because of the specification, when found that there is a problem with the specification, to timely correction, rather than once, has been used, never modify.

Here recommend a domestic design specification: copy guest design system

Address: www.mockplus.cn/download/ds…