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

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

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

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

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

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

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

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

觀察一：多樣的對話

在瀏覽器中，用戶一共會遇到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)航，同時，Windows平臺還提供了任務(wù)欄，幫助用戶管理自己的窗口。對于用戶而言，后退至上一步，只需關(guān)閉當(dāng)前窗口，返回操作流程的原點，清除掉任務(wù)欄的窗口的占位即好。

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

窗口和頁面流動

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在面臨當(dāng)前頁面已經(jīng)存在內(nèi)建對話框的狀況下，當(dāng)需要再確認(rèn)的時候，網(wǎng)易郵箱和QQ郵箱同樣采用了模態(tài)的瀏覽器對話框。顯然，網(wǎng)易郵箱違背了原來的對話框視覺規(guī)范。

但這是一個無奈之舉，如果同樣使用內(nèi)建對話框，用戶在視覺外觀上，很難對兩個對話框的從屬關(guān)系作出即時的判斷。

由于目前，在網(wǎng)頁端，雖然在前端代碼內(nèi)有HTML5的規(guī)范啟用，但在設(shè)計上，卻沒有類似Windows User Experience Interaction Guidelines 或者是Apple Human Interaction Guildlines 這樣的規(guī)范給設(shè)計師提供標(biāo)榜和準(zhǔn)則。這就直接導(dǎo)致，在線應(yīng)用的窗口設(shè)計上，一致性是一個難以解決的問題，用戶就會遇到很多奇奇怪怪的體驗。

探討解決辦法

雖然在線應(yīng)用從長期看來，將最終在用戶界面方面，將完美替代軟件客戶端。但是目前我們依然還處在，在線應(yīng)用與客戶端并行的狀況。但是，我們也欣喜的看到，一些在線應(yīng)用的設(shè)計，已經(jīng)能夠解決這些問題了?；蛟S，他們將引領(lǐng)，在線應(yīng)用的下一代的窗口設(shè)計：

如果用戶安裝了silverlight，那么，在Live Sync中，用戶即可直接在當(dāng)前網(wǎng)頁內(nèi)，選擇用戶本地計算機的文件夾，取代了傳統(tǒng)的彈出一個模態(tài)對話框的方式。不打擾用戶切換至其他瀏覽器標(biāo)簽頁。

Gmail同樣使用了非常具有特色的設(shè)計方法，Gmail已經(jīng)完全避免了使用模態(tài)的瀏覽器對話框，取而代之的是，Gmail不再確認(rèn)用戶的危險操作，但是提供后退入口。

另外Gmail還提供了“多線程”的體驗，取消了窗口的模態(tài)關(guān)系。

小結(jié)

從這些案例我們可以大致看出以后在線應(yīng)用的窗口設(shè)計的一些趨勢：

1. 模態(tài)化的對話框?qū)p少 —— 因為他阻礙用戶的控制權(quán)，且影響一致性。
2. 窗口結(jié)構(gòu)將變得扁平化 —— 在線應(yīng)用的不會像客戶端那樣，窗口相互之間有嚴(yán)謹(jǐn)?shù)膹膶訇P(guān)系，整體數(shù)量多。在線應(yīng)用會只有一個核心的頁面，這些頁面涵括了在線應(yīng)用的大部分的操作界面。
3. 即地化的反饋和操作成為主流 —— 客戶端中原有的，編輯內(nèi)容-》保存-》查看結(jié)果的流程，在網(wǎng)頁端將會變得更加精簡與方便，因為在線應(yīng)用可以方便的即時變化當(dāng)前頁面，給予用戶反饋。

無論如何，在線應(yīng)用已經(jīng)距離我們越來越近了，也許我們真的只需要一個瀏覽器，就可以完成很多的任務(wù)。不論如何，在目前在線應(yīng)用設(shè)計中無通用規(guī)范與合理的解決方案中，上訴說法只是做簡單的研究與分析，無法得出具體解決方案。

來源：http://www.userkon.com/tolyer/make_online_app_windows_standard.html