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