1. Clear and lightweight product logic

Occam’s razor principle also applies to product architecture design. The simpler the architecture, the more conducive to product growth. Clear and lightweight product logic will reduce the burden on users, thereby improving interaction efficiency and pleasure.

Analyzing MaterialDesign, you will find that Google has summarized the hierarchical relationship between two types of complex content information, namely Card and Tile (List

and other similar definitions belong to the same content information level). Other definitions are mostly used for UI structure and details. Among them, Google defines Card as a multi-functional information aggregation portal. The information level should be relatively high, reflected in the Z-axis should be higher than other information, visually represented by shadows and rounded corners. The tile (or similar information list) is a module display of (similar or related) information. The information level should be lower, and the Z-axis should be slightly lower than other information, and there should be no shadows visually. No corner filleting. The result is a product object that is visually more efficient, simpler, and more "real" to the physical world.

The most recent project I took over was the website-wide redesign of Gekec.com. Gekec is the intersection of Geeks and Makers. They like innovation, technology, and trendy consumer technology products, and they like

creating products by themselves. Gekec.com is a gathering place for such people. The product includes various functions such as e-commerce, information (or h5 promotion), disassembly, and community discussion. Before the revision, the logic was complex and the functions

were numerous. At the beginning of the revision, when the author got to know the Geke group, I thought that the rational and geek-heavy Google style might be the most suitable visual system for Gekec.com. However, the complex product logic

cannot satisfy users. It brings efficient interactive experience and pleasant usage experience, but it cannot be visually deduced and changed through Material

Design, so sorting out a clear, lightweight and convenient visual unified product logic becomes the first step. One task.

The full functions of Gekec.com’s products will not be described in detail here. All ProctFeatures are designed to achieve IKEA-style experiential design. After sorting, they can be summarized into three layers. The first layer is the experience layer (multi-entry homepage cover) ), the second layer is the shelf layer (including the mall module, disassembly module, and experience module), and the third layer is the detailed and operational layer;

As shown above, the lightweight product structure can be easily designed deduction. For example, the first layer can use H5 flexible layout to create a comprehensive product experience, and the relationship between the second layer and the third layer can be expressed using Material

Card and Tile. Card expresses the aggregation and entry of all information, while tile expresses the listing of similar information. Jumping from the card to the final page should have an experience of card expansion.

2. Response methods suitable for UI deduction

On the basis of clear and concise product logic, a set of full-size response methods suitable for MaterialDesign changes has become the core of complex responsive web design Content and response methods can directly determine the response logic of functional modules and changes in UI. In actual operation, the determination of the response method mainly involves determining the grid and proportion.

1) Grid

The web grid system is developed from the flat grid system. For web design, the use of the grid system can not only make the information presentation on the web page more beautiful and easy to read, but also more usable. Moreover, for front-end development, web pages will be more flexible and standardized. The specific meaning and usage of the grid system will not be repeated here. Interested friends can refer to some articles on Taobao UED:

Research on Web Page Grid System (1): The Secret of 960

Research on Web Page Grid System (2): How to Cut the Cake

Research on Web Page Grid System (3): Granularity Issues

Research on Web Page Grid System (4): Technical Implementation

In the Gekec.com project, after sorting out the product function modules, the author used a 12-grid system in order to satisfy the equal division of pages into 2, 3, 4, and 6 pages. Note: The establishment of a specific grid system should be determined by the product and design. The grid system is not omnipotent, and the determined grid system can serve as a normative reference for the entire responsive design.

2) Proportion

A. Proportion

As mentioned above, the 12-grid constrains the content area of ??the web page, and the content of the web page often does not occupy the the full width of the screen, instead leaving gaps on both sides to create a sense of space. Due to the limitations of the screen, this sense of space is more important on mobile devices, as shown in the figure. However, imposing a fixed marginpixel will make the proportion of the 12 grids variable, making it difficult to control the design effect.

So the ratio should be the ratio of the 12 grid width to the screen, that is:

12 grid width X proportion = screen width (critical point)

Excellent and clever proportions can ensure that web design is presented with 100% pixels on all mainstream screens.

Here is a brief explanation. If a 200px wide element is on a 1200px wide screen, its proportion is 16.67%. Using the same logic, this proportion will be on a 1024px screen

16.67% occupy 170.67px. In this case, a certain physical pixel cannot occupy 100%, which is unacceptable in the eyes of perfectionist designers. And clever proportions can allow elements to occupy 100% of the pixels on all mainstream screens, perfectly demonstrating the design intent.

B. Critical point

The critical point (breakpoint) refers to the key point where the layout of a responsive web page changes, such as "When the screen width is less than 480px, the... style is loaded. Load the style when the width is between 480px-

600px". There are countless sizes of responsive web pages in theory. It is impossible and unnecessary for us to design for every size. What needs to be done is to select a few critical points for design, and design at two critical points

The layout between them is a continuation of the previous critical point.

The overall purpose of critical point confirmation is to ensure that the page loads the corresponding style on mobile phones (small screens), tablets (medium screens), and PCs (large screens). However, designers with less experience often One problem that worries me is how to deal with high-pixel mobile phone screens and low-pixel tablet screens. For example, designers may worry about loading large-screen pages on 1080p mobile phones, or loading small-screen pages on 720p tablets.

But it should be noted that responsive web pages are different from APP screen adaptation. The web page is a product immersed in the browser. Only the screen pixels activated by the browser can be considered as the reference point of the critical point. To this end, the author

did some tests. As shown in the table below, it can be seen that Few 1080p phones only start 360px in the browser, while the magical iPad displays 1024x768px regardless of whether it has a retina screen or not, whether it is a mini or not.