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