編輯功能對于用戶來說，是非常重要的一個功能，産品能夠讓用戶自定義編輯，把選擇權交給他們，有利于産品呈現多樣性。而在這些編輯功能背後，是否存在着共性的設計呢？本文從如何觸發、如何展示、如何保存三個方面進行探索，一起來看看。

最近對于編輯功能做了一個簡單的産品調研，然後驚訝地發現，

現在市面上流行的編輯功能樣式盡然有十幾種

單純從數量上來看，造成編輯樣式如此多的原因，在于所對應的業務的多樣性。

但如果跳出業務層面，僅從産品層面來看待這些編輯功能

“在這些編輯功能背後，是否存在着共性的設計呢？”

或許我們可以從以下三個方面進行一番探索：

用戶在使用某款産品時，最為常見的頁面狀态為“查看态”

與這一常規狀态相比，“編輯态”則是一種非常規狀态

而這一非常規狀态的觸發，則是需要一個前置的交互操作的。

作為編輯功能的一部分，這一交互操作本身與頁面内容并沒有太多的邏輯關聯性

所以在實際使用的過程中，很容易作為幹擾項，影響用戶當前的閱讀進度。

那麼為給予用戶更好的使用體驗，應該如何設計這一前置的交互操作呢？

“明确閱讀體驗與編輯需求的優先級”

“查看态”與“編輯态”并不是一對相互對立的狀态，相反，這兩種狀态是可以共存的，而通過需求優先級的排序，可以幫助我們确定觸發操作的交互比重，從而保證當前用戶閱讀需求與編輯需求的平衡。

1. hover态

常規狀态下，頁面隻是單純的文案展示

當鼠标hover到内容上方後，對應的内容尾部就會顯示“編輯”按鈕，點擊後

當前字段就可切換至可編輯狀态。

顯然，對于hover态的觸發方式來說

其最大的優點就在于：“将選擇權交還給用戶”

用戶可以根據自己的需求，主動選擇按鈕的顯隐

這樣就可以極大程度的減少前置交互操作，對于用戶閱讀體驗的影響。

hover态的缺點：“觸發方式不易發現，導緻編輯功能被忽略”

hover态輕量級的觸發方式，将選擇權交還給了用戶

但具體的觸發過程，則需要用戶将鼠标移動到具體内容上

并且對于這一操作，頁面上也不會有對應的提示

這樣很容易就會導緻，編輯功能被完全遺忘。

意見與建議：

• 如果需要編輯的字段比較重要，或者用戶對于當前内容編輯的可能性較高，hover模式的編輯觸發方式，不建議使用
• 如果隻是有簡單的編輯需求，并且所編輯的字段不是很重要，那麼為了用戶閱讀體驗的流暢性，可以考慮這種觸發方式

2. 外顯态

常規狀态下，編輯按鈕直接外顯，與頁面内容同級，點擊按鈕後，可進入到編輯狀态中，這種外顯态的觸發方式，其優缺點也十分的明顯。

優點：減少用戶使用路徑

按鈕外顯，用戶不需要進行鼠标hover，直接點擊編輯按鈕，從而進入到編輯态，這樣使用戶更容易觸達編輯态，整個流程簡潔高效。

缺點：幹擾閱讀進度，增加用戶閱讀理解成本

編輯按鈕與頁面内容，本身并不存在多少的邏輯關系，編輯按鈕對于用戶“閱讀”這一行為來說，就是一個幹擾信息。

幹擾信息的存在，就會徒增用戶的閱讀理解成本，幹擾用戶閱讀進度。

意見與建議：

• 如果當前頁面的内容，用戶有很大概率編輯，建議使用外顯态的觸發方式
• 如果用戶需要編輯的内容信息比較重要，建議使用外顯的觸發方式
• 不适合那些以閱讀、查看為核心需求的場景使用

在選擇了觸發方式之後，點擊對應按鈕就可以切換至編輯狀态，而這個編輯狀态，應該如何展示呢？

1. 當前頁面

點擊編輯按鈕後，當前頁面中對應的字段，就會自動切換到編輯狀态

而這些可以在“當前頁面”被編輯的内容，其自身也具有一些特點：

• 所編輯的内容邏輯單一，一般不會出現級聯編輯的操作
• 所編輯的内容簡單，沒有複雜的交互邏輯
• 所編輯的内容樣式簡單

像知乎所設計的編輯模塊，在當前頁面進行的編輯，就是簡單的文字輸入修改

并且在編輯的過程中，不會産生新的級聯編輯的可能

在我們日常使用中，最為常見的當前頁面的編輯展現形式，就是excel表格的編輯

除非進行表格的新增，否則這個excel表格的編輯，都是在當前頁面進行編輯

這種在當前頁面進行編輯的形式，其最大的優點：

“用戶可以很方便地對于整體信息進行查看”

這樣就可以保證整體編輯流程的連貫性

但這種頁面内的編輯，由于所支持的編輯樣式較少

這樣就對于可編輯的範圍進行了限制，不能給予用戶更完善的編輯體驗

意見與建議：

• 盡量選擇單字段編輯或字段較少的編輯
• 對于閱讀查看有一定要求的場景，可以采用這種編輯展現方式
• 若所編輯的信息内容比較重要，不建議采用這種編輯樣式

2. 彈窗/浮層

點擊編輯按鈕後，編輯态的展現樣式以彈窗/浮層的形式呈現，這種展現樣式最大的特點，就是跳出了原有頁面，以一個“中間态”的形式來展示所要編輯的信息，而這種“中間态”的展示，也造就了該樣式的優點與缺點。

優點：

承載更多信息：

彈窗/浮層，相當于是在原有頁面的基礎上，開辟了一個新的空間，新空間所帶來的信息增量，相較于原有頁面的信息量，肯定是更多的，所以彈窗/浮層這種形式，可以承載更多的信息。

聚焦用戶注意力：

點擊按鈕後，彈窗/浮層出現。在那一刻，用戶所有的目光及注意力，會被強行聚焦在彈窗/浮層上。

支持較複雜的編輯功能：

頁面内的編輯形式為了保持統一性，隻能支持文本編輯等簡單的編輯模式，而彈窗的展現形式，由于其空間的延展性以及内容的相對獨立性，可以支持一些較複雜的編輯模式，如：附件上傳、圖片上傳等。

缺點：給用戶造成較為嚴重的割裂感

編輯态作為一種非常規狀态，狀态之間的切換，很容易就會給用戶造成影響，而彈窗/浮層的展現樣式，是在原有頁面的基礎上對于原有頁面的跳出，突然出現在用戶眼前，并且也不是用戶所習慣的内容及狀态，必然會與用戶現有的使用狀态産生矛盾，打破用戶當前的狀态，從而産生割裂感。

适合場景：

• 所編輯的信息為重要信息，需要使用者注意力集中
• 所編輯的内容，在數量上有一定的要求
• 所編輯的内容，在編輯形式上有一定的要求

3. 新頁面

點擊标記按鈕後，當前頁面會自刷新或者新開一個新頁面，這種展現方式的核心，是将内容放置在一個新的空間下進行編輯，這一新的空間，可以看成是彈窗/浮層的放大版，所以這種新頁面的展現方式，也就繼承了彈窗/浮層的優點，并且在數量與質量上，都得到了不同程度的提高。

但與提高的優點相對應的，彈窗/浮層所具有的缺點，也是被同比例的放大，無論是新增頁面，還是頁面的自刷新，對于用戶閱讀查看體驗的影響，都是成倍增加的。

因為這種展現方式，不僅僅會強制打斷用戶當前的閱讀進度，甚至還會将整個閱讀過程切斷，切斷用戶與之前頁面的聯系。

适用場景：

• 大量數據的編輯填寫（比如：新增一篇文章、新建一個數據表格等）
• 交互邏輯較多的編輯填寫（比如：所編輯的内容包含文本、下拉框選擇、附件上傳、圖片上傳等）

在編輯完成後，就需要對于所編輯的信息進行保存，現在市面上比較流行的保存方式有兩種。

1. 失焦後，自動保存

沒有保存按鈕，用戶可以随意點擊任何地方，隻要當前編輯狀态失焦，就會自動退出當前的編輯狀态，同時剛才所編輯的内容，也會一并保存下來，這種保存方式的特點就是“輕量”，适合與上文提到的“hover态”配套使用。

适用場景：

• 編輯的信息為單字段的信息——多字段的編輯，很容易出現尚未編輯完，由于誤觸而退出編輯狀态的情景，這時候就需要用戶再次點擊進入編輯模式，拉長了用戶使用路徑
• 編輯的信息不能是太重要的信息

2. 點擊按鈕後保存

編輯完成之後，點擊保存按鈕，退出編輯态，并且保存當前所編輯的所有信息，這種保存方式相較于失焦保存就更為正式，用戶需要點擊固定的“保存”按鈕後才能保存。

這種保存方式最大的特點就是“确定性”，用戶可以明确的知道，在哪裡可以進行信息的保存，并且這種方式與用戶之間的交互感也更強，可以給予用戶更好的結果反饋。

适用場景：

引用文獻：

• 栗子設計喵：《頁面編輯竟然包含這麼多細節，如何把編輯體驗做的順滑》
• LIZ醬：《B端産品設計細節分析：編輯功能》

本文由 @珞小土 原創發布于人人都是産品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于 CC0 協議

該文觀點僅代表作者本人，人人都是産品經理平台僅提供信息存儲空間服務。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!