編輯功能對於使用者來說，是非常重要的一個功能，產品能夠讓使用者自定義編輯，把選擇權交給他們，有利於產品呈現多樣性。而在這些編輯功能背後，是否存在著共性的設計呢？本文從如何觸發、如何展示、如何儲存三個方面進行探索，一起來看看。
最近對於編輯功能做了一個簡單的產品調研，然後驚訝地發現，現在市面上流行的編輯功能樣式盡然有十幾種，單純從數量上來看，造成編輯樣式如此多的原因，在於所對應的業務的多樣性。
但如果跳出業務層面，從產品層面來看待這些編輯功能，在這些編輯功能背後，是否存在著共性的設計呢？
或許我們可以從以下三個方面進行一番探索：如何觸發？如何展示？如何儲存？
一、如何觸發
使用者在使用某款產品時，最為常見的頁面狀態為“檢視態”，與這一常規狀態相比，“編輯態”則是一種非常規狀態，而這一非常規狀態的觸發，則是需要一個前置的互動操作的。
作為編輯功能的一部分，這一互動操作本身與頁面內容並沒有太多的邏輯關聯性，在實際使用的過程中，很容易作為干擾項，影響使用者當前的閱讀進度。
那麼為給予使用者更好的使用體驗，應該如何設計這一前置的互動操作呢？
“明確閱讀體驗與編輯需求的優先順序”：
“檢視態”與“編輯態”並不是一對相互對立的狀態，相反，這兩種狀態是可以共存的，而透過需求優先順序的排序，可以幫助我們確定觸發操作的互動比重，從而保證當前使用者閱讀需求與編輯需求的平衡。
1. hover態
常規狀態下，頁面只是單純的文案展示，當滑鼠hover到內容上方後，對應的內容尾部就會顯示“編輯”按鈕，點選後，當前欄位就可切換至可編輯狀態。
顯然，對於hover態的觸發方式來說，其最大的優點就在於：“將選擇權交還給使用者，使用者可以根據自己的需求，主動選擇按鈕的顯隱，這樣就可以極大程度的減少前置互動操作，對於使用者閱讀體驗的影響。
hover態的缺點：“觸發方式不易發現，導致編輯功能被忽略”。
hover態輕量級的觸發方式，將選擇權交還給了使用者，但具體的觸發過程，則需要使用者將滑鼠移動到具體內容上，並且對於這一操作，頁面上也不會有對應的提示，這樣很容易就會導致，編輯功能被完全遺忘。
意見與建議：
如果需要編輯的欄位比較重要，或者使用者對於當前內容編輯的可能性較高，hover模式的編輯觸發方式，不建議使用
如果只是有簡單的編輯需求，並且所編輯的欄位不是很重要，那麼為了使用者閱讀體驗的流暢性，可以考慮這種觸發方式
2. 外顯態
常規狀態下，編輯按鈕直接外顯，與頁面內容同級，點選按鈕後，可進入到編輯狀態中，這種外顯態的觸發方式，其優缺點也十分的明顯。
優點：減少使用者使用路徑
按鈕外顯，使用者不需要進行滑鼠hover，直接點選編輯按鈕，從而進入到編輯態，這樣使使用者更容易觸達編輯態，整個流程簡潔高效。
缺點：干擾閱讀進度，增加使用者閱讀理解成本
編輯按鈕與頁面內容，本身並不存在多少的邏輯關係，編輯按鈕對於使用者“閱讀”這一行為來說，就是一個干擾資訊。
干擾資訊的存在，就會徒增使用者的閱讀理解成本，干擾使用者閱讀進度。
意見與建議：
如果當前頁面的內容，使用者有很大機率編輯，建議使用外顯態的觸發方式
如果使用者需要編輯的內容資訊比較重要，建議使用外顯的觸發方式
不適合那些以閱讀、檢視為核心需求的場景使用
二、如何展示
在選擇了觸發方式之後，點選對應按鈕就可以切換至編輯狀態，而這個編輯狀態，應該如何展示呢？
1. 當前頁面
點選編輯按鈕後，頁面中對應的欄位切換為編輯態，而一般欄位的切換可以分為兩種，單欄位與多欄位，但無論是單欄位還是多欄位，其共同點都是在“當前頁面”進行狀態的切換。
當前頁面的編輯，使用者可以很方便地對於上下文資訊進行檢視，從而保證整體編輯流程的連貫性，但這種頁面內的編輯，由於所編輯的欄位較少，往往支援的編輯樣式也較少，這樣就對於可編輯的範圍進行了限制，不能給予使用者更完善的編輯體驗。
意見與建議：
儘量選擇單欄位編輯或欄位較少的編輯
對於閱讀檢視有一定要求的場景，可以採用這種編輯展現方式
若所編輯的資訊內容比較重要，不建議採用這種編輯樣式
2. 彈窗/浮層
點選編輯按鈕後，編輯態的展現樣式以彈窗/浮層的形式呈現，這種展現樣式最大的特點，就是跳出了原有頁面，以一個“中間態”的形式來展示所要編輯的資訊，而這種“中間態”的展示，也造就了該樣式的優點與缺點。
優點：
承載更多資訊：
彈窗/浮層，相當於是在原有頁面的基礎上，開闢了一個新的空間，新空間所帶來的資訊增量，相較於原有頁面的資訊量，肯定是更多的，所以彈窗/浮層這種形式，可以承載更多的資訊。
聚焦使用者注意力：
點選按鈕後，彈窗/浮層出現。在那一刻，使用者所有的目光及注意力，會被強行聚焦在彈窗/浮層上。
支援較複雜的編輯功能：
頁面內的編輯形式為了保持統一性，只能支援文字編輯等簡單的編輯模式
而彈窗的展現形式，由於其空間的延展性以及內容的相對獨立性
可以支援一些較複雜的編輯模式，如：附件上傳、圖片上傳等
缺點：給使用者造成較為嚴重的割裂感
編輯態作為一種非常規狀態，狀態之間的切換，很容易就會給使用者造成影響
而彈窗/浮層的展現樣式，是在原有頁面的基礎上對於原有頁面的跳出
突然出現在使用者眼前，並且也不是使用者所習慣的內容及狀態
必然會與使用者現有的使用狀態產生矛盾，打破使用者當前的狀態，從而產生割裂感
適合場景：
所編輯的資訊為重要資訊，需要使用者注意力集中
所編輯的內容，在數量上有一定的要求
所編輯的內容，在編輯形式上有一定的要求
3. 新頁面
點選標記按鈕後，當前頁面會自重新整理或者新開一個新頁面，這種展現方式的核心，是將內容放置在一個新的空間下進行編輯，這一新的空間，可以看成是彈窗/浮層的放大版，所以這種新頁面的展現方式，也就繼承了彈窗/浮層的優點，並且在數量與質量上，都得到了不同程度的提高。
但與提高的優點相對應的，彈窗/浮層所具有的缺點，也是被同比例的放大，無論是新增頁面，還是頁面的自重新整理，對於使用者閱讀檢視體驗的影響，都是成倍增加的。
因為這種展現方式，不僅僅會強制打斷使用者當前的閱讀進度，甚至還會將整個閱讀過程切斷，切斷使用者與之前頁面的聯絡。
適用場景：
大量資料的編輯填寫（比如：新增一篇文章、新建一個數據表格等）
互動邏輯較多的編輯填寫（比如：所編輯的內容包含文字、下拉框選擇、附件上傳、圖片上傳等）
三、如何儲存
在編輯完成後，就需要對於所編輯的資訊進行儲存，現在市面上比較流行的儲存方式有兩種。
1. 失焦後，自動儲存
沒有儲存按鈕，使用者可以隨意點選任何地方，只要當前編輯狀態失焦，就會自動退出當前的編輯狀態，同時剛才所編輯的內容，也會一併儲存下來，這種儲存方式的特點就是“輕量”，適合與上文提到的“hover態”配套使用。
適用場景：
編輯的資訊為單欄位的資訊——多欄位的編輯，很容易出現尚未編輯完，由於誤觸而退出編輯狀態的情景，這時候就需要使用者再次點選進入編輯模式，拉長了使用者使用路徑
編輯的資訊不能是太重要的資訊
2. 點選按鈕後儲存
編輯完成之後，點選儲存按鈕，退出編輯態，並且儲存當前所編輯的所有資訊，這種儲存方式相較於失焦儲存就更為正式，使用者需要點選固定的“儲存”按鈕後才能儲存。
這種儲存方式最大的特點就是“確定性”，使用者可以明確的知道，在哪裡可以進行資訊的儲存，並且這種方式與使用者之間的互動感也更強，可以給予使用者更好的結果反饋。
適用場景：
引用文獻：
栗子設計喵：《頁面編輯竟然包含這麼多細節，如何把編輯體驗做的順滑》
LIZ醬：《B端產品設計細節分析：編輯功能》
本文由 @珞小土 原創釋出於人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基於 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供資訊儲存空間服務。