淺析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.