淘寶是一款阿里旗下電商購物的手機(jī)購物軟件,是目前用戶體量最大的,用戶分布最廣泛的電商購物平臺(tái);發(fā)展至今,淘寶在大部分用戶心中的定位已成為“東西全,買東西劃算”的一款電商APP。
淘寶可以滿足不同屬性用戶的購物需求,目前產(chǎn)品功能的和模塊都很多樣,是一款“好逛”的電商軟件。
01
“逛街感”是好事嗎?
在具體分析淘寶的逛街感是從何而來之前,我們先來分析一下:一款電商軟件為什么要營造出“逛街感”,以及“逛街感”對于產(chǎn)品本身是一件好事還是壞事。
很多人都有這樣的體驗(yàn):相對于京東而言,淘寶有更強(qiáng)烈的逛街感。
“有的時(shí)候刷著刷著時(shí)間就過去很久了。”,“經(jīng)常會(huì)買一些莫名其妙的東西”,“本身是想買A,刷了一會(huì)卻下單了B,C,D。”
而且我們會(huì)發(fā)現(xiàn)淘寶的店鋪運(yùn)營做的很多:有照片,有視頻,有動(dòng)態(tài),有直播。
那么第一個(gè)問題是:為什么淘寶要給我們這種逛街的感覺?
1. 為什么要營造逛街感
大家都知道淘寶是一款C2C軟件,商家和用戶可以通過淘寶直接進(jìn)行商品的交易活動(dòng),淘寶在其中扮演的角色是一個(gè)為雙方提供完成這件事情的場所(平臺(tái))。
我很喜歡把互聯(lián)網(wǎng)的產(chǎn)品設(shè)計(jì)回溯到現(xiàn)實(shí)生活當(dāng)中——這樣可以幫助我們更快的理解,也更容易設(shè)計(jì)出更貼合用戶更容易接受的產(chǎn)品。
淘寶在現(xiàn)實(shí)生活當(dāng)中就像一個(gè)商場:淘寶商家在當(dāng)中扮演的就是商場里面的各個(gè)商家門店,用戶是逛街的顧客,不過所有的行為和商品都是以網(wǎng)絡(luò)形式而已。
那對于一個(gè)商場來說,它大部分的的經(jīng)濟(jì)來源,并不是顧客在各個(gè)商家的消費(fèi)額,而是它從商家的店鋪中收到了多少租金,幫商家打廣告掙了多少錢。
但是要明白:顧客來的越多,商場的名氣就會(huì)更大,也就可以吸引來更多的商家。同理,廣告的價(jià)格也會(huì)上升。并且,更多的商家愿意把商店建在我的商場里面,我也就可以收到更多的租金,形成一個(gè)良性循環(huán)。
所以對于淘寶而言,他真正的顧客是在淘寶入駐的這些商家們。那么,淘寶要做的就是如何建設(shè)這個(gè)商場:如何規(guī)劃它的大樓,如何讓用戶可以看到這些商家,如何服務(wù)好這些商家,從而賺取更多“房租”和“廣告費(fèi)”,才是淘寶APP界面設(shè)計(jì)的重點(diǎn)。
下圖是一個(gè)真實(shí)商場的結(jié)構(gòu)圖:

當(dāng)我們理解了淘寶真正的目的,就可以明白他為什么要設(shè)計(jì)出逛街感了。
那么第二個(gè)問題是:這種逛街感在電商APP中,是好還是壞?
2. 逛街感的利弊分別是什么
很多時(shí)候的消費(fèi)都是不理性的,也就是所謂的沖動(dòng)消費(fèi)。
當(dāng)用戶的購物流程變得繁瑣復(fù)雜(換句話說就是用戶的“行為路徑”變長了),自然給了用戶更多的時(shí)間去冷靜思考;說不定我逛著逛著就不想買了,或者逛了很久也不知道買什么,都是很經(jīng)常的事情。
所以“逛街感”對于商家來說弊大于利,但是它卻更貼近現(xiàn)實(shí)生活:商家肯定不希望用戶去競爭商店買東西。
而對于用戶而言,在逛街的時(shí)候貨比三家,最終購買自己心中性價(jià)比最高的那一款產(chǎn)品,才更符合用戶的需求。
對于現(xiàn)階段的淘寶而言,“逛街感” 利遠(yuǎn)大于弊——淘寶愿意讓它的用戶們貨比三家。
當(dāng)他們逛的越久,他們看到的商品和商家也就越多,那么它也完成了它任務(wù)——即使用戶刷了很久沒有下單,現(xiàn)階段的淘寶也不會(huì)因此受到損失(我們之后再說淘寶對此的策略是什么)。
3. 小結(jié)
從淘寶產(chǎn)品邏輯的角度來說營造逛街感,可以為淘寶帶來更多的營收,即使用戶可能因此而降低購買率——但是這對于淘寶的影響并不大。
如何留住用戶是商家們需要考慮的事情,淘寶作為一個(gè)商場做好用戶路線規(guī)劃和給商家提供展示的機(jī)會(huì)就可以了。
這也就是為什么淘寶的店鋪經(jīng)營都是五花八門,用戶的感受也非常全面,更加貼近真實(shí)生活。
當(dāng)我們明白了這點(diǎn)之后就可以開始分析,這個(gè)商場是如何一步步讓我們可以一直逛下去的。
02
如何營造線下“逛街感”?
回歸到現(xiàn)實(shí)生活中:假如你是一個(gè)商場的設(shè)計(jì)師,以你的角度來說,如何設(shè)計(jì)商場才能讓你的商場比較好逛。
這里是一篇在知乎上的帖子:商場設(shè)計(jì)要注意哪些因素?
我們可以從線下行業(yè)中得到經(jīng)驗(yàn)。
1. 設(shè)計(jì)創(chuàng)意
明白商場的定位,根據(jù)你的人群進(jìn)行設(shè)計(jì)。
同理,在互聯(lián)網(wǎng)的產(chǎn)品設(shè)計(jì)中,我們也需要考慮產(chǎn)品用戶群的特點(diǎn),去根據(jù)他們的行為習(xí)慣設(shè)計(jì)我們的界面和功能。
淘寶已經(jīng)擁有非常大量的用戶,并且它的用戶也非常的多樣,所以產(chǎn)品的設(shè)計(jì)一定要盡量去滿足各個(gè)群體的行為習(xí)慣。
這是為什么淘寶會(huì)有那么多的功能和入口的原因。
同時(shí),設(shè)計(jì)師需要去思考:在功能眾多的情況下,如何讓界面和排版依舊保持整潔。
2. 功能布局
“商場空間環(huán)境的功能布局必須從商業(yè)經(jīng)營的整體戰(zhàn)略出發(fā),功能布局是否合理,直接影響到商店的經(jīng)濟(jì)效益及其形象的塑造,切不可隨意布局。商場功能布局的要點(diǎn)是以發(fā)揮出商業(yè)空間的最大作用,提高商業(yè)的經(jīng)營效益為前提;同時(shí)還要考慮到方便與吸引顧客、易于營銷活動(dòng)的開展與管理。”
這一點(diǎn)和互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)非常吻合,用在淘寶界面設(shè)計(jì)上也是完全符合。
3. 動(dòng)線安排
如何引導(dǎo)用戶進(jìn)入商店?
如何讓顧客可以使用到我們更多的功能?
如何讓顧客順利瀏覽商品?
如何讓顧客規(guī)避掉一些死角(這里可以想象成用戶做出一些錯(cuò)誤動(dòng)作,或者暴力測試的之后的結(jié)果展示應(yīng)該是什么樣的)?
用戶的操作路徑是否流暢?
4. 空間組合
這一點(diǎn)可以理解為:如何讓不同的頁面擁有各自的風(fēng)格特點(diǎn)。
讓用戶感受到每個(gè)功能的區(qū)別的同時(shí),也需要去考慮如何讓各個(gè)頁面連接在一起。
5. 展示陳列
如何展示不同商品,表達(dá)出各個(gè)門店的多樣?
簡單來說就是:如何給商家們提供一個(gè)多樣性的展示平臺(tái),如何給他們機(jī)會(huì)去展示自己的十八般武藝?
6. 廣告標(biāo)識(shí)
首頁Banner,搜索引擎推薦,物品推薦,優(yōu)先展示,流量引導(dǎo)。
這也是淘寶獲得“廣告費(fèi)”的首要來源,本文不贅述淘寶在這方面的設(shè)計(jì)和操作。
結(jié)合線下商場的設(shè)計(jì)思路,一款有逛街感的電商平臺(tái)APP的設(shè)計(jì)思路也可以分析出來了。
03
淘寶打造“逛街感”
下面讓我們具體看一看淘寶是如何一步一步實(shí)現(xiàn)這幾點(diǎn)的:
很多時(shí)候,單獨(dú)看一款產(chǎn)品很難看出它的優(yōu)劣,在對比中更容易進(jìn)行分析和比較。
本文將會(huì)對比目前的3大電商巨頭淘寶,京東和拼多多來進(jìn)行頁面設(shè)計(jì)對比,從而分析出為什么淘寶的設(shè)計(jì)最好逛。
在我心目中,三款產(chǎn)品的定位可以用下面的三張圖片表示:

1. 產(chǎn)品定位
淘寶對應(yīng)的就是中高端的商場,滿足各類人群的需求;京東則像是一個(gè)商場或者百貨大樓里面的大型超市;拼多多是一個(gè)迅速崛起的中低端商場,最近也開始瘋狂擴(kuò)張吸引中高端商家入場的百貨大樓。
所以在產(chǎn)品邏輯上是,淘寶和拼多多比較相似:主要依靠商家入駐,收取入場費(fèi)和房租。
京東更在意自己的銷售量,自負(fù)盈虧(這里只談淘寶商鋪,不談天貓,也忽略京東里面的其他商家,不然會(huì)擴(kuò)展太多)。
2. 產(chǎn)品所處的階段
淘寶逐漸感受到自己老大位子正在被旁邊迅速崛起的百貨大樓所撼動(dòng),也了解到低端市場的消費(fèi)潛力,希望在穩(wěn)住自己地位的同時(shí),在對方的老家比劃一下。
拼多多用百億補(bǔ)貼一舉成名,讓更多的中高端用戶看到它的價(jià)值,用戶的接受度也在慢慢提高;但是目前還處于迅速擴(kuò)張狀態(tài),吸引商家入駐仍是重要任務(wù)。
京東一直在努力的在自己的超市里開一些專賣店,可以想像一些大型超市門口的專賣店。
當(dāng)我們認(rèn)識(shí)到3個(gè)產(chǎn)品的定位和所處在的階段之后,我們可以開始正式進(jìn)入我們的頁面分析。
3. 頁面分析

首頁對比
我們可以看到:3款A(yù)PP的首頁乍一看有很多相似的地方,但是大家的設(shè)計(jì)都非常巧妙,暗藏玄機(jī)。
三款產(chǎn)品的商業(yè)邏輯,目前各自APP所處的階發(fā)展段,以及目前的戰(zhàn)略目標(biāo)是完全不一樣的,所以大家的設(shè)計(jì)也會(huì)各有不同。
淘寶的6個(gè)模塊功能有:
【聚劃算】和【百億補(bǔ)貼】,同時(shí)配有文字“品牌折扣”,“搶大額券”和“百億補(bǔ)貼”吸引淘寶內(nèi)與拼多多同類型的用戶進(jìn)行點(diǎn)擊,阻止拼多多對自身用戶進(jìn)行搶奪。
【淘搶購】,為用戶展示實(shí)時(shí)熱搶產(chǎn)品,營造出搶商品的緊張感,用促銷的方式加速用戶消費(fèi)。
【天天特價(jià)】,為用戶提供廠家直銷,直擊低價(jià)和大牌品質(zhì)的產(chǎn)品。其中的商品也多為爆款產(chǎn)品。
高成單,高轉(zhuǎn)化的【淘寶直播】。
新穎獵奇激發(fā)好奇心的【有好貨】。
流量入口【每日好店】。
以上個(gè)功能都是和拼多多正面battle的體現(xiàn)。
可以看出在同樣size的屏幕里,除去搜索欄、品類欄、品類經(jīng)營欄第二頁以及底部功能按鍵,淘寶一共展示了18個(gè)功能入口(banner+ 10品類經(jīng)營 +7功能模塊),是三款軟件中在首頁提供最多入口的。
更多的入口意味著可以需要滿足更多的人群,更多的人群意味著需求也會(huì)增加,同時(shí)也意味著給商家們提供了更多展示機(jī)會(huì)。
1)首頁下滑一次后的界面對比

首頁下滑一次對比
用戶下滑一次,說明已經(jīng)開始對當(dāng)前內(nèi)容有些興趣,但還在觀望,希望可以看到更多的內(nèi)容。
淘寶下滑后出現(xiàn)淘寶頭條,新的banner和新的分類板塊以及商品展示;京東出現(xiàn)7個(gè)功能模塊,走心推薦以及豐富的活動(dòng);拼多多依舊使用橫向大卡片展示爆款產(chǎn)品。
淘寶在首頁設(shè)計(jì)中留出更多空間進(jìn)行商品展示和店鋪推薦;京東使用更多空間進(jìn)行活動(dòng)展示;拼多多利用更多空間進(jìn)行爆款產(chǎn)品展示。
首頁的設(shè)計(jì)這里沒有對與錯(cuò),三款產(chǎn)品都是按照自己的發(fā)展思路和目前的戰(zhàn)略方法進(jìn)行設(shè)計(jì)。
淘寶提供最多的功能入口;京東在重視在首頁為運(yùn)營活動(dòng)Web頁提供入口;拼多多則更看重對于爆款產(chǎn)品的展示,希望可以馬上使用爆款抓住用戶眼球,留住用戶進(jìn)行購買。
假如三款產(chǎn)品是商場里面的導(dǎo)購員:
淘寶會(huì)根據(jù)你的喜好,帶你走去你感興趣的五花八門的店鋪;
京東在你進(jìn)門的時(shí)候給你很多優(yōu)惠,同時(shí)告訴你哪些賣得好,哪些推薦你買
拼多多會(huì)把當(dāng)下買的最好產(chǎn)品直接舉到你面前,然后瘋狂的催促你趕緊下單。
可以看出:淘寶將資源更加傾斜給運(yùn)營好或者買流量的商鋪,給他們更多的位置去展示他們的商品(逛感并不是每一款產(chǎn)品追求的,所以逛街感弱不代表它設(shè)計(jì)的不好)。
2)產(chǎn)品展示對比

產(chǎn)品展示對比
當(dāng)進(jìn)入下拉進(jìn)入首頁的產(chǎn)品展示時(shí),淘寶和京東將自己的品類欄更新成功能欄。
淘寶:【全部】,【直播】,【便宜好貨】和【買家秀】;
京東:【精選】,【618】,【新品】,【直播】,【實(shí)惠】和【進(jìn)口】,同時(shí)置頂了自己的活動(dòng)頁面;
拼多多依舊保留原本的品類欄。
淘寶加入新的功能欄,讓購物體驗(yàn)更加真實(shí):
【直播】讓用戶可以更加直接的看到商品,可以和賣家實(shí)時(shí)互動(dòng),與現(xiàn)實(shí)生活購物場景更為類似。
【便宜好貨】推薦價(jià)格便宜銷量多的爆款軟件。
【買家秀】通過展示精選高贊買家秀,增加商品的可信度,同時(shí)給更多產(chǎn)品展示的機(jī)會(huì)。
淘寶和京東采用瀑布式卡片展示,商品卡片縱向排列,商品的描述也置于圖片下方。
整體設(shè)計(jì)更符合人眼在下滑時(shí)觀看屏幕的運(yùn)動(dòng)軌跡,減少用戶眼睛橫向看的時(shí)間。
相反,拼多多采用橫向卡片展示。
橫向卡片,占屏幕面積更大,可以展示更多的信息;但是用戶需要花費(fèi)更多的時(shí)間進(jìn)行橫向上面的眼球移動(dòng)和閱讀時(shí)間。
拼多多推薦產(chǎn)品均為爆款,整個(gè)產(chǎn)品的設(shè)計(jì)也是希望用戶可以馬上下單。
對于用戶行為的回報(bào)來說,下滑瀏覽更多 < 用戶購買當(dāng)前爆款。
所以,使用橫向展示更符合目前拼多多的策略。
淘寶和京東都在自己的商品卡片中穿插展示其他的功能元素,用戶在刷起來的時(shí)候能看到更多的功能和活動(dòng)。
比如淘寶中會(huì)有【買家秀】,【競選活動(dòng)】,【好物推薦】,【直播】等方塊卡片參雜商品卡片混雜展示。
這樣的設(shè)計(jì)更加貼近現(xiàn)實(shí)生活。
共2頁 [1] [2] 下一頁
關(guān)注公號(hào):redshcom 關(guān)注更多: 淘寶