Windows 8 Store App 與 Windows Phone App 規劃設計技巧

Herman Wu ( E-Mail: hermanwu@Microsoft.com )

台灣微軟

Windows 8 與Windows Phone 兄弟

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

隨著融合了扁平化設計美學的 Windows8 以及新版 Google 的推出，以及其他人氣網站紛紛採用這種扁平化的主題設計，這種扁平化的趨勢將很有可能受到更多青睞。

資料來源: Inside 硬塞的網路趨勢觀察http://www.inside.com.tw/2013/03/25/flat-design

扁平化設計正在成為一種時尚。上至做系統的大公司，下至做軟體的開發者，都不約而同捲入了這股潮流中，微軟的 Metro 風格，iOS 上的 LetterPress，都讓人印象深刻。設計師們似乎急於把擬物化拋進垃圾堆，迎接扁平化時代的到來。據說蘋果公司的 iOS7 也要走向扁平化。我們似乎真的要邁入「勇敢新世界」了。

資料來源: Inside 硬塞的網路趨勢觀察http://www.inside.com.tw/2013/03/25/flat-design

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

如何規劃Window 8 & Windows Phone App

基礎

bauhaus

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

transportation graphics

transportation graphics + ITS

大 中 小

Android 測試環境

Devices Fragment

資料來源: TechCrunch http://techcrunch.com/2012/05/11/this-is-what-developing-for-android-looks-like/

你有你更想做的事跟更該做的事

AndersonPolydice2013/5/18

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

講重點

內容優先 簡

化

整齊

內容優先 簡

化

整齊

Grid, Grid, Grid

page structure

status bar

application space

application bar

application bar menu

grid

grid system

Working with the Grid

內容優先 簡

化

整齊

愛用 Wireframe

Simplify the Navigation

Exploit Windows 8 features

Exploit Windows 8 features

內容優先 簡

化

整齊

user + purpose + requirements

contoso food truck application

35

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

UI設計範例 – iOS (Android ?)

UI設計範例 – Windows Phone

首頁採用Panorama 或Pivot

資料要向左對齊, 留白24PX

視覺物件不要有3D, 漸層, 陰影, 透視效果不要有框線, 表格, 圓角

Application Bar 外, 畫面上不要有其他功能Button (可以有Link)

所有可按的Link 要實作Tilt效果

背景圖要跟App主題有關(沉浸式體驗)

善用工具

Windows Phone Power Tools

Alignment Grid Overlay

善用 Microsoft People

支援窗口 開發工具

技術協助 App 宣傳推廣Nokia & MS

善用 Microsoft Resource

• 市集行銷推廣協助• 教育訓練&開發書籍• 開發手機借用• Windows Phone 市集開發者帳號及開發工具包申請(Sponsor by Nokia)– 在2013/6/20前寄到twbisv@Microsoft.com, 註明 “Windows

Phone 市集開發者帳號及開發工具包申請”– 提供想開發的App 名稱及功能描述, 根據App 特性提供贊助– 有機會得到一台全新Lumia 920 手機

Apps 開發者聯盟徵召令

• 參加資格– 你有在iOS或Android平台上非常好的app，想在Win8上開發– 或是你有超棒的想法，想在Win8上開發

• 參加方式– 把你的想法(或作品)說明在2013/6/10前寄到twbisv@Microsoft.com– 審核通過的 App 即可以獲得一套Windows 8專業版軟體產品金鑰一

組(升級版)，建議零售價NT$6,999。

• 活動時間：即日起~2013/6/10止

Q&A

線上技術資源

• 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/