出海電商是海外的增長機會點，本文将先介紹獨立站這股出海電商新趨勢，然後從用戶體驗視角描述導航、交易流程、視覺三個方面與電商平台的差異性，最後基于百度剛推出的獨立站SAAS産品出海易，分享一些獨立站設計經驗和避坑點。

随着國内市場飽和，越來越多的公司轉向海外尋找新的增長機會，其中出海電商成為了最大的市場之一。2021年底艾媒咨詢顯示出海電商市場中，中國企業在海外的獨立站數量已達20萬 ，所占份額從2016年9.8%提升至2021年25.6%，預計2025年将會到達50%。

什麼是獨立站？2022年成功在iOS榜單超越亞馬遜的Shein是其中的代表。它起初定位于依靠多SKU和低價的鋪貨型公司，但難見起色，之後成功轉向于依靠流量運營和供應鍊體系的品牌型公司，通過自己站點直接和用戶鍊接并發生交易。

本文将先介紹獨立站這股出海電商新趨勢，然後從用戶體驗視角描述導航、交易流程、視覺三個方面與電商平台的差異性，最後我們基于百度剛推出的獨立站SAAS産品出海易，分享一些獨立站設計經驗和避坑點。

一、出海電商發展趨勢

（一）平台轉向獨立站

海外電商市場集中度低，亞馬遜封号熱潮，資本大批湧入，使得出海聚光燈逐漸從平台轉向獨立站。

根據下面頭豹研究院整理的19年各國電商占比圖可看出，中國平台電商占比整體電商市場高達86%，而歐美國家占比為60%。同時中國自有品牌占比1%，而歐美國家平均占比高達24%。可見歐美電商市場平台占比低，難以形成壟斷，同時自有品牌占有率高，因此品牌獨立站在海外有更優質的發展環境。

亞馬遜等海外平台政策逐漸收緊，2021年亞馬遜封号潮迫使衆多國内商家倒閉關店。同時對于新手，平台入場門檻越發變高：注冊方式受限，通過率低以及中國賬号易被封号。與之相對是機會越發變少，平台上流量争奪和價格戰越發激烈，作為新人店鋪想在平台獲得較好的曝光和推薦現在可能性極低。

近年來無數資本開始湧入獨立站。shopify作為頭部獨立站服務商股價從2019到2022上漲近10倍，22年獨立站領頭羊Shein市值高達千億美金, 拼多多9月上線Temu對标Shein作為公司重點項目。這些都預示越來越多商家和公司開始關注并入局獨立站。

（二）獨立站是什麼

下圖分别是國外頭部平台亞馬遜和獨立站Shein的首頁。亞馬遜顯得規整，統一，秩序；而右邊Shein更為豐富，跳躍，自由。我們認為自由，是獨立站和平台本質上的差異點。

為什麼獨立站可以這麼自由呢？

因為獨立站擁有獨立域名和頁面, 并由商家獨立設計、運營來打造品牌。商家對于獨立站每一個環節都擁有絕對的自主權，同時帶來特定優勢：

• 自主：獨立站不用遵循平台固定規範來搭建統一的店鋪和詳情頁；不用強制參與平台官方的618等活動，擁有自身營銷節點和節奏；不用被平台限制，擁有自身投放渠道和運營方式。
• 多渠道流量：商家可以根據産品定位和目标用戶，在不同渠道進行流量投放。比如潮玩投放年輕人社區—Tiktok，傳統B2B—投放商務社區Linkedin。
• 數字資産：通過獨立站商家可以獲得大量之前在平台手中的用戶數據。基于這些數據商家可以叠代産品，打造私域流量，保證用戶粘性和生命周期，慢慢形成品牌溢價。

但獨立站的模式并不适用于所有的出海商家：

• 獨立站對于商家專業要求較高，從最初建站，用戶運營到後期數據洞察，都需要商家自己參與和把控。而平台本身規範，玩法以及合作服務商，可以降低商家入局門檻和壓力。
• 多渠道會導緻商家投放難度的增高，比如Facebook信息流和Tiktok短視頻投放的規則、内容以及針對人群差異較大，會導緻最後投放效果難以精确衡量。

（三）獨立站成功的關鍵

獨立站模式下，核心在于商家管理信息流、資金流以及物流的能力。其中資金和物流主要基于商家選擇的服務商，比如跨境支付、倉儲和配送能力。而在信息流層面，更多在于商家對于用戶的觸達和轉化，這也是作為設計師可以參與并發力的點。

那麼獨立站針對的用戶會具有什麼樣的特征？國泰君安證券曾經專門研究過Shein的用戶，主要為20-35追求時尚個性的白領女士，該類群體追求個性化和潮流同時注重商品性價比。因此我們認為追求個性化，同時付費能力相對有限的年輕人更傾向于在獨立站進行交易。

獨立站對于用戶而言，存在觸達(多渠道)—認知(物料 站點)—消費(站點轉化到完成交易)—傳播(多渠道)等觸點，在這些觸點打動用戶的關鍵在于品牌認知和主觀認同。整個過程中，設計一方面可以在認知階段從視覺層面通過物料、站點、推文傳遞品牌感知，另一方面可以在消費階段從交互層面通過互動、服務來建立連接和粘性。

二、獨立站相比平台的設計關鍵點

（一）貨架VS内容

我們認為獨立站和平台本質的差異在于獨立站将商品内容化。平台就像貨架上擺滿各類型商品，需要用戶快速找到并進行交易。而獨立站把商品内容化，慢慢建立形象并輸出内容從而和用戶建立情感聯系。那下文接着就将從導航、交易流程、視覺三個方面來分析兩者基于貨架和内容體驗上的差異性。

01.導航

從導航結構來看，平台更為強調搜索将其置于頂部，同時強調分類的快速篩選。而獨立站弱化搜索來節省縱向空間，頂部放置公告欄來定期公布優惠信息。分類若較少，分類導航會置于products頁面下，采用頁面導航。分類較多則會将頁面導航換為分類導航，形成三層導航結構。

然後對于導航路徑，平台有兩種設計：

• 面包屑：節省首屏屏效，縮短導航區縱向空間；
• 樓梯式：導航聚合在各行以便于分類的展示和切換。

獨立站依據分類的層級和個數會有面包屑和樓梯變種的設計：像shein作為服裝采用了面包屑，而Anker作為3C采用樓梯式變種，橫向展示所有品類的名稱和圖片。

02.交易流程

我們認為雖然現在電商出現直播電商，内容社區等新形式，但核心交易流程都較為固定：首頁—搜索/浏覽—商品列表頁—商詳頁—轉化(購物車/付款)。

來到電商網站的用戶，可分為搜索型和浏覽型。搜索型用戶會直接通過搜索到達商品列表頁，然後通過篩選條件找到心儀的商品進入到商詳頁，最後選擇直接購買或者加入購物車來達成轉化。而對于浏覽型用戶，區别在于他可能通過首頁的推薦商品、推薦分類等模塊來到達商品列表頁而非搜索。因為首頁本身隻是作為入口，因此接下來将從搜索/浏覽、列表、商詳、購物車/轉化來進行分析。

（二）搜索/浏覽

平台對于搜索框的處理較類似，将其置于頁面的中心，差異性在于點擊搜索框後是否會出現熱門搜索和搜索曆史來幫助用戶進行決策。而獨立站都會弱化搜索框，将其置于頂部功能區。原因在于獨立站本身品類和SKU相對平台較少，搜索的頻率需求不明顯。點擊獨立站搜索功能後，有兩種設計：品類較少會出現氣泡，同時下方顯示熱門和模糊搜索結果；品類較多出現大氣泡，在頁面中部強化搜索區。

那從浏覽行為來看，平台首頁有三個入口：

• 頭部的分類導航；
• 首屏banner旁的分類；
• 商品分類和商品卡片；

其中頭部的分類導航、商品分類和商品卡片可通用到所有平台設計，而首屏banner旁的分類多出現于國内平台的設計中目的是提高商品分類的曝光率。而對于獨立站，隻有商品分類和商品卡片入口依然存在。

獨立站另外有兩個入口：

• 商品分類較少，分類隐藏在products頁下，hover後會出現所有分類和配圖；
• 商品分類較多，分類作為單獨頁面，hover到每個分類顯示二級的商品配圖和文字；

設計目标在于将更多分類和商品信息前置，縮短最終到達商品的路徑。

（三）列表

商品列表頁核心部分在于篩選 商品卡片，用戶通過對應的篩選條件最後選擇到滿意的商品卡片。

平台篩選區普遍使用左右結構的設計，左邊的篩選區加上右邊的商品列表，篩選區默認主動展開常用而收起低頻篩選項。篩選項較多情形下操作效率較高，但占據空間大同時影響整體視覺效果。

而獨立站篩選區有兩種設計：

• 分類較多，将分類置于頭部便于快速篩選，其他篩選項默認收起隻有點擊才展開；
• 分類較少，使用上下結構默認篩選區收起，點擊展開後會對篩選項縱向進行分類，篩選完成後會有對應的信息外露。主要為了展示更多商品條目以及營造視覺氛圍感；

對于商品卡片，平台和獨立站都采用了上圖下文，适用于圖片為主其他信息為輔的卡片，在保持展示卡片個數的同時浏覽效率較高。而從細節上來看，平台會有較多信息來強調信任感，因為平台本身商品都由第三方商家提供，所以得給予用戶足夠信任。而獨立站之所以不強調，因為它通過品牌建設來給予用戶信任感，所以獨立站放大圖片面積，縮小信任相關文字信息。獨立站另一個特征在于，條目列表頁就有較多轉化入口，基本可以直接加入購物車/詳情，來最終縮短用戶的決策路徑。

（四）商詳

獨立站和平台商詳頁最大區别在于首屏的信息結構，獨立站分為兩塊：圖片 信息，給圖片本身留出了較大展示區，而信息聚焦于最核心的款式和價格，轉化區域吸底目的為了強化轉化率 占用過少空間。然後平台首屏分為三塊，将轉化區置于頁面的右方來強化用戶首屏下的轉化率，缺點在于用戶下滑到頁面下方時無法進行轉化操作。有的平台會将右邊轉化區懸浮，缺點在于會壓縮下方的商品詳細信息區。

（五）轉化

平台有兩個常見的轉化操作：購物車和購買，而越來越多的獨立站開始用心願單的功能來替代原來的購買操作，其中心願單可直接在商品條目頁添加。我們推測主要目的在于降低用戶決策成本，促進更多轉化。接下來主要從心願單，購物車，付款頁來進行分析。

• 心願單：獨立站交易流程中有兩個入口可以把商品添加到心願單：列表頁中的商品卡片和商詳頁。而心願單頁面，是商品卡片的集合以及對應的操作。
• 購物車：平台點擊購物車會直接跳轉到購物車頁，購物車頁多為左右結構，左邊商品列表 右邊的總價&付款。相比之下，獨立站會有兩種設計：商品數目較少，不會設計購物車頁，而是通過抽屜形式來進行承載；商品數目較多，hover到購物車按鈕以氣泡形式顯示已有商品和付款按鈕，直接點擊購物車按鈕也可跳轉到購物車頁，購物車頁本身設計差異不大。

• 付款頁：平台付款頁為左右結構，左邊是下滑填寫付款/商品/快遞等信息，然後右邊是付款結算區，懸浮在頁面右部分；獨立站因為涉及到海外物流和支付，所以為了避免過長信息填寫，将左部分設計成了分布填寫區，而右邊固定是所選商品内容和價格，來降低了用戶填寫信息時的心理負擔。

03.視覺

基于我們的設計經驗，網站的視覺設計一般有三個對應的難點：品牌—如何突出網站品牌特色，形成差異化；節奏—如何合理排列不同視覺元素，形成視覺動線和層級；創新—如何突破簡單的頁面框架限制。那下文就将基于這三點來分析：

（1）品牌：形成品牌感的本質在于“形 色“，如何通過色彩和圖形來形成差異性。

這方面獨立站和平台的差異性并不大，都是基于自身的logo品牌，提取出對應的基本型、色彩以及感覺。然後将其運用到網站設計上，比如運營類的icon，插圖，banner以及頁面組件類如按鈕，标簽和搜索框等。獨立站對比下延伸場景更為豐富，因為運營圖都是自己配置，所以把顔色氛圍以及形狀都融入其中，形成更突出的品牌感。

（2）節奏：左邊是平台首頁的布局節奏，視覺動線都是從上往下，然後每行從左到右，變化較少。然後從視覺層次來看，除了首屏的banner區域會有不同的版式突出視覺重點，下面的排版節奏都較為平均，隻偶爾變化來避免節奏的重複。

右邊是獨立站，可以看到視覺動線會從頂部banner區開始，從頁面中間往下，到了後面部分才開始從左到右。從視覺層次來看，它延長頂部banner區的視覺重點，在首屏以下位置才開始弱化内容。而獨立站下方内容也基于其多元的内容載體來采用不同的排版方式，豐富整體層次。目的在于在首屏強化對于用戶的視覺吸引力，保持用戶高度的專注。

（3）創新：想要突破單調的網站首頁設計，一般會選擇頭部banner和非核心信息區入手。獨立站因為其頭部banner區的所有運營圖自己提供，可以通過不同配色和排版來避免的重複實現創新。另一方面，獨立站非核心信息區内容較為豐富：比如品牌故事，博客文章，合作夥伴，對應信息區都會有特定的布局創新。

三、獨立站設計的常見避坑點

第三部分本文将基于百度剛推出的獨立站SAAS産品出海易，分享獨立站設計避坑點。

出海易是去年百度B2B下面孵化新業務，它緻力于幫助企業一站式出海，目前在4月已經推出出海易SAAS産品并正式售賣。基于我們目前設計經驗和思考，如下圖獨立站設計有七類問題需要注意。

而接下來将從中選出信息缺失、圖片質量、移動端體驗、國内外體驗差異這四類我們在出海易業務實踐中完整體現的問題來分析。

（一）信息缺失

之前提到過，獨立站相比平台一大特色就是信息豐富且多元。但作為服務商，實際會接觸到不少初次嘗試出海的中小企業，這些商家由于自身經驗不足，提供的信息和物料出現缺失現象。那作為設計師面對這樣的情形，應該如何設計以補救呢？

（1）商品圖片缺失：首先在SAAS後台上傳圖片的部分設置了圖片的必填項，另外設置提示文字來吸引用戶上傳更多圖片。從商詳頁的排版來看，商品和商品縮略圖上下排列，這樣在商品圖隻有一張的情形下，可隐藏縮略圖的内容，不會對整體視覺效果産生較大影響。

（2）公司信息缺失：在每個信息模塊，給予商家調整模塊數量的自由度。商家可自由添加信息卡片的數量，一個，二個，三個，或者直接隐藏該模塊。針對不同數量的信息模塊，也設計對應樣式來滿足商家需求。

（二）圖片質量

獨立站一大亮點在于高質量商品圖片，作為設計師當然會設想商家能提供下圖左邊的圖片。但放到實際場景下商家提供的圖片質量和效果都不可控，往往是提供的圖片右邊這樣。

所以很多商家提供的圖片質量很難滿足現有獨立站對于圖片的要求，因此從設計側通過以下三個設計策略來進行補救：

設計策略1：設計統一且規格有限的展現容器

設計正方形容器，所有圖片都會自動縮放到容器區域下，來保證不同圖片尺寸下整體視覺上的一緻性。

設計策略2：設計特定的卡片樣式

對于商品卡片會有多種處理方法，樣式1直接給圖片固定底色，來形成卡片間的間隔。而樣式2和3都采用透明背景色，卡片通過較大的間隔來進行整體的區分。

樣式1這樣通過固定底色的模式對于圖片本身要求過高。而像樣式2和3隻通過間距區分會帶來問題，實際下的商品圖片有的有底，有的沒底，容易産生不一緻的場景。因此最後實際設計樣式直接給了整體背景底色，然後用白色的卡片來區分商品，同時縮小了圖片所占的面積來避免圖片質量差的影響。

設計策略3：上傳給予規範提示和案例

SAAS後台會設計對應的尺寸提示，在用戶編輯上傳圖片前，頁面會有對應默認圖來暗示用戶合理的圖片樣式，給到商家配色和尺寸參考。

（三）動端體驗

國外PC還是用戶主要購物方式，因此獨立站設計以PC為主。但随着國外移動互聯網的發展，移動端也成了商家必須要布局的部分。無論對于設計師還是開發，重新設計開發并維護PC和移動兩套成本都巨大，因此自适應成了這個階段下較優選擇。下面将會分享下自适應設計下的一些細節。

（1）導航區：PC端的頁面導航和功能區處于頁面頂部，然後是商品分類。在wise端，很難在首頁進行複雜的頁面切換，因此将其置于左上角的抽屜下，而搜索和切換語言使用了模态的氣泡設計，更符合用戶手機端下的聚焦單一任務的使用習慣。

（2）篩選區：PC端分類篩選區在左側，默認顯示一級分類，點擊展示二級分類。在wise端，将分類篩選置于商品列表區上方來留出更多展示空間，默認收起然後以模态氣泡的形式展開。

四、國内外差異

因為獨立站針對海外用戶，所以和國内電商設計相比有兩個問題需要注意：

1. 不同國家下語言差異會導緻視覺差異
2. 不同國家間用戶在操作習慣本身存在差異。

（1）語言：不同國家語言會導緻排版差異，同樣的文字在不同語言下的字符數差距較大。然後同時會帶來視覺動線上的差别，比如下圖是中東等巴基斯坦等國家所使用的烏爾都語，該語言會帶來視覺動線從右往左的變化。另外要考慮到不同語言下字段長度的适配情況，在排版時候盡量上下排布避免左右排布。

（2）體驗：國内外用戶本身操作習慣上存在差異，比如左邊是一個國内常見的電商設計，圖片切換在主圖的下方，通過點擊圖片進行切換，主要是為了留出更多的橫向空間給商品信息，但這種小圖切換然後大圖預覽由下往上的視覺動線影響了視覺體驗，主要是給商品信息的展示效率讓步。而右邊是國外常見的體驗方式，商品信息較為省略，圖片切換在左圖的左側，為了從左到右更好的視覺動線和體驗。同時當你hover到對應圖片的時候，主圖也會随之切換進行預覽，優化了對應切換體驗。

五、結語

随着全球電商的迅速發展和出海熱潮的加劇，獨立站會逐漸成為出海商家國外品牌推廣、營銷、客戶關系維護的重要抓手，同時也會給更多具有特色和渴望創新的設計師們，更廣闊展現自身才華的空間和機會。乘風潮頭立，啟航正當時，獨立站期待你的加入。

作者：商業用戶體驗部

來源公衆号：百度MEUX（ID：baidumeux），百度移動生态用戶體驗設計中心，負責百度移動生态體系的用戶/商業産品的全鍊路體驗設計。

本文由人人都是産品經理合作媒體 @百度MEUX 授權發布，未經許可，禁止轉載。

題圖來自Unsplash，基于 CC0 協議

該文觀點僅代表作者本人，人人都是産品經理平台僅提供信息存儲空間服務。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部