1 / 24

Momoshop 首頁改版計劃

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

wirt
Download Presentation

Momoshop 首頁改版計劃

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Momoshop首頁改版計劃 提案人：劉佳禎 日期：2009/12/22

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

  3. 購物網站首頁分析 • 分析角度 架構 視覺 首頁 版型 功能

  4. 韓國購物網站分析

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

  6. 韓國購物網站 導覽列呈現範例 • 一層導覽列/品牌條呈現→頁籤切換 • 一層導覽列呈現 • 二層導覽列呈現 → mouse over • 導覽列在上方→ mouse over

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

  8. 日本購物網站分析

  9. 日本購物網站 視覺範例

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

  11. 大陸網站觀察心得 • 館架清楚呈現(上方呈現主館架；左方呈現次館架) • 版型固定單調

  12. 大陸日本購物網站 導覽列範例 拉出主打類別 館架重複曝光 拉出主打次館別 拉出主打商品

  13. 改版目的 • 調整瀏覽動線，提升網站易用性 • 更新視覺色系，增加閱讀舒適度 • 強化機制，便利消費者使用 • 調整成效不佳之版位，提升版位產值 讓momoshop成為不分年齡/性別皆愛使用的購物網站平台，進而增加銷售及會員數。

  14. 改版計畫 計畫一 • 視覺色系調整 • 企業色延伸 • 使用柔和且彩度低色系 • 適度留白 • 館架調整 • 上方館架整合搜尋列，並帶出上月流量前五名館別 • 左方呈現主館架及中分類，以mouse over呈現小分類 • 區塊調整 • 首頁1/3處以大區塊呈現 • 單一畫面維持2-3個動態 • 浮動式瀏覽紀錄/折價券 • 關鍵字雲 計畫二 計畫三

  15. 版位規劃示意圖 主打館別(5個館) 搜尋列(參考P19) Logo 會員登入| 註冊為客戶|購物車 | FAQ | 客服中心 | 我的帳戶 | 網站地圖 瀏 覽 紀 錄 蘋果報導千層派↘$499蘋果報導千層派↘$499 蘋果報導千層派↘$499 關鍵字雲 賠本售 2折 週年慶 特賣會 賠本售 2折 週年慶 特賣會 賠本售 2折 週年慶 特賣會 大看板 (參考P21) 館別/ 品牌條 (參考P20) 館別 熱門品牌 商品圖 文 $ 商品圖 文 $ 今日搶購 Simply拉提面膜 $699 Simply拉提面膜 $699 Simply拉提面膜 $699 圖 商品圖 文 $ 圖 圖 折 價 券 省錢達人 (參考P24) (參考P22) 無患子保養組 $699 圖 無患子保養組 $699 圖 無患子保養組 $699 圖 無患子保養組 $699 圖 (參考P21)

  16. 版位規劃示意圖 TV折100 熱銷排行榜 圖 無患子保養組 $699 1 圖 無患子保養組 $699 2 (參考P26) 達人推薦 美肌達人 陳孝萱 圖 無患子保養組 $699 3 八 大 塊 人 商品圖 圖 無患子保養組 $699 4 冬日專用BB霜水嫩妝感好動人 無患子保養組 $699 圖 5 (參考P25) • Momo Blog • 試用大隊開始嘍.. • 試用大隊開始嘍.. • 試用大隊開始嘍.. • 更多 Momo 精選 超商取貨 荷蘭式搶購 新品推薦/超值任選館 BN BN BN BN BN

  17. 版位規劃參考範例 • 搜尋+主打館別(5個) • 關鍵字雲

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

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

  20. 版位規劃參考範例 • 瀏覽紀錄 →以浮動式呈現 • 新增折價券於下方→提醒消費者使用 折價券 折價券 您尚有 200元x10 300元x1

  21. 改版計畫(二) 計畫一 • 視覺色系調整 • 企業色延伸 • 使用柔和且彩度低色系 • 適度留白 • 區塊調整 • 單一畫面維持2-3個動態 • 浮動式瀏覽紀錄/折價券 • 次館別/品牌條拉至網頁下方 計畫二

  22. 版位規劃示意圖(二) 搜尋+關鍵字 館別 Logo 功能列 瀏 覽 紀 錄 今日 搶購 大看板 達人推薦 省錢 達人 超商取貨 折 價 券 八 大 塊 TV折100 Momo Blog

  23. 版位規劃示意圖(二) 新品推薦 熱 銷 排 行 榜 八 大 塊 超值任選館 次館別/ 品牌條 BN BN BN BN BN

  24. 參考購物網站 韓國 • 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

More Related