Link:/question/23506420/answer/24955628
Source: Zhihu.
The copyright belongs to the author. Please contact the author for authorization for commercial reprinting, and please indicate the source for non-commercial reprinting.
Conclusion:
In a page with a square as the basic element, an obvious circular area has a very good effect (just the emphasis effect needed by the avatar), but if the circular area appears in batches, it will conflict with a large number of other square outlines in the page.
Take the scene of the space page as an example:
Headline, single summary, pictures in the summary-the most basic (non-avatar) picture elements, mostly square. The reason may be that it may not have a good effect when dealing with irregular map sources with large orders of magnitude and uncontrollable quality. It is said that the front-end performance pressure should also be considered.
Moreover, the screen of our computer or mobile device, the window of the browser and the various areas on the page usually have obvious square outer edges.
As shown below. Entrainment of bootleg goods: I really don't know why the design team in Weibo especially likes to use guide wires.
& ltimg src = "/ d 3507423 a 2d 7 a 00796 C7 a 466 b 3d 7 ce 36 _ b . jpg " data-raw width = " 628 " data-raw height = " 346 " class = " origin _ image zh-light box-thu mb " width = " 628 " data-original = "/d 3507423 a 2d 7 a 00796 C7 a 466 b 3d 7 ce 36 _ r . jpg " >
When you look at a group of squares and squares, if a circular area appears alone, it can instantly attract the visual focus and appear tall.
In the scene of the space page, if it is worth/should be done, the owner's avatar counts as one. As shown below.
& ltimg src = "/02 EAE 796880d 67094586 f 2 144 ab 79748 _ b . jpg " data-raw width = " 6 1 9 " data-raw height = " 333 " class = " origin _ image zh-light box-thumb " width = " 6 19 " d ATA-original = "/02 EAE 796880d 67094586 f 265438
But if there is a square circle, a big wave of small round heads will come, and trouble will follow:
& ltimg src = "/ 2 c 44d 4 a 2 a 383725 bdda 568 ca 74 b 5 cafb _ b . jpg " data-raw width = " 620 " data-raw height = " 346 " class = " origin _ image zh-light box-thu mb " width = " 620 " data-original = "/2 c 44d 4 a 2 a 383725 bdda 568 ca 74 b 5 cafb _ r . jpg " >
The above picture is strictly aligned with the grid+outline-such drilling techniques have been used! This page is still a mess.
If it is a waterfall, Virgo can still live.
The mobile terminal has a small screen. When showing users in batches, if you use a small round head portrait, you can consider weakening the square outline to avoid visual conflict:
& ltimg src = "/6f 2 fff 66342 f2e 03 1 1 df 4333 abbf 755 c _ b . jpg " data-raw width = " 3 14 " data-raw height = " 473 " class = " content _ image " width = " 3 14 " >
Examples of improper use of round heads;
1, there are obvious square outlines and obvious circular outlines in the page, and the avatar is not the core element to be emphasized in this scene.
2. This page has other shortcomings: there are many fonts, font sizes and colors, and the icon styles are different. The icon font at the bottom of the picture is different from the icon font in the bottom navigation.
& ltimg src = "/03840d7e48a60cdfc2b02cd31bde646 _ b.jpg" data-rawwidth = "313" data-rawheight = "475" class = "content _ image" width = ".
Edited on 20 14- 12-24.
15 comments
thank
share
collect
No help
report
The author reserves the right
bale
25
agree
Objection. Your name will not be displayed.
ataxia
Interactive designers in re-employment seek recommendation.
25 people agreed.
As for the difference between a round head portrait and a square head portrait, I think so: which is more efficient in recognition, a square head portrait or a round head portrait? 1. What is the goal of the avatar? My understanding: the avatar is for user identification. There are many ways to identify different users: user name, user ID, avatar, email address, mobile phone and so on. Because the human brain is better at receiving and processing images than words …
Show all
As for the difference between a round head portrait and a square head portrait, I think so: which is more efficient in recognition, a square head portrait or a round head portrait?
1. What is the goal of the avatar?
My understanding: the avatar is for user identification. There are many ways to identify different users: user name, user ID, avatar, email address, mobile phone and so on. Because the human brain's ability to receive and process images is much stronger than that of words, and the recognition efficiency of human faces is higher than that of other parts of the human body, many Internet users generally adopt the way of user's head portrait.
The square head portrait and the round head portrait have the same purpose, both of which are used for face recognition to identify users. The features of human face are as follows:
& ltimg src = "/ 1 508 baaa 787 ad 7 c 5234 F3 F2 d 27 D2 ff 9d _ b . jpg " data-raw width = " 900 " data-raw height = " 584 " class = " origin _ image zh-light box-thumb " width = " 900 " data-original = "/ 1508 baaa 787 ad 7 c 5234 F3 F2 d 27 D2 ff 9d _ r . jpg " >& ltimg src = "/ 12b 1 7 bbce 33 ca 3 fc 8382d 9d 97 b 7 ad 3 a 2 _ b . jpg " data-raw width = " 1200 " data-raw height = " 1 390 " class = " origin _ image zh-light box-thumb " width = " 1200 " data-original = "/ 12b 65438+
2. The difference between a square and a circle
Square and circle are both the shapes of the scene, and the difference of their visual focus is that the focus of the circle is very focused, at the center of the circle. The focus of the square is at four o'clock in nine squares.
& ltimg src = "/52 C7 EFE 79 1da 9 1283 df 0004 b 646274 1e _ b . jpg " data-raw width = " 993 " data-raw height = " 1 000 " class = " origin _ image zh-light box-thumb " width = " 993 " data-original = "/52 C7 EFE 79 1da 9 10& ltimg src = "/ 884 BF 3027 BF 32 a6 E3 f 1 6b 75 A8 afba 376 _ b . jpg " data-raw width = " 500 " data-raw height = " 375 " class = " origin _ image zh-light box-thumb " width = " 500 " data-ori ginal = "/884 BF 3027 BF 32 a6 E3 f 16b 75 A8 afba 376 _ r . jpg " >
3. What pictures do users usually use as avatars?
Ideally, users use their own real face photos as avatars. In reality, users will use various pictures as avatars. It is not easy to take photos on the computer, so QQ provides many different pictures, such as landscape photos, still life photos, cartoon characters and other default avatars for users to choose from. After the rise of smart phones, it is very easy for users to take photos, but for various reasons such as privacy, many people still don't use standard real face photos as avatars.
In addition, if the user is an enterprise/company user, the logo of the enterprise/company is generally used as the avatar.
4. Which is more efficient to identify a square head portrait or a round head portrait?
A. If the user uses the standard face photo as the avatar, the circular avatar can make the user ignore the background (flowers and plants) of the photo and focus on the face more quickly. At this time, I tend to be more efficient in identifying users with circular avatars. However, it is not absolute. It is easier to identify the slight difference in a certain position of the head of two twins, and the advantage of more square focus will be easier to identify.
B. If users don't use standard face photos as avatars, there is little difference between them, because at this time they are looking at the whole photo instead of focusing on the face.
C. But if the user is a business, a square head portrait is more suitable. Because the logo of many enterprises are rectangular, the use of circular avatars may not be able to accommodate the underground, or they are not harmonious together.
5. The circular outline can better indicate to the user that this is an avatar.
Square pictures are very common on the internet, product drawings are square, and thumbnails of various social networking sites are also square ... Square pictures can't make users think of avatars immediately. Circular pictures are not common, and the photos taken are rectangular. The applications of circular pictures on the web are mainly avatars and icons. The circular picture can better let the user know that this is an avatar.
In addition, when users upload personal photos, if they use a circular profile avatar, they can make users more inclined to use photos of faces as avatars. Because many landscape photos that need to see the whole picture are not suitable for focusing on a certain point.
test
All the above are personal ideas, which may be inaccurate and difficult to convince everyone. I think we can do a simple test to see which one is more efficient in identifying users, the square head portrait or the round head portrait.
A. Prepare the information of 500 users (avatars, nicknames, signatures), and try to simulate the common forms of avatar display.
B. Randomly find 30 users, please summarize their information and print it on another page.
C invite 20 people to come over and show them the printed materials of 30 people. Let them find out these 30 people from these 500 users, calculate the time and see which one is more efficient.
& ltimg src = "/573 DD 8354 19 faf 2583 feaceaa 78 b 5065 _ b . jpg " data-raw width = " 1345 " data-raw height = " 7 1 8 " class = " origin _ image zh-light box-thumb " width = " 1345 " data-original = "/573 DD 8354 19 faf 28& ltimg src = "/ d 033 c 83 CCB 12c 87 f 0a 26 faf 1f 595 a52d _ b . jpg " data-raw width = " 1345 " data-raw height = " 7 1 8 " class = " origin _ image zh-light box-thumb " width = " 1345 " data-original = "/d 033 c 83 CCB 12 c8
Published on 2014-11-02.
Three opinions
thank
share
collect
No help
report
The author reserves the right
bale
brave
Think about it and do it.
Two people agree.
Learned the analysis ideas of the previous respondents from all angles. Now, a slightly emotional short answer is provided: the head of a person is closer to a circle, and the use of a round head portrait is more conducive to highlighting the head characteristics of a "character"; After all, human form is not square; In fact, a circle is a point, which is more likely to be the focal point of vision than a square. A square head is usually a person (or protagonist) and a ring …
Show all
Learned the analysis ideas of the previous respondents from all angles. Now provide a short answer with a little sensibility:
The head of a person is closer to a circle, and the use of a round head image is more conducive to highlighting the head characteristics of a person; After all, human form is not square;
In fact, a circle is a point, which is more likely to be the focal point of vision than a square.
Generally, a square head portrait is a combination of human (or protagonist) and environment, which shows the relationship between human and environment;
Summary: although the circular head portrait will have a stronger sense of prominence than the head portrait; But this is not the only factor to consider when choosing an avatar shape. Other factors to consider are:
Harmony with other elements of the page; (As someone mentioned above, the conflict between square and circle is essentially that too much focus on the page is easy to appear messy)
The processing cost of circular pictures and the front-end display cost of the network: after all, all kinds of network pictures that can be obtained by taking pictures are square;
……
The two shapes of avatars have their own characteristics, so we should consider the above factors and the meaning that the avatars need to express.
But then again, has anyone noticed the interactive experience when setting a round avatar on the mobile phone client? At least I feel that the interaction details are unnatural.
How to make a round head portrait?
Select a picture: select from an album/take a photo with your mobile phone.
Cut the selected picture to the size supported by the system: usually drag the rectangular clipping box and select the area to be clipped as the avatar in the selected large picture. In this process, a thoughtful application will support zooming pictures, so that the rectangular clipping box can hold more things, while the general app is not so thoughtful;
After determining the position of the rectangular clipping box, click OK, and the system will automatically process the selected rectangular area into a circular head image;
Did you find the problem? In the process of intercepting the avatar, you always see a rectangular picture, but the final avatar needs to be processed into an unknown circle in a black box, so it is impossible to see what you get. Under normal circumstances, the round head is a little eccentric, which is very unfriendly to obsessive-compulsive disorder and Virgo, okay? From the user's point of view, the square avatar is easier to make. After all, the photos we took were all square, and what you see is what you get.
So don't blindly follow the trend and use a "fashionable" round head. Designers or product managers need to consider not only the harmony of page display, but also the operation experience related to round head, such as making and previewing avatars.