從iOS到Metro – 重新設(shè)計(jì)應(yīng)用的交互模式
上周有幸玩了一會(huì)Metro的平板。單說(shuō)視覺(jué)風(fēng)格,仍是我的大菜,但真正用起來(lái)卻不覺(jué)得舒暢,尤其是橫向?yàn)g覽內(nèi)容列表的時(shí)候,視線不停的在X軸與Y軸之間切換,很快感到頭暈?zāi)垦?,這一切似乎比瀑布流更加兇殘。
當(dāng)然,僅僅是個(gè)人感受;我不想這樣就得出Metro中看不中用的結(jié)論。做這篇譯文大致可以代表我的立場(chǎng),即相比于iOS來(lái)說(shuō),Windows這套東西確實(shí)有很多獨(dú)到的精華在里面;我想通過(guò)這樣的文章加深認(rèn)識(shí),了解一些表象背后的東西。也希望本文可以給那些已經(jīng)熟悉iOS,但對(duì)Metro及Windows平板仍屬于初識(shí)的朋友們一個(gè)小小的起點(diǎn)。接下來(lái)讓我們進(jìn)入正文,一篇與來(lái)自微軟官方的案例文章。
iOS是個(gè)不錯(cuò)的平臺(tái),人們?cè)谄渲袆?chuàng)造了各類(lèi)觸控優(yōu)先、有趣且吸引人的應(yīng)用。不過(guò),隨著Windows 8的登場(chǎng),設(shè)計(jì)師和開(kāi)發(fā)者們又多了一個(gè)釋放創(chuàng)意能量的新舞臺(tái)。
在本篇案例當(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)J睫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ù)可以在線查看和管理他們的照片或視頻。下圖是這款應(yīng)用的Metro版本:
這款應(yīng)用最初是為iPad設(shè)計(jì)的,如下圖所示。 從設(shè)計(jì)及體驗(yàn)?zāi)J降慕嵌瘸霭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版本: ::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::2 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)用訪問(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ù)操作??煺找晥D可以有效提升應(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)論提示:
布局與導(dǎo)航
聚焦于內(nèi)容
相片內(nèi)容的呈現(xiàn)方式
將樹(shù)形信息結(jié)構(gòu)扁平化
讓導(dǎo)航操作更加符合“直接操縱”的理念
命令與行為
將與當(dāng)前界面相關(guān)的控制元素放到app bar當(dāng)中
契約:搜索、分享及其他
通過(guò)搜索契約使搜索體驗(yàn)更加集約化
通過(guò)分享契約與更多的人互通信息
使用文件選擇器從不同的地方獲取文件
觸控與手勢(shì)
在界面邊緣輕掃,調(diào)出應(yīng)用內(nèi)部或系統(tǒng)全局的相關(guān)工具欄
文件多選
雙指張開(kāi)與捏合
屏幕定向與視圖模式
面向不同的屏幕定向方式及設(shè)備尺寸,提升布局的適應(yīng)性
使用快照視圖吸引用戶(hù)
消息通知
使用瓦片呈現(xiàn)動(dòng)態(tài)信息更新
- 目前還沒(méi)評(píng)論,等你發(fā)揮!