移動站點網頁設計如何打造才能更好的吸引客戶呢
阿新 • • 發佈：2019-01-22
隨著美團點評的不斷發展，公司的品類越來越多，誕生了諸如二手交易、美團打車等新的戰略業務。
而APP現有首頁導航欄，可供給展示的品類坑位，已遠遠無法滿足新品類曝光的需求。
如果繼續向下拓展導航欄坑位，採用類似攜程首頁九宮格架構設計，則將壓縮活動運營位的空間與推薦資訊流的露出率。
由此，為了保證業務流量的分發效率，導航欄尾部的分類入口的重要性逐步凸顯。
該入口既需要承擔起業務/運營活動，流量分發第二戰場的使命，又要成為扶持公司新/戰略發展業務的搖籃。
在此背景下，Link從去年11月份開始，接手負責了全部分類頁的改版設計。
目標則是在保持使用者固有查詢品類習慣的基礎下，兼顧常用品類的穩定性和效率，扶持新品類/活動的導流曝光。
下面我將圍繞市面上優秀APP的設計案例與自身改版的經驗，談談關於全部分類頁的前世今生。
疊代歷程
上文敘述的2種來源，3種頁面框架，在點評的全部分類頁疊代中，皆有涉及，經驗不可謂不豐富。
1、從1.0到2.0
點評是從資訊內容服務延伸到團購閃惠交易，資訊內容是APP的價值基礎。
如何給新生的新業務導流，給諸如家裝、結婚等低頻的壹二級業務獲取流量，是點評壹直在思考探索的方向。
壹個平庸的產品，不壹定需要很好的創新能力。但壹個想要繼續快速成長的產品，必須要創造性的解決問題，否則只能永遠跟在競爭對手後面。
拋棄市面上成熟的左側導航欄設計，在2.0版本中，點評灰度測試了頂部導航欄以及底部tab入口的大膽設計。
雖最終未達到預期，但也是壹次勇敢的嘗試，以下是收獲的2點反思。
第壹點，底部tab入口的效果不佳，從巨集觀層面來看，是中國第三產業服務業的發展仍處於初步階段。
使用者在生活中對於O2O分類的訴求仍集中於美食、外賣、電影等高頻粗礦的壹級分類中，而對於更為細分的如茶館、採摘、攀巖等服務類目或者說是生活方式，渴求度較低。
該類消費場景的頻次也較低，不足以支撐起獨立的tab入口。
第二點，頂部導航欄設計效率欠佳，源於與淘寶導航欄展現的是成熟的品牌，在全部分類頁通過個性化呈接細分品類相比。
點評在導航欄已根據使用者興趣偏好，鋪陳了感興趣的壹級類目，在全部分類頁，較難命中使用者的訴求。
反過來說，使用者在點評全部分類頁的訴求也更為分散，頁面點選分佈也論證了該點判斷。
2、從2.0到3.0
在2.0版本的疊代泥澤後，是繼續執著的深陷其中，做困獸之鬥，小步優化疊代設計？
還是推翻壹切，否定之前，自己所有的判斷，改為左側縱向導航欄結構？
我們的選擇，正如大家現在所看到的，是後者。這樣的決斷不僅需要勇氣和決心，更需要嚴謹的方法。
正如產品經理的日常工作中，判斷壹個版本中需求、功能的優先順序最為常見。這個需求該不該現在做？做到什麼樣的程度？在多個產品設計方案中選擇，也是經常面臨的情況。
在該種場景下，不管問題、環境多麼錯綜復雜，需要考慮的因素多麼繁復，首先要做的就是抽絲剝繭，抓住問題的重點。
而問題的重點則需要通過嚴謹的資料分析來推導，也只有通過資料，才能勸服所有人，相信我們，這壹次改版壹定會比上壹次成功。
正因如此，我們分析了頁面所有模組的點選分佈，類目點選分佈，縱向/橫向的點選傾向等等資料。
最後以資料為依歸，來不斷改善產品，收獲了現有的改版勝利。
反思總結
以上，是對市場上現有及自身對全部分類頁設計的分析與歸納。
從1.0到3.0，我並不沮喪自己繞了那麼大的路，才回歸正途。反而正是沿途路上的風景，讓我更有故事，更獲成長。
在產品設計工作中充滿很多的不確定性，同時也沒有條件讓人進行充分的調研與論證。
真實的產品疊代中，鮮有80%以上把握的方案，更多是50%左右的情況。
好比壹個營銷人員壹年沒有花多少費用，那他壹定不是壹個優秀的員工，因為他沒有去做實驗。
沒有實驗，那麼永遠也不會知道什麼營銷方案是價效比、效率最高的。
對於產品經理也是如此，跟在競品後面走，是最安全也可能是效率最高的方式，但我們永遠只是壹個低階的執行者。
我們不能因為害怕失敗，而拒絕風險。不能因為曾經失敗，而害怕嘗試。壹個好的產品經理，往往可能是從千萬行程式碼的坑中爬起來的。
大膽去想，努力去試，即使是通過壹個“簡陋”的產品原型，也可以去實驗自己的想法，然後在不斷的通過觀察使用者反饋和資料，做下壹次更完美的判斷。
入口來源
目前，全部分類頁主要有兩種形式的流量入口。
第1種是類似淘寶、美團、點評的設計，位於首頁導航欄的尾部，幫助使用者繼續瀏覽查詢目標品類。
第2種是類似網易考拉、壹號店的設計，在APP底部tab導航區有單獨的入口，成為使用者快速檢視尋找目標品類的常用快捷入口。
不少APP，例如京東，則是共存了上述的兩類入口。
頁面設計
全部分類頁從內容模組上，主要由壹級業務、二級業務、活動資源運營位和搜尋框四個模組組成
從框架結構上，可分為頂部導航欄、左側導航欄、無導航引導三種型別。
1、頂部導航欄
適用於使用者個性化推薦體系較精準完善的產品，通過使用者實時/歷史的搜尋、瀏覽、收藏等行為資料積累，直接命中使用者的查詢訴求，引導使用者完成交易。
優點：導航欄佔據空間較小，可最大程度凸顯實際內容，增加點選吸引力
缺點：單屏露出的壹級品類較少，可能導致效率低下
2、左側導航欄
適用於公司壹級品類紛繁復雜的產品，在有限空間內曝光較多的壹二級業務。
優點：曝光業務數量多於頂部導航欄，使用者查詢壹級分類的效率更高
缺點：導航佔據螢幕接近1/3位置，不利於業務實際內容的鋪陳
3、無導航欄
適用於公司壹級類目較少的產品，設計更加簡單高效
優點：最大化的曝光壹二級業務內容
缺點：1、資訊佈局淩亂，壹二級業務區分度不高；2、資訊單元僅由文字聚合，重點不突出，內容的吸引力較低；3、風格簡單，美觀性欠缺
而APP現有首頁導航欄，可供給展示的品類坑位，已遠遠無法滿足新品類曝光的需求。
如果繼續向下拓展導航欄坑位，採用類似攜程首頁九宮格架構設計，則將壓縮活動運營位的空間與推薦資訊流的露出率。
由此，為了保證業務流量的分發效率，導航欄尾部的分類入口的重要性逐步凸顯。
該入口既需要承擔起業務/運營活動，流量分發第二戰場的使命，又要成為扶持公司新/戰略發展業務的搖籃。
在此背景下，Link從去年11月份開始，接手負責了全部分類頁的改版設計。
目標則是在保持使用者固有查詢品類習慣的基礎下，兼顧常用品類的穩定性和效率，扶持新品類/活動的導流曝光。
下面我將圍繞市面上優秀APP的設計案例與自身改版的經驗，談談關於全部分類頁的前世今生。
疊代歷程
上文敘述的2種來源，3種頁面框架，在點評的全部分類頁疊代中，皆有涉及，經驗不可謂不豐富。
1、從1.0到2.0
點評是從資訊內容服務延伸到團購閃惠交易，資訊內容是APP的價值基礎。
如何給新生的新業務導流，給諸如家裝、結婚等低頻的壹二級業務獲取流量，是點評壹直在思考探索的方向。
壹個平庸的產品，不壹定需要很好的創新能力。但壹個想要繼續快速成長的產品，必須要創造性的解決問題，否則只能永遠跟在競爭對手後面。
拋棄市面上成熟的左側導航欄設計，在2.0版本中，點評灰度測試了頂部導航欄以及底部tab入口的大膽設計。
雖最終未達到預期，但也是壹次勇敢的嘗試，以下是收獲的2點反思。
第壹點，底部tab入口的效果不佳，從巨集觀層面來看，是中國第三產業服務業的發展仍處於初步階段。
使用者在生活中對於O2O分類的訴求仍集中於美食、外賣、電影等高頻粗礦的壹級分類中，而對於更為細分的如茶館、採摘、攀巖等服務類目或者說是生活方式，渴求度較低。
該類消費場景的頻次也較低，不足以支撐起獨立的tab入口。
第二點，頂部導航欄設計效率欠佳，源於與淘寶導航欄展現的是成熟的品牌，在全部分類頁通過個性化呈接細分品類相比。
點評在導航欄已根據使用者興趣偏好，鋪陳了感興趣的壹級類目，在全部分類頁，較難命中使用者的訴求。
反過來說，使用者在點評全部分類頁的訴求也更為分散，頁面點選分佈也論證了該點判斷。
2、從2.0到3.0
在2.0版本的疊代泥澤後，是繼續執著的深陷其中，做困獸之鬥，小步優化疊代設計？
還是推翻壹切，否定之前，自己所有的判斷，改為左側縱向導航欄結構？
我們的選擇，正如大家現在所看到的，是後者。這樣的決斷不僅需要勇氣和決心，更需要嚴謹的方法。
正如產品經理的日常工作中，判斷壹個版本中需求、功能的優先順序最為常見。這個需求該不該現在做？做到什麼樣的程度？在多個產品設計方案中選擇，也是經常面臨的情況。
在該種場景下，不管問題、環境多麼錯綜復雜，需要考慮的因素多麼繁復，首先要做的就是抽絲剝繭，抓住問題的重點。
而問題的重點則需要通過嚴謹的資料分析來推導，也只有通過資料，才能勸服所有人，相信我們，這壹次改版壹定會比上壹次成功。
正因如此，我們分析了頁面所有模組的點選分佈，類目點選分佈，縱向/橫向的點選傾向等等資料。
最後以資料為依歸，來不斷改善產品，收獲了現有的改版勝利。
反思總結
以上，是對市場上現有及自身對全部分類頁設計的分析與歸納。
從1.0到3.0，我並不沮喪自己繞了那麼大的路，才回歸正途。反而正是沿途路上的風景，讓我更有故事，更獲成長。
在產品設計工作中充滿很多的不確定性，同時也沒有條件讓人進行充分的調研與論證。
真實的產品疊代中，鮮有80%以上把握的方案，更多是50%左右的情況。
好比壹個營銷人員壹年沒有花多少費用，那他壹定不是壹個優秀的員工，因為他沒有去做實驗。
沒有實驗，那麼永遠也不會知道什麼營銷方案是價效比、效率最高的。
對於產品經理也是如此，跟在競品後面走，是最安全也可能是效率最高的方式，但我們永遠只是壹個低階的執行者。
我們不能因為害怕失敗，而拒絕風險。不能因為曾經失敗，而害怕嘗試。壹個好的產品經理，往往可能是從千萬行程式碼的坑中爬起來的。
大膽去想，努力去試，即使是通過壹個“簡陋”的產品原型，也可以去實驗自己的想法，然後在不斷的通過觀察使用者反饋和資料，做下壹次更完美的判斷。
入口來源
目前，全部分類頁主要有兩種形式的流量入口。
第1種是類似淘寶、美團、點評的設計，位於首頁導航欄的尾部，幫助使用者繼續瀏覽查詢目標品類。
第2種是類似網易考拉、壹號店的設計，在APP底部tab導航區有單獨的入口，成為使用者快速檢視尋找目標品類的常用快捷入口。
不少APP，例如京東，則是共存了上述的兩類入口。
頁面設計
全部分類頁從內容模組上，主要由壹級業務、二級業務、活動資源運營位和搜尋框四個模組組成
從框架結構上，可分為頂部導航欄、左側導航欄、無導航引導三種型別。
1、頂部導航欄
適用於使用者個性化推薦體系較精準完善的產品，通過使用者實時/歷史的搜尋、瀏覽、收藏等行為資料積累，直接命中使用者的查詢訴求，引導使用者完成交易。
優點：導航欄佔據空間較小，可最大程度凸顯實際內容，增加點選吸引力
缺點：單屏露出的壹級品類較少，可能導致效率低下
2、左側導航欄
適用於公司壹級品類紛繁復雜的產品，在有限空間內曝光較多的壹二級業務。
優點：曝光業務數量多於頂部導航欄，使用者查詢壹級分類的效率更高
缺點：導航佔據螢幕接近1/3位置，不利於業務實際內容的鋪陳
3、無導航欄
適用於公司壹級類目較少的產品，設計更加簡單高效
優點：最大化的曝光壹二級業務內容
缺點：1、資訊佈局淩亂，壹二級業務區分度不高；2、資訊單元僅由文字聚合，重點不突出，內容的吸引力較低；3、風格簡單，美觀性欠缺