轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(   yvirxh.cn  )是一家專注而深入的設(shè)計機(jī)構(gòu) ，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、  cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

 來源： http://beforweb.com/node/92

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，            請點(diǎn)這里  

在本篇案例當(dāng)中，我們將幫助各位使用Metro風(fēng)格的設(shè)計原則對原有的iOS應(yīng)用設(shè)計方案進(jìn)行重新構(gòu)思，大家會了解到怎樣將iPad當(dāng)中一些常見的界面元素及體驗(yàn)?zāi)Ｊ睫D(zhuǎn)換成為Metro風(fēng)格，以打造全新的Windows 8應(yīng)用。我們將對同一款應(yīng)用在兩個平臺中的不同設(shè)計方式進(jìn)行對比，幫助各位了解怎樣將你的應(yīng)用與Windows 8以及Metro設(shè)計原則進(jìn)行完美的融合。

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

 

這款應(yīng)用最初是為iPad設(shè)計的，如下圖所示。

 

從設(shè)計及體驗(yàn)?zāi)Ｊ降慕嵌瘸霭l(fā)，該應(yīng)用可以大致被解構(gòu)為六個方面：

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

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

布局與導(dǎo)航

聚焦于內(nèi)容

這款相片日志應(yīng)用要有能力對兩方面的內(nèi)容進(jìn)行良好的呈現(xiàn)，即展示用戶的相片以及與這些相片相關(guān)的社交動態(tài)。在創(chuàng)建Metro風(fēng)格應(yīng)用時，我們的第一個目標(biāo)就是將原有iPad應(yīng)用當(dāng)中的那些與核心功能和內(nèi)容沒有直接關(guān)聯(lián)的界面元素統(tǒng)統(tǒng)移除，例如頂部的導(dǎo)航欄、底部的頁面指示符、標(biāo)簽欄等。不用擔(dān)心導(dǎo)航的問題，我們在后文中會談到如何讓用戶在需要的時候調(diào)出app bar。

iPad版本：

• A.導(dǎo)航欄
• B.內(nèi)容
• C.頁面指示符
• D.標(biāo)簽欄

Metro版本：

• B.內(nèi)容與Logo

相片內(nèi)容的呈現(xiàn)方式

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

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

Metro版本：針對當(dāng)月內(nèi)容，呈現(xiàn)更多的相片，包括標(biāo)題、評論數(shù)量等信息；用戶可以在首屏中瀏覽到更多的“高亮”內(nèi)容。

將樹形信息結(jié)構(gòu)扁平化

iPad版本中的信息結(jié)構(gòu)及對應(yīng)的導(dǎo)航機(jī)制是典型的樹形模式；在Metro版本中，我們要使其扁平化，減少導(dǎo)航操作，讓用戶最關(guān)注的內(nèi)容盡量多的呈現(xiàn)在首屏當(dāng)中。為了實(shí)現(xiàn)這一目標(biāo)，我們將去除iPad中的標(biāo)簽欄，將一部份評論內(nèi)容直接輸出到首屏。

 

iPad版本：

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

 

Metro版本：

• 將評論與相片內(nèi)容整合在同一個界面視圖中
• hub風(fēng)格的設(shè)計方式，讓最具相關(guān)性的內(nèi)容自成體系
• 要查看更多評論內(nèi)容，用戶可以點(diǎn)擊該內(nèi)容組的標(biāo)題，即“Recent comments”

讓導(dǎo)航操作更加符合“直接操縱 ”的理念

“直接操縱”的理念可以讓用戶以更加符合直覺的方式與內(nèi)容及導(dǎo)航系統(tǒng)進(jìn)行互動。在Metro風(fēng)格的應(yīng)用中，我們要盡可能多的在恰當(dāng)?shù)牡胤截瀼剡@樣的交互設(shè)計思想。例如使用Windows提供的SemanticZoom 對象作為導(dǎo)航控件，可以讓用戶的操作更符合心智，更有效率。

iPad版本：點(diǎn)擊導(dǎo)航欄中的“Years”按鈕，彈出導(dǎo)航列表，選擇某個年份進(jìn)入相關(guān)視圖界面。

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

命令與行為

將與當(dāng)前界面相關(guān)的控制元素放到app bar當(dāng)中

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

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

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

iPad版本：點(diǎn)擊導(dǎo)航欄右側(cè)的相關(guān)功能按鈕，進(jìn)入編輯模式，然后點(diǎn)選相片，作為刪除等操作的對象。

Metro版本：

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

契約：搜索、分享及其他

通過搜索契約使搜索體驗(yàn)更加集約化

在Metro應(yīng)用中，我們使用搜索契約 ，而不是傳統(tǒng)意義上的那種永遠(yuǎn)會停留在界面某個位置上的搜索控件。用戶可以在任何支持搜索契約的應(yīng)用里持續(xù)的使用側(cè)邊charms bar當(dāng)中的搜索功能，而搜索結(jié)果也會以更加符合內(nèi)容自身特質(zhì)的方式自然的呈現(xiàn)出來。

首先，我們來看看在相片日志應(yīng)用內(nèi)部搜索相片的情況：

iPad版本：

• 只能通過首頁導(dǎo)航欄中的搜索控件執(zhí)行搜索
• 用戶輸入關(guān)鍵詞時，搜索建議會動態(tài)輸出，用戶可以直接從中進(jìn)行選擇

Metro版本：

• 用戶調(diào)出charms bar使用搜索，應(yīng)用列表中默認(rèn)選中的就是當(dāng)前的相片日志應(yīng)用。
• 當(dāng)用戶開始輸入搜索關(guān)鍵詞時，托盤中會即時出現(xiàn)搜索建議。用戶提交了查詢關(guān)鍵詞后，可以看到完整的搜索結(jié)果視圖。

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

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

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

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

而在Metro風(fēng)格的應(yīng)用當(dāng)中，我們會使用分享契約 。這種技術(shù)方案簡化了設(shè)計與開發(fā)方面的工作，因?yàn)槲覀儾恍枰獮橛脩粲锌赡苡玫降纳鐣?wù)而將它們與每個單獨(dú)的應(yīng)用都逐一整合起來。不僅是社會化服務(wù)，用戶還可以將信息保存共享至平臺上所有那些使用了分享契約的應(yīng)用，而開發(fā)者們則無需擔(dān)心外部服務(wù)的接口問題。站在用戶的角度，他們可以在charms bar這個固定的地方完成有關(guān)分享的操作。

下面是一個將相片日志應(yīng)用中的圖片共享給其他應(yīng)用服務(wù)的例子：

iPad版本：用戶需要點(diǎn)擊導(dǎo)航欄右側(cè)的相關(guān)動作按鈕，并從展開的列表中選擇“分享到Facebook”。如果要使應(yīng)用支持更多的分享服務(wù)，開發(fā)人員必須在該應(yīng)用當(dāng)中逐一增添。

Metro版本：

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

我們同樣可以將當(dāng)前的相片日志應(yīng)用通過分享協(xié)議注冊到分享托盤的應(yīng)用列表當(dāng)中，這樣就可以讓用戶將其他應(yīng)用當(dāng)中瀏覽到的圖片內(nèi)容共享到相片日志應(yīng)用當(dāng)中了。

有關(guān)應(yīng)用間內(nèi)容共享的詳細(xì)信息，可以到Guidelines and checklist for sharing content 當(dāng)中查詢。

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

在傳統(tǒng)桌面設(shè)備中，用戶可以通過文件選擇器(File picker)查看本地存儲設(shè)備當(dāng)中的文件或路徑。在移動環(huán)境中，所有支持文件選擇器契約的Metro應(yīng)用同樣可以實(shí)現(xiàn)這樣的操作。

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

iPad版本：用戶可以在本地的相冊或一些外部服務(wù)當(dāng)中選擇圖片。

Metro版本：

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

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

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

觸控與手勢

在界面邊緣輕掃，調(diào)出應(yīng)用內(nèi)部或系統(tǒng)全局的相關(guān)工具欄

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

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

文件多選

iPad版本：

• 用戶首先要進(jìn)入一種特定的編輯模式來執(zhí)行選擇及相關(guān)的編輯操作，因?yàn)?ldquo;點(diǎn)擊”在通常情況下是用來加載或進(jìn)入某項(xiàng)條目的。
• 當(dāng)選擇與編輯的操作結(jié)束后，要退出編輯模式。

Metro版本：

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

雙指張開與捏合

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

屏幕定向與視圖模式

面向不同的屏幕定向方式及設(shè)備尺寸，提升布局的適應(yīng)性

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

iPad版本：在不同的定向模式下，內(nèi)容完全相同，只是輸出布局進(jìn)行了調(diào)整。

Metro版本：豎屏模式及大尺寸設(shè)備可以利用更大的空間顯示更多的內(nèi)容，同時，特色內(nèi)容附近的內(nèi)容輸出數(shù)量也會根據(jù)顯示設(shè)備尺寸的不同而進(jìn)行優(yōu)化調(diào)整。另外，我們也可以為內(nèi)容當(dāng)中的圖片制作多個版本，使它們根據(jù)不同的顯示環(huán)境響應(yīng)式的輸出更合適的圖片。

使用快照視圖吸引用戶

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

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

消息通知

使用瓦片呈現(xiàn)動態(tài)信息更新

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

而Windows 8中的瓦片則整合了通知中心與數(shù)字標(biāo)識這兩個方面的提示功能，用戶即可以直接在瓦片中閱讀提示信息，也可以點(diǎn)擊進(jìn)入應(yīng)用。另外，與iOS通知中心統(tǒng)一化的輸出格式有所不同，Metro風(fēng)格的應(yīng)用瓦片允許設(shè)計師從大量模板當(dāng)中選擇不同的樣式。

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

下圖所示的是相片日志應(yīng)用推送過來的評論提示：