title: "主题设计和用户体验指南" post_status: publish comment_status: open taxonomy: category: - woocommerce post_tag: - Theme Development - Theming - Repos

主题设计和用户体验指南

本指南涵盖一般准则和最佳实践，旨在确保您的主题体验符合电子商务行业标准，并与 WooCommerce 共同提供卓越的在线购物体验，从而最大化销售额，确保易用性，实现无缝集成，并提升用户体验。

我们建议您查阅 WordPress 的 UI 最佳实践，以确保您的主题符合 WordPress 主题的要求。

请确保您的主题适用于目前在 WooCommerce 主题商店 中提供的至少一个行业。 重要的是，主题在设计上应具有足够的原创性和独特性，同时保持熟悉感，以便在 WooCommerce 主题商店中脱颖而出。 您的主题应避免复制 WooCommerce 主题商店或其他 WordPress 主题市场中已有的主题。

设计

高质量的设计是在线商店的重要组成部分，这主要由主题设计和内容驱动。 主题的设计应简洁、一致、不杂乱、令人难忘、直观、高效且实用。 在为 WooCommerce 设计新主题时，应特别注意以下几点：

布局

主题的布局应符合行业标准，包括层级结构、流程、内容平衡和留白。

主题作者必须确保商店页面（商店、产品页面、分类、购物车、结账、个人资料页面等）与主题无缝集成，因为它们是 WooCommerce 主题的核心。

主题应完全正常运行，并经过优化，可在常见的设备类型（如笔记本电脑、平板电脑和智能手机）上访问。

排版

主题应提供优雅且易于阅读的字体组合，以促进舒适的阅读体验。

所有页面和设备类型都应采用一致且和谐的字体大小、线宽和间距。

主题的排版应包含少量相互补充的字体，通常不超过两种。

应使用正确的首字母大写，避免全部大写（除非是某些 UI 元素，如按钮、标签等）。

图标

主题中使用的图标应直接表达其所代表的操作/情况，并且在大小、位置和颜色方面应保持一致。

颜色

主题必须遵循所有 UI 元素和页面的和谐且一致的配色方案。 配色方案应包含少量颜色：

• 一种主要/强调色
• 一种或两种与主要色互补的辅助色
• 纯色（白色、黑色、灰色）

文本和图形 UI 组件中使用的颜色必须符合 WCAG AA 兼容性级别 或更高。

模式

主题必须采用一套一致的模式，并在所有网页中使用，例如：

• 导航、侧边栏、页脚
• 内容块（标题、段落、列表、产品详情、评论、图片展示等）
• 表单的结构和元素（字段、下拉菜单、按钮等）
• 表格
• 列表
• 通知

可访问性

主题必须符合 Web 内容可访问性指南 (WCAG)。完全符合 WCAG 2.0 需要付出很多努力；至少要达到 AA 级别的可访问性。

有关可访问性的更多信息，请查看 WordPress 可访问性快速入门指南。

自定义

主题必须依赖于自定义工具来进行任何初始设置。不允许使用特定的引导流程。

主题支持的任何自定义功能，例如布局选项、附加功能、块选项等，都应通过自定义工具或块设置（适用于主题中包含的块）提供。

主题不应捆绑或要求安装额外的插件/扩展（或框架），这些插件/扩展提供额外的选项或功能。有关自定义的更多信息，请查看 WordPress 主题自定义 API。

在激活时，主题不应通过将用户引导到其他页面来覆盖 WordPress 主题激活流程。

品牌

主题不得包含任何品牌或指向主题作者的引用，这些内容会干扰在线商店的正常运行。主题作者可以在主题页脚中包含指向其网站的链接。不允许进行联盟营销。

界面应仅关注用户体验，不允许在管理界面中使用通知、横幅、大型徽标或任何促销材料。

演示和示例内容

提交主题时，作者必须提供一种方式来展示和测试主题。示例内容/演示应避免使用自定义图形/资源，这些资源不会包含在交付内容中，以避免商家混淆和期望落空（例如：使用徽标、插图）。在为特定领域创建主题时，作者应考虑使用与该领域相关的示例内容。

所有图像和文本都应适合所有年龄段/家庭友好。主题作者应考虑使用包含各种年龄、国籍等的图像。主题应避免使用看起来像“库存照片”的图像。

主题必须以符合所有必要资产（例如图像、字体、图标等）的许可证的方式进行分发。