微軟的翻身仗是怎么打的?-通過IE看WP7設(shè)計
![](http://image.woshipm.com/wp-files/img/36.jpg)
關(guān)于WP7剛開始想寫一篇全面地關(guān)于交互的文章,寫著寫著發(fā)現(xiàn)怎么也擺脫不了零散與空洞,也難怪,想表達(dá)的面太廣必然挖掘的深度會變淺,最后下定決心與其在大而全上糾結(jié)不如專心解讀一個應(yīng)用.下面我就以移動互聯(lián)網(wǎng)的殺手級應(yīng)用之一瀏覽器為主線管窺WP7的設(shè)計.
應(yīng)用圖標(biāo):
WP7自帶的瀏覽器是Internet Explorer,它的Logo與桌面IE的logo形態(tài)相同只不過跟隨WP7的風(fēng)格處理成了單色的. 下圖左邊的方形圖標(biāo)為WP7起始頁的,右邊的為程序列表中的:
處理后的圖標(biāo)在首屏的識別性還是非常好的,如下圖
瀏覽器起始頁:
點擊程序啟動圖標(biāo)進(jìn)入瀏覽器起始頁:
起始頁由上至下分為四部分:狀態(tài)欄,地址欄,內(nèi)容區(qū)域,工具欄和菜單:
狀態(tài)欄:狀態(tài)欄顯示手機(jī)信號、電量、時間等。WP7的狀態(tài)欄與Iphone和Android有兩點不同,一,狀態(tài)欄并非一直存在,例如在全景視圖(Panorama Application)頁面是不存在狀態(tài)欄的;二,狀態(tài)欄上的信息不是一直存在的,例如在進(jìn)入瀏覽器后幾秒鐘內(nèi)就會自動消失(狀態(tài)欄還在只是狀態(tài)信息消失了),狀態(tài)信息消失后頂部顯得清爽多了,如圖:
不要擔(dān)心看不到狀態(tài)信息,只要點擊狀態(tài)欄它們又都會跑出來。
地址欄:WP7的地址欄將刷新按鈕放到了地址欄的左邊。而且在加載頁面的到時候,會在刷新的位置上顯示“X“,點擊取消頁面加載。將兩個圖標(biāo)放到了一個位置上,這種做法在其他平臺上倒是有,但是放到地址欄的左邊還是第一次。
內(nèi)容區(qū)域:WP7的頁面瀏覽和Iphone一樣,拖動到頂端再向下拖動時頁面整體會被拉下來,有所不同的是WP7增加了頁面被擠壓的效果,表現(xiàn)上更加生動了。
工具欄與菜單:工具欄部分的處理也很有特色,中間部分是三個非常醒目的圖標(biāo),分別是加入書簽、書簽、以及多窗口,稍加注意就會發(fā)現(xiàn),在工具欄的右側(cè)還有三個“小點“,點擊就會發(fā)現(xiàn)它是菜單項的入口。點擊就會看到從工具欄下面升起的菜單項。
瀏覽器里菜單項分別是:前進(jìn)、分享頁面、查找頁面內(nèi)容、添加到主屏以及設(shè)置。從菜單項的安排上可以看出,工具欄部分是將最常用的放到工具欄上比較明顯的位置,便于用戶的操作,而將前進(jìn)等不常用的功能放到了相對弱一些的菜單項里面。將最簡潔、明了的界面呈現(xiàn)給用戶。WP7的菜單策略優(yōu)于Android,WP7沒有硬件菜單鍵,如果有菜單項則屏幕底端出現(xiàn)工具欄并且會有三個點示意,如果沒有則不會出現(xiàn)工具欄,這樣的策略有助于用戶對功能的感知,Android當(dāng)中用戶是不知道界面是否包含菜單的。
前進(jìn)后退:
雖然IE沒有在工具欄上放置前進(jìn)后退按鈕,但由于前進(jìn)后退是瀏覽器的必備功能,此處把它拿出來單獨做分析。
WP7有硬件返回所以選擇不在工具欄上放置前進(jìn)后退(后退由硬件承擔(dān),前進(jìn)隱藏在菜單中),這樣的設(shè)計在Android自帶瀏覽器中被證明是成功的,然而在IE中卻存在問題。
先看Android自帶瀏覽器的返回策略:
如圖在“瀏覽頁面b”點擊主屏鍵回到起始頁后再進(jìn)入瀏覽器回到“瀏覽頁面b”,此時點擊硬件返回會在頁面內(nèi)后退,后退到頭不能再后退時返回起始頁。這樣的策略雖說沒有按照用戶的來路返回,但能夠滿足用戶在網(wǎng)頁中后退的需求并且也不會覺得奇怪。
再看IE的返回策略:
同樣的情形,IE的處理策略與Android不同,在“瀏覽頁面b”時點擊硬件返回回到了起始頁(按照用戶來路返回),再次點擊硬件返回回到了上一應(yīng)用“應(yīng)用一”(沒有按照用戶的來路返回)這樣就有一個嚴(yán)重的問題:用戶一旦回到起始頁便再也不能后退到之前瀏覽的頁面?。ㄅ园祝弘m然都是硬件返回但WP7的策略與Android不同,Android到起始頁后便不能后退了,WP7回到起始頁后依然可以后退);從這一點也看出了硬件返回不好的地方,返回功能雖說強(qiáng)大但兼顧多種職責(zé)時也難免混亂。
網(wǎng)址輸入:
分析完起始頁,我們要輸入網(wǎng)址瀏覽了。
點擊地址欄會彈出鍵盤,同時內(nèi)容區(qū)域蒙灰,這些都與主流平臺一致,WP7甚至沿襲了Iphone的習(xí)慣把訪問按鈕放在了鍵盤上。
WP7的自帶鍵盤交互上也沒有創(chuàng)新的地方,不過在視覺上做了簡化,試用后效果還是非常不錯的。
內(nèi)容瀏覽:
由于這款瀏覽器不支持Flash和HTML5也不支持微軟自家的Silverlight,頁面展示效果不盡如人意,百度新聞和hao123的HTML5效果都無法展現(xiàn)。
接下來我們看看IE的橫屏是如何處理的?
IE對橫屏也做了減法,在橫屏狀態(tài)下不存在“狀態(tài)欄”、“地址欄”以及“工具欄和菜單”所有的屏幕區(qū)域均用來展示內(nèi)容。如圖:
補(bǔ)充一點,WP7系統(tǒng)下橫屏的設(shè)計原則是應(yīng)用可以選擇是否保留狀態(tài)欄與工具欄,如果保留則頁面布局如下:
圖中狀態(tài)欄與工具欄的位置與形狀不變,只是圖標(biāo)與文字掉轉(zhuǎn)了方向。
接下來我們看一看IE的其他功能:
多窗口
WP7的多窗口沒有任何新意,頁面甚至簡潔到有點粗糙:
添加書簽:
添加書簽頁面視覺風(fēng)格和WP7是統(tǒng)一的,頁面布局很傳統(tǒng)。
書簽和歷史頁面:
書簽和歷史列表的表現(xiàn)形式相同然而他們本身又不屬于同一內(nèi)容,因此此處使用了Pivot Control頁面類型而非著名的Panorama Application。
可以把Pivot Control理解為Iphone和Android的Tab在WP7中的變種,頁面分為四部分:狀態(tài)欄(信息已隱藏),標(biāo)題欄(由于書簽和歷史沒有一個統(tǒng)一的名稱概括,這個頁面省略了標(biāo)題),Pivot ,頁面內(nèi)容。Pivot Control最大的特點是可以左右滑屏切換頁面,并且可以循環(huán)滾動。
在書簽頁面可以長按書簽列表彈出長按菜單“編輯”“刪除”,長按出菜單沿襲了Android的交互。
在歷史頁面點擊清空按鈕彈出確認(rèn)框,在WP7系統(tǒng)下,確認(rèn)框和Toast都在屏幕頂部。確認(rèn)框如下圖左,Toast如下圖右,WP7中的Toast與Android不同,WP7中的Toast點擊會去相應(yīng)頁面。
這里對歷史有個小建議,目前的歷史列表太長看起來很費(fèi)勁,可以參考WP7 People中對聯(lián)系人列表的索引對歷史信息做索引。
通訊錄列表藍(lán)色的方塊是字母索引,點擊后可以展現(xiàn)所有的索引字母,如下圖:
點擊相應(yīng)的字母后列表就會定位在該位置。WP7的通訊錄索引方式直觀并且效率高,是WP7系統(tǒng)設(shè)計的一大亮點。
頁面查找:
最后,我給大家介紹一下WP7 IE的頁面查找功能,見下圖:
輸入內(nèi)容后若無結(jié)果則彈出提示,見下圖,界面很清新,我尤其喜歡那個“No results”非常優(yōu)雅的提示。
有結(jié)果的話進(jìn)入查找結(jié)果頁面,
在查找結(jié)果頁工具欄變成了“上一個”“下一個”,雖說界面簡潔明了但使用過程中我遇到了一個的問題:在第一次使用時我不知道如何從查找界面退出。界面上沒有一個退出的入口,我迷茫了,經(jīng)過多次嘗試我總算發(fā)現(xiàn)硬件“返回”可以退出。
我是尾巴:
WP7確實讓我眼前一亮,不是由于它強(qiáng)大的功能,不是由于它華麗的界面,也不是由于它的效率有多高,而是由于它回歸自然符合直覺的界面交互.WP7的主屏乍一看像粗糙的老年手機(jī),單一的色塊,超大的點擊區(qū)域與提示文字,不過很快我就體會到了它的優(yōu)點:簡單,直觀, 信息外漏,易于點擊,使用時沒有任何心理負(fù)擔(dān).Windows Mobile一直被人詬病過于復(fù)雜, Windows Phone終于返璞歸真走向了另一個極端,而這或許才是移動端最需要的.
不過WP7剛發(fā)布不久,仍存在很多需要優(yōu)化的地方,比如設(shè)置等頁面中的界面元素過于簡單,不易區(qū)分出什么是導(dǎo)航什么是控件什么是內(nèi)容。
來源:http://mux.baidu.com/2011/04/894/
- 目前還沒評論,等你發(fā)揮!