标志设计稿
标志更多是被选择出来的，而非被创造出来的。工作在于将五个诚实且不同的想法呈现在客户面前，每个想法都经过真实logo尺寸的验证，放在一页纸上，让人在一分钟内做出判断。这一页就是标志设计稿。这是一页供人观看而非阅读的页面：五列图片，几乎没有文字。
这个方法源自两个真实的品牌标识项目。在这两个项目中，客户在设计稿打开后九十秒内就选定了一个标志，并且该方法与一个没有采用任何方法的强大模型所产出的结果进行了对比测试。这些测试教会了我们两件事，而下面的步骤则为实现这两点服务。
- 纪律是方法所增加的。 动笔之前对品牌有真正了解，五个真正不同的想法，在16像素尺寸下的验证，为每个标志明确指出其弱点，以及让客户自主做出选择。
- 个性是绝不能失去的。 人们偏爱的标志一眼看去就合情合理，并且看起来是精心绘制的。一张整齐划一但每个都需一句话解释其含义的符号页面，会输给一个大胆且精心描绘名称的图形。
快速工作。在原始项目中，设计稿在请求发出后五分钟内就准备就绪。它只是第一印象，再做一轮也没什么成本，所以好好选择，认真绘制，不要过度打磨。
步骤：了解品牌、寻找想法、草拟并选择五个、构建设计稿、审视设计稿、打开并展示、进行后续轮次、应用选定的标志。
1. 动笔前了解品牌
你需要五件事。在询问之前先主动寻找。
- 品牌名称，完全按照品牌自身的写法，包括其专属字体，以及它的含义：字面意思、词根、它可能让人联想到的习语、双关语。
- 品牌做什么，用一句话概括，最好能描述出它带来的改变：输入什么，输出什么。
- 目标用户及应传达的感觉，用两三个词概括。
- 已有的东西：网站使用的字体、旧的logo、标题、产品自身的词汇。
- 客户已经说过的任何关于logo的内容：约束条件、草图、他们欣赏的logo。
在一个项目中，先阅读：README文件、着陆页文案、页面标题和元数据、字体设置（@font-face、next/font、Tailwind配置、Google Fonts链接）、任何品牌或logo文件，以及迄今为止的对话。只询问你找不到的信息，且用一条不超过三个简短问题的消息。如果无法询问客户，或者客户让你直接开始，那就直接开始，并在展示时说明你所做的假设。
这一步之所以优先，是因为没有它而画出的标志最终会沦为库存图标。在原始设计稿中，每个标志都依赖于某些具体的东西：名称的含义、网站标题中的一句话、系统如何处理它所处理的事物。
默认的设计概要
除非客户另有说明，否则按此设计：单色，尽可能简洁，有目的性，略带独特性。
这意味着只在暖色调的米白色背景上使用黑色，别无他物。如果他们想要颜色，或者网站有强调色，仍然先用黑色确定形状。颜色不应成为让一个软弱无力的形状变得可接受的因素，并且标志无论如何都必须能单色工作（如标签图标、印章、深色背景）。颜色和效果应在标志被应用时才添加。
2. 从不同来源寻找想法
列出大约十个候选想法，每行一个。在列出之前，请阅读 references/concept-moves.md：它描述了优秀标志的来源，并附有示例和每个来源的陷阱。
目标是想法的多样性，因为人们的品味通常会沿以下方向分化：
- 基于品牌字母构建的标志；
- 当名称是实物时的名称图形化；
- 产品的作用，用一个形状表示；
- 来自品牌自身世界的符号或图案；
- 一两个来自更远领域的概念。
在选择它们时的规则：
- 五个想法，而非五种风格。 基于相同隐喻构建的两个标志只能算作一个。将候选想法按照其底层想法进行分组，并从每组中保留一个。
- 大多数应该一目了然。 设计稿不提供任何解释：一个标志只有其图形和一个简短名称。因此，最终五个中至少有三个应该仅凭这些就能让人理解：一个实物、一个字母、一个可见的动作。你的信息可以深化一个标志的含义，但不能拯救它。一个没有一句话解释就毫无意义的裸符号（比如一个点和一条线、两个斜线、一个简单的方块）必须非常引人注目才能赢得一席之地。
- 轮廓先于故事。 在两个候选者之间，保留形状更强大的那个，而不是故事更巧妙的那一个。故事只讲一次，而形状每天都会被看到。
- 命名明显的图标并限制使用。 每个类别都有一个标志性图标：聊天气泡代表聊天，房子代表房产，火花代表AI，购物车代表商店，盾牌代表安全，页面或行堆栈代表任何与文档相关的事物。品牌名称本身也常常带有自己的标志性图标（例如，名为Kiln的品牌用火焰）。明确它们对这个品牌而言是什么。五个中最多只能有一个依赖于其中任何一个图标，并且必须与这个品牌独有的东西融合在一起。一个标志是页面，另一个是火焰，这算两个，而不是各一个。任何被客户排除的东西都要排除在外。
- 每个标志一个想法。 如果一个标志需要用“和”字来解释，那它就是两个标志。要么拆分它，要么放弃其中一半。
初期的想法会集中在显而易见的图标上。在一个原始设计稿中，前五个标志中有三个是聊天气泡，而最终获胜的标志来自后续远离这些气泡的一轮。
五个是合适的数量，除非客户要求其他数量：更少则无法提供真正的选择，更多则会把选择变成工作，而五列正好能适应一个屏幕。
3. 草拟，然后选择五个
在确定任何选项之前，先绘制你的候选方案。将 assets/contact-sheet.html 复制到项目中的 design-lab/logo/candidates.html，为每个候选方案添加一个 <symbol>，使用第5步的脚本进行渲染，并查看图形。它会将每个候选方案以大型、小型以及真实的16像素图标（并放大显示）的方式呈现出来。保留形状最强大、想法差异最大的五个，并对其进行改进。把你大部分绘图时间花在你最看好的两个上：设计稿至少需要一个你认为可以直接交付的标志，而一张五个都是初稿的设计稿会输给一个完整的logo。
一张联系稿是正常的。第二张用于重新绘制几乎可行的标志。到此为止：客户可以要求另一轮。在展示前删除 candidates.html 及其图形。
这一步之所以存在，是因为脑海中的画面和纸面上的画面是不同的。在测试中，那些在选择之前先审视候选方案的轮次，明显比那些画出五个就停止的轮次制作出了更好的标志。
如何绘制标志
每个标志都是一个在 64x64 网格上的 <symbol>。
- 少数部件，一个轮廓。 一到四个形状；渲染脚本会对使用更多形状的标志发出警告。简洁并不意味着只能使用矩形：一个拱形、一个卷曲、一个喇叭形或一个字母的碗状部分，只要是单一干净的形状，都是受欢迎的。原始项目中交付的两个标志都由四个圆角矩形组成，而测试中最优秀的标志则是一个单一轮廓，描绘了品牌命名的事物。
- 实心形状或粗线条。 实心形状不携带
fill属性，因为设计稿会在一个地方用黑色绘制相同的图形，在另一个地方用白色绘制。线条型图形携带fill="none" stroke="currentColor"，使用圆形端点（round caps）和连接（joins），并且整个标志使用统一的描边宽度，7个单位或更宽。没有渐变、透明度、滤镜、遮罩或<text>。字母由形状构建而成，从不直接输入，因为输入的字母是属于别人的字体。 - 计算，而非猜测。 对于任何超出矩形和圆形的形状，都要计算出关键点：弧线与直线相交处、曲线结束处、弯曲部分周围的均匀厚度。几行能够输出路径的Python代码比猜测来得更快，而猜测出的曲线看起来就是猜测的结果。
- 对齐到网格。 使用整数或半单位，保持相等的间距，对齐边缘，整个标志使用统一的圆角半径。
- 均匀填充方框。 让每个标志在较长方向上占据大约48个单位，并居中，这样五个标志的重量感相似，比较起来也公平。
- 为标签图标设计。 宽度小于约6个单位的间隙或线条，在16像素尺寸下会变得模糊不清。大的形状和开放的间隙能够幸存，并且它们通常在每个尺寸下都能做出更好的标志。
- 遵循阅读方向。 显示“之前”和“之后”的标志，其运行方向与品牌语言的阅读方向一致：阿拉伯语或希伯来语从右到左。
4. 构建设计稿
将 assets/sheet-template.html 复制到项目中的 design-lab/logo/marks-sheet.html，并创建相应的文件夹，然后填写六个编号的位置。模板的脚本会根据你的符号构建每一列，因此每个标志只被绘制一次，并且在所有尺寸下都是相同的。
页面设计有意保持简洁：一行标题，然后是并排的五列。每列自上而下显示：
- 放大的标志；
- 标志与名称并排显示，分别在浅色和深色背景上；
- 标志作为图标在64、32和16像素尺寸下的显示，以及放大的16像素图标，以便看到其真实像素；
- 两个按钮，分别用于下载该标志在透明背景下的PNG和SVG文件。
人们看的是这一页；他们不会去读它。不要在页面上添加任何东西：没有理由、没有说明、没有如何阅读的指示、没有推荐。标志的含义、其弱点所在以及你会选择哪一个，都放在你的消息中（第6步）。
- 语言。 以品牌的语言（即其文字商标所用的语言）撰写标题和名称，前提是客户明确能读懂。对于从右到左书写的语言，设置
dir="rtl"。如果品牌使用两种脚本书写，设计稿显示主要的一种；第二种组合样式会在选定标志时一并提供。 - 字体。 使用品牌实际使用的字体设置文字商标：通过相对于设计稿的路径访问项目自身的字体文件，或者网站加载的托管字体。匹配网站为品牌名称设置的粗细、大小写和字间距。如果品牌没有字体，有目的地选择一个并加以说明。
- 标题。 一行简短的标题，例如“Harbor 的五个logo”。
- 名称。 每个标志都有一个一到三个词的简短名称，绝不是一句话。人们通过名称来选择和记忆标志（“我喜欢那个结”），因此名称起着实际作用。
- 字母。 将标志标记为A到E。
- 文件名。 使用拉丁字母的简短小写名称作为下载文件名：
harbor对应harbor-logo-A.png。
如果项目中已经存在设计稿，不要覆盖它。第7步说明了该怎么做。
5. 在客户之前先审视
渲染设计稿，然后查看图形。该脚本位于此技能自身的文件夹中，可以在任何HTML页面上工作，包括联系稿：
bash "<此技能的文件夹>/scripts/render.sh" design-lab/logo/marks-sheet.html
它会使用机器上可用的headless Chromium在HTML旁边生成一个PNG文件，并打印出其路径，然后对于任何由超过四个形状绘制而成或线条细于7个单位的标志发出警告。对这些警告采取行动。打开该图像，逐个标志检查：
- 这确实是设计稿：五列、文字商标上正确的字体、没有遗留的
{{placeholders}}占位符？渲染可能静默地捕获了错误的页面或后备字体。 - 每个标志是否如其名称所述，无需额外解释就能让人理解？
- 是否有任何标志看上去像你未打算表达的东西：一个数字、一个不同的字母、一个菜单图标、一个你已知的logo？
- 在每列底部放大的16像素图标中，形状是否保持分离？或者间隙是否消失，细部是否变灰？
- 是否有任何东西被裁剪到其方框边缘、偏离中心、或者明显比其相邻标志更重或更轻？
- 较长的名称是否仍然适合放在其标志旁边，并且每一列的高度是否相同？
- 在文字商标旁边，标志是否与名称协调放置？或者它会与名称的首字母重复，显得生硬？
修正你发现的问题，并再次渲染以确认。在16像素尺寸下失效的标志，需用更少、更大的部件重新绘制，或者替换为你的次佳候选方案。五个标志中，最多只能有两个被指出在16像素尺寸下存在已知弱点，并且每个都必须在其弱点说明中明确指出。
如果脚本无法渲染（它会带着原因退出），请在可截图的浏览器中打开HTML（如果你有的话）。如果你完全无法查看，请在展示时说明。
6. 打开并展示
为客户打开设计稿：macOS上使用 open，Linux上使用 xdg-open，Windows上使用 start。需要打开的是HTML文件，PNG文件用于检查或分享。将两者都保留在 design-lab/logo/ 目录下，并且只有在客户或项目自身规则要求时才提交它们。
在客户做出选择之前，不要将任何标志安装到产品中，也不要制作生产文件。这是他们的决定，一旦做出决定，只需两分钟。设计稿上的下载按钮是为了让客户在幻灯片或示意图中尝试标志。正式文件会随选定结果一同提供。
然后写一条简短消息：
- 说明设计稿的位置，并告知它已打开；
- 每个标志一行，包括字母、名称、它是什么以及为何属于这个品牌，以及如果存在的话，它的真实弱点（如“最接近通用建筑图标”、“安静且有点直白”）。页面本身不包含这些信息，因此这一行是标志含义的所在；
- 你的选择及理由，用一两句话说明。推荐一个你认为可以直接交付的标志：一个一目了然且在16像素图标尺寸下依然成立的标志。如果你最喜欢的想法存在已知缺陷，要说明它是你最喜欢的想法，并指定另一个标志作为要交付的那一个；
- 一个结束性问题：客户选择哪一个，或者哪两个需要进一步推进。说明一旦他们做出选择，你将制作文件并将其放入网站。
提供真实的意见和真实的弱点，然后把选择权留给他们。在原始项目中，客户曾有一次推翻过推荐。此时不要要求他们选择颜色、样式或字体，并将消息保持在那几行之内：页面用于展示，消息用于解释，各司其职。
7. 后续轮次
- “再来五个。” 创建一个新文件
marks-sheet-2.html，并继续使用字母（F到J），以便每个标志在轮次之间保持唯一的字母。按照模板所示，在标题下方放置一个指向之前设计稿的链接。新的五个标志必须源自早期轮次中未涉及的想法。