今天給大家介紹一下電商APP首頁設計，這邊講的設計不是技術上的設計，是產品上的設計。本來其實沒有這麼多問題的，可是因為安卓和IOS不是很精通react native或者vue技術來開發APP商城首頁，最重要的是上線時間比較趕，沒辦法給他們大量的時間來學習，所以這邊只能通過APP原生來實現這個首頁功能了。我們先看一下我們要實現的首頁長什麼樣子。

需求分析

大家從這個結構其實可以看到有四個部分，分別是：banner輪播圖、分類列表、活動主題、推薦商品。

這邊我們先說明一下首頁的需求，因為所有的設計都是針對於需求來的，需求如下：

1. 不同的使用者需要看到不同的首頁資訊
2. banner圖是可以配置的。
3. 分類的圖片，型別名稱字型、背景圖都要求是可以配置的
4. 推薦內容和背景圖都必須是可以配置的。
5. 活動樣式可以不做修改，但是活動內容一定要可以配置，比如活動跳轉地址，可以是商品詳情、商品列表、分類、具體活動詳情頁面，這邊活動的樣式目前固定有五個，具體樣式如下所示：

活動一：

活動二：

活動三：

活動四：

活動五：

那我們應該怎麼來設計才能滿足上面的這些需求呢，這些設定的功能，全部都是加在平臺管理上面的，商城app端主要請求配置好的資料就可以了。

banner設定

首先我們需要設計一張banner表，用來配置banner輪播圖的資料，在設計banner的表字段的時候，大家想想點選banner會跳轉到哪些地方呢？我們先來分析一把，做什麼事情都要先動腦子，然後開始幹活，千萬不要盲目開始工作。

banner點選我們一般會有如下跳轉：活動頁面、商品首頁、分類、分類商品列表等。跳轉資訊有了，剩下其還有我們剛才說的，不同角色看到的banner是不一樣的，所以必須有一個banner角色區分的欄位。最後就是banner自己的一些資訊，比如名稱，banner圖片等等之類的，基本資訊如下所示：

分類設定

banner設計完之後，接下就是分類的設定，分類我們這邊需要做的設定和banner類似，一個是不同角色對應的分類是不一樣的，另外一個其實是細節的注意點，就是分類的字型也必須是可配置的。分類其實比較簡單，基本資訊如下所示：

推薦商品設定

商品推薦設定其實最簡單了，我們只需要將商品推薦設定表和商品id相掛鉤就可以了，然後再繫結角色就可以了。因為比較簡單，所以這邊我就不做過多的解釋了，我們直接看最難的一部分，活動設定。

活動設定

未什麼說活動設定是最難的呢，難點如下：

1. 不同的角色看到的活動內容是不一樣的。
2. 相同樣式的活動模組可以檢視多個。
3. 活動可以配置跳轉地址很多。
4. 活動會有各自的過期時間。

針對上面四點，我們這邊需要兩張表來實現，一個是模板表，另外一個是活動模板表。需要兩張表的原因，因為如果我們想要實現第二點，我們就必須要兩張表來配合。模板表和活動模板表就猶如課程和學生的關係，一個課程有可以有多個學生，一個學生也可以選擇多個課程，它們之間是多對多的關係。

我們先來看一下模板表需要怎麼設計，模板表其實相對比較簡單，只需要設定角色、活動模板的關聯就可以了，我們看一下具體的資料。

活動模板表就相對有點複雜了，不過縷清思路其實就沒那麼難了，首先需要配置跳轉的地址，其實是活動的有效時間、最後就是活動是否顯示等。

然後我們通過這兩張表就可以進行活動模組的隨意配置了，我們可以在模板表裡面關聯活動模板表多次，就可以做到樣式一樣的活動顯示多次了，我們也可以設定優先順序來設定誰排在前面。

總結

這邊我們就講一個大概，沒有深入到程式碼級別，不過產品原型設計都出來，寫程式碼還有那麼難嘛。有時候並不是技術先進就能馬上使用，因為還要看時間成本、人力成本，機會成本等。既然技術不能採用最靈活了，我們只能在設計上面進行更加靈活的配置了。好了今天的內容就到這邊了，有什麼疑問歡迎諮詢~

要更多幹貨、技術猛料的孩子，快點拿起手機掃碼關注我，我在這裡等你哦~