What kind of design guidelines or design strategies should be followed in button design? Let's take a look at the author's summary in this article.
1. Button size design specification
1. Mobile
2. Web
👆 The above are basically the most commonly used button sizes at present~
In the actual interface design, what size button pinch should I choose?
[Large size] login button, the main submission button at the end, such as settlement, completion, enterprise official website CTA button [medium size] the most commonly used size, I don't know which size to choose, it is right [small size] common words in some widgets, small cards, such as bubble windows.
2. The difference between "link" and "button".
1. Link link
Links serve as navigation, and generally a new web page is opened after clicking, and the style of the link is generally in plain text.
2. 按钮 button
The button is used to initiate an action, and when clicked, the corresponding business is triggered.
Many of the buttons are now in plain text style, almost identical to links. So in order to make a distinction, when hover or click the plain text button, a light background color block will appear behind it.
3. How to arrange the position of the buttons?
The placement of buttons on the page follows two main principles: Jacob Nelson's F-mode layout.
1. F-Mode Layout – Jacob Nelson
Jacob Nielsen proposed this F-model based on the results of eye tracking research.
The order of eye browsing is generally from left to right and then top to bottom
2. Z-mode layout – Gutenberg
Gutenberg diagramm argues that the way people read should follow a certain Xi, from left to right, from top to bottom. Starting in the upper left corner, it goes through a series of back and forth movements, and finally scans to the end zone in the lower right corner.
This explains why many interfaces put the final [Settlement], [Confirm], and [Submit] buttons on the far right.
Fourth, the position of the button in the B-side page
According to the above two principles, we can derive the general principle of button placement in the B-side form interface.
PS: The general rules are only for reference, not rules and constraints, how to actually place them in the interface, or think about the placement according to the specific use scenario~
5. Types of buttons and usage scenarios
Sixth, the order of the buttons - according to the dialogue Xi
7. The difference between the two drop-down buttons
This article was originally published by @陈婉宁 on Everyone is a product manager, and it is forbidden to reprint without the permission of the author.
The title image is from Unsplash and is licensed under CC0.
The views in this article only represent the author's own, everyone is a product manager, and the platform only provides information storage space services.