2013-1-5 藍藍設計的小編
轉(zhuǎn)載藍藍設計( www.bouu.cn )是一家專注而深入的設計機構(gòu) ，為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
來源： http://beforweb.com/node/92
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
在本篇案例當中，我們將幫助各位使用Metro風格的設計原則對原有的iOS應用設計方案進行重新構(gòu)思，大家會了解到怎樣將iPad當中一些常見的界面元素及體驗模式轉(zhuǎn)換成為Metro風格，以打造全新的Windows 8應用。我們將對同一款應用在兩個平臺中的不同設計方式進行對比，幫助各位了解怎樣將你的應用與Windows 8以及Metro設計原則進行完美的融合。
我們將要研究的是一款相片日志應用，用戶可以在線查看和管理他們的照片或視頻。下圖是這款應用的Metro版本：
這款應用最初是為iPad設計的，如下圖所示。
從設計及體驗模式的角度出發(fā)，該應用可以大致被解構(gòu)為六個方面：
接下來我們將依次對這六個方面的要素進行分析與對比。
這款相片日志應用要有能力對兩方面的內(nèi)容進行良好的呈現(xiàn)，即展示用戶的相片以及與這些相片相關(guān)的社交動態(tài)。在創(chuàng)建Metro風格應用時，我們的第一個目標就是將原有iPad應用當中的那些與核心功能和內(nèi)容沒有直接關(guān)聯(lián)的界面元素統(tǒng)統(tǒng)移除，例如頂部的導航欄、底部的頁面指示符、標簽欄等。不用擔心導航的問題，我們在后文中會談到如何讓用戶在需要的時候調(diào)出app bar。
iPad版本：
Metro版本：
兩個版本都會按照月份次序來組織內(nèi)容，不過對于月份的表現(xiàn)方式有所差異。在iPad版本中，相片會根據(jù)上傳月份的不同而被劃分到12個區(qū)塊當中。在Metro版本中，我們傾向于以更加直接的方式呈現(xiàn)出更多的相片及社交方面的信息，使用戶對內(nèi)容的上下文環(huán)境具有更強的認知。
iPad版本：每個月的相片都以堆棧的形式呈現(xiàn)，用戶只能看到其中的一張圖片。
Metro版本：針對當月內(nèi)容，呈現(xiàn)更多的相片，包括標題、評論數(shù)量等信息；用戶可以在首屏中瀏覽到更多的“高亮”內(nèi)容。
iPad版本中的信息結(jié)構(gòu)及對應的導航機制是典型的樹形模式；在Metro版本中，我們要使其扁平化，減少導航操作，讓用戶最關(guān)注的內(nèi)容盡量多的呈現(xiàn)在首屏當中。為了實現(xiàn)這一目標，我們將去除iPad中的標簽欄，將一部份評論內(nèi)容直接輸出到首屏。
iPad版本：
Metro版本：
“直接操縱”的理念可以讓用戶以更加符合直覺的方式與內(nèi)容及導航系統(tǒng)進行互動。在Metro風格的應用中，我們要盡可能多的在恰當?shù)牡胤截瀼剡@樣的交互設計思想。例如使用Windows提供的SemanticZoom 對象作為導航控件，可以讓用戶的操作更符合心智，更有效率。
iPad版本：點擊導航欄中的“Years”按鈕，彈出導航列表，選擇某個年份進入相關(guān)視圖界面。
Metro版本：在相片內(nèi)容上使用雙指捏合的手勢，即可查看全部內(nèi)容所對應的年份及月份。這種方式允許用戶在任何年份和月份的內(nèi)容中進行快速跳轉(zhuǎn)。而且在這個視圖中，月份條目使用了不同的背景色，其中較淺的代表該月份當中沒有內(nèi)容，使用戶無需進入下層視圖即可了解這一信息。這套機制當中不包含任何“實體”的導航元素，用戶可以通過與內(nèi)容的直接交互操作來進行導航。
當我們重新設計那些與上下文相關(guān)的行為與控制元素時，也應該遵循“內(nèi)容優(yōu)先”的原則，只將那些與當前界面內(nèi)容相關(guān)的控制元素放在app bar當中。這種方式可以避免用戶界面被過多的功能圖標復雜化，無論用戶當前處于哪個視圖，他們都可以從界面底部或頂部調(diào)出app bar，執(zhí)行與當前內(nèi)容相關(guān)的控制行為。所有Metro風格的應用都應該支持這種交互機制，以便幫助用戶建立起一套普遍適用的行為預期，提升應用及平臺整體的易用性及體驗一致性。
另外，可以將那些最常用的命令放在靠近左右邊緣的地方，這樣最容易被手指觸摸到。
以“刪除相片”為例，我們來看看這個操作在兩個平臺當中的區(qū)別：
iPad版本：點擊導航欄右側(cè)的相關(guān)功能按鈕，進入編輯模式，然后點選相片，作為刪除等操作的對象。
Metro版本：
在Metro應用中，我們使用搜索契約 ，而不是傳統(tǒng)意義上的那種永遠會停留在界面某個位置上的搜索控件。用戶可以在任何支持搜索契約的應用里持續(xù)的使用側(cè)邊charms bar當中的搜索功能，而搜索結(jié)果也會以更加符合內(nèi)容自身特質(zhì)的方式自然的呈現(xiàn)出來。
首先，我們來看看在相片日志應用內(nèi)部搜索相片的情況：
iPad版本：
Metro版本：
接下來，我們看一看在相片日志應用外部搜索該應用內(nèi)相片的情況；這項功能不適用于iPad版本。這個例子演示了怎樣在其他應用當中通過搜索托盤里的應用選擇來實現(xiàn)跨應用搜索。該功能允許用戶在任何時間、任何應用內(nèi)搜索任何想要的信息。
如上圖所示，用戶當前處于Tweet@Rama 應用的環(huán)境當中，出于某種需求，該用戶希望搜索相片應用當中所有包含“Barcelona”關(guān)鍵詞的相片。輸入了關(guān)鍵詞之后，用戶在搜索托盤中選擇相片應用，使其成為搜索結(jié)果提供者，這時相片應用就會自動加載，并顯示相關(guān)的搜索結(jié)果。這種方式使得用戶無需手動在當前運行的應用與搜索目標應用之間進行切換。
對社會化媒體的整合是很多應用當中的關(guān)鍵要素。對于iPad應用，設計師通常要對應用所需支持的社交媒體頻道進行選擇，例如Twitter或Facebook等，然后開發(fā)人員會將這些服務一個個的整合到應用當中。當其中某些服務的API接口發(fā)生變化的時候，開發(fā)人員還必須調(diào)整應用當中的相關(guān)代碼，以確保其正常運作。
而在Metro風格的應用當中，我們會使用分享契約 。這種技術(shù)方案簡化了設計與開發(fā)方面的工作，因為我們不需要為用戶有可能用到的社會化服務而將它們與每個單獨的應用都逐一整合起來。不僅是社會化服務，用戶還可以將信息保存共享至平臺上所有那些使用了分享契約的應用，而開發(fā)者們則無需擔心外部服務的接口問題。站在用戶的角度，他們可以在charms bar這個固定的地方完成有關(guān)分享的操作。
下面是一個將相片日志應用中的圖片共享給其他應用服務的例子：
iPad版本：用戶需要點擊導航欄右側(cè)的相關(guān)動作按鈕，并從展開的列表中選擇“分享到Facebook”。如果要使應用支持更多的分享服務，開發(fā)人員必須在該應用當中逐一增添。
Metro版本：
我們同樣可以將當前的相片日志應用通過分享協(xié)議注冊到分享托盤的應用列表當中，這樣就可以讓用戶將其他應用當中瀏覽到的圖片內(nèi)容共享到相片日志應用當中了。
有關(guān)應用間內(nèi)容共享的詳細信息，可以到Guidelines and checklist for sharing content 當中查詢。
在傳統(tǒng)桌面設備中，用戶可以通過文件選擇器(File picker)查看本地存儲設備當中的文件或路徑。在移動環(huán)境中，所有支持文件選擇器契約的Metro應用同樣可以實現(xiàn)這樣的操作。
下面的例子演示了用戶怎樣在相片日志應用中上傳一張本地存儲的相片：
iPad版本：用戶可以在本地的相冊或一些外部服務當中選擇圖片。
Metro版本：
我們還可以進一步利用Metro應用獨特的功能特性，讓不同的應用訪問和使用彼此所包含的文件，例如在其他應用中使用相片日志應用里的圖片。通過這樣的功能，用戶無需首先在相片應用中將圖片下載到本地，然后再上傳到另外的應用中；系統(tǒng)會將所有支持文件選擇器契約的應用都看作是一個可以在任何地方讀取的文件存儲位置。
如上圖所示，用戶在PC Settings界面中點擊“瀏覽”，以更換頭像圖片。由于我們的相片日志應用支持文件選擇器契約，所以在接下來的文件選擇界面中，就會看到應用名稱出現(xiàn)在列表當中，用戶可以選擇該應用當中存儲的相片作為新的頭像。
下面兩張圖片分別演示了調(diào)出app bar和charms bar的方法：
iPad版本：
Metro版本：
無論在iOS還是Windows中，這兩個手勢在很多時候都被用作放大或縮小內(nèi)容對象的尺寸。不過對于Metro應用來說，它們還可以通過Semantic Zoom來實現(xiàn)內(nèi)容層級間的導航。用戶可以捏合某個內(nèi)容對象，來進入它所在的相關(guān)內(nèi)容組。不過，當用戶正在以全屏模式瀏覽單張相片的時候，捏合與張開的手勢還是會被用來調(diào)整圖片的尺寸。
在iPad應用中，設計師通常需要考慮兩種屏幕定向方式以及對應的界面設計方案。而Windows 8可以運行在多種設備上，包括平板和臺式機。因此，我們要考慮到顯示空間更大的情況，讓用戶在大尺寸設備中能夠看到更多的內(nèi)容。網(wǎng)格布局可以使設計方案更好的適應于不同的屏幕定向方式及不同類型的顯示設備，例如針對縱向空間更大的設備來顯示更多的當月特色圖片。
iPad版本：在不同的定向模式下，內(nèi)容完全相同，只是輸出布局進行了調(diào)整。
Metro版本：豎屏模式及大尺寸設備可以利用更大的空間顯示更多的內(nèi)容，同時，特色內(nèi)容附近的內(nèi)容輸出數(shù)量也會根據(jù)顯示設備尺寸的不同而進行優(yōu)化調(diào)整。另外，我們也可以為內(nèi)容當中的圖片制作多個版本，使它們根據(jù)不同的顯示環(huán)境響應式的輸出更合適的圖片。
在Win8中，用戶可以將一款應用以快照的方式整合在另一款應用中，實現(xiàn)多任務操作?？煺找晥D可以有效提升應用的使用時間，吸引用戶維持更長久的使用周期。通過調(diào)整兩者之間的分隔欄，用戶可以很容易的在當前主應用及快照應用之間進行切換。所以設計師需要考慮主應用與快照應用在容器尺寸發(fā)生變化時，依然能各自保持上下文內(nèi)容的可讀性。
iOS 5引入了通知中心，使得所有的通知信息都可以迅速即時的在界面頂部呈現(xiàn)出來，用戶可以將提示消息展開為完整的通知中心面板，查看所有的消息。另外，在iOS當中，應用圖片側(cè)上方的數(shù)字標識也可以讓用戶了解到該應用當中的內(nèi)容更新數(shù)量。
而Windows 8中的瓦片則整合了通知中心與數(shù)字標識這兩個方面的提示功能，用戶即可以直接在瓦片中閱讀提示信息，也可以點擊進入應用。另外，與iOS通知中心統(tǒng)一化的輸出格式有所不同，Metro風格的應用瓦片允許設計師從大量模板當中選擇不同的樣式。
你也可以使用toast notifications 向用戶進行提示。這類即時信息會在屏幕右上方出現(xiàn)，并且會對用戶在當前應用中的任務起到干擾和中斷的作用。通常，在某個應用第一次運行的時候，我們可以讓用戶選擇是否接受這種提示方式。toast類似于iOS當中出現(xiàn)在屏幕頂部的通知，不過在Windows 8中，設計師可以從一組toast模板中進行選擇，使它的呈現(xiàn)方式與當前應用具有更強的相關(guān)性。
下圖所示的是相片日志應用推送過來的評論提示：
