分享較早前的一個小總結(jié)，關(guān)于在選擇彈出窗口還是選擇切換頁面來承載信息時，可用用來判斷的幾個角度，合適初學(xué)者來讀。

1.彈出窗口與切換頁面的區(qū)別

1）?操作的連貫性：彈出窗口的速度會比打開一個頁面的速度要快，響應(yīng)更及時一些，點擊后可以比較快的得到操作的反饋，而切換頁面則經(jīng)常會讓用戶等待一段時間。

實例一：個人中心中，查看好友照片的操作：

之前查看照片的操作頁面會跳轉(zhuǎn)到該好友的空間“相冊”頁面，而現(xiàn)在則更改進(jìn)為彈出窗口，能夠很快看到照片的放大圖，關(guān)掉窗口后，又可以繼續(xù)瀏覽其他好友的信息了。

2）操作的延續(xù)性 彈出窗口可以保留原頁面上的內(nèi)容，不至于頁面被刷新掉；切換頁面很有可能刷新，在以下兩種情況下是尤其要避免的：用戶在原界面上有輸入的內(nèi)容，用戶需要根據(jù)原有界面的內(nèi)容，來選擇或判斷新界面的內(nèi)容。在這兩種情況下最好首選彈出窗口。

實例一：Qzone寫日志中插入圖片：

用戶在寫日志的時候插入一張照片，如果這時候插入照片的界面是切換一個頁面，用戶可能就會擔(dān)心之前的輸入是否還在，而彈出窗口則可以在保留原頁面已編輯的文字，在此之上出現(xiàn)一個小型的界面，顯示可以插入的照片。

實例二，秀世界中我的儲物箱，用戶需要看到房間中的效果，來決定從“我的儲物箱”中選擇哪個物品放入房間里，用彈出窗口可以比較方便的解決這個問題:

實例三：一個相反的例子，歡樂卡片的應(yīng)用，制從“我的首頁”頁面當(dāng)中，制作卡片的時候需要哪些卡面是在“卡片全攻略”頁面來說明的，因此用戶在制作卡片的時候需要不斷切換到“卡片全攻略”頁面來查看需要合成的卡片，因此，在這樣的情形下，采用彈出窗口的形式來表現(xiàn)卡片合成向?qū)?yīng)該更合適一些。

3）?操作的自然過度 彈出窗口不容易讓人迷路，知道自己身處何處；而頁面切換了以后用戶有時候會產(chǎn)生一下子不知道在哪里的迷惑；彈出窗口頁面的內(nèi)容往往只和當(dāng)前的操作有關(guān)，而且是浮在原有頁面上的，用戶可以很自然的延續(xù)上一操作的結(jié)果而繼續(xù)操作或是瀏覽下去，而切換的新頁面中往往會包含新內(nèi)容之外的信息： banner、導(dǎo)航、一些固定的欄目等等，用戶不能立刻定位到自己想要關(guān)注的內(nèi)容上，因此切換頁面的設(shè)計應(yīng)更加關(guān)注一致性和承前啟后的關(guān)聯(lián)性。

實例一：網(wǎng)吧達(dá)人的首頁頁面1中點擊“常去的網(wǎng)吧”，進(jìn)入頁面2，因為兩個頁面的結(jié)構(gòu)有所不同，很容易讓用戶覺得不知身處何處。

頁面1：

頁面2：

4）?承載的信息量 彈出窗口可承載的信息量有限，操作流程不宜過多。

5）?內(nèi)容的推廣 彈出窗口沒有獨(dú)立的連接地址，在頁面推廣上有所限制。

實例一：在做信用卡頻道的活動列表時，最初的設(shè)計是點擊活動信息的標(biāo)題后，用彈出窗口來展示活動詳情，然而因為活動頁面需要在推廣時有獨(dú)立的地址便于用戶能夠從其他途徑直接訪問到活動詳情頁，因此改為采用切換頁面的方式。

2. 彈出窗口與頁面內(nèi)展開的區(qū)別？

1）頁面內(nèi)展開能夠即時的反饋用戶的操作；容易給用戶帶來自然過度的體驗；適合于對主要內(nèi)容的擴(kuò)充，更詳細(xì)的、更近一步的內(nèi)容，當(dāng)用戶沒有看到這些內(nèi)容并不會影響使用，而打開這些內(nèi)容，用戶可以看到更多、或是得到更豐富的功能。

實例一：個人中心的展開操作，通過頁面內(nèi)展開的形式顯示評論信息，它并不是該好友動態(tài)的主要內(nèi)容，因此作為附加信息收在了“詳情”當(dāng)中。

2）彈出窗口是用戶點擊按鈕后，在頁面上浮出一個層來顯示進(jìn)一步的內(nèi)容，與頁面內(nèi)展開的形式不同的是，彈出層更適用于區(qū)域內(nèi)的內(nèi)容較為重要的時候使用，比如彈出層內(nèi)包含一些操作、或重要提示。

實例二：編輯導(dǎo)航的界面中更改選擇，下面的預(yù)覽界面中會直接看到效果。

實例三：二次確認(rèn)的提示應(yīng)當(dāng)采用彈出窗口：

來源：http://isd.tencent.com/?p=2116