?

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

圖一

?

二 ??定制啟動頁 啟動頁是應用程序啟動時顯示的第一個頁面，也是一個可以修改的頁面。啟動頁是位于工程目錄下的一個名為SplashScreenImage.jpg的圖片。只要用自己的圖片替換掉系統(tǒng)默認圖片，并使用相同的名字，當應用程序在此啟動時，就可以在啟動頁看到自己的圖片了（如圖二）。另外，啟動頁面停留的時間不可太長，應在5秒內(nèi)結(jié)束，轉(zhuǎn)入應用程序頁面。否則的話，用戶有可能會用腳投票，關掉你的應用。

圖二

?

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

?

圖三

四? 使用深淺兩主題

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

圖四

五? 觸碰

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

圖五

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

圖六

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

圖七.A

圖七.B

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

?

圖八.A

?圖八.B

九? 導航

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

圖九

?

說了這么多算是拋磚引玉，開發(fā)者還是要結(jié)合自己的產(chǎn)品，去實際驗證一下如何做一個最酷的應用。愿應用開發(fā)者在Windows Phone平臺上開發(fā)出最酷的應用，和最精彩的用戶體驗。

轉(zhuǎn)載于:https://blog.51cto.com/felixyan/690374

總結(jié)

以上是生活随笔為你收集整理的做最酷的Windows Phone应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。