電商類(lèi)型的APP已經(jīng)很常見(jiàn)了，但是如果設(shè)計(jì)不當(dāng)，細(xì)節(jié)考慮不全，也會(huì)導(dǎo)致很多功能或體驗(yàn)上的問(wèn)題。下面我們從商城首頁(yè)、商品詳情+購(gòu)物車(chē)管理、訂單管理等幾個(gè)方面，全面介紹電商類(lèi)APP的設(shè)計(jì)關(guān)鍵點(diǎn)。

 

電商類(lèi)APP開(kāi)發(fā)的功能設(shè)計(jì)較難的部分是后臺(tái)，用戶使用的客戶端會(huì)有推薦或千人千面的展示，這些還是依賴后臺(tái)算法等。APP端的功能設(shè)計(jì)到后面基本沒(méi)什么大的改動(dòng)，最多的是后端需要配合各種活動(dòng)去設(shè)計(jì)，功能及其復(fù)雜。另外就是商品庫(kù)存管理系統(tǒng)和物流訂單管理系統(tǒng)，這里會(huì)涉及到商品出入庫(kù)和商品退單的核銷(xiāo)在里面，相對(duì)比較復(fù)雜。

 

商城首頁(yè)在規(guī)劃的時(shí)候需要結(jié)合自己的SKU數(shù)量，如果數(shù)量不夠那么做搜索是沒(méi)有必要的，做分類(lèi)也要想好是否真的需要，道長(zhǎng)碰見(jiàn)過(guò)商城第一版本運(yùn)營(yíng)和客服部門(mén)就提出一定要搜索，不然用戶想去搜索自己想要的商品怎么辦，分類(lèi)一定要，擔(dān)心用戶搞不清楚哪個(gè)商品是屬于哪個(gè)分類(lèi)。

 

搜索是高級(jí)功能，隨著產(chǎn)品版本迭代、品類(lèi)豐富度夠高、用戶目標(biāo)足夠明確的時(shí)候才會(huì)用到；

分類(lèi)也是一種導(dǎo)航，目的是提高查找商品的效率，但帶來(lái)便利的同時(shí)也增加了使用成本，慎重增加。

 

商品詳情頁(yè)結(jié)構(gòu)相對(duì)簡(jiǎn)單，第一部分是頂部的頭圖區(qū)域展示商品的大圖，支持多張圖片來(lái)回切換，也可以在這里放短視頻，和圖片配合著使用。頭圖下方的商品基本信息是一個(gè)單獨(dú)區(qū)域。

 

第二部分是商品詳細(xì)信息，這部分會(huì)包含很長(zhǎng)的圖文信息，這里產(chǎn)品經(jīng)理可以規(guī)劃出來(lái)有這么個(gè)區(qū)域就好了，實(shí)現(xiàn)方式上采用H5，告訴開(kāi)發(fā)的同學(xué)這里是個(gè)富文本區(qū)域，運(yùn)營(yíng)在填寫(xiě)的時(shí)候可以填寫(xiě)他們需要的內(nèi)容。

 

第三部分是最底部常駐操作面板，會(huì)有跳轉(zhuǎn)到購(gòu)物車(chē)的入口、加入購(gòu)物車(chē)和立即購(gòu)買(mǎi)兩個(gè)按鈕，點(diǎn)擊后會(huì)跳出截圖里編號(hào)2的原型，用戶需要確認(rèn)商品信息和數(shù)量，才會(huì)進(jìn)入到下一步。

 

購(gòu)物車(chē)頁(yè)面有兩個(gè)場(chǎng)景要照顧到：

場(chǎng)景一：用戶新打開(kāi)APP，進(jìn)入該頁(yè)面時(shí)可以先請(qǐng)求數(shù)據(jù)，沒(méi)有庫(kù)存的商品就直接從列表刪除；

場(chǎng)景二：用戶在APP其他頁(yè)面點(diǎn)擊進(jìn)入購(gòu)物車(chē)頁(yè)面時(shí)，商品狀態(tài)可以在點(diǎn)擊“結(jié)算“按鈕時(shí)再做一次檢測(cè)，如果商品庫(kù)存空了則提示用戶沒(méi)有庫(kù)存的商品，用戶確認(rèn)后可以繼續(xù)結(jié)算。

 

訂單管理頁(yè)面邏輯就簡(jiǎn)單多了，待支付訂單可以支付、待收貨訂單可以查看物流、結(jié)算的訂單可以再次購(gòu)買(mǎi)。這里有幾個(gè)功能邏輯需要考慮到：

第一個(gè)是待支付訂單商品沒(méi)有庫(kù)存的時(shí)候，和前面購(gòu)物車(chē)頁(yè)面那里的處理機(jī)制一樣；

第二個(gè)是已結(jié)束的訂單，用戶再次購(gòu)買(mǎi)時(shí)，之前購(gòu)買(mǎi)過(guò)的商品下架或者沒(méi)有庫(kù)存的時(shí)候，可以選擇告訴用戶沒(méi)有了的商品，留下可再次購(gòu)買(mǎi)的商品，點(diǎn)擊后直接跳轉(zhuǎn)到結(jié)算頁(yè)面，不經(jīng)過(guò)購(gòu)物車(chē)頁(yè)面。