這是網頁設計中非常經典的界面設計權威指南。現将裡面的重要觀點和結論總結分享出來。
原理一：直截了當
Alan Cooper總結了一條簡單的規則：在哪裡輸出，就要允許在哪裡輸入。就是讓界面能夠直接響應使用者的操作——直截了當。可以通過以下模式更直接的響應使用者操作：頁内編輯、利用拖放、直接選擇。
1.頁内編輯：頁内編輯最直接的形式是在頁面的上下文中編輯。使用者不會離開頁面，直接在頁面上下文中編輯，此時應該支援行内編輯。
行内編輯的優點是不脫離上下文，在編輯的同時不斷參照頁面中其餘内容。如當編輯照片标題時，如果能看到照片會很有幫助。如果編輯的元素從屬于較大的元素合集，同樣有必要采用行内編輯。如微網誌的發表或回複評論。
1.1單字段行内編輯：
編輯操作發生在原地而不是單獨的視窗或者頁面。如網易郵箱的個人名稱編輯：
不過這種個人資訊的編輯采用直接行内編輯的并不常見，用的更多的是在新頁面中的批量個人資訊編輯。
注意事項：使用者怎麼才能發現單字段行内編輯功能，可以嘗試以下幾種：
- 顯示提示條
- 用背景色突出顯示可編輯區域
- 展示編輯光标
隻有當使用者滑鼠懸停在标題上時，這些提示才會出現。是以也可以在标題旁邊放一個“編輯”按鈕，點選即可觸發編輯。不過添加“編輯”按鈕也會涉及平衡頁面視覺幹擾的問題。每添加一個按鈕，會同時增加頁面的了解難度。
如果易讀性比易編輯性重要，則在使用者與内容互動時再給出可以編輯的提示，其他時候應該隐藏提示。
1.2多字段行内編輯
如果行内編輯的是多個值，或者被編輯的項是一種比文本字元串更複雜的資料類型時，編輯内容由主題和内容組成，為了便于閱讀，可以将主題顯示為标題，将内容顯示為正常文本。編輯時，這兩個值分别對應表單中的兩個文本框，同時帶有提示性标簽。
如京東商城在退換貨場景下，對于收貨位址及個人聯系方式的編輯，就采用了直接在目前頁面進行的多字段行内編輯：
注意事項：單字段行内編輯時，顯示和編輯模式的差異化較小，多字段行内編輯時，顯示内容與編輯時可能存在較大差異。編輯模式需要不同大小的頁面空間和布局，也會使用不同數量和類型的元件。
1.3覆寫層編輯
通過在頁面上方添加一層來放置編輯表單。雖然編輯過程不會離開目前頁面，但卻不是在頁面中直接實作編輯，而是把一個輕量級的彈出式對話框作為編輯窗格。
選擇覆寫層編輯而非行内編輯的原因有很多：
- 如果嵌入頁面的編輯區域太大，會将内容過多的推向下面而有損頁面的整體感，我們應該避免這樣的幹擾。
- 如京東商城在下單場景下對于收貨位址的編輯：
- 如果有必要占用專門螢幕空間放置編輯窗格，而且頁面的上下文對編輯任務也不重，就可以考慮使用覆寫層編輯
- 如微信公衆号平台中對于圖檔素材的分組排序功能，需要單獨一塊覆寫層區域，隻顯示分組的名稱，不需要把照片詳情展示出來。
總結：
使用覆寫層應該考慮以下因素：
- 編輯子產品明顯比顯示結果大得多
- 在頁面中編輯子產品占用的區域會導緻重要資訊下移
- 展開後的編輯子產品可能有部分延伸到視窗之外，覆寫層可以保證編輯子產品完全可見
- 你希望為使用者提供清晰的編輯區域
1.4 表格編輯
表格編輯在企業級的Web應用中更為常見。啟動編輯功能，必須通過滑鼠點選的方式，而非滑鼠懸停。這樣就能確定網格的整潔顯示效果。試想如果滑鼠每經過一個單元格就顯示一個編輯框，會有多麼煩人。
表格首要考慮的資料展示，其次才是編輯功能。
總結：
- 着重關注表格資料的可讀性
- 不要通過滑鼠懸停啟動單元格編輯，否則會幹擾到使用者的正常界面互動手過滑鼠單擊啟動編輯功能
- 為編輯操作提供大一些的空間，例如使用下拉編輯框或增大編輯單元格盡可能模仿使用者已熟悉的正常性單元格切換操作(例如使用Excel的慣例)
1.5群組編輯
如果想在盡量保持頁面項目整齊有序的前提下支援編輯功能，可以考慮通過某種互動進入一種特殊編輯模式--群組編輯。
盡量保持編輯模式與顯示模式之間的差異最小化。
正常情況下iPhone主螢幕上的圖示是被鎖定的，長按某個圖示不放會啟動編輯模式，此時可以把圖示拖動到新的位置。
Sketch軟體中，當進行「自定義工具欄」時，所有的工具欄項目同時抖動，提示使用者可以進行增減或重新排序，調整完成後再切回普通模式。
注意事項：
- 易發現性
提供可切換編輯模式的好處是保證編輯模式操作不會幹擾正常顯示，不足之處則是難以被發現。既要容易被發現，又要確定易讀性的沖突很常見，這就必須根據使用者的需求來加以平衡。
- 對稱性互動
進入編輯模式和退出編輯模式的位置相同，且互動方式應該一樣，如通過點選「編輯」「完成」按鈕。
1.6子產品配置
要修改某個單獨子產品的配置時，不必打開新的頁面，而是直接配置每個子產品的内容數量和類型。
如網易郵箱中對頁面顯示的郵件清單數量設定，在右上角的「設定」中選擇數量，選完後頁面中直接根據新數量展示。
注意事項：
視覺幹擾
為每個子產品都添加編輯連結會造成視覺幹擾。替代方案是在整個頁面上添加一個連結編輯，通過這個連結開啟所有子產品的編輯功能，也就是使用群組編輯模式。
如淘寶的商品展示形式，點選右上角的圖示切換所有商品的排版形式：
清單形式
宮格形式
總結：
頁内編輯是實作直接互動的重要手段。以下是選擇具體模式的一些指導原則：
- 如果頁面内有一個字段需要編輯，應優先使用單字段行内編輯
- 對于多個字段或更複雜的編輯，可以使用多字段行内編輯
- 如果編輯時的上下文無關緊要，或者使用者在編輯時應該全神貫注，則使用覆寫層編輯
- 網格編輯應該遵循表格編輯模式
- 在處理頁面中的多個項時，群組編輯是平衡視覺幹擾與易發現性的有效方案
- 如果想讓使用者直接配置模式，則應該使用子產品配置模式
作者：細水，互動設計師。 微信公衆号：互動視角