The saving way of mobile design space

Design comes from life. Recently in the decoration of their own rooms, browsing a number of related home design materials, found that interactive design and home design have a lot of similar places. Small huxing Space Limited, mobile phone screen also only slap size, in two small space design must be a lot of common way. Ctrip ued classmate is also heart, very early for our dedication to a wonderful analysis (http://ued.ctrip.com/blog/?p=2905). For such an interesting subject, I would like to say a few more words.

A good cook, must be proficient in cutting a variety of knife skills: straight-cut, side-cut, push-cut, Rache, turn-cut .... Design as, in the space-saving way, there are also some basic "knife" can help us create sophisticated app.

1. Poly
That is, gather, receive, the most simple way to save space, you can easily belong to a class of things together to put together, office supplies, daily gadgets, cosmetics, clothing, household medicine ... can be installed, all put it down.

Mobile design often use Actionsheet, popover these "containers" will be a variety of menus, notices, related items receive a piece.

2. Possession
Poly and hide a bit similar, the former biased to classify, the latter is biased in favor of the hidden (a bit difficult to understand the words can imagine the winter clothes packaging process, first with the storage box will be put away clothes, and then thrown into the wardrobe, here is involved in the process of first gathering after the hidden. If some of the things are not often used to hide, hide drawers, lockers, hide the toilet ... Will save a lot of space.

There are three types of things that can be hidden in a mobile design:
(1) Tangible controls: such as buttons, labels, menus, navigation ...
(2) Gesture and gravity induction: Long press DELETE, horizontal slide page, shake a shake is this kind of;
(3) Operation path: The less commonly used functions or settings to hide a little deeper, through layers of progressive to achieve the goal.

It should be noted that the hidden is a simple but "slightly rough" way, mobile design is not like private space, more for the mass design, they do not know where your room scissors to put, so, if it is more important features, provide some simple guidance tips bar.

PS: For instructions on how to design a guide, refer to
Http://www.alibuybuy.com/posts/66389.html
http://ucdchina.com/snap/11231
....

3. Change
Substitution, that is, the use of shared space to show alternately. When the stage can only allow a person to perform, take turns. There are many dual-use design at home, and the flip of the desk and the leisure bed is the perfect way to save.

Mobile phone screen space is very limited, a small corner can become military battleground, through the use of shared space, you can complete a number of interface jumps and transitions between different states. Tab, Slide page, and a variety of rollover switches are shared in a way that hosts different information.

4. He
Merger, I see and "poly" a bit similar, but the "merger" more inclined to integration, not only a piece, but also mutual interference, forming a whole. Sofa bed is a typical example.

Mergers in mobile design are often seen in combinations of various components, such as input boxes and labels, navigation and pull-down menus, input boxes to the URL bar, and cancellation/refresh buttons.

5. Divide
On the basis of simple admission, if the space continues to be refined, divided into different "small pieces", will make the arrangement more orderly.

Nine Sudoku, grid, area division ... If you use these grid combinations flexibly in a small screen, you will make the interface look even more neat.

6. Pressure
Winter over, thick quilt, pillow, thin cotton-padded clothes will be collected, vacuum compression bag is definitely a good helper to receive.

There are also a lot of squeeze cases for mobile design. iOS4 's new inbox presentation is a Top-down squeeze, and in addition, Facebook and path's extrusion layouts from left to right have recently been particularly popular.

7. Shun
Directly using the existing corner or edge position, follow these special "points" to design. The following combination bookshelf is close to both sides of the wall corner position, this clever design along the inflection point can save more space for the wall.

In mobile design, there are a few of these special areas:
(1) Screen edge
(2) Corner
(3) Control edge
(4) System status bar

If you can make good use of these special areas, there will be a variety of unexpected effects. HIQQ's lock screen design from the original "point-to-point" evolved into "point to side", very clever use of the screen edge, greatly reducing the operating density.

Finally, the summary of the next seven steps: Poly, Tibet, change, combined, divided, pressure, shun. The above 7 steps only for space-saving basis "knife", the actual situation will be more complex, often need to combine the use. The fun of design is here, but it's unpredictable.

Finally, are you ready to do your own room next?