设计规范

设计规范 2020 年 4 月 19 日 1 文档仅供参考，不当之处，请联系改正。 商品易于购买 导航条清晰、显著，使各个页面有效地相关联导航条清晰、显著，使各个页面有效地相关联 导航条为访问店铺的买家提供一条快速通道，使她们能够方便地 从一个页面跳转到另一个页面，查看店铺的各类商品及信息。因 此，提供清晰、显著的导航条，能保证更多的店铺页面被访问， 从而使更多的商品或促销活动被发现。特别买家进入店铺的常见 路线是从宝贝详情页到其它页面，若缺乏导航条的指引，将极大 影响转化率。 设计优良的导航条，应与其它区域有清晰的视觉间隔，易发现。 被选中的导航项，样式应与其余导航项有所区别。 示例区示例区 下面两张图片所示，导航条的颜色、字体、高度，保证了在丰富 的促销内容视觉冲击下，买家依然能有效地寻找到进入其它页面 的路径。 淘宝网内衣频道的导航条: 2 2020 年 4 月 19 日 文档仅供参考，不当之处，请联系改正。 淘宝网全球购频道的导航条: 下图所示店铺，经过背景色、分隔线和适当留白的处理，使导航 显著、突出。 3 2020 年 4 月 19 日 文档仅供参考，不当之处，请联系改正。 相反地，接下来所示店铺，导航淹没在图片与文字中，难被买家 发现，因此难以找到进入店铺首页的路径。 最后这家店铺，误将重要的导航条当作促销区，买家完全不知如 何进入店铺。 4 2020 年 4 月 19 日 文档仅供参考，不当之处，请联系改正。 优先展现店铺分类及店铺搜索优先展现店铺分类及店铺搜索 从购物目的来区分，买家购物路径一般包括直接搜索、按类目点 击、无目的闲逛三种。店铺装修应能同时满足购物路径不同的买 家，因此需要平衡促销内容、宝贝分类以及宝贝搜索的展示优先 级。 大量的促销推广内容虽然能引起点击，但在首屏提供清晰的商品 分类以及搜索入口，能为购物目的相对明确的买家提供便捷的导 购，更易于她们找到自己想要的宝贝，促进成交。 示例区示例区 5 2020 年 4 月 19 日 文档仅供参考，不当之处，请联系改正。 下图所示淘宝商城，在首屏既包括丰富的促销内容，也为买家提 供了详尽的商品分类及搜索入口。 特别对于标准类商品（如 3C 数码等），买家的购物目的相对更明 确，分类与搜索将大大节省买家寻找时间。 在旺铺默认的模板中，提供了在店铺导航中勾选添加“全部分 6 2020 年 4 月 19 日 文档仅供参考，不当之处，请联系改正。 类”这一功能（见下图）。该功能的目的就是为了使买家能更快 捷地定位到所需类目下，解决竖式宝贝分类过长、查找麻烦的问 题。因此在设计模板时，可考虑使用更多元化的宝贝分类展示方 式，为买家提供便利的导购。 最后所示的店铺，将主分类展现在首屏，从宝贝详情页进入店铺 的买家，能方便地跳转到各个分类。 7 2020 年 4 月 19 日 文档仅供参考，不当之处，请联系改正。 商品易于浏览 避免在页面单一、无序地堆积商品避免在页面单一、无序地堆积商品 经过优化商品展示的视觉层次感、韵律感，能减少买家在浏览商 品过程中的视觉疲劳，从而相应地增加页面停留时间。 示例区示例区 下图所示店铺，在展现不同分类产品时，每一分类经过大图配小 图、合理对齐、添加醒目的标题等方式，提高了页面的视觉韵律 感和浏览的愉悦感。 8 2020 年 4 月 19 日 文档仅供参考，不当之处，请联系改正。 下面所示店铺亦然，经过图标、文案、大图、小图的组合形式， 为买家提供了良好的视觉引导。 2020 年 4 月 19 日 9 文档仅供参考，不当之处，请联系改正。 提高页面可读性，慎用花哨背景及提高页面可读性，慎用花哨背景及 flashflash 动画效果动画效果 设置页面背景的目的在于适度烘托氛围、使店铺个性更明显，但 切忌喧宾夺主、影响对正常商品的浏览。 除了背景，在使用 bannermaker 装修模板时，十分忌讳大量堆砌 动态内容。这不但会造成视觉疲劳，而且吸引眼球的元素过多， 商品本身得到的注意力反被减少了。 示例区示例区 下图所示店铺，使用促销语“Last Chance”（最后折扣机会）为 平铺背景，但颜色、对比度设置得当，既传达了折扣促销的购物 氛围，又不会影响买家对商品的浏览。 10 2020 年 4 月 19 日 文档仅供参考，不当之处，请联系改正。 相反，下面的店铺，背景过于抢眼、对比度过强，反而无法突出 商品本身，特别在整页地浏览时，视觉刺激过强，引起不适感。 商品易于购买商品易于购买 宝贝详情应突出当前商品，装修模板关联推荐太多易造成买家流宝贝详情应突出当前商品，装修模板关联推荐太多易造成买家流 失失 在宝贝详情装修模板中放入关联推荐，有助于带动相关购买，提 高客单价。但买家打开一个宝贝详情页，最需要获取的是与当前 商品相关的信息，从而辅助购买决策。若无度地添加关联推荐， 11 2020 年 4 月 19 日 文档仅供参考，不当之处，请联系改正。 买家滚动多屏仍看不见当前页所出售商品的详情，便会离开页 面。特别对于新手买家，更是会造成一定程度的困惑。 示例区示例区 下图所示宝贝详情页，装修模板有 6 屏以上，且关联推荐杂乱无 序，极大影响了对宝贝本身的浏览。同时，这种硬销的手段，也 降低了店铺的品质感。 而下图所示店铺，装修模板设计美观、清晰、适度，买家只需拖 动一屏即可看到商品主体信息，既达到了关联营销的目的，又不 会对买家的购买造成影响。 12 2020 年 4 月 19 日 文档仅供参考，不当之处，请联系改正。 下图是某装修模板的尾部，提供了返回店铺首页、进入同系列产 品的导航条，也是有效地进行关联推荐的另一种有效又友好的手 段。 13 2020 年 4 月 19 日 文档仅供参考，不当之处，请联系改正。 不造假、不夸大，提高店铺可信度不造假、不夸大，提高店铺可信度 对于任何想要营造自身品牌、做长久生意的店铺，经过店铺装修 在买家心目中建立店铺可信度是非常重要的。 示例区示例区 一方面，任何店铺设计元素都应反映真实，避免例如下面两张图 所示的店铺 LOGO（标识）夸大、造假，以及利用买家习惯、伪造 假掌柜档案欺骗买家。这种行为最终不会为店铺带来任何好处， 同时，买家备受真假信息困扰，只会放弃购物。 14 2020 年 4 月 19 日 文档仅供参考，不当之处，请联系改正。 页头 在传统旺铺装修模版中，页头等于店招与导航。可是在新的店铺 装修模板设计中，需要明确转变概念：页头≠店招。 15 2020 年 4 月 19 日 文档仅供参考，不当之处，请联系改正。 页头是一个店铺所有页面均公用的区域，其核心在于提供店铺全 局导航，为买家从详情页转化到店铺首页提供关键入口。当前， 除首页和自定义页面外，其余页面均限高 250 像素。即，超出 250 像素高度的页头区域都将被切割。因此在设计时应合理利用 页头，有效整合导航、促销等信息。 示例区示例区 下图所示店铺，页头有效结合地整合了店铺 LOGO、导航条、促销 信息，使关键的销售信息及促进转化的购买按钮清晰显著，在第 一屏即可见。 而下图所示店铺虽然设计美观，但店铺 LOGO 不必要地重复展 现，同时店招区域过大，视觉上对核心的导航条造成压迫效