On the unification and difference of brand recognition and multi-terminal products

The opening ~ Small talk about brand recognition and the unification and difference of the multi terminal product, throw the brick, seek the Jade ~

A number of apps have recently been tried on multiple platforms, from gorgeous Macs to pristine windows, from smart iOS to multiple Android, each with irreplaceable features. Tangled and maddening thinking is: How to design a product of multiple terminals, how should be unified?

Multi-terminal uniformity, from the visual speaking
For the products of many terminals, good UI design, not only need to give the user the most basic visual comfort, but also should let the interface in different platforms, assume the role of brand image recognition.

Let's take a look at the visual identity of MIT Media Lab, known as the flexibility and innovation recognition system.

For more information, please click here to view http://www.thegreeneyl.com/node/294&i=9

The unique sense that the MIT Media Lab has been giving us is also reflected in the design of the logo. The logo is made up of three different shapes and color blocks, each representing a person's contribution, and the resulting shape represents an ongoing redefinition of what is media and technology for today.

In MIT Media Lab, each faculty and student has a logo of their own. Personal logo, with these three like the basic elements of DNA genes, no matter how the mosaic emissions, the visual belong to the same series. Both coordinated and unified, but also without losing individual differences.

Brand recognition application on the business card is brand logo+ brand fonts + personal information, in the file is brand logo+ brand font + file standard style + small color block decoration, in the interior is the logo color +logo space extension. The application of the whole brand recognition system is to keep the core content consistent, perform each other's duties, and complement each other's relationship.

Well, as the content of the MIT Media Lab brand recognition system has been briefly described, what does this brand recognition have to do with multiple terminal apps? Keep looking down.

Multi-terminal app brand continuity

Small to business cards, large to building, in different media using brand recognition elements, one is to ensure that users have a clear visual continuity and unity of the recognition effect, the second is used in the corresponding media, to conform to the characteristics of the media, and according to the characteristics of the design content.

That ~~app interface element, at different terminals, should also have the same effect with brand recognition? The interactive way of app, at different terminals, is it necessary to interact according to the terminal characteristics? Obviously, the answer is yes.

Please see the following case.

Facebook
Facebook's interface design on the iphone and Android platform. Have the same brand elements and conform to the user experience of their platform. See the red part of the picture in detail. It shows how users return to the main interface, how to refresh, and how to initiate the rich-operation task of information on two platforms. Obviously, Facebook is designing apps on different platforms without simply copying the iphone experience to Android, which is a platform-specific design.

For more information, please click here to view http://johnnyholland.org/2010/09/android-iphone-app-design-is-it-twice-the-work/

Spotify
Continue to look at another case, Spotify, a free online music player software to see how Spotify is designed on multiple terminals.

Spotify has its own app brand element, as can be seen from the thumbnail of the Spotify Mobile terminal above.

IPhone Android Symbian (touchscreen) Symbian (non-touch screen) Windows Phone 7

More details click to view http://www.spotify.com/

Spotify's image in the four mobile terminals shows that Spotify respects the interaction of native systems, uses the design language of the system itself, and satisfies the user's habits. For iOS, Android and Symbian touch-screen phones, keep the top for title, the middle for the list form, the bottom of the Content Module tab structure; For Symbian's non-touchscreen handsets, because the user is mainly through up and down and determine the physical keys to operate the app, The entire content module is designed as a list mode rather than a tab structure to suit the user's actions; In Windows Phone, a platform with unique metro design style and operating habits, Spotify chooses to incorporate the WP7 design language to meet the user experience.

This is the same as the identity of brand recognition, without losing individual differences.

While maintaining unity, we need to maximize the integration of the device's native user experience, allowing users to feel that our app is designed for their devices, rather than simply adapting to the device's screen or rough unified platforms, allowing users to adapt to our app.

Here, for example.

Mac system under the App main window is closed, the default background hangs, click the icon in the dock to reopen the app's main window, click on the Dock icon right-click menu exit or bar on the exit entry can exit the program. But So-and-so-goo music for Mac version, although trying to move closer to the operating system of the MAC, such as turning off and minimizing buttons on the upper left side of the window, clicking the Close button on Windows, asking the user to minimize or exit the program on the Mac, obviously does not match the Mac experience , so that users are overwhelmed, destroying the user's accustomed cognition and operation, make the app become neither fish nor fowl.

Content needs to adapt to usage scenarios

After talking about the experience of interface UI and system original ecosystem operation, we discuss how to define content structure at different terminals.

Let's look at how users use all kinds of equipment in a day.

More details click to view http://uxmag.com/articles/framework-for-designing-for-multiple-devices

Briefly described above, in the morning, users use smartphones or computers to quickly browse information from the time they get out of bed, using smartphones and tablets on their way to the company and home, depending on how and how convenient they are, using the computer at work and occasionally using a mobile phone; In a relatively relaxed state, it uses desktops, tablets and smartphones. In short, users will be exposed to a wide range of terminal equipment, including computers and mobile devices, in a single day.

It is important to understand the scenarios in which users use devices, which helps us design content that matches the user's use of the scene. For designers, we need to give the right content at the right time according to the user's use of the scene and the equipment.

Let's look at a case.

Evernote
Evernote is a product for recording notes, on mobile devices, for iOS, Android, Blackberry, Windows Phone 7 and webOS via Appcatalog, on computers, for Mac OS X, Windows, Safari, Chrome and Firefox.

More details click to view https://www.evernote.com/

Let's look at how the content structure of the Evernote differs on different platforms.

Evernote, on PCs and tablets, is a refinement of editing and content-consuming apps. On a smartphone, the optimization of app content is to capture users ' core functions of using Evernote under mobile scenes-to create new notes and view old notes, and to increase the function of photographing, audio input and marking location according to the characteristics of smartphones and the inconvenience of text input on mobile devices. Third, according to the screen size optimization information display hierarchy, to maintain the Evernote has always been simple and easy to use, the following figure, show the way from the large interface side-by-side structure to the level of small interface progression.

Multi-terminal app commitment link and complementary relationship

Back to the MIT Media Lab brand recognition, we can see that in different media, the core of brand recognition is unchanged, but the specific presentation of the way and content will be different, is a complementary relationship between their respective roles.

Similarly, a product, at different terminals, the core function is unchanged, but the presentation and architecture will be different. We need to understand the strengths and weaknesses of each of these devices. such as the use of performance and portability. Not all features apply to all devices. Desktop users and mobile device users have different expectations for the same product.

For example, think of a movie theater site that is on the show. When used on a desktop computer, the user expects a immersive feeling, including the details of the trailer and the movie. On the mobile side, users are more concerned with the movie list, from their own recent movie address and show time.

From the user to the use of multiple terminal products overlap, we can think that the same product of the multiple terminal app, should be complementary and perfect relationship.

The wisdom of the family, summary of the multi-terminal design method

1. If possible, start the design from the mobile side, because there are many screens and functions constrained in the moving scene. This means that the functionality on the mobile device is the core.

2. Ensure that each individual device (including smartphones, tablets and desktop computers) can support the user's goals. The user's primary and secondary goals depend on the scenario of using each device, so the user's target needs to be defined according to each different device. Here, provide a research data on the use of multiple terminals by Nielsen http://blog.nielsen.com/nielsenwire/?p=27702

3. An interactive design approach is described in an essay on Cross-platform design. In short, it is, first, based on the interaction of the original ecosystem, the design of a simple wireframe, two, zoom to adapt to each screen size of the visual elements, as well as the corresponding platform itself commonly used basic element control, etc. to design a fine wireframe interface. This helps to create a cross-platform unification early in the design. Instead of designing the interaction, wait for the visual designer to set the interface elements and style.

4. Create and archive design style specifications and templates to give a detailed description of the design style when the design is not unified.

5. The above design methods from the usual collection and accumulation, the method applied to the actual combat project, is a difficult and lengthy process, D3 multimedia designers are working hard.

Article Summary:

1. Multi-terminal products, like brand recognition, need to be coordinated and unified without losing the difference;

2. The relationship between multiple terminals apps is to complement each other's duties.

(This article is from the Tencent CDC blog: http://cdc.tencent.com/?p=5491)