一、前言

眾所周知，PC 和移動(dòng)端是當(dāng)前人機(jī)交互的主要互動(dòng)設(shè)備。經(jīng)過(guò)十多年的發(fā)展，兩者已經(jīng)產(chǎn)生了成熟的交互范式，前者主要基于鍵鼠交互，后者以觸屏交互為主。而為了適應(yīng)不同設(shè)備的交互方式差異，提供更完善的用戶體驗(yàn)，即便是相同的功能/組件也會(huì)衍生出細(xì)節(jié)上的差異。

本期將探討這些隱藏在細(xì)微處的交互差異，從而更深入了解用戶體驗(yàn)中設(shè)備/行為/界面的關(guān)系。

二、五個(gè)小案例

1. 輸入框的清除按鈕

清除按鈕（clear button）是用來(lái)清除輸入框內(nèi)容的按鈕。當(dāng)輸入框中存在內(nèi)容時(shí)，出現(xiàn)在輸入框的末端，點(diǎn)擊后可清空已輸入內(nèi)容。pc 通過(guò)鍵鼠操作可以快速刪除，但基于觸屏交互的移動(dòng)端刪除操作較為麻煩。因此清除按鈕在移動(dòng)端中更常見(jiàn)，特別是在登錄注冊(cè)、搜索框等頁(yè)面。清除按鈕可以快速清空內(nèi)容，提高操作效率，降低輸入錯(cuò)誤時(shí)的負(fù)面影響。

雖然在 web 界面中很少使用上述的清除按鈕，但"快速清除內(nèi)容"的需求依然存在。主要出現(xiàn)在多項(xiàng)內(nèi)容同時(shí)清空的場(chǎng)景，例如 b 端篩選中常用的"重置/清除"功能，以及多選框中快速清空選項(xiàng)。

2. Hover 態(tài)

光標(biāo) hover（懸停）是 PC 端的常用的輕量交互操作，當(dāng)光標(biāo)懸停時(shí)界面元素會(huì)產(chǎn)生狀態(tài)改變。Hover 可以為用戶顯示隱藏的信息（展示 tooltips/二級(jí)菜單）；或指示按鈕狀態(tài)，提示用戶此處可點(diǎn)擊觸發(fā)事件。

但是移動(dòng)端的光標(biāo)（手指）不會(huì)長(zhǎng)期懸停在屏幕上，所以不會(huì)有 hover 態(tài)。而且指尖輕觸即表示"點(diǎn)擊"，因此按鈕將直接從"normal"變?yōu)?quot;pressed"狀態(tài)。相比于 pc 少了"hover"作為中間狀態(tài)，因此在界面設(shè)計(jì)上移動(dòng)端按鈕需要明確的引導(dǎo)性，以傳遞"此處可點(diǎn)擊"的信息。

對(duì)于 hover 的二級(jí)菜單，移動(dòng)端需要多點(diǎn)擊一步展開(kāi)，或者 tab 切換進(jìn)行快速跳轉(zhuǎn)。

3. 按鈕 VS 手勢(shì)

復(fù)雜的手勢(shì)輸入是移動(dòng)端的優(yōu)勢(shì)，但 PC 端需要更多按鈕來(lái)承載功能。下拉刷新是移動(dòng)端 feed 流常用的操作，將頁(yè)面刷新和下滑手勢(shì)絲滑的結(jié)合起來(lái)。在 PC 中如要實(shí)現(xiàn)內(nèi)容區(qū)域的便捷刷新，則需要添加一個(gè)[刷新]按鈕。在 banner 輪播中，pc 通常會(huì)提供準(zhǔn)確的"上/下一頁(yè)"按鈕，而移動(dòng)端中普遍通過(guò)滑動(dòng)查看上/下一張。類似的案例還有圖片放大縮小、視頻音量調(diào)節(jié)。

究其原因，鼠標(biāo)操作一般都有精確的操作/點(diǎn)擊對(duì)象，因此通過(guò)按鈕觸發(fā)事件更為普遍。手勢(shì)操作可以基于整體對(duì)象進(jìn)行滑動(dòng)/拖拽，這是符合用戶手勢(shì)操作心智的交互方式。同時(shí)手勢(shì)操作的準(zhǔn)確度低，屏幕空間有限，用手勢(shì)代替按鈕的性價(jià)比很高。

4. 長(zhǎng)按與右鍵

右鍵呼出更多菜單是 PC 端的常用操作，移動(dòng)端中的對(duì)應(yīng)操作則由單擊長(zhǎng)按完成。而對(duì)于針對(duì)對(duì)象的編輯菜單，在 pc 端需要選中文本對(duì)象后需要點(diǎn)擊右鍵，而移動(dòng)端中選中文本后會(huì)立刻彈出菜單。這由于移動(dòng)端中沒(méi)有像"ctrl+c""ctrl+v"一樣的快捷操作，快速?gòu)棾霾藛螠p少用戶操作步驟；而且選中后若再次疊加一個(gè)長(zhǎng)按行為，很容易誤判成單擊從而取消選中。

5. 彈窗

PC 端信息反饋的樣式更加多樣，包括 tooltip、toast、message、drawer 等。相比移動(dòng)端有更多非模態(tài)彈窗，應(yīng)用方式更靈活，用戶使用過(guò)程流暢。由于屏幕面積小，移動(dòng)端彈窗面積占比更大，對(duì)用戶而言打斷感受更強(qiáng)，在設(shè)計(jì)過(guò)程中需要謹(jǐn)慎。

同時(shí)，移動(dòng)端和 pc 的彈窗按鈕位置也有所區(qū)別。目前移動(dòng)端中強(qiáng)引導(dǎo)按鈕普遍在右側(cè)，而 win 系統(tǒng)中強(qiáng)引導(dǎo)按鈕在左側(cè)（MacOS 則在右側(cè)）。

三、小結(jié)

交互方式差異深刻影響了 PC 和移動(dòng)端界面形態(tài)，這些設(shè)計(jì)細(xì)節(jié)隱藏在日常交互行為中。雖然使用已有組件庫(kù)時(shí)很容易忽略，在多端系統(tǒng)設(shè)計(jì)過(guò)程中依然需要注意這些差異性細(xì)節(jié)。

移動(dòng)端

1. 缺少 hover
2. 輸入相對(duì)不便
3. 點(diǎn)擊準(zhǔn)確性低
4. 手勢(shì)操作便捷
5. 長(zhǎng)摁呼出菜單

PC 端

1. hover 能實(shí)現(xiàn)輕量級(jí)的交互
2. 輸入方式高效快捷
3. 光標(biāo)點(diǎn)擊準(zhǔn)確
4. 右鍵呼出菜單

即使是相同的產(chǎn)品功能也會(huì)產(chǎn)生差異化的交互變體，這些變化可能是基于設(shè)備限制、程序限制或人機(jī)交互行為。在多端產(chǎn)品時(shí)，如果忽略了這些交互細(xì)節(jié)，除了影響產(chǎn)品可用性，還可能違背用戶的使用習(xí)慣，導(dǎo)致產(chǎn)品體驗(yàn)細(xì)節(jié)的缺位。

整體來(lái)看，交互界面不僅是功能的可視化載體，他還縫合了設(shè)備應(yīng)用和用戶行為，是產(chǎn)品使用流程的中樞。往前，界面/交互設(shè)計(jì)中應(yīng)該兼容硬件能力，并傳遞準(zhǔn)確的用戶輸入數(shù)據(jù)；往后，設(shè)計(jì)應(yīng)該向用戶傳遞設(shè)備的能供性，將設(shè)備能力轉(zhuǎn)換成可感知的界面上的能供性，從而為用戶提供完整且細(xì)致的產(chǎn)品體驗(yàn)流程。

作者：ASAK設(shè)計(jì)