momoshop 首頁改版計劃
DESCRIPTION
Momoshop 首頁改版計劃. 提案人:劉佳禎 日期: 2009/12/22. 目 錄. 購物網站分析及範例 Momoshop 現況分析 改版目的 改版計劃 版位規劃示意圖 版位規劃參考範例 參考網站. 購物網站首頁分析. 分析角度. 架構. 視覺. 首頁. 版型. 功能. 韓國購物網站分析. 韓國購物網站 logo/ 搜尋範例. 韓國購物網站 導覽列呈現範例. 一層導覽列 / 品牌條呈現→頁籤切換. 一層導覽列呈現. 二層 導覽列 呈現 → mouse over. 導覽列在上方 → mouse over. - PowerPoint PPT PresentationTRANSCRIPT
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