随着国内市场饱和，越来越多的公司转向海外寻找新的增长机会，其中出海电商成为了最大的市场之一。21 年底艾媒咨询显示出海电商市场中，中国企业在海外的独立站数量已达 20 万+，所占份额从 2016 年 9.8%提升至 2021 年 25.6%，预计 2025 年将会到达 50%。

独立站相比平台的设计关键点

1. 货架 VS 内容

我们认为独立站和平台本质的差异在于独立站将商品内容化。平台就像货架上摆满各类型商品，需要用户快速找到并进行交易。而独立站把商品内容化，慢慢建立形象并输出内容从而和用户建立情感联系。那下文接着就将从导航、交易流程、视觉三个方面来分析两者基于货架和内容体验上的差异性。

导航

从导航结构来看，平台更为强调搜索将其置于顶部，同时强调分类的快速筛选。而独立站弱化搜索来节省纵向空间，顶部放置公告栏来定期公布优惠信息。分类若较少，分类导航会置于 products 页面下，采用页面导航。分类较多则会将页面导航换为分类导航，形成三层导航结构。

然后对于导航路径，平台有两种设计：

1. 面包屑：节省首屏屏效，缩短导航区纵向空间；
2. 楼梯式：导航聚合在各行以便于分类的展示和切换。

独立站依据分类的层级和个数会有面包屑和楼梯变种的设计：像 shein 作为服装采用了面包屑，而 Anker 作为 3C 采用楼梯式变种，横向展示所有品类的名称和图片。

交易流程

我们认为虽然现在电商出现直播电商，内容社区等新形式，但核心交易流程都较为固定：首页—搜索浏览—商品列表页—商详页—转化(购物车付款)。

来到电商网站的用户，可分为搜索型和浏览型。搜索型用户会直接通过搜索到达商品列表页，然后通过筛选条件找到心仪的商品进入到商详页，最后选择直接购买或者加入购物车来达成转化。而对于浏览型用户，区别在于他可能通过首页的推荐商品、推荐分类等模块来到达商品列表页而非搜索。因为首页本身只是作为入口，因此接下来将从搜索浏览、列表、商详、购物车转化来进行分析。

2. 搜索浏览

平台对于搜索框的处理较类似，将其置于页面的中心，差异性在于点击搜索框后是否会出现热门搜索和搜索历史来帮助用户进行决策。而独立站都会弱化搜索框，将其置于顶部功能区。原因在于独立站本身品类和 SKU 相对平台较少，搜索的频率需求不明显。点击独立站搜索功能后，有两种设计：品类较少会出现气泡，同时下方显示热门和模糊搜索结果；品类较多出现大气泡，在页面中部强化搜索区。

从浏览行为来看，平台首页有三个入口：

1. 头部的分类导航；
2. 首屏 banner 旁的分类；
3. 商品分类和商品卡片；

其中头部的分类导航、商品分类和商品卡片可通用到所有平台设计，而首屏 banner 旁的分类多出现于国内平台的设计中目的是提高商品分类的曝光率。而对于独立站，只有商品分类和商品卡片入口依然存在。

独立站另外有两个入口：

商品分类较少，分类隐藏在 products 页下，hover 后会出现所有分类和配图；

商品分类较多，分类作为单独页面，hover 到每个分类显示二级的商品配图和文字；

设计目标在于将更多分类和商品信息前置，缩短最终到达商品的路径。

3. 列表

商品列表页核心部分在于筛选+商品卡片，用户通过对应的筛选条件最后选择到满意的商品卡片。

平台筛选区普遍使用左右结构的设计，左边的筛选区加上右边的商品列表，筛选区默认主动展开常用而收起低频筛选项。筛选项较多情形下操作效率较高，但占据空间大同时影响整体视觉效果。

而独立站筛选区有两种设计：

分类较多，将分类置于头部便于快速筛选，其他筛选项默认收起只有点击才展开；

分类较少，使用上下结构默认筛选区收起，点击展开后会对筛选项纵向进行分类，筛选完成后会有对应的信息外露。主要为了展示更多商品条目以及营造视觉氛围感；

对于商品卡片，平台和独立站都采用了上图下文，适用于图片为主其他信息为辅的卡片，在保持展示卡片个数的同时浏览效率较高。而从细节上来看，平台会有较多信息来强调信任感，因为平台本身商品都由第三方商家提供，所以得给予用户足够信任。而独立站之所以不强调，因为它通过品牌建设来给予用户信任感，所以独立站放大图片面积，缩小信任相关文字信息。独立站另一个特征在于，条目列表页就有较多转化入口，基本可以直接加入购物车详情，来最终缩短用户的决策路径。

4. 商详

独立站和平台商详页最大区别在于首屏的信息结构，独立站分为两块：图片+信息，给图片本身留出了较大展示区，而信息聚焦于最核心的款式和价格，转化区域吸底目的为了强化转化率+占用过少空间。然后平台首屏分为三块，将转化区置于页面的右方来强化用户首屏下的转化率，缺点在于用户下滑到页面下方时无法进行转化操作。有的平台会将右边转化区悬浮，缺点在于会压缩下方的商品详细信息区。

5. 转化

平台有两个常见的转化操作：购物车和购买，而越来越多的独立站开始用心愿单的功能来替代原来的购买操作，其中心愿单可直接在商品条目页添加。我们推测主要目的在于降低用户决策成本，促进更多转化。接下来主要从心愿单，购物车，付款页来进行分析。

心愿单：独立站交易流程中有两个入口可以把商品添加到心愿单：列表页中的商品卡片和商详页。而心愿单页面，是商品卡片的集合以及对应的操作。

购物车：平台点击购物车会直接跳转到购物车页，购物车页多为左右结构，左边商品列表+右边的总价&付款。相比之下，独立站会有两种设计：商品数目较少，不会设计购物车页，而是通过抽屉形式来进行承载；商品数目较多，hover 到购物车按钮以气泡形式显示已有商品和付款按钮，直接点击购物车按钮也可跳转到购物车页，购物车页本身设计差异不大。

付款页：平台付款页为左右结构，左边是下滑填写付款商品快递等信息，然后右边是付款结算区，悬浮在页面右部分；独立站因为涉及到海外物流和支付，所以为了避免过长信息填写，将左部分设计成了分布填写区，而右边固定是所选商品内容和价格，来降低了用户填写信息时的心理负担。

视觉

基于我们的设计经验，网站的视觉设计一般有三个对应的难点：品牌—如何突出网站品牌特色，形成差异化；节奏—如何合理排列不同视觉元素，形成视觉动线和层级；创新—如何突破简单的页面框架限制。那下文就将基于这三点来分析：

品牌：形成品牌感的本质在于“形+色“，如何通过色彩和图形来形成差异性。

这方面独立站和平台的差异性并不大，都是基于自身的 logo 品牌，提取出对应的基本型、色彩以及感觉。然后将其运用到网站设计上，比如运营类的 icon，插图，banner 以及页面组件类如按钮，标签和搜索框等。独立站对比下延伸场景更为丰富，因为运营图都是自己配置，所以把颜色氛围以及形状都融入其中，形成更突出的品牌感。

节奏：左边是平台首页的布局节奏，视觉动线都是从上往下，然后每行从左到右，变化较少。然后从视觉层次来看，除了首屏的 banner 区域会有不同的版式突出视觉重点，下面的排版节奏都较为平均，只偶尔变化来避免节奏的重复。

右边是独立站，可以看到视觉动线会从顶部 banner 区开始，从页面中间往下，到了后面部分才开始从左到右。从视觉层次来看，它延长顶部 banner 区的视觉重点，在首屏以下位置才开始弱化内容。而独立站下方内容也基于其多元的内容载体来采用不同的排版方式，丰富整体层次。目的在于在首屏强化对于用户的视觉吸引力，保持用户高度的专注。

创新：想要突破单调的网站首页设计，一般会选择头部 banner 和非核心信息区入手。独立站因为其头部 banner 区的所有运营图自己提供，可以通过不同配色和排版来避免的重复实现创新。另一方面，独立站非核心信息区内容较为丰富：比如品牌故事，博客文章，合作伙伴，对应信息区都会有特定的布局创新。