How to Design H5 page products? (I am a 0.15-year-old product manager )-

At present, the work of the Department is basically H5 product design. I think H5 pages are similar and time-sensitive pages. What's important is that the experience is not good. Choppy often serves as a product Assistant in charge of H5, how should I do my job well? (Poor mentality, I think H5 cannot grow up.) Please do not give me any advice. I would like to criticize the fact that the work of the current Department is basically H5 product design. I think H5 pages are similar.
And they are all time-sensitive pages. What's important is that the experience is not good, and choppy pages often exist.
How can I do a good job as a product assistant for H5? (I feel that H5 cannot grow)
Please give me some comments and reply: is it related to your own work? In fact, the HTML5 technology specification was finalized soon, and it is also 0.15 years old for the overall Internet environment.
So do not define a new thing.
I will answer your question in several parts.
1. Poor experience, choppy Problem
At present, H5 pages are mainly used in domestic applications for internal browsing and sharing. Before the first half of 14 years ago, the built-in browser was not satisfied with the H5 page display performance support. The main problems were concentrated on the bottom Android machine, and the problem of freezing and poor experience was reported by the landlord. This problem has been optimized and improved in the second half of, but it is not very effective because of the overall hardware constraints of the bottom machine.
At the same time, accessing the page shows that the stability of the backend server and the quality of network signals are also part of the cause. Many H5 pages circulating in the circle of friends appear after being referenced by various promotion companies. The original address of the H5 page may have been forwarded to more than five servers during browsing, in this case, it is difficult to ensure that the actual page effect can satisfy you.
2. H5 pages are all time-sensitive pages
This problem is caused by the current market. In fact, H5 is a new frontend technology, and its cross-platform function is its biggest advantage. Imagine if your project is a cross-platform project, PC, mobile native apps, mobile browsers, and tablet browsers all require support and display of your products. In this case, using HTML5 technology to create a general page is the best choice, it can save a lot of cost for rickshaw and build a good foundation for future maintenance and optimization.
Currently, the timely H5 page on the market is mainly used for promotion and promotion. The product objective of this page determines that the result is short-term. Of course, on this premise, many companies will not invest a lot of money in design and development. In addition, some outsourcing companies do not have good technical reserves and it is unavoidable to achieve high-quality results.
I have attached several good cases I think:
Who doubts everything on the street?
How Old do I Look?
Burberry
You can use your mobile phone to open it and observe it.
3. What should I do as a product assistant for H5?
In your current stage, the main task should be to read more, listen more, and learn more. I am looking for some high-quality cases on the Internet for analysis and research, and studying the principles behind their design. Why? If you want to learn more, you can ask the front-end technical personnel how to implement it.
Read more relevant materials to learn about the technical development of the H5 page and what functions can be implemented on the page at the current stage, then you can think about how to design these functions into your actual product.
When designing a page function, do not consider it as a simple page, but as a page in a native APP. Consider the overall design scheme from the design ideas of the mobile client.
After you study more cases, you will find that none of the cases you think are the same.

Above, I hope to help you 0.15 years old with accurate Algorithms

[Awesome H5 constellation page design]

What is the difference between H5 quickly generated by software and well-developed by designers? Read this article. Just a constellation topic, there are a lot of design ideas behind it, from visual, code implementation, interaction to knowledge background, all of which reflect the details of the designer.

The constellation "Seat" was originally a product of human obscenity. In ancient times, the baboons began to claim to connect the distant and unrelated stars thousands of years ago, name the animals that people are familiar with and draw beautiful star maps. From that time on, the old people began to believe that the shining stars seemed to have some mysterious connection with us and our lives.

Here we will share with you a mobile interaction H5 topic page on UC constellation divination. From the perspective of dissemination, because the constellation subject itself is not a universal concern, the target group of this project seems to be limited to a limited number of specific user groups, we hope that even users who are not so interested in the constellation can participate in the process. Therefore, we decided to use visual effects as the driving force to guide functionality.

In the initial planning, the H5 structure is probably composed of the following parts. The first part is a relatively large view to show the vast universe, Fan Xing flashes. The second part is close-up focusing on the user's own constellation and can be displayed in 3D. The third part is the fortune result of divination, which can be shared and interacted with friends.

In order to simulate the vast space of the universe, I adopted a relatively realistic design style. First, the spatial layering, the deep blue-purple background and the colorful Nebula are attached with irregular stars to form the farthest cosmic background at the bottom. The foreground and the middle layer require some floating planets to produce near-large and small effects, and their role is to create seemingly exaggerated distant distances, these planets need to use the particle effects produced by WebGL technology to simulate the implementation. 12 constellations are distributed inside these particle clusters.

I decided to use this scenario as the background directly on the first screen of the page for the sake of the overall atmosphere. This is the first time I tried to use a 3D dynamic background on the first screen of the welcome page, that is, in the scenario described above, cameras roam in space from a distant perspective. This method makes the next operation process more complete and in one breath, avoiding the fault caused by the jump.

The IAU used traditional astronomy as its blueprint to divide the stars above our heads into 88 constellations, and the familiar 12 constellations are the 88 constellations, the location is exactly the twelve on the sun's orbit (yellow track) we see, which is surrounded by the earth, therefore, on the H5 page, we also arrange these constellations in the actual order on a ring, and the camera (observation angle) moves along the ring orbit in the space.

But the problem is, we all seem to have seen constellations only on the earth. From the perspective of God surrounded by 3D, what should the composition of a constellation look like? What is the relationship between the distance and location of each star in the constellation? In fact, the distance between every star in the constellation is extremely distant and wide. After reading some documents and astronomical applications, I got the relative location of the celestial bodies in various constellations. Of course, the location information is very vague, after reducing the ratio to what we can observe, I used the 3D software Blender to simulate the structure of each constellation, location of each star in the constellation to the space. Files generated by Blender can be directly extracted from files by the front-end and R & D personnel (X, Y, and z axis coordinates) to facilitate code refactoring. At this stage, the three dimensions of the 12 constellations have been completed.

After the coordinates of each constellation are determined, we start to implement the second part-select the constellation and perform the next step. We adopt a "reasonable" interactive form: the lens is closer from a distance, focus on the selected constellation. One thing we should mention here is that after we rearrange the positions of stars in the constellation to make them three-dimensional, they are changed from a plane to a group of undisciplined and messy stars, the recognition level seems to be lower... To solve this problem, we will rotate the messy galaxy to a specific angle to you by default when entering the selected single constellation display interface, you will find that the familiar constellation is back! Yes, that is, their angle towards the Earth.

From our usual perspective, the constellation itself does not have any volume-they are just some two-dimensional highlights in the sky. This leads to the absence of a clear sense of ritual as a result of selecting a constellation on our page. Therefore, when we enter every constellation, we add a map totem of the constellation. It serves not only to imply that you have pushed to a deeper level, but also to make this thin, non-volume galaxy look richer and Fuller.

Of course, all these concerns come before you slide your fingers to the screen and start exploring the 3D world.

After "playing" Your constellation, you can select one of the stars for divination. the Divination results are varied and varied, and you can interact with friends.

Unfortunately, the sensitive nerves involved during the promotion blocked the sharing of the page in the circle of friends. However, after this happens, our marketing, operation, design, front-end, and R & D teams responded quickly. A new design draft was released in one day, and the front-end + R & D Implementation new solution page was in place in 1.5 days. So two and a half days later, a more concise process, more authoritative results, and more "harmonious" content was created.

In this version, we have made the details more refined, and the process steps have been adjusted more streamlined. If you are interested, try and compare them. I believe that, after comparison, you will be able to escape some blood traps on the "H5 anti-blocking" Road.

More articles:

If autonomous programming is still slow, it is estimated that your engineers are not technically competent.

If you use the H5 tool, the tool may not be used.



I tried MAKA yesterday.


I wonder if you have read the cases and templates on the [future application] official website. First of all, I would like to ask you what H5 is?

If autonomous programming is still slow, it is estimated that your engineers are not technically competent.

If you use the H5 tool, the tool may not be used.

If iH5 is used, I can only give you some optimization methods:

Method 1: the size of the uploaded image is limited to-kb.

Method 2: Use the "publish" button at the top of the editor to optimize the overall image of the file, and select to compress the image by 10% or 20%.

Method 3: If a slide timeline is used for a work, try to display the image only when needed when setting the slide timeline. Do not display many images at the same time. (Set the start and end display in the attribute to NO)

Method 4: place events that can be merged in the event group (that is, events with the same trigger conditions ).

Method 5: Set the previous LOGO page to pre-load the following page during playback, or add a progress bar to buffer and load all the subsequent content at the same time.

Method 6: Use Canvas for animation.

Finally, I can share my experience on optimizing a task management system H5:
1. Clear the page logic first
Directly create a logical structure diagram to understand the internal logic of H5.

2. discover problems from users' Psychology
Since anyone can register, you can log on to the system after registration, which may lead to risks of external access. Therefore, I added a verification code step.

3. Optimize the interface design
I have to read more design books, such as basic text alignment. It is best to use coordinates instead of feeling. Take color into consideration, and consider the reusability of H5 to see if the existing logic can be used as the next H5 template of the same type.


Finally, you can refer to the book "micro-interaction" to explain how to improve the product in interaction details, which is also applicable to H5.