編輯導(dǎo)讀：首頁是訪問用戶最多的頁面，這里展示的業(yè)務(wù)都需要引導(dǎo)用戶去購買商品或完成特定的行為。那么，APP首頁應(yīng)該放些什么內(nèi)容呢？本文作者將從導(dǎo)購思維的角度進(jìn)行分析，希望對你有幫助。

設(shè)計(jì)首頁該放什么內(nèi)容，團(tuán)隊(duì)成員的關(guān)注點(diǎn)都不一樣，需要綜合考慮進(jìn)去，放什么內(nèi)容模塊可能是基于個(gè)人喜好來定的，也可能是基于群體智慧來定的。不管基于什么原因，總的來說，首頁的布局和展示什么內(nèi)容不能脫離業(yè)務(wù)目標(biāo)，否則就是個(gè)頁面而已。

在堆放頁面內(nèi)容時(shí)，我建議始終微軟“導(dǎo)購思維”來做，首頁是訪問用戶最多的頁面，這里展示的業(yè)務(wù)都需要引導(dǎo)用戶去購買商品或完成特定的行為。設(shè)計(jì)功能模塊時(shí)，優(yōu)先考慮效用，效用不高的板塊就不要放上去了，除了能安慰自己以為，用戶很難在意沒有效用的內(nèi)容。

回顧上一篇文章，我交代清楚了奢侈品項(xiàng)目的業(yè)務(wù)背景和新業(yè)務(wù)的使命，這一篇就直接進(jìn)入到首頁的規(guī)劃了。

一、長短頁面交互重點(diǎn)不同

手機(jī)屏幕上用戶關(guān)注點(diǎn)最高的是屏幕的頂部、底部和邊上的幾個(gè)角落，所以iOS和Android的設(shè)計(jì)規(guī)范里把按鈕放在些位置，按鈕放在屏幕右上角的場景常見于社交產(chǎn)品發(fā)布動(dòng)態(tài)頁面的“發(fā)布”按鈕，QQ音樂APP社區(qū)的界面就是普遍的例子；按鈕放在頁面底部的場景常見于電商產(chǎn)品的“立即購買”按鈕。

但除了按鈕以外，我們在設(shè)計(jì)首頁時(shí)需要放跟多的信息，這里需要注意一下，需要用戶上下翻幾屏的長頁面和不需要翻只有一頁的頁面交互重點(diǎn)是不同的。對長頁面來說，信息對用戶的優(yōu)先級是從上到下遞減的，越是放在頁面上方的內(nèi)容，越是能夠優(yōu)先抓住用戶的注意力。對于只需要一屏的短頁面來說，信息對用戶的優(yōu)先級是集中在頁面的頭部和底部。

二、無限退APP首頁功能有哪些

在設(shè)計(jì)首頁的時(shí)候，需要把重要的內(nèi)容先堆放在頁面的頭部，所以我在設(shè)計(jì)首頁的時(shí)候，會(huì)選擇把新人專享商品、會(huì)員卡放在頁面的頭部。其中，新人專享商品目的是為了把新用戶在轉(zhuǎn)換成付費(fèi)用戶，在和運(yùn)營團(tuán)隊(duì)討論的時(shí)候必須要明確這一點(diǎn)，否則會(huì)碰見運(yùn)營不理解業(yè)務(wù)目標(biāo)的情況下，上傳不具備吸引力的商品；而會(huì)員卡是團(tuán)隊(duì)最主要的營收，并且會(huì)員卡里面還有無限退的折扣特權(quán)，所以會(huì)員卡有必要放出來，展示給沒有購買會(huì)員卡的用戶瀏覽。

剩下的主要內(nèi)容是一個(gè)砍價(jià)專區(qū)和平臺商品的展示區(qū)域，本次版本是第一版，所以商品的排序只根據(jù)添加時(shí)間，不會(huì)去做復(fù)雜的標(biāo)簽和用戶推薦，先來看一下完成的首頁原型圖，如下所示：

圖1-首頁原型圖

頁面從上到下的功能整理成一個(gè)表格，分別看一下詳細(xì)描述：

1. 輪播圖管理

輪播圖的管理后臺就沿用租賃業(yè)務(wù)的，只需要在原來的系統(tǒng)上添加一個(gè)單選分類即可，該分類的名成是“無限退首頁”，勾選該分類后就把輪播圖添加到無限退業(yè)務(wù)的首頁，不需要重新開發(fā)全新的功能，原型如下圖：

圖2-廣告管理原型圖

2. 商品管理邏輯說明

我把新人專享、特價(jià)清倉、砍價(jià)叫做商品管理，這些專區(qū)的商品管理邏輯是從全站SPU商品庫里面調(diào)出的庫存，目的是為了保證商品信息的準(zhǔn)確性以及庫存保持一致，邏輯圖如下：

圖3-商品管理邏輯圖

整體來講，邏輯就是從總的商品里面選出指定的數(shù)量來參加活動(dòng)，直到數(shù)量賣完后對應(yīng)的SKU就下架，建議在設(shè)計(jì)商品或其他類似的內(nèi)容時(shí)，也設(shè)定SPU庫的概念，內(nèi)容和活動(dòng)業(yè)務(wù)分離，靈活相互組合和調(diào)用。

3. 創(chuàng)建新人專享商品

① 商品列表

圖4-新人專享后臺商品列表原型圖

首先來看看新人專享商品列表的原型，狀態(tài)上只需要分上架中和已下架兩個(gè)類即可，上架中的商品需要顯示參與新人專享活動(dòng)的商品完整信息，這里要注意，每個(gè)SKU單獨(dú)顯示一條信息，比如同一個(gè)古馳的包有兩個(gè)成色，且都參與了該活動(dòng)，則每個(gè)成色的顯示一條單獨(dú)的商品信息。

上架中的商品顯示哪些信息呢？商品價(jià)格、參加活動(dòng)的庫存量和已售出的數(shù)量是必須顯示的，其他的信息可根據(jù)自己的需求來定義，注意，根據(jù)業(yè)務(wù)定義，不要盲目的定義一大堆無效信息顯示出來。

而在列表的操作欄里面，“編輯”和“下架”兩個(gè)操作按鈕是有必要顯示的，兩個(gè)按鈕的規(guī)則需要明確一下：

編輯：

即編輯當(dāng)前商品的信息，但哪些信息可以改、哪些不可以改呢？商品的圖片、標(biāo)題可以任意修改；商品的價(jià)格不可以改，如果這里改價(jià)格，則前端已購用戶會(huì)有亦或，即同一條商品要么買貴了、要么買的很便宜，這會(huì)造成用戶困擾和售后麻煩，不能修改。

而庫存量是可以改的，但只能改大于新建時(shí)的庫存，不能改小，同樣，改小庫存在APP端處理比較麻煩，比如當(dāng)前庫存為2件，有兩個(gè)用戶同時(shí)下單正進(jìn)入支付環(huán)節(jié)，結(jié)果后臺把庫存改為1，這個(gè)時(shí)候兩個(gè)用戶同時(shí)發(fā)起支付時(shí)，要去判斷是是先進(jìn)入訂單確認(rèn)頁的，而后進(jìn)入的那個(gè)又要去處理庫存不足的提示和行為糾錯(cuò)，類似的邊緣情況太多，并且沒必要。如果有人說商品不夠了要改小庫存（我就遇見過類似的提問），那大可下架商品就好了。

下架：

是手動(dòng)下架商品，像剛才說的那種線下商品庫存不夠了、或者是供應(yīng)鏈價(jià)格變高了等情況，需要手動(dòng)下架時(shí)可使用該功能，其他的邊緣情況亦是如此。

② 添加新商品

圖5-添加新（專享）商品第一步原型圖

圖6-添加新（專享）商品第二步原型圖

添加新的專享商品時(shí)，第一步是先設(shè)定“搶購時(shí)間”，也就是在該時(shí)間段內(nèi)商品是以新人專享價(jià)格顯示在前臺的，然后再從商品庫里面選定需要添加的商品，如圖5。

第二步是對選定的商品設(shè)定規(guī)則，如原型上所示，加入我們選定了原型上的商品，該商品有四個(gè)SKU，則需要從每個(gè)SKU里面選擇用來參加活動(dòng)的數(shù)量，并設(shè)定該SKU的新人專享價(jià)格。如果某個(gè)SKU的專享活動(dòng)庫存不輸入數(shù)字，則代表該SKU不參與活動(dòng)。

設(shè)定好以后點(diǎn)擊“確定發(fā)布”按鈕，則按照搶購時(shí)間顯示該商品，APP端用戶在購買時(shí)就可以選擇不同的SKU了。

三、總結(jié)

本文到此，我們分析了APP首頁該放什么內(nèi)容是由業(yè)務(wù)驅(qū)動(dòng)的，首頁的活動(dòng)版塊商品由總庫存里面借調(diào)而來，比如新人專享的商品就從總庫存的SPU庫里面借調(diào)而來的。

同理，其他類型活動(dòng)的商品也是如此操作，不過是需要設(shè)定的規(guī)則不一樣，比如砍價(jià)，砍價(jià)需要根據(jù)拉新成本來計(jì)算單個(gè)商品至少需要拉幾個(gè)新用戶。

#專欄作家#

芒果道長，人人都是產(chǎn)品經(jīng)理專欄作家，起點(diǎn)學(xué)院特聘導(dǎo)師。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)本站許可，不得轉(zhuǎn)載，謝謝合作。

題圖來自 Unspalsh，基于 CC0 協(xié)議。