用途:指导网站 Logo 的放置与实现,以提升品牌记忆和导航体验。Logo 位置会影响用户定位与转化。
主要能力:评估使用场景(页头、页脚、独立)、平台(Web、移动端或两者)与品牌规范(尺寸、留白、变体,来自 components-brand-visual 或媒体包);给出放置建议、实现说明、无障碍清单,并可选提供 AI 产品设计趋势与原型建议。首次使用时可用 1-2 句说明覆盖范围与意义,之后或用户要求跳过时直接输出主结果。若存在 .claude/product-marketing-context.md 或 .cursor/product-marketing-context.md,先读取品牌与视觉识别信息。
放置建议:最佳位置为左上角,品牌记忆率更高,符合从左到右的阅读与扫描习惯,用户也预期 Logo 链接回首页。应避免居中(从居中 Logo 返回首页的失败率约高 6 倍)和右对齐。居中仅在元素极少的极简页头或 Logo 为视觉焦点的品牌型落地页可能可行,但仍需确保可点击并链接首页。
实现要点:Logo 始终链接首页,用 <a href="/"> 包裹图片;图片优先 SVG,alt 文本写公司或产品名(如 alt="Acme Inc."),不要写 "Logo";尺寸足够识别且不与导航或 CTA 竞争,按品牌规范保持留白,并确保移动端可读。
无障碍与 SEO:alt 文本兼顾可访问性与图片 SEO;Logo 链接贡献首页内链;保证对比度、可见焦点状态,移动端触控目标不小于 44x44px。
可选 AI 产品设计:可参考 Alignify AI Logo Guide 与 Aesthetics of AI。常见风格包括六边形(技术平台、企业 AI)、旋转/漩涡(生成式 AI、创意工具)、极简机器人(助手、聊天机器人)、表情/符号(消费级、友好型 AI)。流程为定位(B2B 专业可信 vs B2C 友好亲和)、选择核心元素、配色(科技蓝、蓝紫渐变、单色,考虑深色模式)、多尺寸测试(favicon、移动端、页头)、商标排查。避免过于复杂、与竞品雷同、B2C 使用过度技术化符号、忽略移动端显示、频繁换标。
限制:资料未提供具体价格、收费、平台支持范围或效果数据;部分统计与设计建议来自资料原文,实际应用需结合自身品牌规范。