How did the amazing UC horoscope H5 be designed?

What is the difference between a H5 that is quickly generated by software and a designer that has been carefully polished? Look at today's article. is only a constellation theme, behind the design thinking very much, from the visual, code implementation, interaction to the knowledge background, no one does not reflect the designer of the details of the "paranoid" to give the author Caiqiang point a praise.

The constellation's "seat" was originally a product of human fantasy, the ancient Babylonians began thousands of years ago to connect the distant and unrelated stars, named after the familiar animals and draw a beautiful map. From then on, the ancient people began to believe that the stars that radiate the glittering glow seem to have some mystical connection with us and our lives.

Here to share for you, is a mobile interactive H5 topic page on the UC constellation divination. From the point of view of communication, because the constellation theme itself is not a universal popular excitement, so the target group of this project seems to be limited to a limited number of specific user groups, and we want to be able to participate even if the constellation is not so interested, so from the implementation we decide to take the visual effect as the driving force, Boot functionality.

In the initial planning, this H5 structure is probably composed of the following parts, the first part is a relatively grand view of the vast universe, Sansing flashing. The second part focuses on the user's own constellation and carries out an operable 3D display. The third part is the horoscope for the results, you can share and interact with friends.

In order to simulate the wide sense of space in the universe, I used a relatively realistic approach in design style. First of all, the space layered processing, deep blue-purple background plus the beautiful nebula, attached to the irregular starlight, the most remote form of the bottom of the cosmic background. The foreground and the middle layer require some floating planets to produce near-large and small effects, and their role is to create a sense of distance that seems exaggerated, and these planets need to use the WEBGL technology to simulate the implementation of particle effects. The 12 constellations are distributed within these particle populations.

In order to one-woman the whole atmosphere, I decided to use the scene directly in the first screen of the page as a background, this is the first screen in the Welcome interface to try to use the 3D dynamic background, which is described above the scene, the camera in the space roaming in a distant perspective. This procedure makes the next operation flow more overall and coherent, avoids the jump to bring the fault sense.

The International Astronomical Society (IAU), based on traditional astronomy, divides the stars above us into 88 constellations, the 12 constellations that are familiar to us are the 88 constellations, which are located just above the 12 that we see in the Sun's orbit (the ecliptic) and surround the Earth in a circle, So in the H5 page We also put these constellations in the actual order on a ring, and the camera (viewing angle) moves along this circular orbit in space.

But the problem is that we all seem to have seen only constellations on Earth, and what is the composition of a constellation in the 3D view of God? What should be the relationship between the distance and position of each star in the constellation? In fact, the distance between each star that makes up the constellation is extremely remote and disparate. After consulting some literature, astronomical applications, I have roughly got the relative position between the celestial bodies in each constellation, of course, this position information is very vague, the proportion of the miniature to our observable size, I through blender this 3D software to the structure of each constellation to simulate the arrangement, Position each star in the constellation in space. The files produced by Blender can be conveniently extracted to the content information (x,y,z axis coordinates) directly from the front-end and research and development to facilitate code reconfiguration. To this stage, the three-dimensional of the 12 constellations is completed.

After the coordinates of each constellation are determined, the second part that begins to be implemented--the user chooses the constellation and takes the next step--we take a "deserved" interactive form: the lens zooms in from the distance and focuses on the chosen constellation. One thing to mention here is that after we rearrange the stars in our constellation to make them three-dimensional, they are transformed from a plane into a disorganized, messy star, which seems to have a lower degree of recognition ... To solve this problem, when entering the individual constellation display interface of choice, we will default to rotate this chaotic galaxy to a specific angle toward you, you will find the familiar constellations back again! Yes, that's their angle toward the earth.

In our usual perspective, the constellation itself has no sense of volume--they are just some of the two-dimensional highlights of the sky. This has led to the selection of a constellation in our page without a clear sense of the ritual of the transition brought about by the choice. So we entered each constellation with a map of the constellation Totem. It does not only imply that you are advancing to a deeper level, but also makes the thin, no-volume galaxy look richer.

Of course, all this concern is before your fingers slide the screen to begin the exploration of the 3D world.

After "playing" enough of your constellation, you can choose one of the stars to perform divination, and the results of divination are varied and diverse and can interact with friends.

Unfortunately, the activity in the dissemination process to touch the sensitive nerves of the micro-letter, so that it blocked the page in the circle of friends to share. However, after the occurrence of our marketing, operations, design, front-end, research and development team to respond quickly, 1 days out of the new design draft, 1.5 days front-end + research and development to achieve a new plan page in place. Then only two and a half days later, a more concise process, more authoritative results, more "harmonious" version was born

In this release we have refined the details and streamlined the process steps. If you are interested, you can experience and compare. Believe that smart you in the comparison will be in the "H5 Anti-shield" way to escape some blood pits.

Perhaps you have noticed that such a seemingly simple page is stacked and polished with many details, for a variety of reasons, this project is not perfect, but at least it can be said to have done under the shackles of reality to improve the corner we can take into account, and temporarily throw the KPI and business purposes aside, Most of the time I will be "paranoid and not even found to be useful or useless details", but perhaps the "useless" details that you don't see, they accumulate into all the useful cornerstones you can see.