本文將針對 B 端設計中常見的交互操作進行分析總結。

內(nèi)頁編輯

《About Face：交互設計精髓》一書中有提到一種錯誤的編輯方式：

“......很多程序一個地方用于輸出，另一個地方用于輸入，把它們看成是兩個獨立的過程。用戶的認識模型很難理解這種差異?！?/p>

同時,《About Face :交互設計精髓》的作者也總結了一條簡單的規(guī)則： 在哪里輸出，就要允許在哪里輸入。就是讓界面能夠直接響應用戶的操作一一“直截了當”。

為了說明這條規(guī)則，我們將探討一些產(chǎn)品的交互模式，采用這些模式有助于界面更直接地響應用戶操作。

1. 單字段行內(nèi)編輯

如果你是一次使用“語雀”，你是否知道左上方標題可以“編輯”？如果你知道，問問自己是怎么知道的，是否來自之前的經(jīng)驗（心智模型）。如果使用者沒有這方面的心智模型，應該怎么辦？

在看看“釘釘”個人信息中“昵稱”你是否知道可編輯，如果知道，問問自己是怎么知道的？

以上兩個案例，相信看這篇文章的同學應該都知道怎么編輯，這是因為我們心智模型都被培養(yǎng)過。

唐納德·諾曼在《設計心理學》一書中的解釋：心智模型是存在于用戶頭腦中對一個產(chǎn)品應具有的概念和行為的知識。這種知識可能來源于用戶以前使用類似產(chǎn)品沉淀下來的經(jīng)驗，或者是用戶根據(jù)使用該產(chǎn)品要達到的目標而對產(chǎn)品概念和行為的一種期望。

語雀這樣做不知道是不是做過用戶調(diào)研，因為用語雀的人幾乎都是互聯(lián)網(wǎng)相關行業(yè)的人，這些人群的特點就是學習適應能力特別強且用戶心智模型有被培養(yǎng)。

釘釘為什么沒有這么做，可能是因為釘釘?shù)挠脩羧巳翰⒉恢皇腔ヂ?lián)網(wǎng)人群，還有很多制造業(yè)和傳統(tǒng)行業(yè)的用戶，這些人群的心智模型沒有被培養(yǎng)。

結合以上案例，我們在設計單字段編輯功能時，一定要考慮一個問題：用戶怎么才能發(fā)現(xiàn)這個功能？

通常我們會采用三種交互方式：

其中 2、3 是需要鼠標停在標題上之后，可編輯提示才會出現(xiàn)。

因此，是否能被發(fā)現(xiàn)取決于用戶的鼠標是否懸停在了標題上，并且是否會注意到。

為了讓功能更容易被發(fā)現(xiàn)，可以將提示直接放在頁面中。例如圖中 1，可以在標題旁邊放一個圖標或文字按鈕，單擊即可觸發(fā)編輯。

有了這個隨時可見的效果后，編輯功能就更容易被注意到了。

不過，圖標或文字按鈕在有些場景下會影響頁面視覺平衡及干擾問題，如果功能及其提示在頁面中的數(shù)量過多，可能會影響操作效率。

這個時候就需要我們設計師去尋找平衡點，我們可以與產(chǎn)品探討一下這個地方“易讀性”和“易編輯性”那個更重要。例如：“易讀性”重要，則應該在用戶與內(nèi)容交互時再給出可以編輯的提示；

Quick BI 采用的就是“易讀性”優(yōu)先。鼠標沒觸發(fā)前沒任何提示，當鼠標放到標題上時，就會出現(xiàn)一個輸入框同時指針標為編輯狀態(tài)。單擊輸入框就可以進行編輯，單擊編輯字段外部或按 Tab 切換至其他標題，就會自動保存修改。這種方式減少了視覺干擾，確保了標題編輯區(qū)域視覺上的整潔美觀。

2. 多字段行內(nèi)編輯

多字段行內(nèi)編輯顧名思義就是在行內(nèi)編輯多個值。

例如：問卷產(chǎn)品，為了便于閱讀，會將標題與內(nèi)容放到一起。編輯時，這兩個值分別對應表單中的多個輸入字段。

但這種編輯模式要注意兩者之間的高度變化，因為編輯時需要不同大小的頁面空間和布局，也會使用不同數(shù)量和類型的組件。所以，顯示與編輯模式的切換很可能造成用戶視覺上的割裂，采用這種交互時要考慮當前場景是否合適。

同樣的方式也會出現(xiàn)在表格字段編輯中，當點擊編輯按鈕后，表格內(nèi)字段變成輸入框（可編輯狀態(tài)），不過這種形式現(xiàn)在很少用了，基本上都是采用抽屜和彈窗了。

3. 覆蓋層編輯

前面兩個模式都是在頁面的文本中實現(xiàn)行內(nèi)編輯。

覆蓋層編輯是通過在頁面上方添加一層來放置編輯表單。雖然編輯期間也不會離開當前頁面，但不是在內(nèi)容中直接實現(xiàn)編輯。而是采用彈出式覆蓋層（例如對話框、抽屜）作為編輯窗。

有時候，不可能把某個復雜的編輯任務安排在同一個區(qū)域內(nèi)完成。如果嵌入的編輯區(qū)域太大，會把內(nèi)容過多的推向下方而損害頁面的整體感。

而覆蓋層能夠為用戶提供明確的編輯空間，只要一個輕量級的覆蓋層就足以勝任。

用一句話總結何時使用覆蓋層：

如果有必要占用獨立空間放置編輯項，且頁面的上下文對編輯項不重要（覆蓋層可能會遮擋下面內(nèi)容），就可以考慮使用覆蓋層編輯。

4. 群組編輯

如前面所述，我們應該保持顯示模式與編輯模式之間的差異最小化。

如果想盡量保持頁面項整齊有序的前提下支持編輯功能，可以考慮使用群組編輯模式。

例如：飛書管理后臺--關聯(lián)組織--安全設置，我們可以對關聯(lián)組織需要展示的字段進行設置，點擊編輯就會高亮所有字段進入編輯狀態(tài)，可以對字段新增與去除，此時的編輯已被保存替代，點擊保存就會退出群組編輯模式。

進入與退出編輯模式通常應該采用同樣的交互風格。這樣才有助于發(fā)現(xiàn)相反的操作。而這就是所謂的對稱性交互原則 。

5. 總結

頁內(nèi)編輯是實現(xiàn)直接交互的重要手段。以下是在選擇具體編輯模式時應該考慮的一些指導原則:

1. 如果頁面中有一個字段須要編輯，應該優(yōu)先使用單字段行內(nèi)編輯。
2. 如果只考慮易讀性，可通過鼠標懸停提示用戶編輯。
3. 對于多個字段的編輯,可以使用多字段行內(nèi)編輯。
4. 使用多字段行內(nèi)編輯時，盡可能保證顯示和編輯區(qū)域大小相同，這樣可以避免頁面抖動。
5. 如果編輯時的上下文無關緊要，或者用戶在編輯時應該全神貫注，則可使用覆蓋層編輯。
6. 在處理頁面中的多個項時，群組編輯是平衡視覺干擾與易發(fā)現(xiàn)性的有效方案。
7. 盡量不要讓用戶通過雙擊切換至編輯模式，除非你的產(chǎn)品與桌面端非常相似。

利用拖放

拖放看起來似乎很簡單，就是抓住某個元素把它放到另一個地方而已?？墒?，事實上，拖放過程涉及到了大量細節(jié)。在拖放期間，須要處理許多特定的狀態(tài)，我們把這些微狀態(tài)稱為交互事件。

例如：

拖放期間有很多事件發(fā)生，如何選擇并利用這些事件對用戶給出反饋是關鍵。此外，在對用戶給出反饋時,還必須合理運用頁面中的諸多元素。

1. 拖放事件

在整個拖動期間，至少可以利用 15 個事件來提示用戶：

頁面加載

在所有操作發(fā)生之前，可以預告拖放功能。 例如，可以在頁面上顯示一條提示信息,告訴用戶可以拖放某些元素。

鼠標懸停

鼠標指針懸停在可拖動的對象上方。

鼠標按下

在可拖動對象上按下鼠標鍵。

拖動啟動

鼠標開始移動(通常的標準是移動 3 像素啟動)。

拖動離開原始位置

可拖動對象離開原始的位置。

拖動重新進入原始位置

可拖動對象回到原來的位置。

拖動進入有效目標

可拖動對象位于有效的放置目標上方。

拖動退出有效目標

可拖動對象離開有效的放置目標。

拖動進入無效目標

可拖動對象位于無效的放置目標上方。

拖動進入非特定目標

可拖動對象位于放置目標和非放置目標之外的區(qū)域。取決于是否將有效目標之外的 區(qū)域全都看成無效目標。

拖動懸停于有效目標

可拖動對象暫時停駐于有效目標之上，但用戶沒有釋放鼠標。此時，有效的放置目標通常會突然打開。例如，拖動并在一個文件夾上方暫停，文件夾會打開以示可以 接受上方對象。

拖動懸停于無效目標

可拖動對象暫時停駐于無效目標之上，但用戶沒有釋放鼠標。這個事件有用嗎?也許可以在此時對用戶給出反饋，說明為什么下面不是一個有效目標。

放置被接受

可拖動對象位于有效目標之上，而且放置已經(jīng)被接受。

放置被拒絕

可拖動對象位于無效目標之上，而且放置已經(jīng)被拒絕。此時用不用把被拖動對象移回原位?

放置在父容器上

拖動對象時的位置一般來說不會有什么特殊之處，不過在個別情況下，不同位置會有不同的含義。

2. 相關元素

上述每個事件發(fā)生時，都會觸發(fā)一些相關元素。這些元素包括:

1. 頁面(例如：在頁面上顯示靜態(tài)消息“點擊或拖動文件至此”)
2. ?光標
3. 工具提示條（Tooltip）
4. 拖動對象（或拖動對象的某些部分，例如：拖動目標的標題）
5. 拖動對象的父容器
6. 放置目標

3. 交互事件組合

拖放一共 15 個事件+6 個相關元素。也就是說，有 90 種不同的交互形式，而每一種形式涉及到的樣式與過程都是不一樣的。

針對具體的拖放功能，可以把這些因素綜合起來，繪制一個簡單的交互網(wǎng)格。

利用這個網(wǎng)格做拖放交互非常方便。它就像是一個備忘錄，可以確保不遺漏交互過程中須要處理的任何情況。這個網(wǎng)格最左側的一列是相關元素，最上面一行是須要處理的事件。而每個交叉點上，則是想要實現(xiàn)的行為。

4. 拖放的用途

如果運用得當，拖放是一種非常強大的手段。

以下是適合使用拖放的情況:

1. 拖放模塊 重新排列頁面上的模塊
2. 拖放列表 重新排列列表項的順序
3. 拖放對象 改變對象間的從屬關系
4. 拖放操作 在被放置對象上執(zhí)行操作
5. 拖放集合 通過拖放操作集合

5. 拖放模塊

拖放最大的用途就是允許用戶按照自己的意愿把對象直接放在頁面的相應位置上。典型的模式就是在頁面上拖放模塊。

例如：

正常顯示：正常情況下，沒有顯示模塊可以拖放的提示。

邀請（觸發(fā)）拖動：鼠標移動到模塊標題區(qū)，光標改變，提示該模塊是可以拖動的。

拖動：直接拖動可以離開模塊。此時，模塊原始位置顯示為一個灰色塊狀（也可以是線框）。

邀請放置：當模塊達到放置區(qū)域后，灰色底塊會自動吸附，表示可以放置。底塊在拖放過程中表示對象可能的歸宿。

而上面這套交互方式也可以由一組交互網(wǎng)格圖構成。

在拖動過程中，需要告訴用戶如果放開拖動對象會發(fā)生什么。此時，有兩種表示目標位置的方法。

占位符目標

思路就是在可能放置的地方給一個線框或者底色。

插入目標

用戶在拖動模塊時，布局保持不變。因為移動的不是模塊，而是插入條。插入條指明了放置模塊時的目標位置。

總結：

1. 如果拖動期間清晰地展示預覽效果很重要，應該使用占位符目標。
2. 如果想避免頁面抖動(保持布局穩(wěn)定)，應該使用插入目標。

6. 拖放列表

列表和模塊都可以對布局進行重新排列。但列表只能在一個維度上進行拖動（上/下或左/右）。

正常顯示狀態(tài)：列表上加了拖拽圖標提示

邀請拖動：鼠標懸停在列表上會顯示一個可移動的抓手（也可以使用 4 向箭頭+點狀圖標），表示可以移動該項。

拖動：重排是實時發(fā)生的，拖動過程中，被放置的空間會顯示出來。

放置：被拖動的列表項“吸入”新位置。

總結：

1. 只要可能，就應該實時拖動列表項并使用占位符目標。
2. 要使用鼠標位置來確定拖動目標的位置 。

7. 拖放對象

拖放的另一個常見用途是修改對象之間的從屬關系。如果對象間的關系可以形象化地表示出來，那么就可以使用拖放。而且，拖放也確實是把操作關系形象化的一種強大工具。

正常顯示狀態(tài)：用于形象地表示關系的組織結構圖。

邀請拖動：當鼠標懸停于某個成員上時，光標會改變，以表示可以拖動。

拖動：一般我們可能會采用上面提到的“占位符”與“插入項”，但這個產(chǎn)品采用了另外一種形式，必須選擇一個目標參考，圍繞這個目標可以實現(xiàn)相關層級的變換（不知道是因為技術原因還是其它）。個人更喜歡（圖三）思維腦圖這種“占位符”形式，看起來更清晰。

放置：被拖動的項放置后，結構自動進行重拍，以適應新位置。

總結：

1. 如果對象之間關系很復雜，可使用插入項來表示放置位置，以便降低拖動對頁面布局干擾。
2. 在對象被拖動 3 像素或鼠標按下超過 0.5 秒時啟動拖動。
3. 鼠標懸停在可以拖動的對象上時，可通過改變光標來表明可以拖動。

8. 拖放操作

拖放操作是一個常見的模式，最常見的例子就是把桌面文件移動到垃圾筒中，以執(zhí)行刪除操作。 我們在 Web 應用中上傳照片，一般會使用上傳按鈕和瀏覽并查找照片等操作。每上傳一幅照片，這些操作都要重復一遍。

正常顯示狀態(tài)：文字提示用戶可以把圖片拖放到目標區(qū)域。

邀請拖動：通過文字邀請方式提示用戶可在此區(qū)域釋放鼠標。

放置：放置的照片會被集中到上傳處理處理區(qū)，如果圖片管理、圖片裁切等功能，可以直接顯示圖片。

完成：上傳完成后，如有需要可以對圖片再次編輯。

總結：

1. 在 Web 界面中使用拖放操作必須有所節(jié)制，因為該項功能不容易發(fā)現(xiàn)，有時甚至達不到期望的效果。
2. 不建議用拖放設置簡單的屬性，應該使用更直接的方式。
3. 不要僅僅為了實現(xiàn)拖放而創(chuàng)建人造視覺元素，拖放應該符合界面中的自然表現(xiàn)。
4. 在鼠標懸停時提供明確的邀請，說明可以執(zhí)行的操作。

9. 拖放集合

拖放的另一種用途是為了實現(xiàn)購買、添加書簽或保存到臨時區(qū)域等功能的集中操作。

正常顯示：內(nèi)容區(qū)域有給提示，但不夠清晰。

邀請：鼠標移動到目標鼠標指針會有提示

拖動：移動過程中目標雖然做了半透明處理，但并不明顯，因為本身顏色飽和度就比較低，拖到了放置區(qū)域也沒有任何提示，這可能就是大多 b 端產(chǎn)品的現(xiàn)狀，功能實現(xiàn)就行。

放置：把需要的目標拖到放置區(qū)域后，集中進行操作。

總結：

1. 在拖動開始時，突出顯示有效的放置區(qū)域以提示用戶可以把項目放在那里。
2. 必須時要提供可替代方式（例如：在空白區(qū)域通過按鈕添加的形式）

謝謝大家觀看！ 下一集準備中......