出海時(shí)代,電商設(shè)計(jì)的新機(jī)會
出海電商是海外的增長機(jī)會點(diǎn),本文將先介紹獨(dú)立站這股出海電商新趨勢,然后從用戶體驗(yàn)視角描述導(dǎo)航、交易流程、視覺三個(gè)方面與電商平臺的差異性,最后基于百度剛推出的獨(dú)立站SAAS產(chǎn)品出海易,分享一些獨(dú)立站設(shè)計(jì)經(jīng)驗(yàn)和避坑點(diǎn)。
隨著國內(nèi)市場飽和,越來越多的公司轉(zhuǎn)向海外尋找新的增長機(jī)會,其中出海電商成為了最大的市場之一。2021年底艾媒咨詢顯示出海電商市場中,中國企業(yè)在海外的獨(dú)立站數(shù)量已達(dá)20萬+,所占份額從2016年9.8%提升至2021年25.6%,預(yù)計(jì)2025年將會到達(dá)50%。
什么是獨(dú)立站?2022年成功在iOS榜單超越亞馬遜的Shein是其中的代表。它起初定位于依靠多SKU和低價(jià)的鋪貨型公司,但難見起色,之后成功轉(zhuǎn)向于依靠流量運(yùn)營和供應(yīng)鏈體系的品牌型公司,通過自己站點(diǎn)直接和用戶鏈接并發(fā)生交易。
本文將先介紹獨(dú)立站這股出海電商新趨勢,然后從用戶體驗(yàn)視角描述導(dǎo)航、交易流程、視覺三個(gè)方面與電商平臺的差異性,最后我們基于百度剛推出的獨(dú)立站SAAS產(chǎn)品出海易,分享一些獨(dú)立站設(shè)計(jì)經(jīng)驗(yàn)和避坑點(diǎn)。
一、出海電商發(fā)展趨勢
(一)平臺轉(zhuǎn)向獨(dú)立站
海外電商市場集中度低,亞馬遜封號熱潮,資本大批涌入,使得出海聚光燈逐漸從平臺轉(zhuǎn)向獨(dú)立站。
根據(jù)下面頭豹研究院整理的19年各國電商占比圖可看出,中國平臺電商占比整體電商市場高達(dá)86%,而歐美國家占比為60%。同時(shí)中國自有品牌占比1%,而歐美國家平均占比高達(dá)24%。可見歐美電商市場平臺占比低,難以形成壟斷,同時(shí)自有品牌占有率高,因此品牌獨(dú)立站在海外有更優(yōu)質(zhì)的發(fā)展環(huán)境。
亞馬遜等海外平臺政策逐漸收緊,2021年亞馬遜封號潮迫使眾多國內(nèi)商家倒閉關(guān)店。同時(shí)對于新手,平臺入場門檻越發(fā)變高:注冊方式受限,通過率低以及中國賬號易被封號。與之相對是機(jī)會越發(fā)變少,平臺上流量爭奪和價(jià)格戰(zhàn)越發(fā)激烈,作為新人店鋪想在平臺獲得較好的曝光和推薦現(xiàn)在可能性極低。
近年來無數(shù)資本開始涌入獨(dú)立站。shopify作為頭部獨(dú)立站服務(wù)商股價(jià)從2019到2022上漲近10倍,22年獨(dú)立站領(lǐng)頭羊Shein市值高達(dá)千億美金, 拼多多9月上線Temu對標(biāo)Shein作為公司重點(diǎn)項(xiàng)目。這些都預(yù)示越來越多商家和公司開始關(guān)注并入局獨(dú)立站。
(二)獨(dú)立站是什么
下圖分別是國外頭部平臺亞馬遜和獨(dú)立站Shein的首頁。亞馬遜顯得規(guī)整,統(tǒng)一,秩序;而右邊Shein更為豐富,跳躍,自由。我們認(rèn)為自由,是獨(dú)立站和平臺本質(zhì)上的差異點(diǎn)。
為什么獨(dú)立站可以這么自由呢?
因?yàn)楠?dú)立站擁有獨(dú)立域名和頁面, 并由商家獨(dú)立設(shè)計(jì)、運(yùn)營來打造品牌。商家對于獨(dú)立站每一個(gè)環(huán)節(jié)都擁有絕對的自主權(quán),同時(shí)帶來特定優(yōu)勢:
- 自主:獨(dú)立站不用遵循平臺固定規(guī)范來搭建統(tǒng)一的店鋪和詳情頁;不用強(qiáng)制參與平臺官方的618等活動,擁有自身營銷節(jié)點(diǎn)和節(jié)奏;不用被平臺限制,擁有自身投放渠道和運(yùn)營方式。
- 多渠道流量:商家可以根據(jù)產(chǎn)品定位和目標(biāo)用戶,在不同渠道進(jìn)行流量投放。比如潮玩投放年輕人社區(qū)—Tiktok,傳統(tǒng)B2B—投放商務(wù)社區(qū)Linkedin。
- 數(shù)字資產(chǎn):通過獨(dú)立站商家可以獲得大量之前在平臺手中的用戶數(shù)據(jù)?;谶@些數(shù)據(jù)商家可以迭代產(chǎn)品,打造私域流量,保證用戶粘性和生命周期,慢慢形成品牌溢價(jià)。
但獨(dú)立站的模式并不適用于所有的出海商家:
- 獨(dú)立站對于商家專業(yè)要求較高,從最初建站,用戶運(yùn)營到后期數(shù)據(jù)洞察,都需要商家自己參與和把控。而平臺本身規(guī)范,玩法以及合作服務(wù)商,可以降低商家入局門檻和壓力。
- 多渠道會導(dǎo)致商家投放難度的增高,比如Facebook信息流和Tiktok短視頻投放的規(guī)則、內(nèi)容以及針對人群差異較大,會導(dǎo)致最后投放效果難以精確衡量。
(三)獨(dú)立站成功的關(guān)鍵
獨(dú)立站模式下,核心在于商家管理信息流、資金流以及物流的能力。其中資金和物流主要基于商家選擇的服務(wù)商,比如跨境支付、倉儲和配送能力。而在信息流層面,更多在于商家對于用戶的觸達(dá)和轉(zhuǎn)化,這也是作為設(shè)計(jì)師可以參與并發(fā)力的點(diǎn)。
那么獨(dú)立站針對的用戶會具有什么樣的特征?國泰君安證券曾經(jīng)專門研究過Shein的用戶,主要為20-35追求時(shí)尚個(gè)性的白領(lǐng)女士,該類群體追求個(gè)性化和潮流同時(shí)注重商品性價(jià)比。因此我們認(rèn)為追求個(gè)性化,同時(shí)付費(fèi)能力相對有限的年輕人更傾向于在獨(dú)立站進(jìn)行交易。
獨(dú)立站對于用戶而言,存在觸達(dá)(多渠道)—認(rèn)知(物料+站點(diǎn))—消費(fèi)(站點(diǎn)轉(zhuǎn)化到完成交易)—傳播(多渠道)等觸點(diǎn),在這些觸點(diǎn)打動用戶的關(guān)鍵在于品牌認(rèn)知和主觀認(rèn)同。整個(gè)過程中,設(shè)計(jì)一方面可以在認(rèn)知階段從視覺層面通過物料、站點(diǎn)、推文傳遞品牌感知,另一方面可以在消費(fèi)階段從交互層面通過互動、服務(wù)來建立連接和粘性。
二、獨(dú)立站相比平臺的設(shè)計(jì)關(guān)鍵點(diǎn)
(一)貨架VS內(nèi)容
我們認(rèn)為獨(dú)立站和平臺本質(zhì)的差異在于獨(dú)立站將商品內(nèi)容化。平臺就像貨架上擺滿各類型商品,需要用戶快速找到并進(jìn)行交易。而獨(dú)立站把商品內(nèi)容化,慢慢建立形象并輸出內(nèi)容從而和用戶建立情感聯(lián)系。那下文接著就將從導(dǎo)航、交易流程、視覺三個(gè)方面來分析兩者基于貨架和內(nèi)容體驗(yàn)上的差異性。
01.導(dǎo)航
從導(dǎo)航結(jié)構(gòu)來看,平臺更為強(qiáng)調(diào)搜索將其置于頂部,同時(shí)強(qiáng)調(diào)分類的快速篩選。而獨(dú)立站弱化搜索來節(jié)省縱向空間,頂部放置公告欄來定期公布優(yōu)惠信息。分類若較少,分類導(dǎo)航會置于products頁面下,采用頁面導(dǎo)航。分類較多則會將頁面導(dǎo)航換為分類導(dǎo)航,形成三層導(dǎo)航結(jié)構(gòu)。
然后對于導(dǎo)航路徑,平臺有兩種設(shè)計(jì):
- 面包屑:節(jié)省首屏屏效,縮短導(dǎo)航區(qū)縱向空間;
- 樓梯式:導(dǎo)航聚合在各行以便于分類的展示和切換。
獨(dú)立站依據(jù)分類的層級和個(gè)數(shù)會有面包屑和樓梯變種的設(shè)計(jì):像shein作為服裝采用了面包屑,而Anker作為3C采用樓梯式變種,橫向展示所有品類的名稱和圖片。
02.交易流程
我們認(rèn)為雖然現(xiàn)在電商出現(xiàn)直播電商,內(nèi)容社區(qū)等新形式,但核心交易流程都較為固定:首頁—搜索/瀏覽—商品列表頁—商詳頁—轉(zhuǎn)化(購物車/付款)。
來到電商網(wǎng)站的用戶,可分為搜索型和瀏覽型。搜索型用戶會直接通過搜索到達(dá)商品列表頁,然后通過篩選條件找到心儀的商品進(jìn)入到商詳頁,最后選擇直接購買或者加入購物車來達(dá)成轉(zhuǎn)化。而對于瀏覽型用戶,區(qū)別在于他可能通過首頁的推薦商品、推薦分類等模塊來到達(dá)商品列表頁而非搜索。因?yàn)槭醉摫旧碇皇亲鳛槿肟?,因此接下來將從搜?瀏覽、列表、商詳、購物車/轉(zhuǎn)化來進(jìn)行分析。
(二)搜索/瀏覽
平臺對于搜索框的處理較類似,將其置于頁面的中心,差異性在于點(diǎn)擊搜索框后是否會出現(xiàn)熱門搜索和搜索歷史來幫助用戶進(jìn)行決策。而獨(dú)立站都會弱化搜索框,將其置于頂部功能區(qū)。原因在于獨(dú)立站本身品類和SKU相對平臺較少,搜索的頻率需求不明顯。點(diǎn)擊獨(dú)立站搜索功能后,有兩種設(shè)計(jì):品類較少會出現(xiàn)氣泡,同時(shí)下方顯示熱門和模糊搜索結(jié)果;品類較多出現(xiàn)大氣泡,在頁面中部強(qiáng)化搜索區(qū)。
那從瀏覽行為來看,平臺首頁有三個(gè)入口:
- 頭部的分類導(dǎo)航;
- 首屏banner旁的分類;
- 商品分類和商品卡片;
其中頭部的分類導(dǎo)航、商品分類和商品卡片可通用到所有平臺設(shè)計(jì),而首屏banner旁的分類多出現(xiàn)于國內(nèi)平臺的設(shè)計(jì)中目的是提高商品分類的曝光率。而對于獨(dú)立站,只有商品分類和商品卡片入口依然存在。
獨(dú)立站另外有兩個(gè)入口:
- 商品分類較少,分類隱藏在products頁下,hover后會出現(xiàn)所有分類和配圖;
- 商品分類較多,分類作為單獨(dú)頁面,hover到每個(gè)分類顯示二級的商品配圖和文字;
設(shè)計(jì)目標(biāo)在于將更多分類和商品信息前置,縮短最終到達(dá)商品的路徑。
(三)列表
商品列表頁核心部分在于篩選+商品卡片,用戶通過對應(yīng)的篩選條件最后選擇到滿意的商品卡片。
平臺篩選區(qū)普遍使用左右結(jié)構(gòu)的設(shè)計(jì),左邊的篩選區(qū)加上右邊的商品列表,篩選區(qū)默認(rèn)主動展開常用而收起低頻篩選項(xiàng)。篩選項(xiàng)較多情形下操作效率較高,但占據(jù)空間大同時(shí)影響整體視覺效果。
而獨(dú)立站篩選區(qū)有兩種設(shè)計(jì):
- 分類較多,將分類置于頭部便于快速篩選,其他篩選項(xiàng)默認(rèn)收起只有點(diǎn)擊才展開;
- 分類較少,使用上下結(jié)構(gòu)默認(rèn)篩選區(qū)收起,點(diǎn)擊展開后會對篩選項(xiàng)縱向進(jìn)行分類,篩選完成后會有對應(yīng)的信息外露。主要為了展示更多商品條目以及營造視覺氛圍感;
對于商品卡片,平臺和獨(dú)立站都采用了上圖下文,適用于圖片為主其他信息為輔的卡片,在保持展示卡片個(gè)數(shù)的同時(shí)瀏覽效率較高。而從細(xì)節(jié)上來看,平臺會有較多信息來強(qiáng)調(diào)信任感,因?yàn)槠脚_本身商品都由第三方商家提供,所以得給予用戶足夠信任。而獨(dú)立站之所以不強(qiáng)調(diào),因?yàn)樗ㄟ^品牌建設(shè)來給予用戶信任感,所以獨(dú)立站放大圖片面積,縮小信任相關(guān)文字信息。獨(dú)立站另一個(gè)特征在于,條目列表頁就有較多轉(zhuǎn)化入口,基本可以直接加入購物車/詳情,來最終縮短用戶的決策路徑。
(四)商詳
獨(dú)立站和平臺商詳頁最大區(qū)別在于首屏的信息結(jié)構(gòu),獨(dú)立站分為兩塊:圖片+信息,給圖片本身留出了較大展示區(qū),而信息聚焦于最核心的款式和價(jià)格,轉(zhuǎn)化區(qū)域吸底目的為了強(qiáng)化轉(zhuǎn)化率+占用過少空間。然后平臺首屏分為三塊,將轉(zhuǎn)化區(qū)置于頁面的右方來強(qiáng)化用戶首屏下的轉(zhuǎn)化率,缺點(diǎn)在于用戶下滑到頁面下方時(shí)無法進(jìn)行轉(zhuǎn)化操作。有的平臺會將右邊轉(zhuǎn)化區(qū)懸浮,缺點(diǎn)在于會壓縮下方的商品詳細(xì)信息區(qū)。
(五)轉(zhuǎn)化
平臺有兩個(gè)常見的轉(zhuǎn)化操作:購物車和購買,而越來越多的獨(dú)立站開始用心愿單的功能來替代原來的購買操作,其中心愿單可直接在商品條目頁添加。我們推測主要目的在于降低用戶決策成本,促進(jìn)更多轉(zhuǎn)化。接下來主要從心愿單,購物車,付款頁來進(jìn)行分析。
- 心愿單:獨(dú)立站交易流程中有兩個(gè)入口可以把商品添加到心愿單:列表頁中的商品卡片和商詳頁。而心愿單頁面,是商品卡片的集合以及對應(yīng)的操作。
- 購物車:平臺點(diǎn)擊購物車會直接跳轉(zhuǎn)到購物車頁,購物車頁多為左右結(jié)構(gòu),左邊商品列表+右邊的總價(jià)&付款。相比之下,獨(dú)立站會有兩種設(shè)計(jì):商品數(shù)目較少,不會設(shè)計(jì)購物車頁,而是通過抽屜形式來進(jìn)行承載;商品數(shù)目較多,hover到購物車按鈕以氣泡形式顯示已有商品和付款按鈕,直接點(diǎn)擊購物車按鈕也可跳轉(zhuǎn)到購物車頁,購物車頁本身設(shè)計(jì)差異不大。
- 付款頁:平臺付款頁為左右結(jié)構(gòu),左邊是下滑填寫付款/商品/快遞等信息,然后右邊是付款結(jié)算區(qū),懸浮在頁面右部分;獨(dú)立站因?yàn)樯婕暗胶M馕锪骱椭Ц?,所以為了避免過長信息填寫,將左部分設(shè)計(jì)成了分布填寫區(qū),而右邊固定是所選商品內(nèi)容和價(jià)格,來降低了用戶填寫信息時(shí)的心理負(fù)擔(dān)。
03.視覺
基于我們的設(shè)計(jì)經(jīng)驗(yàn),網(wǎng)站的視覺設(shè)計(jì)一般有三個(gè)對應(yīng)的難點(diǎn):品牌—如何突出網(wǎng)站品牌特色,形成差異化;節(jié)奏—如何合理排列不同視覺元素,形成視覺動線和層級;創(chuàng)新—如何突破簡單的頁面框架限制。那下文就將基于這三點(diǎn)來分析:
(1)品牌:形成品牌感的本質(zhì)在于“形+色“,如何通過色彩和圖形來形成差異性。
這方面獨(dú)立站和平臺的差異性并不大,都是基于自身的logo品牌,提取出對應(yīng)的基本型、色彩以及感覺。然后將其運(yùn)用到網(wǎng)站設(shè)計(jì)上,比如運(yùn)營類的icon,插圖,banner以及頁面組件類如按鈕,標(biāo)簽和搜索框等。獨(dú)立站對比下延伸場景更為豐富,因?yàn)檫\(yùn)營圖都是自己配置,所以把顏色氛圍以及形狀都融入其中,形成更突出的品牌感。
(2)節(jié)奏:左邊是平臺首頁的布局節(jié)奏,視覺動線都是從上往下,然后每行從左到右,變化較少。然后從視覺層次來看,除了首屏的banner區(qū)域會有不同的版式突出視覺重點(diǎn),下面的排版節(jié)奏都較為平均,只偶爾變化來避免節(jié)奏的重復(fù)。
右邊是獨(dú)立站,可以看到視覺動線會從頂部banner區(qū)開始,從頁面中間往下,到了后面部分才開始從左到右。從視覺層次來看,它延長頂部banner區(qū)的視覺重點(diǎn),在首屏以下位置才開始弱化內(nèi)容。而獨(dú)立站下方內(nèi)容也基于其多元的內(nèi)容載體來采用不同的排版方式,豐富整體層次。目的在于在首屏強(qiáng)化對于用戶的視覺吸引力,保持用戶高度的專注。
(3)創(chuàng)新:想要突破單調(diào)的網(wǎng)站首頁設(shè)計(jì),一般會選擇頭部banner和非核心信息區(qū)入手。獨(dú)立站因?yàn)槠漕^部banner區(qū)的所有運(yùn)營圖自己提供,可以通過不同配色和排版來避免的重復(fù)實(shí)現(xiàn)創(chuàng)新。另一方面,獨(dú)立站非核心信息區(qū)內(nèi)容較為豐富:比如品牌故事,博客文章,合作伙伴,對應(yīng)信息區(qū)都會有特定的布局創(chuàng)新。
三、獨(dú)立站設(shè)計(jì)的常見避坑點(diǎn)
第三部分本文將基于百度剛推出的獨(dú)立站SAAS產(chǎn)品出海易,分享獨(dú)立站設(shè)計(jì)避坑點(diǎn)。
出海易是去年百度B2B下面孵化新業(yè)務(wù),它致力于幫助企業(yè)一站式出海,目前在4月已經(jīng)推出出海易SAAS產(chǎn)品并正式售賣?;谖覀兡壳霸O(shè)計(jì)經(jīng)驗(yàn)和思考,如下圖獨(dú)立站設(shè)計(jì)有七類問題需要注意。
而接下來將從中選出信息缺失、圖片質(zhì)量、移動端體驗(yàn)、國內(nèi)外體驗(yàn)差異這四類我們在出海易業(yè)務(wù)實(shí)踐中完整體現(xiàn)的問題來分析。
(一)信息缺失
之前提到過,獨(dú)立站相比平臺一大特色就是信息豐富且多元。但作為服務(wù)商,實(shí)際會接觸到不少初次嘗試出海的中小企業(yè),這些商家由于自身經(jīng)驗(yàn)不足,提供的信息和物料出現(xiàn)缺失現(xiàn)象。那作為設(shè)計(jì)師面對這樣的情形,應(yīng)該如何設(shè)計(jì)以補(bǔ)救呢?
(1)商品圖片缺失:首先在SAAS后臺上傳圖片的部分設(shè)置了圖片的必填項(xiàng),另外設(shè)置提示文字來吸引用戶上傳更多圖片。從商詳頁的排版來看,商品和商品縮略圖上下排列,這樣在商品圖只有一張的情形下,可隱藏縮略圖的內(nèi)容,不會對整體視覺效果產(chǎn)生較大影響。
(2)公司信息缺失:在每個(gè)信息模塊,給予商家調(diào)整模塊數(shù)量的自由度。商家可自由添加信息卡片的數(shù)量,一個(gè),二個(gè),三個(gè),或者直接隱藏該模塊。針對不同數(shù)量的信息模塊,也設(shè)計(jì)對應(yīng)樣式來滿足商家需求。
(二)圖片質(zhì)量
獨(dú)立站一大亮點(diǎn)在于高質(zhì)量商品圖片,作為設(shè)計(jì)師當(dāng)然會設(shè)想商家能提供下圖左邊的圖片。但放到實(shí)際場景下商家提供的圖片質(zhì)量和效果都不可控,往往是提供的圖片右邊這樣。
所以很多商家提供的圖片質(zhì)量很難滿足現(xiàn)有獨(dú)立站對于圖片的要求,因此從設(shè)計(jì)側(cè)通過以下三個(gè)設(shè)計(jì)策略來進(jìn)行補(bǔ)救:
設(shè)計(jì)策略1:設(shè)計(jì)統(tǒng)一且規(guī)格有限的展現(xiàn)容器
設(shè)計(jì)正方形容器,所有圖片都會自動縮放到容器區(qū)域下,來保證不同圖片尺寸下整體視覺上的一致性。
設(shè)計(jì)策略2:設(shè)計(jì)特定的卡片樣式
對于商品卡片會有多種處理方法,樣式1直接給圖片固定底色,來形成卡片間的間隔。而樣式2和3都采用透明背景色,卡片通過較大的間隔來進(jìn)行整體的區(qū)分。
樣式1這樣通過固定底色的模式對于圖片本身要求過高。而像樣式2和3只通過間距區(qū)分會帶來問題,實(shí)際下的商品圖片有的有底,有的沒底,容易產(chǎn)生不一致的場景。因此最后實(shí)際設(shè)計(jì)樣式直接給了整體背景底色,然后用白色的卡片來區(qū)分商品,同時(shí)縮小了圖片所占的面積來避免圖片質(zhì)量差的影響。
設(shè)計(jì)策略3:上傳給予規(guī)范提示和案例
SAAS后臺會設(shè)計(jì)對應(yīng)的尺寸提示,在用戶編輯上傳圖片前,頁面會有對應(yīng)默認(rèn)圖來暗示用戶合理的圖片樣式,給到商家配色和尺寸參考。
(三)動端體驗(yàn)
國外PC還是用戶主要購物方式,因此獨(dú)立站設(shè)計(jì)以PC為主。但隨著國外移動互聯(lián)網(wǎng)的發(fā)展,移動端也成了商家必須要布局的部分。無論對于設(shè)計(jì)師還是開發(fā),重新設(shè)計(jì)開發(fā)并維護(hù)PC和移動兩套成本都巨大,因此自適應(yīng)成了這個(gè)階段下較優(yōu)選擇。下面將會分享下自適應(yīng)設(shè)計(jì)下的一些細(xì)節(jié)。
(1)導(dǎo)航區(qū):PC端的頁面導(dǎo)航和功能區(qū)處于頁面頂部,然后是商品分類。在wise端,很難在首頁進(jìn)行復(fù)雜的頁面切換,因此將其置于左上角的抽屜下,而搜索和切換語言使用了模態(tài)的氣泡設(shè)計(jì),更符合用戶手機(jī)端下的聚焦單一任務(wù)的使用習(xí)慣。
(2)篩選區(qū):PC端分類篩選區(qū)在左側(cè),默認(rèn)顯示一級分類,點(diǎn)擊展示二級分類。在wise端,將分類篩選置于商品列表區(qū)上方來留出更多展示空間,默認(rèn)收起然后以模態(tài)氣泡的形式展開。
四、國內(nèi)外差異
因?yàn)楠?dú)立站針對海外用戶,所以和國內(nèi)電商設(shè)計(jì)相比有兩個(gè)問題需要注意:
- 不同國家下語言差異會導(dǎo)致視覺差異
- 不同國家間用戶在操作習(xí)慣本身存在差異。
(1)語言:不同國家語言會導(dǎo)致排版差異,同樣的文字在不同語言下的字符數(shù)差距較大。然后同時(shí)會帶來視覺動線上的差別,比如下圖是中東等巴基斯坦等國家所使用的烏爾都語,該語言會帶來視覺動線從右往左的變化。另外要考慮到不同語言下字段長度的適配情況,在排版時(shí)候盡量上下排布避免左右排布。
(2)體驗(yàn):國內(nèi)外用戶本身操作習(xí)慣上存在差異,比如左邊是一個(gè)國內(nèi)常見的電商設(shè)計(jì),圖片切換在主圖的下方,通過點(diǎn)擊圖片進(jìn)行切換,主要是為了留出更多的橫向空間給商品信息,但這種小圖切換然后大圖預(yù)覽由下往上的視覺動線影響了視覺體驗(yàn),主要是給商品信息的展示效率讓步。而右邊是國外常見的體驗(yàn)方式,商品信息較為省略,圖片切換在左圖的左側(cè),為了從左到右更好的視覺動線和體驗(yàn)。同時(shí)當(dāng)你hover到對應(yīng)圖片的時(shí)候,主圖也會隨之切換進(jìn)行預(yù)覽,優(yōu)化了對應(yīng)切換體驗(yàn)。
五、結(jié)語
隨著全球電商的迅速發(fā)展和出海熱潮的加劇,獨(dú)立站會逐漸成為出海商家國外品牌推廣、營銷、客戶關(guān)系維護(hù)的重要抓手,同時(shí)也會給更多具有特色和渴望創(chuàng)新的設(shè)計(jì)師們,更廣闊展現(xiàn)自身才華的空間和機(jī)會。乘風(fēng)潮頭立,啟航正當(dāng)時(shí),獨(dú)立站期待你的加入。
作者:商業(yè)用戶體驗(yàn)部
來源公眾號:百度MEUX(ID:baidumeux),百度移動生態(tài)用戶體驗(yàn)設(shè)計(jì)中心,負(fù)責(zé)百度移動生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗(yàn)設(shè)計(jì)。
本文由人人都是產(chǎn)品經(jīng)理合作媒體 @百度MEUX 授權(quán)發(fā)布,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
先介紹獨(dú)立站這股出海電商新趨勢,然后從用戶體驗(yàn)視角描述導(dǎo)航、交易流程、視覺三個(gè)方面與電商平臺的差異性,最后基于百度剛推出的獨(dú)立站SAAS產(chǎn)品出海易,分享一些獨(dú)立站設(shè)計(jì)經(jīng)驗(yàn)和避坑點(diǎn)