在Moody’s Analytics這樣一個(gè)數(shù)據(jù)導(dǎo)向的公司，會碰到各式各樣的表格，涉及到許多對表格的編輯、保存、過濾、搜索等操作，本文介紹幾種編輯和保存的模式，下一篇將講過濾和搜索。

“Inline editing” 從字面上看上去第一眼會以為是在一行中做編輯，其實(shí) “Inline” 是 “內(nèi)聯(lián)的” 的意思，指的是在原頁面進(jìn)行編輯和保存，而不是跳到另一個(gè)頁面進(jìn)行編輯。相比于另起一個(gè)頁面進(jìn)行編輯的形式，Inline editing更符合用戶的直覺，更不容易迷失。

1. 知乎

知乎的個(gè)人資料可以用Inline editing 進(jìn)行編輯。下圖是我的知乎個(gè)人資料頁。

當(dāng)鼠標(biāo)懸浮到某一欄上時(shí)，出現(xiàn)編輯按鈕：

點(diǎn)擊“修改按鈕”，則原欄目變?yōu)榭删庉嫚顟B(tài)，同時(shí)出現(xiàn)“確定”按鈕：

編輯完后點(diǎn)擊“確定”即可完成編輯。整個(gè)過程沒有涉及到任何的頁面跳轉(zhuǎn)，用戶清楚地知道他編輯的內(nèi)容會顯示在哪里。

2. 在表格中的應(yīng)用

經(jīng)過以上介紹，大家想必也了解了Inline editing在表格中如何使用，對，就是直接在表格上進(jìn)行編輯。

2.1 舉個(gè)最簡單的例子，下面的表格是一張已保存的表格。

用戶將鼠標(biāo)點(diǎn)到某一欄時(shí)，該欄即變?yōu)榭删庉嫚顟B(tài)：

這時(shí)用戶可以任意修改。并且當(dāng)鼠標(biāo)點(diǎn)擊到其他欄或者表格以外的地方時(shí)，該可編輯欄lose focus之后自動(dòng)保存修改后的內(nèi)容，并變回不可編輯狀態(tài)。

具體demo可參考：http://www.zkoss.org/zkdemo/grid/inline_editing

2.2 Inline editing的形式基本上如2.1的例子那樣，不同的地方在于觸發(fā)編輯的條件。如下圖，表格中的每一欄都有 edit 和 delete 按鈕。

用戶點(diǎn)擊 edit 即觸發(fā)編輯狀態(tài)，整行都變?yōu)榭删庉嫚顟B(tài)。修改完后可進(jìn)行“update” 或者 “Cancel”。這種編輯方式適合做部分修改的時(shí)候使用，如果整個(gè)表格都要修改，那么用戶需要一行一行地點(diǎn)擊edit、update，就會很麻煩。

具體demo可參考：http://demos.telerik.com/kendo-ui/grid/editing-inline

2.3 觸發(fā)編輯的條件還可以是雙擊，如下圖為原圖：

當(dāng)雙擊某一欄時(shí)，該欄變?yōu)榭删庉嫚顟B(tài)，并出現(xiàn)“update” 和 “Cancel” 按鈕。這種模式顯示隱藏的更深，用戶不容易發(fā)現(xiàn)雙擊進(jìn)入可編輯狀態(tài)這樣一個(gè)動(dòng)作，所以適合作為彩蛋輔助使用，不適合作為主要編輯動(dòng)作。

具體demo可參考：http://dev.sencha.com/extjs/5.0.0/examples/grid/row-editing.html

3. 其他形式

有些形式的編輯也是在原頁面進(jìn)行，但是有彈出框，我不確定算不算inline editing，暫且認(rèn)為是inline editing。

3.1 淘寶購物車，原圖如下：

當(dāng)鼠標(biāo)懸浮到顏色分類欄時(shí)，出現(xiàn)修改按鈕：

點(diǎn)擊修改，彈出顏色分類選項(xiàng)，用戶可重新選擇顏色分類。彈出框沒有屏蔽原頁面，并且彈出框懸停在編輯位置處。當(dāng)用戶點(diǎn)擊彈出框以外的區(qū)域時(shí)，彈出框自動(dòng)消失。與Dialogue彈出框不同，這種彈出框不會阻斷原頁面和編輯頁面的關(guān)聯(lián)性，暫且認(rèn)為也屬于Inline editing。

3.2 LinkedIn 的個(gè)人資料編輯，原圖如下：

鼠標(biāo)懸浮時(shí)出現(xiàn)編輯圖標(biāo)，點(diǎn)擊編輯圖標(biāo)彈出編輯器：

這個(gè)形式和淘寶購物車的彈出編輯器一樣，都是在原編輯內(nèi)容旁邊彈出一個(gè)編輯器，不發(fā)生頁面的跳轉(zhuǎn)，不阻斷編輯器和原文的關(guān)聯(lián)性。

4.總結(jié)：

Inline editing是指在原頁面編輯并保存而不需要跳轉(zhuǎn)頁面進(jìn)行編輯的一種形式，符合用戶的直覺，適合小范圍的編輯?？赡苡酗@性的編輯按鈕進(jìn)入Inline editing 狀態(tài)，也可能是隱形的編輯按鈕在鼠標(biāo)懸浮時(shí)才出現(xiàn)，甚至沒有編輯按鈕，通過鼠標(biāo)單擊或雙擊就能進(jìn)入編輯狀態(tài)，最后一種方法隱藏太深，不適合做主要編輯方式。

#專欄作家#

Snow，微信公眾號：用戶體驗(yàn)報(bào)告。人人都是產(chǎn)品經(jīng)理專欄作家，東南大學(xué)工業(yè)設(shè)計(jì)研究生，每周更新一篇原創(chuàng)產(chǎn)品體驗(yàn)報(bào)告，分析產(chǎn)品設(shè)計(jì)體驗(yàn)的好壞，以此進(jìn)步。愿與大家共同進(jìn)步。

本文系作者授權(quán)發(fā)布，未經(jīng)許可，不得轉(zhuǎn)載。