微軟 Metro Style 開發框架提高 App 品質與效率(Part 2-1)
手勢(Gestures),是指使用者手指在手機上的動作,常見的有輕按(Tap)、雙擊(Double tap)與拖曳(Pan)等效果。在 Windows Phone 7 中主要支援六種手勢的偵測,詳細內容請參考這裡。
另外,目標(Target)則是指手勢所點擊到的畫面元素。這是一個很有用的功能,我們常需要清楚知道使用者在畫面上點擊的目標,例如,將畫面上的圖片由左移動到右邊,這時,首先需要知道的就是,使用者已經點擊到這一張圖片,才能改變這張圖片的位置。Metro Style 在手勢與目標的框架支援上相當完整,用起來也很方便。
- UI Controls(使用者介面控制項):
使用者介面控制項(UI Controls),指的是可以控制 UI 流程或功能項目的元素。
舉凡你在畫面上看到的元素,其實都是透過框架所提供的 UI Controls 來呈現給你,例如,若我要在畫面上顯示一張圖片,我可以使用影像(Image)控制項,若要撥放影片或聲音,則使用視訊(Video and audio)控制項。當然,Metro Style 框架提供很多 UI Controls,你可以在這裡找到其他所有的項目。
- Hardware(硬體裝置):
Mango 主要的硬體規格為 800 x 480 的螢幕解析度、三個實體按鍵(Start、Search and Back)、多點觸控(四點)、最少 256 MB 的RAM 與 8GB 以上的儲存容量,另外有 GPS 功能與多個感應器。
GPS 功能對手機 App 設計來說相當重要,在現今 SoLoMo 的趨勢下,透過 GPS 得知使用者的位置,並且提供在地化貼心的功能,像是一筵為訂 EZTABLE 透過使用者 GPS 位置,搜尋鄰近餐廳並且提供給使用者訂位,就是一個運用 GPS 資訊的例子。
另外感應器讓你得知手機目前各項物理資訊,例如可以偵測手機目前旋轉方向的加速度(Accelerometer)感應器,你可以透過這個感應器,做出令人驚豔的飛行模擬遊戲。而羅盤(Compass)感應器則告訴你目前手機與地球磁極的角度,讓你可以製作出類似指南針的應用程式。
如果一個手機上的 App,沒有利用到任何的硬體裝置,就有點遜了。之所以要設計在手機上使用的 App,就是想要讓使用者在可以體驗更好的行動技術,不是嗎?在現今 SoLoMo 的趨勢下,如何適當結合手機實體裝置,展現更貼心的用戶體驗,會是在競爭激烈的 App 市場脫穎而出的關鍵。
服務指的是框架提供給開發人員的雲端服務,包括推播、位置、社群與廣告等服務。另外框架整合了微軟市集,讓開發人員可在 App 中使用市集提供的各項服務。
到這裡為止,我們介紹了 Metro Design Language 的組成內容。可以很明顯地看到,相較於 Metro Design Principle 的抽象,Metro Design Language 顯得具體的多。
Metro Design Language 提供給你各種 UI 控制項、支援各種觸控手勢,以及各種不同的字體與樣式,讓你可以應用排版印刷術於 Metro Style App 中。
身為一個 Metro Style 的開發者,你要做的就是學習 Metro Design Principle 的內功心法,並動手修鍊 Metro Design Language 的外功招式,內外兼修,才是真正的 Metro Style 大俠。
- Metro Design Language 的三個經典參考
最後,要介紹的是,微軟定義 Metro Design Language 的三個主要構想來源,我們稱之為 Metro Design Language 經典。若你能好好研讀過這三項聖經的話,相信設計一個好的 Metro Style App,是做得到的!
1. The Windows Phone UX Guidelines
Windows Phone 使用者體驗設計的聖經,這份設計準則會由微軟一直不斷維護,所有 Metro-Style 的真正精神,都蘊含在其中,想要了解 Metro Style 的設計師們一定要看。
2. The Windows Phone SDK Control Library(Silverlight Toolkit for Windows Phone)
指的是開發人員在實際開發時,可以用到的 UI 元件。這些 UI 元件都是由微軟所提供,或是經由微軟審核而納入建議使用的 UI 元件,都相當符合Metro Style。因此只要你使用這些 UI 來製作介面,一定不會有風格像 iOS 的情況發生。
對了,若你是 Metro Style 應用程式的開發者,Visual Studio 與 Expression Blend 將會是你的倚天劍與屠龍刀,平時就要好好的跟他們相處喔!
3. The out-of-box apps and services in Windows Phone.(email, text messages, people hub, music/video hub, phone app)
這裡指的是 Windoes Phone 手機的內建應用程式,這些應用程式通常是由微軟本身或是 OEM 廠商所開發,並且經過微軟原廠的嚴格審核,確保他們都符合 Metro Style 風格。
若你想了解 Metro-Style 應用程式的面貌,其實不需太費心搜尋,拿起你的 Windows Phone,點開你的 e-mail、簡訊,或是各個 Hub (people hub, music/video hub),Metro-Style 介面馬上就展現在你的眼前。
若你是開發人員,這些內建應用程式更是你必須仔細觀察的對象,如同程式設計師一定將四人幫所出的設計樣式(Design Pattern)奉為圭臬一般,手機內建應用程式如何與使用者互動搜尋功能,如何排序搜尋結果等,都是非常值得參考的方式。
所以親愛的開發人員們,不要再發明怪異的互動方式了,拿起你的測試機,先好好的看一下別人是怎麼做的吧!
我們終於把定義出 Metro Style 的兩大組成部分介紹完了,菜都擺在你面前了,就請實際動手下去做,設計出更多的 Metro Style App,讓人們的生活更加便利與美好。
而Metro Style 的開發方式與流程有千百種,到底哪一種比較好呢?
下一期,我們將會品嚐作者所建議的開發小藥丸,據說服用後,就可以開發出好用又好看的介面喔!
芒果 App 專欄,我們下次見。
(圖片來源:LJR.MIKE, CC Licensed)




