ECOWORKEfficient, Economical IT Works

This document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

走進 APP 的世界蘇彥碩 Michael Su @ Ecowork Inc. com

Credit: 花のアンドロイド学園，週アスPLUS

1

ECOWORK

台上的是誰？

團隊簡介及主要服務

Credit: 蘋果君(アップルくん)，花のアンドロイド学園，週アスPLUS

2

ECOWORK

2005 年成立、資本額新台幣 1200 萬、員工人數 20 人、60% 開發＋20% 人機介面＋20% 產品規劃

友善介面 x 行動應用 x 數位資料⇓

最佳的體驗 ＋ 即時的溝通 ＋ 有效率的管理

益科股份有限公司

3

ECOWORK• 行動應用品牌經營、實用工具、數位內容

• 企業內部應用企業專用的 iOS 行動應用及企業版 AppStore

• 網路服務平台大型網路服務雲端平台：Amazon AWS、Google App Engine

• Findbook書籍搜尋引擎、商情資料庫、隨身行動工具

4

ECOWORKEfficient, Economical IT Works

工作機會：goo.gl/Jh9k9iOS、Android、Web 正職或暑期實習

5

ECOWORK

行動世界的戰爭

現實的消費者市場

Credit: H.T.希小姐(H･T･シーちゃん)，花のアンドロイド学園，週アスPLUS

6

ECOWORKEfficient, Economical IT Works

蘋果 vs 安桌椅？芒果和黑莓在哪呢？

7

ECOWORKEfficient, Economical IT Works

美國 2011 年 Q3 智慧手機市占率nielson.com

Credit: http://blog.nielsen.com/nielsenwire/?p=30235

8

ECOWORKEfficient, Economical IT Works

美國 2011 年 Q3 智慧手機季成長率comScore MobiLens

Credit: http://www.comscore.com/Press_Events/Press_Releases/2011/12/comScore_Reports_November_2011_U.S._Mobile_Subscriber_Market_Share

9

ECOWORKEfficient, Economical IT Works

資訊的世界變動很快～AAPL 近 10 年的股價Credit: http://www.google.com/finance?q=NASDAQ%3AAAPL

10

ECOWORKEfficient, Economical IT Works

The IT World never Sleeps而且變動非常快速

Credit: Mauna Loa Volcano，冒納羅亞火山，夏威宜11

ECOWORK

我們參與過的戰役

Ecowork 做過的應用

Credit: 三.星小姐(サム･スンちゃん)，花のアンドロイド学園，週アスPLUS

12

ECOWORKEfficient, Economical IT Works

品牌經營對於品牌的服務、形象、工具等需求～

Credit: http://tw.123rf.com/photo_7371465_brand-word-collage-on-black-background-vector-illustration.html

13

ECOWORK

統⼀一超商7-ELEVEN + 卡路里日記簿

7-ELEVEN品牌形象及行銷應用2010Q4 上線、免費軟體Mango 版本今年第⼀一季上線行銷整合、地圖簽到、條碼整合

卡路里日記簿

輕食類商品行銷應用2011Q2 上線、免費軟體行銷整合、雲端平台、條碼整合

配合每年度各類活動、輕食類商品及各行銷伙伴的行銷計畫，提供共同整合行銷的行動應用平台

2012 Q1

14

ECOWORK

玉山銀行GoodCalendar + 網路銀行

GoodCalendar 好讚行事曆實用工具、品牌形象、客戶服務行事曆整合、影音記錄、行銷整合2011Q3 上線、免費軟體由玉山銀行自行發行Android 版將於今年上線

網路銀行

Android 版將於今年上線

配合主要市場的社會文化提供實用的工具，除了提升品牌形象外，也可以提供更多的服務給自己的客戶

20122012

15

ECOWORKEfficient, Economical IT Works

行動購物可以在手機上面直接下單購物～

Credit: http://jewel-staite.net/online-shopping-carts-%E2%80%93-preventing-customer-frustration-online.html

16

ECOWORK

博客來博客來快找

博客來快找

條碼掃描、購物車、資料整合2011Q4 v2.00 版上線、免費軟體由博客來自行發行

2.00 版由 Ecowork 重新改寫，整合⼀一維條碼的掃描功能、全域購物車，並和博客來的資料庫整合，提供使用者購物清單、線上直接購買的功能

17

ECOWORK

翻書客 FindbookFindbook Scanner 隨身書籍搜尋比價

Findbook Scanner益科 Findbook 翻書客書籍搜尋服務 雲端搜尋引擎、條碼整合2010Q3 iOS、2011Q3 Android 上線

使用者可以透過手機直接掃瞄書籍背後的商品條碼，即可馬上搜尋該本書籍的相關商品銷售情報、圖書館借閱情報，亦可直接連線進行線上購買

18

ECOWORKEfficient, Economical IT Works

企業應用企業內部應用行動化，讓員工在外也可以處理公事～

Credit: http://flickr.com/photos/wysz/167342533/

19

ECOWORK

永慶房屋 FindbookFindbook Scanner 隨身書籍搜尋比價

企業應用商店

待售物件地圖

常用試算工具

群組行事曆

文件管理

客戶關係管理

利用 iPad 高度安全性，讓外務型員工可以隨時隨地與公司連結，有效率的處理公事

20

ECOWORKEfficient, Economical IT Works

數位內容除了單純的電子數、影片外的使用方式～

Credit: http://olesturm.com/media-wall/

21

ECOWORK

公共電視Natural Formosa 福爾摩沙的指環

高畫質影音

使用者可以透過 iPad 欣賞高畫質的影片、照片、多國語言的旁白，也可以自己擔任製片，剪接重組不同的內容變成新的⼀一段內容

22

ECOWORK

城邦 貓頭鷹出版社自然科學圖鑑集（鳥類、昆蟲、寶石）

科學圖鑑的數位化

應用

重製現有的數位化內容，鳥類圖鑑提供本地端搜尋引擎功能，可模糊搜尋 ， 共 包 含 了1000+隻不同的鳥種；昆蟲及寶石圖鑑引用了標本收藏盒的概念，讓使用者可以延伸現實生活中的體驗，也使用姿態感測器提供陰影的效果

23

ECOWORK

有個好點子然後？

行動應用的原點、起步

Credit: 摩特.蘿拉小姐(モト･ローラちゃん)，花のアンドロイド学園，週アスPLUS

24

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

需求是什麼？行動裝置可以做到的事...

Credit: http://www.wantchinatimes.com/news-subclass-cnt.aspx?cid=1303&MainCatID=13&id=20110113000113

25

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

技術不是重點！除非是專業的技術性需求 ...

Credit: http://blog.oxagile.com/2010/05/21/android-has-defeated-apple-in-the-fight-for-the-u-s-market/

26

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

注意「需求」和「解法」...

Credit: http://newkingdomsayshi.com/2008/12/28/go-broke-with-a-cassette-ipod/

27

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

可以「隨時中斷」、「不花力氣」...

Credit: http://www.londoncyclist.co.uk/cycling-accessories/iphone-bike-mount/

28

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

減少「認知負擔」、「嘗試時間」...

Credit: http://www.flickr.com/photos/40852554@N00/472111992

29

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

設計並實地體驗「使用者情境」

Credit: https://squareup.com/

30

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

畫出幾個「心裡想看的介面」

Credit: http://www.outsightinteractive.com/blog/outsights_award_winning_phizzpop_design_process

31

ECOWORK

特別的材料

行動裝置上好用的功能

Credit: 索妮.愛理小姐(ソニ･エリちゃん)，花のアンドロイド学園，週アスPLUS

32

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

位置 GeoLocation、GeoFence

33

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

體感 陀螺儀、電子羅盤、加速規

34

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

聲音 產生、發出、接收、記錄聲音

35

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

影像 拍照、攝影、即時處理

36

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

網路 資料連結、推播通知

37

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

觸控 多點觸控、多到同時追蹤 11 隻指頭

Credit: http://www.outsightinteractive.com/blog/outsights_award_winning_phizzpop_design_process

38

ECOWORK

全新的觸感不同的介面

觸控的介面超難設計

Credit: 艾爾.G小姐(エル･Gちゃん)，花のアンドロイド学園，週アスPLUS

39

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

有好好設計嗎？

40

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

螢幕尺寸和人之間的關係

★ 和使用者互動的介面• Home Button

• 螢幕★ 手指頭點擊螢幕• 最適合的大小是 44pt x 44pt

• 大約是 6.86mm x 6.86mm

Portrait Landscape

iPad *

iPhone 4

Others

768x1024 1024x768

640x960 960x640

320x480 480x320

41

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

單點觸控手勢

★ Touch

★ Tap

★ Swipe/Flickr

★ Drag

42

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

多點觸控手勢

★ Scroll

★ Zoom/Pinch

★ Rotate

★ Special

43

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

是這樣嗎？

http://www.codinghorror.com/blog/2006/02/sometimes-a-word-is-worth-a-thousand-icons.html

44

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

Keynote on Mac OS X

45

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

Keynote on iPad ?

46

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

「操作」而不是「控制」...

http://www.wired.com/gadgetlab/2008/12/microsoft-surfa/

47

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

基本原則：⼀一致性★ ⼀一致性• 與內建 App ⼀一致的操作流程• 同⼀一個 App 內保持⼀一致• 改版前後保持⼀一致

★ 直接操作• 可以用 Pinch 就不要用 Button

• 可以用 Rotate 就不要用 Button

• 99% 會使用常用選項就不要提供自訂參數

48

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

基本原則：Metaphor 隱喻

★ 與真實物品結合• 行事曆• 記事本• 郵件

★ 與生活經驗連結• Switch

• Picker

• 照片翻頁

49

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

Keynote for iPad!

50

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

將畫面拆解開

http://inspirationfeed.com/2011/02/25-examples-of-wireframes-and-mockups-sketches/

51

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

拆開成不同的卡片

52

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

在不同的步驟間調整

53

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

方便的工具

54

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

可以實體模擬的方法

55

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

確定的基本流程後，再開始繪製成電子稿

56

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

各作業系統都有做好可以直接用的元件

57

ECOWORK

你可以伴演哪些角色

分工職掌

Credit: 夏普小姐(シャープちゃん)，花のアンドロイド学園，週アスPLUS

58

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

真的要細分的話...

• 操作概念：每⼀一個人都要有• 介面設計：平面、廣告、工設、心理• 前端程式：動畫、操作、操作流程• 後端程式：資料庫、主機、API

• 進度控管：時間還是很重要的！• 非直接的工作：影片、聲音、法務、財務

59

ECOWORK

法律和隱私

台灣團隊最常遇到也常常無法理解的部份

Credit: 富士通(Tohru)小姐(富士 通（とおる）ちゃん)，花のアンドロイド学園，週アスPLUS

60

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

你有可能被下架的原因...

• 未加密傳送使用者的隱私資料• 位置、電話、聯絡人、朋友

• 未告知使用者就取用任何隱私資料• 簡訊、使用記錄、位置通通都包括

• 直接使用其它大廠的品牌、名稱、圖檔等• 侵權了！後果可能會很大• 或是該放而沒有放上去

• 辦抽獎或贈品活動沒有加上 Apple 的免責條款

61

ECOWORK

後記

雜七雜八

Credit: 樫尾N子(樫尾エヌ子ちゃん, NEC Casio Mobile)，花のアンドロイド学園，週アスPLUS

62

ECOWORK

iOS 專案建議流程（前段）

訪談 提案建議 規格會議 規格書報價單合約

簽約 Kick-Off

New Idea

調整修正 調整修正

1~6 weeks

63

ECOWORK

iOS 專案建議流程（後段）

Kick-Off

開發

0.9 Beta 測試

AppStore 審核通過

1.0 Release 測試

開發

正式上市4~7 weeks 2~3 weeks

1~2 weeks

AppStore 審核通過

1~2 weeks

64

ECOWORKThis document is confidential and is intended solely for the use and information of the membership to whom it is addressed. 

各類應用運作方式評估參考行動網站應用 手機原生程式

安裝方式

顯示操作反應

支援功能

程式語言

總合評估

適用情境

簡易只需打開瀏覽器，並連線到特定網址

過程較長開啟網頁或特定的手機程式下載並安裝

較慢需透過網頁瀏覽器執行 Javascript，速度會因被 JS Engine 拖慢

較快使用各手機作業系統的原生應用程式語言撰寫，可以直接連結顯示及操作功能

較少僅限於 HTML5 及 JS Engine 可以 支援的功能，無法存區如像機等特殊功能

完整可以存取所有手機作業系統開放的功能

Javascript、HTML5、CSS3 iOS 為 Objective C、Android 為 Java

開發門檻低、需在多種的硬體上面測試；操作體驗較差、大都需要連線才能使用、安

全性較低開發門檻稍高、應用佈署較花資源；操作反應快、離線亦可使用、安全性較佳

適合有穩定連線、既有網站系統 適合不穩定行動網路、高安全性、快速操作反應、需要連結相機等特殊功能的應用

65

線上瀏覽本文件：http://www.slideshare.net/ecowork/

Ecowork 工作機會：goo.gl/Jh9k9iOS、Android、Web 正職或暑期實習

66