淺析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.”
圖1 – Windows Phone 7的Metro UI
Panorama
還 記得在Windows Mobile中,如果程序具有多個不同的視圖來展現不同的內容的時候您會怎么安排這些內容么?沒錯,最常用的做法莫過于建立多個窗體,而用戶通過窗體上的 按鈕或者超鏈接等控件的操作來在多個窗體之間進行跳轉。這樣做其實就是一種完全的電腦上的行為的模擬,對手機的用戶其實是很不方便的。一則用戶需要在某些 特定的控件上點擊才能進入所需要的視圖;二來用戶往往容易迷失在多個窗體之中不知道該如何返回或者去往想要的窗體。
圖2 – 用戶容易在多窗體中迷失
Metro給我們帶 來的最大的改變之一,就是帶來了Panorama(全景視圖)。它在Windows Phone 7中的六個Hub(People, Music & Video, Pictures, Games, Marketplace, Office)中被廣泛使用。全景視圖不同于以往的任何一個手機系統的用戶界面,不再是讓你的內容去適應狹小的手機屏幕,也不再是在不同的窗體之間來回切 換。它提供了一種全新的視圖,在水平方向上擴展內容到屏幕之外,來展現/集成不同的控件、數據和服務,就好像把它們排布在一張橫軸的畫卷上。當前可視區域 所停留的部分,則只是手機屏幕的大小部分,就好像畫卷上的一個滑動窗口。用戶所需要做的只是輕輕地在界面上橫向滑動手指,這張畫卷就會隨之而動將你想要看 的內容帶到你眼前的焦點區域。
圖3 – 全景視圖
Pivot
對 于多內容的組織,其實還有一種源自于桌面應用程序的形式。那就是通過標簽頁,它將多個內容頁面都放在同一個窗體內,不過某一時刻只能看到一個標簽頁的內 容。用戶可以通過點擊標簽來切換視覺區域內所展現的內容頁面。
圖4 – 標簽頁
這 種組織方式有效地解決了多窗體中容易導致用戶在窗體中迷失的狀況,但是它也有一些問題。例如窗體的下方往往會有一些菜單欄,而點擊標簽頁的時候會 不小心觸碰到這些菜單項;當標簽頁過多的時候,用戶不得不點擊左右箭頭來查看其他的標簽。 HTC在其Windows Mobile產品中增加了一套名為HTC Sense的用戶界面,它的本質其實也就是標簽頁。只不過HTC很好的規避了標簽頁的這些缺陷,例如加大標簽用圖標來代替以防止點擊不準確;通過滑動的方 式在多個標簽中切換。
相應的,在Windows Phone 7中微軟也提供了類似的解決方案,Pivot(樞軸)控件,用來在這狹小的屏幕中更好地組織內容。但是它并不是一個全新的控件,其實在Windows Mobile 6.5.3中它就已經露出了身影。只不過在Windows Phone 7中對其又做了一些修改使得它更加符合Metro設計規范。
圖5 – 樞軸視圖
我們會看到,Pivot控件將標簽內容放到了頂端用高亮文字標識。這樣既容易提醒用戶當前所處的位置,又不至于和下方的 App Bar中的命令按鈕靠得太近而帶來誤操作的風險。
Application Bar
不 管是桌面應用或者基于瀏覽器的網站,還是手機上的移動應用程序,菜單是一項很重要的功能導航系統。用戶可以通過它來執行某些命令或者通過它在不同 的內容頁面跳轉。在早期的Windows Mobile產品(Pocket PC 2002/2003)中我們會發現它有著很濃厚的桌面應用的影子,在窗體的下方密密麻麻的排布著小小的菜單項。用戶必須小心翼翼的點擊這些菜單才不會至于 點擊錯誤。同時,這些菜單項上還可能有子菜單的選擇。這時候,你拿著觸筆就好像是用鼠標一樣必須非常精準才行。這種導航方式顯然不利于手機用戶的單手操 作。一直到了Windows Mobile 5的時代,微軟對菜單系統才有所改善,下方的菜單欄中只允許排布兩個菜單項,如果有更多的菜單項,可以通過這些菜單的子菜單來實現。
圖6 – Windows Mobile系統中的菜單
但 是這種改進并不足以滿足用戶的實際需求。因為只有左右兩個菜單項,如果用戶的菜單項超過2個的話,實際上當前界面中最多只有一個菜單項可用于直接 的操作命令(另外一個必須設置成子菜單來容納更多的菜單項)。所以它導致了用戶往往需要展開菜單項來操作一些命令。微軟在Windows Phone 7中對菜單系統又做了一些改進?,F在的菜單系統稱之為Application Bar,其中包含命令按鈕和菜單項兩種方式。通常情況下,只顯示最多四個常用的命令按鈕,當用戶需要查看更多的命令的時候則再來展開菜單項。
圖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
- 目前還沒評論,等你發揮!