QQ image for IPhone design sharing

Project background:

If there is anything that can record life anywhere, it must not be a mobile phone. Mobile phone's best skill is mobility, coupled with the image of the card machine imaging effect, through the mobile phone camera, processing, sharing the growing demand. Last year's Christmas season online QQ image for the iphone (hereinafter referred to as the iphone image) came into being, after a period of time to test the water's QQ image for the ipad. After several versions of iterations, first the fine polishing of the filter, and then the companion-style image editing on the interactive process, the iphone image gradually shifted from the editor's focus to the emotional expression of the image, and the idea of the app for the life of the picture was clear.

Let's take a look at some of the iphone images in the visual, interactive, and creative bits of the product that you share.

Image environment:

Creating a sense of image processing environment is the primary goal of visual processing.

The change of home page is the representative of creating image environment. The original home page uses the method of imitation to build the scene of the image processing in the life to achieve the goal of immersion, but there are still deficiencies in the extensible and clear table meaning. Subsequently, the icon + text This strong usability design occupies a long time of the home page, although the table meaning clear, extensibility also has certain guarantee, but this kind of navigation tool feeling strong. Therefore, in the most recent version, the homepage will be further developed into an instant entrance to edit life, the function entrance into the life scene, enhance the image processing sense.

In order to integrate the image processing tools into the image processing environment, the toolbar discards the conventional opaque background, replacing the background with translucent or even gradient transparent tools to make the tools and pictures complement each other. At the same time, in order to give the picture with as much visual space as possible, the ordinary (3:4 proportional picture such as camera photo) picture in the system album-like full screen rendering.

The whole interface UI uses the dark environment to highlight the picture body. After a series of contrast experiments, the dark environment is the most widely used for various photo editing, but also to some extent to enhance the professional sense of the app.

The image itself:

The filter is a convenient one-step effective image processing operation, especially suitable for mobile devices with limited space adjustment. Through the art of the filter processed pictures can enhance interactivity, the comment is also more enthusiastic, in the SNS era is more so, so the image processing app are competing to join the filter.

After analyzing dozens of image processing apps, the 8 dimensions of the filter are summarized:

Based on the above 8 dimensions, the original filter is visualized on the axis. It can be seen from the the iphone image filter has been covered in the color trend of the cold, warm, individual effects are also involved in the red, purple tendencies; some axes such as color saturation, retro do old, photographic film, etc. from weak to strong distribution uniformity; the artistic latitude of painting has not been tried in depth at the beginning of the project, Mainly rely on the introduction of Q-beat filter to make up, the subsequent version is more in line with the iphone image product temperament optimization, loss of focus and distortion in both latitudes are not in-depth, only soft light, moving axis, fish eyes and other more conservative effects.

On the selection of the filter thumbnail, a fixed image thumbnail is-> to adjust the-> fixed image thumbnail after the current image filter. summed up, using real-time processing of the current image as a thumbnail, although to some extent reflect the filter for the effect of the image, but this effect is not generally significant, not fully interpret the characteristics of the filter itself, so give a most balanced reflection of the characteristics of the filter is the final choice of thumbnails. The image below is an original iphone image filter on a fixed image thumbnail.

Through the Always Picture:

Image is the core of image processing, how to make it the main line to accompany the whole, how to give it the largest display space is a problem to consider.

In order to allow the picture itself to pick-> edit-> share the function of the main line for the user to create a sense of control image processing, always visible picture is a solution, and animation becomes the best carrier of the scheme. In the Sharing section, an earlier version of the separate sharing page has been improved and replaced by an animation of the artboard's twitching function. In the final step of the main line, add a picture from the artboard and share the animation, making the picture as a living mark of the existence of a sense of coherent.

In the maximum space display picture, as described in the "image environment", the normal picture is rendered full-screen and has the basic operation of the system photo album. Only in the specific editing function, only in the navigation area hidden at the same time the dynamic narrowing display, as far as possible to ensure the maximum picture.

Finger clicks and gestures:

In the mobile touch screen use scene, the thumb is the most common, so the iphone image is specifically for the thumb radiation click Area to do the optimization; gestures provide a convenient and natural entrance to the main operation, smart all fingers.

The corresponding clicks are the trigger position and the trigger area size. Position setting, such as the modal editing function interface, OK or cancel is necessary to put it in the lower thumb-click area, rather than the navigation bar, which is usually located in the upper part of the screen, which also saves the navigation bar area and gives the picture a larger display space; Size setting, as in the picture basket when the puzzle is selected, Click to enlarge the area of the deleted picture to the entire thumbnail size, not just the size of the button. To a large extent, the thumb-pointing operation is facilitated.

Gesture as a natural touch-screen interaction, used to call out some of the main operation is appropriate. such as special effects, puzzle parts of the switch filter and layout, and so is the function point of the common operation, with gestures to achieve they will also meet the user "try to change" psychological needs. In stitching, the dynamics of the sliding gesture and the animation retraction feedback for the picture reference are made more close to the natural interaction optimization.

Others, such as shaking randomly switched puzzle layouts, have an interesting sense of randomness.

Blow a blow:

Blowing a blow is an attempt by the CDC to put forth ideas and promote the production of a new, fun way of image processing.

Brain violence process in the imagination of the iphone sensor may be combined with image processing, by some playing music app inspired, and contact the haha mirror, blowing balloons and other life points of interest, drew a fat face creative. After the discussion with the product and development, refined to the use of face recognition and audio detection technology, to achieve dynamic detection and cutting the face area, according to the size of the atmosphere of the spherical contraction of the face of the realization direction.

In order to make the user understand this function quickly and accurately, the pseudo materialized scene of blowing gas is created visually. Interaction from the action to adapt to the scene (blowing-insert the straw; degassing-a variety of attempts such as pulling out the tape and pulling the straw) and auxiliary elements (the feedback elements that add user actions such as swing ripples, translucent circles with hints to move operations, Tips for blowing and blowing sound) Two aspects of the user into the blowing scene.

The function of the online received good feedback, this innovative way of drawing also applied for the relevant patents.

Postscript:

After a period of polishing the iphone image has been recognized by users, and several times into the App store recommended list. The iphone image that blends into life is working for Kano charm products.

Click here to download the experience:

Article Source: Tencent CDC