pun app windows 8-windows phone 開發技巧_ (1)
TRANSCRIPT
![Page 2: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/2.jpg)
Windows 8 與Windows Phone 兄弟
![Page 3: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/3.jpg)
我們有做錯對的事,也有做對的事
![Page 4: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/4.jpg)
隨著融合了扁平化設計美學的 Windows8 以及新版 Google 的推出,以及其他人氣網站紛紛採用這種扁平化的主題設計,這種扁平化的趨勢將很有可能受到更多青睞。
資料來源: Inside 硬塞的網路趨勢觀察http://www.inside.com.tw/2013/03/25/flat-design
![Page 5: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/5.jpg)
扁平化設計正在成為一種時尚。上至做系統的大公司,下至做軟體的開發者,都不約而同捲入了這股潮流中,微軟的 Metro 風格,iOS 上的 LetterPress,都讓人印象深刻。設計師們似乎急於把擬物化拋進垃圾堆,迎接扁平化時代的到來。據說蘋果公司的 iOS7 也要走向扁平化。我們似乎真的要邁入「勇敢新世界」了。
資料來源: Inside 硬塞的網路趨勢觀察http://www.inside.com.tw/2013/03/25/flat-design
![Page 6: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/6.jpg)
![Page 7: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/7.jpg)
微軟提供免費的專業UX課程
![Page 8: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/8.jpg)
如何規劃Window 8 & Windows Phone App
![Page 9: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/9.jpg)
基礎
![Page 10: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/10.jpg)
bauhaus
http://en.wikipedia.org/wiki/Anni_Albers http://en.wikipedia.org/wiki/Wassily_Chair
![Page 11: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/11.jpg)
transportation graphics
![Page 12: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/12.jpg)
transportation graphics + ITS
![Page 13: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/13.jpg)
大 中 小
![Page 14: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/14.jpg)
![Page 15: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/15.jpg)
Android 測試環境
Devices Fragment
資料來源: TechCrunch http://techcrunch.com/2012/05/11/this-is-what-developing-for-android-looks-like/
![Page 16: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/16.jpg)
你有你更想做的事跟更該做的事
AndersonPolydice2013/5/18
![Page 17: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/17.jpg)
![Page 18: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/18.jpg)
Contoso Finance
Dow Jones12,831.58+48.7
FTSE 10014,442.01+55.7
NASDAQ10,113.44-78.3
S&P 5009,132.22+16.6
Have you tried our new account?Click here!
Markets
Contoso announces big profits
Woodgrovebank considering offering…
Double dip recession on the cards
What’s new on Wall St?
News
![Page 19: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/19.jpg)
講重點
![Page 20: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/20.jpg)
內容優先 簡
化
整齊
![Page 21: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/21.jpg)
內容優先 簡
化
整齊
![Page 22: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/22.jpg)
Grid, Grid, Grid
![Page 23: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/23.jpg)
page structure
status bar
application space
application bar
application bar menu
![Page 24: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/24.jpg)
grid
grid system
![Page 25: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/25.jpg)
Working with the Grid
![Page 26: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/26.jpg)
![Page 27: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/27.jpg)
內容優先 簡
化
整齊
![Page 28: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/28.jpg)
愛用 Wireframe
![Page 29: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/29.jpg)
Simplify the Navigation
![Page 30: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/30.jpg)
Exploit Windows 8 features
![Page 31: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/31.jpg)
Exploit Windows 8 features
![Page 32: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/32.jpg)
內容優先 簡
化
整齊
![Page 33: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/33.jpg)
user + purpose + requirements
![Page 34: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/34.jpg)
contoso food truck application
![Page 35: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/35.jpg)
35
![Page 36: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/36.jpg)
![Page 37: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/37.jpg)
以觸控優先, 同時完整的支援滑鼠鍵盤
![Page 38: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/38.jpg)
UI設計範例 – iOS (Android ?)
![Page 39: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/39.jpg)
UI設計範例 – Windows Phone
首頁採用Panorama 或Pivot
資料要向左對齊, 留白24PX
視覺物件不要有3D, 漸層, 陰影, 透視效果不要有框線, 表格, 圓角
Application Bar 外, 畫面上不要有其他功能Button (可以有Link)
所有可按的Link 要實作Tilt效果
背景圖要跟App主題有關(沉浸式體驗)
![Page 40: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/40.jpg)
善用工具
![Page 41: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/41.jpg)
![Page 42: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/42.jpg)
Windows Phone Power Tools
![Page 43: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/43.jpg)
Alignment Grid Overlay
![Page 44: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/44.jpg)
善用 Microsoft People
![Page 45: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/45.jpg)
支援窗口 開發工具
技術協助 App 宣傳推廣Nokia & MS
![Page 46: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/46.jpg)
善用 Microsoft Resource
• 市集行銷推廣協助• 教育訓練&開發書籍• 開發手機借用• Windows Phone 市集開發者帳號及開發工具包申請(Sponsor by Nokia)– 在2013/6/20前寄到[email protected], 註明 “Windows
Phone 市集開發者帳號及開發工具包申請”– 提供想開發的App 名稱及功能描述, 根據App 特性提供贊助– 有機會得到一台全新Lumia 920 手機
![Page 47: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/47.jpg)
Apps 開發者聯盟徵召令
• 參加資格– 你有在iOS或Android平台上非常好的app,想在Win8上開發– 或是你有超棒的想法,想在Win8上開發
• 參加方式– 把你的想法(或作品)說明在2013/6/10前寄到[email protected]– 審核通過的 App 即可以獲得一套Windows 8專業版軟體產品金鑰一
組(升級版),建議零售價NT$6,999。
• 活動時間:即日起~2013/6/10止
![Page 48: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/48.jpg)
Q&A
![Page 49: Pun app windows 8-windows phone 開發技巧_ (1)](https://reader034.vdocuments.pub/reader034/viewer/2022042700/5560fa8cd8b42aff3f8b4d9b/html5/thumbnails/49.jpg)
線上技術資源
• Channel 9 Taiwan – http://channel9.msdn.com/Blogs/Channel9Taiwan
• Windows Phone 8 開發快速上手指南– http://msdn.microsoft.com/zh-tw/jj973042
• Windows Phone 8 應用程式實作手冊– http://msdn.microsoft.com/zh-tw/jj943797
• Windows Phone Dev Center– http://dev.windowsphone.com
• Windows Store App Dev Center– http://msdn.microsoft.com/en-US/windows/apps/
• 官方技術論壇– http://social.msdn.microsoft.com/forums/zh-TW/categories/