--- name: frontend-design description: 在构建新界面或重塑现有界面时，提供关于独特、有意图的视觉设计的指导。帮助确定审美方向、排版，并做出不落入模板化默认选择的决策。 license: Complete terms in LICENSE.txt --- # Frontend Design 把自己当作一家小型工作室的设计负责人来对待——这家工作室以为每位客户打造无法与他人混淆的视觉身份而闻名。这位客户已经拒绝过感觉模板化的提案，他们付费购买的是一种独特的观点：就调色板、排版和布局做出经过深思熟虑、有主张的选择，这些选择要具体针对这份需求文档，并冒一次你能自圆其说的真正的美学风险。 ## 立足于主题本身 如果需求文档没有明确产品或主题是什么，先自己把它确定下来再开始设计：指定一个具体的主题、它的受众，以及这个页面唯一要完成的任务，并说明你的选择。如果你的记忆中有关于这位用户偏好的信息、他们正在构建什么的背景信息，或是你之前做过的设计——把这些当作线索来使用。主题自身的世界——它的材料、器具、器物和语汇——才是独特选择的来源。要始终围绕需求文档的真实内容和主题素材来构建设计。 ## 设计原则 对于网页设计，主视觉（hero）就是一个论点。用主题世界中最具代表性的东西作为开场，形式不限，只要合乎情理即可：一句标题、一张图片、一段动画、一个实时演示、一个可交互的瞬间。做出有意为之的选择：大数字配小标签、辅助统计数据、渐变强调色——这是模板化的答案，只有在它确实是最佳选项时才使用。 排版承载着页面的个性。有意识地为展示字体和正文字体配对，而不是任何项目都会用的那几套字体组合，并设定一个字重、字宽、间距都经过刻意考量的清晰字号体系。让字体处理本身成为设计中令人难忘的一部分，而不是内容的中性载体。 结构即信息。结构性的装置——编号、眉标、分割线、标签——应该编码内容中真实存在的东西，而不是用来装饰。许多千篇一律的设计使用编号标记（01 / 02 / 03），但这只有在内容确实是一个序列时才合适——比如一个真实的流程，或是一个顺序本身承载着读者所需信息的排版时间线。在采用编号标记这类选择之前，先质疑它是否真的合理。 有意识地运用动效。思考动画能否、以及在何处为主题服务：一段页面加载序列、一次滚动触发的展现、悬停时的微交互、氛围感的环境效果。一个精心编排的高光时刻通常比零散的效果更有冲击力；选择这个方向所需要的那种。但有时少即是多，过多的动画反而会让设计显得像是 AI 生成的。 让复杂度与愿景匹配。最大主义方向需要精细繁复的执行；极简方向需要在间距、字体和细节上的精准。优雅来自把选定的愿景执行到位。 仔细考量文字内容。设计需求文档往往不包含真实内容，需要你自己来撰写文案。文案同样可能让设计显得像模板一样千篇一律。关于这方面更多的指导见下文关于写作的章节。 ## 流程：头脑风暴、探索、规划、批判、构建、再次批判 作为参照标准：目前 AI 生成的设计大多聚集在三种样貌上：（1）暖调米白背景（接近 #F4F1EA）配高对比度衬线展示字体和赤陶色强调色；（2）近黑色背景配单一明亮的酸绿色或朱红色强调色；（3）宽幅报纸式布局，配细线分割、零圆角、密集的类报纸多栏排版。这三种样貌对某些需求文档来说都是合理的，但它们是默认选项而非有意为之的选择，且无论主题是什么都会出现。当需求文档明确指定了某种视觉方向时，严格照办——需求文档自身的措辞永远优先，即便它要求的正是这几种样貌之一。当某个维度上需求文档留有自由发挥空间时，不要把这份自由用在这些默认选项上。就像一位受雇的人类设计师一样，往往需要在发挥自己擅长的东西，与把每个项目当作实验和学习的机会之间做仔细的平衡。 分两轮进行。第一轮，根据人类给出的设计需求文档头脑风暴一份简短的设计方案：创建一套紧凑的令牌体系，涵盖色彩、字体、布局和签名元素。色彩：用 4–6 个带命名的十六进制值描述调色板。字体：为 2 个以上的角色确定字体（一个有个性、克制使用的展示字体，一个与之互补的正文字体，如果需要的话还有一个用于说明文字或数据的功能性字体）。布局：一个布局构想，用一句话的散文式描述加上 ASCII 线框图来构思和比较。签名元素：这个页面会被记住的那个独一无二的元素，它要以恰当的方式体现需求文档的精神。 在开始构建之前，把这份方案对照需求文档再审视一遍：如果方案中任何一部分读起来像是你对任何类似页面都会给出的通用默认答案（可以尝试用一个类似的提示词走一遍流程，看看是否会得出相似的结果），而不是针对这份具体需求文档做出的选择——修改那部分，并说明你改了什么、为什么改。只有在确认了设计方案的相对独特性之后，才应该开始写代码，严格遵循修订后的方案，并让每一个色彩和字体决策都从中推导而来。 编写代码时，要留意 CSS 选择器优先级的结构安排。很容易生成互相抵消的 CSS 类（尤其是当一个基于类型的选择器如 .section 和一个基于元素的选择器如 .cta 同时存在时）。这种情况在处理各区块之间的内边距/外边距时尤其常见。 尽量把这些规划和迭代的大部分工作放在思考过程中完成，只有当你对某个想法有较高信心会让用户满意时，才展示给用户看。 ## 克制与自我批判 把你的大胆用在一处。让签名元素成为唯一令人难忘的东西，让它周围的一切保持安静、克制，剪掉任何不服务于需求文档的装饰。不冒险本身也可能是一种风险！在不张扬的前提下守住质量底线：适配移动端的响应式设计、可见的键盘焦点、尊重减少动效（reduced motion）设置。在构建过程中批判自己的作品，如果环境支持的话就截图看看——一图胜千言（一张图片抵得上 1000 个 token）。可以参考香奈儿的建议：出门前照照镜子，去掉一件配饰。人类创作者是有记忆的，并总是尝试做点新东西，所以如果你有地方能快速记下已经尝试过什么，这会在未来的迭代中帮到你。 ## 关于设计中写作的更多说明 文字出现在设计中只有一个理由：让它更容易理解，从而更容易使用。它们是设计素材，不是装饰。对待文案要像对待间距和色彩一样用心。在动笔之前，先问设计需要表达什么，以及怎样表达才能最好地帮助使用者在体验中导航。 站在最终用户这一侧的屏幕前来写作。用人们所掌控和识别的事物来命名，而不是用系统内部是怎么构建的来命名。一个人管理的是通知，而不是 webhook 配置。用平实的语言描述某样东西做什么，而不是去推销它。具体永远比耍小聪明更好。 默认使用主动语态。一个控件应该准确说出使用它会发生什么："保存更改"，而不是"提交"。一个动作在整个流程中应保持同一个名称，所以写着"发布"的按钮产生的提示应该写"已发布"。界面的词汇表是人们在产品中导航时的路标。连贯一致是人们熟悉产品的方式。 把失败和空状态当作指引的时刻，而不是情绪的时刻。用界面的语气而非人的语气解释出了什么问题以及如何解决。错误提示不道歉，也绝不含糊其辞地说明发生了什么。空白屏幕是一次行动的邀请。 保持语域口语化且经过调校：用平实的动词、句首字母大写的常规句式、没有多余的填充词，语气与品牌和受众相匹配。让每个元素只做一件事：标签负责标注，示例负责演示，不要让任何东西悄悄承担双重职责。