快餐品牌识别与UI/UX设计风格指南

为一家大型快餐品牌创建一个全面的、由 9 部分组成的专业品牌视觉识别和 UI/UX 设计系统风格指南表。布局应结构化为整洁的、基于网格的展示，带有清晰的编号部分（01 到 09）。整体审美必须是大胆的、标志性的且高度结构化的。 ### 01 品牌头部 (BRAND HEADER) - 在醒目的背景上（例如红白相间的条纹）包含一个大胆且突出的徽标。 - 展示一个具有辨识度的品牌吉祥物或人物插图。 - 包含一个令人难忘的品牌标语（例如 “it's finger lickin' good”），使用随性的手写剧本字体书写。 - 在标语下方列出三个核心品牌关键词，用斜杠分隔（例如：BOLD / ICONIC / REAL）。 ### 02 色彩系统 (COLOR SYSTEM) - **主色调：** 展示 4 种带有十六进制代码的主色，并根据其作用进行标记（例如：基础色、强调色）。 - **次级色调：** 4 种带有十六进制代码的辅助色，按氛围心情进行标记。 - **点缀色调：** 4 种用于特定标注的流行色，带有十六进制代码。 - **渐变：** 显示品牌渐变过渡的视觉光谱。 - **颜色配对：** 展示文本/背景兼容性的小对比块（例如：红+白、黑+金），包含浅色模式和深色模式的界面预览。 ### 03 字体系统 (TYPOGRAPHY SYSTEM) - **大标题：** 一种厚重的、间距紧凑的全大写无衬线字体，以获得最大的视觉冲击力（例如：“REAL CHICKEN. REAL GOOD.”）。 - **次级标题：** 一种整洁、值得信赖的无衬线字体，采用对比色（例如：“Hand-breaded. Freshly prepared. Every single day.”）。 - **正文：** 一种高度可读、亲切、日常的无衬线字体，展示一段简短的品牌哲学段落。 - **字体样本面板：** 在占位符徽标旁边显示 Display Bold、Sans Bold 和 Sans Regular 的 “Aa” 字体粗细示例。 ### 04 视觉语言 (VISUAL LANGUAGE) - **摄影和艺术指导准则：** 详细说明图像风格（例如：大胆、社论感、令人垂涎）、光照（例如：带有深影的戏剧性方向光）和纹理（例如：酥脆、触感良好的食物纹理、原木、金属装饰）的规则。 - **图像网格：** 包含五个独特的、高对比度的社论食物和人像摄影的水平序列，每个都贴有品牌支柱标签（例如：大胆、真实、自信、令人垂涎、标志性）。 ### 05 品牌应用 (BRAND APPLICATIONS) - 展示视觉识别在多种媒体上的实际应用： - **产品包装：** 品牌食品桶和盒子的 3D 模型。 - **网站 Hero 区域：** 一个干净的桌面落地页布局，具有强有力的标题、产品图和“立即下单”按钮。 - **移动端应用屏幕：** 显示送餐界面的现代智能手机 UI。 - **社交媒体帖子：** Instagram（1:1 正方形帖子）、Stories（9:16 纵向）和横幅（16:9 宽屏）的模型。 - **文具和户外：** 极简主义的企业名片和极具戏剧性、高冲击力的夜间广告牌广告。 ### 06 设计系统（UI 组件）(DESIGN SYSTEM (UI COMPONENTS)) - **按钮：** 针对主要、次要和文本按钮样式的状态变化（默认、悬停、禁用）。 - **卡片：** 具有高质量图像、标题、价格和促销“今日特惠”标签的食品菜单项 UI 卡片。 - **输入框：** 默认、聚焦和错误状态的文本输入框。 - **导航栏：** 带有徽标、菜单链接和可操作 CTA 按钮的桌面导航栏布局。 - **间距比例：** 一个视觉化的 8pt 网格系统比例，显示递增的内边距块（8px、16px、24px，最高到 96px）。 ### 07 图标系统 (ICONOGRAPHY) - 包含 10 个极简、统一的线条艺术图标的整洁网格，代表核心操作和产品类别：鸡肉、桶、汉堡、薯条、饮料、位置、配送、优惠、账户和收藏。 ### 08 图案与基调 (PATTERNS & MOTIFS) - 五个显示重复品牌资产的矩形样本： - **条纹图案：** 整洁的垂直线。 - **上校/吉祥物图案：** 纯色背景上重复的线条艺术徽标图案。 - **纹理图案：** 微妙的原材料纹理（如木纹或纸纹）。 - **形状基调：** 几何人字形/丝带设计元素。 - **分隔符：** 纤薄、实用的换行符和 UI 指示符。 ### 09 材质与深度 (MATERIAL & DEPTH) - 四个展示物理空间渲染的视觉示例： - **真实阴影：** 投射自然、定向环境阴影的产品包装。 - **纹理表面：** 纸张、纸板和木材等触感材料的特写。 - **反射：** 塑料或玻璃饮料杯上微妙的光泽和抛光效果。 - **图层深度：** 显示深度层次和重叠元素的层级移动应用程序 UI。 ### 页脚引用 (FOOTER QUOTE) - 以一个纯红色强调块结束表格，该块包含公司创始人的大型白色引用块，旁边是品牌吉祥物的整洁矢量线条插图。