Concept visual draft of QQ space on Android platform

I. Preparations

When I made this style draft, I asked some friends who used QQ space and how they understood QQ space? What is the desired QQ space? I got more than N answers, and I extracted some of the keywords: "It's fun, easy to read and write, fast to operate, cool, you can see more content for PC users, let's choose the method we like, exquisite and beautiful, and have a QQ space. features ..."

After reading the information provided by these friends, I came to the stage of understanding and analyzing, and hoped to try a different style from the previous version, it not only reflects the characteristics of the QQ space, but also makes users feel refreshed. The next step is the sketch and material collection phase. Below is some of my understanding of the QQ space through the image presentation:

You can see the shadows of these images in the following visual documents.

Ii. design presentation stage:

After you enter the logon interface, the logo is dimmed when no account is entered, after a user clicks the account input box, the logo is highlighted (visually, the user can click the status from inoperable to operable). After the user enters the password, click the logo to log on.

In the personal center, you can see that the tab bar on the page is hidden, only one up button that can be clicked is displayed, and the title and tab on the page are designed to be translucent, this design aims to provide users with a larger space for reading visually and a pleasant operation experience. In fact, after users enter the personal center, his observation points will be various operations in the personal center, including writing mood, taking photos, viewing comments, and replying. Only when the observation points change (the purpose changes to strengthen) for example, you need to go to my homepage to view your related content and play some applications. This is why the user switches the corresponding interface. This is also a reason to design the tab Bar as a hidden state.

In the interface, icons such as mood, logs, comments, photos, and likes are designed to easily identify the attributes of each feed.

When you switch the channel, click or drag the up button below to the upper button. There will be vibration feedback in the tactile aspect. The up button will become larger, and it looks like it is dragged by a finger visually.

At this time, the tab bar of the turntable is called from the bottom, which is currently a personal Center interface. Therefore, the icon corresponding to the personal center on the tab bar is activated, the tab icon design process adopts the quasi-materialized design.

When you operate on the tab bar, you can switch between channels in two ways. Click the corresponding icon or drag the ring turntable to switch to the corresponding channel, in this way, quick switching is ensured, and operations are also interesting. The icon Moving center of each channel is activated (the effect is fade-in and fade-out), and the channel is switched at the same time, the following two figures show the tab bar changes when the finger-touch disc slides left and right:

 

The following are my homepage, friends, and application interfaces.

Personal Homepage

Friend Interface

Application Interface

Iii. Details and scalability

1. Considering the user's usage habits and operation methods, here we will return the initiative to the user and provide three operation methods for the user to define, by default, the channel is switched from the lower part. You can adjust the operation mode of the tab bar on the settings page.

2. Currently, there are five channels on the tab bar. Considering the strong integration of Qzone, we cannot eliminate the possibility of adding more channels in the future. Therefore, we adopt a disc design method, that is, one of the themes of this style draft-playing with Qzone.

3. When entering the account and password for verification, the system will automatically determine the male and female users. If a female user logs on to the system, the system will automatically select the skin style suitable for women, the corresponding icon will also change, for example, the icon in the personal center will become a girl's icon.

In the product design, user needs and specific scenarios are also considered by a designer.