關于WP7剛開始想寫一篇全面地關于交互的文章，寫著寫著發現怎么也擺脫不了零散與空洞，也難怪,想表達的面太廣必然挖掘的深度會變淺，最后下定決心與其在大而全上糾結不如專心解讀一個應用，下面我就以移動互聯網的殺手級應用之一瀏覽器為主線管窺WP7的設計。

應用圖標：

WP7自帶的瀏覽器是Internet Explorer,它的Logo與桌面IE的 logo形態相同只不過跟隨WP7的風格處理成了單色的. 下圖左邊的方形圖標為WP7 起始頁的，右邊的為程序列表中的：

處理后的圖標在首屏的識別性還是非常好 的，如下圖

瀏覽器起始頁：

點擊程序啟動圖 標進入瀏覽器起始頁：

起始頁由上至下分為四部分：狀態欄，地 址欄，內容區域，工具欄和菜單：

狀態欄：狀態欄顯示手機信號、電量、時 間等。WP7的狀態欄與Iphone和Android有兩點不同，一，狀態欄并非一直存在， 例如在全景視圖（Panorama Application）頁面是不存在狀態欄的；二，狀態欄 上的信息不是一直存在的，例如在進入瀏覽器后幾秒鐘內就會自動消失（狀態欄 還在只是狀態信息消失了），狀態信息消失后頂部顯得清爽多了，如圖：

不要擔心看不到狀態信息，只要點擊狀態 欄它們又都會跑出來。

地址欄：WP7的地址欄將刷新按鈕放到了地址欄的左邊 。而且在加載頁面的到時候，會在刷新的位置上顯示“X“，點擊取消頁面加載 。將兩個圖標放到了一個位置上，這種做法在其他平臺上倒是有，但是放到地址 欄的左邊還是第一次。

內容區域：WP7的頁面瀏覽和Iphone一樣，拖動到頂端 再向下拖動時頁面整體會被拉下來，有所不同的是WP7增加了頁面被擠壓的效果 ，表現上更加生動了。

?

工具欄與菜單：工具欄部分的處理也很 有特色，中間部分是三個非常醒目的圖標，分別是加入書簽、書簽、以及多窗口 ，稍加注意就會發現，在工具欄的右側還有三個“小點“，點擊就會發現它是菜 單項的入口。點擊就會看到從工具欄下面升起的菜單項。

瀏覽器里菜單項分別是：前進、分享頁面 、查找頁面內容、添加到主屏以及設置。從菜單項的安排上可以看出，工具欄部 分是將最常用的放到工具欄上比較明顯的位置，便于用戶的操作，而將前進等不 常用的功能放到了相對弱一些的菜單項里面。將最簡潔、明了的界面呈現給用戶 。WP7的菜單策略優于Android，WP7沒有硬件菜單鍵，如果有菜單項則屏幕底端 出現工具欄并且會有三個點示意，如果沒有則不會出現工具欄，這樣的策略有助 于用戶對功能的感知，Android當中用戶是不知道界面是否包含菜單的。

前進后退：

雖然IE沒有在工具欄上放置前進后退按鈕，但由于前進后退 是瀏覽器的必備功能，此處把它拿出來單獨做分析。

WP7有硬件返回所以選擇 不在工具欄上放置前進后退（后退由硬件承擔，前進隱藏在菜單中），這樣的設 計在Android自帶瀏覽器中被證明是成功的，然而在IE中卻存在問題。

先看 Android自帶瀏覽器的返回策略：

如圖在“瀏覽頁面b”點擊主屏鍵回到起始頁后再進入瀏覽器回到“瀏覽頁面 b”，此時點擊硬件返回會在頁面內后退，后退到頭不能再后退時返回起始頁。 這樣的策略雖說沒有按照用戶的來路返回，但能夠滿足用戶在網頁中后退的需求 并且也不會覺得奇怪。

再看IE的返回策略：

同樣的情形，IE的處理策略與Android不同，在“瀏覽頁面b”時點擊硬件返 回回到了起始頁（按照用戶來路返回），再次點擊硬件返回回到了上一應用“應 用一”（沒有按照用戶的來路返回）這樣就有一個嚴重的問題：用戶一旦回到起 始頁便再也不能后退到之前瀏覽的頁面?。ㄅ园祝弘m然都是硬件返回但WP7的策 略與Android不同，Android到起始頁后便不能后退了，WP7回到起始頁后依然可 以后退）；從這一點也看出了硬件返回不好的地方，返回功能雖說強大但兼顧多 種職責時也難免混亂。

網址輸入：

分析完起始頁，我們要輸入網 址瀏覽了。

點擊地址欄會彈出鍵盤，同時內容區域蒙灰，這些都與主流平臺 一致，WP7甚至沿襲了Iphone的習慣把訪問按鈕放在了鍵盤上。

WP7的自帶鍵盤交互上也沒有創新的地方 ，不過在視覺上做了簡化，試用后效果還是非常不錯的。

內容瀏覽：

由于這款瀏覽器不支持Flash和HTML5也不支持微軟自家的Silverlight， 頁面展示效果不盡如人意，百度新聞和hao123的HTML5效果都無法展現。

接下 來我們看看IE的橫屏是如何處理的？

IE對橫屏也做了減法，在橫屏狀態下不 存在“狀態欄”、“地址欄”以及“工具欄和菜單”所有的屏幕區域均用來展示 內容。如圖：

補充一點，WP7系統下橫屏的設計原則是 應用可以選擇是否保留狀態欄與工具欄，如果保留則頁面布局如下：

圖中狀態欄與工具欄的位置與形狀不變， 只是圖標與文字掉轉了方向。

接下來我們看一看IE的其他功能：

多窗口

WP7的多窗口沒有任何新意，頁面甚至簡潔到有點粗糙：

添加書簽：

?

添加書簽頁面視覺風格和WP7是統一的， 頁面布局很傳統。

書簽和歷史頁面：

書簽和歷史列表的表現形式相同然而他們 本身又不屬于同一內容，因此此處使用了Pivot Control頁面類型而非著名的 Panorama Application。

可以把Pivot Control理解為Iphone和Android的Tab 在WP7中的變種，頁面分為四部分：狀態欄（信息已隱藏），標題欄（由于書簽 和歷史沒有一個統一的名稱概括，這個頁面省略了標題），Pivot ，頁面內容。 Pivot Control最大的特點是可以左右滑屏切換頁面，并且可以循環滾動。

在 書簽頁面可以長按書簽列表彈出長按菜單“編輯”“刪除”，長按出菜單沿襲了 Android的交互。

在歷史頁面點擊清空按鈕彈出確認框，在 WP7系統下，確認框和Toast都在屏幕頂部。確認框如下圖左，Toast如下圖右， WP7中的Toast與Android不同，WP7中的Toast點擊會去相應頁面。

這里對歷史有個小建議，目前的歷史列表 太長看起來很費勁，可以參考WP7 People中對聯系人列表的索引對歷史信息做索 引。

通訊錄列表藍色的方塊是字母索引，點擊 后可以展現所有的索引字母，如下圖：

點擊相應的字母后列表就會定位在該位置 。WP7的通訊錄索引方式直觀并且效率高，是WP7系統設計的一大亮點。