1. Windows 8 Store App 與 Windows
Phone App 規劃設計技巧
Herman Wu ( E-Mail: hermanwu@Microsoft.com )
台灣微軟

2. Windows 8 與Windows Phone 兄弟

3. 我們有做錯對的事,
也有做對的事

4. 隨著融合了扁平化設計美學的 Windows8 以及新版 Google 的推
出，以及其他人氣網站紛紛採用這種扁平化的主題設計，這種扁
平化的趨勢將很有可能受到更多青睞。
資料來源: Inside 硬塞的網路趨勢觀察http://www.inside.com.tw/2013/03/25/flat-design

5. 扁平化設計正在成為一種時尚。上至做系統的大公司，下至做軟體的開發者，都不
約而同捲入了這股潮流中，微軟的 Metro 風格，iOS 上的 LetterPress，都讓人印
象深刻。設計師們似乎急於把擬物化拋進垃圾堆，迎接扁平化時代的到來。據說蘋
果公司的 iOS7 也要走向扁平化。我們似乎真的要邁入「勇敢新世界」了。
資料來源: Inside 硬塞的網路趨勢觀察http://www.inside.com.tw/2013/03/25/flat-design

7. 微軟提供免費的專業UX課程

8. 如何規劃Window 8 & Windows
Phone App

9. 基礎

10. bauhaus
http://en.wikipedia.org/wiki/Anni_Albers http://en.wikipedia.org/wiki/Wassily_Chair

11. transportation graphics

12. transportation graphics + ITS

13. 大 中 小

15. Android 測試環境
Devices Fragment
資料來源: TechCrunch http://techcrunch.com/2012/05/11/this-is-what-developing-for-android-looks-like/

16. 你有你更想做的事跟更該做的事
Anderson
Polydice
2013/5/18

18. Contoso Finance
DowJones
12,831.58
+48.7
FTSE100
14,442.01
+55.7
NASDAQ
10,113.44
-78.3
S&P500
9,132.22
+16.6
Haveyou
triedournew
account?
Clickhere!
Markets
Contoso
announces
big profits
Woodgrove
bank
considering
offering…
Doubledip
recessiono
thecards
What’sne
onWall St
News

19. 講重點

20. 內
容
優
先 簡
化
整
齊

21. 內
容
優
先 簡
化
整
齊

22. Grid, Grid, Grid

23. page structure
status bar
application space
application bar
application bar menu

24. grid
grid system

25. Working with the Grid

27. 內
容
優
先 簡
化
整
齊

28. 愛用 Wireframe

29. Simplify the Navigation

30. Exploit Windows 8 features

31. Exploit Windows 8 features

32. 內
容
優
先 簡
化
整
齊

33. user + purpose + requirements

34. contoso food truck application

35. 35

37. 以觸控優先, 同時完整的支援滑
鼠鍵盤

38. UI 設計範例 – iOS (Android ?)

39. UI 設計範例 – Windows Phone
首頁採用Panorama 或Pivot
資料要向左對齊, 留白24PX
視覺物件不要有3D, 漸層, 陰影, 透視效果
不要有框線, 表格, 圓角
Application Bar 外, 畫面上不要有其他功能
Button (可以有Link)
所有可按的Link 要實作Tilt效果
背景圖要跟App主題有關(沉浸式體驗)

40. 善 用 工 具

42. Windows Phone Power Tools

43. Alignment Grid Overlay

44. 善用 Microsoft People

45. 支援窗口 開發工具
技術協助 App 宣傳推廣
Nokia & MS

46. 善用 Microsoft Resource
• 市集行銷推廣協助
• 教育訓練&開發書籍
• 開發手機借用
• Windows Phone 市集開發者帳號及開發工具包
申請(Sponsor by Nokia)
– 在2013/6/20前寄到twbisv@Microsoft.com, 註明 “Windows
Phone 市集開發者帳號及開發工具包 申請”
– 提供想開發的App 名稱及功能描述, 根據App 特性提供贊助
– 有機會得到一台全新Lumia 920 手機

47. Apps 開發者聯盟徵召令
• 參加資格
– 你有在iOS或Android平台上非常好的app，想在Win8上開發
– 或是你有超棒的想法，想在Win8上開發
• 參加方式
– 把你的想法(或作品)說明在2013/6/10前寄到twbisv@Microsoft.com
– 審核通過的 App 即可以獲得一套Windows 8專業版軟體產品金鑰一
組(升級版)，建議零售價NT$6,999。
• 活動時間：即日起~2013/6/10止

48. Q&A

49. 線上技術資源
• 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/