Ｏ
2016.06.13 專案負責：顏苡亘
宜守美學磁磚 購物網站提案 宜守進口建材₪美學磁磚
客戶資料
聯絡人： HaXXXX 聯絡電話：098XXXXXX9 Emaill： hXXXX@odyishou.tw 奇異果創意行銷股份有限公司 高雄市苓雅區河南路 157 巷 7-2 號
公司資料
聯絡電話：07-7225728 統編：53886324
專案聯絡人：顏苡亘
Email：contact@cheerer.tw
公司電話：07-7225728
戶名：奇異果創意行銷股份有限公司
公司傳真：07-7229226
銀行：國泰世華銀行 新興分行
帳戶：052-03-500320-7
一
品牌識別/平面設計/包裝設計/網站設計
奇異果作品 1.形象網站：
勝得棻：sandalphon.com.tw
her spa：herspa.com.tw
鼎宸空間設計：dezen.com.tw
Oralcare 德國口腔護理專家： oralcare.com.tw
台灣受恩：stipendiary.com.tw
健新醫院：cshospital.com.tw
榮仁駕訓班： rongren.tk
銥衛科技： ewaytech.com.tw
LEHO UKULELES：lehoukulele.com
網站作品
百立建設：pearly.com.tw
台南市台日友好交流協會：tjf.org.tw
更完整作品請至：
高師大藝術學院校園環境美感再造計劃網站：nknu.upbeat.com.tw
摯愛毛線：yarnpassions.tw
綠威生物科技：hit-greenway.com.tw
張啟華文化藝術基金會：zhangqihua.com.tw
林文苑長笛明星樂團：miracle.tw
小山烏克麗麗：koyamaukuleles.com
2.購物網站：
好果農場：perfect-fruit.tw
http://goo.gl/GG20DE
URBANO：urbano.com.tw
or cheerer.tw
T’AMOR 藏愛珠寶 3D 訂製廊：tamor3d.com
KOUS KIX OFF Ū SOLE： kous.com.tw
定風閣：dewind.asia
合成帆布行：onebag.com.tw
AC 水影草族：acshop.com.tw
薩多奴購物網： sadonu.com.tw
主峰國際樂器：mainpeakmusic.com
3.活動網站：
法頌婚紗 以愛之名：event.fm520.tw
施巴 潔顏雙星：sebamed.com.tw/facewash/
放肆旅遊 金質獎行程：funstravel.com/2014tqga
ORALCARE 分享有理大聲說：oralcare.com.tw/say2015/
二
介面/內容/結構/功能/版型/視覺
網站規劃建議 網站製作流程
企劃期
設計期
建構期
測試期
上線
了解需求
資料蒐集
網站企劃
資料提供
網頁風格
網頁精稿
切圖套版
功能撰寫
資料上架
掛上臨時網址
使用測試
除錯修正
跨裝置測試
廣告連結
搜尋登錄
網站架構
線上選購
商品列表
商品內頁
優惠活動 關於我們 實績案例
實績內頁
首頁 合作設計師 代理品牌 付款方式 聯絡我們 運送方式 購物須知 退貨退款 隱私權政策 購物車
結帳/配送資訊 會員登入 訂單管理
會員中心 地址管理 會員註冊通知 修改密碼 訂單確認通知 e-mail通知信 出貨通知 密碼重設
[圖示說明] 頁面
彩底白框
區塊
白底彩框
保留頁面
純黑色塊
不只是 Flash 的問題！
響應式網站
除了一般電腦瀏覽之外，也針對行動裝置：手機、平板的使用進行規劃，同一個網 站在各種不同裝置上瀏覽都可以正常使用。針對各種裝置進行最佳化的網站設計， 在搭配其他宣傳時（例如：宣傳品可以搭配 QR Code，直接使用手機）也都可以應 用。
兼顧行動裝置使用者！
NO FLASH INSIDE！
Adobe Flash 因為較耗資源，在記憶體較小，且電池續航力十 分重要的行動裝置上並不適合。因此，Apple 從一開始就拒絕 Flash 登陸 iOS 系統，而 2012 年開始，開發 Flash 的 Adobe 公司也主動宣佈退出 Android 的舞台。行動裝置（手機、平 板）上網的比例越來越高，Flash 的網站技術的支援度越來越 低，避免使用 Flash 而改採 HTML5 的網站技術建置已經成為網 站建構的基本。
三
製作流程/企劃方向/架構/功能/風格
製作方式
「切身感」 具體的想像
商品情境
在商品介紹頁以實際使用的情境圖做為主要視覺，帶動使用者對於商品使用更好更 直接的感受與想像，讓商品使用的挑選是帶著滿滿的期待，而不是滿腦子困惑。
商品×實績
內部串聯
商品與實績的內頁規劃嵌入實績案例所使用的商品，透過連結可以直接導到商品 頁，而商品頁也可以設定實際實用的實績案例，透過連結到案例頁面可以引導使用 者觀看其他商品，讓商品的觀看與選擇具有引導性，不只是在眾多的商品中亂逛而 失去了選購的動力。
小細節 X 大關鍵
E-mail 通知信
針對客戶下訂之後的自動發出至客戶 email 與加入會員註冊通知、訂單確認通知、 出貨通知進行設計編排，讓整體視覺印象更完整！ 一般通知信
經視覺設計
E-mail 通知信
E-mail 通知信
基礎規劃
不可或缺的重要技術！
Web Font
以往在網頁裡只能選擇細明體、標楷體、微軟正黑體…這幾種每部電腦裡可能都有 的字型，要使用特殊的字型，通常必須將字另外轉成圖檔，這對於大量更新的使用 是不現實的（總不能每篇文章的標題都還要另外出圖…）
字距/行距/對齊/色彩
字體設定
雖然我們有很方便的內容編輯器，但還是會針對版面各個區塊的文字與圖片做好設 定，包含標題與內文段落字體設定的調校與設定、字與字間的字距、行與行間的行 距、段落對齊樣式、整體色彩配置…以讓網站在使用與逐步更新的同時，還能夠保 有一貫的閱讀舒適性與美感設計力求客戶在維護更新時，可以在最短的時間做到最 好的編排效果，
互動，更生動！
動態效果
設計搭配不同的動態效果，除了 Slider 自動播放外，也加入滑鼠偵測啟動圖片與文 字動態效果，增加網站的重點呈現與使用的互動體驗。
其實，我一直都在…
浮動選單
選單固定在最上側，不隨著頁面捲動而消失，在一頁式網頁瀏覽時，可以隨時作瀏 覽區域的切換，不用再回到最上層才能切換，小用心、更貼心！
全面響應！
響應式選單
選單會依裝置與瀏覽解析度不同自動調整成合適的模式，
[點選展開]
很清晰！有邏輯！
選單最佳化
選單的連結一致設定為跳至錨點，避免錨點與分頁混合使用造成使用方式紊亂。同 時也針對這樣的設定，在區塊與內容的規劃上，要讓每個區塊有一定配置符合的內 容量，讓使用者有更好的瀏覽體驗。
快捷 X 便利
雙層選單
選單可設置雙層結構，將比較功能性質的選單項目搭配 icon 的呈現方式，放置在獨 立的選單區塊，可將官方購物、試用索取…等功能放在方便點選的位置， 主選單：可以分頁、商品分類或特定連結…作為選單項目
功能性選單：通常做為搜尋、會員中心、收藏清單、購物車、語言切換…。
主選單
功能性選單
基礎版面規劃 I
首頁
首頁
2X 完整呈現的方式
一頁式的版面規劃，除了讓各個區塊有獨立展示的空間，透過版面配置與視覺系統 整合，讓網站整體的形象與內容完整呈現： 獨立區塊 每一個區塊單一主題，並以圖文並陳的方式呈現，除了視覺外，有足夠的空間搭配 說明、摘要，引起使用者更進一步了解的興趣。 兼具列表頁功能，完整陳列各個區塊的內容項目，除了一目瞭然外，也同時減少瀏 覽網站時過多層級的不便體驗。 一頁式網站 透過視覺與選單的錨點設定，整合所有獨立區塊，使用者可以快速掌握整個網站要 傳遞的訊息，並可以深入瞭解。 概觀
模擬
好簡單！好管理！
線上表單
線上表單可讓使用者快速且很容易傳達意見與想法，填寫後直接寄信到指定信箱。 後台也有列表方便管理。
基礎版面規劃 II
商品列表
活靈活現！
自訂樣式
商品列表的圖片可以自行設定一般、長直幅、大尺寸三種樣式，搭配運用除了可以 調整商品曝光的層次外，也讓版面更靈活。
照我的順序來！
自訂排序
商品排序可以讓使用者自訂依照：熱門程度、上架時間、價格(由低至高、由高至低) 自動排序來瀏覽，更方便、更容易接近自己想買的商品。
引導式購物
多重篩選
商品可依分類、品牌、產地、價格……等自訂項目來進行多重交叉篩選顯示，讓使 用者可以透過篩選功能，除了能夠更快找到自己想要的商品，同時可以了解網站內 商品的各種屬性，發掘自己感興趣的商品。
先看這裡！
浮動標示
可以在商品圖上顯示商品折扣或缺貨狀態，可以吸引使用者快速找到折扣商品或避 免使用者進入商品內頁後，要訂購才發先缺貨的情況。
基礎版面規劃 III
商品內頁
最佳展現方式
Slider
商品情境圖不採用一般 Slider 單張顯示的方式，而採用連續型的 Slider，主要考量 原廠提供的商品情境圖有直幅及橫幅的格式，各家設定的長寬比不盡相同，
看仔細囉！
款式選擇
款式的選擇承接情境圖 Slider 的呈現，以滿版的方式切換，除了細節可以呈現外， 更讓線上購物的選購體驗更接近真實。
當我又想起你…
切換商品
切換商品按鈕類似翻頁效果，可以直接切換同分類的上一個/下一個商品內頁，不用 再跳回目錄頁，使用上直覺便利。
即時互動 × 多重登入
商品問答
商品頁內嵌留言功能，並可以以使用者既有的 Google、Facebook 帳號直接登入 留言。
即時分享
社群分享按鈕
內嵌社群分享按鈕，閱讀的同時就可以分享到社群網站，讓好的內容更有傳播效 果。
付款方式
安全 X 便利
常見便利的付款方式皆可以串接使用，導向安全性較高的銀行系統付款，兼顧安全 性與便利性。 信用卡
3 步驟完成！
快速結帳
方便快速的結帳流程，結帳流程為：1.確認購買商品項目內容、數量、金額 2.填寫 資料、選擇付款方式並付款 3.完成結帳。
先買再說！
非會員⇋會員
整合註冊與結帳流程，簡化流程、節省時間！不必先註冊才能購物，方便使用、降 低消費門檻。結帳流程中在填寫資料的同時可選擇建立會員帳戶，之後購物便可以 登入帳號自動載入相關資料。在會員中心可針對個人資訊與訂單、下載商品進行管 理。
貼心的小功能
自訂帳單/送貨地址
可選擇帳單與商品分開寄送，節省使用者待貨與轉寄的時間。
視覺化編輯器
內容管理
使用視覺化編輯器，針對各種功能建立適合的編輯模式，並板塊的方式清楚劃分各 個區塊，內容編輯直覺便利。
部落格式文章管理後台
媒體管理
支援圖片 1/影片2/音訊 3/文件4等格式。在網站內容編輯時亦可直接由各個存 取媒體檔案的位置進入。
檔案上傳介面：拖曳檔案即可上傳！
1
支援上傳圖片格式 .jpg / .jpeg / .png / .gif
2
支援影片上傳格式 .mp4 /.m4v / .mov / .wmv / .avi / .mpg / .ogv / .3gp / .3g2，網頁內容編
輯另可支援 Youtube 及 Vimeo 影片內嵌。 3
支援上傳音訊格式 .mp3 / .m4a / .ogg / .wav
4
支援上傳文件格式 .pdf / .doc / .docx / .ppt / .pptx /.pps /.ppsx / .odt / .xls / .xlsx
基礎版面規劃 IV
案例列表
基礎版面規劃 V
案例內頁
基礎版面規劃 VI
設計師 列表
基礎版面規劃 VII
設計師 內頁
商店後台管理 商店設定
商店位置 銷售區域設定
全球 特定國家(可複選)
交易貨幣 貨幣數值顯示樣式 商品設定
標示單位
重量單位 長度單位
商品評分功能 商品顯示設定
指定商店頁面 商品分類顯示樣式 預設商品排序 自定商品圖與縮圖尺寸 商品圖檢視樣式
商品盤點
低庫存通知 缺貨通知 通知 email 設定 缺貨商品自動隱藏 庫存顯示樣式
稅額設定
基本設定
啟用/停用稅額計算 價格含稅/稅額外加設定 稅額自動四捨五入 顯示價格(含稅/不含稅) 結帳價格(含稅/不含稅)
稅額設定
地區 稅率
結帳設定
結帳
啟用/停用優惠券 啟用/停用非會員結帳
付款方式
ATM 虛擬帳號 信用卡
運費設定
宅配運送
運費計算方式
依訂單計算運費
依商品數量計算
運費設定 免運費
免運範圍 [全球/特定國家] 免運條件設定
國際配送
優惠券
滿額免運
最低訂購數量
免運範圍 [特定國家/排除特定國家]
運費計算方式
依訂單計算運費
依商品數量計算
運費設定 會員註冊設定
註冊頁面設定
結帳頁註冊 會員中心註冊 結帳頁登錄提醒
E-mail 發送設定
E-mail 發送類別
訂單成立 取消訂單 訂單處理狀態通知 發送收據 密碼重設 會員註冊
簡訊管理
行銷簡訊
自訂內容 快速選取會員 排程發送
訂單簡訊
選擇訂單狀態 自訂內容 自動加入訂單備註
商品管理
商品總表
商品圖 商品名稱 商品 SKU 庫存狀態 商品價格 商品分類 商品標籤 商品類型 上架日期
商品類型
SKU
單ㄧ規格商品
會員等級限定
/組合商品
商品定價
/外部商品
折扣價格
/多重規格商品
折扣期間 稅額設定 商品條碼 庫存設定 單獨出售 商品重量 商品尺寸 運送設定 自訂規格 連結商品
啟用/停用評論 商品圖 商品介紹 商品分類 商品標籤 進/銷貨與庫存管理
單一規格商品
庫存狀態檢視
/多重規格商品
庫存狀態色彩標示 進/銷貨數量設定 庫存數量設定 匯出報表
訂單管理
訂單列表
訂單狀態 訂單號碼 會員帳號 商品數量 運送地址 訂單日期 訂單金額 訂單備註 顧客留言
訂單分類檢視
處理中 暫緩出貨 已完成 已取消
訂單明細
訂單日期 訂單狀態 會員名稱 收據地址 運送地址 聯絡 E-mail 聯絡電話 商品明細 商品金額 運費計算 宅配單號 訂單備註
訂單處理狀態
新訂單 已取消 處理中 已完成 寄送收據
收款狀態
虛擬帳號自動對帳 信用卡自動對帳
檢貨管理
檢貨單列印
單一訂單 多張訂單
檢貨作業
訂單號碼掃描 檢貨商品掃描 非訂單商品警示
出貨管理
宅配出貨
出貨明細單列印 載入出貨資料 E-mail 出貨通知
退/換貨管理
基本設定
退/換貨時限設定 (7 天鑑賞期) 退/換貨原因設定
退/換貨清單
退換貨清單編號 日期 處理狀態
單筆退/換貨單
單一商品處理狀態 快速 e-mail 發送
報表管理
訂單報表
日期
銷售額
最近一年
日銷售額
上一個月
訂單數量
本月
商品數量
最近 7 天
運費
自訂日期區間
退款金額 優惠券使用金額 商品
單一商品搜尋顯示 商品銷售量 商品銷售額
商品分類
單一分類搜尋顯示
優惠券
優惠券使用額 優惠券使用量
客戶報表
會員購物/非會員購物 會員購物清單
銷售項目清單
訂單編號 訂單日期 商品名稱 商品 SKU 商品數量 訂單金額
會員等級報表
訂單數量 訂單金額
會員管理
會員註冊
會員中心註冊 社群登入 購物結帳同時註冊
會員資本資料
e-mail 地址 電話 密碼重設
會員等級/有效期限 年度消費累積金額 消費記錄 退/換貨期限
退/換貨申請
簡單好用而且功能完整！
商店管理後台
結合部落格式核心的後台管理系統，不管是商品上架、更新內容還或是訂單管理， 簡便的操作介面讓網站管理更便利、即時。
商店設定
商品管理
可自訂尺寸、顏色…等款式設定。
訂單管理
庫存管理
結帳管理
運送方式管理
促銷管理
訂單管理 1
訂單列表 4
3 2 1
1
訂單狀態
2
訂單資訊
3
訂單處理狀態及快速檢視
4
分類檢視
訂單管理 2
訂單明細
2
3
4 1
1
訂單內容
2
訂單處理狀態
3
訂單備註
4
宅配單號
報表管理 1
自定報表區間 報表分類
訂單報表
報表管理 2
會員報表
報表管理 3
可匯出 CSV
銷售報表
會員管理
會員中心
結帳 同時註冊
會員註冊
更瞭解網站使用者的過去 = 更瞭解自己的未來
GOOGLE 分析
網站內嵌 Google Analytics 有助於對網站使用者的認識與分析，除了網站流量、人 數之外，也針對使用者地區、城市、使用語言、裝置、年齡、性別、興趣、新訪 客、回訪率、平均網頁停留時間、跳出率、期間內網站瀏覽數據……等使用者資料 與瀏覽習慣，可以幫助行銷規劃與調整。
其他功能規劃
網站地圖設定
搜尋引擎最佳化基礎設定