CO NO VA WEBSITE M AP
網頁架構
MAP USER
訂閱
購物車 訂單資料 填寫
結帳 系統
首頁
產品 購 買
品牌概念
購物車
彩妝預約
流行時尚
<
註冊
or
訂單 資料 填寫
< 結帳
彩妝教學
動態呈現
勾選加入會員 作品呈現
RR O YA L B LUE
DESIGN
預約單
最新消息
CO NO VA NAVBAR
功能列設 計
USER
登入前-登入
USER
CONOVA
1
訂閱
購物車
登入 註冊
2
3
4
1 功 能 列 左 上 角 之 U S E R按鈕點擊後，出現下拉式選單，選擇「 登 入」進入登入畫面。
2 登 入 頁 面 輸 入 電 子 郵 件 、密碼與驗證碼，確認後頁面跳轉 首頁 或 購物頁面 。
3 使用FB登入。 4 若 無 帳 號 可 點 即 此 頁 面 上之「註冊」進入註冊頁面。
RR O YA L B LUE
DESIGN
USER
登入前-註冊
USER
CONOVA
1
訂閱
購物車
登入 註冊
2 3
1 功 能 列 左 上 角 之 U S E R 按 鈕點擊後，出現下拉式選單，選擇「 註 冊」進入註冊畫面。
2 註 冊 頁 面 輸 入 姓 名 、 電 子郵件(帳號)與與密碼，按下確認即註 冊 完 成 ， 即 跳 轉 首 頁 或 購物頁面
。
3 勾選我要訂閱電子報。 4 服 務 條 款 、 隱 私 權 政 策 、會員規範 連結。
RR O YA L B LUE
DESIGN
USER
登入後
1 USER
CONOVA
訂閱
購物車
修改資料 修改密碼
修改資料 修改密碼
2
訂單查詢
親愛的 楊佳蓉 您好! 您目前的累積消費金額：0元 退貨查詢 單筆消費金額達5000元或累積消費10000元即可成為VIP會員
訂單查詢
申請試用包
退貨查詢
推薦給好友
申請試用包 推薦給好友
3
登出
登出
1 登 入 後 點 即 U S E R 按 鈕，出現下拉式選單，選擇任一按鈕進入相 對 應 頁 面 。 ( 未 登 入 時 點即此按鈕只會出現登入與註冊選項)
2 購 物 金 狀 態 顯 示 在 修 改 資料/修改密碼/訂單查詢/退貨查詢/申 請 試 用 包 / 推 薦 好 友 等 頁面，皆會顯示在同一位置。
3 側攔增加「登出」按鈕。
RR O YA L B LUE
DESIGN
訂閱
USER
CONOVA
2
1
訂閱
購物車
輸入電子 郵 件
訂閱電子報!
1 點 擊 「 訂 閱 」 按 鈕 ， 彈 跳出訂閱電子報視窗，此功能無論是否 為會員皆可訂閱。
2 輸 入 電 子 郵 件 點 擊 訂 閱 電子報及訂閱完成。
RR O YA L B LUE
DESIGN
購物車
1 購物車
CONOVA
USER
訂閱
1
購物車( 1)
NT$ 1380 數量: 1
3
結帳
1 點 擊 「 購 物 車 」 按 鈕 ， 左方彈跳出黑色區塊，顯示您現在已加 入購物車的商品。
2 購 物 車 按 鈕 上 有 ( 1 ) 代表您的購物車內有一件商品。 3 點 擊 結 帳 按 鈕 跳 轉 結 帳 頁面。尚未註冊或登入之使用者，可於 填 寫 購 買 人 資 料 頁 面 再 註冊會員即可。
4 此 功 能 無 論 登 入 與 否 皆 可以使用。
RR O YA L B LUE
DESIGN
2
CO NO VA INDEX
提案一
首頁企劃
網站功能列(含分頁連結、會員、購物車、訂閱)
1 首要廣告欄位 用於宣傳品牌自身形象、活動宣傳等 貴公司已有此功能，遂只做排版更動即可
2
次要廣告欄位 用於宣傳品牌網站提供之各項服務 (如購物商城、彩妝服務預約 、彩妝課程報名、活動連結BANNER等) 此區塊需要新增獨立廣告上架 欄位(含前端與後台)，1-5個不等。
3 品牌概念與作品呈現
4
此一區塊為呈現品牌概念精神 以及實作作品與品牌經營之彩妝頻道
此區塊需要新增獨立廣告上架 欄位(含前端與後台)，1-5個不等。
品牌備註資訊、 粉絲頁、YOUTUBE連結、聯絡我們
1 大型輪播圖廣告欄位。 2 此 區 圖 片 連 結 都 是 跳 轉 分頁(彩妝教學/彩妝預約/最新消息頁面 ) 並 不 直 接 跳 出 填 寫 表 彩妝教學報名/彩妝預約 表單視窗。
3 作品及圖片呈現。 4 圖 片 連 結 C O N O V A Y O U TUBE頻道。 RR O YAL B LU E
DESIGN
CO NO VA INDEX
提案二
首頁企劃
網站功能列(含分頁連結、會員、購物車、訂閱)
1 首要廣告欄位 用於宣傳品牌自身形象、活動宣傳等 貴公司已有此功能，遂只做排版更動即可
3
2 彩妝服務預約
彩妝教學報名
次要廣告欄位 (含彩妝預約與彩妝教學廣告連結，可討論) 此區塊需要新增獨立廣告上架欄位2個(可討論)。 若不更動廣告圖片可不需要建後台。
部分商品呈現 可依上架日期、種類、熱門度等之條件 呈現部分商品。(因此資料表)貴公司已有 並不需要再額外新增後台。
品牌備註資訊、 粉絲頁、YOUTUBE連結、聯絡我們
1 大型輪播圖廣告欄位。 2 直 接 點 擊 彩 妝 服 務 預 約 圖片連結，跳轉預約頁面。 3 直 接 點 擊 彩 妝 教 學 報 名 圖片連結，跳轉基礎彩妝課程頁面。
RR O YA L B LUE
DESIGN
CO NO VA PRO D U CT S
提案二
商品頁面 企 劃
網站功能列(含分頁連結、會員、購物車、訂閱)
2
1
搜尋
商品分類 列表
廣告欄位 (每個商品分類頁面各有一個)
3
商品陳列 預設:所有商品
品牌備註資訊
1 分 頁 廣 告 欄 位 ( 所 有 商 品頁面、大分類頁面、小分類頁面、 搜 尋 ( ? ) 皆 有 此 廣 告 欄位)
2 搜尋。
貴 公 司 原 本 之 商 品 頁 面 並無搜尋這項功能，可討論增加與否， 建 議 為 商 品 數 量 若 少 的 化，此項功能可能並非必要。
3 根 據 點 擊 分 類 顯 示 相 對 應商品。 RR O YA L B LUE
DESIGN
RR O YAL B LU E
CO NO VA TEACH ING
彩妝教學 頁 面
DESIGN
提案一 此頁面，貴公司網頁原本並無這樣的總覽頁面 原來架構為預設為基礎彩妝頁面
網站功能列(含分頁連結、會員、購物車、訂閱)
彩妝教學形象圖 基礎彩妝教學 專業彩妝教學 連結
流行時尚區塊 顯示前最新三篇圖文彩妝教學文 若要看更多點擊 看更多流行時尚 跳轉流行時尚頁面
動態呈現區塊 顯示前最新三篇影片教學 若要看更多點擊 看更多動態呈現 跳轉動態呈現頁面
作品呈現區塊 顯示數個不等的作品圖片 若要看更多點擊 看更多作品呈現 跳轉作品呈現頁面
品牌備註資訊
RR OYAL B LU E
DESIGN CO NO VA TEACH ING
彩妝教學 頁 面
提案一 此頁面，貴公司網頁原本並無這樣的總覽頁面 原來架構為預設為基礎彩妝頁面
網站功能列(含分頁連結、會員、購物車、訂閱)
彩妝教學形象圖 基礎彩妝教學 專業彩妝教學 連結
1
2 流行時尚區塊 顯示前最新三篇圖文彩妝教學文 若要看更多點擊 看更多流行時尚 跳轉流行時尚頁面
5
動態呈現區塊 顯示前最新三篇影片教學 若要看更多點擊 看更多動態呈現 跳轉動態呈現頁面
4
作品呈現區塊 顯示數個不等的作品圖片 若要看更多點擊 看更多作品呈現 跳轉作品呈現頁面
3 品牌備註資訊
CONOVA
USER
訂閱
購物車( 1)
1 2 3 4 5
1 點 擊 彩 妝 教 學 頁 面 ( 總 覽)中的參加基礎彩妝課程，頁面跳轉基 礎彩妝分頁。
2 點 擊 彩 妝 教 學 頁 面 ( 總 覽)中的參加專業彩妝課程，頁面跳轉專 業彩妝分頁。
3 點 擊 彩 妝 教 學 頁 面 ( 總 覽)中的看更多作品呈現，頁面跳轉作品 呈現分頁。
4 點 擊 彩 妝 教 學 頁 面 ( 總 覽)中的看更多影片教學，頁面跳轉影片 教學分頁。
5 點 擊 彩 妝 教 學 頁 面 ( 總 覽)中的看更多流行時尚，頁面跳轉流行 時尚分頁。
RR O YA L B LUE
DESIGN
CONO VA MOD ELING
彩 妝預約 頁 面
網站功能列(含分頁連結、會員、購物車、訂閱)
1
造型預約表單填寫
作品表現
品牌備註資訊
1 填 寫 造 型 預 約 表 格 即 可完成預約。
RR O YA L B LUE
DESIGN
CONO VA MOD ELING
彩 妝預約 頁 面
網站功能列(含分頁連結、會員、購物車、訂閱)
1
廣告欄位
2015 CONOVA 模特兒選拔大賽
2
用於刊登活動廣告
3
CONOVA 2015 彩妝模特兒徵選
活動列表
不要再隱藏了，你將擁有全新的自己
顯示現有的活動 素人改造我最美 網路票選活動 不要再隱藏了，你將擁有全新的自己
寵愛獻禮 感恩媽咪也愛自己 不要再隱藏了，你將擁有全新的自己
品牌備註資訊
3
1
廣告區塊讓你輕鬆宣傳活動。
2
條列式顯示目前正在進行的活 動。
3
點擊標題查看內文。 內文頁面的排版皆可更動。
RR O YA L B LUE
DESIGN
CON O VA
手機 板 網 頁
RR O YA L B LUE
DESIGN
CO NO V A I N DE X
首頁 1
2
下滑 螢幕
3
6
4
RR O YA L B LUE
DESIGN
1
功能列(MENU與 購物車)
2
購物頁面連結 按鈕
3
造型預約連結 按鈕
4
彩妝教學連結 按鈕
5
公司資訊以及 輔助資訊
CONO VA MENU &CART
功 能列
功能列 至頂於網頁的最上方，在站內任何頁面皆可看到。
3
1
2
4
5
6
RR O YA L B LUE
DESIGN
1
點擊功能列ME NU按鈕
2
螢幕左方彈跳 出 MENU列表 內含項目請見 圖 大致分為 基本 功能 與 產品目錄。
3
點擊功能列購 物車
4
螢幕左方彈跳 購物車 列表。若購物 車內無 商品，即顯示 您的購 物車是空的。
5
購物車內有商 品的 示意圖。含商 品名稱、 價格、數量。 以及 從 購物車刪除 按鈕。
6
按下確認結帳 按鈕， 即進入結帳頁 面。
CO NO V A CA RT
購物車 結帳流程
6
8
7
6
按下確認結帳按鈕， 即進入結帳頁面。
7
進入結帳頁面。預覽訂單。
8
刪除訂單按鈕。
9
填寫購買人資料。 按下確認送出之前，會安插一 個 用FB登入 或是 帳號註冊 的彈跳視窗
RR O YA L B LUE
DESIGN
B UI LDI NG .. .
RR O YA L B LUE
DESIGN
RR O YAL B L U E
DESIGN
CON O VA PROPOSAL OF USER INTERFACE