We often encounter various problems in our work. It is not terrible to encounter problems. After all, problem solving is also one of the indispensable abilities of designers. It deeply affects modern design, so regular review and sorting and finding solutions are very important parts of our design path. This article is the button article of the series of designers consumer email list who do not ask others to find answers by themselves;
Back to this article, in our daily design work, consumer email list the button is a relatively common component and one of the essential components of each terminal. This article mainly organizes the use of buttons on the Web side of the B-side. The commonly used components in the Web mainly include feedback components, form components, basic components, namely buttons, data display components, navigation components, and business components.
An overview of the buttons
1 Overview
Button is one of the more important components in interface design. It is the key to user drainage and action triggering. It is used to prompt the user to perform an operation after pressing the button. It is mainly composed of text and icons, and can be understood as an operation trigger.
Let's take a look at the explanations of several websites:
Ant Design: The button is used to start an instant action.
Material io: Buttons allow users to take actions, and make choices, with a single tap; with buttons, users can take actions and make choices with a single click.
Vant: A button is used to trigger an action, such as submitting a form.
View UI: Basic component, used when triggering business logic.
2. The origin of the button
The predecessor of the button is a physical button, which is a bridge connecting humans and industrial products, which greatly reduces the threshold for human-machine interaction and provides people with great convenience.
In 1988, Kodak invented the first Kodak camera brownie that can take 100 pictures, and its founder, Eastman, designed the famous advertising slogan: "You only need to press the button, we will do the rest" , the advertising slogan is concise and comprehensive, and it spreads quickly, which can be said to have created a precedent for photography culture and physical buttons.
150 years later, today's Brownie was born, that is, the Apple iPhone. Since the release of the first generation of the iPhone in 2007, the touch screen has gradually replaced the physical button as the mainstream form of human-computer interaction.
In 2017, when the iPhone X was released, gesture interaction became the general trend, and virtual buttons have gradually replaced physical buttons; Brownie may not be the first portable camera, and the iPhone is not the first touch-screen phone, but their achievements have surpassed technology and served their respective eras. contributed to the change.
Even in modern times, buttons are the components that attract users to click. Touch or click a button to trigger an action. The physical buttons of many home appliances and other devices become touchscreen controls, and the behaviors they form continue to be what the buttons were designed for: intuitiveness and ease of use.
Second, the composition and classification of buttons
1. Scope of the button
First of all, when we design buttons in products, we will definitely follow or formulate design specifications. Design specifications are the standard instructions for use of products; unified design specifications can help designers improve efficiency, product development and testing, and even users have better experience and reduce the cost of learning.
The company's specifications will also have different scopes of application. When we design, we must define the design according to different scopes.
First of all, the enterprise-level design specification is aimed at the overall brand tone of the enterprise and is the cornerstone of all product design specifications; secondly, the design specification of a product line is based on following the enterprise-level design specification, and all The exclusive design language specification for product customization, such as brand image, design language, user experience, etc.; the specific product specification refers to a specific product, and the design language is customized according to the product characteristics of the product;
2. Classification of buttons
1) Classification by platform used
In daily design work, the common buttons on the mobile terminal mainly include floating response buttons, floating buttons and flat buttons; the common buttons on the web side are flat buttons, linear buttons, icon buttons, and text buttons; this article mainly focuses on the web side, so mobile The end does not take up too much space to explain.
2) Classification by structure
The button on the web side is mainly used as the entrance to execute the next operation, and is generally used when the execution object is a process object or as an operation button; the button styles on the web side mainly include four types: face, linear, icon and text; face buttons are generally It is used in more important scenarios; linear buttons are used in less important operation scenarios; when using pure icon buttons, a prompt will generally appear when the mouse hovers; text buttons generally use color to indicate that the text can be linked to the next by clicking operation, and more use of the theme color, the visual effect is weaker than the face button and linear button.