Metro Style App (7) – 使用 Windows App Certification Kit 基本檢測開發的 Metro App

在開發完 Metro App  之後,微軟也提供了基本的檢測工具對 App 做初步的檢測,這份工具檢測的項目也非常的基本,檢測的項目也不多,一般來說都可以正常通過。在這邊檢測的部分只是程式能不能正確運作而已,但是如果沒有辦法通過的話應該也沒有通過發佈上 App Store 的檢測。

微軟官方介紹

Windows App Certification Kit 白皮書

Windows SDK 下載

Windows App Cert App 是 Windows SDK for Windows 8 Consumer Preview 的其中一項功能,安裝完他並不會顯示在 Metro App 開始列或是傳統桌面上,可以利用 Metro App 的搜尋功能來啟動程式。啟動程式之後 選擇 Validate Metro Style App 會列出機器上全部的 Metro Style App ,有的時候這邊會遇到程式沒有列在上面的情況,是一個已知的 bug ,最後會提到要怎麼做。

image

選擇到想要檢測的 App 之後就可以開始檢測了,大約會執行五到十分鐘,途中也會開啟 App 數次,而且最後會停留在 Metro 的頁面,所以看不到檢測的進度條,反正看他好像沒在動作就可以看看是不是完成了。如果完成的話就會出現要存檔的畫面,這邊存檔的檔案就是結果的 Xml 檔。

image

用 IE 開啟結果的 XML 檔案,裡面會列出通過或是不通過跟警告的部分,主要都是直接關於程式的部分,如果要上架的話 Metro App 還有很多設計方面的規範都不會在這邊檢測到,像下面檢測到的問題是啟動的速度太慢了,為了達到 Metro Style App fast and fluid 的效果,所以有限制啟動時間不能太久。

image

如果在清單中找不到要檢測的 Metro Style App

  1. 必須先啟動 powershell 執行 Get-AppxPackage > out.txt
  2. 在 out.txt 中可以看到全部的 Metro Style App ,在 txt 找到 InstallLocation 這個欄位是空的 App
  3. 用 Remove-AppxPackage <packageFullName> 將這個 App 移除掉 ,再回到 App 清單應該就可以正常顯示 list 了

image


Wack don’t see my app neither from gui, nor command line, nor from visual studio create package dialog

Metro Style 最真實的數位體驗

桌面隱喻 Desktop metaphor

在提到最真實的數位體驗之前,要先題什麼是桌面隱喻。一直以來數位內容其實都被設計為現實生活的延伸,包含我們操作以及理解的方式。

145812-bumptopfull3ddesktop_586

將桌面設計為類似於真正的桌面,文件就長得像放在桌子上的文件,資料夾也像常用的資料夾,一切的一切都是在數位的裝置上,依然保留原本的桌面體驗。就像是象形文字的概念

1253715437_bb7afaa5ff

所以才會說目前為止的數位體驗,其實只算是數位生活的類比體驗,一直以來保留的設計方法讓一直沿用下來。但是這樣做的真的有意義的嗎。這樣是不是真的有幫助到更快的解決問題或是更容易取得資訊。

最真實的數位體驗

沒想到這次 Think different 的居然是微軟,Metro Style 的主軸之一就是最真實的數位體驗,在 Metro Style  下完全拋棄了桌面隱喻這個東西,或許這正是世代交替的時刻。下一個世代的人會不會還沒有看過 mail 就先學會寄發 e-mail ,沒看過通訊錄先有 Facebook ,不會寫字先學會打字,不會翻書前就先會看電子書。

sci-fi-tech-20thcentfox-9

如果在未來的數位生活中,這些類比的東西都不復存在了,那麼這些東西應該是要用什麼方式呈現呢。是不是到目前為止我們認為理所當然的介面其實是不必要的存在。那麼對於接下來的世代,怎麼樣做才是比較好的。

Windows 8 Metro Style 主要設計概念來源

幾項 Metro UI 設計的想法來源,其實蠻有趣的,不是設計出身的人其實並不會想到這麼多。但是仔細了解之後其實 Metro UI 設計並不只是看起來那麼簡單。

Modern Design – Bauhaus

Bauhaus
這建築物現在看起來是很常見的,不過在 19 年代前半卻是非常特別的,在當時的建築中獨立一格,也建立了一派極簡、現代的 Bauhaus 建築風格,而這種風格不只影響到了建築也影響其他各種設計。更加注重功能性,而並非裝飾的部分。

International Typographic Style – Swiss Design

poster
在字體排版方面則是大量引用 International Typographic Style 的概念,讓文字經由排版定位來呈現內容,而且使用不帶有意象的字體,文字本身應該是中立的來呈現內容代表的含意。利用方格圖來設計編排字體,並且適當的留白就成為 International Typographic Style 的主要精神。
swissposter

Motion Design – Cinematography

cinematography
而在 Metro UI 動作設計方面則是希望能像電影一樣吸引人,流暢的動作串接豐富的內容,就像看電影一樣。下面這支 MTV 為了自己的 Mango App 拍攝的廣告應該可以詮釋 Metro 想要帶出來的感受。

Metro Style App (6) Sharing 分享功能

image

Metro Style App 在 API 分享的功能(Sharing ),使用 Sharing 將資訊分享到 Facebook ,Twitter….。不同於其他的 App 如果你要將資訊 PO 到 Facebook 上面,那必須直接去呼叫 Facebook 的 API ,可以被分享的 Target 實在太多了,雖然說 API 大部分都依循著同一套規則,但是實務上還是必須一個一個測試,而且對於使用者來說他不一定同時使用這麼多的平台,假設使用者只有 Facebook 帳號沒有 Google+,那麼 Google+ 的分享按鈕對使用者來說就是沒有意義又浪費版面造成混淆的功能,而且當開發愈想抓住更多平台而串接了更多分享 API ,也就造成這個問題愈來愈嚴重。難道這個問題沒有好的解決方法嗎,如果開發功能還需要利用微積分取得因為分享而加入以及因為太多分享而離開的使用者最大值,那麼也太累了一些。

Microsoft 在 Windows 8 提出了一種解決方案,分享的時候並不是直接呼叫服務的 API 而是呼叫 Windows 8 的 WinRT,而 WinRT 會找尋機器上被設定為可以 Sharing Target 的 App 來做 Sharing 的動作。這是什麼意思呢?就是說如果安裝了 Facebook 的 Metro App 則你的分享就可以分享到 Facebook 上,如果安裝了 Twitter 就可以分享到 Twitter 上,而如果今天有安裝這個 Google+ 這個 App 則使用者應該也就是 Google+ 的使用者。Microsoft 大餅畫得很圓,看起來正是一勞永逸的作法,讓大家的事情都可以做的很少就完工,不過唯一的問題就是 Windows 8 的使用人數能不能推得起來,如果人數太少到大型平台都不願意花費時間來開發 Metro App,那這個 Sharing 可能就只能寄 Email 了。

加入 Sharing content target app sample

為了避免只有 mail 能被分享的窘境,而且可以看到最完整的欄位設定,在 Sharing content target app sample 可以下載到微軟建立作為分享目標的範例 App ,用 VS11 開啟之後在 Local Machine 用 Debug 執行起來之後既可以當作分享的目標了。

image

在 App 中實作分享功能

要實作這個功能,主要是註冊 DataTransferManager 的 DataRequested Event Handler ,並且設定 Request 物件的屬性,讓 Sharing 的功能知道你想要分享的資訊是哪個部分。主要的重點就是取得 Sharing 的事件,在事件中把要分享的資訊整理好設定,Windows 8 的設定功能就會把這些資訊送給 Sharing Target ,接下來的事情就是 Sharing Target 要去煩惱了。

設定文字分享訊息

在 itemDetail.js 的 ready function 加入

var dtm = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();

dtm.addEventListener("datarequested", function (e) {
var request = e.request;
request.data.properties.title = item.title;

// Share recipe text
var recipe = "INGREDIENTSrn";

//設定要分享的資訊
recipe += item.content + "rn";

recipe += ("rnDIRECTIONSrn" + item.directions);
request.data.setText(recipe);

設定圖片分享資訊

// Share recipe image
var image = document.querySelector(".item-image");
var uri = image.getAttribute("src");

// 抓取圖片資訊
if (uri.indexOf("http://") == 0)
uri = new Windows.Foundation.Uri(image.src); // Remote image
else
uri = new Windows.Foundation.Uri("ms-appx:///" + image.getAttribute("src")); // Local images

var reference = Windows.Storage.Streams.RandomAccessStreamReference.createFromUri(uri);
request.data.properties.thumbnail = reference;
var deferral = request.getDeferral();
// 圖片讀進 request.date 裡面
request.data.setBitmap(reference);
deferral.complete();

最後的結果從 Sharing content target app sample 查看的話應該會類似這樣,不同的 Sharing Target 抓取的欄位可能也不盡相同。

image


Sharing content target app sample 分享目標微軟範例

Sharing content source app sample 分享來源微軟範例

API reference for Windows Runtime and Windows Library for JavaScript