Interaction Design: Exploring the relationship between content and container

What I want to say today is the relationship between the content and the container, by the way the problems encountered in the previous design and we discussed together. Let's start with the software setup. (here with QQ settings for example)

The setting of a software, often referred to as a system setup, typically hosts all configurable options for the software. By navigating, the content is placed under different tabs.

Because the content division is according to the Product function logical division, therefore the design frequently encounters the question is: the different tab below content how many is uncertain, to the typesetting can bring the very big trouble.

As normal, the "Start and log on" content fills most of the layout, and the settings interface looks substantial.

But some tabs below the content is very small, the entire interface is one or two lines of words, large tracts are blank. Due to the imbalance between content and white, a certain visual problem is caused (the following picture is my own P's:)

Or, some of the tabs below the content of the interface is beyond the height ... Even if this problem does not occur in a short period of time, with the adjustment of product function, more and more configurable items will arise.

The following illustration of the setting of a message reminder, if I want to add one more line of content, I have to reduce a row on the existing content.

It has been a headache for this problem before typesetting. When content is too small, it tries to increase the content or visual elements in order to visually balance; when there is too much content, it adjusts the directory structure, splits one menu item into two, or repeats the content as much as possible and compresses it in one page.

But this introduces a new problem:

Adding visual elements for no reason is not what users need

In order to put more content into the settings interface, sometimes have to according to the amount of content to divide the menu items, rather than simply based on the logical relationship

Unsustainable (changes in product requirements are likely to result in a prior layout change)

Then I thought of the oft-mentioned phrase in industrial design: Form follows function. This sentence to learn the design of the students should not unfamiliar, the earliest by the architect Sullivan, and later became the most important one of the Bauhaus. This statement has had a far-reaching impact on the entire design community. Because it is so famous, and easy to trigger "is the form of important or functional" controversy, so here only "form following the content" as the title, dare not to talk about this big.

In fact, there is already a design to solve the problem I mentioned above. Yes, the answer is Apple's system setup interface.

A classmate of Windows environment can install safari for PC and look at its preferences. Here I truncated the "General" and "AutoFill" two interfaces, as shown below

Safari each tab below the content is not the same, the maximum of more than 10 lines, at least 3 lines, and the height of the interface will be adaptive to the height of the content!

When switching between tabs, Safari's preferences will smooth over the interface, perfectly solving the problem I just raised. I think this is the form of following content.

In this way in the interface design process, designers can not consider whether the content is placed, the interface is beautiful these problems, the content in the most reasonable way to show out.

I always think that a good design, in addition to design, should be able to free designers at the same time, no longer do repetitive design.

In fact, the design of the Apple interface has never been maximized to be seen. The traffic lights in the upper-left corner of the window, the red is off, the yellow is minimized, and the green + number, just the window to the most appropriate size (sometimes the appropriate size is maximized). The Safari for PC brought this design idea to the PC and designed a highly variable preferences interface with content.

The previous question was solved, but if the form follows the content, how wide is the interface? Can the width (should) follow the content?

Can the height and width change at the same time to fit the content, which will make the user lose control of the interface?

Is still an example on a PC platform. Win7 students can try the system with the calculator, there are 4 modes to choose from, "standard", "scientific", "programmer", "statistical information." In 4 modes, the height and width of the interface are different. In the switching mode, the Calculator interface in the upper left corner of the constant switching size, no obvious experience problems found.

This base point in the upper-left corner is important for "form following content", as shown in the following figure. Because the content of the surrounding area of this base point will not be shifted with the change of the interface.

The position of the Win7 Calculator's title and menu will not be offset by changes in the interface size, thus maintaining a sense of stability in the interface change process. The drawback is that minimizing/maximizing/closing the position of the button will change. (so Apple puts the traffic light in the upper-left corner of the interface?) ）

And Safari's preferences because the navigation occupies the top row, so did not do width change adaptation content.

Want to say about this, interested students can be compared with the Win7 system settings, some details of the place design is very interesting.

Not only the client, in the Web program, our thinking can not be limited to the current page or the new tab open? Would it be better to pop up a new window so that the window fits the content size?

This article does not want to focus on the form and function of the weight of the discussion, just put their actual work in the problems encountered and some ideas and people to discuss. Finally give you the patience to read the students worship a later age!