提交指南

概述

模板必须满足所有这些需求被添加到Webflow市场。通过这个清单第一评审之前发送你的模板。

选择一个类别,主要标记

选择一个最适合您的模板的主要标签下面。这将是我们描述你的模板在整个模板的主要方式。主标签和类别不应该是相同的。例:选择“咖啡馆”如果是模板咖啡馆生意。

• 设计标签:
  机构投资组合、设计师、创意,室内设计
• 商业标记:
  小型企业、公司、咨询、创业辅导、房地产、建筑、建设、物流、运输、交付、律师,律师事务所,金融、会计、银行、投资、保险、招聘、零售、汽车,农业,农场,花店,宠物,孩子,家具,家居用品
• 技术标签:
  SaaS应用程序,软件启动时,仪表板,管理,移动,帮助中心,支持,IT公司,仪表板,移动应用程序,启动时,商业,小型企业
• 博客标签:
  个人、旅行、生活方式、食品、时尚、美丽、健康、新闻、科技,摄影,杂志,报纸,设计,音乐,视频,播客
• 营销标签:
  着陆页,通讯、社会活动、会议、营销、创业
• 摄影和视频:
  摄影,视频,电影,电影
• 娱乐标签:
  音乐、音乐家、乐队,DJ,播客,收音机,书,视频,电影,电影,游戏,跳舞,艺术家,杂志,报纸,新闻
• 食物&饮料标签:
  食物,餐厅,酒吧,咖啡馆,咖啡馆,配方,酒厂
• 旅行的标签:
  酒店、旅游
• 教育标签:
  学校,大学,学院
• 体育标签:
  健身、健身、足球、健康
• 医药标签:
  健康、牙医、医生、医院,兽医
• 非营利性的标签:
  慈善机构,教堂,宗教,政治
• 美丽与健康标签:
  美丽,健康,理发师,沙龙,水疗,按摩,治疗
• 时尚标签:
  饰品,首饰,时尚
  

其他标签

这些标签应该作为额外的模板标签:

Ui工具包,多个布局,一页,多用途,很快,倒计时,在建、目录、文档、简历,简历,个人的婚礼

结合来自多个类别的标签

模板应该为一个业务目标垂直但可以添加标记从一个不同的类别只要是有道理的。

• 例子:
  1 -一个治疗应用模板应下美容与健康但是它也有类别应用程序标签。
  2 -健身房模板应下体育但是它也有类别业务和小型企业标签。
  3 -一个体系结构模板有多个布局应下业务但它还应该有类别Ui工具包标签。
  4 -银行模板应该下一个页面业务但它还应该有类别一个页面标签。
  5 -模板与几个设计元素应下设计类别和有UI工具包作为主要的标签。

一个页面和着陆页标签

并不是所有的单页模板是登陆页面。应该标记为模板与一个页面一页,但是,着陆页标签只能用于单页模板,都是面向转换。

多个布局标签

多个布局标签不应该设置为主要标记。相反,它应该添加作为一个二级标签模板有超过三个布局变化至少三个静态页面。

每个布局需要独特的模板和尊重的主题。换句话说,它只能与一个业务垂直。

uikit布局标签

UI组件标签不应该设置为主要标记。相反,它应该添加作为一个二级标签模板与几个设计模块化元素只有(例导航栏、滑块、表单)。

模板名称

• 选择一个名字不相同或包含相同的名称作为一个类别或主要的标签。
• 运行一个搜索模板市场并确保模板名称不是已经在使用。
• 最好是选择一个词命名您的模板。

布局

• 网站布局应遵循一致的间距和没有出现拥挤或混乱
• 主体结构的网站应该使用部分,容器、网格和flexbox如果可能的话。
• 部分应该有一个最低高度而不是高度,以便它可以成长有更多的内容补充道。这个问题通常是发现在英雄的部分。
• 网站不应水平滚动视窗的元素造成脱落。

布局的变化

今天的许多模板为主页提供多个布局变化,联系人页面,等。设计师可以添加布局变化他们的模板,但应该遵循这些指导方针:

• 整个模板应该有一个有凝聚力的风格。
• 内容和设计应该符合一组相关的标签。换句话说,你不应该目标多个垂直一个模板。
• 很好的例子:用5种不同业务模板首页变化,5个不同的定价页面变化和其他页面符合“业务”垂直(登陆页面,页面工作,等)。
• 不好的例子:一个业务模板用不同的主页业务的变化,一个手机应用程序,一个机构,一个餐厅,和一个投资组合。这些都是不同的垂直。

模板和至少三个三个静态页面布局变化与“UI工具包”标记。

内容

• 非常重要:设计师应该创建内容和布局符合模板的主要标记。例如:非营利组织模板应该有内容、布局和数据库结构,最适合一个非盈利网站。做一些研究来找出什么样的内容通常有这种类型的网站。
• 避免使用通用的内容模式。例:进度条专业技能

CMS

CMS结构

• 集合应该匹配内容的类型,通常存在于这一类的网站。例:一个乐队的网站可能有收藏的歌曲,专辑,显示,和照片。
• 收集字段应该匹配内容的类型,通常存在于这一类的网站。例子:显示集合在一个乐队的网站可能显示的名称,地点名称,地点位置、日期和链接购买机票或更多信息的链接。
• 收集蛞蝓应该是单数。例:website.com/文章/页
  
• 收集字段应该在一个编写良好的逻辑顺序帮助文本如何使用它们。
• 集合应该至少3项和最多7项每一个集合。这些东西应该假内容类别的网站是有道理的。

CMS的设计

• 能见度条件应该被添加到项目依赖于是否存在一个字段值。例:只显示Facebook链接下一个团队成员如果Facebook链接字段有值。
• 网格的动态列表应该与长的项目名称,以确保测试布局不休息。
• 所有动态页面应该有内容和设计匹配模板类别。

电子商务

电子商务结构

• 不添加业务地址或配置任何电子商务设置(包括存储货币、运送或税收区域,等等)。这将确保,除此之外,我们所有的商店会用默认货币设置。
• 在电子商务选项卡>设置指南,以下步骤应该保持检查:
• 办公地址
• 送货方式
• 税的设置
• 支付服务提供商
• 举办
• 结帐

注意办公地址

• 一旦添加了一个办公地址,它不能被删除掉,所以它是非常重要的业务地址不是添加在创建一个模板。出于这个原因,我们也不允许现有的模板与业务地址留在模板市场。

电子商务网站的设计

不应该有任何下列电子商务模板页面预紧器:

• 欧宝体育在线首页产品模板
• 类模板
• 结帐
• 订单确认

车

• 应该在每个页面的导航或可见吗
• 标准应该包含元素(项目、小计、结帐按钮)和功能吗
• 理想情况下,应该包含所有主要支付方式支持

1. 定期检查按钮
2. Webpayments(可选)
3. 贝宝付款

结帐页面应包括:

• 付款形式
• 订单项
• 订单汇总

PayPal付款页面应该包括

• 贝宝付款形式
• 订单项
• 订单汇总
• 应该符合结帐页面样式

订单确认页面

• 应该包括订单确认元素

欧宝体育在线首页产品模板页面应包括:

• 元素添加到购物车
• 欧宝体育在线首页产品描述
• 欧宝体育在线首页产品形象

类别模板页应包括:

• 欧宝体育在线首页产品类别列表
• 上市产品页面的链接欧宝体育在线首页

欧宝体育在线首页产品管理

• 欧宝体育在线首页产品和类别应该使用一致的套管,正确的拼写,和名字有意义,尤其是在定制字段
• 应该有一个足够数量的虚拟产品和类别包含在模板设计看起来不错欧宝体育在线首页
• 我们建议确保至少有一些产品变异,当为你的模板是有道理的。欧宝体育在线首页

标签

• 网站上所有的标签(所有段落、有序列表,所有H1标题,等等)应该风格所以他们创建一致的和可读的内文每当一个富文本元素,标题元素,或任何其他文本元素添加到页面。这里有所有标签,应该风格:
• 所有的标题标签(H1标题、H2标题等)
• 所有段落标记
• 所有无序(无序)列表标记
• 所有命令(编号)列表标记
• 所有引用标记
• 所有数据标签(图片和标题包装)
• 所有图标题标签(图片说明)
• 所有的链接标签
• 特殊的标题、段落或其他文本元素看起来不同于默认的标签上面定义应该有一个类与覆盖风格。例:如果一个栏目标题看起来不同于所有H2标题标签然后创建一个新类的栏目标题。

富文本

• 应该每一个富文本元素文本类型模板详细地展示了使用时的页面。例子:永远模板的博客页面。
• 所标签上面部分,当用户添加任何文本元素的富文本,它应该看起来很好和正确的样式标签选择器。
• 如果有特殊的造型元素在一个特定的富文本元素,添加一个类,富文本然后样式标签的类。例:如果一个文本链接应该看起来不同在一个特定的富文本相比,所有的链接在网站上。
• 间距的每个文本元素在富文本应该是一致的。理想间距应设置在标签所以他们一致的整个网站。
  

排版,易读性、拼写和语法

• 所有文本应该正确的拼写和语法
  
• 标题需要独特的措辞(不是“lorem ipsum)网站的类型了。
• 段落可以使用“回车键”
• 文本需要清晰(背景颜色和字体颜色应该有足够的对比度对所有设备屏幕)
• 长时间运行和短标题标题应该用于测试行高bug
• 文本行高应避免文本本身在所有设备上坠毁
• 身体上设置的主要字体元素。二级字体,比如标题,然后应该设置个人标签,然后在单独的类。

搜索引擎优化

• 使用H1标题元素一旦页面上最重要的标题。最高排名。注意:如果您可以使用多个H1标签嵌套在截面或文章标签。
• 使用H2-H6副标题元素在页面上正确的层次结构。这些副标题元素的重要性等级是根据他们的名字,所以分配正确的副标题为内容的重要性。
• 搜索引擎优化设置需要匹配模板名称在主页上设置。SEO标题应该读“{模板名称}- Webflow HTML网站模板“静态和CMS模板或“{模板名称}- Webflow电子商务网站模板”的电子商务模板。
• 包括“由Webflow”页脚和Webflow主页的链接。

响应行为

• 重要的是:布局应该是流体和基于百分比的大部分。设计师应该测试在Webflow布局通过拖动窗口的宽度和测试发布的网站在移动设备上。
• 组件应该工作在所有媒体查询。例:标签应该成为堆放在移动
• 一般布局间距应加强在移动设备上。

Webflow的可用性

• 在可能的情况下使用最初出现在元素相互作用,这样客户是可见的。细节:一些元素使用显示:没有,可见性:隐藏,或不透明度:0和其他元素是可见的在默认情况下,显示:没有设置一个初始的外观。
• 例外:预紧器应该初始外观设置显示:没有,所以元素不会阻止访问页面内容。
• 组件(标签、滑块等)不能嵌套。例:滑块在滑块。
• 链接和按钮悬停状态需要表明他们是可点击的。
• 元素没有点击/互动不应该徘徊状态。
• 所有链接/按钮应该链接到其他地方。没有空链接。
• 主要图片重复网格内物品应该链接而不是有小隐藏文本链接
• 地图不应该API键补充道
• 在模板设计中不使用遗留的交互。

形式

• 表单字段应该正确设置。例:电子邮件字段不应文本字段
• 成功的消息应该定制适合网站设计
• 输入焦点状态应该定制适合网站设计
• 输入字段文本和占位符应清晰
• 给予适当的名称形式和领域元素(在形式设置)。这些名字将出现在电子邮件形式通知并形成报告。

符号

• 符号应该用于导航、页脚和重复的部分。

命名约定

• 类应该标题而不是缩写。不要使用破折号或其他传统的css规则(例如camelCase)。类名应该遵循正确的拼写。
• 页面名称标题,应该与这些页面导航链接名称一致。
• 符号应遵循标题
• 交互遵循判决案件,应描述如使用“幻灯片导航滚动”而不是“显示导航”
• 集合名称应该是标题,应该有单数和复数版本正确定义。这句话应该自然的声音:“这是一个收集的{{plural-version}}”和“创建一个新的{{singular-version}}”
• 收集蛞蝓应该是一个词,奇异紧张。他们还应该描述收集物品是什么。例:文章、项目成员、作者、客户端,标签,类别,事件,位置、属性等。
• 字段名称应该是句子,应该正确的拼写
• 收集项目名称应该是句子的情况。

类和风格

• 当不可能创建新类和风格当你从另一个类可以重用或级联样式创建相同的设计。
• 组合类应该小心使用和不超过两层。
• 类名应该描述的元素。坏:“column2”、“text1”或“第六节”。好:“社会图标”或“作者”或“证明部分。”
• 未使用的风格应该清除。
• 如果他们不需要删除样式。例:设置浮动:没有没有目的,除非你是压倒一切的浮动:离开了。

转换

• 转换应该适用于特定的属性,而不是“所有”。
• 应设置过渡变化对悬停的所有属性。例如如果文本颜色改变按钮上悬停,它应该有一个过渡。
• 转换应该是一致的。例:输入焦点和按钮悬停过渡应该相同的时间。

图片和许可证

• 图像、图标和其他资产应该允许在模板用于转售版权所有者。我们将询问许可证模板中使用的资产。
• 大背景图像应小于300 kb和小资产应小于20 kb。
• 视网膜图像应清晰设备和裁剪好
• 所有图片都应该大幅(@2x)视网膜设备。

标志

• 导航的标志应该模板名称相同。这个标志应该是一个形象所以很容易取代。

注册资产

• 溢价或商标图形的使用资产是不允许的。只使用自由允许资产转售和自由分配或CC0-licensed图形来源:
  - - - - - -备货
  - - - - - -Pexels
  - - - - - -Unsplash
• 创建一个名为许可证的页面在蛞蝓/许可证
• 顶部包含以下文本:
  “所有在这个模板图形资产被授权为个人和商业使用。如果你想使用一个特定的资产,请检查下面的许可证”。
• 在这个页面显示图形来源(图片、图标、字体、插图)与一个链接,指向的页面(见定义的许可证例子)。
• 将下面的代码添加到页面的自定义代码:
  < meta name = "机器人" content = " noindex " >
• 包括一个“许可”链接在页脚和授权页面的链接。

页面

• 页面应该有独特的布局(设计师应该避免冗余页面设计与结构上的差异)。
• 动态页面模板集合应该适当的字段添加到搜索引擎优化和OG字段。

建议实践

• 创建一个名为“风格指南”的页面上的所有标记(标题、段落、文字链接、列表按钮,等)
• 创建一个名为“指令”的页面如果先进,很难使用的交互或隐藏组件使用的网站。这个页面应该提供简短的信息如何访问和编辑这些组件。
• 创建一个名为“变更”跟踪模板的页面版本和更新。将下面的代码添加到更新日志页面的自定义代码:< meta name = "机器人" content = " noindex " >
• 测试每个页面上的每个链接/组件/交互和每个设备上,这样没有设计或布局错误。
  

网站设置

• 收藏夹图标和webclip应该定制和匹配模板的主题。
• 形式通知设置应该是空的
• 只有谷歌字体或免费(笔)可以使用字体——没有Typekit或自定义字体。
• 所有集成设置应该为默认。不生成一个API令牌或添加任何第三方集成的项目吗
• 网站的总重量应小于10 mb。
  

自定义代码

• 定制代码(在网站设置,嵌入在页面设置)是不允许在模板中,除了:
• 项目设置字体平滑——例如:{-webkit-font-smoothing:平滑;-moz-osx-font-smoothing:灰度;}
• 没有索引代码许可和更新日志页面:< meta name = "机器人" content = " noindex " >
• SVG的——如果你使用SVG的代码应添加一个明确指示页面模板和如何使用它。