Another perspective landscape: mobile phone product design horizontal screen mode

The process of designing is more than thinking. A valuable design, not how gorgeous design, how successful innovation is how successful, those who will know that he is a good designer to do such a design, his design is the essence of what is. Internet products or mobile products even more so, designers need to know what your product to solve a core issue, and then propose a sufficiently elegant solution, so as to solve the user's "pain point" problem, give users the most intimate design.

When I first started to do the design, I liked to add complex animation effects to some details to demonstrate the uniqueness of the design. However, each animation has its own meaning, or reduce the waiting time for the operation Feeling, or make the transition smooth, or provide effective feedback, and I want to increase the complexity of the animation, but designed for the design, so increase the cost of development and meaningless design, most of them are killed in the bud State of

As for horizontal screen strategy, I have encountered design bad case, the design of the handheld Baidu Android version of the beginning, did not take into account the horizontal screen mode, home 4 × 4 shortcut entry, if the horizontal screen mode is just a simple stretch With the words, 4 × 4 horizontal screen mode led to the waste of space, and shortcut entry button has been out of the screen. Engineers to the development stage, came to ask me, so the last arena emergency, horizontal mode using remake instead of stretching strategy, then about one line shows six, three lines on the show, but as fast entry up to 16 , The third line can only show 4, in short, is playing an asymmetric beauty, very failed. After each design, will be in the vertical screen-based case, the pre-imagination horizontal screen program, here are some experiences to share with you.

First, the user switch to horizontal screen motivation?

Before making this design, let's try to figure out the user's motivation. Why do users flip the phone? If a user is typing in an address, he crosses the screen, most likely to give the program more room for input to do its job more efficiently; if it's a user reading the news, he crosses the screen , Probably to see larger fonts, or more, in one screen, all in all to make the reading experience better; if one is playing a game, he crosses the screen, most likely Is for two hands to work together on the game content to achieve the immersive game status; if a user is watching the video, he crossed the screen, the purpose is nothing more than a more proportionate way to browse the video in a limited screen See a larger area of ​​the video reality; if it is a slideshow user, he crosses the screen, the purpose must be to see a larger picture, to experience a more focused picture browsing mode; if it is a recording User, then he crosses the screen (or flips the screen), probably closer to the microphone, to make the sound clearer Recorded. Different usage scenarios, the user's expectations of horizontal screen mode is different, if you provide the horizontal screen mode, can not give the user the specific experience that he expected, then it is better not to provide horizontal screen mode.
So, sum up is:
1. Games - immersive experience
Reading class - larger font
3. Input class - more convenient input
4. Video - a more appropriate ratio
5. Picture - larger frame
6. Speech classes - closer to the microphone

It can be found that the user still has different expectation to the horizontal screen under different usage scenarios and different application types, but it is obvious that most of the horizontal screen modes are either to make up for the lack of vertical screen - small font size , The keyboard is small, the proportion of frames inappropriate, or users want horizontal screen mode can provide more gorgeous more fancy sensory experience, in short, from the vertical screen to the horizontal screen journey, not so easy to flip.

Second, each platform's horizontal screen differences? 1.IOS

Tension fit:

Toolbar and navigation bar will be squashed Operation icon will be reduced List items can display more text Address bar control Auto-hide input method Keyboard and form Auxiliary button Flattening

2.Android

The first screen interface:

Information Reorganization Toolbar Move to the right of the screen

Launch interface (Dashboard)

A quick introduction to the app's interface showing the capabilities and proactively highlighting new content

Action bar Simple Stretch Fit Quick Entrance Simple Rearrange Sub Layout Shift 3.S60v3

Layout rearrangement:

The system status information bar is split into two lines. After the screen is switched to the horizontal screen mode, since the physical buttons are on the right side of the screen, all the operations related to the physical buttons are on the right side of the screen to be migrated, and the secondary information is generated. Top migration to the bottom If it is a tool application, the interface can be left and right layout 4.S60v5

Simple rearrangement:

V5 slender screen, horizontal portrait mode vertical space is particularly valuable, generally have to redesign models with sliding keyboard, and without sliding keyboard v5 models, horizontal screen strategy slightly different with Sliding keyboard models, expand the sliding keyboard, the toolbar is still below the screen without sliding keyboard models, horizontal screen mode, the toolbar should be placed on the right side of the screen

Third, some basic strategies 1. Game category

Game category, if the horizontal screen mode, the best user experience of the game, may wish to start the game, you can directly switch to horizontal screen. Forced horizontal screen, do not need tips to remind users, as long as the horizontal boot screen boot When the user sees Splash is horizontal, you will naturally know to flip the screen if the default horizontal screen, it is best to physical button that side On the right hand side, this is convenient for users to operate with the familiar hand

Video class

Video type, when the user after the point of play, with a suitable boot animation, switch to landscape mode of course, if the user has been locked as not to rotate the screen, or do not force horizontal screen landscape mode, if it is To help users focus on the application of the content itself, you can set the navigation bar and toolbar to be transparent, or the navigation bar and toolbar can be automatically hidden. Of course, if the user wants, click the blank space, Evoke action bar 3. Picture class

Pictures, if it is the kind of albums, you can clearly know that the horizontal screen mode is the most suitable for browsing Then you can enter the slide mode, automatically switch to landscape screen, you can default full screen, only gives the key operation icon Small Part of the user view flip the screen, switch back to vertical screen mode, this part of the user, we should give him a lock screen function 4. Reading class

Read class, users need to see larger fonts, as much as possible to enhance the reading experience In order to minimize interference, navigation bar and toolbar can be automatically hidden when the user needs, touch the screen again to evoke the navigation bar And toolbar try not to hide the status bar of the system, if you must full-screen mode, you can give the system status within the interface - power, signal and time

5. Tools

Can have its own independent UI interface, horizontal screen follows the vertical screen design style, but the layout to adjust pay attention to the structural identifiability, horizontal screen structure should be conducive to both hands, vertical screen is conducive to one-hand operation 6 other types of

When necessary, you can re-design but be careful, it is best to avoid reloading the content, because that will make your horizontal screen switching efficiency is reduced

Fourth, the design strategy 1. Cross-platform mobile phone products cross-screen mode design principles No matter what the direction, remain focused on the main task pay attention to your animation sometimes need to re-design from the vertical screen navigation bar and the toolbar will be squashed Taking into account the need to do all you have to do before the location of the lost

2. Flat products cross-platform horizontal screen mode design principles should be able to run in all directions, to meet user needs to consider changing the way to display auxiliary information and functions to avoid changing the layout at your discretion, if possible, should try to avoid reorganization of information, rearrange the text Offers a unique splash image for each direction

Foreigners to vertical portrait mode called portrait mode, horizontal screen mode is called landscape mode, although the portrait mode and landscape mode layout slightly different, but the interface focus must be in the user's attention to the function and process, elya horizontal screen strategy These superficial researches are only for reference, hopefully can help you.

Source Address: http://elya.cc/mobile/955.html