互動媒體專案研究 OWNDAYS
http://www.miyahara.com.tw
The frames of your life https://issuu.com/flutterinc/docs/flutter_lookbook.ship5.final
13108206 林雨萱
13108263 林欣穎
MEGANATOR
12109135 周聖芳
Specsavers
13108204 李冠毅
https://tuqulore-web.heteml.jp/meganator/#/
https://itunes.apple.com/gb/app/specsavers/id953533161?mt=8
OWNDAYS
13108206 林雨萱
https://www.owndays.com/tw/zh_tw/
企劃概念分析
- Concept -
FxLxHxE
開發團體 / 設計公司背景
專案的創意點 / 概念是什麼
使用者 / 目標對象是誰
在 2008 年，田中修治（現任代表董事）以
1. 產品本身理念
1. 喜歡 OWNDAYS 本身產品或是服務的人。
個人第三者身份分配增資，取得因巨額債務
在 OWNDAYS 門市內所擺設的眼鏡 OWNDAYS 親
「或許我們無法改變世界，也或許我們拯救
2. 對 OWNDAYS 理念有認同感，或是想支持
手企劃、設計、製作的獨創品牌。
不了所有的人。但是，不立即行動，就不會
他們的消費者。
幅度的結構改革，開啟企業的再生。
另外，從物流到販賣等銷售相關必要流程全
有任何改善。？」─── OWNDAYS 官網
2009 年開始開設第一家門市。
由 OWNDAYS 本身獨力完成。
而走向破產邊緣 OWNDAYS 的經營權，進行大
如何廣告 / 行銷 / 宣傳
總結：
2010-2012 年，開始官方贊助廠商身份參加 活動，打響知名度。
眼鏡鏡框：
除了以上概念之外，其他還有許多服務，或
在良好的口碑和品質下，OWNDAYS 可以透過
2011 年 3 月 11 日，發生日本大地震，在日
OWNDAYS 眼鏡鏡框本身擁有多樣符合各年齡
許在其他家的眼鏡店也有相同的服務，不過
網路評價和口耳相傳。
本震災的混亂中，OWNDAYS 將志同道合的工
層與性別的多數品牌。各品牌皆具有其特徵
在 OWNDAYS 網頁中，OWNDAYS 給人的感覺像
在過去 OWNDAYS 有官方贊助廠商身份進行宣
作人員聚集一起，至災區進行眼鏡發送支援
及理念。
是以人為本的企業概念，在良好的理念和服
傳。不過在近期開始有了公益活動，有增加
活動。這並非 OWNDAYS 強制參加的活動，而
眼鏡鏡片：
務品質，我會試著在 OWNDAYS 消費，
企業本身的正面印象。
是 OWNDAYS 的工作人員自主提起所成為的
OWNDAYS 廢止了容易產生混亂的薄型非球面
OWNDAYS 活動。
鏡片追加費用部分，並提供無論任何度數不
因 為 這 個 契 機， 那 天 之 後 過 了 幾 年，
需追加費用便可擁有適合自己的薄型非球面
OWNDAYS 有了新的企劃活動，開始了相關的
鏡片服務。
公益活動。 2. 在 2011 年日本大地震，OWNDAYS 增加了 開始在 2015 年，以支援開發中國家的公益
一些理念和想法。
身份於印度泰米爾納德邦開始免費驗光眼鏡
在 2015 年開始，OWNDAYS 開始與其他國家
發送活動。
的營運團體合作，將 OWNDAYS 商品銷售數量 一部分幫助於當地支援活動。 以守護視力不足卻無法配製眼鏡的孩童們健 康為目的，定期舉辦「OWNDAYS Eye Camp」 活動。
OWNDAYS
https://www.owndays.com/tw/zh_tw/
介面設計分析
- UI Design -
FxLxHxE
專案介面的字型運用分析
介面按鈕 / 圖示的設計分析
選單文字主要使用黑體，簡單明瞭。
●主要選單固定在上方，不會移動。 ●當滑鼠滑入選單文字的時候，選單文字色 彩明度增加。
專案介面的版面設計分析
●網頁橫條在滑鼠滑入後會出現箭頭形的介
在一開始進入首頁，畫面上就將自身產品的
面按鈕。
特點規劃，讓觀看者可以很清楚 OWNDAYS 的 特色和產品特點。
專案介面的配色系統分析 主要是使用白色調，給人感覺乾淨、舒服，
●畫面當下網頁橫條在下方按鈕會出現紅色
觀看者可以很清楚的看到自己想要的資訊。
圓圈。
OWNDAYS
https://www.owndays.com/tw/zh_tw/
互動技術分析 ●整體網頁架構分析圖
SYSTEM
GLASSES SUNGLASSES
- Interaction 關於售價
關於鏡片
鏡片更換服務
商品保固、常見問題
企業歷史
門市人員
OWNDAYS 首頁
商品目錄 PUERTA SOL
AIR FIT Graph Belle marcus raw
CSR
SHOPS
品質的堅持
商品目錄
EYEWEAR BRAND
FxLxHxE
Roen
AIR Ultem
AIRFor MEN
Made with
ECO2XY
Zoo
John Dillinger K.moriyama
OWNDAYS PC BUTTERFLY EFFECT 千一作
Junni
Amber
Based
FUWA CELLU
OWNDAYS Silm
活動企劃 忠孝敦化店
西門店
微風台北車站店
京站店
台北忠孝 SOGO 店
微風廣場店
微風松高店
ATT 4 FUN 店
林口店
新竹巨城店
漢神巨蛋店
台中廣三 SOGO 店
勤美誠品店 OWNDAYS 日本
台南小西門店 OWNDAYS 新加坡
OWNDAYS 澳洲
OWNDAYS 泰國
OWNDAYS 菲律賓 OWNDAYS 馬來西亞
OWNDAYS 柬埔寨
RECRUIT
RECRUIT 聯絡我們
OWNDAYS
https://www.owndays.com/tw/zh_tw/
互動技術分析
- Interaction -
FxLxHxE
軟體技術
硬體技術
網頁本身設計的乾淨俐落，訊息明確，此外
電腦和平板都可以觀看，手機介面也有設計
在畫面右下角，有線上客服，在服務期間可
過，與電腦介面有所不同，所使用的是適合
以隨時傳你的疑問或是訊息給客服人員。
手機本身的介面。
●手機介面
OWNDAYS
https://www.owndays.com/tw/zh_tw/
The frames of your life
13108263 林欣穎
https://www.facebook.com/OrangeFish.delicacy/?fref=ts
企劃概念分析
- Concept -
FxLxHxE
開發團體 / 設計公司之背景 專案的創意點 / 概念是什麼？
使用者 / 目標對象是誰？
如何廣告 / 行銷 / 宣傳？
一般網頁的設計較少考量到老花族群的使
年齡 40 歲以上，且依舊想讓自己看起來優
Facebook 粉絲專頁、網頁宣傳
用，而在此案例中，網站內的圖像、文字、
雅美麗的中、熟齡女性。
創辦人 Patti Lee-Hoffmann 和 Gayle Haworth 在他們年約 50 時發現，在他們人 生中最美好的時刻，竟然不適合使用世界上 最棒的發明，多數眼鏡的設計似乎不太符合 他們這個年齡層的女性形象。 老花眼鏡在過去也許是被視為較「卑微」 的需求，與「好看」無法做連結，而 Patti
購物流程的設計都相當清晰、簡單，以便熟 齡女性優雅的閱讀與購物。
Lee-Hoffmann 和 Gayle Haworth 改變了這 個想法：女人在有老花的年紀也可以依舊美 麗！
Flutter Eyewear—http://fluttereyewear.com/
介面設計分析
- UI Design -
FxLxHxE
專案介面的字型運用分析 ( 電子書 )
電子書頁面，三種訊息以大小、顏色粗細做區分，簡單明白。
◆標題以醒目大小的斜體襯線字呈現，帶有
( 於網頁的 LooK Book 選項可連結型錄電子書，型錄內亦有連結可連往商品 )
隨興、自信而優雅的氛圍。 ◆標題下的小紅字則是次要標題—商品名 稱，以紅色無襯線粗體字表現。( 點入即可 進入商品介紹網頁 ) ◆最下方的小字是產品理念和簡介，全大寫 的黑體字，字級同次標題。
Flutter Eyewear—http://fluttereyewear.com/
介面設計分析
- UI Design -
FxLxHxE
專案介面的字型運用分析 ( 網頁 )
◆帳戶選單以小而細的字體表示，且使用全大寫，與網頁內文區隔。
◆購物指南使用全大寫的細字體，且大小清晰，易於選擇。
◆細項皆使用黑體，僅以大小與少量顏色作區隔，統一性高。
網站頁面，選單分為最上方帳戶選單、中央購物指南選單、以及頁面中的細項選單。
Flutter Eyewear—http://fluttereyewear.com/
介面設計分析
- UI Design -
FxLxHxE
專案介面的配色系統分析 ( 網頁 )
◆主色：網頁內有大量商品、圖片，加上要達到最佳辨識度以提供熟齡女性良好的閱讀感 受，因此底色使用了最簡潔明亮的白色。( 背景則是白色底鋪滿淺灰的品牌 LOGO，相當可 愛。) ◆輔色：無彩度的深灰色不像黑色那麼剛硬，且帶有知性沉穩的氛圍，作為訊息間的區隔 十分合適 ◆點綴色：紅色是 Flutter 品牌的靈魂，帶有強烈的女性氣息且亮眼。
Flutter Eyewear—http://fluttereyewear.com/
互動技術分析
- Interaction -
FxLxHxE
軟體技術 此網站屬型錄購物網站，除了清楚介紹商品 的圖與文字外，沒有額外的特效、動畫或音 樂。 Flutter 網站架構圖
硬體技術 Home 首頁
電腦、手機、平板皆可觀看。
My Account 帳戶 Sign in 登入
Shop 商店 Readers 老花眼鏡
Wish List 慾望清單
Sun Readers 老花太陽眼鏡
Shopping Cart 購物車
Sunglasses 太陽眼鏡
Service 服務 FAQs 問與答 About Us 關於我們 Sitemap 網站導覽
Accessories 配件 Necklaces 項鍊 Gift Certificates 禮券 Look Book 型錄
Flutter Eyewear—http://fluttereyewear.com/
MEGANATOR
12109135 周聖芳
https://tuqulore-web.heteml.jp/meganator/#/
企劃概念分析
- Concept -
FxLxHxE
meganator 企劃分析 Q1 開發團體 / 設計公司背景 ?
Q4 如何廣告 / 行銷 / 宣傳？
株式会社ツクロア（本社：東京都新宿區、
新聞稿、推特等等口耳相傳，依據目前查的
代表取締役 Managing director：秋葉秀樹）
資料來看並沒有特別進行大規模宣傳，僅僅
tuqulore 是つくる ( 創造、做 ) ＋ lore ( 傳
只是告訴大家我們公司開發了這個喔！請各
承、學問、知識 ) 的造語。
位廠商考慮我們的服務這樣，這個還會繼續
創立於 2013 年 ( 平成 25 年 ) 4 月 1 日。
和眼鏡代理商談，網站也有針對業界的說
業務範圍以企劃互動式網頁、手機 app 和
明。
介面為主，設計公司網站中也有很多具實驗 性的設計作品。 此次介紹的是由這個公司開發出來的試戴眼 鏡的網頁。 Q2 專案的創意點 / 概念是什麼 ? 戴眼鏡的人都是近視眼居多，近視眼在店面 中試戴沒有度數的眼鏡，根本就看不清楚自 己戴上眼鏡是什麼樣子，甚至不同度數的鏡 片也會影響眼睛看起來的大小，透過這樣的 互動性網頁，就可以幫助近視的人能在比較 清楚的狀況下看到自己戴上新眼鏡的樣子。 Q3 使用者 / 目標對象是誰 ? 近視眼想買眼鏡的人、賣眼鏡的人
麥當勞鬧鐘 http://campaign.mcdonalds.com.tw/
介面設計分析
- UI Design -
FxLxHxE
meganator 介面分析
Q1 專案介面的字型運用分析 簡潔的黑體 Q2 介面按鈕 / 圖示的設計分析 近視度數可以用拉的，底下搭配指標，很好 用，不用一直按按紐， 拍完照時可以調整 眼鏡的角度。 Q3 專案介面的配色系統分析 灰、藍等簡單的顏色為主，拉霸選項顏色會 變深。 Q4 專案介面的版面設計分析 近視度數深淺可以調，可以看出眼睛因為鏡片折射大小改變，在意眼睛大小的眼鏡族一定喜歡。
整體簡單大方、明亮，排版明確。
麥當勞鬧鐘 http://campaign.mcdonalds.com.tw/
FxLxHxE
調整好之後可以拍照保存、分享，也能藉此作為網頁本身的宣傳。
麥當勞鬧鐘 http://campaign.mcdonalds.com.tw/
互動技術分析
- Interaction -
FxLxHxE
meganator 互動技術分析 Q1 軟體技術
首頁
顏の輪郭抽出技術「clmtrackr」を導入し、目の位 置を指定しなくてもメガネが自動的にフィットす るように手順を変更しました。
分享 推特
顏面輪廓擷取技術 clmtrackr，不需要像一般 app 那樣自己對眼睛的位置，也可以自動讓眼鏡位置跟 臉型剛剛好。
G+
試著開始 facebook
更新情報
眼寬數值
拍攝照片
重新整理
確定攝影
方向調整
重新拍攝 眼鏡試戴
Q2 硬體技術 作業環境為 google chorme 最新版，需要自攝鏡頭， mac os 10.10 和 win8 以上。
麥當勞鬧鐘 http://campaign.mcdonalds.com.tw/
Specsavers
13108204 李冠毅
https://itunes.apple.com/gb/app/specsavers/id953533161?mt=8
企劃概念分析
- Concept -
FxLxHxE
Specsavers app 歷史分析
專案的創意點 / 概念是什麼
使用者 / 目標對象是誰 ?
如何廣告/行銷/宣傳?
Specsavers 是英國最大的眼鏡連鎖店，其
超過 1000 架 - 英國最廣泛的選擇
大眾對於配眼鏡有需求的人，愛美的
針對沒有時間或懶得人，可以快速自
人。
拍建模，加以款式比對挑選喜好然後
喜歡 Specsavers 品牌服務者
離自己最近的連鎖店取貨，運用 app
在全球有 2700 家店面，眼鏡設計樣式種類 繁多。
可以快速找到那些最適合你的眼鏡 - 產品
開發團體由 UNIPRO 有限公司提供對於消費
種類多元至少有 1000 眼鏡目錄是英國最廣
為客戶挑選款式和社群網站加以行
者更好的服務
泛的選擇。 他們一直在採購最新的材料和
銷。
以下來自世界各地的時尚為您帶來無與倫比 的選擇 - 最新流行款式，設計師品牌，材 料，顏色和形狀的框架而快速幫助客人挑選 適合的眼鏡，還可以快速收尋離自己最近的 店。
宮原眼科 http://www.miyahara.com.tw
http://www.specsavers.co.uk/
介面設計分析
- UI Design -
FxLxHxE
Q1 專案介面的字型運用分析
標題以及內文使用的都是端正簡潔的黑體，簡單明確。 文字按鈕 : 最上排為每個介紹的分類按鈕 , 以游標移過變色能清楚顯示。 標題和內文的差別也單純使用字體粗細以及字級大小來區分
宮原眼科 http://www.miyahara.com.tw http://www.specsavers.co.uk/
介面設計分析 FxLxHxE
Q2 按鈕圖示設計運用分析
Q3 按鈕圖示設計運用分析
按鍵點選會呈現灰色，他是一個個步驟走，主要像是商店配眼一樣
主要以企業綠色為主色調 ，背景則多以灰或白為主襯托文字簡易 明暸。
宮原眼科 http://www.miyahara.com.tw http://www.specsavers.co.uk/
介面設計分析 FxLxHxE
Q4 介面運用設計分析
簡單明暸的編排，很簡單的按照步驟走不會很難使用。
宮原眼科 http://www.miyahara.com.tw http://www.specsavers.co.uk/
互動技術分析
- Interaction -
FxLxHxE
軟體技術 此網頁不管電腦或手機都能讓操作者清楚明瞭本產 品特色而且相當滑順，而且可以很方便讓消費者配 選眼鏡和售價。
Q2 硬體技術 電腦方面也有專屬網頁和粉絲團網頁架構成熟。
宮原眼科 http://www.miyahara.com.tw
http://www.specsavers.co.uk/
使用情境模擬 老花眼鏡 APP
13108206 林雨萱 / UI 介面設計 13108263 林欣穎 / ICON 設計、文案發想 12109135 周聖芳 / 資料搜索整理、動態設計 13108204 李冠毅 / LOGO、企劃文案統整
專案企劃
對象：老花 / 40 以上 / 男女不拘 “你老花了嗎？＂為一個行動裝置 APP。在一開始進入手機畫面，有 會有老花的檢測量表，可以檢測你 是否老花。他是會提醒使用者持續 驗光。 在進去之後有眼睛保健區跟眼鏡品 牌區 ( 含眼鏡知識區 ) 等等相關頁 面。
Logo/ 標準字設計
設計理念：
主要以眼花的效果直接呈現主視 覺，皺紋線條來點綴年紀。 標準字：
使用華康中明體，主要『花』 單一字做老花的效果。
按鈕 / 圖示設計
LOGO 大小、字體比例、 顏色可依畫面需求做調整，ICON 可依畫面需 求斟酌採用、修改 ( 或直接以文字代替 )
介面 / 資訊設計
往下滑
聯絡我們 Contact us
介面 / 資訊設計
介面 / 資訊設計
介面 / 資訊設計