, have you noticed that Facebook’s recent revision has also begun to add some pseudo-material style elements to the flat interface. As a UI and UX designer, I also took advantage of the self-isolation period of the epidemic to stay at home and joined the ranks of provoking disputes. This article will teach you how to make pseudo-materialization with the modified mask 3.0 interface. Style interface.
(Note: Because the author is a designer from Taiwan, China, the wording is slightly different, which does not affect the reading of the article)
During the epidemic, the successful digital transformation brought peace of mind to the public
In this wave of epidemics, epidemic prevention robots from the beginning , White masks, and the disease management department and DeepQ's "disease steward" (@taiwancdc), which has been developed since 2017, have all helped users reduce anxiety during this period.
And the APP to be transformed this time is also the "Healthcare Autotoll" and the "eMask" system in which the number of users has soared recently. Regarding the "Healthcare Autotoll" APP, if it weren't for the download to order masks because of the epidemic, I would never know that the APP issued by the National Health Insurance Bureau had so many useful functions.
△ Taiwanese, please speak your answer aloud!
Health Insurance Autotoll and Mask Real-Name System 2.0
In fact, the National Health Insurance Bureau has been quietly working on Health Insurance Autotoll for a long time. In the "Reform Diary" of Health Insurance Autotoll, it is mentioned that the National Health Insurance Bureau creates a win-win situation for patients and doctors in order to bring medical records to the cloud. Since 105, services have begun to reform and innovate. "Healthcare Autotoll" is useful. In addition to online pre-purchase of masks "eMask" during the epidemic, there are also main features: hospital inquiry, health passbook, reform diary, medical quick search, service locations, health insurance regulations, emergency Ten functions such as bed waiting, emergency treatment, and frequently asked questions.
△ The main page of Medicare Autotoll and eMask is
, and most of the useful functions are stored in the "Health Passbook", such as: medical records and medication records of western medicine, dentist and Chinese medicine in the past three years, medical records, allergy information ……The family is too complicated to be uploaded. I believe that this part of the function can be further layered, and the functions that users will use first can be moved to the home page according to age or usage habits.
Mask real-name system 3.0 and the challenge of pseudo-material design
Although in this attempt, page flow is not the design focus, and the wireframe part is also based on the original APP as a prototype, but I still made some adjustments to the function keys of the homepage. Some super practical functions that can be the main feature of this APP are placed on the main page, because it is really a superb feature, not the main feature. In addition, eMask is also disassembled into: mask pre-orders, order records, and pharmacy queries. If there is something unreasonable, please advise me.
summarizes here, this new pseudo-materialization style transformation will be optimized for the following three points:
- interface component new pseudo-materialization design
- adds the "family member purchase" function for the mask real-name system 3.0, just log in to the health insurance card. It can replace family members to pre-purchase masks
- and put other thoughtful functions, such as medication query and tooth cleaning reminders on the home page. With reference to the teachings of many foreign designers, most of the articles only teach the first steps. But everything is difficult at the beginning. As long as you have a basic concept, you can actually master half of the concept. Hurry up and start Sketch, Figma or Photoshop and have a try. The following are my own three steps for your reference:
Step 1 : Basic concept
Choose the 3 colors of highlight, object and shadow.
First select the color of the highlight, the object body, and the shadow under the object, and the object and the background are the same color. You can also choose other colors, but avoid using colors that are too high, which will turn the light and shadow into a halo.
Step 2: Create components
pointsIdentify the position of the light source to create a concavo-convex effect
When applying light and shadow on the help assembly, first plan the angle of the light. If you want to create an appropriate sense of horror, you may be able to assume that the light shines at 90 degrees from below. But generally speaking, light at a 45-degree angle is the most natural sunlight. As shown in the figure above, the yellow line represents the 45-degree oblique light. If the component protrudes from the plane, it will produce bright spots at the front light and shadows at the backlight. If it is a concave plane, the facing light will change to the groove in the lower right corner, and the groove in the upper left corner will produce a shadow. If it is flat, there will be no light and shadow.
Arrange and combine the components and shadows of the color blocks made in the previous step according to the highlights, objects, and shadows. After the arrangement is completed, Gaussian blurring (softening) the highlights and shadows. As for the degree of blur, adjust it according to your preferences. . One point that can be considered for
is that if the material that the interface wants to simulate is biased towards rough surfaces (for example: paper, cloth, leather), the degree of blurring will be greater, because the light hitting the object will diffuse; if the material of the interface is It is more biased towards reflective materials, the degree of blurring can be smaller.
Step 3: Make a "deep" interface
The page components are differentiated at different levels according to the clickability of the components.
Next, apply the above-mentioned concept of light and shadow to interface components! When you start designing interface components, you can first think about which components are suitable for the effect of the concave interface, which components are suitable for the convex interface, and which components are represented by the flat interface (without light and shadow)? Similarly, the following provides my classification rules for your reference:
First, I divide the components into four levels: -1, 0, 0.5, 1. So according to the component properties, the interface is simulated in a concave, flat, convex, and concave-convex manner.
△ Four major types of interface components
Level -1: concave interface
This block gives people the feeling that it is not completed, and it will make people want to fill it up
Level 0: flat interface
is a carrier of other components and is simply provided Information block (generally flattened plane)
Level 1: Convex interface
will give people the impulse to press and press
Level 0.5: Convex interface
is formed when elements on the convex interface are pressed A temporarily recessed state
One more point: If you want to emphasize the component closest to the user/a block above the interface, you can use a whiter than the background (for example: Header, Navigation Bar, Tab Bar) )
△ Convex-concave interface: do another concave interface effect on the button of the convex interface
Extra step: The detail control designer limits
to make good use of the inner halo to create an attractive three-dimensional arc
△ Details are details! After all,
is playing with materialized style. As a product designer, how can you let go of any place that can express product details? If you also like the semi-dimensional coating on the physical buttons, it will make you want to use your fingertips. If you pinch its impulse, use Inner Shadow to express the three-dimensional effect of the icon/text on the button.
△ The button is under-pressed, and all the buttons are under-pressed!
I remember the university model teacher told us that when making models, we must be "daring and careful." You can make bold attempts at any appearance, but in the end, you must concentrate on the details. Although there are not many products that can be used in the new quasi-materialized style, novice designers can use this familiarity with components, improve their mastery of components and light and shadow, and enhance the componants/symbols production capabilities in the software. Finally, the hot UI elements were born in front of the screen.
△ lined up in one line, Asi~
Conclusion
I don’t know if you have noticed, I have kept the marquee elements in the original interface. Whether the marquee is a suitable way to express the latest news is open to question, but I personally feel that when I see the marquee, I feel like going to a public agency.
Finally, echoing the previous article about the new Neumorphism design, UI and UX designers rethink 5 things, here is a summary of the benefits of the new pseudo-material design:
- large buttons allow users of all ages There is no need to press the wrong hand or vertigo
- to avoid using too many colors to allow users to concentrate on absorbing information and focusing on taking actions
- Four-level concave and convex components can allow users to subconsciously produce natural operability
