Windows Phone 7 UI設(shè)計初學(xué)者入門
51CTO在Windows Phone 7 UI設(shè)計理念這篇文章中，介紹了當(dāng)使用Windows Phone Developer Tools 來開發(fā)Windows Phone 7的應(yīng)用程序時，不管是使用WPDT Beta開發(fā)Windows Phone應(yīng)用程序，還是開發(fā)Windows Phone上的Silverlight應(yīng)用程序和XNA 游戲程序，一個良好的用戶界面（User Interface，UI）是開發(fā)Windows Phone應(yīng)用程序的第一關(guān)。
我們從未停止過追求美麗事物的步伐，也從未停止過設(shè)計出更美、更炫的產(chǎn)品出來。拿微軟來說，從Dos6.2到Windows 3.1、Windows 98、Windows XP以及2009年發(fā)布的Windows 7，用戶界面越來越美觀、漂亮，顏色越來越豐富，操作越來越方便，功能也越來越強大。這是微軟不斷追求用戶體驗的結(jié)果。在這篇文章中，將給大家介紹Windows Phone 7 UI設(shè)計中的幾個重要問題，分成三個部分來介紹：Windows Phone 7 UI設(shè)計特色、Windows Phone 7 UI設(shè)計原則、Windows Phone 7應(yīng)用程序控件。
Windows Phone 7 UI設(shè)計特點
在介紹Windows Phone 7 UI設(shè)計特色之前，簡單介紹一下UI設(shè)計及特點。
UI設(shè)計 (UI Design)是與交互設(shè)計(interactive design)、可用性研究(usability research)、人力因素(human factors)、信息結(jié)構(gòu)工程師(information architect)相互聯(lián)系又各有側(cè)重的一些概念和職業(yè)，這里我們不去深究。UI設(shè)計著重體現(xiàn)人機交互、操作邏輯和界面美觀三個方面。
UI設(shè)計更重要的是要理解用戶與程序的關(guān)系。一個良好的用戶界面關(guān)注的是用戶目標(biāo)的實現(xiàn)，包括視覺元素與功能操作在內(nèi)的所有東西都需要完整一致。
Windows Phone 7 中的UI設(shè)計也著重體現(xiàn)人機交換、操作邏輯和界面美觀三個方面，具體說來有以下幾個特點：
特點一：多種輸入方式，為觸摸而設(shè)計
Windows Phone 7的用戶界面有四種輸入方式：觸摸手勢、虛擬鍵盤、Windows Phone 7的硬件按鈕和傳感器。觸摸手勢是單指或者多個指頭在觸摸屏上進行一些移動。觸摸手勢是用戶和Windows Phone 7進行交互的主要方式，支持的觸摸有兩種：單點觸摸和多點觸摸，其中單點觸摸的手勢有：單擊、雙擊、平移、劃動、長按；多點觸摸的手勢有：縮放。
特點二：三種屏幕方向
Windows Phone 7支持三種類型的屏幕方向：豎屏，向左的橫屏和向右的橫屏。向左橫屏和向右橫屏之間的區(qū)別是應(yīng)用程序工具欄和系統(tǒng)托盤的方位不一樣。應(yīng)用程序不能指定只是支持向左橫屏或者向右橫屏的應(yīng)用程序工具欄和系統(tǒng)托盤的方位，需要兩種都同時支持。這可能是和在計算機上運行的程序UI很大不同的一個方面。
特點三：獨特的頁面框架及布局
Windows Phone 7的應(yīng)用程序是基于 Silverlight 的頁面瀏覽模式，用戶可以在不同內(nèi)容的屏幕上相互導(dǎo)向和瀏覽。Windows Phone 7的頁面框架及布局如下圖1所示：
圖1 Windows Phone 7頁面框架及布局
在圖1中，Windows Phone 7的頁面中，包含了一個稱為Frame Control（框架）的頂層容器控件，其可以承載 Page Control（頁面）。在應(yīng)用程序中，頁面可以實現(xiàn)內(nèi)容的分離。Windows Phone 7提供框架和頁面類，以方便導(dǎo)航到獨立的內(nèi)容章節(jié)中。其實這類似于ASP.Net應(yīng)用程序中的Master Page（母版頁）。
特點四：使用主題
這個特點類似于ASP.Net應(yīng)用程序中的主題，使用主題的優(yōu)點是保持與 Metro 設(shè)計原則的一致性和兼容性，能確保用戶界面元素以及控件呈現(xiàn)的一致性，防止不和諧的用戶體驗開發(fā)人員可以使用主題，也可以在應(yīng)用程序級別使用代碼來改變主題。
Windows Phone 7 UI設(shè)計原則
界面設(shè)計是一個復(fù)雜的有不同學(xué)科參與的工程，認(rèn)知心理學(xué)、設(shè)計學(xué)、語言學(xué)等在此都扮演著重要的角色。用戶界面設(shè)計的三大原則是：置界面于用戶的控制之下；減少用戶的記憶負(fù)擔(dān)；保持界面的一致性。結(jié)合Windows Phone 7UI設(shè)計的特點，在Windows Phone 7 UI設(shè)計中，應(yīng)遵循以下原則：
原則一：支持多種輸入，包括觸摸、虛擬鍵盤、按鈕和傳感器
Windows Phone 7的用戶界面是為了觸摸交互而設(shè)計的，所有的導(dǎo)航通過一系列手指手勢的移動組合而完成。在使用觸摸時就需要設(shè)計點擊區(qū)域的大小，每一個可以被觸摸的 UI 元素應(yīng)該可以被手指方便的點擊，如下圖2所示：
圖2 Windows Phone 7的輸入設(shè)計
原則二：統(tǒng)一的配色、頁面框架和整套文字
在計算機上的程序中需要使用統(tǒng)一的配色、頁面框架和文字設(shè)置，在Windows Phone 7設(shè)計中一樣要遵循這一原則。在Windows Phone 7的頁面設(shè)計中，考慮容器控件、導(dǎo)航控件和頁面布局的一致性，考慮列表的多種展現(xiàn)形式，如以列表顯示或者拆分屏幕以形象的圖片顯示。
原則三：使用Metro主題控件作為交互元素
推薦您在應(yīng)用程序中使用的標(biāo)準(zhǔn)Metro主題控件。這些控件已經(jīng)為支持觸摸交互并基于Windows Phone 7 UI設(shè)計及人機交互指南手冊做了優(yōu)化調(diào)整。Metro主題控件設(shè)計UI如下圖3所示：
圖3 Metro 主題
除此之外，在《Windows Phone 7 UI設(shè)計及人機交換指南V1.0》中提到了一下三點需要注意的：
◆要理解適當(dāng)?shù)睦谜Z音語調(diào)可以創(chuàng)建一個更具吸引力的終端用戶體驗.開發(fā)人員應(yīng)該精心開發(fā)應(yīng)用程序，來提供清晰友好的用戶界面。
◆良好定義的標(biāo)準(zhǔn)化準(zhǔn)則將使你的應(yīng)用程序一致性，放置最終用戶在使用時有粗糙的體驗。
◆UI設(shè)計中必須使用正確的標(biāo)點符號，同樣，在你的應(yīng)用程序中要保持一致。
Windows Phone 7應(yīng)用程序控件
Windows Phone 7應(yīng)用程序開發(fā)的控件包括兩類：Windows Phone 7 應(yīng)用程序控件和Windows Phone 7 系統(tǒng)控件。Windows Phone 7 應(yīng)用的程序控件如下圖4中左圖所示：
圖4 Windows Phone 7標(biāo)準(zhǔn)控件與VS.Net標(biāo)準(zhǔn)控件
上圖中右側(cè)是VS.Net所帶的標(biāo)準(zhǔn)控件，由上圖比較我們可以看出：Windows Phone 7的控件比VS.Net標(biāo)準(zhǔn)控件要少，但是也有一些手機開發(fā)中使用的一些很有特點的控件：如Ellipse（橢圓）、Progress Bar（進度條）、Slider（滑動條）、Border（邊框）。
除了應(yīng)用控件，還有一些控件也屬于Windows Phone 7的控件，這些控件是系統(tǒng)控件，包括：系統(tǒng)托盤和應(yīng)用工具欄、上下文菜單、WP消息通知、進度顯示器。
小結(jié)
在Windows Phone 7UI設(shè)計過程中，我們一方面需要考慮屏幕的分辨率，另一方面還要考慮整體界面的風(fēng)格，所幸Windows Phone 7提供了主題和metro標(biāo)準(zhǔn)控件來幫助我們設(shè)計風(fēng)格統(tǒng)一并且支持個性化的UI。在UI設(shè)計的過程中，可以通過WPDT Beta以所見即所得的方式來進行UI的設(shè)計，還可以把UI設(shè)計與數(shù)據(jù)分離。
【編輯推薦】
