跳到主要内容

排版层次的3大用途

+$There is an age-old technique in graphic design used to communicate to the viewer or reader the organisation of content and place emphasis on important elements. It's called hierarchy – and specifically visual or typographic hierarchy.

+$It's employed by graphic designers as a core design tool, and it is essential in making a clearly scannable and readable page, especially when that page features a large amount of content. Hierarchy helps people know where sections start and end, and also enables them to easily skip around the page.

+$We use some simple signals and cues to help create hierarchy. For example, we denote paragraphs with a line break. Or we use bold or italics to communicate emphasis. Or we might even change the typeface to show difference, like with a section header.

+$A general rule of thumb is to use no more than two signals or cues at one time. This will help you keep your design solution elegant and not tacky. Like using bold, italic and underline all at the same time – too many signals.

+$A great way to create a design system is to start with the body copy size, then scale your signals and cues from there. We start with the body copy because it's read the most and forms the base for the design. Next, scale up the type size to approximately 200 per cent for the primary header, then 150 per cent for the secondary header, and so on.

+$Here are three superb examples of these techniques:

01. +$The Ascend Agency

The Ascend Agency

+$The Ascend Agency

+$The Ascend Agency+$’s website has a very varied typographic hierarchy on its content pages. This helps make it very easy for users to scan the page and absorb information.

02. +$Oculus

Oculus

+$Oculus

+$The content pages for+$Oculus+$’ website uses basic signals to display hierarchy very successfully.

03. SuperFriendly

SuperFriendly

SuperFriendly

+$The website for design agencySuperFriendly+$employs a solid typographic hierarchy across all its homepage content. This not only draws users in but also makes it easy for them to scan the page very quickly.

基因克劳福德

+$Gene’s mission is to work tirelessly to provide inspiration and insight for developers via his website无与伦比的风格。本文最初发表于第272期网络杂志

喜欢这个?阅读这些!



翻译字数超限