Windows Phone面試也有很長一段時間了，其簡潔的視覺風(fēng)格，完全區(qū)別于iOS及Android的交互方式受到很多設(shè)計師的青睞。

目前Marketplace中的應(yīng)用數(shù)量相較App Store和Google Market還是比較少的，具有平臺特色的創(chuàng)新交互方式也沒有非常成形，我們了解這個平臺最簡單的方式就是先按照最接近原生體驗的方式去設(shè)計應(yīng)用，在充分并深入理解這個平臺之后再去創(chuàng)造更多新穎的交互方式。

下面就從這個系統(tǒng)所提供的最原生的交互方式出發(fā)簡單分析一下如何設(shè)計一個最為原汁原味的Windows Phone應(yīng)用。

瓦片（Tile）的合理運用

Windows Phone中最大的一個特點就是主頁面是由一個一個方形或長方形的“瓦片”建起來的。瓦片可不僅僅是一個icon，它還能承載應(yīng)用想要展示給用戶的一些信息，所以合理運用瓦片可以展示的信息將會給我們設(shè)計的應(yīng)用增色不少，在用戶諸多的選擇中脫穎而出。

最基本的，可以像系統(tǒng)自帶的短信功能那樣，提供一個未讀短消息條數(shù)的數(shù)字提示。

稍復(fù)雜點，可以在瓦片中顯示一些靜態(tài)或動態(tài)的圖片、文字信息。不過要注意一點，Windows Phone的設(shè)計原則就是簡潔為主，大色塊配合盡量少的顏色展示內(nèi)容比較符合這個系統(tǒng)整體的風(fēng)格，如果把瓦片設(shè)計的太過于花哨和復(fù)雜就有點背離系統(tǒng)設(shè)計初衷了，放置在主界面上可能也不會有特別好的視覺效果。

不僅如此，瓦片并不是一個固定的模塊，系統(tǒng)提供了很多翻轉(zhuǎn)、推動之類的切換效果，這意味這我們可以將其視為正反兩面進(jìn)行看待，正面延續(xù)之前所說的設(shè)計方式，主要展示應(yīng)用名稱、logo及一些必要信息，反面就可以靈活放置我們想展示給用戶看的內(nèi)容，這就給設(shè)計師提供了很廣闊的空間，想放什么？盡情開動腦筋吧。不過也有一點需要注意，目前來說，瓦片切換的動作及時間間隔是開發(fā)者不可控的，所以瓦片背面放置的東西還是應(yīng)該盡量以簡潔為主。

Windows Phone 7.5（芒果）系統(tǒng)中提供了一個新的功能，就是可以把應(yīng)用中的操作或內(nèi)容模塊發(fā)送到桌面上形成瓦片，方便用戶快速進(jìn)入需要的內(nèi)容或操作，如微博客戶端的發(fā)微博操作或者某一分組的微博內(nèi)容。這就需要設(shè)計師在設(shè)計前就想好哪些操作用戶可能需要快速觸發(fā)，而后告訴研發(fā)同事在相應(yīng)的地方設(shè)置好發(fā)送到桌面的操作。

細(xì)心的用戶還會發(fā)現(xiàn)，系統(tǒng)自帶的聯(lián)系人功能在瓦片中是以一種很炫的九宮格的方式進(jìn)行展示的，整個瓦片被拆車3*3的小塊，以每一個小塊為單位進(jìn)行切換，還會將相鄰四個小塊拼成一張大圖?？上④浌俜?jīng)]有將這個設(shè)計權(quán)限開放給開發(fā)者，可能是考慮到主界面運行效率和整體效果的的因素吧。這是個小小的遺憾，期待之后能用到這個效果設(shè)計出比較酷的瓦片展示方式。下圖所示即為九宮格效果：

在瓦片效果的使用上，USA Today就做得非常出色：模擬了九宮格試布局，正面使用icon及新聞圖片的拼接圖，在反面展示了天氣信息，效果很好。

全景視圖（Panorama）的正確使用

全景視圖模型展示

USA Today中對于全景視圖的使用

全景視圖設(shè)計上類似于Windows系統(tǒng)中的多窗口事件，每個窗口中打開的可以是不同的軟件。所以全景視圖中可以放置文字、圖片、瓦片等等所有可以承載的內(nèi)容，每個頁面中的內(nèi)容、布局、甚至操作都可以有所不同，每個頁面右側(cè)露出的邊沿恰恰構(gòu)成了切換標(biāo)簽的最佳隱喻（見下圖）。這樣的特性正好對應(yīng)于iOS或者Android系統(tǒng)應(yīng)用最為常見的一級導(dǎo)航，所以我們在設(shè)計Windows Phone應(yīng)用時完全可以大膽的將這兩個平臺應(yīng)用的一級架構(gòu)直接移植過來。

Windows Phone的設(shè)計不太推薦一個頁面中出現(xiàn)二級標(biāo)簽（也是可以支持的，但是那樣就不夠原生，不在本文討論范圍），這就需要設(shè)計時將內(nèi)容盡量扁平化，在盡量少的層級內(nèi)完成相關(guān)的操作，這一般是我們設(shè)計應(yīng)用時比較花心思的地方。

全景視圖中每個界面中放置的內(nèi)容也可以有兩種展示方式，縱向展示多用于內(nèi)容較多或信息流類內(nèi)容，縱向理論上可以“無限長”；橫向展示多用于內(nèi)容量及布局固定，希望一次性展示完畢的內(nèi)容，其縱向不可操作，橫向可做多屏拼接。

如下圖，Xbox LIVE欄目使用的即為橫向展示方式（覆蓋區(qū)域為欄目范圍，框選區(qū)域為一屏顯示范圍），其他欄目使用的是縱向展示方式。

全景視圖中可以模擬主屏幕中的瓦片及動作效果，不過微軟沒有把1*2的長方形瓦片使用權(quán)限開放給開發(fā)者，對此我們可以使用自己繪制的方式進(jìn)行效果模擬。

全景視圖中不同界面內(nèi)容及操作不同，則其對應(yīng)的功能菜單肯定也有一些區(qū)別，解決這個問題可以在界面之間切換時設(shè)置一個操作菜單收起的動作，到下一界面再次展開時顯示該界面對應(yīng)的操作即可。

樞軸視圖（Pivot）的正確使用

樞軸視圖設(shè)計上類似于Windows系統(tǒng)中的多任務(wù)事件，在一個軟件中開啟多個并列任務(wù)，每個任務(wù)的結(jié)構(gòu)、布局、操作方式都非常接近。樞軸視圖中內(nèi)容占據(jù)全屏位置，標(biāo)題位置展示之后的一個或幾個頁面對應(yīng)的內(nèi)容。這個特性可以對應(yīng)到iOS或者Android系統(tǒng)應(yīng)用的二級導(dǎo)航或標(biāo)簽切換，是Windows Phone應(yīng)用中經(jīng)常出現(xiàn)的效果。

樞軸視圖中，點擊上部的標(biāo)簽或者左右拖動屏幕均可進(jìn)行標(biāo)簽之間的切換，每個標(biāo)簽下所對應(yīng)的內(nèi)容在結(jié)構(gòu)布局上最好保持較高的一致性。

交互邏輯上的控制

之前討論過，Windows Phone的架構(gòu)要求我們在設(shè)計時盡量扁平化，盡量壓縮架構(gòu)的層級，但很多操作需要到三級或者更深層級有時也是不可避免的，那么盡量讓用戶使用盡可能少的操作就回到更高層級的交互邏輯就顯得比較重要了。

方案一：合理規(guī)劃“返回”

微軟推薦開發(fā)者引導(dǎo)用戶使用實體返回鍵而不是返回按鈕進(jìn)行返回操作。返回鍵觸發(fā)的操作可以定義為“返回上一狀態(tài)”或“返回上一層級”，在合理的前提下，將樞軸視圖或最終內(nèi)容瀏覽狀態(tài)下的返回操作都定義成“返回上一層級”，就會大大壓縮返回操作的觸發(fā)次數(shù)。

方案二：直接返回主頁面的按鈕

如果頁面跳轉(zhuǎn)的層級很深甚至產(chǎn)生循環(huán)嵌套，不妨在對應(yīng)頁面的操作菜單中直接加入一個“返回主頁面”的按鈕，方便用戶完成操作后快速回到主頁面。

以上分析是基于一個比較宏觀的范圍，實際設(shè)計中肯定還會有很多細(xì)節(jié)方面需要不斷推敲完善，也有很多實際情況需要特殊的處理方式。這些需要我們在設(shè)計的過程中深入的思考，不斷的分析，最終形成完善合理的設(shè)計方案。

寫的比較膚淺，如果有不準(zhǔn)確的地方，歡迎大家指出。

來源：http://uedc.163.com/8534.html