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