MomoshopMomoshop 首頁改版計劃首頁改版計劃提案人：劉佳禎提案人：劉佳禎日期：日期： 2009/12/222009/12/22

目 錄

• 購物網站分析及範例• Momoshop 現況分析• 改版目的• 改版計劃• 版位規劃示意圖• 版位規劃參考範例• 參考網站

架構架構架構架構

版型版型版型版型

視覺視覺視覺視覺

功能功能功能功能

購物網站首頁分析

首頁首頁首頁首頁

•分析角度

韓國購物網站分析韓系購物網站

網站名稱 logo 導覽列 內容搜尋列 功能列

Logo 生活化

動態呈現

版頭靠近 logo

色系同版頭

左側

細分類mouseover 出現

右上方

小 icon上方 1/3

大區塊呈現

圖片呈現

善用留白

動態大看板

浮動式廣告/ 瀏覽紀錄

1.整體視覺柔和 ( 善用留白、顏色彩度低 )

2.適當運用動態效果呈現 ( 首頁上方 1/3 使用 2-3 個動態 )

3.活潑的圖文呈現 ( 文字做圖 )

1.整體視覺柔和 ( 善用留白、顏色彩度低 )

2.適當運用動態效果呈現 ( 首頁上方 1/3 使用 2-3 個動態 )

3.活潑的圖文呈現 ( 文字做圖 )

節慶活動與 logo 結合

韓國購物網站 logo/ 搜尋範例

韓國購物網站 導覽列呈現範例• 一層導覽列呈現

• 二層導覽列呈現 → mouse over

• 一層導覽列 /品牌條呈現→頁籤切換

•導覽列在上方→ mouse over

韓國購物網站 功能列 / 主視覺範例

日本購物網站分析日本購物網站

網站名稱 logo 導覽列 內容搜尋列 功能列

Logo 生活化

靜態呈現

導覽列下方

色系同版頭

上方

點選進入主館架

右上方

文字呈現 版型小區塊

系統文字呈現

色彩豐富顯凌亂

動態大看板

插畫設計

1.整體視覺豐富但雜亂 ( 過多色彩、字型不統一 )

2.文字導向 ( 過多文字 )

3.吸引女性消費者 ( 使用插畫設計 )

1.整體視覺豐富但雜亂 ( 過多色彩、字型不統一 )

2.文字導向 ( 過多文字 )

3.吸引女性消費者 ( 使用插畫設計 )

日本購物網站 視覺範例

日本購物網站 文字導向視覺範例

大陸網站觀察心得大陸購物網站

網站名稱 logo 導覽列 內容宣傳搜尋列 功能列

置中 / 左上方

靜態

導覽列下方

關鍵字

上方 / 左方

上與左館架重覆呈現

右上方

文字呈現

動態大看板

三欄式

圖文呈現

下方版型單調

館別分類細

1.館架清楚呈現 ( 上方呈現主館架；左方呈現次館架 )

2.版型固定單調1.館架清楚呈現 ( 上方呈現主館架；左方呈現次館架 )

2.版型固定單調

大陸日本購物網站 導覽列範例 拉出主打類別

拉出主打商品

館架重複曝光

拉出主打次館別

•調整瀏覽動線，提升網站易用性•更新視覺色系，增加閱讀舒適度•強化機制，便利消費者使用•調整成效不佳之版位，提升版位產值

•調整瀏覽動線，提升網站易用性•更新視覺色系，增加閱讀舒適度•強化機制，便利消費者使用•調整成效不佳之版位，提升版位產值

改版目的

讓 momoshop 成為不分年齡 / 性別皆愛使用的購物網站平台，進而增加銷售及會員數。

讓 momoshop 成為不分年齡 / 性別皆愛使用的購物網站平台，進而增加銷售及會員數。

改版計畫

• 視覺色系調整• 企業色延伸• 使用柔和且彩度低色系• 適度留白

• 館架調整• 上方館架整合搜尋列，並帶出上月流量前五名館別• 左方呈現主館架及中分類，以 mouse over 呈現小分類

• 區塊調整• 首頁 1/3 處以大區塊呈現• 單一畫面維持 2-3 個動態• 浮動式瀏覽紀錄 / 折價券• 關鍵字雲

計畫一計畫一

計畫二計畫二

計畫三計畫三

版位規劃示意圖

主打館別 (5 個館 )搜尋列 ( 參考 P19)

館別 /品牌條

( 參考 P20)

大看板( 參考 P21)

關鍵字雲賠本售 2 折 週年慶 特賣會賠本售 2 折 週年慶 特賣會賠本售 2 折 週年慶 特賣會

會員登入 | 註冊為客戶 | 購物車 | FAQ | 客服中心 | 我的帳戶 | 網站地圖

瀏覽紀錄

折價券省錢達人

( 參考 P24)

商品圖 文 $

商品圖 文 $

商品圖 文 $

今日搶購 Simply

拉提面膜 $699 Simply

拉提面膜 $699 Simply

拉提面膜 $699

Logo

無患子保養組 $699

圖無患子保養組 $699

圖無患子保養組 $699

圖無患子保養組 $699

圖

蘋果報導千層派↘ $499 蘋果報導千層派↘ $499 蘋果報導千層派↘ $499

圖圖圖

館別 熱門品牌

( 參考 P21)

( 參考 P22)

版位規劃示意圖熱銷排行榜 TV 折 100

超商取貨

達人推薦美肌達人 陳孝萱

Momo精選

Momo Blog• 試用大隊開始嘍 ..

• 試用大隊開始嘍 ..

• 試用大隊開始嘍 .. 更多

新品推薦 / 超值任選館

BN BN BN BN BN

八大塊

荷蘭式搶購

人商品圖

冬日專用 BB 霜水嫩妝感好動人

( 參考 P26)

( 參考 P25)

無患子保養組 $6991

2

3

4

5

圖無患子保養組

$699圖無患子保養組

$699圖無患子保養組

$699圖無患子保養組

$699圖

版位規劃參考範例

• 搜尋 + 主打館別 (5 個 )• 關鍵字雲

版位規劃參考範例•館別 / 次館別 & 品牌條 →以切換式呈現

版位規劃參考範例•大看板 →同時帶入 3 個主打商品•各線主打商品 → 以跑馬燈方式呈現

大看板

今日搶購

版位規劃參考範例•瀏覽紀錄 →以浮動式呈現•新增折價券於下方→提醒消費者使用

折價券折價券您尚有

200 元 x10300 元 x1

改版計畫 ( 二 )

• 視覺色系調整• 企業色延伸• 使用柔和且彩度低色系• 適度留白

• 區塊調整• 單一畫面維持 2-3 個動態• 浮動式瀏覽紀錄 / 折價券• 次館別 / 品牌條拉至網頁下方

計畫一計畫一

計畫二計畫二

版位規劃示意圖 ( 二 )

搜尋 + 關鍵字館別

大看板

功能列

瀏覽紀錄

折價券

省錢達人

今日搶購

Logo

TV 折 100

八大塊

達人推薦

Momo Blog

超商取貨

頁籤

頁籤

頁籤

頁籤

頁籤

頁籤

版位規劃示意圖 ( 二 )

BN BN BN BN BN

次館別 /品牌條

八大塊

熱銷排行榜

新品推薦

超值任選館

參考購物網站韓國• http://www.gsshop.com/index.gs• http://www.lotte.com/lotte/sitemap/lotte_index.jsp?check=N• http://www.hmall.com/Home.html• http://www.dutyfree24.com/• http://www.gmarket.co.kr/

日本• http://en.rakuten.co.jp/• http://joshinweb.jp/top.html• http://www.jshoppers.com• http://www.shopch.jp/JscTop.do• http://www.nissen.co.jp/• http://www.e-matsukiyo.com/shop/default.aspx• http://www.dhc.co.jp/main/main.jsp

大陸• http://www.taobao.com/index_global.php• http://www.dangdang.com/• http://www.eachnet.com/• http://www.tvsn.com.cn/• http://www.cntvs.com/default/• http://www.chinadrtv.com/• http://www.d1.com.cn/• http://www.1b2g.com/shop.php