以移動互聯網的殺手級應用之一瀏覽器為主線管窺WP7的設計

2020-02-17 16:07:56

字體：大中小

來源：轉載

供稿：網友

關于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”時點擊硬件返回回到了起始頁（按照用戶來路返回），再次點擊硬件返回回到了上一應用“應用一”（沒有按照用戶的來路返回）這樣就有一個嚴重的問題：用戶一旦回到起始頁便再也不能后退到之前瀏覽的頁面！（旁白：雖然都是硬件返回但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的交互。