跳到主要内容

设计方向

设计方向步骤允许您在使用 Theme Builder 生成完整主题之前，回顾、完善和确定您主题的视觉设计。

概述​

完成“发现访谈”（Discovery Interview）后，Theme Builder 会展示您的设计方向，并提供桌面和移动预览渲染。这让您可以在确定主题之前，准确地看到您的设计在不同设备上的实际效果。

设计方向组件​

1. 配色方案 (Color Palette)​

您的主题配色方案，包括：

  • 主色 (Primary color) — 用于按钮、链接和强调点的主要品牌色
  • 辅色 (Secondary color) — 用于增加变化感的补充色
  • 强调色 (Accent color) — 用于突出重要元素的高亮色
  • 中性色 (Neutral colors) — 用于背景和文本的灰色和白色
  • 文本色 (Text color) — 用于提高可读性的主要文本颜色

2. 排版 (Typography)​

用于选择以下元素的字体：

  • 标题字体 (Heading font) — 用于页面标题和章节标题
  • 正文字体 (Body font) — 用于段落文本和内容
  • 字号 (Font sizes) — 针对不同屏幕尺寸的响应式字号
  • 行高 (Line height) — 用于提高可读性的行间距
  • 字重 (Font weights) — 粗体、常规和细体等变化

3. 布局和间距 (Layout and Spacing)​

  • 容器宽度 (Container width) — 内容的最大宽度
  • 内边距和外边距 (Padding and margins) — 元素周围的间距
  • 网格系统 (Grid system) — 用于响应式设计的列布局
  • 组件间距 (Component spacing) — UI 元素之间的距离

4. 视觉元素 (Visual Elements)​

  • 按钮样式 (Button styles) — 主按钮、辅按钮和次级按钮的设计
  • 卡片设计 (Card designs) — 内容块的布局设计
  • 图标 (Icons) — 图标的样式和尺寸
  • 边框和阴影 (Borders and shadows) — 营造微妙视觉深度的效果
  • 悬停效果 (Hover effects) — 交互状态的样式设计

预览渲染 (Preview Rendering)​

桌面预览 (Desktop Preview)​

桌面预览显示您的设计在全宽（通常为 1200px 或更宽）下的效果：

  • 完整的导航菜单
  • 包含所有列的完整布局
  • 大字号和充足的间距
  • 所有视觉元素都以全尺寸显示

移动预览 (Mobile Preview)​

移动预览显示您的设计在移动设备宽度（通常为 375px）下的效果：

  • 响应式导航（汉堡菜单）
  • 单列布局
  • 调整后的字号和间距
  • 适合触摸操作的按钮尺寸

响应式断点 (Responsive Breakpoints)​

Theme Builder 在以下断点渲染预览：

设备宽度预览
移动设备375px竖屏手机
平板电脑768px横屏平板电脑
桌面设备1200px全宽桌面
大型桌面设备1920px超宽屏显示器

完善您的设计​

进行调整​

您可以通过以下方式完善您的设计方向：

  1. 调整颜色 — 更改配色方案中的任何颜色
  2. 更改字体 — 选择不同的字型
  3. 修改间距 — 调整内边距和外边距
  4. 更新布局 — 更改容器宽度和网格列数
  5. 定制元素 — 修改按钮样式、卡片设计等

预览更新​

更改会实时反映出来：

  • 桌面预览会立即更新
  • 移动预览会立即更新
  • 所有响应式断点都会更新
  • 您可以切换预览来验证更改

对比视图 (Comparison View)​

您可以将您的设计方向与以下内容进行比较：

  • 原始设计 (Original design) — 查看哪些地方发生了变化
  • 竞争对手设计 (Competitor designs) — 与灵感网站进行比较
  • 先前版本 (Previous versions) — 回退到早期的设计方向

设计方向批准​

一旦您对设计感到满意：

  1. 查看两个预览 — 确认桌面和移动端看起来都很棒
  2. 检查所有颜色 — 确保对比度和可访问性
  3. 测试排版 — 确认所有尺寸下的可读性
  4. 确认布局 — 检查间距和对齐方式
  5. 批准设计 — 继续主题生成流程

下一步​

批准设计方向后：

  1. Theme Builder 将生成您的完整主题
  2. 主题将被安装到您的 WordPress 网站上
  3. 您可以使用 WordPress 自定义器进行进一步定制
  4. 继续前往 Hospitality Menus 或其他功能

最佳实践​

  • 在真实设备上测试 — 如果可能，请使用实际的手机和平板电脑
  • 检查可读性 — 确保所有尺寸下的文本都是易读的
  • 验证对比度 — 使用 Validate Palette Contrast 来检查可访问性
  • 考虑性能 — 优化图片和字体以提高加载速度
  • 规划内容 — 确保布局能适应您实际的内容

故障排除 (Troubleshooting)​

预览未更新​

  • 刷新页面
  • 清除浏览器缓存
  • 尝试使用不同的浏览器
  • 检查网络连接

颜色看起来不同​

  • 检查显示器的颜色设置
  • 尝试在不同的设备上查看
  • 使用可访问性工具验证颜色对比度
  • 考虑使用色盲模拟器

排版问题​

  • 确认字体文件是否已加载
  • 检查不同断点下的字号
  • 使用实际内容进行测试
  • 考虑行长以提高可读性

相关文档​