一、引言

B端前端交互領域是處于視覺設計師、產品和前端之間的交叉地帶，而交互領域有以下特點：

• 業務影響低：對業務功能影響不大，即業務功能完整性不會因為交互的好壞受影響
• 量化難：難以被量化，因此無法準確體現其好壞的價值所在
• 方向散：比較細碎和散落，比較難以被統一和規范，沒有具體優化方向
• ROI低：B端的使用量一般也不大，如果投入較大精力在交互上，其產出也比較有限

而在客服作業場景上，存在每人使用頻次高、持續時間久、總量大等顯著特性。以得物客服工單工作臺為例，長期UV和PV在高位使用，任何一個簡單的交互的使用量都非常大，僅切換到工單工作臺這個頁面的交互使用量就達到百萬級別。

因此，交互量化、實踐及優化指引就有被探究的前提，以助力B端體驗、操作作業效率的提升。

二、鼠標交互的基本特性及利用

在B端系統中，交互操作主要依賴兩種設備進行，即鼠標和鍵盤，接下來我們進行分類討論：

鼠標交互的特性

目前鼠標交互主要是三種：移動、點擊及滾輪，這三者又組合成了鼠標操作最基本的兩項操作：

• 移動+點擊，即所有鼠標點擊的操作前提必須由鼠標移動到具體位置來完成
• 移動+滾輪，即鼠標移動到對應滾動區域進行滾動；后續，其操作效率可以參考移動+點擊，因為基本結構都是移動加動作。

鼠標移動點擊效率的影響要素

而移動+點擊又是這兩者中最主要的操作方式，那么，現在有個疑問: 一次移動加點擊的交互時間與什么因素相關？

我們再次分析這個組合操作中的變量：移動距離、鼠標移動速度、點擊時間、點擊目標區域大小。

• 確定性因素

移動速度：其中鼠標移動速度受操作人員手速及鼠標移動速度設置影響較大，但對于具體的人員而言又是相對固定的；

點擊時間：點擊時間也是相對固定的，即鼠標mouseDown到onClick觸發的時間，我們簡單做了100次點擊試驗，得出這個時間約為110ms。

• 非確定因素

因此，受界面影響較大的變量只有移動距離和目標區域大小。因此，我們對這兩項變量進行試驗，以期得出變量與時間的關聯關系，進而推算與操作效率的關系。

移動距離與時間的關系

進行如下試驗設置：

• 設置兩個按鈕——起始按鈕和結束按鈕，兩個按鈕間距離為測試變量
• 起始按鈕以mouseUp事件為計算時間起點
• 結束按鈕以onClick事件為計算時間結束點
• 設置每輪十次操作，并計算十次的平均時間，進行三輪

圖片

圖片

基本可以看出如下關系：

• 操作時間與距離呈現正相關關系，基本呈現線性關系，隨著操作距離的增加而增加
• 操作距離越短，時間上升越快；當操作距離已經較長時，操作時間增加越慢

可以看到，即使是最短的30px，起始操作時間為427ms；而單次點擊的時間為110ms，即只要鼠標發生移動，約317ms為移動所需時間的最低時間；

前500px內，每多移動100px，操作時間時間增加約50ms；

而在500~2000px范圍內，每多移動100px，操作時間時間增加約23ms，只有前者一半不到。

另外，操作人眼睛在屏幕上關注點的移動其實是跟隨操作同步進行的，但關注點移動很難進行測量，因此上述曲線形態可以近似替代。

結論1：總體平均而言，每多移動100px，操作時間時間增加約30ms。

點擊目標區域大小與時間的關系

進行如下試驗設置：

• 設置100px、300px、800px三檔距離
• 起始按鈕以mouseUp事件為計算時間起點
• 結束按鈕以onClick事件為計算時間結束點
• 設置每檔十次，觀察交互時間隨結束按鈕區域（正方形）面積大小變化

圖片

圖片

可以看出如下關系：

• 操作交互時間與面積成負相關關系，即目標區域越大，耗時越少
• 面積較大時（>30000）時，耗時基本穩定
• 并且隨著目標區域的減小，交互操作耗時呈指數上升

由于邊長小于100px是我們常用的點擊區域大小，我們以邊長為單位，將100px以內的曲線再次放大：

圖片

可以看到將橫坐標轉換為邊長后，為了計算方便，曲線可以近似擬合成線性關系。

• 邊長從100px到16px，不同距離的關系：

100px距離：增加341ms，平均100px增加了405ms

300px距離：增加328ms，平均100px增加了390ms

800px距離：增加426ms，平均100px增加了507ms

不同距離的耗時增速區別不大，我們認為近似相等，取近似值，即每增加10px邊長就能減少約45ms。

結論2：目標區域越大，交互所耗費時間越少。

目標區域較小時（邊長<100px）增加面積所帶來的收效非常大，平均每增加10px邊長就能減少約45ms的交互時間。

平面上鼠標平均移動距離的計算

由上面兩項測算可知，移動距離和目標區域面積是交互時間的重要影響要素。為了方便下一步具體交互的時間對比，我們需要計算鼠標在屏幕上移動的平均距離，即用戶每次鼠標操作時，平均移動多少距離。

• 鼠標平均移動距離測算

要求得鼠標的平均移動距離，我們已知如下要素：

按鈕會出現在頁面任意位置

鼠標光標也會出現在頁面任意位置

移動曲線認為是直線

假設屏幕尺寸為1920*1080，因為這是一個非常常見的尺寸，例如在客服職場中就是配置了該尺寸的顯示器

那么這就是計算出頁面上任意一點到頁面所有點的平均距離:

圖片

其中：

x是平面寬度，y是平面高度

i是鼠標起始采樣點位置

j是目標采樣點位置

我們將具體尺寸帶入計算可得近似值為：800像素

結論3：頁面上任意一點到頁面所有點的平均距離為800像素。

該值可作為在（1920×1080）屏幕鼠標平均移動距離使用， 后續會被使用到。

• 鼠標移動到頁面頂部的平均距離計算

后續需要使用到此項數據，因為常用的關閉頁面等操作往往在頂部，我們先進行計算作備用。

在這里就是求頁面中頂部任意一點到頁面所有點的平均距離，直接將尺寸帶入：

圖片

其中：

（1920）是頂部一行上點的數量

（1080）是平面上的高度

（1920×1080）是平面上所有點的數量

i代表頂部一行具體點位置，j代表所有點的位置

x和y是對應點的橫坐標和縱坐標

function calculateAverageDistance(width, height) {
  let sum = 0;
  for (let i = 0; i < width; i++) {
    for (let j = 0; j < width * height; j++) {
      // 計算點 (i, 0) 到點 (j % width, Math.floor(j / width)) 的歐幾里得距離
      let x1 = i;
      let y1 = 0;
      let x2 = j % width;
      let y2 = Math.floor(j / width);
      let distance = Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
      sum += distance;
    }
  }
  return sum / (width * height * width);
}


// 調用函數并輸出結果
let averageDistance = calculateAverageDistance(1920, 1080);

結論4：計算可得移動到頁面頂部的平均距離為915像素。

圖片

根據鼠標交互特性計算常用交互時間

上述試驗得出的兩個指導性意見，即減少交互的移動距離和增加目標區域的面積有助于減少交互操作時間。那如何利用這兩個特性，進行交互優化呢？

首先，通過點擊按鈕來查詢信息是一個非常基本的交互動作，點擊按鈕后，具體查詢界面形態有這么幾種情況：

跳出當前頁面，新開頁面查詢，查詢完成后需要關閉頁面返回

當前頁面彈窗，通過Modal（彈窗）或Drawer（抽屜）展示信息，完成后需要關閉

氣泡或展開更多信息，信息一般直接在點擊處展開，再次點擊關閉

接下來我們進行具體交互和時間分析。

跳出當前頁面新開頁面查詢及其交互時間測算

點擊按鈕后，新開瀏覽器標簽或內置頁面來查看關聯信息，其交互步驟如下

點擊頁面中的按鈕或鏈接

頁面自動跳轉到對應的新頁面，使用人員繼續在新的頁面上瀏覽或操作

新的頁面瀏覽完畢，使用人員需要移動鼠標點擊關閉按鈕，頁面回到剛才操作的頁面

使用人員將鼠標移回到所需要繼續操作的位置

鼠標移動線圖如下：

圖片

因此，一次跳出當前頁面的查詢的交互時間（排除新頁面瀏覽操作時間）由兩個部分組成：

移動鼠標，點擊查詢按鈕的時間

查詢完畢后，移動鼠標點擊關閉按鈕的時間

• 由于我們上面已經算得了頁面上任意一點到頁面所有點的平均距離為800px，點擊頁面上的一個按鈕完全符合這一場景，可以直接使用該數據；
• 一般鏈接或按鈕的高度從16px到40px不等，寬度基本在三倍左右，因此我們直接取“面積點擊目標區域大小與時間的關系表”中距離為800px，區域面積為256~6400的平均數；
• 計算結果為812ms。
• 點擊關閉按鈕的交互時間：
• 關閉按鈕移動距離：前面我們已經算得了屏幕任意一點到頂部（關閉頁面按鈕一般在頂部）的平均距離是915px。
• 關閉按鈕大小：我們還需要知道目前區域大小，在這里我們其實就是求Chrome瀏覽器關閉按鈕或內置標簽頁關閉按鈕的大小，其尺寸均為16×16。
  

我們再通過鼠標交互特性中得到的數據可大致推算出，平均一次鼠標移動關閉操作的時間為1095ms：

圖片

其中：

1060是目標區域大小與時間的關系表中800px移動距離，16邊長目標區域的時間測算值

915是頁面中任意一點到頁面頂部任意一點的平均距離

30是根據移動距離與時間的關系測算的每增加100px增加的時間

該時間未計算關閉彈窗后返回移動的時間

結論5：最終一次新開頁面的額外交互時間如下：

圖片

通過Modal查詢信息及交互時間測算

圖片

• Modal的寬度一般有800px和1200px，我們算Modal平均寬度為1000px，又由于左右兩側都是其可關閉區域，那么其最大移動距離為500px；
• 由于Modal關閉不僅限于右上角關閉按鈕，任何遮罩區域都屬于可關閉區域，根據“點擊目標區域大小與時間的關系”可知當目標區域足夠大時，交互時間趨近于穩定；
• 從而可大致推算得Modal彈窗的額外交互時間是812ms+338ms。

通過Popover查詢信息及其交互時間測算

圖片

• Popover點擊后，在原處周圍會彈出對應信息氣泡展示對應信息；
• 即原點擊處肯定處于氣泡范圍之外，在氣泡范圍之外的點擊都可以關閉氣泡；
• 所以操作人員無需額外的移動即可關閉彈窗，那么其操作時間就是基準的點擊關閉時間，為812ms+110ms。

根據常用交互時間設計優化策略

通過優化查詢交互形態梯次降低交互時間

上述三種查詢方式，交互時間依次減少：

圖片

其中跳出頁面交互時間最長，達到了1.9s，在大量查詢的過程中如果跳出查詢占比很高，那么其交互時間總量是很可觀的，例如：在得物客服工單工作臺的工單詳情中，近90天其訪問量為日均69萬次，如果每次訪問都有一次頁面跳出（即跳出率達到100%），那么光跳出的交互時間就為:

69萬×（812ms+1095ms）=1315830s≈365h，一個非常巨大的數字，那么相反，每優化1%的跳出，根據優化后的效果不同能節約1.45小時至3.65小時的時間，這就是我們要做的事——將費力度較高、耗時較長的交互轉換成更高效的交互方式！

接下來，我們看下客服前端優化這些交互的例子和實踐：

減少跳出交互，降低跳出率

將系統內原本要跳出的，整合到當前頁面中，提高當前頁面集成度：

• 工單詳情創建賠付：跳出轉化為Modal

優化前：在工單詳情二級tab欄新開創建賠付頁面

優化后：通過Modal直接在當前頁面打開，無需到新頁面操作

減少的交互時間：757ms

圖片

這是個簡單的示例，理論上所有跳出頁面交互都可以優化成這種方式；客服工單工作臺就做了大量這樣的優化，將工單詳情的跳出率從30.81%降低到10%左右。

優化Modal為Popover交互，進一步降低交互時間

在信息查詢中，存在大量簡單的信息，這些信息有如下特點：

• 非必要：必要時再查詢，如是某個重要信息的補充信息或詳情信息
• 純展示：只是單純的展示信息，不需要額外的交互
• 內容不多：信息一般比較簡要，內容不超過半屏（超過半屏時使用Popover就可能引發頁面滾動）

這些信息如果是新開頁面或者是Modal展示的，那么十分適合轉換成Popover展示：

• 減少的交互時間：757ms

圖片

避免額外交互查詢

上述的交互優化，通過將費力度大的交互方式替換成費力度較小的方式，提升了操作效率，那么是不是可以將不必要的交互直接移除呢？達到免交互也能查詢信息呢？結論表明這是可行的。

• 信息塊嵌入：將跳出頁面交互轉化為無交互

我們可以把需要查詢的額外信息直接嵌入到當前頁面，但這些信息需要具備如下要素：

重要且查詢十分頻繁的關聯信息，跳出率占比較高

該信息的嵌入不會引發其他更加重要信息交互優先級下降

如工單詳情查看訂單信息：

優化前：移動點擊按鈕，跳轉到新頁面

圖片

優化后：直接集成在右側

圖片

減少交互的時間：1907ms

• 通過預查詢，展示無信息結果

在B端查詢中，經常會遇到查詢結果為空的情況，即目標頁面其實是沒有內容的，導致操作人員往往要點擊查詢按鈕后才知道，這樣的交互意義不大。

在客服工單工作臺的訂單詳情中，存在著如優惠券詳情、保價期詳情等按鈕：

圖片

需要點擊按鈕查詢優惠券詳情，但很多時候沒有優惠券詳情，詳情列表為空。這時候我們可以讓后端返回是否有優惠券詳情的字段，如果沒有，就直接不展示此按鈕；那么操作人員看到沒有按鈕，就知道沒有詳情內容了。

減少的交互時間：922ms

• 通過記錄查詢條件減少額外交互

在用戶操作時，會存在往復的情況，即之前已經打開過某個信息了，那么由于其他事項中斷后繼續時，需要繼續查看之前的信息；在沒有特殊處理時，可能就需要重新點擊了。這些頁面也存在如下特點：

頁面二次、多次查詢比例很高，如客服的工單詳情的多次查詢比例達到了1：5，即一個工單會被往復打開5次。

這時我們對主要的查詢做一些記錄，避免額外點擊：

圖片

即將當前查詢的各項tab頁做記錄，返回時自動還原，就可以看到上次的查詢結果。

該記錄不僅限于操作的點位，還可以包含用戶填寫的表達。

減少的交互時間：812ms

因此，通過將耗時較長的交互轉換為耗時較少的交互，是一個非常有效的優化策略，不同級別間減少的交互時間關系如下：

加大主要按鈕的區域

在點擊目標區域大小和時間關系的測算中，我們知道目標區域越大，點擊得越快。當然，我們也不能無限制的擴大所有按鈕的的區域，這樣會擠壓其他信息的空間，那什么樣的情況需要加大按鈕區域大小呢？

• 主要且高頻按鈕
• 在展示區域內有充足空間，不會影響其他信息展示

圖片

圖片

根據區域與交互時間的關系表，每增加10px，就能減少45ms的交互時間。因此，在工單詳情中，主要按鈕都是ant-design所提供的最大尺寸按鈕。

三、鍵盤交互的基本特性及利用

鍵盤是除了鼠標之外，B端系統主要使用的交互設備，其除了輸入文本外，還可以通過快捷鍵的方式，影響界面交互；如系統常見的ctrl+c、ctrl+v、ctrl+tab、ctrl+w等，一般而言，快捷鍵操作是快于鼠標操作的，為此，我進行了相關測算。

快捷鍵操作時間測算

以切換應用的快捷鍵ctrl+tab為標準，測算切換應用的時間：

• 每輪進行十次切換，計算每輪總時間，從而得出單次計算時間
• 為減少誤差，進行三輪測算

圖片

即鍵盤平均交互時間為420ms，而根據頁面平均鼠標點擊交互測算時間為812ms，可知快捷鍵交互是完全優于鼠標交互的，快了將近50%；此外，快捷鍵不受移動距離影響，表現更為精確和穩定。

將鼠標操作轉換為快捷鍵交互

因此，我們可以把很多鼠標操作轉換成快捷鍵操作，可以做如下優化：

將高頻操作綁定快捷鍵操作

在得物客服工單工作臺中，就將關閉工單，下一單，回到工單中心等綁定相應快捷鍵：

• 關閉當前工單：alt+w
• 回到工單中心：alt+e
• 下一個工單：alt+d
• 返回：alt+a

并進行相應關聯提示：

圖片

使用獨立窗口轉換為快捷鍵操作

B端系統的使用中，切換不同的系統是一個高頻操作。

根據統計，得物客服工單工作臺每天系統切換次數約為130萬次。

而不同的系統又在同一個瀏覽器中，因此需要鼠標移動來切換不同的系統。

圖片

這樣的交互時間是較高的，在關閉頁面操作的測算中我們算得：關閉頂部標簽頁的時間是1095ms，而切換標簽頁按鈕也在頂部，可以近似計算，另外我也實際進行了三輪通過頁簽切換操作，測得平均值為943ms，由于切換tab按鈕比關閉按鈕區域大，因此時間稍小也是合理的。

圖片

那如果將系統作為一個應用維度，使操作人員可以通過ctrl+tab來切換系統，那么交互時間也會大大減少。

• 通過PWA技術將頁面轉換為應用

我們通過PWA可以將頁面作為一個應用使用，那么也可以直接使用到系統的快捷鍵。

圖片

單次交互節約時間：523ms

目前每日平均使用獨立窗口切換數約1.8萬次

快捷鍵切換的局限性

其最大的局限性是——快捷鍵是非必須且隱性的。

非必須

所有的快捷鍵都可以通過鼠標來完成，鼠標操作才是必須的，快捷鍵只能作為一種并行輔助工具存在。對使用者而言其實就是一句話：我可以選擇不用！

隱性

要使用快捷鍵，使用者需要去了解具體功能對應的快捷鍵組合，而這些說明基本都隱藏在比較深的位置，而且需要使用者記憶以及習慣這些組合。

換言之，快捷鍵前期使用成本其實是很高的，因此其使用量：

• 工單詳情各快捷鍵在1000次左右，與60萬的PV相比占比太低
• 獨立窗口切換數1.8萬次，占總切換占比1.5%左右

小結

雖然快捷鍵在交互優化中有其局限性，但其可以作為一種錦上添花的交互操作基礎設施存在。因為在客服職場調研中我們發現，一些高效人士非常善于利用快捷鍵，使其作業效率大大增加。

這也可以用一句俗話表示：我可以不用，但你不可以沒有。

四、總結

綜上所述，本文的主要內容可歸納為以下圖示：

圖片

五、附錄

• 每增加100px移動距離與時間的關系

• 其基本呈現近似線性關系

圖片

• 目標區域面積與交互時間的關系

時間隨面積縮小呈現指數關系增長

圖片

• 屏幕上鼠標平均移動距離

圖片

• 頁面移動鼠標點擊的交互時間

圖片

• 主要鼠標交互組件的交互時間

圖片

• 快捷鍵交互時間

圖片