Unlimited screen space: Mobile Interface expansion from the perspective of space

Mobile products are almost omnipotent. They can satisfy various user needs anytime and anywhere. What about mobile product design? Have you ever encountered A similar situation? PM xiaoa said: to increase the performance of the product, add an entry to the interface. Mr. B said: the content is too small. It is not difficult to expand the page. Mr. C said: Can I squeeze multiple functions? Users have real needs...

The interface space is limited, but the content needs are unlimited. No matter how large the screen size is, no matter how big the screen size is, it cannot escape this fate. Just like the space of a house and the things in it, there will always be things that cannot be placed. Since it is a similar problem, can we find a solution from the same perspective?

In architecture, space mainly refers to the three-dimensional physical space of the geometric meaning felt at the visual level, that is, the three-dimensional feeling of the people in the space on the environment. Therefore, spatial expansion is to find solutions from different dimensions, including storage, hierarchical segmentation, and visual impression expansion. In terms of mobile product experience, the most basic thing is how to make limited screens carry more functions and make users feel the comfort of space. In this paper, we will talk about the expansion of the screen space from four dimensions: information storage, hierarchical information, face changing, and illusion.

Storage

As the name suggests, you can collect unnecessary things. On the surface, you can find the desired content. This method is especially suitable for the integration of fragmented functions.

1. storage methods are classified into the following three types. A. Define the storage rules and content

That is to say, it is required to organize the functions to be presented to the user. The key point of this kind is the drawer label, so that the user can close where it is, and where the entrance is.

What is the storage format? There are many types of interaction models, such as the Path sidebar, up and down folding, sinking, and processing methods for Android system-level operations. The purpose is to hide and collect the relevant information when the user does not use it, and there is an endpoint that will always exist. When the user needs it, It is very convenient.

B. After the storage rules are defined, users can expand the content at will.

This storage method is especially suitable for notebook or calendar applications, because the main information source of such applications is the user itself, and the magnitude of information cannot be estimated and controlled vertically. Therefore, such a storage rule is well defined, but the method of unlimited content is particularly applicable. Is a typical notepad information storage method.

C. You can customize rules and content to organize and replace the drawer content at any time.

Since the space is handed over to the user and how to separate and store the space is customized by the user, the key to this method is that "throwing" and "loading" are both convenient, you can easily and quickly load the content into a drawer. The most direct example is the iphone app interface, which can be dragged and stacked to form a storage, which is very convenient to take out.

2. Storage style, mainly divided into two types: "warehouse drawer" and "warehouse drawer" A. drawer with doors

It means that even if the drawer is closed, the information in it is stored, there must also be a fixed portal time prompting the user where to open, like the sidebar, there will always be an Open button.

B. Warehouse drawer

It means that the opening and closing of the drawer door are triggered by advanced gesture operations, and the door is not required. You only need to know how to enable the door, such as long-pressing and sliding specified information bars.

In general, advanced operations correspond to relatively advanced storage and are not commonly used. users know how to enable them, and even the space of Drawer doors can be saved.

Hierarchical Information

If space is limited, you can split the space into modules to display the content more effectively. No matter the list, waterfall stream, or other forms, the remaining space is always found from other dimensions. Similar to road traffic, aircraft, road traffic, and underground rail parallel operations make full use of space. Page jumps at the same level and lower level in the mobile interface can bring users closer to the real sense of spatial hierarchy with the help of animations. Including

A. Same-level multi-tab Architecture

B. Lower-level filtering includes drop-down and floating layer Filtering)

C. immersive next-level experience

That is, the principle of camera closeness, size, and size is restored, and more information pages are displayed through hierarchical segmentation. The advantage of this method is that each interface can be expanded exponentially.

(The above is just a list of other types, and content with the same attribute can be expanded)

Face changing

In Web design, the status bar is a status bar. Even if there is no status or empty space, the mobile space is precious, so other content is displayed when you do not need it, it is also a solution. All code-based virtual spaces can have the If-then condition.

For example, in XX, the button status is A; in XXX, the button status is B. Or, different content can be displayed in the same region and different operations can be carried.

A. different statuses are displayed in the same region.

That is, the web status bar logic is continued, and more state display is integrated to the extreme to perceive situation changes in real time as a dialog window for direct communication with users, carry more information to save space.

B. display different functions in the same region

Similar to the prompts in the input box and situational buttons, different function buttons are adapted according to different box attributes. For example, in the contact list, the name of the contact list is displayed by default. If you need to search for a contact list, you can open a search box to enter the name. The same region undertakes two different tasks and content in different states, but the limitation of this method is that the scalability is small. It is suitable for collecting small functions. Is the contact list in an application. A very direct small point is to integrate the contact list display and search contact operations into the same region, which is easy for users to accept.

Similarly, different functions in the same region are more obvious in the input key.

Show contact list

Expand search box

Currently, mobile applications are more concerned with the research and extension of this "face changing" logic. Many products have also introduced the concept of situational awareness, that is, to expand the situational awareness of mobile devices, add the if condition to maximize the space utilization. This includes the hot discussion of Smart Bar.

Because mobile devices have various sensors that can collect user information in real time, these are the prerequisites for making applications smarter.

Add one point

In interior design, because the mirror has the reflective and imaging Functions, it can not only increase the brightness of the interior, but also expand the space and enrich the interior decoration effect. This kind of illusion can also be applied to the Mobile Interface Design. Through lightweight visual elements and increased field effects, the user experience can be smoother during operation, from feeling to extended space effect. Of course, this is more abstract to an emotional design level. The specific application methods are worth discussing.

In the same way, the main screen is unlocked. One is the point-to-point interface, and the other is the point-to-edge interface. Which one looks more open? Obviously, the second type will bring a scalable sense of space to people. The first type is completely flat, and it is also a piece of interface information, the second is to give a more extensive psychological suggestion, allowing users to feel unlimited space through immersive interactions.

Summary

Well, from the perspective of the extended architecture space, the above four layers correspond to the mobile application from the storage, hierarchical information, face change and visual illusion, respectively, I hope that it will bring a little inspiration for the design of extending the blank Information Room in mobile apps. More methods can be expanded at each layer. Let's continue to accumulate and summarize them in the design process, make full use of the screen space, so that limited space can be infinitely extended.