上周有幸玩了一會Metro的平板。單說視覺風格，仍是我的大菜，但真正用起來卻不覺得舒暢，尤其是橫向瀏覽內容列表的時候，視線不停的在X軸與Y軸之間切換，很快感到頭暈目眩，這一切似乎比瀑布流更加兇殘。

當然，僅僅是個人感受；我不想這樣就得出Metro中看不中用的結論。做這篇譯文大致可以代表我的立場，即相比于iOS來說，Windows這套東西確實有很多獨到的精華在里面；我想通過這樣的文章加深認識，了解一些表象背后的東西。也希望本文可以給那些已經熟悉iOS，但對Metro及Windows平板仍屬于初識的朋友們一個小小的起點。接下來讓我們進入正文，一篇與來自微軟官方的案例文章。

iOS是個不錯的平臺，人們在其中創造了各類觸控優先、有趣且吸引人的應用。不過，隨著Windows 8的登場，設計師和開發者們又多了一個釋放創意能量的新舞臺。

在本篇案例當中，我們將幫助各位使用Metro風格的設計原則對原有的iOS應用設計方案進行重新構思，大家會了解到怎樣將iPad當中一些常見的界面元素及體驗模式轉換成為Metro風格，以打造全新的Windows 8應用。我們將對同一款應用在兩個平臺中的不同設計方式進行對比，幫助各位了解怎樣將你的應用與Windows 8以及Metro設計原則進行完美的融合。

我們將要研究的是一款相片日志應用，用戶可以在線查看和管理他們的照片或視頻。下圖是這款應用的Metro版本：

這款應用最初是為iPad設計的，如下圖所示。

從設計及體驗模式的角度出發，該應用可以大致被解構為六個方面：

1. 布局和導航
2. 命令與行為
3. 契約(Contract)：搜索、分享及其他
4. 觸控與手勢
5. 屏幕定向與視圖模式
6. 消息通知

接下來我們將依次對這六個方面的要素進行分析與對比。

布局與導航

聚焦于內容

這款相片日志應用要有能力對兩方面的內容進行良好的呈現，即展示用戶的相片以及與這些相片相關的最新社交動態。在創建Metro風格應用時，我們的第一個目標就是將原有iPad應用當中的那些與核心功能和內容沒有直接關聯的界面元素統統移除，例如頂部的導航欄、底部的頁面指示符、標簽欄等。不用擔心導航的問題，我們在后文中會談到如何讓用戶在需要的時候調出app bar。

iPad版本：

• A.導航欄
• B.內容
• C.頁面指示符
• D.標簽欄

Metro版本：

• B.內容與Logo

相片內容的呈現方式

兩個版本都會按照月份次序來組織內容，不過對于月份的表現方式有所差異。在iPad版本中，相片會根據上傳月份的不同而被劃分到12個區塊當中。在Metro版本中，我們傾向于以更加直接的方式呈現出更多的相片及社交方面的信息，使用戶對內容的上下文環境具有更強的認知。

iPad版本：每個月的相片都以堆棧的形式呈現，用戶只能看到其中的一張圖片。

Metro版本：針對當月內容，呈現更多的相片，包括標題、評論數量等信息；用戶可以在首屏中瀏覽到更多的“高亮”內容。

將樹形信息結構扁平化

iPad版本中的信息結構及對應的導航機制是典型的樹形模式；在Metro版本中，我們要使其扁平化，減少導航操作，讓用戶最關注的內容盡量多的呈現在首屏當中。為了實現這一目標，我們將去除iPad中的標簽欄，將一部份評論內容直接輸出到首屏。

0

iPad版本：

• A.相片視圖
• B.評論視圖

::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::2

Metro版本：

• 將評論與相片內容整合在同一個界面視圖中
• hub風格的設計方式，讓最具相關性的內容自成體系
• 要查看更多評論內容，用戶可以點擊該內容組的標題，即“Recent comments”

讓導航操作更加符合“直接操縱”的理念

“直接操縱”的理念可以讓用戶以更加符合直覺的方式與內容及導航系統進行互動。在Metro風格的應用中，我們要盡可能多的在恰當的地方貫徹這樣的交互設計思想。例如使用Windows提供的SemanticZoom對象作為導航控件，可以讓用戶的操作更符合心智，更有效率。

iPad版本：點擊導航欄中的“Years”按鈕，彈出導航列表，選擇某個年份進入相關視圖界面。

Metro版本：在相片內容上使用雙指捏合的手勢，即可查看全部內容所對應的年份及月份。這種方式允許用戶在任何年份和月份的內容中進行快速跳轉。而且在這個視圖中，月份條目使用了不同的背景色，其中較淺的代表該月份當中沒有內容，使用戶無需進入下層視圖即可了解這一信息。這套機制當中不包含任何“實體”的導航元素，用戶可以通過與內容的直接交互操作來進行導航。

命令與行為

將與當前界面相關的控制元素放到app bar當中

當我們重新設計那些與上下文相關的行為與控制元素時，也應該遵循“內容優先”的原則，只將那些與當前界面內容相關的控制元素放在app bar當中。這種方式可以避免用戶界面被過多的功能圖標復雜化，無論用戶當前處于哪個視圖，他們都可以從界面底部或頂部調出app bar，執行與當前內容相關的控制行為。所有Metro風格的應用都應該支持這種交互機制，以便幫助用戶建立起一套普遍適用的行為預期，提升應用及平臺整體的易用性及體驗一致性。

另外，可以將那些最常用的命令放在靠近左右邊緣的地方，這樣最容易被手指觸摸到。

以“刪除相片”為例，我們來看看這個操作在兩個平臺當中的區別：

iPad版本：點擊導航欄右側的相關功能按鈕，進入編輯模式，然后點選相片，作為刪除等操作的對象。

Metro版本：

• A.默認情況下，app bar處于隱藏狀態，使整個界面環境更加具有真實感，并使用戶的注意力保持在內容上面。用戶可以通過輕掃(swipe)將app bar從界面底部或頂部調出。
• B.調出app bar之后，用戶可以點選界面當中的內容對象，例如相片；此時，與相片相關的命令就會出現在app bar當中。也就是說，這里具體會出現哪些控制元素，取決于用戶是否選取了內容對象，以及選取了哪種類型的內容對象。這類具有上下文相關性的控制元素通常被放置在app bar的左側，而具有全局性質的命令則是在右側。

契約：搜索、分享及其他

通過搜索契約使搜索體驗更加集約化

在Metro應用中，我們使用搜索契約，而不是傳統意義上的那種永遠會停留在界面某個位置上的搜索控件。用戶可以在任何支持搜索契約的應用里持續的使用側邊charms bar當中的搜索功能，而搜索結果也會以更加符合內容自身特質的方式自然的呈現出來。

首先，我們來看看在相片日志應用內部搜索相片的情況：

iPad版本：

• 只能通過首頁導航欄中的搜索控件執行搜索
• 用戶輸入關鍵詞時，搜索建議會動態輸出，用戶可以直接從中進行選擇

Metro版本：

• 用戶調出charms bar使用搜索，應用列表中默認選中的就是當前的相片日志應用。
• 當用戶開始輸入搜索關鍵詞時，托盤中會即時出現搜索建議。用戶提交了查詢關鍵詞后，可以看到完整的搜索結果視圖。

接下來，我們看一看在相片日志應用外部搜索該應用內相片的情況；這項功能不適用于iPad版本。這個例子演示了怎樣在其他應用當中通過搜索托盤里的應用選擇來實現跨應用搜索。該功能允許用戶在任何時間、任何應用內搜索任何想要的信息。

如上圖所示，用戶當前處于Tweet@Rama應用的環境當中，出于某種需求，該用戶希望搜索相片應用當中所有包含“Barcelona”關鍵詞的相片。輸入了關鍵詞之后，用戶在搜索托盤中選擇相片應用，使其成為搜索結果提供者，這時相片應用就會自動加載，并顯示相關的搜索結果。這種方式使得用戶無需手動在當前運行的應用與搜索目標應用之間進行切換。

通過分享契約與更多的人互通信息

對社會化媒體的整合是很多應用當中的關鍵要素。對于iPad應用，設計師通常要對應用所需支持的社交媒體頻道進行選擇，例如Twitter或Facebook等，然后開發人員會將這些服務一個個的整合到應用當中。當其中某些服務的API接口發生變化的時候，開發人員還必須調整應用當中的相關代碼，以確保其正常運作。

而在Metro風格的應用當中，我們會使用分享契約。這種技術方案簡化了設計與開發方面的工作，因為我們不需要為用戶有可能用到的社會化服務而將它們與每個單獨的應用都逐一整合起來。不僅是社會化服務，用戶還可以將信息保存共享至平臺上所有那些使用了分享契約的應用，而開發者們則無需擔心外部服務的接口問題。站在用戶的角度，他們可以在charms bar這個固定的地方完成有關分享的操作。

下面是一個將相片日志應用中的圖片共享給其他應用服務的例子：

iPad版本：用戶需要點擊導航欄右側的相關動作按鈕，并從展開的列表中選擇“分享到Facebook”。如果要使應用支持更多的分享服務，開發人員必須在該應用當中逐一增添。

Metro版本：

• 用戶始終可以在固定的地方找到分享方面的功能，無論他們正在使用哪款應用
• 當前設備中所安裝的所有支持分享契約的應用，都會出現在搜索托盤中的應用列表里，如上面大圖當中的Socialite、Tweet@Rama、Notespace、PaintPlay等。
• 用戶可以分享多種類型的內容，例如鏈接、相片，或是將信息存放在某些記事本類的應用中。
• 用戶最常用到的服務會出現在應用列表的頂端，提升操作效率。

我們同樣可以將當前的相片日志應用通過分享協議注冊到分享托盤的應用列表當中，這樣就可以讓用戶將其他應用當中瀏覽到的圖片內容共享到相片日志應用當中了。

有關應用間內容共享的詳細信息，可以到Guidelines and checklist for sharing content當中查詢。

使用文件選擇器從不同的地方獲取文件

在傳統桌面設備中，用戶可以通過文件選擇器(File picker)查看本地存儲設備當中的文件或路徑。在移動環境中，所有支持文件選擇器契約的Metro應用同樣可以實現這樣的操作。

下面的例子演示了用戶怎樣在相片日志應用中上傳一張本地存儲的相片：

iPad版本：用戶可以在本地的相冊或一些外部服務當中選擇圖片。

Metro版本：

• A.用戶在app bar當中點擊上傳按鈕，系統打開文件選擇器界面。該界面及其打開方式在任何上下文環境中都會保持一致。
• B.點擊“Files”標題，用戶就可以查看到所有支持文件存取的路徑。
• C.用戶可以在一個路徑中選擇多張相片進行上傳，界面底部的縮略圖列表會反映出當前的選取狀態。

我們還可以進一步利用Metro應用獨特的功能特性，讓不同的應用訪問和使用彼此所包含的文件，例如在其他應用中使用相片日志應用里的圖片。通過這樣的功能，用戶無需首先在相片應用中將圖片下載到本地，然后再上傳到另外的應用中；系統會將所有支持文件選擇器契約的應用都看作是一個可以在任何地方讀取的文件存儲位置。

如上圖所示，用戶在PC Settings界面中點擊“瀏覽”，以更換頭像圖片。由于我們的相片日志應用支持文件選擇器契約，所以在接下來的文件選擇界面中，就會看到應用名稱出現在列表當中，用戶可以選擇該應用當中存儲的相片作為新的頭像。

觸控與手勢

在界面邊緣輕掃，調出應用內部或系統全局的相關工具欄

• 針對當前應用上下文的命令與功能，通常被放置在界面底部的app bar當中。
• charms bar隱藏于于界面右端，其中包含了若干系統全局性質的命令。
• 界面左邊緣隱藏著最近使用過的應用列表。
• 從界面頂部向下輕掃，可以找到固定或關閉app的命令。

下面兩張圖片分別演示了調出app bar和charms bar的方法：

文件多選

iPad版本：

• 用戶首先要進入一種特定的編輯模式來執行選擇及相關的編輯操作，因為“點擊”在通常情況下是用來加載或進入某項條目的。
• 當選擇與編輯的操作結束后，要退出編輯模式。

Metro版本：

• 用戶無需進入特定的編輯模式；只要在內容對象上向下短距離輕掃，就可以選中該對象，同時app bar會自動出現，顯示與選中對象相關的操作功能。
• 這個手勢是可逆的。這套交互模式使Windows 8在對象選取方面的效率得到了有效的提升。

雙指張開與捏合

無論在iOS還是Windows中，這兩個手勢在很多時候都被用作放大或縮小內容對象的尺寸。不過對于Metro應用來說，它們還可以通過Semantic Zoom來實現內容層級間的導航。用戶可以捏合某個內容對象，來進入它所在的相關內容組。不過，當用戶正在以全屏模式瀏覽單張相片的時候，捏合與張開的手勢還是會被用來調整圖片的尺寸。

屏幕定向與視圖模式

面向不同的屏幕定向方式及設備尺寸，提升布局的適應性

在iPad應用中，設計師通常需要考慮兩種屏幕定向方式以及對應的界面設計方案。而Windows 8可以運行在多種設備上，包括平板和臺式機。因此，我們要考慮到顯示空間更大的情況，讓用戶在大尺寸設備中能夠看到更多的內容。網格布局可以使設計方案更好的適應于不同的屏幕定向方式及不同類型的顯示設備，例如針對縱向空間更大的設備來顯示更多的當月特色圖片。

iPad版本：在不同的定向模式下，內容完全相同，只是輸出布局進行了調整。

Metro版本：豎屏模式及大尺寸設備可以利用更大的空間顯示更多的內容，同時，特色內容附近的內容輸出數量也會根據顯示設備尺寸的不同而進行優化調整。另外，我們也可以為內容當中的圖片制作多個版本，使它們根據不同的顯示環境響應式的輸出更合適的圖片。

使用快照視圖吸引用戶

在Win8中，用戶可以將一款應用以快照的方式整合在另一款應用中，實現多任務操作?？煺找晥D可以有效提升應用的使用時間，吸引用戶維持更長久的使用周期。通過調整兩者之間的分隔欄，用戶可以很容易的在當前主應用及快照應用之間進行切換。所以設計師需要考慮主應用與快照應用在容器尺寸發生變化時，依然能各自保持上下文內容的可讀性。

• 相片日志應用在快照視圖中輸出的內容與完整模式當中的相同，但視圖的布局樣式進行了調整。
• 在快照視圖中，用戶可以通過上下滑動來瀏覽更多的內容。相比與在完整模式當中的左右滑動瀏覽方式，在這樣狹小的空間中，上下滑動更加合理、易操作。

消息通知

使用瓦片呈現動態信息更新

iOS 5引入了通知中心，使得所有的通知信息都可以迅速即時的在界面頂部呈現出來，用戶可以將提示消息展開為完整的通知中心面板，查看所有的消息。另外，在iOS當中，應用圖片側上方的數字標識也可以讓用戶了解到該應用當中的內容更新數量。

而Windows 8中的瓦片則整合了通知中心與數字標識這兩個方面的提示功能，用戶即可以直接在瓦片中閱讀提示信息，也可以點擊進入應用。另外，與iOS通知中心統一化的輸出格式有所不同，Metro風格的應用瓦片允許設計師從大量模板當中選擇不同的樣式。

你也可以使用toast notifications向用戶進行提示。這類即時信息會在屏幕右上方出現，并且會對用戶在當前應用中的任務起到干擾和中斷的作用。通常，在某個應用第一次運行的時候，我們可以讓用戶選擇是否接受這種提示方式。toast類似于iOS當中出現在屏幕頂部的通知，不過在Windows 8中，設計師可以從一組toast模板中進行選擇，使它的呈現方式與當前應用具有更強的相關性。

下圖所示的是相片日志應用推送過來的最新評論提示：