51. 🏷️ 品牌与识别 Brand & Identity ★★★☆☆
🌏 Web 网页规范
- Logo Usage Rules · 安全间距、最小尺寸、色彩变体与误用示例
- Brand Voice Mapping · 语调谱系从正式到活泼映射至 UI 文案
- Illustration Style Guide · 线重、色彩填充、角色风格统一规范
- Co-branding Patterns · 合作伙伴 Logo 排列与白标定制考量
📱 App 移动端规范
- App Icon Design · 29×29pt 可辨识性、简洁性与平台形状遮罩
- Launch/Splash Screen · 启动屏品牌表达与加载过渡设计
- Material You Dynamic Color vs iOS 静态品牌色差异
- Adaptive Icons · Android 自适应图标前景/背景分层规范
Logo 使用规则定义了安全间距 (Clear Space，至少等于 Logo 高度的 25%)、最小尺寸 (数字端不低于 24px 高)、色彩变体 (全彩/单色白/单色黑/反白) 及典型误用 (拉伸、阴影、改色)。Brand Voice 语调谱系将品牌人格从 Formal → Friendly → Playful 映射到 UI 文案的措辞选择。插画风格指南统一线重 (如 2px)、色彩填充方式 (扁平 vs 渐变)、角色比例。品牌色扩展在主色板基础上生成 tints (加白)、shades (加黑)、complementary accents。Co-branding 场景规定合作伙伴 Logo 尺寸比例与排列规则。
App 图标设计要求在 29×29pt 最小尺寸下仍具可辨识性，遵循简洁原则 (单一焦点、无文字、无照片)，并适配平台形状遮罩 (iOS 圆角矩形 vs Android 圆形/自适应)。Launch Screen (启动屏) 是品牌第一印象，iOS 推荐静态品牌色 + Logo 居中，Android 使用 SplashScreen API。Material You 动态色彩从壁纸提取主题色，与 iOS 固定品牌色形成差异。Android 自适应图标要求前景/背景分层设计，确保在各种遮罩形状下完整显示。
LIVE PLAYGROUND: "Prism" 品牌识别系统展示 Brand Identity Showcase
切换上方 Web/App 视角轨道，观察演示形变
https://web.meta-ui.edu/brand
Prism
Design System
🎨 Brand Color Palette
Primary
Secondary
Accent
Warning
Neutral 1
Neutral 2
🔤 Typography Pair
Heading Aa
Plus Jakarta Sans 800
Body text paragraph
Plus Jakarta Sans 400
🧩 Branded Components
Get Started
Learn More
Feature Card
Brand-consistent content
☀️ Light
🌙 Dark
品牌自适应明暗模式
Prism
App Icon · 1024×1024 → 29×29pt
Prism
Launch Screen · Splash
Android Adaptive Icons
Circle · Rounded Square · Squircle
🎨 Material You 从壁纸提取动态主题色
Dynamic from wallpaper
📋 大模型统一 Prompt (LLM Prompt)