After reading this article, I have a great feeling: a good design cannot rely solely on the precise implementation of mathematics. Many times, you still have to trust your own eyes and use psychological perception as a criterion to assist in optimizing the design. The final result is for users. Maybe it's the best.
Every time you see an interface, your brain is actually tricking you. No matter how hard you try to make things look consistent - the beholder's eyes often won't agree because we perceive objects through our brains in real life. So, as designers, our only option is to reverse "trick" the user's brain (Translator's Note: Visually).
In this article, I'll show you where a design component needs to be improved, let's take a look at this popup example.
△ 7 places have been adjusted
△ No adjustments were made
Try to compare the visual perception before and after adjustment. It may be difficult to see the difference in direct comparison, so I made a GIF to help you compare.
1. Adjust the center of gravity
Any object in the real world is affected by gravity, meaning: it will fall off once it is unsupported. Our brains automatically apply real-world expectations to elements of the interface and assume that whatever is on the screen is "trying" to fall. Even when an object is completely still, our brain still thinks it's moving down (more space above the object and less space below it) and visually adjusts to it.
An object that is perfectly vertically centered will be low when viewed in practice. In order for the object to be visually consistent, we must counter-compensate for the "expectation" of gravity by moving the object slightly upwards.
As shown below:
The larger the object, the heavier it is, and thus the faster it "falls". So we need to compensate more for larger objects and less for smaller objects.
Pink shows the container that holds the "smaller" button:
2. Adjust the margins of the rounded button
It's also a good idea to move the circular button slightly outside of it.
Otherwise, the button will be considered slightly misaligned and visually "recessed inward". At the same time, if the rounded corners of the button b2b data are relatively small, it still looks like a straight line at the edge, and no visual compensation is required at this time.
3. Adjust the title margins
The same principle applies to headings, especially larger ones. As the font size increases, the surrounding whitespace for each letter becomes larger and breaks the visual perception of the left border.
To change this, I made a small negative left margin:
Of course, applying it to every header in the design is a lot of work, as it requires a manual tweaking process, but it's worth it for more prominent headers (eg: on a landing page).