PC and Mobile Design

As major internet companies move into the mobile market, the demand for mobile-end products is growing, and designers are moving more and more frequently between PCs and mobile designs. At present, many product planning is in the PC and mobile end-to-end layout, which further requires the designer should have a higher quality, can be in the PC and mobile end of the integrated design thinking.

However, the diversity of equipment and product forms has given designers more space to play, but also brought them more challenges. PC and mobile products have their own use of the situation, their design is different, how to unify the thinking and planning on different platforms product function, design is very worthy of discussion topic.

The difference of PC and mobile design

First, let's analyze the difference between PC and mobile in design. PC and mobile have their own characteristics, the characteristics of these devices, system platform, interactive mode, the use of the situation and so on, but also greatly affected the design of the difference.

1. PC and mobile usage situation is inconsistent

PC user scenarios are based on sitting in front of the computer, the user and the environment of the interaction is small, relying mainly on the user's operating context to design the situation. In the mobile application scenario is very complex, including the situation characteristics, user's attitude, network characteristics, the use of time, etc., which have a greater impact on the design.

In the mobile application design, in addition to the context situation, it is also necessary to analyze from three aspects of the user's physical situation, time situation and social situation to provide more personalized and humanized service.

2. PC is inconsistent with mobile physical and interactive features

The physical and interactive characteristics of the PC and the mobile end are very different. PC Display screen is also growing, can be a sufficient amount of information at one time, can be very easy to do multiple Windows operation; the screen of the mobile phone is also getting bigger and larger, but in the long term the display of information is limited, a screen can only handle one thing.

There are many interesting sensor technologies on the mobile side to enhance the ability of mobile phones, and can become a tool for designers, which is relatively rare on the PC side.

Under PC conditions, users can use the keyboard to comfortably enter information, with the mouse to accurately point to the object being manipulated, the direct operation of the mouse with the keyboard shortcuts, has formed a fixed integrated interactive mode; On the mobile end is based on the design of gestures, gesture input more natural, but not high precision, In the small screen, the use of hand gestures to edit and other operations have greater difficulty.

In addition, the cell phone battery situation, mobile phone traffic and network status are still relatively large restrictions, and on the PC side there is no corresponding problem.

3. PC and mobile application framework design is different

The information architecture is the primary problem that the PC and the mobile end need to consider in the design, the depth and breadth of the information architecture weigh, the thinking way on the PC side is also not consistent with the handset end. Mobile phone design is limited by the size of the screen, the information presented on the phone is limited, but also to the content of the first, navigation information can not be too large space. And in the PC side of the design will generally clear the navigation structure, so that users can quickly understand the content distribution of the site, but the user focus on the content of the screen do highlight display, so that users can focus more attention to content.

4. The matching PC end of the mobile end is much more important

In web design, in the last two years, designers have come up with the concept of responsive design to fit multiple screen designs, and it aims to provide a unified experience through a set of designs that cover the screens of phones, tablets and PCs. And there is a big difference between this and the adaptation of mobile phone applications, the application of the mobile phone is based on a variety of mobile phone screen, the phone screen width and height of the full screen adaptation of the scheme, suitable for the application of the picture, text arrangement, the number of content to fit.

5. The mobile end uses more elegant dynamic effect

In almost every mobile application, we can see the dynamic effect of the figure. The dynamic performance guides the user how to operate, prompts the content the logical level relation, lets the user be able to understand the application better and can know its state, lures the user's click, and can convey the brand characteristic lets the user remember it better. And in the development of the web side of a certain stage also has a lot of dynamic use, only the use of the transition to interfere with the user's normal attention, greatly reducing the usability of the site, resulting in the site is now very little use of dynamic effect. Now with the maturity of H5 technology and more and more browser performance, the dynamic effect on the web side will gradually become popular.

Many businesses have PC products, but also to do mobile products, but for various reasons, PC products and mobile product planning is not started together, that in this situation, the current market is how to carry out product design?

Second, the integrated design idea of PC product prior

Many of the mainstream business is developed from the PC side, and then because of the popularity of smartphones, the mobile end of the natural force, these products are based on the PC side, and then migrate to the mobile end. This kind of business is characterized by the development of the PC side has been very sophisticated, accumulated a large number of users, in the PC business relatively mature situation to develop mobile end products.

The common practice now is to migrate the core functions of the PC to the mobile end, whose main task is the mobile design of the existing functions. Because the PC product is already a huge system, it is a very difficult task to move the PC products. Therefore, the development of such applications on the mobile side is often painful, the success of the PC is shrouded in the direction of the entire mobile end, so that the mobile end of the product is also difficult to achieve the goal of exceeding expectations.

In addition, the rapid development of mobile services, the PC business is not idle, the new features of the PC is also continuously iterative. This will cause the mobile phone business to continue to chase the new features of the PC, and to achieve the synchronization of both, many of these business mobile business team is now a bit into this cycle.

However, the difference between PC and mobile product is not only the different form and screen size: The user's usage in mobile end, the ecological environment of the mobile end, and the use situation of the product are very dissimilar. There are some key principles to follow when designing a mobile end product:

1, in the product planning phase to have an independent, based on the mobile perspective to structure the business;

2, to support the core business of PC, but to play the characteristics and characteristics of mobile, in the mobile context, the development of PC functions, as a supplement and expansion of the PC, in the mobile context, to play the mobile end of the convenient, anytime, multi-channel feeling characteristics, the development of new features to update the PC's existing functions

3, do not want as complex as the PC function, but to have their own characteristics and goals, not blindly chasing PC function;

4, the new function of the design, for the principle of mobile priority, do a unified product design;

5, the basic structure to native, operating content in the form of WAP integration, enhance flexibility;

6, the content of the operation can be independent, but "my" content to be synchronized. The content of the PC pursues high-quality, diverse content to attract the user, the content that moves is more situational, provides the personalized content based on the user situation.

Third, the integration of mobile priority design ideas

The current mobile Internet users have surpassed the PC, the mobile end of the user coverage is broader, the user on the mobile side of the frequency of browsing and the increase in the use of more than the PC, but also prompted our new business will be more from the perspective of mobile priority.

The overall design from the PC end to the mobile end, the response design is the most proposed method, which seems to be a good solution. However, we see a good response to do the site is often relatively simple structure of the blog class, news class sites, these pages structure simple, responsive rules easy customization, front-end implementation is not complex. For complex web page response design, you will encounter a lot of challenges. But overall, due to the current H5 and mobile browser performance in the use and native applications there are some differences, it is difficult to play the core advantages of mobile, therefore, the pure response design is rarely in the PC and mobile integration project practice.

In the mobile priority design principle, is generally the PC side of the content as the whole business complement, placed in a secondary position.

So how do you think about the integrated design of PC and mobile in design?

1, all the functions and requirements from the mobile side to design. To meet the user's core needs of the features highlighted.

2, as far as possible in the mobile phone can complete all the tasks. Allow users without PCs or PCs to meet their needs and accomplish most tasks.

3. Between mobile phone and PC can quickly switch and cohesion tasks. When users are using a mobile phone or PC, they can quickly switch to another device and seamlessly connect to the task they are accomplishing.

4. In the product, the PC and the handset must play each characteristic, facilitates the user the operation and the use. For example, users can have centralized editing on their PCs, allowing users to provide personalized services based on context on the mobile side.

5.PC on the function to have their own bright spots and convenience. PC in the design to have new ideas, do not drag down the overall experience of the product, and can explain its function and role of the necessity, in use can be convenient, simple experience.

6. The handset and the PC have the inheritance and the consistency in the brand recognition sex. The two have a heritage in the brand, allowing users to perceive their consistency.

Mobile products are very different from PCs. Mobile situational flexibility, mobile device capabilities and limitations, mobile networks and ecology, mobile systems and app forms, etc. have their own characteristics, from the perspective of mobile thinking of products, can be fully based on the situation to play the advantages of mobile products, break through its inherent limitations. Finally, with the popularization of wearable equipment, the thinking of integrated design will be more and more. Wear sensors to collect data, mobile end mobile end of the application as a monitoring, information browsing, basic settings, such as functional access, cloud storage data, provide a complex management interface. This requires us to have a more systematic design of products to form a unified experience of integration.