What's the new formulation (Neumorphism)? Why is it called "soft UI"?

The new formulation is a combination of “new” and “skeuomorphism”. Different from 2010 The early years of the year, the new designs were being handled by extremely subtle shadows, allowing UI to be a part of the world's most authentic texture. The elements look like they're growing out of the background. It rejects the strong contrast and seeks a soft, permeable and physically sensitive visual experience, and it is also called "soft." UI (Soft UI)”。

Addressing the "unsure" interaction of flat-tanger designs

Pure flat-tangible designs, though simple, sometimes make it difficult for users to distinguish between those elements that can be clicked. The new formulation is a plane by simulating the light logic of the real world (high light in the upper left corner and shadow in the lower right corner). UI increased its depth, thus providing more intuitive insinuations.

Core principles: The background colour of the element must be fully consistent with the background colour of the parent container. All three-dimensional feelings are entirely dependent on two sets of box shadows (Box-shadow): a group of lighter than the background and simulated light; A group of slightly darker colors than the background, simulated projection.

2. How precisely do we control the quality of the new formulation?

To create a new formulation of a sense of excellence, detail adjustment is essential:

Colour selection: It is difficult to achieve the desired results in a black or white background. It is recommended that neutral colours (e.g. light blue or rice) with a slight greyscale or colour be selected.
Photobalance: The distance of shadows (Distance) and the ambiguity (Blor) are usually in the ratio of 1:2. If the distance is 10px, the blur radius is set to 20px will be more natural.
Form transition: The effect of Pressed is usually passed inset attribute achieves the internal shadow, which is used for state feedback when the button is clicked.

3. Challenges in accessibility design for new formulations

Since the core of the new formulation is low contrast, it is extremely unfriendly to visually impaired users or users of equipment in high light environments. It's often hard to match. The WCAG contrast standard.

Solutions: It is recommended that only the new formulation be used for the outer frame of the decorative card, button and that the core text and icon remain high contrast. Alternatively, the new formulation is made available to users as an optional subject model.

Performance and code realization

The new formulation is based entirely on CSS box-shadow This will be achieved without any photographic resources and therefore will be carried very quickly. This generator allows you to obtain calculated shade values by one key, ensuring that the colour of the light and shadow is perfectly aligned with the background colour and avoiding a dirty colour transition.