為了滿足需求，通?？梢允褂貌煌姆椒?、手段來實(shí)現(xiàn)。如果結(jié)合用戶的使用場景，必然有一個(gè)最優(yōu)解。那么，如何在眾多選擇中找到最適合的選項(xiàng)？這篇文章，作者給到的方法可以參考。

一、類型介紹

在PC端項(xiàng)目中，用戶觸發(fā)了某個(gè)操作，當(dāng)需要向用戶展示新的內(nèi)容時(shí)，有很多交互方式，彈窗、抽屜、頁面就是其中典型的3種。下面來分析下3種交互方式的優(yōu)勢、劣勢和使用場景。

1.1 彈窗

定義：分為模態(tài)和非模態(tài)對話框2種，常用的為模態(tài)對話框。

優(yōu)勢：在不離開當(dāng)前頁面的前提下完成操作，之前的內(nèi)容不丟失。

劣勢：彈窗空間有限，承載的信息量太少。

適用場景：

• 展示簡單內(nèi)容，沒有復(fù)雜操作。
• 不丟失信息焦點(diǎn)，或者需要連續(xù)性處理信息的場景。
• 更為詳細(xì)的輔助說明，是對當(dāng)前內(nèi)容的快速擴(kuò)展。

1.2 抽屜

定義：屏幕邊緣滑出的浮層面板，分為模態(tài)和非模態(tài)抽屜2種。

優(yōu)勢：在不離開當(dāng)前頁面的前提下完成操作，之前的內(nèi)容不丟失。

劣勢：由于信息集中在一側(cè)，導(dǎo)致視覺焦點(diǎn)不穩(wěn)定。

適用場景：

• 展示中等信息量的內(nèi)容，如彈窗內(nèi)無法承載的長表單。
• 不丟失信息焦點(diǎn)，或者需要連續(xù)性處理信息的場景。
• 在當(dāng)前任務(wù)流中插入臨時(shí)任務(wù)，創(chuàng)建或預(yù)覽附加內(nèi)容，如協(xié)議條款。

1.3 頁面

定義：分為頁面刷新、新開頁面和覆蓋式全屏彈窗3種。操作后，頁面刷新會(huì)在當(dāng)面頁面進(jìn)行刷新加載，加載結(jié)束后展示新內(nèi)容；新開頁面時(shí)會(huì)在保留原有頁面，新的內(nèi)容在新頁面中呈現(xiàn)；覆蓋式全屏彈窗也會(huì)保留原有頁面，但會(huì)以全屏彈窗的形式覆蓋在原有頁面上方，關(guān)閉全屏彈窗時(shí)不會(huì)觸發(fā)原有頁面的數(shù)據(jù)刷新。

優(yōu)勢：頁面刷新時(shí)用戶的注意力不容易分散，更加順暢的理解發(fā)生了什么；新開頁面能夠保留原有頁面內(nèi)容不丟失，便于多個(gè)頁面的信息進(jìn)行比較對照；覆蓋式全屏彈窗也能夠保留原有頁面內(nèi)容，且不會(huì)使用戶丟失焦點(diǎn)。

劣勢：頁面刷新后，無法保留之前的內(nèi)容；新開頁面容易使用戶丟失焦點(diǎn)，注意力分散，且交互存在不統(tǒng)一的問題（因?yàn)橄到y(tǒng)中大部分的操作在同一個(gè)頁面中完成）；覆蓋式全屏彈窗需要提供明顯的返回或關(guān)閉按鈕，樣式上會(huì)有其他頁面存在明顯差異。

適用場景：

頁面刷新

• 偏流程性的功能頁面，前后操作存在關(guān)聯(lián)和影響。如：下單—支付。
• 同一層級間的內(nèi)容切換，如：Tab頁切換。
• 用戶具有明確目的性的操作，跳轉(zhuǎn)頁有利于鎖定用戶注意力。

覆蓋式全屏彈窗

• 需要保留當(dāng)前頁的操作不丟失。如：篩選過濾后的結(jié)果。
• 需要對文件進(jìn)行高清預(yù)覽操作。如：Excel、PDF。
• 需要對某類數(shù)據(jù)進(jìn)行下鉆分析。

新開頁面

• 頁面內(nèi)容沒有關(guān)聯(lián)性，且從邏輯上沒有從屬關(guān)系，相對獨(dú)立。如：外鏈。
• 存在多頁面「比較」的場景，需要經(jīng)常切換頁面。如：淘寶商品詳情。
• 需要參照一些文檔來幫助用戶完成當(dāng)前操作。如：幫助文檔，規(guī)則說明等。

在我們?nèi)粘ＴO(shè)計(jì)中，常常抉擇于：彈窗、抽屜、頁面之間，總覺得使用某一種交互形式會(huì)更好，但是卻說不出其中的原因，猶豫究竟應(yīng)該使用那種展現(xiàn)形式，這需要我們通過具體的要素方法進(jìn)行相應(yīng)的衡量分析。

二、參考衡量因素

2.1 頁面內(nèi)容量

頁面內(nèi)容量決定呈現(xiàn)形式。

無論是彈窗、抽屜還是頁面，究其本身就是一個(gè)信息內(nèi)容的載體，因此選擇如何使用，很大程度上取決展現(xiàn)內(nèi)容量的多少。

內(nèi)容量：通常包含頁面當(dāng)中文字、圖片、視頻、表格、以及各種復(fù)雜的交互，從內(nèi)容承載量的角度來看，頁面 > 抽屜 > 彈窗。

但是不能從一個(gè)維度去思考頁面內(nèi)容量的多少，內(nèi)容的寬度以及深度都是需要去分析。

• 內(nèi)容較深（表單為主）：抽屜 > 頁面 > 彈窗
• 內(nèi)容較寬（圖片、視頻為主）：彈窗 > 頁面 > 抽屜
• 內(nèi)容較深較寬：頁面 > 抽屜 > 彈窗

綜合來看，頁面適合較多內(nèi)容信息的承載，抽屜其次，彈窗最弱，但是在實(shí)際工作中還需要結(jié)合以下兩點(diǎn)進(jìn)行綜合考量。

2.2 頁面連貫性

頁面連貫性直接決定用戶的使用體驗(yàn)。

當(dāng)瀏覽器新開一個(gè)標(biāo)簽進(jìn)行展示時(shí)，頁面的連貫性是最弱的，因?yàn)橛脩粜枰M(jìn)行相對困難的操作才能返回到前頁面，同時(shí)你也可以理解新開頁面是較為獨(dú)立的，不會(huì)受到前頁面的干擾，而要決定頁面連貫性的核心，還是以自身業(yè)務(wù)流程出發(fā)。

• 流程變化連貫性：頁面刷新 = 覆蓋式全屏彈窗 > 抽屜 = 彈窗 > 新開頁面
• 拓展信息連貫性：抽屜 = 彈窗 > 頁面刷新 = 覆蓋式全屏彈窗 > 新開頁面
• 信息對比連貫性：抽屜 > 新開頁面 > 彈窗 > 頁面刷新 = 覆蓋式全屏彈窗

綜合來看，頁面刷新或覆蓋式全屏彈窗更適合體現(xiàn)流程變化，彈窗和抽屜更適合展示與當(dāng)前頁相關(guān)的拓展信息，抽屜更適合在當(dāng)前頁內(nèi)做信息對比。

2.3 頁面切換成本

頁面切換成本決定用戶使用效率。

當(dāng)一個(gè)二級頁面使用頻率過高時(shí)，就證明用戶需要在A與B頁面之間進(jìn)行來回切換，這時(shí)候考慮頁面反復(fù)出現(xiàn)是否流暢，是否有切換成本的產(chǎn)生。

在微信APP中，因?yàn)橛脩粜枰?jīng)常切換，之前用戶難以在幾個(gè)頁面來回跳轉(zhuǎn)，而浮窗的出現(xiàn)，剛好能夠解決這一問題，減少了頁面間的切換成本。

而B端產(chǎn)品效率至上的原則，更需要思考用戶怎樣切換成本更低。

下面我們借用幾個(gè)B端案例來解釋參考衡量因素。

我舉一個(gè)簡單例子，現(xiàn)在你需要去設(shè)計(jì)一個(gè)客戶詳情頁，但是因?yàn)榭蛻粼斍轫撔枰故敬罅啃畔⒁约氨砀瘢瑫r(shí)還會(huì)有各種各樣的交互行為：“點(diǎn)擊、錄入、甚至拖拽”，這時(shí)候你會(huì)怎么選擇？

帶著疑問，我們看看市面上不同的產(chǎn)品給出了完全不同的解決辦法，當(dāng)然他們每個(gè)產(chǎn)品的側(cè)重點(diǎn)不同，導(dǎo)致最后的結(jié)果不同。

小滿CRM — 抽屜形式，方便用戶切換

小滿是一款客戶管理平臺(tái)，在它的客戶模塊中，用戶可以在當(dāng)前頁去設(shè)置不同的字段，所以每個(gè)詳情會(huì)存在快捷操作等一系列方便用戶的需求，導(dǎo)致抽屜的選擇大于其他交互形式。其次在內(nèi)容量上，可以從截圖上看出，內(nèi)容大多以文字記錄為主，不會(huì)存在大段文字以及大圖的情況，因此不會(huì)存在內(nèi)容過寬的情況。

只是在字段數(shù)量上會(huì)有所增多，導(dǎo)致字段的高度會(huì)隨之增加，因此滿足上面要求的交互控件只有抽屜和頁面。最后在連貫性與切換成本上，明顯用戶需要經(jīng)常來回切換去對比客戶信息以及銷售的更進(jìn)狀態(tài)，因此只有抽屜能夠滿足讓用戶進(jìn)行連貫的用戶體驗(yàn)，因此抽屜最為合適。

Hubspot — 頁面刷新及全屏彈窗形式，查看全量信息

Hubspot是國外一款非常出名的CRM，而且Hubspot是屬于國外產(chǎn)品傳入中國，因此在使用習(xí)慣上，更偏向于專注去做一件事，比如Hubspot上，在其客戶詳情頁能夠直接進(jìn)行添加日程、撥打電話、發(fā)送郵件等幾十項(xiàng)操作，并且一切圍繞著Marketing、Sales展開，因此使得頁面需要更加專注，需要看到更加全量的信息，再次國外Saas用戶也是對完整流程的操作更加青睞（一個(gè)操作只干一件事），而國內(nèi)喜歡有很多快捷操作，因此造成Hubspot都采取頁面跳轉(zhuǎn)的形式查看數(shù)據(jù)。

此外，Hubspot為了防止篩選場景下使用頁面跳轉(zhuǎn)導(dǎo)致原頁面的篩選條件失效，也額外采用了不少覆蓋式全屏彈窗的交互（可以理解為頁面跳轉(zhuǎn)的一種，但覆蓋在原頁面上方，不會(huì)銷毀原頁面）。

基于以上2個(gè)例子，我們會(huì)發(fā)現(xiàn)在交互選用上，往往會(huì)收到場景訴求、國內(nèi)外用戶習(xí)慣、操作成本等多因素影響，因此我們需要進(jìn)一步的具體問題具體分析，在能夠滿足絕大多數(shù)用戶場景訴求的前提下選用統(tǒng)一的交互方案。

三、選用判斷思路

下圖是基于通用場景和參考衡量因素整理的一些選用思路圖。

看不清楚的請點(diǎn)擊本鏈接跳轉(zhuǎn)Figma >