Touch the Future QQ Concept Edition design

QQ concept version after a year of secret research and Development, finally opened her mysterious veil, to the world to show her true face, as a brand new products, as well as the internal closed secret research and development of many factors, may be a lot of people want to understand the QQ concept version of the design process and product design concept, Here we will take you a comprehensive understanding of the QQ concept version of this product development and design process, but also with you to share our project team's research and development design experience.

1. Project Background

QQ also online over the "billion", Tencent began to officially enter the "billion" era, we are immersed in joy and pride at the same time, we have a new concept of products will be broken cocoon, because we know that "billion", the internet for us to mean greater expectations, but also give us greater responsibility, Here we will explore the future of the concept of QQ model:

What will the future IM develop into?
What will be the communication of future users?
What kind of experience design can more easily meet the user's communication and communication?
Touch times have come, how do we provide users with a better experience design?
......

In fact, for the exploration of QQ, we have never stopped, the early stage of my QQ concept video display and QQ Search application concepts such as video, have been online rage, and how to truly on the basis of conceptual design, combined with the powerful technology of instant communication to hatch a real user experience products, is the most expected.

　

2. Research and design process

QQ Concept edition at the beginning of research and design, due to the relatively small amount of input and development resources, project front pull relatively long, although the previous stage did not participate in product managers, but only the designers and developers team, perhaps to allow designers to better play the imagination of the opportunity, although the process does not like the development of QQ when the norms, But this can take a more agile approach to development. From secret research to final appearance, during the birth of a lot of innovative design experience, after the product molding we also accumulated a lot of valuable experience, technology and innovation point, this is Tencent's first Nui (natural user interaction) products, combined with ergonomics knowledge, to achieve a multi-touch operation. In the implementation of IM (instant messaging) of the basic functions, QQ concept version also launched a dynamic photo frame, background, multi-tab Chat window, 3D interaction, vector interface, desktop friends and a series of new features, new experience and Windows7 important new features. I believe we are more concerned about the development of the QQ concept version of the process and details, here I will be simple to QQ concept version of the design process to share with you.

The QQ concept team set its own design goals at the beginning of the design:

Innovative interface can make people's eyes bright, need to carry the user more emotion, let the user feel the vitality of the interface, more need to pass a time and space applications, bring more space for the user to imagine, so that the performance of the interface more colorful, through the knowledge of ergonomics, better support mouse operation and multi-touch operation.

We have refined two of future trend designs in the design process: personification and materialization, which involves the core keywords: vitality, sense of time and sense of space, vitality is through the personification of emotional communication, is the product more affinity, simply in the interactive operation of the breathing effect, In the sense of vision has more close to the real life scene, and the sense of time and space is through the proposed materialization of the product interface, is the user more appropriate life, so that users in the use of the process to better interact with the product.

Embodied in the design will change over time to produce different interface effects, and the sense of space is through the new WPF technology, reflecting the multi-dimensional space expression.
And one of the important goals we've developed is to start studying the innovations and challenges that Multi-Touch brings to the interface.

The entire design process will have the following steps:

　　A. Conceptual Im's creative brain violence:
Of course, seeing such a shiny interface isn't going to come out overnight, during the period of repeated brain violence, there are from the CDC internal design sparks collision, but also have the usual project accumulation of creativity, more from the technical team to the forefront of technology exploration and sharing, all the achievements of the current interface, Take a look at some of our brain violence on the whiteboard left on the concept of a more and more imaginative spark:

　　B. Interactive processes, wireframe and paper prototypes
As can be seen from the myriad of brain storms and the concept of imaginative brain violence, some may not be practical or consistent with our version needs, we will focus on the concept of brain violence screening, will have the development of space map for more detailed interactive process design, that is, the specific concept of the schematic design, In order to determine the user's use of the scene and specific features of the interactive operation. We will not discard all the creative points we have stored in the filtered brain-storm map, as these are likely to be the next new creative design. Of course, the more we need to consider is that our products are suitable for both the mouse and the touch of the hands to operate, so will bring us a greater challenge.

We use the way of hand-painted wireframe to show how some of the functions of the products are operated and used, the mouse interactive operation is to follow the experience of many years and norms to formulate, here without repeating, and touch requires more users to the fingertips of the action to achieve the purpose of the operation.

Concrete touch operation in our products are reflected: click, slide (Roll screen), drag and drop (check, hold, move), two fingers stretching (scaling), long press and so on. These will be in our QQ concept version of the embodiment. For the tablet touch mode and the application scene we are in further research, including the combination of ergonomics and other knowledge, combined with the use of tablet computer scenarios, how to make people more comfortable to operate, are our research direction.

After the flow chart and the wireframe, we will start to design the paper prototype, this process can help us simulate the use of specific scenarios, more perfect operation of the interactive process. In the process, we will find that the previous wireframe design is not reasonable to improve the place. This kind of paper prototype is more able to embody the problems encountered in the use of touch operation, resulting in more perfect design. Of course, such a way also embodies the designer of a thinking process, more intuitive and convenient to achieve our goal, with a larger perspective to provide solutions to the problem of ideas, completed the original prototype design.

In order to reflect the QQ concept version of the characteristics of touch, we have also made unprecedented adjustments to the user interface, the control of the interface has been expanded, the size of the control has been adjusted, so that it can meet the mouse operation can also adapt to touch the operation, during the search for balance, the coordination process is very difficult, The industry also has no relevant guidelines and similar cases, all need the designers themselves to organize and solve these contradictory problems, we have been finishing the touch and mouse operation of the specification, let it make a more detailed distinction and integration. Hope that through carding, can solve the touch of the panel size requirements and visual experience of the conflict, so that the use of products, operation and visual feel more reasonable, comfortable and beautiful.

This process will produce some blend or flash interaction prototype conceptual models, these high simulation prototypes are very necessary to discuss the concept of interactive design, he can most intuitively feel the experience of innovation brought about by the operation changes, but also for the later prototype design save a lot of time, not most of the rework and modification, Here with the expression interface of some of the original prototype to give us a simple demonstration, but also because of this step reserve, we precipitate a lot of valuable innovative demo:

　　C. Visual style setting
After completing the positioning and interaction design of the main functions, start visual style design and innovation, in the interface style settings, as far as possible to think about the use of anthropomorphic and pseudo objects, combined with the blend platform excellent animation display and interactive capabilities, visual integration of interactive experience and innovative elements, Let the concept of design and the creative point of the brain to get full play, the early visual style of the entire version of the basic style, here recommend a software: Expression design, the software to draw the results are vector maps, and can be directly applied to the prototype system development, Her vector map will be used as an element to reduce the number of unnecessary design process, to show us the earliest version of the concept style, in which we can see the prototype of the QQ concept.

In fact, visual innovation on the user's impact is very large, in the design process, we also adhering to the "vitality, space, sense of time," the key words to carry out innovative design, such as:

1. New login Panel on the panel on the Dynamic Festival show, provides a space and time to switch, at the beginning of the design of the day we planned the real-time weather show to provide space and time to switch, this follow-up version can be expected, so that users from time to feel the QQ concept version of the charm.

2. Disc-style expression management interface, through the color of the visual induction, arouse the user's expression brand recognition, but also more convenient touch operation, in the bottom of the gray module area, the user's expression will be used in the near future automatically saved, user-friendly. Of course, the allocation of space and the expansion of the panel's design is also our next stage will be perfect, including QQ concept version of the unique QQ dynamic expression will also be a unified plan for the next version.

3. Desktop Friends Drag and pull performance, for the performance of men and women to distinguish between the performance of the members and dynamic Disc menu display all embodies the visual innovation to the user's pleasure and the sense of honor, the first desktop villain how to let users feel the breath of friends, but also to form a unified brand characteristics, In the visual style of the place also tried a lot of solutions, and finally we have a desktop villain for the prototype launched a series of innovative design, we in the process of innovation planning also considered how to interact with desktop friends, the current friends listen to music, the villain head will wear headphones shaking, there are beautiful music notes floating out, you can quickly chat with friends and so on , we will make more attempts to communicate with our friends in the later stage, including the state of the game and the digging of some deeper friend dynamic information.

4. Buddy Management is the most innovative user interface in the innovation process, where the visual management of friends, and the ease of touch of the operation experience has been a good fusion. In order to give the user a better sense of immersion, we used real-world materialized scenarios such as desktops and cards to immerse the user in the control. But because the development time is still short, the friend management function is not very perfect, we will make her more perfect. In subsequent versions, more to explore the user's relationship chain and how to present her, through a more visible way to show the friends of the way of communication will be we need to scrutinize and development, friend management will be more convenient, please look forward to!

......
Dynamic background, dynamic icon display and mobile photo frame, users can customize to switch their favorite skin style, the original intention is also to let users feel that our interface is alive, a lot of innovative design, in fact, in the visual fusion interaction will have more innovation and more interesting design, Follow-up we will continue to find a breakthrough point to the interface into the emotional, make it more alive.

　　D. Prototype Demo Development
Before already introduced, QQ Concept Edition is developed under the WPF Blend platform, this platform develops one benefit is the designer design prototype may direct to the technical personnel to carry on the actual development, At present, the concept of QQ interface visual interaction and visual performance are many of our designers to provide a prototype development model to the technical staff, and then the technical content of the technology to achieve the production, of course, this process on the designer put forward higher requirements, to the technical staff can not just static pictures, It is a prototype with an operational nature. In the design process, the need to standardize the control module, making research and development more convenient. A very simple button is also the need for countless events and state of the design, and ultimately to the technical staff is a control and entity interface prototype, so this process for our designers is still full of suffering, we in addition to the version of the design of some prototype demo, It will also try to precipitate some of the concepts of brain violence as the next wave of the application of brain violence, will be designed as a reserve resource.

Desktop Friends signal:

This is just a simple desktop buddy demo, but in fact all of our interfaces have these organic split module prototypes that are developed by technicians who combine technical considerations based on our design prototypes, bundle relevant data, and incorporate the latest technology experience into the prototype to develop the latest version.

　　E. Product development and Design
When we provide a prototype design model to the technician, they can build up the actual operation data bundle and implement these modules to apply. Although the prototypes we design are basically straightforward to use, the actual development environment may be more complex, and many controls may need to evaluate the development environment, and designers can tailor the prototype demo to the requirements of the development environment by assisting the technician based on the actual control. Technical personnel in the continuous optimization of the prototype system inside the code and some simulation of the effects of real environment transformation, but also to optimize the technical aspects of the exploration, including multi-touch and the development of internal logic.

Here we have with the technical personnel also accumulated a technical program to strengthen the work of programmers and designers, so that the technical staff and designers more seamless collaboration, there is a chance to share the next in the collaborative approach.

　　F. Functional and performance testing
After the product function design completes, has started a series of functions and the performance test, for this concept innovative product, the function as well as the performance test is very necessary. She can constantly drive our technology and design to optimize the performance of the product itself and improve our innovation point, of course, the outbreak of large-scale bugs also makes us headache, our team in the late test produced thousands of bugs, we can imagine, this version of our development and testing challenges, Although the performance is still to be optimized, but with its own WPF performance and version of innovative requirements that require a lot of experience fusion and may have a slight impact on version performance, we will continue to optimize performance and experience in the next phase, enabling it to achieve a balance within the acceptable range of users.

　　G. Promotion of home and video production
For the concept of innovative products, many times the user will be due to the operating habits of the reasons, may not be very understanding, so the concept of the later video display is very necessary. Video demo can give users the most intuitive demonstration of the new features of innovative functions, as well as the display of functional interface, in the later we also began the video design, recording and editing, fully reflected in the real environment in the product of each function point display.

OK estimate said so much, look at all annoying, come on, look at our QQ Concept version experience innovation video, right here, you can glimpse our products, experience under our elaborate for you to create an innovative IM products:

QQ Concept Video:

"A long way to repair, I will go up and down and seek" experience innovation is a long-term design, we will also continue to optimize the existing version of the performance and improve some features, of course, we will not forget our original intention, we will continue to climb the start of innovative IM products a new round of conceptual design of the peak, Please look forward to the next experience boom.

　

(Author of this article: Xiao Qiang, Angel)