preface

Some time ago, I discovered a UI design called Neumorphism, which felt quite new. Therefore, this paper will share the relevant knowledge of new quasi – object design.

What is the new simulacrum design

The predecessor of Skeuomorphism is Skeuomorphism, or Skeuomorphism. In other words, Skeuomorphism is designed to imitate the texture material of real objects in the interface, so that people can associate the way of using real objects when using the interface. Apple was the first company to put forward the concept. New simulacra is a new idea of simulacra. Its focus is not on the comparison and simulation of the real world and the digital world, but the key point is the tone. New simulacra focuses on the color of the whole screen and provides a completely unique experience for users.

For example, if you have a music player interface, use the new dummy design. The UI elements of the interface are not placed above the background but behind it. It gives the impression that components like buttons or cards are actually in the background, visible only because they stick out from inside.

A comparison of new pseudo-object design

New imitated object design is a style between imitated object and flat, which simplifies unnecessary effects in imitated object design.

Who is using the new simulacrum design

Several applications use the new pseudo-object design

Mystery clock



Hydrogen clock



Skailer




Master db


The realization principle of new quasi – object design

The new object design was achieved by applying two different shades, a high light color and a shadow color. The background color of the element could not be all black or white, but a mid-tone was used so that the shadow effect could be seen.

Implement new object design using Flutter

For development purposes, this effect is achieved by using two shadows, a highlight shadow and a dark shadow, and setting the background color of the element. When convex, the highlight is on the upper left, the dark is on the lower right, and when concave, it is reversed. The following describes how to achieve this effect using the Flutter framework. The same principle is used on the Web side.

  1. Start by adding a container to place the specific elements and setting the background color
Container(
  width: 600.0,
  height: 600.0,
  color: Color(0xffefeeee),
)
Copy the code
  1. Add a child element and set its background color as well as its shadow color and highlight color
child: Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(// background color:Color(0xffefeeee),
    borderRadius: BorderRadius.circular(12.0), boxShadow: const [// High light colorBoxShadow(
          color: Colors.white.withOpacity(.5),
	    offset: Offset(10.0.10.0),
	    blurRadius: 4.0,), // Shadow colorBoxShadow(
          color: Color(0xffd1cdc7).withOpacity(.5),
	    offset: Offset(-10.0, -10.0),
	    blurRadius: 4.0[], (), (Copy the code
  1. Add rounded corners and borders to child elements
decoration: BoxDecoration(/ /... borderRadius: BorderRadius.circular(12.0),
  border: Border.all(
    color: Colors.white.withOpacity(.2),), //...Copy the code

The final result

Here you can use a handy tool to generate code to produce different effects

neumorphism.coldstone.fun

Another tool is available for the Web

neumorphism.io

Advantages and Disadvantages

The main advantage is that the effect gives the user a sense of freshness, and it can be mixed with other styles.

The disadvantage is that

  1. Weak hierarchy

The lack of information hierarchy on the interface can have a significant impact on the user’s decision-making and thinking processes. If there are multiple actionable content but the focus is not prominent, the user will be confused in the current process, which may lead to misjudgment and misoperation. Good UI/UX does not need to make the user think.

  1. Low contrast, poor recognition

The new simulators distinguish elements only by soft shadows and lack contrast, so they are less recognizable and friendly to users with low vision, blindness and color blindness.

  1. Increasing the difficulty of development

The implementation of this style is to add two different directions to the element, which can be done in code, but requires more work to add a shadow to each element.

conclusion

New simulacrum design is born from simulacrum design. It is only a design style with limited application scenarios. It needs to be used carefully in real design and can be gradually applied to small elements. But it’s still worth trying.

reference

Neumorphism in user interfaces Neumorphism: Why it’s all the hype in UI design Neumorphism in Flutter Complete combing! How did the hottest new simulacrum design trends evolve in the first half of the year?