淺析Windows Phone 7之用戶交互設計

在今年2月15日巴塞羅那的Mobile World Congress 2010大會上,微軟終於正式宣告了其下一代的智能手機平台Windows Phone 7 Series(目前已經更名為Windows Phone 7)。這半年來,隨著各大媒體對於Windows Phone 7的關注度的日益提高,大家對Windows Phone 7的了解也越來越多。同時,為了能夠在廣大開發者在Windows Phone 7正式上市前順利的開發出Windows Phone 7上的相關應用,微軟也已經在這兩個月陸續的向Windows Phone 7的第一波發行國家的開發人員發放了幾千台Windows Phone 7的開發樣機。

Metro

從早期的Pocket PC到後來的Windows Mobile操作系統,微軟的智能手機平台最為人所詬病的一點就是:它太像一個電腦而不是手機了。這一點放在七八年前或許還能作為證明其功能強大的優勢來說說,放在現在只能讓人搖頭嘆息。直到Windows Phone 7的出現才真正讓人眼前一亮,或許這才是用戶所需要的智能手機操作系統。 Windows Phone 7採用了一套稱之為“Metro”的設計規範來設計它的用戶界面和交互部分。之所以起名叫做“Metro”,是因為這是從大家常見的地鐵中對於乘客​​的指示系統中汲取了大量的經驗:簡潔清晰、快速、內容為主。微軟自己則對Metro描述為:“Metro is our design language. We call it Metro because it's modern and clean. It's fast and in motion. It's about content and typography. And it's entirely authentic.”

image

圖1 – Windows Phone 7的Metro UI

Panorama

還記得在Windows Mobile中,如果程序具有多個不同的視圖來展現不同的內容的時候您會怎麼安排這些內容麼?沒錯,最常用的做法莫過於建立多個窗體,而用戶通過窗體上的按鈕或者超鏈接等控件的操作來在多個窗體之間進行跳轉。這樣做其實就是一種完全的電腦上的行為的模擬,對手機的用戶其實是很不方便的。一則用戶需要在某些特定的控件上點擊才能進入所需要的視圖;二來用戶往往容易迷失在多個窗體之中不知道該如何返回或者去往想要的窗體。

image



圖2 – 用戶容易在多窗體中迷失

Metro給我們帶來的最大的改變之一,就是帶來了Panorama(全景視圖)。它在Windows Phone 7中的六個​​Hub(People, Music & Video, Pictures, Games, Marketplace, Office)中被廣泛使用。全景視圖不同於以往的任何一個手機系統的用戶界面,不再是讓你的內容去適應狹小的手機屏幕,也不再是在不同的窗體之間來回切換。它提供了一種全新的視圖,在水平方向上擴展內容到屏幕之外,來展現/集成不同的控件、數據和服務,就好像把它們排佈在一張橫軸的畫卷上。當前可視區域所停留的部分,則只是手機屏幕的大小部分,就好像畫卷上的一個滑動窗口。用戶所需要做的只是輕輕地在界面上橫向滑動手指,這張畫卷就會隨之而動將你想要看的內容帶到你眼前的焦點區域。

image

圖3 – 全景視圖

Pivot

對於多內容的組織,其實還有一種源自於桌面應用程序的形式。那就是通過標籤頁,它將多個內容頁面都放在同一個窗體內,不過某一時刻只能看到一個標籤頁的內容。用戶可以通過點擊標籤來切換視覺區域內所展現的內容頁面。

image

圖4 – 標籤頁

這種組織方式有效地解決了多窗體中容易導致用戶在窗體中迷失的狀況,但是它也有一些問題。例如窗體的下方往往會有一些菜單欄,而點擊標籤頁的時候會不小心觸碰到這些菜單項;當標籤頁過多的時候,用戶不得不點擊左右箭頭來查看其他的標籤。 HTC在其Windows Mobile產品中增加了一套名為HTC Sense的用戶界面,它的本質其實也就是標籤頁。只不過HTC很好的規避了標籤頁的這些缺陷,例如加大標籤用圖標來代替以防止點擊不准確;通過滑動的方式在多個標籤中切換​​。

相應的,在Windows Phone 7中微軟也提供了類似的解決方案,Pivot(樞軸)控件,用來在這狹小的屏幕中更好地組織內容。但是它並不是一個全新的控件,其實在Windows Mobile 6.5.3中它就已經露出了身影。只不過在Windows Phone 7中對其又做了一些修改使得它更加符合Metro設計規範。

image

圖5 – 樞軸視圖

我們會看到,Pivot控件將標籤內容放到了頂端用高亮文字標識。這樣既容易提醒用戶當前所處的位置,又不至於和下方的App Bar中的命令按鈕靠得太近而帶來誤操作的風險。

Application Bar

不管是桌面應用或者基於瀏覽器的網站,還是手機上的移動應用程序,菜單是一項很重要的功能導航系統。用戶可以通過它來執行某些命令或者通過它在不同的內容頁面跳轉。在早期的Windows Mobile產品(Pocket PC 2002/2003)中我們會發現它有著很濃厚的桌面應用的影子,在窗體的下方密密麻麻的排佈著小小的菜單項。用戶必須小心翼翼的點擊這些菜單才不會至於點擊錯誤。同時,這些菜單項上還可能有子菜單的選擇。這時候,你拿著觸筆就好像是用鼠標一樣必須非常精準才行。這種導航方式顯然不利於手機用戶的單手操作。一直到了Windows Mobile 5的時代,微軟對菜單系統才有所改善,下方的菜單欄中只允許排布兩個菜單項,如果有更多的菜單項,可以通過這些菜單的子菜單來實現。

image

圖6 – Windows Mobile系統中的菜單

但是這種改進並不足以滿足用戶的實際需求。因為只有左右兩個菜單項,如果用戶的菜單項超過2個的話,實際上當前界面中最多只有一個菜單項可用於直接的操作命令(另外一個必須設置成子菜單來容納更多的菜單項)。所以它導致了用戶往往需要展開菜單項來操作一些命令。微軟在Windows Phone 7中對菜單系統又做了一些改進。現在的菜單系統稱之為Application Bar,其中包含命令按鈕和菜單項兩種方式。通常情況下,只顯示最多四個常用的命令按鈕,當用戶需要查看更多的命令的時候則再來展開菜單項。

imageimage

圖7 – Windows Phone 7中的Application Bar

小結

由於時間和篇幅的緣故筆者無法一一對Windows Phone 7中的用戶界面和交互設計部分作詳細研究。當然,Metro帶給大家的遠遠不止是全景視圖、樞軸控件以及菜單系統的改變。它不但包含著大量控件的設計和使用規範,也對用戶界面和用戶交互都做了很詳細的解釋和設定。如果您想要開始研究開發Windows Phone 7上的應用程序的話,一定不要忘了去微軟的官方網站下載《UI Design and Interaction Guide for Windows Phone 7》(目前版本v2.0)。

目前該指導手冊的版本仍然是基於Beta版SDK的。在這裡需要注意的是,目前發布的Windows Phone 7的beta版的SDK中並沒有包含全景視圖和樞軸這兩個控件(不過在互聯網上你可以搜索到不少第三方對它們的實現),因為微軟還在對這兩個重要的控件進行最後的調試和準備。當然,微軟已經確認在最終發行的正​​式版的SDK中會包含這兩個控件的官方版本。

來源:http://www.boxui.com/?p=1496

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.