雖說互聯(lián)網(wǎng)的革命總覺得勢不可擋，大家都期待著，某一天，只需要一個(gè)瀏覽器，就可以完成平常用客戶端才能完成的任務(wù)。雖然，HTML5與Chrome一度讓我們看到瀏覽器代替操作系統(tǒng)的希望（via?1，2，3，4，5），但目前來看，用戶同時(shí)保持兩種平臺的使用的狀況，要持續(xù)很長一段時(shí)間。

想讓用戶無縫地從客戶端應(yīng)用轉(zhuǎn)移到在線應(yīng)用，我們還面臨很多問題。

從邏輯上說，在線應(yīng)用屬于操作系統(tǒng)中瀏覽器客戶端應(yīng)用內(nèi)運(yùn)行的一套程序，很多交互上依然還是要依賴上層應(yīng)用（瀏覽器客戶端），這就如同在Mac OS內(nèi)跑一個(gè)Windows的虛擬機(jī)的那種差別。

這樣的環(huán)境，就給在線應(yīng)用帶來一個(gè)很嚴(yán)重且無法避免的問題：體驗(yàn)不一致。在線應(yīng)用沒法提供和客戶端應(yīng)用一樣的體驗(yàn)環(huán)境，用戶如果如果想好好使用在線應(yīng)用，得需要重新學(xué)一次，成本過高。尤其是對于那些生產(chǎn)力應(yīng)用，而這種不一致，無疑是致命的打擊。

生產(chǎn)力應(yīng)用指的是可以完成那些對具體信息的組織與處理的任務(wù)。用戶通過生產(chǎn)力應(yīng)用可以創(chuàng)造并處理信息。比如Outlook，Photoshop，Word，AutoCAD。

這些體驗(yàn)的不一致在UI上的表現(xiàn)主要包括以下幾點(diǎn)：

1. 鍵盤快捷鍵 ——只有少部分在線應(yīng)用支持快捷鍵，這些快捷鍵難以發(fā)現(xiàn)且不支持復(fù)雜的組合。
2. 鼠標(biāo)右鍵 —— 只有少部分在線應(yīng)用支持，而且無法和瀏覽器右鍵菜單并存。（新版Flickr的交叉顯示做法不錯(cuò)。）
3. 信息交換 —— 把本地照片拖進(jìn)Photoshop內(nèi)即可打開，把Flickr照片能拖進(jìn)Photoshop.com內(nèi)編輯嗎？

如有其他，歡迎補(bǔ)充。但我個(gè)人認(rèn)為，最大的不一致，是在于頁面的漸進(jìn)變化，窗口深度變化以及模態(tài)化轉(zhuǎn)變。因?yàn)檫@種不一致，用戶很容易就在一個(gè)在線應(yīng)用中迷失而困惑，因此，“首頁”鏈接成為點(diǎn)擊最高，最救火的鏈接。

觀察一：多樣的對話

在瀏覽器中，用戶一共會遇到4種類型的對話窗口，分別是：

1. 瀏覽器對話框——由瀏覽器驅(qū)動的對話框窗口，模態(tài)對話框（相對于瀏覽器，Opera除外。）如下圖左上角，刪除對話框。
2. 內(nèi)建對話框——由在線應(yīng)用提供的對話框窗口，如下圖左下角，為QQ郵箱寫信提示，模態(tài)（只相對于當(dāng)前瀏覽器標(biāo)簽頁內(nèi)。）
3. 小彈窗——非模態(tài)的小瀏覽器窗口，用于完成一些在線應(yīng)用的子任務(wù)。如下圖中部，為Gmail添加其他郵箱帳號的小彈窗。
4. 通用對話框——由操作系統(tǒng)所提供的模態(tài)窗口，如上傳文件，保存文件，指定文件夾等對話框。

了解更多對話框的分類，請參考Windows user Experience Interaction Guildelines >?windows

觀察二：頁面的流動差異化

同樣的頁面，即使他們的功能與內(nèi)容相同，但在客戶端與在線應(yīng)用，也存在著較大的差異。

客戶端中，使用窗口的模態(tài)疊加，給予用戶導(dǎo)航，同時(shí)，Windows平臺還提供了任務(wù)欄，幫助用戶管理自己的窗口。對于用戶而言，后退至上一步，只需關(guān)閉當(dāng)前窗口，返回操作流程的原點(diǎn)，清除掉任務(wù)欄的窗口的占位即好。

在在線應(yīng)用內(nèi)，由于窗口的模態(tài)疊加存在實(shí)現(xiàn)難度，而且效果也不佳。同時(shí)，也不會有任務(wù)欄這樣的控件去管理用戶在網(wǎng)頁端內(nèi)的窗口（Firefox Panorama也不過是對瀏覽器的標(biāo)簽管理提供了解決方案而已），即使存在面包屑與導(dǎo)航，也難以避免導(dǎo)航迷失，用戶難以在頁面中快速找到準(zhǔn)確的后退路徑，不得不直接選擇“回到首頁”的方式，快速逃離。

窗口和頁面流動

上圖看起來比較復(fù)雜，但通過窗口的疊加，有效的記錄到了用戶的整個(gè)操作流程。用戶在回退時(shí)，都可以采用點(diǎn)擊窗口的X，或者Cancel退回上一步。

而對于在線應(yīng)用，雖然有面包屑，但是他表現(xiàn)的不是用戶操作流程，而是信息的分類。

頁面模態(tài)的差異化

同樣的內(nèi)容（設(shè)置），在客戶端內(nèi)，使用模態(tài)的對話框，并且會新開一個(gè)窗口；而在線應(yīng)用中，這就變成非模態(tài)了，且不會新開窗口。

網(wǎng)頁端后退操作行為過多

網(wǎng)頁上的元素五花八門，在未點(diǎn)擊之前，你根本不知道下一步會怎樣，也許是新開窗口，也許是一個(gè)內(nèi)建對話框，也許是一個(gè)小彈窗，也許是一個(gè)瀏覽器對話框。而且，存在與一些容易誤導(dǎo)用戶的視覺元素：如上圖，雖然看起來是選項(xiàng)卡的外觀，讓我很容易以為點(diǎn)擊之后，我將繼續(xù)保留在這個(gè)頁面內(nèi)，而事實(shí)上我都會跳到一個(gè)新窗口。

并且在線應(yīng)用內(nèi)，你可以通過多種的方式后退，關(guān)閉內(nèi)建對話框，關(guān)閉小彈窗，關(guān)閉新標(biāo)簽窗口，點(diǎn)擊瀏覽器后退導(dǎo)航按鈕。

在客戶端，永遠(yuǎn)只有一種，點(diǎn)擊X按鈕。

網(wǎng)頁端體驗(yàn)案例討論

10大可用性準(zhǔn)則中，其中就包括的兩點(diǎn)：給予用戶控制權(quán)；一致性與標(biāo)準(zhǔn)化。但在線應(yīng)用中，很多時(shí)候，卻不得不面臨兩難的情況。

我將對比在相同的功能中，網(wǎng)易郵箱與QQ郵箱的設(shè)計(jì)對比，來表現(xiàn)這個(gè)問題。

在QQ郵箱內(nèi)，如果需要徹底刪除一封郵件，將有對話框讓用戶進(jìn)行再確認(rèn)。這是一個(gè)瀏覽器對話框。

問題出現(xiàn)了，雖然這個(gè)對話框只是針對當(dāng)前標(biāo)簽頁，可它相對于瀏覽器而言，是模態(tài)的，你無法切換到瀏覽器其他標(biāo)簽內(nèi)。限制了用戶的控制權(quán)，且它的外觀，難以和郵箱內(nèi)建對話框取得統(tǒng)一，如果是MAC系統(tǒng)的話，OK按鈕在還會出現(xiàn)在對話框最右下角的位置。操作體驗(yàn)不一致。

網(wǎng)易郵箱則使用了內(nèi)建對話框，看似是解決了問題，但實(shí)際上并未：

源地址：http://www.userkon.com/to……standard.html