讓界面直接相應用戶的操作，是一條簡單的規(guī)則，通過頁內編輯、利用拖放、直接選擇這幾種模式可以實現這一操作。本文主要對業(yè)內編輯進行介紹，希望對你有所啟發(fā)。

Alan Cooper總結了一條簡單的規(guī)則：在哪里輸出，就要允許在哪里輸入。就是讓界面能夠直接響應用戶的操作——直截了當?？梢酝ㄟ^以下模式更直接的響應用戶操作：頁內編輯、利用拖放、直接選擇。

一、頁內編輯

頁內編輯最直接的形式是在頁面的上下文中編輯。用戶不會離開頁面，直接在頁面上下文中編輯，此時應該支持行內編輯。

行內編輯的優(yōu)點是不脫離上下文，在編輯的同時不斷參照頁面中其余內容。如當編輯照片標題時，如果能看到照片會很有幫助。如果編輯的元素從屬于較大的元素合集，同樣有必要采用行內編輯。如微博的發(fā)表或回復評論。

1.1 單字段行內編輯

編輯操作發(fā)生在原地而不是單獨的窗口或者頁面。如網易郵箱的個人名稱編輯。

不過這種個人信息的編輯采用直接行內編輯的并不常見，用的更多的是在新頁面中的批量個人信息編輯。

注意事項：用戶怎么才能發(fā)現單字段行內編輯功能，可以嘗試以下幾種：

• 顯示提示條
• 用背景色突出顯示可編輯區(qū)域
• 展示編輯光標

只有當用戶鼠標懸停在標題上時，這些提示才會出現。因此也可以在標題旁邊放一個“編輯”按鈕，點擊即可觸發(fā)編輯。不過添加“編輯”按鈕也會涉及平衡頁面視覺干擾的問題。每添加一個按鈕，會同時增加頁面的理解難度。

如果易讀性比易編輯性重要，則在用戶與內容交互時再給出可以編輯的提示，其他時候應該隱藏提示。

1.2 多字段行內編輯

如果行內編輯的是多個值，或者被編輯的項是一種比文本字符串更復雜的數據類型時，編輯內容由主題和內容組成，為了便于閱讀，可以將主題顯示為標題，將內容顯示為常規(guī)文本。編輯時，這兩個值分別對應表單中的兩個文本框，同時帶有提示性標簽。

如京東商城在退換貨場景下，對于收貨地址及個人聯系方式的編輯，就采用了直接在當前頁面進行的多字段行內編輯。

注意事項：單字段行內編輯時，顯示和編輯模式的差異化較小，多字段行內編輯時，顯示內容與編輯時可能存在較大差異。編輯模式需要不同大小的頁面空間和布局，也會使用不同數量和類型的組件。

1.3 覆蓋層編輯

通過在頁面上方添加一層來放置編輯表單。雖然編輯過程不會離開當前頁面，但卻不是在頁面中直接實現編輯，而是把一個輕量級的彈出式對話框作為編輯窗格。

選擇覆蓋層編輯而非行內編輯的原因有很多：

如果嵌入頁面的編輯區(qū)域太大，會將內容過多的推向下面而有損頁面的整體感，我們應該避免這樣的干擾。

如京東商城在下單場景下對于收貨地址的編輯：

如果有必要占用專門屏幕空間放置編輯窗格，而且頁面的上下文對編輯任務也不重，就可以考慮使用覆蓋層編輯。

如微信公眾號平臺中對于圖片素材的分組排序功能，需要單獨一塊覆蓋層區(qū)域，只顯示分組的名稱，不需要把照片詳情展示出來。

總結：

使用覆蓋層應該考慮以下因素：

• 編輯模塊明顯比顯示結果大得多
• 在頁面中編輯模塊占用的區(qū)域會導致重要信息下移
• 展開后的編輯模塊可能有部分延伸到窗口之外，覆蓋層可以保證編輯模塊完全可見
• 你希望為用戶提供清晰的編輯區(qū)域

1.4 表格編輯

表格編輯在企業(yè)級的Web應用中更為常見。啟動編輯功能，必須通過鼠標點擊的方式，而非鼠標懸停。這樣就能確保網格的整潔顯示效果。試想如果鼠標每經過一個單元格就顯示一個編輯框，會有多么煩人。

表格首要考慮的數據展示，其次才是編輯功能。

總結：

• 著重關注表格數據的可讀性
• 不要通過鼠標懸停啟動單元格編輯，否則會干擾到用戶的正常界面交互手過鼠標單擊啟動編輯功能
• 為編輯操作提供大一些的空間，例如使用下拉編輯框或增大編輯單元
• 盡可能模仿用戶已熟悉的常規(guī)性單元格切換操作(例如使用Excel的慣例)

1.5 群組編輯

如果想在盡量保持頁面項目整齊有序的前提下支持編輯功能，可以考慮通過某種交互進入一種特殊編輯模式–群組編輯。

盡量保持編輯模式與顯示模式之間的差異最小化。

正常情況下iPhone主屏幕上的圖標是被鎖定的，長按某個圖標不放會啟動編輯模式，此時可以把圖標拖動到新的位置。

Sketch軟件中，當進行「自定義工具欄」時，所有的工具欄項目同時抖動，提示用戶可以進行增減或重新排序，調整完成后再切回普通模式。

注意事項：

易發(fā)現性：

提供可切換編輯模式的好處是保證編輯模式操作不會干擾正常顯示，不足之處則是難以被發(fā)現。既要容易被發(fā)現，又要確保易讀性的矛盾很常見，這就必須根據用戶的需求來加以平衡。

對稱性交互：

進入編輯模式和退出編輯模式的位置相同，且交互方式應該一樣，如通過點擊「編輯」「完成」按鈕。

1.6 模塊配置

要修改某個單獨模塊的配置時，不必打開新的頁面，而是直接配置每個模塊的內容數量和類型。

如網易郵箱中對頁面顯示的郵件列表數量設置，在右上角的「設置」中選擇數量，選完后頁面中直接根據新數量展示。

注意事項：

視覺干擾：

為每個模塊都添加編輯鏈接會造成視覺干擾。替代方案是在整個頁面上添加一個鏈接編輯，通過這個鏈接開啟所有模塊的編輯功能，也就是使用群組編輯模式。

如淘寶的商品展示形式，點擊右上角的圖標切換所有商品的排版形式

列表形式：

宮格形式：

總結：

頁內編輯是實現直接交互的重要手段。以下是選擇具體模式的一些指導原則：

• 如果頁面內有一個字段需要編輯，應優(yōu)先使用單字段行內編輯
• 對于多個字段或更復雜的編輯，可以使用多字段行內編輯
• 如果編輯時的上下文無關緊要，或者用戶在編輯時應該全神貫注，則使用覆蓋層編輯
• 網格編輯應該遵循表格編輯模式
• 在處理頁面中的多個項時，群組編輯是平衡視覺干擾與易發(fā)現性的有效方案
• 如果想讓用戶直接配置模式，則應該使用模塊配置模式