Interactive design work sharing: Milk Hong Kong version Interactive design sharing

Article Description: Milk Hong Kong version-Interactive design ramble.

When the product is relatively stable and controllable, the little God has the desire to record this project quickly.

It involves the process of product design and execution by the small God, which is composed of the requirement analysis, functional design and design execution of the interactive/visual design level.

Rather than bring in some of the work of design skills, the little God is more willing to share the design ideas and vision.

Design is different from beautification because the former is endowed with the driving soul.

Background

Milk Hong Kong Edition, internally named "Milk Mobile". Is the Hong Kong trend magazine "Milk" in the mobile new field of cooperation attempts. Target equipment for the mainstream of high-end portable mobile devices, Iphone/ipod touch/android phone/wp7 ... The current version of iOS is released as scheduled and you can get the latest version from here . Other platforms ready to be sent ...

In the two weeks after the release, Milk Hong Kong version of the Apple App Store, "new products recommended" and "hot recommended", lifestyle ranked second.

In the past three months, the milk has embarked on the design and implementation of the Hong Kong version.

The life cycle of the design

When we start a job, we all want to control it as a whole.

A relatively clear timeline makes the design balance between time and quality, and outputs at the right milestones, following the overall project progress.

Design definition for milk mobile

Milk Mobile brand and content positioning, decided that this is a fast consumption of the city's spiritual food.

It has several characteristics--high timeliness, eyeball economy, lack of patience.

And then in the visual and operational efforts to create such an atmosphere:

• Information transmission is highly fluid.
• The rhythm of information presentation.
• Easy to operate browsing environment.

Explore starting from splash screen

Splash is the first view that a user enters the app until the program is fully available.

The value of the concept of Splash screen

• Brand Recognition (weight 30%)

When the user through the desktop icon into the Milk Hong Kong version, it will again convey a brand symbol of handwritten milk English characters. With milk other product image unification, the user can deepen the identity and the sense of belonging.

• necessary data loading and feedback process (weight 70%)

For the Milk Hong Kong version, the presence of splash screen is more a function-level requirement.
To deal with the scenarios of different state of the network and cache, and provide good feedback.

In the iOS Human Interface guidelines, the concept of splash has a more detailed description, you can click here to view. But it does not endorse a definition of splash screen--launch Images.

The information that we perceive is flowing, and the information that the image and its bearer should flow in performance, close to perception.

The flowing image is closer to the animation,ios of misleading the designer from the text and limiting its possibilities.

Launch/splash is an infinitely extended screen space, not just "images".

As a cross-platform design, Android's understanding of splash screen is more pragmatic.

If your application has a time-consuming initial setup phase, consider showing a splash screen or rendering the main view As quickly as possible and filling in the information asynchronously. In either case, you should indicate somehow this progress is being made, lest the user perceive this application is FR Ozen.

Windows Phone 7 focuses on the efficiency of information delivery. Absolute efficiency is supposed to be really admired when you can't provide better reasons to make it exist.

Don ' t use splash screens for branding. Avoid using splash screens because they may cause users to associate the program with your poor. Use them give feedback and reduce the perception of the ' for programs ' that have the long load times.

Don ' t use animated splash screens. The Users often assume that animated splash screens is the reason for a long load time. Too often, that's assumption is correct.

Often, we respect the platform's design guidelines, which makes your app and OS integrated.

Milk Hong Kong Edition splash screen wireframes

Based on the above definition, precipitation design. Details of the document, subject to NDA, will not be shared. But you can see the performance under different scenarios in the process of testing the app .

• When no network no cache state.

The milk Hong Kong version is not available, and the app with no data is ugly. What users need more is a friendly help interface that provides status feedback and solutions that provide an abnormal network status and a "retry" entry in an area that is easily identifiable.

• When there is no cache state of the network.

The client obtains a small amount of necessary data from the server side, and then seamlessly transitions.

• When there is no/network cache status.

The client first reads cache, weakening the loading status information that the user does not need to participate, and seamlessly transitions.

Benefit from the size of the animation, milk logo use of the scene from the splash natural transformation to the app page. At the same time, fade splash background and hidden hint information. This ends the entire splash screen.

Visual design and delivery of milk Hong Kong Edition splash screen

Splash's visual style is consistent with the full visual design of the app.

Black and white for hue, giving leather material to the dark top of the light penetrates all elements. Committed to simplicity but without losing the detail of the performance. (visual design will be written separately)

Allows users to focus on the visual center of gravity in the performance of rich information.

The default display for iphone screens and apps requires a 320x480 and a two-dimensional design for the Retina screen (unit px).

Android has a wider screen design requirement, but from the actual development practice, we only maintain the 480x800 design resources. This is validated as the best compromise for volume and quality.

Next is one of the redlines images, which provides a reference for the team's developers, making the overall project work smoothly.

When time is abundant, implement the high simulation model implemented by flash, promote communication more efficiently, and provide reference for developers.

Review design is a self-improvement process, and hope to read the text of the students to help.