一、前言

眾所周知，PC 和移動端是當前人機交互的主要互動設備。經過十多年的發展，兩者已經產生了成熟的交互范式，前者主要基于鍵鼠交互，后者以觸屏交互為主。而為了適應不同設備的交互方式差異，提供更完善的用戶體驗，即便是相同的功能/組件也會衍生出細節上的差異。

本期將探討這些隱藏在細微處的交互差異，從而更深入了解用戶體驗中設備/行為/界面的關系。

更多差異分析：

二、五個小案例

1. 輸入框的清除按鈕

清除按鈕（clear button）是用來清除輸入框內容的按鈕。當輸入框中存在內容時，出現在輸入框的末端，點擊后可清空已輸入內容。pc 通過鍵鼠操作可以快速刪除，但基于觸屏交互的移動端刪除操作較為麻煩。因此清除按鈕在移動端中更常見，特別是在登錄注冊、搜索框等頁面。清除按鈕可以快速清空內容，提高操作效率，降低輸入錯誤時的負面影響。

雖然在 web 界面中很少使用上述的清除按鈕，但“快速清除內容”的需求依然存在。主要出現在多項內容同時清空的場景，例如 b 端篩選中常用的“重置/清除”功能，以及多選框中快速清空選項。

2. Hover 態

光標 hover（懸停）是 PC 端的常用的輕量交互操作，當光標懸停時界面元素會產生狀態改變。Hover 可以為用戶顯示隱藏的信息（展示 tooltips/二級菜單）；或指示按鈕狀態，提示用戶此處可點擊觸發事件。

但是移動端的光標（手指）不會長期懸停在屏幕上，所以不會有 hover 態。而且指尖輕觸即表示“點擊”，因此按鈕將直接從“normal”變為“pressed”狀態。相比于 pc 少了“hover”作為中間狀態，因此在界面設計上移動端按鈕需要明確的引導性，以傳遞“此處可點擊”的信息。

對于 hover 的二級菜單，移動端需要多點擊一步展開，或者 tab 切換進行快速跳轉。

3. 按鈕 VS 手勢

復雜的手勢輸入是移動端的優勢，但 PC 端需要更多按鈕來承載功能。下拉刷新是移動端 feed 流常用的操作，將頁面刷新和下滑手勢絲滑的結合起來。在 PC 中如要實現內容區域的便捷刷新，則需要添加一個[刷新]按鈕。在 banner 輪播中，pc 通常會提供準確的“上/下一頁”按鈕，而移動端中普遍通過滑動查看上/下一張。類似的案例還有圖片放大縮小、視頻音量調節。

究其原因，鼠標操作一般都有精確的操作/點擊對象，因此通過按鈕觸發事件更為普遍。手勢操作可以基于整體對象進行滑動/拖拽，這是符合用戶手勢操作心智的交互方式。同時手勢操作的準確度低，屏幕空間有限，用手勢代替按鈕的性價比很高。

4. 長按與右鍵

右鍵呼出更多菜單是 PC 端的常用操作，移動端中的對應操作則由單擊長按完成。而對于針對對象的編輯菜單，在 pc 端需要選中文本對象后需要點擊右鍵，而移動端中選中文本后會立刻彈出菜單。這由于移動端中沒有像"ctrl+c""ctrl+v"一樣的快捷操作，快速彈出菜單減少用戶操作步驟；而且選中后若再次疊加一個長按行為，很容易誤判成單擊從而取消選中。

5. 彈窗

PC 端信息反饋的樣式更加多樣，包括 tooltip、toast、message、drawer 等。相比移動端有更多非模態彈窗，應用方式更靈活，用戶使用過程流暢。由于屏幕面積小，移動端彈窗面積占比更大，對用戶而言打斷感受更強，在設計過程中需要謹慎。

同時，移動端和 pc 的彈窗按鈕位置也有所區別。目前移動端中強引導按鈕普遍在右側，而 win 系統中強引導按鈕在左側（MacOS 則在右側）。

三、小結

交互方式差異深刻影響了 PC 和移動端界面形態，這些設計細節隱藏在日常交互行為中。雖然使用已有組件庫時很容易忽略，在多端系統設計過程中依然需要注意這些差異性細節。

移動端

1. 缺少 hover
2. 輸入相對不便
3. 點擊準確性低
4. 手勢操作便捷
5. 長摁呼出菜單

PC 端

1. hover 能實現輕量級的交互
2. 輸入方式高效快捷
3. 光標點擊準確
4. 右鍵呼出菜單

即使是相同的產品功能也會產生差異化的交互變體，這些變化可能是基于設備限制、程序限制或人機交互行為。在多端產品時，如果忽略了這些交互細節，除了影響產品可用性，還可能違背用戶的使用習慣，導致產品體驗細節的缺位。

整體來看，交互界面不僅是功能的可視化載體，他還縫合了設備應用和用戶行為，是產品使用流程的中樞。往前，界面/交互設計中應該兼容硬件能力，并傳遞準確的用戶輸入數據；往后，設計應該向用戶傳遞設備的能供性，將設備能力轉換成可感知的界面上的能供性，從而為用戶提供完整且細致的產品體驗流程。

歡迎關注作者微信公眾號：「ASAK設計」