Viewing the design of the area portal from the Big Guangdong Network: Icon column

Introduction: Tencent Big Yue online line. From a design point of view, there are still quite a few places to study. Compared to the design pattern of the large portal, there are still many differences in the design specifications of the regional portals. In particular, he has recently been responsible for this aspect of things, feeling more deeply. From this article, I try to do a superficial analysis of the area portal products from the perspective of icon design, frame layout, column navigation, interactive design.

　　"Icon article"

• Home _ Leading navigation

Major Guangdong's core products are concentrated in the "Cantonese life" in this area, the rest of the columns are owned Tencent product system.

From the color, the big Yue uses the Orange department's bright tonal system. This is very similar to the south of the south is the net. Compared to the information-type Web site, Tencent is the main regional product line. The layout of the product from the navigation can be seen slightly one or two.

• Icon Order design principles

This version of the big Yue in the design of a feature, I summed up should be called: "Loose layout, polylines and rounded corners."

The "core column" uses rounded corners plus an undertone.

In the loose layout system, the small area of the color block is very prominent. When browsing, the big Yue Net maintains each screen to appear 2 big color blocks plus 3-4 small color blocks, in order to control the reading when browsing the moderate jump sex. The rest of the secondary content takes a list.

According to this principle, the location of the product icon appears to me to feel slightly wrong.

1 The product area mixes the picture area, the visual focus is dispersed. Products are not easily found by users, if the main push this piece of content, you should consider the product area to leave a wider range of breathing. Now the arrangement is slightly congested.

2 Group purchase area (upper right corner) treatment is quite worth learning. If you do a perfect background image form, this area is overcrowded, designers cleverly use the language and white space to weaken the visual level of the region, while through language to appropriately enhance the interest of the region, increase the user's click-through. (However, if the effect is to be signed, the most feared scenario is that the editor replaces the font or color according to his or her preference.) So, the effect of rendering is. )

The "subordinate column" uses a polyline + through + gradient

Compared with the giant portal, the big Yue is a petty life route. This point from the design of the secondary column can be clearly felt. Mixed fashion magazine design ideas, column processing appears to be more exquisite.

1 in the digital and English auxiliary naming way, will make the design appear more brim. Here also to fully consider the color factor, the column changes too rich at first glance feel good, but for the network media, may be inappropriate. Because of the particularity of the page, the possibility of short time change between columns is not big. Although each column is beautiful but does not do the renewal for a long time, it is possible to increase the user's reading fatigue, and ignore the content update under the column.

Of course, this is only a humble opinion, but I think that the column design more should serve the content, rather than distracting. At the same time, in China, is English really that important? English in the Chinese web page more should be used as a decorative ornament it? Is it necessary to enlarge to this extent?

"Channel Core column" uses the pattern + picture + Large area color block + Big button

Big Yue net to the channel product products definition is very in place. The internet has this law, as long as a certain function to meet 90% of the requirements, nature can recruit users to use. And often the product of all things, ultimately is the failure of the end. Concentration is indeed an excellent quality in the online world.

Keep a fist product on each channel and put it in the most eye-catching position.

1 The core product is placed in the first screen, tailored to its special style. Of course, according to the different location of each channel, this is not absolute. However, I suggest that in order to maintain the integrity of the site, it is necessary to fix the core product location for each channel. At least, new users through this consistency, quickly grasp the rules of the use of the site to facilitate their participation in the activities of the site.

2 The custom rule of the product:

· Level information: Product icon + number of participants + functional large button

The purpose of the product is to make it easy for users to participate, especially local websites. It is easier to call users to participate in offline activities. It is absolutely necessary to make the product core functional area visually emphasized.

• Level two information: column name + auxiliary graphics

Remind the user again what activity you are participating in, enhance the recognition of the column, reduce the error rate of participation.

• Level three information: the rest of the auxiliary information

Includes other activities, activity participation, editorial recommendations, etc. However, the big Yue in this piece does not particularly ideal, different channels of information processing methods are many different. Can cause some users to get confused, and the size and style of each area is very different, requiring the user to spend a considerable amount of time sifting through useful information.

"Summary" of the column distribution and icon processing of the big Guangdong Net

• Life in Guangdong

Things (News) to buy a house (real estate) to travel (travel) Amelie (fashion)

Entertainment Eye (Entertainment) Find a car (car) food World (food) Financing Shop (finance)

• Home _ Main Products http://gd.qq.com/

• Channel _ main product display mode (real estate) http://gd.qq.com/auto/

• Channel _ main product display mode (tourism) http://gd.qq.com/travel/

• Channel _ main product display mode (fashion) http://gd.qq.com/lady/

• Channel _ main product display mode (automobile) http://gd.qq.com/auto/

• Channel _ Main product display Way (food) http://gd.qq.com/food/

• Channel _ main product display mode (digital) http://gd.qq.com/digi/

Article Source: Stinky does Sky reprint, please indicate the source link.