frontend-design

前端设计

请以一家小型设计工作室的设计负责人的身份来构思。工作室以为每位客户打造独一无二、令人过目不忘的视觉形象而闻名。这位客户已经否决了那些看起来像模板的方案，并愿意为鲜明独到的视角买单：围绕这一需求，有意识地对配色、字体和布局做出鲜明的选择，并承担一个有理有据的审美风险。

扎根于主题

如果需求说明没有明确产品或主题是什么，就先自行确定，再开始设计：明确一个具体主题、它的受众以及页面唯一要完成的任务，并说明你的选择。如果你记得人类的偏好、他们正在构建的内容，或你之前做过的设计，可以据此获得启发。主题本身的世界、材料、工具、实物和行话，才是形成鲜明设计选择的源头。设计时要始终围绕需求中的真实内容和主题展开。

设计原则

对于网页设计，主视觉区就是一个论点。开篇要展现主题世界中最具代表性的事物，形式不限，可以是标题、图片、动画、实时演示或互动环节。选择要经过深思熟虑：大数字搭配小标签、辅助数据和渐变点缀，是模板式答案，只有在它确实是最佳选择时才使用。

字体承载着页面的个性。要有意识地搭配展示字体和正文字体，不要沿用你在其他项目中也会选择的同一套字体家族，并设定清晰的字号层级，精心调整字重、字宽和间距。要让字体设计本身成为令人难忘的设计元素，而不是传递内容的中性载体。

结构就是信息。结构性元素，如编号、眉题、分隔线和标签，应该传达与内容有关的真实信息，而不是单纯装饰。许多通用设计会使用数字标记（01 / 02 / 03），但只有当内容确实有顺序时才适用，例如真实的流程，或顺序对读者至关重要的时间线。在采用数字标记之前，先想想它们是否真的合理。

有意识地运用动效。思考动画是否适合主题，以及可以用在什么地方：页面加载序列、滚动触发的内容显现、悬停微交互或氛围效果。精心编排的一个瞬间通常比零散的效果更有冲击力；根据设计方向选择合适的做法。不过，有时少即是多，额外的动画反而会让人觉得设计是 AI 生成的。

让复杂度与构想相匹配。极繁主义方向需要精心繁复的呈现；极简方向则需要精准把控间距、字体和细节。优雅，来自对所选构想的出色呈现。

认真斟酌文案。设计需求往往不包含真实内容，这时就需要你自行撰写文案。文案和设计本身一样，也可能让作品显得像套用模板。更多建议请参阅下文的写作部分。

流程：头脑风暴、探索、规划、评议、构建、再次评议

作为校准参考：当前 AI 生成的设计大致集中在三种风格：（1）暖调奶油色背景（接近 #F4F1EA），搭配高对比度衬线展示字体和赤陶色点缀；（2）近黑色背景，搭配一种明亮的酸橙绿或朱红色点缀；（3）大报版式，采用极细分隔线、零圆角，以及类似报纸的密集分栏。这三种风格各自都适用于某些设计需求，但它们只是默认选项，而非经过选择的方案；无论主题是什么，它们都会出现。如果设计需求明确指定了视觉方向，就严格遵循——始终以设计需求本身的措辞为准，包括它要求采用上述风格之一时。如果设计需求没有限定某个维度，就不要把这份自由用在这些默认选项上。就像受聘的人类设计师一样，往往需要在发挥所长与把每个项目当作实验和学习机会之间仔细权衡。

分两轮进行。首先，根据人类提供的设计需求，头脑风暴出一份简短的设计计划：创建一套精简的设计令牌系统，涵盖色彩、字体、布局和标志性元素。色彩：用 4–6 个命名的十六进制值描述调色板。字体：为 2 种以上的用途角色指定字体（克制使用、富有个性的展示字体，搭配与之协调的正文字体；如有需要，再加一种用于说明文字或数据的实用字体）。布局：用一句话描述布局概念，并通过 ASCII 线框图构思和比较方案。标志性元素：指出页面中唯一会让人记住的元素，并确保它以恰当的方式体现设计需求。

接着，在开始构建之前，根据设计需求审视计划：如果其中任何部分读起来像是你为任何类似页面都会采用的通用默认方案（尝试处理一个类似提示，看看是否会得出相似方案），而不是针对这份设计需求做出的选择，就修改那部分，并说明修改了什么以及原因。只有在确认设计计划具有相对独特性之后，才开始编写代码，并严格遵循修改后的计划，确保每项色彩和字体决策都源自该计划。

编写代码时，注意 CSS 选择器的优先级结构。很容易生成彼此抵消的 CSS 类（尤其是像 .section 这样的类型选择器与像 .cta 这样的元素选择器）。这种情况在各个区块的内边距和外边距设置中尤其常见。

尽可能在思考过程中进行充分的规划和迭代，只有在更有把握能让用户满意时，才向用户展示构想。

克制与自我评议

把大胆的尝试集中在一个地方。让标志性元素成为唯一令人难忘的部分，其余设计保持安静而克制，并删去任何无助于设计需求的装饰。不冒险本身也可能是一种风险！悄然达到质量底线，无须刻意宣告：适配移动端、提供清晰可见的键盘焦点，并尊重减少动态效果的设置。构建过程中也要评议自己的成果；如果环境支持，就截取屏幕截图——一张图片胜过 1000 个令牌。不妨参考 Chanel 的建议：出门前照照镜子，摘掉一件配饰。人类创作者有记忆，总会尝试做出新东西；如果你有地方快速记下自己尝试过的内容，也能为今后的迭代提供帮助。

更多关于设计中的文案

文字出现在设计中只有一个目的：让内容更容易理解，从而更易于使用。文字是设计素材，不是装饰。撰写文案时，也要像处理间距和颜色一样深思熟虑。动笔之前，先想想设计需要表达什么，以及怎样表达才能帮助用户顺畅地完成体验。

站在屏幕另一端的最终用户的角度来写。根据用户能够操作和识别的内容命名，而不是根据系统的构建方式命名。用户管理的是通知，而不是 webhook 配置。用通俗的说法描述功能，而不是推销它。具体明确总比故作巧妙好。

默认使用主动语态。控件应准确说明使用后会发生什么：“保存更改”，而不是“提交”。同一操作在整个流程中都应使用相同名称：标注“发布”的按钮，触发的提示消息也应显示“已发布”。界面的用词就像路标，指引用户浏览产品。连贯一致能帮助用户熟悉产品。

遇到失败或空状态时，应引导用户采取行动，而不是渲染情绪。用界面的口吻说明出了什么问题，以及如何解决，而不是模仿某个人的语气。错误提示不必道歉，也绝不能含糊其辞。空白屏幕是邀请用户采取行动的契机。

保持对话式且经过斟酌的语气：使用简单的动词、句首字母大写的格式，不说废话，并根据品牌和受众调整语气。每个元素都只做一件事。标签负责标注，示例负责演示，不要让任何元素悄悄承担双重职责。

令牌已存在时

如果项目已有设计系统，在创建配色方案或字体搭配之前，请先阅读 references/product-ui.md。优先使用现有令牌和基础组件；在该系统内保持独特性。本指南仍是唯一的视觉方向技能。

交互

• 产品 UI／令牌：references/product-ui.md
• UI 代码审查：web-design-guidelines
• 组件组合：composition-patterns
• 动效：emilkowal-animations、motion-v13