969Currently online
139Today's Reading
37Share Today
Multilingual display

So in the Qzone platform design personality album

2018-02-16 01:36:00

QZONE platform album function in order to ensure the loading speed has always been a simple picture arrangement view mode to present photos, with all kinds of album products on the market to introduce new, users are more and more strong requirements for the unique display of personal albums, in order to provide users with a more dazzling and cool personality experience, QZONE launched a new flash dynamic personality album in May 2009. Vivi had the honor to participate in the design of the personality album, the first phase of the project successfully launched five sets of albums, the design process is not enough, the following and everyone in the process of the project design experience.


At the beginning of receiving the demand, the students of the project team did not have a clear idea of the personality album, and the constraints of the development on the design were not specified. In order for everyone to have a picture to follow when discussing, I output the version of the scene with the photos in the file bag at the speed of lightning, and I found the product and discussed it with the students who developed the draft. Sure enough, one hundred people have one hundred "personality album" in their hearts, the discussion is very intense, and this unconsidered version is naturally pk off, in exchange for our detailed combing of the album style and photo browsing methods. In order to improve loading speed, save bandwidth, facilitate maintenance, and facilitate development, gg puts forward the suggestion of main program template. The programs that need to be templated include album page turning, playback control, loading image processing, switching effects, small picture lists, and so on. This means that only skins and cutscenes in the personality album can have different visual effects, and the rest of the album uses a unified visual element and animation. After several rounds of tripartite talks with students of design, product and development, we finally decided to put the overall situation first and sacrifice some visual effects to cooperate with the development.


Although the template of the main program makes many forms of expression and techniques impossible to achieve, hardworking designers will not give up the pursuit of visual effects because of various restrictions, and the students of the design group began to find the entrance to stimulate creativity in the restrictions.


Through the analysis of age preferences of users, we and product mm determined the design direction of leisure, graffiti, charm, young, cute, business, concise and emotional. Color tends to black and white, colorful, neutral, women's favorite powder, blue, green. Due to the imminent deadline of the first phase of the project, the number of online album templates is limited. In order to maximize the needs of users for the first phase of the online album, we selected the styles preferred by the public to design first, such as trends, and determined to show the most personalized parts of the album in the form of personalized skin + opening animation.


Photo browsing is the most basic and important function of the album, and the main program template requires us to maintain a consistent picture switching effect in various albums. Our first thought is to allow users to browse photos without limiting the size of the animation display area to view the picture, in short, the picture display area should be large enough to meet the large size photos that may be available. The second is to make this animation suitable for different styles of skin. Third, reduce the amount of development. After trying several picture switching effects such as picture fade, we finally chose a design similar to photo paper, and the picture switching design is a paper page turning effect, which is characterized by a large browsing area. Popular is easy to unify under different skin styles.


Skin is the most important part in the design of personalized photo albums. In order to pursue visual effects, we initially used photography works that are particular about color composition as legends, and combined them with skin for overall composition and color adjustment according to the position of loaded photos. After designing two albums, I found that the original unified tone and lively composition of the picture became chaotic because the user's photo replaced the photography picture, and the overall effect was confused, and the main and secondary photos were eclipsed in the rich skin patterns. Why is that?


The purpose of users using albums is to show photos, they pay more attention to the photos than the skin, so the design should think more about how to let the picture elements complement the photos. Ordinary People's Daily photos are characterized by many colors, chaotic composition, and easy to be overwhelmed by the visual dispersion of the picture. With this in mind, we adjusted a small part of the design to unify the design by combining everyday photos with skin. The skin is used as the foil of the photo. During the design, we readjust the area ratio and position relationship between the picture elements and the photo, and the decoration around the subject matter. After that, we exported the following set of "other shore flowers". It turns out that designing skin is more than just designing a picture.


The skin is designed to behave in different styles according to the original plan. Space user base is very wide, according to the requirements of user age preferences, output several sets of special versions, such as this lively and cheerful "HAPPY TOGETHER".


Next is the animation part, the animation is based on the auxiliary design of personality skin, the purpose is to make the photo more prominent and make the album more dynamic, the opening animation in order to express the scene, with the loading animation of the photo appropriate exaggeration and vividness. The auxiliary animation after loading is mainly to set off the atmosphere, in order not to disturb the user to view the photo, the dynamic design is gentle and rhythmic. Drawing on the previous experience in design, the animation elements move in the photo, set off the photo, and create visual. Please log in QZONE photo album to set the personality album to watch, thank you!


There are five designers before and after the personalized album: cauliflower, seafood, vivi, pillars (platform design), and three eyes (activity design). Although the entire layout of the first phase had to make some compromises in design due to the project cycle and other reasons, some design elements were reused, but we ensured the design as beautiful and rich as possible in the limited position.