7 pitfalls you must know when designing mini programs

In the past year and a half, we have witnessed the mini program grow from a bud to a towering tree, supporting our current lifestyle and allowing us to enjoy the comfort under its shade. Many companies will not miss this opportunity and have joined the ranks of mini programs.

This is a challenge for design and development. After all, we don’t have much time to launch the app quickly, and the relevant information on the market is too fragmented. In practice, we will encounter many pitfalls, and the official documentation does not explain them. So I asked our developer brother Yog to help everyone avoid those pitfalls in mini-app design.

1. Design draft should use double picture

UI designers like to use 1x images, but why do they use 1x images? Convenient adaptation is just a superficial phenomenon. The real reason is that the development tools used for development support 1x image development, and there is no need to convert values ​​during development. However, the development tools for mini programs do not support 1x image development, but support 2x image development. The size unit in mini programs is called rpx, which can be adapted according to the screen width. In the design draft of 750*1334, 1px = 1rpx.

If you feel sorry for your developer brother and want him to lose less hair, use the size of 750*1334 for the design draft. But if your developer brother always bullies you before, then you can do whatever you want, he can handle it.

Second, the size of the cut image only needs to be 750

If the design is made with a double image (750*1334), you only need to give a single slice; if it is designed with a single image (375*667), you only need to give a double slice. Do you really not care about other sizes? It's not that you don't want to care, but the development tool of the mini program does not support it.

3. Don’t customize the navigation bar

Standard height: 128rpx

Mini programs are lightweight, but they also have many limitations. One of them is that the navigation bar cannot be customized. The only thing that can be changed is the color.

This is the official meaning, but it can be changed. The client version needs to be 6.6.0 or above, and pulling down will cause the entire page to pull down, which is not easy to maintain.

You may ask if there is a small program that has been used. Yes, this small program is called Wangka. Now, they have changed it back. So, don't make it difficult for your developer brother.

4. Label Bar Loves Natural Look

This standard name is: tab page navigation, standard height: 98rpx, referred to as the tab bar.

1. Smirking at others makes them look embarrassed

It was another quiet night, I was designing alone in the company. I admit that it was really helpless, just like other small programs. I heard that you were still working on something original, adding a drop shadow and some gradients, thinking that it was great and impeccable. As a result, the developer cried. I believe it was a beautiful picture, but the developer couldn't do it. You can imagine his expression.

Although it is possible to make other forms, please don't let the developers see you. If I see you again, I will definitely say that native controls have many advantages and you can use them. Don't worry about problems, don't worry about maintenance and trouble.

2. Icon only costs 81rpx

It was still a quiet night, and I was still designing. This time I really couldn't hold back, just like other small programs. I heard that you were doing something original again, the middle icon became bigger, breaking the shape, breaking the shape again, burning brain cells.

However, you should know that the icon only needs 81rpx, and any smaller or larger will be deformed, so remember the specification box. The number can only be 2 to 5, and more or less will not count. You can only change the icon, and other components have the final say.

5. Pop-ups do not cover navigation and labels

In the mini program, the hierarchy of the navigation bar and the tab bar is the highest, so that the pop-up windows that usually enjoy the highest treatment have to succumb to them here.

6. Videos are often limited in time

The mini program does not support videos very well. In principle, videos cannot be placed in scroll controls, and this is what the official WeChat documentation requires. I also asked our developer to verify this, and it is true. Youku and Tencent Video both keep videos fixed.

But in fact, this has been solved by some companies, such as Kaiyan and JD.com. They have solved it, but the experience is not very good. If the company's product needs to play videos, it is recommended to open a new page specifically, and the video part should not have left and right scrolling.

7. One-Draft Adaptation

What to do with iPhone X, what to do with Android? You don’t need to design these anymore, the developers can handle it. Trust them.

8. About design resources

Although WeChat officially provides it, the update time is 2016. It does not have the current new version of the mini program style. The difference from the current one is in the top navigation bar.