【移動端】一般B2C電商商城的布局設計
時間：2022-08-06 01:48:01 | 來源：網(wǎng)站運營
時間：2022-08-06 01:48:01 來源：網(wǎng)站運營
【摘要】簡單了解一般B2C電商商城的布局設計
【作者】白金
前言
移動端B2C電商商城，作為面向普通消費者的，用于連接用戶與商品關(guān)系的橋梁，現(xiàn)已滲透到日常生活之中。UI層作為商城的表象層，不僅需要清晰闡述商品在商城中的層級關(guān)系，還需要明確各個頁面之間的邏輯關(guān)系，從美觀和實用兩個方面提升用戶體驗，最大限度降低用戶的學習成本。隨著行業(yè)的不斷發(fā)展，國內(nèi)外各公司都提供了相對成熟的移動端商城解決方案。我們也可從這些實例中學習到一些布局設計的經(jīng)驗。
一般用戶移動端B2C商城的基本頁面
以最簡單的商城模式作為前提，我們姑且認為一個商城應該包含如下基礎(chǔ)頁面：
- 首頁（用于展示商城和主打商品及分類的主界面）
- 商品列表頁（以分類的方式，通過列表形式呈現(xiàn)出某一分類下的所有商品預覽信息）
- 商品詳情頁（展示具體商品的具體屬性）
- 購物車（預保存需結(jié)算的商品）
- 確認訂單（用戶確認下單商品的基本信息，收貨信息，支付方式，支付金額等）
- 結(jié)算成功/失?。ㄖЦ妒欠癯晒Φ姆答來撁妫?/li>
- 個人中心（呈現(xiàn)用戶的基本信息，訂單入口，地址入口等與個人相關(guān)的信息入口）
- 我的訂單-訂單列表（以不同的訂單狀態(tài)分別展示每個訂單的基本信息列表）
- 我的訂單-訂單詳情（展示不同訂單狀態(tài)的詳細信息，包含商品信息，物流信息，支付信息等）
- 我的地址（管理或編輯收貨地址）
作為門面的首頁，它能夠在一組頁面中脫引而出，成為最能夠代表商城布局的標志性頁面。下面我們就以首頁作為切入點，聊聊國內(nèi)外電商在首頁上的布局設計。
首頁
首頁作為商城的門面，在頁面重要程度上不言而喻。國內(nèi)外商家在進行商城首頁設計時，都充分表達了自己對于布局的理解。我們在此選取國內(nèi)外主流電商平臺，粗淺的分析一下它們在首頁上的頁面布局：
針對國內(nèi)主流電商平臺而言，布局設計比較近似，甚至連排布的順序都完全一致。如圖所示，我們將淘寶和京東兩大主流電商的布局做了元素提取，其布局展示通常分為以下6個維度：
①頂部搜索欄
②banner部分
③以Grid圖標展示的商品分類入口
④專題/業(yè)務入口卡片
⑤按特定需求羅列的商品列表（如熱門推薦，猜你喜歡等）
⑥底部Bar
雖然在布局上缺少了一些醒目的特色，但其所帶來的益處也是顯而易見。主流平臺一致的界面排布，在一定程度上降低了用戶使用商城時的學習成本，間接提高了商城內(nèi)容轉(zhuǎn)化率的同時，也體現(xiàn)出商城以服務用戶為本的設計理念。當然，如此成熟標準化的排布方案，也就意味著它缺乏個性，缺少辨識度，沒有真正屬于自己的元素。誠然，標準和個性本來就是兩個不同的維度，如果說國內(nèi)電商平臺都是如此「標準」的布局展示方式的話，我們不如再來看看國外的電商平臺是如何展現(xiàn)他們眼中的設計排布的。
我們以Amazon的首頁布局為例。其布局如圖所示也可分為6個維度：
①頂部搜索欄
②商品分類導航欄
③banner部分
④快捷登錄入口
⑤活動商品列表
⑥漢堡式導航欄
如果稍微留心觀察，不難發(fā)現(xiàn)，國內(nèi)外電商在布局設計中最大的區(qū)別就在于導航欄的設計。國內(nèi)電商平臺普遍使用的是底部導航欄的設計，而國外的電商平臺則普遍使用漢堡菜單作為其導航欄。
拋磚引玉：漢堡式導航VS底部式導航的一些觀點
相對于底部導航欄，漢堡圖標有著更加悠久的歷史。就像2020年軟盤圖標依舊代表著保存功能一樣，這一枚長著三條線，總是出現(xiàn)在屏幕的左上角/右上角的圖標，代表著這里有更多的選項如此排列著，正如圖標本身所展示的那樣。一直以來，很多國內(nèi)的產(chǎn)品或設計師都在以「漢堡式導航欄不易被用戶發(fā)現(xiàn)」、「隱藏式的菜單無法提高APP轉(zhuǎn)化率」為借口打壓漢堡式菜單，推崇底部導航欄設計。但筆者認為，盲目打壓和推崇都是不可取的行為，如何選擇合適自己的展示形式，首先必須了解它們各自的優(yōu)勢。
漢堡式菜單展開的抽屜頁面，作為一個列表，可以容納進不受限的功能菜單，如果你的商城有超過5項菜單需要進行展示，那么漢堡式菜單會是一個比較合適的選擇。而底部導航欄，可以展示5枚以內(nèi)的菜單圖標，以更加直觀的方式直接呈現(xiàn)在首頁，不需要用戶去進行二級操作。
雖然直觀的設計一定程度上會提高流量的轉(zhuǎn)化率，但問題也是顯而易見的。國內(nèi)電商千篇一律的底部導航式設計，過于標準化，以至于缺乏個性化的內(nèi)容。既然秉承“以最少頁面完成最多的事兒”的觀點，那也就意味著需要通過首頁底部導航欄來引流的設計，作為首頁本身還沒有做到最好。試想，如果第一屏的首頁已經(jīng)能夠滿足用戶的需要，那么他們將沒有理由切換到其他的頁面。因此，筆者認為，國外商城保留漢堡式菜單的設計，也并非毫無道理，他們隱藏了菜單的直觀可見，努力做好第一屏幕的體驗，探索在電商商城上的更多可能性，而不是一味的用定式思維去思考問題，這些都是值得我們?nèi)ソ梃b的地方。
歸納總結(jié)：
對比國內(nèi)外商城在首頁面的表現(xiàn)形式不難發(fā)現(xiàn)一些共同特征。除了菜單的表現(xiàn)形式有所差異，剩下的四大天王：「搜索欄」、「主打banner」、「分類選擇」、「商品列表」都是基本商城首頁不可或缺的要素。
·「搜索欄」&「分類選擇」：符合首頁面快速展示商城功能的需求，便于用戶結(jié)合自身需求快速跳轉(zhuǎn)指定功能。為用戶精準查找到某一個或某一類商品所服務。
·「主打banner」&「商品列表」：推銷新品&熱賣商品使用，商品列表一般按照熱賣排行或者算法進行個性化展示，在第一屏盡可能提供能夠吸引眼球的商品，最大程度提高流量轉(zhuǎn)化率。
除此之外，便是上文提到的菜單導航欄。不拘泥于標準形式，其目的在于為用戶提供更多的功能頁面入口。因此，在進行頁面布局設計的時候，可以結(jié)合自身情況進行適當調(diào)整。
商城包含的頁面不僅僅只有首頁，購物車、收貨地址等其他頁面也是十分具有標志性的。由于文章篇幅所限，不能夠針對每一個頁面依次例舉，而僅僅從首頁出發(fā)，淺談B2C電商商城的布局設計，并提供一種分析的思路。只要形式不變，一般B2C電商的界面布局是不會跑出這個大范圍。當然，知識和經(jīng)驗都是具有時效性的東西，若未來載體改變，界面的布局也可能發(fā)生翻天覆地的變化，到那時，本文所歸納的要點可能將不再適用。
歡迎關(guān)注 技術(shù)團隊的本站賬號 我們憑團隊實例運作以下專欄， 必須干貨！
互聯(lián)網(wǎng)創(chuàng)業(yè)專欄 (我們小伙伴的創(chuàng)業(yè)歷程)
與您一起聊技術(shù) (APP、微信公眾號、小程序、H5 技術(shù)總結(jié))
互聯(lián)網(wǎng)產(chǎn)品研發(fā)管理 (我們公司對產(chǎn)品結(jié)構(gòu)的管理思路)
產(chǎn)品君的案例庫（產(chǎn)品小伙伴深刻總結(jié)）
在線咨詢