2023-1-4 博博
隨著國內市場飽和，越來越多的公司轉向海外尋找新的增長機會，其中出海電商成為了最大的市場之一。21年底艾媒咨詢顯示出海電商市場中，中國企業在海外的獨立站數量已達20萬+，所占份額從2016年9.8%提升至2021年25.6%，預計2025年將會到達50%。
什么是獨立站？2022年成功在iOS榜單超越亞馬遜的Shein是其中的代表。它起初定位于依靠多SKU和低價的鋪貨型公司，但難見起色，之后成功轉向于依靠流量運營和供應鏈體系的品牌型公司，通過自己站點直接和用戶鏈接并發生交易。
本文將先介紹獨立站這股出海電商新趨勢，然后從用戶體驗視角描述導航、交易流程、視覺三個方面與電商平臺的差異性，最后我們基于百度剛推出的獨立站SAAS產品出海易，分享一些獨立站設計經驗和避坑點。
海外電商市場集中度低，亞馬遜封號熱潮，資本大批涌入，使得出海聚光燈逐漸從平臺轉向獨立站。
根據下面頭豹研究院整理的19年各國電商占比圖可看出，中國平臺電商占比整體電商市場高達86%，而歐美國家占比為60%。同時中國自有品牌占比1%，而歐美國家平均占比高達24%?？梢姎W美電商市場平臺占比低，難以形成壟斷，同時自有品牌占有率高，因此品牌獨立站在海外有更優質的發展環境。
亞馬遜等海外平臺政策逐漸收緊，2021年亞馬遜封號潮迫使眾多國內商家倒閉關店。同時對于新手，平臺入場門檻越發變高：注冊方式受限，通過率低以及中國賬號易被封號。與之相對是機會越發變少，平臺上流量爭奪和價格戰越發激烈，作為新人店鋪想在平臺獲得較好的曝光和推薦現在可能性極低。
近年來無數資本開始涌入獨立站。shopify作為頭部獨立站服務商股價從2019到2022上漲近10倍，22年獨立站領頭羊Shein市值高達千億美金, 拼多多9月上線Temu對標Shein作為公司重點項目。這些都預示越來越多商家和公司開始關注并入局獨立站。
下圖分別是國外頭部平臺亞馬遜和獨立站Shein的首頁。亞馬遜顯得規整，統一，秩序；而右邊Shein更為豐富，跳躍，自由。我們認為自由，是獨立站和平臺本質上的差異點。
為什么獨立站可以這么自由呢？
因為獨立站擁有獨立域名和頁面, 并由商家獨立設計、運營來打造品牌。商家對于獨立站每一個環節都擁有絕對的自主權，同時帶來特定優勢：
但獨立站的模式并不適用于所有的出海商家：
獨立站模式下，核心在于商家管理信息流、資金流以及物流的能力。其中資金和物流主要基于商家選擇的服務商，比如跨境支付、倉儲和配送能力。而在信息流層面，更多在于商家對于用戶的觸達和轉化，這也是作為設計師可以參與并發力的點。
那么獨立站針對的用戶會具有什么樣的特征？國泰君安證券曾經專門研究過Shein的用戶，主要為20-35追求時尚個性的白領女士，該類群體追求個性化和潮流同時注重商品性價比。因此我們認為追求個性化，同時付費能力相對有限的年輕人更傾向于在獨立站進行交易。
獨立站對于用戶而言，存在觸達(多渠道)—認知(物料+站點)—消費(站點轉化到完成交易)—傳播(多渠道)等觸點，在這些觸點打動用戶的關鍵在于品牌認知和主觀認同。整個過程中，設計一方面可以在認知階段從視覺層面通過物料、站點、推文傳遞品牌感知，另一方面可以在消費階段從交互層面通過互動、服務來建立連接和粘性。
2.獨立站相比平臺的設計關鍵點
我們認為獨立站和平臺本質的差異在于獨立站將商品內容化。平臺就像貨架上擺滿各類型商品，需要用戶快速找到并進行交易。而獨立站把商品內容化，慢慢建立形象并輸出內容從而和用戶建立情感聯系。那下文接著就將從導航、交易流程、視覺三個方面來分析兩者基于貨架和內容體驗上的差異性。
從導航結構來看，平臺更為強調搜索將其置于頂部，同時強調分類的快速篩選。而獨立站弱化搜索來節省縱向空間，頂部放置公告欄來定期公布優惠信息。分類若較少，分類導航會置于products頁面下，采用頁面導航。分類較多則會將頁面導航換為分類導航，形成三層導航結構。
然后對于導航路徑，平臺有兩種設計：
獨立站依據分類的層級和個數會有面包屑和樓梯變種的設計：像shein作為服裝采用了面包屑，而Anker作為3C采用樓梯式變種，橫向展示所有品類的名稱和圖片。
我們認為雖然現在電商出現直播電商，內容社區等新形式，但核心交易流程都較為固定：首頁—搜索/瀏覽—商品列表頁—商詳頁—轉化(購物車/付款)。
來到電商網站的用戶，可分為搜索型和瀏覽型。搜索型用戶會直接通過搜索到達商品列表頁，然后通過篩選條件找到心儀的商品進入到商詳頁，最后選擇直接購買或者加入購物車來達成轉化。而對于瀏覽型用戶，區別在于他可能通過首頁的推薦商品、推薦分類等模塊來到達商品列表頁而非搜索。因為首頁本身只是作為入口，因此接下來將從搜索/瀏覽、列表、商詳、購物車/轉化來進行分析。
平臺對于搜索框的處理較類似，將其置于頁面的中心，差異性在于點擊搜索框后是否會出現熱門搜索和搜索歷史來幫助用戶進行決策。而獨立站都會弱化搜索框，將其置于頂部功能區。原因在于獨立站本身品類和SKU相對平臺較少，搜索的頻率需求不明顯。點擊獨立站搜索功能后，有兩種設計：品類較少會出現氣泡，同時下方顯示熱門和模糊搜索結果；品類較多出現大氣泡，在頁面中部強化搜索區。
從瀏覽行為來看，平臺首頁有三個入口：
其中頭部的分類導航、商品分類和商品卡片可通用到所有平臺設計，而首屏banner旁的分類多出現于國內平臺的設計中目的是提高商品分類的曝光率。而對于獨立站，只有商品分類和商品卡片入口依然存在。
獨立站另外有兩個入口：
設計目標在于將更多分類和商品信息前置，縮短最終到達商品的路徑。
商品列表頁核心部分在于篩選+商品卡片，用戶通過對應的篩選條件最后選擇到滿意的商品卡片。
平臺篩選區普遍使用左右結構的設計，左邊的篩選區加上右邊的商品列表，篩選區默認主動展開常用而收起低頻篩選項。篩選項較多情形下操作效率較高，但占據空間大同時影響整體視覺效果。
而獨立站篩選區有兩種設計：
對于商品卡片，平臺和獨立站都采用了上圖下文，適用于圖片為主其他信息為輔的卡片，在保持展示卡片個數的同時瀏覽效率較高。而從細節上來看，平臺會有較多信息來強調信任感，因為平臺本身商品都由第三方商家提供，所以得給予用戶足夠信任。而獨立站之所以不強調，因為它通過品牌建設來給予用戶信任感，所以獨立站放大圖片面積，縮小信任相關文字信息。獨立站另一個特征在于，條目列表頁就有較多轉化入口，基本可以直接加入購物車/詳情，來最終縮短用戶的決策路徑。
獨立站和平臺商詳頁最大區別在于首屏的信息結構，獨立站分為兩塊：圖片+信息，給圖片本身留出了較大展示區，而信息聚焦于最核心的款式和價格，轉化區域吸底目的為了強化轉化率+占用過少空間。然后平臺首屏分為三塊，將轉化區置于頁面的右方來強化用戶首屏下的轉化率，缺點在于用戶下滑到頁面下方時無法進行轉化操作。有的平臺會將右邊轉化區懸浮，缺點在于會壓縮下方的商品詳細信息區。
平臺有兩個常見的轉化操作：購物車和購買，而越來越多的獨立站開始用心愿單的功能來替代原來的購買操作，其中心愿單可直接在商品條目頁添加。我們推測主要目的在于降低用戶決策成本，促進更多轉化。接下來主要從心愿單，購物車，付款頁來進行分析。
基于我們的設計經驗，網站的視覺設計一般有三個對應的難點：品牌—如何突出網站品牌特色，形成差異化；節奏—如何合理排列不同視覺元素，形成視覺動線和層級；創新—如何突破簡單的頁面框架限制。那下文就將基于這三點來分析：
這方面獨立站和平臺的差異性并不大，都是基于自身的logo品牌，提取出對應的基本型、色彩以及感覺。然后將其運用到網站設計上，比如運營類的icon，插圖，banner以及頁面組件類如按鈕，標簽和搜索框等。獨立站對比下延伸場景更為豐富，因為運營圖都是自己配置，所以把顏色氛圍以及形狀都融入其中，形成更突出的品牌感。
右邊是獨立站，可以看到視覺動線會從頂部banner區開始，從頁面中間往下，到了后面部分才開始從左到右。從視覺層次來看，它延長頂部banner區的視覺重點，在首屏以下位置才開始弱化內容。而獨立站下方內容也基于其多元的內容載體來采用不同的排版方式，豐富整體層次。目的在于在首屏強化對于用戶的視覺吸引力，保持用戶高度的專注。
第三部分本文將基于百度剛推出的獨立站SAAS產品出海易，分享獨立站設計避坑點。出海易是去年百度B2B下面孵化新業務，它致力于幫助企業一站式出海，目前在4月已經推出出海易SAAS產品并正式售賣?；谖覀兡壳霸O計經驗和思考，如下圖獨立站設計有七類問題需要注意。而接下來將從中選出信息缺失、圖片質量、移動端體驗、國內外體驗差異這四類我們在出海易業務實踐中完整體現的問題來分析。
之前提到過，獨立站相比平臺一大特色就是信息豐富且多元。但作為服務商，實際會接觸到不少初次嘗試出海的中小企業，這些商家由于自身經驗不足，提供的信息和物料出現缺失現象。那作為設計師面對這樣的情形，應該如何設計以補救呢？
獨立站一大亮點在于高質量商品圖片，作為設計師當然會設想商家能提供下圖左邊的圖片。但放到實際場景下商家提供的圖片質量和效果都不可控，往往是提供的圖片右邊這樣。
所以很多商家提供的圖片質量很難滿足現有獨立站對于圖片的要求，因此從設計側通過以下三個設計策略來進行補救：
設計正方形容器，所有圖片都會自動縮放到容器區域下，來保證不同圖片尺寸下整體視覺上的一致性。
對于商品卡片會有多種處理方法，樣式1直接給圖片固定底色，來形成卡片間的間隔。而樣式2和3都采用透明背景色，卡片通過較大的間隔來進行整體的區分。
樣式1這樣通過固定底色的模式對于圖片本身要求過高。而像樣式2和3只通過間距區分會帶來問題，實際下的商品圖片有的有底，有的沒底，容易產生不一致的場景。因此最后實際設計樣式直接給了整體背景底色，然后用白色的卡片來區分商品，同時縮小了圖片所占的面積來避免圖片質量差的影響。
SAAS后臺會設計對應的尺寸提示，在用戶編輯上傳圖片前，頁面會有對應默認圖來暗示用戶合理的圖片樣式，給到商家配色和尺寸參考。
國外PC還是用戶主要購物方式，因此獨立站設計以PC為主。但隨著國外移動互聯網的發展，移動端也成了商家必須要布局的部分。無論對于設計師還是開發，重新設計開發并維護PC和移動兩套成本都巨大，因此自適應成了這個階段下較優選擇。下面將會分享下自適應設計下的一些細節。
因為獨立站針對海外用戶，所以和國內電商設計相比有兩個問題需要注意：1.不同國家下語言差異會導致視覺差異 2.不同國家間用戶在操作習慣本身存在差異。
4.結語
隨著全球電商的迅速發展和出海熱潮的加劇，獨立站會逐漸成為出海商家國外品牌推廣、營銷、客戶關系維護的重要抓手，同時也會給更多具有特色和渴望創新的設計師們，更廣闊展現自身才華的空間和機會。乘風潮頭立，啟航正當時，獨立站期待你的加入。
作者：百度MEUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司