For web designs, the hero is the first thing viewers will see. Open with the most characteristic thing in the subject's world, in the form that is most appropriate: a headline, an image, an animation, a live demo, an interactive moment, or other treatments. Be deliberate with your choice: a big number with a small label, supporting stats, and a gradient accent is the default treatment, so only use it if that's truly the best option.
Typography carries the personality of the page. You don't need a different typeface for display or headline text and body content: use one family or two, and if two, make them clearly distinct.
Choose your typefaces deliberately, not the default families you would reach for on any other project, and set a clear type scale following the default guidance of The Elements of Typographic Style with intentional weights, widths, and spacing. When type is used as a headline or visual element, use the type treatment itself as an active part of the design, not a neutral delivery vehicle for the content.
Default to line lengths of less than 80 characters. Serif typefaces can have slightly longer line lengths; give serif body text slightly more line-height than a sans-serif.
Avoid these default typographic treatments; they are the commonest tells of a generated page:
- Accenting just a single word or phrase in a headline, like putting one word in italic/bold or a different color.
- Using all caps for labels.
- Adding unnecessary typographic labels above content.
Visual structure is information. Structural devices like outlines, borders, numbering, eyebrows, dividers, labels, etc., encode useful information about the content rather than decorate it. Many generic designs use numbered markers (01 / 02 / 03), but that's only appropriate if the content actually is a sequence — like a stepped process or a timeline. Before adding numbered markers, check the content really is a sequence.
Use non-user-triggered motion sparingly and deliberately, only to draw attention. A single orchestrated moment — one page-load sequence or one reveal — lands better than scattered effects; fade-and-slide-up entrances on each section and hover transitions on every card are the generic default and read as AI-generated. Motion that answers a person's action (opening, expanding, confirming) is welcome when it shows what changed.
Consider written content carefully. Often a design brief may not contain real content, and it's up to you to come up with copy and placeholder content. Copy can make a design feel as templated as the design itself. See the below section on writing for more guidance.
对于网页设计而言,Hero区域是访客第一眼看到的内容。以主题领域最具代表性的元素开篇,选择最合适的呈现形式:标题、图片、动画、实时演示、互动环节或其他处理方式。你的选择必须审慎:大数字搭配小标签、辅助统计数据和渐变强调是默认处理方式,只有当这确实是最佳选择时才使用它。
排版承载着页面的个性。标题文本和正文内容不一定需要使用不同的字体:可以使用一个字体家族,若使用两个,则要确保它们风格差异明显。
审慎选择字体,不要使用你在其他项目中惯用的默认字体家族,并遵循《排版风格要素》的默认指导,设定清晰的字体层级,包括明确的字重、字宽和间距。当字体被用作标题或视觉元素时,要将字体本身作为设计的活跃组成部分,而非内容的中性传递载体。
默认行长度应控制在80字符以内。衬线字体的行长度可以稍长一些;衬线正文的行高应比无衬线字体略大。
避免以下默认排版处理方式,它们是生成页面最常见的特征:
- 仅强调标题中的单个单词或短语,比如将一个单词设为斜体/粗体或使用不同颜色。
- 标签使用全大写形式。
- 在内容上方添加不必要的排版标签。
视觉结构即信息。轮廓、边框、编号、眉题、分隔线、标签等结构元素是对内容有用信息的编码,而非单纯的装饰。许多通用设计会使用编号标记(01 / 02 / 03),但这仅适用于内容确实是序列的情况——比如分步流程或时间线。添加编号标记前,请确认内容确实是序列形式。
谨慎且有目的地使用非用户触发的动效,仅用它来吸引注意力。一个精心编排的瞬间——比如一次页面加载序列或一次内容展示——比零散的效果更有效;每个区域的淡入上滑入场效果和每张卡片的悬停过渡效果是通用默认样式,会让人觉得是AI生成的。响应用户操作(打开、展开、确认)的动效是受欢迎的,因为它能展示内容的变化。
仔细考量书面内容。通常设计需求说明中可能没有真实内容,需要你自行撰写文案和占位内容。文案可能会让设计显得和模板化设计一样刻板。有关文案撰写的更多指导,请查看下方章节。