設計案例:iPad應用程序在Metro中新的交互模式

曾經深深被Metro扁平化設計所吸引，爲了解Metro UI博主成爲較早一批使用Wp手機的用戶。Metro UI的風格很簡潔，相同的空間給人以更寬廣的感受，Xbox live 、bing搜索、人脈。。。平凡卻獨特的排版設計，不打擾用戶的同時悄悄更新的資訊，當用戶數據量達到既定的層次而觸發的新的交互。。相對Android與IOS系統Metro確有另外一翻新鮮的交互體驗

 

接下來讓咱們進入正文，爲你們帶來一篇來自微軟官方的案例文章。

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中的標籤欄，將一部份評論內容直接輸出到首屏。

iPad版本：

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

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中，用戶能夠將一款應用以快照的方式整合在另外一款應用中，實現多任務操做。快照視圖能夠有效提高應用的使用時間，吸引用戶維持更長久的使用週期。經過調整二者之間的分隔欄，用戶能夠很容易的在當前主應用及快照應用之間進行切換。因此設計師須要考慮主應用與快照應用在容器尺寸發生變化時，依然能各自保持上下文內容的可讀性。

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

消息通知

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

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

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

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

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

英文原文: http://msdn.microsoft.com/en-us/library/windows/apps/hh868262.aspx     譯者c7210  be for Web