# Honda 資料收集

<style>
.strong{ color:red;}
</style>

## 目的與動機
在現今網路普及、手機與電腦人手一台，且在疫情影響下，線上瀏覽與訂購的習慣已開始深植人們的生活。而各家車廠之間的競爭也開始從線下實體門市，逐漸轉移戰場至線上網站及APP。
因此針對現有 Honda 官網的使用率和瀏覽排行，加上同行間不同品牌的官網來進行交叉比較，找出各自的優缺點加以優化提升，期望針對不同使用客群提供最符合需求的體驗，提高官網服務的使用率，提升品牌競爭力。

## 比較目標
* Mercedes-Benz
* BMW

### 網頁客群
若以網路行銷為目標導向， **「展現企業文化與價值」**的基礎為前提，第一目標為**開拓新客源**，第二目標**維繫舊有客戶**並產生**再購**的動機，第三目標將**企業文化更深更廣的展現出來**。
以此為目標，將網頁的目標克群排列:
1. 購車者
2. 車主
3. 車輛愛好者

在網頁不論是網頁閱讀和導覽按鈕的排序上盡量以此順序去安排。

### 比較項目

1. 首頁
2. 訂製車款
3. 中古車頁面

## 首頁比較

### Mercedes-Benz 台灣
#### [台灣網站 https://www.mercedes-benz.com.tw/](https://www.mercedes-benz.com.tw/)
賓士不論哪個地區官網基本都以黑色為主色，而台灣網站一進網頁先看到新車資訊與活動顯示於輪播圖，下方第二區塊直接進入車款展示與選擇，右側的浮動按鈕和網頁最下方的按鈕為顯示重點服務如經銷商、購車優惠等，剩餘其他的服務則放置在 Header 兩層下拉選單中。
優點在於首頁主題只有兩個單元，不會造成客戶在網頁上找不到自己要的功能，並優先提供想購車類型的使用者導入購車流程，而車主和其他類型的使用者則從 header 和 footer 進入需要的頁面，且網站所有服務都能在 Header 兩層下拉選單中呈現出來，但缺點就是沒有那麼華麗的畫面感。

header、輪播圖和浮動按鈕

header 兩層下拉選單

車輛總覽選單

底部重點服務和子品牌網站導向

---

### Mercedes-Benz 中國
#### [中國網站 https://www.mercedes-benz.com.cn/](https://www.mercedes-benz.com.cn/)
依舊是賓士舊有黑色主色，Header按鈕內容與台灣相同，不同的是下拉選單只有一層，點下即跳轉頁面。首頁內容以全篇幅圖片和影片呈現，從上開始依序是最新資訊、車輛總覽、客戶服務、科技創新和預約品鑑，車輛總覽以輪播圖來表現且只有以七種車型來區分，沒有將所有款式展現出來，在線客服、預約試駕、經銷商等重要功能以吸附式側選單跟隨在瀏覽頁右側，footer則是基礎的公司聲明和品牌社群連結。
跟台灣網站比起來，比較中國網站的首頁較著重在品牌展現，優點在使用者進來會被這些畫面吸引，缺點是沒有任何實用性功能，需要任何服務都得導向其他頁面才能實現，並且購車流程得也比台灣多一頁車款選擇頁面。

<p class="strong">在線客服可以做到的功能有什麼？</p>


header與一層下拉選單，配合視覺上的設計，但沒辦法一目了然

主視覺
[車型導覽gif](https://i.imgur.com/xa7me1W.mp4)

---

### BMW 台灣
#### [BMW台灣網站 https://www.bmw.com.tw/zh/index.html](https://www.bmw.com.tw/zh/index.html)
BMW 台灣網站主色系以白色+藍色，與賓士台灣網站的設計上有些雷同，header五個單元和賓士一樣，接下來是上方大區塊的圖片，中間為車款分類展示，差別的地方在於下方多了一個區塊新車介紹，重要功能如訂製車款、預約賞車等是以卡片形式呈現，footer黏在瀏覽器下方類似App的設計(功能上與賓士右側浮動按鈕相同)。
首頁設計上一共四個區塊畫面稍微複雜一點，但都是大區塊的圖片和卡片展示，不至於讓使用者產生不知道該看哪邊的感覺，而重要功能用選單黏瀏覽器底部，RWD會讓使用者感覺像在使用APP而非網站，但其實選單和部分卡片有重複，可以將下方卡片刪掉減少畫面複雜度，而 header 二級下拉選單和賓士台灣網站一樣，將所有網站服務呈現出來，減少使用者在不同網頁跳轉的困擾。
網頁header與banner(靜態圖片)
兩層下拉選單方便找尋服務
全車款展示
新車介紹卡片
重點服務卡片與footer
線上客服對話框

---

### BMW 中國
#### [BMW中國網站 https://www.bmw.com.cn/zh/index.html](https://www.bmw.com.cn/zh/index.html)
BMW中國依舊是白+藍主色，版面設計有點類似BMW台灣+賓士中國，和BWM台灣一樣的header和下拉選單、浮動式線上客服按鈕和底部選單，但內容則和賓士中國一樣滿版圖片呈現，車款展示只有各車型分類沒有將所有車款展示出來。有線上客服功能，但線上客服對話框是開啟一個新的瀏覽頁而非在同一個網頁裡。
優點和賓士中國一樣大圖片吸引使用者的注意力，但實用性較不突出，好在header有所有車款展示和兩層下拉，使用者不需要再首頁裡上下滾動找自己需要的服務。
滿版圖片
header與兩層下拉
左右滾動的車款選擇
下方選單與客戶服務
線上客服是彈出視窗

---

## 首頁比較結論
* 首頁設計 : 依照銷售導向和honda的需求，賓士台灣和BMW台灣比較符合(車款顯示在首頁，點擊進入車輛介紹)，但賓士和BMW有較多車款所以有比較多選項可供選擇，honda照這個方式設計的話可能畫面會略嫌單調，可以參考賓士中國和BMW中國用 slider 或大卡片的方式呈現。
* Header : 兩層式下拉選單使用上比一層感覺更直觀一點，減少客戶頻繁切換網頁找尋需要的服務，加速銷售流程。

例如:
1.首頁>**2.(點擊購車優惠)>3.優惠頁面>4.(點擊CR-V優惠)**>5.CR-V優惠頁面>6.(點擊聯繫業務)>7.業務頁面
1.首頁>**2.(下拉選單>購車優惠>CR-V優惠)**>3.CR-V優惠頁面>4.(點擊聯繫業務)>5.業務頁面
**相較之下減少了兩個步驟**

* 右側浮動按鈕和最下方按鈕 : 建議都放上預約試車、聯繫業務、購車試算、經銷商查詢等銷售服務，不論客戶是滾動頁面到最後還是看網頁到一半，剩餘其他服務放在header下拉選單中就足夠。

## 訂製車頁面
### 賓士台灣
#### [桌機版網頁:https://www.mercedes-benz.com.tw/passengercars/mercedes-benz-cars/car-configurator.html/motorization/CCci/TW/zh/A-KLASSE/KOMPAKT-LIMOUSINE](https://www.mercedes-benz.com.tw/passengercars/mercedes-benz-cars/car-configurator.html/motorization/CCci/TW/zh/A-KLASSE/KOMPAKT-LIMOUSINE)
使用左側兩層選單，右側車輛可以選擇圖片還是360度導覽，可以切換日夜光線(內裝也可以切換)，讓使用者更有臨場感，最後一個選項是您的夢想車(個人覺得選項名稱不錯)，可以選擇輸出分享車子或直接和業務聯繫等，導向銷售的最後流程。
缺點則是選用配備的選項，變成在車子下方的卡片顯示，得重複上下來回滾動。

360度賞車和日夜光線模式

內裝slider,沒有360度環繞影像

選用配備則是使用卡片的方式呈現，這區塊要看車和調整配備得上下來回滾動

最後的選項會呈現配置了什麼配備以及車子的性能等資訊，但沒有顯示價格

儲存分享配置(輸出車子圖片和詳細配置的表單供客戶或業務留存)、預約試車、購車試算列表

#### 手機版網頁:
賓士手機版網頁就比較複雜一點，原本兩層選單，第一層變成上方下拉選單，第二層要點下面的 change 的按鈕才會出現，使用上就沒有這麼流暢，但整體畫面還是很整潔。
手機版網頁
第一層選單
第二層選單

---

### BMW台灣
#### [桌機版網頁:https://configure.bmw.com.tw/zh_TW/configure/F40/7K31/FKFIX,P0A96,S01CB,S01DE,S0216,S0249,S024U,S0255,S0258,S02TF,S02VB,S02VG,S0322,S03MB,S0423,S0428,S0430,S0459,S0473,S0481,S0493,S04P3,S0521,S0534,S0563,S05A2,S05AS,S05DF,S05DM,S06AC,S06AE,S06AK,S06C3,S06NW,S06U3,S07AC?expanded=true](https://configure.bmw.com.tw/zh_TW/configure/F40/7K31/FKFIX,P0A96,S01CB,S01DE,S0216,S0249,S024U,S0255,S0258,S02TF,S02VB,S02VG,S0322,S03MB,S0423,S0428,S0430,S0459,S0473,S0481,S0493,S04P3,S0521,S0534,S0563,S05A2,S05AS,S05DF,S05DM,S06AC,S06AE,S06AK,S06C3,S06NW,S06U3,S07AC?expanded=true)

bmw台灣網站使用右側一層選單，但一層選單導致所有選項都會顯示出來，畫面偏複雜，能將選單摺疊展開的話會比較好，而車子外觀再選轉和更換配置時反應很慢會出現馬賽克，且背景圖沒有賓士來的有質感，體驗稍嫌不佳。

右側一層選單和車子外觀，不能切換光線，右側選單有點亂

內裝選項會切換成360度車內畫面

和賓士一樣最後導向專人服務和尋找代理商並且顯示配置價格
<!-- 可以輸出車子外觀和數據配備以及分享
 -->

網頁反應較慢

#### 手機版網頁:
右側選單移到車子下方，車子外觀切換成圖片模式並非360度(可自行切換)，圖片會黏在瀏覽器上方只有下方選單滾動並依照的選項轉換外觀內裝圖片，聯繫業務、代理商、輸出分享等選項會黏在瀏覽器下方類似APP。

### 賓士中國
訂製車款頁面和賓士台灣一模一樣，差別在車輛介紹頁，最下方有一區是同車款高配/低配的價格、車輛外觀和性能數據，且0-100加速時間用動畫讓人感受到時間感。

## 訂製車比較結論
桌機版 : 賓士台灣做的比較精緻和乾淨，網頁反應也比較快，但賓士"選用配備"的卡片導致使用者得滾動到網頁下方點擊，再滾動到上方看車子，能都統成左側選單的話感覺更好一點，減少滾動。
BMW一層選單畫面稍微複雜一點，但由於沒有卡片在車子下方，視覺上就只有左右兩區塊，整體操作在更舒服一點。

手機版 : BMW將圖片固定，下面選單滾動的方式使用起來較舒服。賓士由於兩層選單隱藏起來，多了打開選單的步驟，稍微麻煩一點但畫面相較之下比較乾淨。

<p class="strong">*網頁讀取速度滿重要的，太慢體驗很糟，例如BMW整個操作下來快4成時間看不到車子只能看到馬賽克或是讀取畫面，讀取超過5秒使用者很可能就跳出這個網頁了。*</p>

## 中古車
首頁
### [賓士台灣](https://www.mercedes-benz-select.com.tw/index)
從首頁下拉可以導至中古車頁面，banner+搜尋車款+最新消息和精選車款清單，header和footer黏在瀏覽器上下，footer黏著有點沒意義還縮減了瀏覽器空間，導致往下長的卡片一次只能看到兩台車。
但賓士的車輛卡片整張可以點擊，加上有車輛特色介紹，這點比BMW來的好。
比較頁面的字稍微小了一點，但因此可以看到比較多資訊，且最後有加上導向該車頁面的按鈕。
搜尋車款，不用點搜尋按鈕，每次選完選項下方就會直接顯示結果。
精選車款推薦，header和footer壓縮了畫面，加上卡片太大瀏覽起來沒有很方便。
車輛卡片，整張可點擊，加上車輛特色介紹。
收藏頁面，無法點卡片進入車輛介紹頁面。
比較頁面，字稍小旦可以一次看到大部分的資訊，最後有導向車輛頁面按鈕。

### [BMW](https://bps.bmw.com.tw/)
結構和賓士很雷同，但精選車輛的卡片以slider顯示，一次能看到3~5台，卡片只有基本資訊沒有顯示車輛特色，且只能點按鈕進入車輛頁面。
車輛比較部分也和賓士差不多，但字體比較大看得比較清楚，可是得向下滾動才能看完，而且比較完沒有任何導向車輛頁面或是聯繫業務的按鈕，。

搜尋車款，得選完選項後點搜尋按鈕才能顯示結果。
精選車款推薦
車輛卡片
搜尋結果頁面，可以切換圖片或是列表顯示。
收藏頁面，無法點卡片進入車輛介紹頁面。
比較頁面，比較完沒有引導到下一步。

## 中古車比較結論
BMW的板片比較乾淨清楚，搜尋結果可以轉換成列表進行排序減少了使用者比對各個車輛的時間。
賓士則是在搜尋系統上可以立即反應減少了點搜尋按鈕的步驟，但賓士因為footer黏著加上卡片較大，一次只能看兩張，得不停上下滾動，也不能轉換成列表顯示，整體瀏覽不是很舒服。
卡片設計上也是賓士的較好，能整張點擊，加上特色介紹讓使用者能更快了解各車。