做最酷的Windows Phone應用

 

        應用程序的UI至關重要,應用程序開發者與用戶的接觸,始於UI也止於UI。用戶界面就是我們的臉面。我們都想把最完美的UI呈現在用戶面前,那麼我們到底該怎麼做呢?做了這麼久的WindowsPhone相關工作,積累了些許的感悟,下面就和大家談談對如何做出最酷的WindowsPhone應用的一些體會。
 
         WindowsPhone 是一個全新的智能手機操作系統,它有着自己獨特的系統UI風格和操作要求,因此一個優秀的WindowsPhone應用至少應該從以下9個方面着力。
 
一   Tile
         Tile通常被稱爲窗格,它是WindowPhones7系統的一個獨特設計。應用程序的Tile可以PIN到主界面,並在上面顯示圖片,數字或者文字信息。基於Metro簡潔性的要求,Tile至少應該是純色的方塊,在此基礎上,我們可以添加背景圖片,數字和文字信息,但不可過分修飾(如圖1左側所示)。例如,3D字體,漸變色,圓角都是不可取的(如圖1右側所示)。除此之外,Tile不能是沒有含義的圖片,應該是應用程序相關的一個標誌。由於WindowsPhone系統主題有“深”和“淺”兩種,所以Tile也應該是在這兩種主題下都能清晰顯示的,這也意味着白底黑景的Tile不是好的設計。

圖一

 

二   定製啓動頁
         啓動頁是應用程序啓動時顯示的第一個頁面,也是一個可以修改的頁面。啓動頁是位於工程目錄下的一個名爲SplashScreenImage.jpg的圖片。只要用自己的圖片替換掉系統默認圖片,並使用相同的名字,當應用程序在此啓動時,就可以在啓動頁看到自己的圖片了(如圖二)。另外,啓動頁面停留的時間不可太長,應在5秒內結束,轉入應用程序頁面。否則的話,用戶有可能會用腳投票,關掉你的應用。

圖二

 

三  佈局對齊
         在應用程序界面中的文字內容,很多時候會是一種多行佈局模式,在這種佈局下要求屏幕上所有的文字左對齊,每行的第一個文字元素距離屏幕邊緣24像素(如圖三所示)。這種佈局的典型用例就是全景視圖和樞軸視圖。

 

圖三

四  使用深淺兩主題

         幕的文字配色應該與系統的主題背景“深”或者“淺”相適應(如圖四所示)。例如黑色字體在“深”主題背景下看不清,白色字體在“淺”主題背景下也會不清晰(如圖四所示).總之,你要管理好你的主題,使其與系統的色彩規範相適應。

圖四

五  觸碰

         相對於PC屏幕,手機的屏幕要小得多,可很多時候,我們總想把大量的內容放進去,其結果就是圖片,文字尺寸都比較小,且間隔也很小。這就會產生一個問題:當你用手指點擊某一元素的時候,很可能會觸碰到與其相鄰的其他元素。爲了解決這一問題,設計出具有更好用戶體驗的UI,我們建議:
·         字體最小15pt.
·         建議觸碰區域9mm以上
·         最小觸碰區域7mm以上
·         元素間最小間距2mm
·         視覺目標尺寸是觸碰目標大小60%-100%
·         發生觸碰時提供反饋

圖五

六  反饋與交互
         好的用戶體驗,要求應用對用戶的操作提供及時的反饋與交互。例如,當應用在執行大數量的任務時,應該在界面給用戶以提示,可以是一個進度條或者是不斷變化的數字等(如圖六所示)。這裏需要提一下,在WindowsPhone下的進度條有兩種動畫效果,一種是漸變式的,另一種是循環滾動,大家可以根據自己的需求選擇合適的動畫效果。

圖六

七  控件
         WindowsPhone爲大家提供了很多好用的控件,可如果使用不當的話,也會產生反效果。例如使用Silverlight控件,儘量避免使用內嵌Web控件,當應用必須內嵌Web內容時,關閉平移和縮放等觸碰功能,確保內容完全可讀。在全景視圖和樞軸視圖中,避免使用開關控件,避免使用遊標控件,因爲這容易導致手勢操作衝突。
         此外,爲了降低用戶在向TextBox輸入內容時的複雜度,WindowsPhone針對不同的輸入狀態提供了有針對性的屏幕鍵盤。例如針對數字輸入的鍵盤針對撥號輸入的鍵盤,針對登錄輸入的鍵盤等。在輸入時彈出哪種類型的鍵盤,由TextBox的InputScope屬性決定。需要注意的是,屏幕鍵盤可以自動彈出,但建議僅當頁面中不多於兩個文本框時才自動彈出,且要避免擋住屏幕的其他元素(如圖七所示)。

圖七.A

圖七.B

八  全景視圖
         Panorama控件是WindowsPhone中一個非常重要的控件,提供跨越多屏的全景式視圖(如圖八所示)。Panorama控件可以設置背景,要求背景480×800像素到1024×800像素之間,太小會被拉伸,太大會被自動裁切。此外,背景圖片要與主題內容相適應,背景太絢麗會過分吸引用戶注意,起到喧賓奪主的反效果,背景顏色與主題顏色太接近,會掩蓋主題內容。Panorama的每一個Section比例16:9,Section中縮略圖如果不加文字描述的話,可以一行放置兩個,並且建議一行最多隻放置兩個。Panorama的屏數最好不要超過4屏。Panorama的每一屏的內容可以超出屏幕範圍,但一定要慎重使用,否則會呈現很不好的用戶體驗。
 
 

 

圖八.A
 

 圖八.B

九  導航

         在做WindowsPhone開發時,我們應該儘量利用手機硬件本身給我們提供的資源,減少開發複雜度。就應用的導航操作來說,所有的WindowsPhone都有一個“返回”鍵,當我們需要從一個頁面返回之前的頁面時,直接操作“返回”鍵就可以了。如果當前頁面是應用的第一個頁面,操作“返回”鍵之後,我們應該退出應用。我們不需要在自己的應用中添加“返回”圖標,用以提供返回上一頁功能,這實際是浪費資源(如圖九所示)。同時,除了購物車等複雜場景,很少應用真正需要使用Home鍵(如圖九所示)。

圖九

 

 
         說了這麼多算是拋磚引玉,開發者還是要結合自己的產品,去實際驗證一下如何做一個最酷的應用。願應用開發者在Windows Phone平臺上開發出最酷的應用,和最精彩的用戶體驗。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章