隨著國(guó)內(nèi)市場(chǎng)飽和，越來(lái)越多的公司轉(zhuǎn)向海外尋找新的增長(zhǎng)機(jī)會(huì)，其中出海電商成為了最大的市場(chǎng)之一。21年底艾媒咨詢(xún)顯示出海電商市場(chǎng)中，中國(guó)企業(yè)在海外的獨(dú)立站數(shù)量已達(dá)20萬(wàn)+，所占份額從2016年9.8%提升至2021年25.6%，預(yù)計(jì)2025年將會(huì)到達(dá)50%。

什么是獨(dú)立站？2022年成功在iOS榜單超越亞馬遜的Shein是其中的代表。它起初定位于依靠多SKU和低價(jià)的鋪貨型公司，但難見(jiàn)起色，之后成功轉(zhuǎn)向于依靠流量運(yùn)營(yíng)和供應(yīng)鏈體系的品牌型公司，通過(guò)自己站點(diǎn)直接和用戶(hù)鏈接并發(fā)生交易。

本文將先介紹獨(dú)立站這股出海電商新趨勢(shì)，然后從用戶(hù)體驗(yàn)視角描述導(dǎo)航、交易流程、視覺(jué)三個(gè)方面與電商平臺(tái)的差異性，最后我們基于百度剛推出的獨(dú)立站SAAS產(chǎn)品出海易，分享一些獨(dú)立站設(shè)計(jì)經(jīng)驗(yàn)和避坑點(diǎn)。

1.出海電商發(fā)展趨勢(shì)

01.平臺(tái)轉(zhuǎn)向獨(dú)立站

海外電商市場(chǎng)集中度低，亞馬遜封號(hào)熱潮，資本大批涌入，使得出海聚光燈逐漸從平臺(tái)轉(zhuǎn)向獨(dú)立站。

根據(jù)下面頭豹研究院整理的19年各國(guó)電商占比圖可看出，中國(guó)平臺(tái)電商占比整體電商市場(chǎng)高達(dá)86%，而歐美國(guó)家占比為60%。同時(shí)中國(guó)自有品牌占比1%，而歐美國(guó)家平均占比高達(dá)24%。可見(jiàn)歐美電商市場(chǎng)平臺(tái)占比低，難以形成壟斷，同時(shí)自有品牌占有率高，因此品牌獨(dú)立站在海外有更優(yōu)質(zhì)的發(fā)展環(huán)境。

亞馬遜等海外平臺(tái)政策逐漸收緊，2021年亞馬遜封號(hào)潮迫使眾多國(guó)內(nèi)商家倒閉關(guān)店。同時(shí)對(duì)于新手，平臺(tái)入場(chǎng)門(mén)檻越發(fā)變高：注冊(cè)方式受限，通過(guò)率低以及中國(guó)賬號(hào)易被封號(hào)。與之相對(duì)是機(jī)會(huì)越發(fā)變少，平臺(tái)上流量爭(zhēng)奪和價(jià)格戰(zhàn)越發(fā)激烈，作為新人店鋪想在平臺(tái)獲得較好的曝光和推薦現(xiàn)在可能性極低。

近年來(lái)無(wú)數(shù)資本開(kāi)始涌入獨(dú)立站。shopify作為頭部獨(dú)立站服務(wù)商股價(jià)從2019到2022上漲近10倍，22年獨(dú)立站領(lǐng)頭羊Shein市值高達(dá)千億美金, 拼多多9月上線(xiàn)Temu對(duì)標(biāo)Shein作為公司重點(diǎn)項(xiàng)目。這些都預(yù)示越來(lái)越多商家和公司開(kāi)始關(guān)注并入局獨(dú)立站。

02.獨(dú)立站是什么

下圖分別是國(guó)外頭部平臺(tái)亞馬遜和獨(dú)立站Shein的首頁(yè)。亞馬遜顯得規(guī)整，統(tǒng)一，秩序；而右邊Shein更為豐富，跳躍，自由。我們認(rèn)為自由，是獨(dú)立站和平臺(tái)本質(zhì)上的差異點(diǎn)。

為什么獨(dú)立站可以這么自由呢？

因?yàn)楠?dú)立站擁有獨(dú)立域名和頁(yè)面, 并由商家獨(dú)立設(shè)計(jì)、運(yùn)營(yíng)來(lái)打造品牌。商家對(duì)于獨(dú)立站每一個(gè)環(huán)節(jié)都擁有絕對(duì)的自主權(quán)，同時(shí)帶來(lái)特定優(yōu)勢(shì)：

• 自主：獨(dú)立站不用遵循平臺(tái)固定規(guī)范來(lái)搭建統(tǒng)一的店鋪和詳情頁(yè)；不用強(qiáng)制參與平臺(tái)官方的618等活動(dòng)，擁有自身營(yíng)銷(xiāo)節(jié)點(diǎn)和節(jié)奏；不用被平臺(tái)限制，擁有自身投放渠道和運(yùn)營(yíng)方式。
• 多渠道流量：商家可以根據(jù)產(chǎn)品定位和目標(biāo)用戶(hù)，在不同渠道進(jìn)行流量投放。比如潮玩投放年輕人社區(qū)—Tiktok，傳統(tǒng)B2B—投放商務(wù)社區(qū)Linkedin。
• 數(shù)字資產(chǎn)：通過(guò)獨(dú)立站商家可以獲得大量之前在平臺(tái)手中的用戶(hù)數(shù)據(jù)?；谶@些數(shù)據(jù)商家可以迭代產(chǎn)品，打造私域流量，保證用戶(hù)粘性和生命周期，慢慢形成品牌溢價(jià)。

但獨(dú)立站的模式并不適用于所有的出海商家：

• 獨(dú)立站對(duì)于商家專(zhuān)業(yè)要求較高，從最初建站，用戶(hù)運(yùn)營(yíng)到后期數(shù)據(jù)洞察，都需要商家自己參與和把控。而平臺(tái)本身規(guī)范，玩法以及合作服務(wù)商，可以降低商家入局門(mén)檻和壓力。
• 多渠道會(huì)導(dǎo)致商家投放難度的增高，比如Facebook信息流和Tiktok短視頻投放的規(guī)則、內(nèi)容以及針對(duì)人群差異較大，會(huì)導(dǎo)致最后投放效果難以精確衡量。

03.獨(dú)立站成功的關(guān)鍵

獨(dú)立站模式下，核心在于商家管理信息流、資金流以及物流的能力。其中資金和物流主要基于商家選擇的服務(wù)商，比如跨境支付、倉(cāng)儲(chǔ)和配送能力。而在信息流層面，更多在于商家對(duì)于用戶(hù)的觸達(dá)和轉(zhuǎn)化，這也是作為設(shè)計(jì)師可以參與并發(fā)力的點(diǎn)。

那么獨(dú)立站針對(duì)的用戶(hù)會(huì)具有什么樣的特征？國(guó)泰君安證券曾經(jīng)專(zhuān)門(mén)研究過(guò)Shein的用戶(hù)，主要為20-35追求時(shí)尚個(gè)性的白領(lǐng)女士，該類(lèi)群體追求個(gè)性化和潮流同時(shí)注重商品性?xún)r(jià)比。因此我們認(rèn)為追求個(gè)性化，同時(shí)付費(fèi)能力相對(duì)有限的年輕人更傾向于在獨(dú)立站進(jìn)行交易。

獨(dú)立站對(duì)于用戶(hù)而言，存在觸達(dá)(多渠道)—認(rèn)知(物料+站點(diǎn))—消費(fèi)(站點(diǎn)轉(zhuǎn)化到完成交易)—傳播(多渠道)等觸點(diǎn)，在這些觸點(diǎn)打動(dòng)用戶(hù)的關(guān)鍵在于品牌認(rèn)知和主觀(guān)認(rèn)同。整個(gè)過(guò)程中，設(shè)計(jì)一方面可以在認(rèn)知階段從視覺(jué)層面通過(guò)物料、站點(diǎn)、推文傳遞品牌感知，另一方面可以在消費(fèi)階段從交互層面通過(guò)互動(dòng)、服務(wù)來(lái)建立連接和粘性。

2.獨(dú)立站相比平臺(tái)的設(shè)計(jì)關(guān)鍵點(diǎn)

// 貨架VS內(nèi)容

我們認(rèn)為獨(dú)立站和平臺(tái)本質(zhì)的差異在于獨(dú)立站將商品內(nèi)容化。平臺(tái)就像貨架上擺滿(mǎn)各類(lèi)型商品，需要用戶(hù)快速找到并進(jìn)行交易。而獨(dú)立站把商品內(nèi)容化，慢慢建立形象并輸出內(nèi)容從而和用戶(hù)建立情感聯(lián)系。那下文接著就將從導(dǎo)航、交易流程、視覺(jué)三個(gè)方面來(lái)分析兩者基于貨架和內(nèi)容體驗(yàn)上的差異性。

01.導(dǎo)航

從導(dǎo)航結(jié)構(gòu)來(lái)看，平臺(tái)更為強(qiáng)調(diào)搜索將其置于頂部，同時(shí)強(qiáng)調(diào)分類(lèi)的快速篩選。而獨(dú)立站弱化搜索來(lái)節(jié)省縱向空間，頂部放置公告欄來(lái)定期公布優(yōu)惠信息。分類(lèi)若較少，分類(lèi)導(dǎo)航會(huì)置于products頁(yè)面下，采用頁(yè)面導(dǎo)航。分類(lèi)較多則會(huì)將頁(yè)面導(dǎo)航換為分類(lèi)導(dǎo)航，形成三層導(dǎo)航結(jié)構(gòu)。

然后對(duì)于導(dǎo)航路徑，平臺(tái)有兩種設(shè)計(jì)：

• 面包屑：節(jié)省首屏屏效，縮短導(dǎo)航區(qū)縱向空間；
• 樓梯式：導(dǎo)航聚合在各行以便于分類(lèi)的展示和切換。

獨(dú)立站依據(jù)分類(lèi)的層級(jí)和個(gè)數(shù)會(huì)有面包屑和樓梯變種的設(shè)計(jì)：像shein作為服裝采用了面包屑，而Anker作為3C采用樓梯式變種，橫向展示所有品類(lèi)的名稱(chēng)和圖片。

02.交易流程

我們認(rèn)為雖然現(xiàn)在電商出現(xiàn)直播電商，內(nèi)容社區(qū)等新形式，但核心交易流程都較為固定：首頁(yè)—搜索/瀏覽—商品列表頁(yè)—商詳頁(yè)—轉(zhuǎn)化(購(gòu)物車(chē)/付款)。

來(lái)到電商網(wǎng)站的用戶(hù)，可分為搜索型和瀏覽型。搜索型用戶(hù)會(huì)直接通過(guò)搜索到達(dá)商品列表頁(yè)，然后通過(guò)篩選條件找到心儀的商品進(jìn)入到商詳頁(yè)，最后選擇直接購(gòu)買(mǎi)或者加入購(gòu)物車(chē)來(lái)達(dá)成轉(zhuǎn)化。而對(duì)于瀏覽型用戶(hù)，區(qū)別在于他可能通過(guò)首頁(yè)的推薦商品、推薦分類(lèi)等模塊來(lái)到達(dá)商品列表頁(yè)而非搜索。因?yàn)槭醉?yè)本身只是作為入口，因此接下來(lái)將從搜索/瀏覽、列表、商詳、購(gòu)物車(chē)/轉(zhuǎn)化來(lái)進(jìn)行分析。

// 搜索/瀏覽

平臺(tái)對(duì)于搜索框的處理較類(lèi)似，將其置于頁(yè)面的中心，差異性在于點(diǎn)擊搜索框后是否會(huì)出現(xiàn)熱門(mén)搜索和搜索歷史來(lái)幫助用戶(hù)進(jìn)行決策。而獨(dú)立站都會(huì)弱化搜索框，將其置于頂部功能區(qū)。原因在于獨(dú)立站本身品類(lèi)和SKU相對(duì)平臺(tái)較少，搜索的頻率需求不明顯。點(diǎn)擊獨(dú)立站搜索功能后，有兩種設(shè)計(jì)：品類(lèi)較少會(huì)出現(xiàn)氣泡，同時(shí)下方顯示熱門(mén)和模糊搜索結(jié)果；品類(lèi)較多出現(xiàn)大氣泡，在頁(yè)面中部強(qiáng)化搜索區(qū)。

從瀏覽行為來(lái)看，平臺(tái)首頁(yè)有三個(gè)入口：

• 頭部的分類(lèi)導(dǎo)航；
• 首屏banner旁的分類(lèi)；
• 商品分類(lèi)和商品卡片；

其中頭部的分類(lèi)導(dǎo)航、商品分類(lèi)和商品卡片可通用到所有平臺(tái)設(shè)計(jì)，而首屏banner旁的分類(lèi)多出現(xiàn)于國(guó)內(nèi)平臺(tái)的設(shè)計(jì)中目的是提高商品分類(lèi)的曝光率。而對(duì)于獨(dú)立站，只有商品分類(lèi)和商品卡片入口依然存在。

獨(dú)立站另外有兩個(gè)入口：

• 商品分類(lèi)較少，分類(lèi)隱藏在products頁(yè)下，hover后會(huì)出現(xiàn)所有分類(lèi)和配圖；
• 商品分類(lèi)較多，分類(lèi)作為單獨(dú)頁(yè)面，hover到每個(gè)分類(lèi)顯示二級(jí)的商品配圖和文字；

設(shè)計(jì)目標(biāo)在于將更多分類(lèi)和商品信息前置，縮短最終到達(dá)商品的路徑。

// 列表

商品列表頁(yè)核心部分在于篩選+商品卡片，用戶(hù)通過(guò)對(duì)應(yīng)的篩選條件最后選擇到滿(mǎn)意的商品卡片。

平臺(tái)篩選區(qū)普遍使用左右結(jié)構(gòu)的設(shè)計(jì)，左邊的篩選區(qū)加上右邊的商品列表，篩選區(qū)默認(rèn)主動(dòng)展開(kāi)常用而收起低頻篩選項(xiàng)。篩選項(xiàng)較多情形下操作效率較高，但占據(jù)空間大同時(shí)影響整體視覺(jué)效果。

而獨(dú)立站篩選區(qū)有兩種設(shè)計(jì)：

• 分類(lèi)較多，將分類(lèi)置于頭部便于快速篩選，其他篩選項(xiàng)默認(rèn)收起只有點(diǎn)擊才展開(kāi)；
• 分類(lèi)較少，使用上下結(jié)構(gòu)默認(rèn)篩選區(qū)收起，點(diǎn)擊展開(kāi)后會(huì)對(duì)篩選項(xiàng)縱向進(jìn)行分類(lèi)，篩選完成后會(huì)有對(duì)應(yīng)的信息外露。主要為了展示更多商品條目以及營(yíng)造視覺(jué)氛圍感；

對(duì)于商品卡片，平臺(tái)和獨(dú)立站都采用了上圖下文，適用于圖片為主其他信息為輔的卡片，在保持展示卡片個(gè)數(shù)的同時(shí)瀏覽效率較高。而從細(xì)節(jié)上來(lái)看，平臺(tái)會(huì)有較多信息來(lái)強(qiáng)調(diào)信任感，因?yàn)槠脚_(tái)本身商品都由第三方商家提供，所以得給予用戶(hù)足夠信任。而獨(dú)立站之所以不強(qiáng)調(diào)，因?yàn)樗ㄟ^(guò)品牌建設(shè)來(lái)給予用戶(hù)信任感，所以獨(dú)立站放大圖片面積，縮小信任相關(guān)文字信息。獨(dú)立站另一個(gè)特征在于，條目列表頁(yè)就有較多轉(zhuǎn)化入口，基本可以直接加入購(gòu)物車(chē)/詳情，來(lái)最終縮短用戶(hù)的決策路徑。

// 商詳

獨(dú)立站和平臺(tái)商詳頁(yè)最大區(qū)別在于首屏的信息結(jié)構(gòu)，獨(dú)立站分為兩塊：圖片+信息，給圖片本身留出了較大展示區(qū)，而信息聚焦于最核心的款式和價(jià)格，轉(zhuǎn)化區(qū)域吸底目的為了強(qiáng)化轉(zhuǎn)化率+占用過(guò)少空間。然后平臺(tái)首屏分為三塊，將轉(zhuǎn)化區(qū)置于頁(yè)面的右方來(lái)強(qiáng)化用戶(hù)首屏下的轉(zhuǎn)化率，缺點(diǎn)在于用戶(hù)下滑到頁(yè)面下方時(shí)無(wú)法進(jìn)行轉(zhuǎn)化操作。有的平臺(tái)會(huì)將右邊轉(zhuǎn)化區(qū)懸浮，缺點(diǎn)在于會(huì)壓縮下方的商品詳細(xì)信息區(qū)。

// 轉(zhuǎn)化

平臺(tái)有兩個(gè)常見(jiàn)的轉(zhuǎn)化操作：購(gòu)物車(chē)和購(gòu)買(mǎi)，而越來(lái)越多的獨(dú)立站開(kāi)始用心愿單的功能來(lái)替代原來(lái)的購(gòu)買(mǎi)操作，其中心愿單可直接在商品條目頁(yè)添加。我們推測(cè)主要目的在于降低用戶(hù)決策成本，促進(jìn)更多轉(zhuǎn)化。接下來(lái)主要從心愿單，購(gòu)物車(chē)，付款頁(yè)來(lái)進(jìn)行分析。

• 心愿單：獨(dú)立站交易流程中有兩個(gè)入口可以把商品添加到心愿單：列表頁(yè)中的商品卡片和商詳頁(yè)。而心愿單頁(yè)面，是商品卡片的集合以及對(duì)應(yīng)的操作。
• 購(gòu)物車(chē)：平臺(tái)點(diǎn)擊購(gòu)物車(chē)會(huì)直接跳轉(zhuǎn)到購(gòu)物車(chē)頁(yè)，購(gòu)物車(chē)頁(yè)多為左右結(jié)構(gòu)，左邊商品列表+右邊的總價(jià)&付款。相比之下，獨(dú)立站會(huì)有兩種設(shè)計(jì)：商品數(shù)目較少，不會(huì)設(shè)計(jì)購(gòu)物車(chē)頁(yè)，而是通過(guò)抽屜形式來(lái)進(jìn)行承載；商品數(shù)目較多，hover到購(gòu)物車(chē)按鈕以氣泡形式顯示已有商品和付款按鈕，直接點(diǎn)擊購(gòu)物車(chē)按鈕也可跳轉(zhuǎn)到購(gòu)物車(chē)頁(yè)，購(gòu)物車(chē)頁(yè)本身設(shè)計(jì)差異不大。

• 付款頁(yè)：平臺(tái)付款頁(yè)為左右結(jié)構(gòu)，左邊是下滑填寫(xiě)付款/商品/快遞等信息，然后右邊是付款結(jié)算區(qū)，懸浮在頁(yè)面右部分；獨(dú)立站因?yàn)樯婕暗胶Ｍ馕锪骱椭Ц?，所以為了避免過(guò)長(zhǎng)信息填寫(xiě)，將左部分設(shè)計(jì)成了分布填寫(xiě)區(qū)，而右邊固定是所選商品內(nèi)容和價(jià)格，來(lái)降低了用戶(hù)填寫(xiě)信息時(shí)的心理負(fù)擔(dān)。

03.視覺(jué)

基于我們的設(shè)計(jì)經(jīng)驗(yàn)，網(wǎng)站的視覺(jué)設(shè)計(jì)一般有三個(gè)對(duì)應(yīng)的難點(diǎn)：品牌—如何突出網(wǎng)站品牌特色，形成差異化；節(jié)奏—如何合理排列不同視覺(jué)元素，形成視覺(jué)動(dòng)線(xiàn)和層級(jí)；創(chuàng)新—如何突破簡(jiǎn)單的頁(yè)面框架限制。那下文就將基于這三點(diǎn)來(lái)分析：

• 品牌：形成品牌感的本質(zhì)在于“形+色“，如何通過(guò)色彩和圖形來(lái)形成差異性。

這方面獨(dú)立站和平臺(tái)的差異性并不大，都是基于自身的logo品牌，提取出對(duì)應(yīng)的基本型、色彩以及感覺(jué)。然后將其運(yùn)用到網(wǎng)站設(shè)計(jì)上，比如運(yùn)營(yíng)類(lèi)的icon，插圖，banner以及頁(yè)面組件類(lèi)如按鈕，標(biāo)簽和搜索框等。獨(dú)立站對(duì)比下延伸場(chǎng)景更為豐富，因?yàn)檫\(yùn)營(yíng)圖都是自己配置，所以把顏色氛圍以及形狀都融入其中，形成更突出的品牌感。

• 節(jié)奏：左邊是平臺(tái)首頁(yè)的布局節(jié)奏，視覺(jué)動(dòng)線(xiàn)都是從上往下，然后每行從左到右，變化較少。然后從視覺(jué)層次來(lái)看，除了首屏的banner區(qū)域會(huì)有不同的版式突出視覺(jué)重點(diǎn)，下面的排版節(jié)奏都較為平均，只偶爾變化來(lái)避免節(jié)奏的重復(fù)。

右邊是獨(dú)立站，可以看到視覺(jué)動(dòng)線(xiàn)會(huì)從頂部banner區(qū)開(kāi)始，從頁(yè)面中間往下，到了后面部分才開(kāi)始從左到右。從視覺(jué)層次來(lái)看，它延長(zhǎng)頂部banner區(qū)的視覺(jué)重點(diǎn)，在首屏以下位置才開(kāi)始弱化內(nèi)容。而獨(dú)立站下方內(nèi)容也基于其多元的內(nèi)容載體來(lái)采用不同的排版方式，豐富整體層次。目的在于在首屏強(qiáng)化對(duì)于用戶(hù)的視覺(jué)吸引力，保持用戶(hù)高度的專(zhuān)注。

• 創(chuàng)新：想要突破單調(diào)的網(wǎng)站首頁(yè)設(shè)計(jì)，一般會(huì)選擇頭部banner和非核心信息區(qū)入手。獨(dú)立站因?yàn)槠漕^部banner區(qū)的所有運(yùn)營(yíng)圖自己提供，可以通過(guò)不同配色和排版來(lái)避免的重復(fù)實(shí)現(xiàn)創(chuàng)新。另一方面，獨(dú)立站非核心信息區(qū)內(nèi)容較為豐富：比如品牌故事，博客文章，合作伙伴，對(duì)應(yīng)信息區(qū)都會(huì)有特定的布局創(chuàng)新。

3.獨(dú)立站設(shè)計(jì)的常見(jiàn)避坑點(diǎn)

第三部分本文將基于百度剛推出的獨(dú)立站SAAS產(chǎn)品出海易，分享獨(dú)立站設(shè)計(jì)避坑點(diǎn)。出海易是去年百度B2B下面孵化新業(yè)務(wù)，它致力于幫助企業(yè)一站式出海，目前在4月已經(jīng)推出出海易SAAS產(chǎn)品并正式售賣(mài)?；谖覀兡壳霸O(shè)計(jì)經(jīng)驗(yàn)和思考，如下圖獨(dú)立站設(shè)計(jì)有七類(lèi)問(wèn)題需要注意。而接下來(lái)將從中選出信息缺失、圖片質(zhì)量、移動(dòng)端體驗(yàn)、國(guó)內(nèi)外體驗(yàn)差異這四類(lèi)我們?cè)诔龊Ｒ讟I(yè)務(wù)實(shí)踐中完整體現(xiàn)的問(wèn)題來(lái)分析。

01.信息缺失

之前提到過(guò)，獨(dú)立站相比平臺(tái)一大特色就是信息豐富且多元。但作為服務(wù)商，實(shí)際會(huì)接觸到不少初次嘗試出海的中小企業(yè)，這些商家由于自身經(jīng)驗(yàn)不足，提供的信息和物料出現(xiàn)缺失現(xiàn)象。那作為設(shè)計(jì)師面對(duì)這樣的情形，應(yīng)該如何設(shè)計(jì)以補(bǔ)救呢？

• 商品圖片缺失：首先在SAAS后臺(tái)上傳圖片的部分設(shè)置了圖片的必填項(xiàng)，另外設(shè)置提示文字來(lái)吸引用戶(hù)上傳更多圖片。從商詳頁(yè)的排版來(lái)看，商品和商品縮略圖上下排列，這樣在商品圖只有一張的情形下，可隱藏縮略圖的內(nèi)容，不會(huì)對(duì)整體視覺(jué)效果產(chǎn)生較大影響。

• 公司信息缺失：在每個(gè)信息模塊，給予商家調(diào)整模塊數(shù)量的自由度。商家可自由添加信息卡片的數(shù)量，一個(gè)，二個(gè)，三個(gè)，或者直接隱藏該模塊。針對(duì)不同數(shù)量的信息模塊，也設(shè)計(jì)對(duì)應(yīng)樣式來(lái)滿(mǎn)足商家需求。

02.圖片質(zhì)量

獨(dú)立站一大亮點(diǎn)在于高質(zhì)量商品圖片，作為設(shè)計(jì)師當(dāng)然會(huì)設(shè)想商家能提供下圖左邊的圖片。但放到實(shí)際場(chǎng)景下商家提供的圖片質(zhì)量和效果都不可控，往往是提供的圖片右邊這樣。

所以很多商家提供的圖片質(zhì)量很難滿(mǎn)足現(xiàn)有獨(dú)立站對(duì)于圖片的要求，因此從設(shè)計(jì)側(cè)通過(guò)以下三個(gè)設(shè)計(jì)策略來(lái)進(jìn)行補(bǔ)救：

• 設(shè)計(jì)策略1：設(shè)計(jì)統(tǒng)一且規(guī)格有限的展現(xiàn)容器

設(shè)計(jì)正方形容器，所有圖片都會(huì)自動(dòng)縮放到容器區(qū)域下，來(lái)保證不同圖片尺寸下整體視覺(jué)上的一致性。

• 設(shè)計(jì)策略2：設(shè)計(jì)特定的卡片樣式

對(duì)于商品卡片會(huì)有多種處理方法，樣式1直接給圖片固定底色，來(lái)形成卡片間的間隔。而樣式2和3都采用透明背景色，卡片通過(guò)較大的間隔來(lái)進(jìn)行整體的區(qū)分。

樣式1這樣通過(guò)固定底色的模式對(duì)于圖片本身要求過(guò)高。而像樣式2和3只通過(guò)間距區(qū)分會(huì)帶來(lái)問(wèn)題，實(shí)際下的商品圖片有的有底，有的沒(méi)底，容易產(chǎn)生不一致的場(chǎng)景。因此最后實(shí)際設(shè)計(jì)樣式直接給了整體背景底色，然后用白色的卡片來(lái)區(qū)分商品，同時(shí)縮小了圖片所占的面積來(lái)避免圖片質(zhì)量差的影響。

• 設(shè)計(jì)策略3：上傳給予規(guī)范提示和案例

SAAS后臺(tái)會(huì)設(shè)計(jì)對(duì)應(yīng)的尺寸提示，在用戶(hù)編輯上傳圖片前，頁(yè)面會(huì)有對(duì)應(yīng)默認(rèn)圖來(lái)暗示用戶(hù)合理的圖片樣式，給到商家配色和尺寸參考。

03.移動(dòng)端體驗(yàn)

國(guó)外PC還是用戶(hù)主要購(gòu)物方式，因此獨(dú)立站設(shè)計(jì)以PC為主。但隨著國(guó)外移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)端也成了商家必須要布局的部分。無(wú)論對(duì)于設(shè)計(jì)師還是開(kāi)發(fā)，重新設(shè)計(jì)開(kāi)發(fā)并維護(hù)PC和移動(dòng)兩套成本都巨大，因此自適應(yīng)成了這個(gè)階段下較優(yōu)選擇。下面將會(huì)分享下自適應(yīng)設(shè)計(jì)下的一些細(xì)節(jié)。

• 導(dǎo)航區(qū)：PC端的頁(yè)面導(dǎo)航和功能區(qū)處于頁(yè)面頂部，然后是商品分類(lèi)。在wise端，很難在首頁(yè)進(jìn)行復(fù)雜的頁(yè)面切換，因此將其置于左上角的抽屜下，而搜索和切換語(yǔ)言使用了模態(tài)的氣泡設(shè)計(jì)，更符合用戶(hù)手機(jī)端下的聚焦單一任務(wù)的使用習(xí)慣。

• 篩選區(qū)：PC端分類(lèi)篩選區(qū)在左側(cè)，默認(rèn)顯示一級(jí)分類(lèi)，點(diǎn)擊展示二級(jí)分類(lèi)。在wise端，將分類(lèi)篩選置于商品列表區(qū)上方來(lái)留出更多展示空間，默認(rèn)收起然后以模態(tài)氣泡的形式展開(kāi)。

04.國(guó)內(nèi)外差異

因?yàn)楠?dú)立站針對(duì)海外用戶(hù)，所以和國(guó)內(nèi)電商設(shè)計(jì)相比有兩個(gè)問(wèn)題需要注意：1.不同國(guó)家下語(yǔ)言差異會(huì)導(dǎo)致視覺(jué)差異  2.不同國(guó)家間用戶(hù)在操作習(xí)慣本身存在差異。

• 語(yǔ)言：不同國(guó)家語(yǔ)言會(huì)導(dǎo)致排版差異，同樣的文字在不同語(yǔ)言下的字符數(shù)差距較大。然后同時(shí)會(huì)帶來(lái)視覺(jué)動(dòng)線(xiàn)上的差別，比如下圖是中東等巴基斯坦等國(guó)家所使用的烏爾都語(yǔ)，該語(yǔ)言會(huì)帶來(lái)視覺(jué)動(dòng)線(xiàn)從右往左的變化。另外要考慮到不同語(yǔ)言下字段長(zhǎng)度的適配情況，在排版時(shí)候盡量上下排布避免左右排布。

• 體驗(yàn)：國(guó)內(nèi)外用戶(hù)本身操作習(xí)慣上存在差異，比如左邊是一個(gè)國(guó)內(nèi)常見(jiàn)的電商設(shè)計(jì)，圖片切換在主圖的下方，通過(guò)點(diǎn)擊圖片進(jìn)行切換，主要是為了留出更多的橫向空間給商品信息，但這種小圖切換然后大圖預(yù)覽由下往上的視覺(jué)動(dòng)線(xiàn)影響了視覺(jué)體驗(yàn)，主要是給商品信息的展示效率讓步。而右邊是國(guó)外常見(jiàn)的體驗(yàn)方式，商品信息較為省略，圖片切換在左圖的左側(cè)，為了從左到右更好的視覺(jué)動(dòng)線(xiàn)和體驗(yàn)。同時(shí)當(dāng)你hover到對(duì)應(yīng)圖片的時(shí)候，主圖也會(huì)隨之切換進(jìn)行預(yù)覽，優(yōu)化了對(duì)應(yīng)切換體驗(yàn)。

4.結(jié)語(yǔ)

隨著全球電商的迅速發(fā)展和出海熱潮的加劇，獨(dú)立站會(huì)逐漸成為出海商家國(guó)外品牌推廣、營(yíng)銷(xiāo)、客戶(hù)關(guān)系維護(hù)的重要抓手，同時(shí)也會(huì)給更多具有特色和渴望創(chuàng)新的設(shè)計(jì)師們，更廣闊展現(xiàn)自身才華的空間和機(jī)會(huì)。乘風(fēng)潮頭立，啟航正當(dāng)時(shí)，獨(dú)立站期待你的加入。