"預覽、保存和發佈，是在進行一些圖文編輯時會涉及到的基礎功能，身為這些編輯器的設計者，該如何對這些功能進行考量，如何在設計時最大限度對使用者提供便利，筆者結合自己的工作經歷給出瞭解答。
預覽、保存和發佈，是在進行一些圖文編輯時會涉及到的基礎功能，身為這些編輯器的設計者，該如何對這些功能進行考量，如何在設計時最大限度對使用者提供便利，筆者結合自己的工作經歷給出瞭解答。
預覽、保存和發佈是在設計編輯器類產品中會遇到的基礎功能點，筆者分別負責過H5編輯器、表單編輯器、Workflow編輯器的產品設計。文本將進一步結合圖片編輯器、文字編輯器的分析，在此將自己的思考進行總結，主要涉及到的是實際功能設計時需要注意的部分點，希望與大家討論學習。
一、預覽
預覽功能一般滿足的是編輯者對編輯內容進行確認的需求，當無法在編輯中實現“所見即所得”的效果時，往往會通過預覽來幫助確認實際效果符合其心理預期，在設計時需要考慮以下要點。
1. 是否需要預覽？
需要思考是否為用戶提供了“所見即所得”的效果，“所見”包含的意義不單指視覺層面的文章排版、圖片樣式，比如對於H5還意味著實際的交互體驗，對於Workflow還意味著實際的工作流程是否有效。如果答案是否定的，則可以考慮提供預覽功能。
目前市面上的H5/視頻編輯器等產品一般都會有預覽功能，比如易企秀、兔展等；創作平臺的文章編輯器，比如知乎專欄、人人都是產品經理社區等基本也會提供。
圖片編輯器雖然部分產品沒提供直接的預覽入口，但一般會在下載或分享時順帶提供預覽。
"預覽、保存和發佈，是在進行一些圖文編輯時會涉及到的基礎功能，身為這些編輯器的設計者，該如何對這些功能進行考量，如何在設計時最大限度對使用者提供便利，筆者結合自己的工作經歷給出瞭解答。
預覽、保存和發佈是在設計編輯器類產品中會遇到的基礎功能點，筆者分別負責過H5編輯器、表單編輯器、Workflow編輯器的產品設計。文本將進一步結合圖片編輯器、文字編輯器的分析，在此將自己的思考進行總結，主要涉及到的是實際功能設計時需要注意的部分點，希望與大家討論學習。
一、預覽
預覽功能一般滿足的是編輯者對編輯內容進行確認的需求，當無法在編輯中實現“所見即所得”的效果時，往往會通過預覽來幫助確認實際效果符合其心理預期，在設計時需要考慮以下要點。
1. 是否需要預覽？
需要思考是否為用戶提供了“所見即所得”的效果，“所見”包含的意義不單指視覺層面的文章排版、圖片樣式，比如對於H5還意味著實際的交互體驗，對於Workflow還意味著實際的工作流程是否有效。如果答案是否定的，則可以考慮提供預覽功能。
目前市面上的H5/視頻編輯器等產品一般都會有預覽功能，比如易企秀、兔展等；創作平臺的文章編輯器，比如知乎專欄、人人都是產品經理社區等基本也會提供。
圖片編輯器雖然部分產品沒提供直接的預覽入口，但一般會在下載或分享時順帶提供預覽。
H5編輯器 – 易企秀
"預覽、保存和發佈，是在進行一些圖文編輯時會涉及到的基礎功能，身為這些編輯器的設計者，該如何對這些功能進行考量，如何在設計時最大限度對使用者提供便利，筆者結合自己的工作經歷給出瞭解答。
預覽、保存和發佈是在設計編輯器類產品中會遇到的基礎功能點，筆者分別負責過H5編輯器、表單編輯器、Workflow編輯器的產品設計。文本將進一步結合圖片編輯器、文字編輯器的分析，在此將自己的思考進行總結，主要涉及到的是實際功能設計時需要注意的部分點，希望與大家討論學習。
一、預覽
預覽功能一般滿足的是編輯者對編輯內容進行確認的需求，當無法在編輯中實現“所見即所得”的效果時，往往會通過預覽來幫助確認實際效果符合其心理預期，在設計時需要考慮以下要點。
1. 是否需要預覽？
需要思考是否為用戶提供了“所見即所得”的效果，“所見”包含的意義不單指視覺層面的文章排版、圖片樣式，比如對於H5還意味著實際的交互體驗，對於Workflow還意味著實際的工作流程是否有效。如果答案是否定的，則可以考慮提供預覽功能。
目前市面上的H5/視頻編輯器等產品一般都會有預覽功能，比如易企秀、兔展等；創作平臺的文章編輯器，比如知乎專欄、人人都是產品經理社區等基本也會提供。
圖片編輯器雖然部分產品沒提供直接的預覽入口，但一般會在下載或分享時順帶提供預覽。
H5編輯器 – 易企秀
文章編輯器 – 人人都是產品經理社區
"預覽、保存和發佈，是在進行一些圖文編輯時會涉及到的基礎功能，身為這些編輯器的設計者，該如何對這些功能進行考量，如何在設計時最大限度對使用者提供便利，筆者結合自己的工作經歷給出瞭解答。
預覽、保存和發佈是在設計編輯器類產品中會遇到的基礎功能點，筆者分別負責過H5編輯器、表單編輯器、Workflow編輯器的產品設計。文本將進一步結合圖片編輯器、文字編輯器的分析，在此將自己的思考進行總結，主要涉及到的是實際功能設計時需要注意的部分點，希望與大家討論學習。
一、預覽
預覽功能一般滿足的是編輯者對編輯內容進行確認的需求，當無法在編輯中實現“所見即所得”的效果時，往往會通過預覽來幫助確認實際效果符合其心理預期，在設計時需要考慮以下要點。
1. 是否需要預覽？
需要思考是否為用戶提供了“所見即所得”的效果，“所見”包含的意義不單指視覺層面的文章排版、圖片樣式，比如對於H5還意味著實際的交互體驗，對於Workflow還意味著實際的工作流程是否有效。如果答案是否定的，則可以考慮提供預覽功能。
目前市面上的H5/視頻編輯器等產品一般都會有預覽功能，比如易企秀、兔展等；創作平臺的文章編輯器，比如知乎專欄、人人都是產品經理社區等基本也會提供。
圖片編輯器雖然部分產品沒提供直接的預覽入口，但一般會在下載或分享時順帶提供預覽。
H5編輯器 – 易企秀
文章編輯器 – 人人都是產品經理社區
圖片編輯器 – 凡科快圖
2. 誰可以預覽？
一般我們談及預覽，都會認為是面向編輯者的，但在設計時還需要除編輯者外其他人還是否也可以預覽，以及其他人預覽的作用和意義是什麼。
一般支持其他人預覽的往往是為了在內容正式使用前，可以讓其他相關者來對內容進行確認，比如知乎專欄支持邀請專欄編輯或好友來查看文章，從而提升專欄文章質量。
"預覽、保存和發佈，是在進行一些圖文編輯時會涉及到的基礎功能，身為這些編輯器的設計者，該如何對這些功能進行考量，如何在設計時最大限度對使用者提供便利，筆者結合自己的工作經歷給出瞭解答。
預覽、保存和發佈是在設計編輯器類產品中會遇到的基礎功能點，筆者分別負責過H5編輯器、表單編輯器、Workflow編輯器的產品設計。文本將進一步結合圖片編輯器、文字編輯器的分析，在此將自己的思考進行總結，主要涉及到的是實際功能設計時需要注意的部分點，希望與大家討論學習。
一、預覽
預覽功能一般滿足的是編輯者對編輯內容進行確認的需求，當無法在編輯中實現“所見即所得”的效果時，往往會通過預覽來幫助確認實際效果符合其心理預期，在設計時需要考慮以下要點。
1. 是否需要預覽？
需要思考是否為用戶提供了“所見即所得”的效果，“所見”包含的意義不單指視覺層面的文章排版、圖片樣式，比如對於H5還意味著實際的交互體驗，對於Workflow還意味著實際的工作流程是否有效。如果答案是否定的，則可以考慮提供預覽功能。
目前市面上的H5/視頻編輯器等產品一般都會有預覽功能，比如易企秀、兔展等；創作平臺的文章編輯器，比如知乎專欄、人人都是產品經理社區等基本也會提供。
圖片編輯器雖然部分產品沒提供直接的預覽入口，但一般會在下載或分享時順帶提供預覽。
H5編輯器 – 易企秀
文章編輯器 – 人人都是產品經理社區
圖片編輯器 – 凡科快圖
2. 誰可以預覽？
一般我們談及預覽，都會認為是面向編輯者的，但在設計時還需要除編輯者外其他人還是否也可以預覽，以及其他人預覽的作用和意義是什麼。
一般支持其他人預覽的往往是為了在內容正式使用前，可以讓其他相關者來對內容進行確認，比如知乎專欄支持邀請專欄編輯或好友來查看文章，從而提升專欄文章質量。
知乎專欄 – 寫文章 – 邀請預覽功能
3. 預覽時是否觸發自動保存？
回答這個問題還是需要回歸到預覽的場景中來，預覽對於編輯者而言是一種確認的作用，進一步思考編輯者在確認是否符合預期後的動作是什麼，往往符合預期的下一步動作是保存，而不符合則會取消剛才的編輯。對於符合預期的場景，自動保存是符合邏輯的，而對於不符合的場景，無論我們是否設計是否自動保存，用戶都需要進行撤回操作。
所以，預覽時最好是要進行自動保存的，但要注意預覽時的自動保存並不意味著編輯者已經確認就要採取此時預覽的方案，如果此時保存代表著確認完成則會出現問題。
以H5編輯器來說明問題：目前凡科和兔展在預覽時都會觸發自動保存，假設編輯者需要對已傳播的作品進行編輯，在編輯中進行預覽並觸發自動保存。由於凡科和兔展都沒有一個是否發佈的狀態，會導致此時保存的內容直接對線上的訪客可見，從而影響實際作品的線上傳播。這種情況下要解決問題，要麼增加發布狀態，要麼取消自動保存的邏輯。
二、保存
1. 離線保存
指在斷網情況下仍可以保存，數據將臨時緩存，等到網絡正常時再同步數據到線上，可以最大程度不影響用戶使用產品，比如processon就提供了離線保存功能。
"預覽、保存和發佈，是在進行一些圖文編輯時會涉及到的基礎功能，身為這些編輯器的設計者，該如何對這些功能進行考量，如何在設計時最大限度對使用者提供便利，筆者結合自己的工作經歷給出瞭解答。
預覽、保存和發佈是在設計編輯器類產品中會遇到的基礎功能點，筆者分別負責過H5編輯器、表單編輯器、Workflow編輯器的產品設計。文本將進一步結合圖片編輯器、文字編輯器的分析，在此將自己的思考進行總結，主要涉及到的是實際功能設計時需要注意的部分點，希望與大家討論學習。
一、預覽
預覽功能一般滿足的是編輯者對編輯內容進行確認的需求，當無法在編輯中實現“所見即所得”的效果時，往往會通過預覽來幫助確認實際效果符合其心理預期，在設計時需要考慮以下要點。
1. 是否需要預覽？
需要思考是否為用戶提供了“所見即所得”的效果，“所見”包含的意義不單指視覺層面的文章排版、圖片樣式，比如對於H5還意味著實際的交互體驗，對於Workflow還意味著實際的工作流程是否有效。如果答案是否定的，則可以考慮提供預覽功能。
目前市面上的H5/視頻編輯器等產品一般都會有預覽功能，比如易企秀、兔展等；創作平臺的文章編輯器，比如知乎專欄、人人都是產品經理社區等基本也會提供。
圖片編輯器雖然部分產品沒提供直接的預覽入口，但一般會在下載或分享時順帶提供預覽。
H5編輯器 – 易企秀
文章編輯器 – 人人都是產品經理社區
圖片編輯器 – 凡科快圖
2. 誰可以預覽？
一般我們談及預覽，都會認為是面向編輯者的，但在設計時還需要除編輯者外其他人還是否也可以預覽，以及其他人預覽的作用和意義是什麼。
一般支持其他人預覽的往往是為了在內容正式使用前，可以讓其他相關者來對內容進行確認，比如知乎專欄支持邀請專欄編輯或好友來查看文章，從而提升專欄文章質量。
知乎專欄 – 寫文章 – 邀請預覽功能
3. 預覽時是否觸發自動保存？
回答這個問題還是需要回歸到預覽的場景中來，預覽對於編輯者而言是一種確認的作用，進一步思考編輯者在確認是否符合預期後的動作是什麼，往往符合預期的下一步動作是保存，而不符合則會取消剛才的編輯。對於符合預期的場景，自動保存是符合邏輯的，而對於不符合的場景，無論我們是否設計是否自動保存，用戶都需要進行撤回操作。
所以，預覽時最好是要進行自動保存的，但要注意預覽時的自動保存並不意味著編輯者已經確認就要採取此時預覽的方案，如果此時保存代表著確認完成則會出現問題。
以H5編輯器來說明問題：目前凡科和兔展在預覽時都會觸發自動保存，假設編輯者需要對已傳播的作品進行編輯，在編輯中進行預覽並觸發自動保存。由於凡科和兔展都沒有一個是否發佈的狀態，會導致此時保存的內容直接對線上的訪客可見，從而影響實際作品的線上傳播。這種情況下要解決問題，要麼增加發布狀態，要麼取消自動保存的邏輯。
二、保存
1. 離線保存
指在斷網情況下仍可以保存，數據將臨時緩存，等到網絡正常時再同步數據到線上，可以最大程度不影響用戶使用產品，比如processon就提供了離線保存功能。
2. 自動保存與手動保存
自動保存存在的意義上是通過定時的自動保存來避免數據意外丟失，可以給編輯者安全感。對於文章編輯器而言，用戶在打字排版過程中是幾乎需要實時地對輸入的內容進行保存，所以自動保存在文章編輯器中是最為常見的，並且當提供了定時自動保存，手動保存的功能其實也是可以不需要了（但為了給用戶確定性，一些產品還是會保留）。
而H5編輯器中用戶本質上不是需要對每個操作都進行保存，而只是在效果達到預期時才會需要保存，所以目前在凡科、MAKA、易企秀和兔展中，就只有兔展提供了自動保存的功能。
所以當考慮是否需要自動保存時，可以考慮你的用戶是會在怎樣的場景下需要保存的，是對輸入的每個字都需要保存，還是隻對編輯內容達到某個預期時才保存。
簡書：自動保存同時也提供手動保存
"預覽、保存和發佈，是在進行一些圖文編輯時會涉及到的基礎功能，身為這些編輯器的設計者，該如何對這些功能進行考量，如何在設計時最大限度對使用者提供便利，筆者結合自己的工作經歷給出瞭解答。
預覽、保存和發佈是在設計編輯器類產品中會遇到的基礎功能點，筆者分別負責過H5編輯器、表單編輯器、Workflow編輯器的產品設計。文本將進一步結合圖片編輯器、文字編輯器的分析，在此將自己的思考進行總結，主要涉及到的是實際功能設計時需要注意的部分點，希望與大家討論學習。
一、預覽
預覽功能一般滿足的是編輯者對編輯內容進行確認的需求，當無法在編輯中實現“所見即所得”的效果時，往往會通過預覽來幫助確認實際效果符合其心理預期，在設計時需要考慮以下要點。
1. 是否需要預覽？
需要思考是否為用戶提供了“所見即所得”的效果，“所見”包含的意義不單指視覺層面的文章排版、圖片樣式，比如對於H5還意味著實際的交互體驗，對於Workflow還意味著實際的工作流程是否有效。如果答案是否定的，則可以考慮提供預覽功能。
目前市面上的H5/視頻編輯器等產品一般都會有預覽功能，比如易企秀、兔展等；創作平臺的文章編輯器，比如知乎專欄、人人都是產品經理社區等基本也會提供。
圖片編輯器雖然部分產品沒提供直接的預覽入口，但一般會在下載或分享時順帶提供預覽。
H5編輯器 – 易企秀
文章編輯器 – 人人都是產品經理社區
圖片編輯器 – 凡科快圖
2. 誰可以預覽？
一般我們談及預覽，都會認為是面向編輯者的，但在設計時還需要除編輯者外其他人還是否也可以預覽，以及其他人預覽的作用和意義是什麼。
一般支持其他人預覽的往往是為了在內容正式使用前，可以讓其他相關者來對內容進行確認，比如知乎專欄支持邀請專欄編輯或好友來查看文章，從而提升專欄文章質量。
知乎專欄 – 寫文章 – 邀請預覽功能
3. 預覽時是否觸發自動保存？
回答這個問題還是需要回歸到預覽的場景中來，預覽對於編輯者而言是一種確認的作用，進一步思考編輯者在確認是否符合預期後的動作是什麼，往往符合預期的下一步動作是保存，而不符合則會取消剛才的編輯。對於符合預期的場景，自動保存是符合邏輯的，而對於不符合的場景，無論我們是否設計是否自動保存，用戶都需要進行撤回操作。
所以，預覽時最好是要進行自動保存的，但要注意預覽時的自動保存並不意味著編輯者已經確認就要採取此時預覽的方案，如果此時保存代表著確認完成則會出現問題。
以H5編輯器來說明問題：目前凡科和兔展在預覽時都會觸發自動保存，假設編輯者需要對已傳播的作品進行編輯，在編輯中進行預覽並觸發自動保存。由於凡科和兔展都沒有一個是否發佈的狀態，會導致此時保存的內容直接對線上的訪客可見，從而影響實際作品的線上傳播。這種情況下要解決問題，要麼增加發布狀態，要麼取消自動保存的邏輯。
二、保存
1. 離線保存
指在斷網情況下仍可以保存，數據將臨時緩存，等到網絡正常時再同步數據到線上，可以最大程度不影響用戶使用產品，比如processon就提供了離線保存功能。
2. 自動保存與手動保存
自動保存存在的意義上是通過定時的自動保存來避免數據意外丟失，可以給編輯者安全感。對於文章編輯器而言，用戶在打字排版過程中是幾乎需要實時地對輸入的內容進行保存，所以自動保存在文章編輯器中是最為常見的，並且當提供了定時自動保存，手動保存的功能其實也是可以不需要了（但為了給用戶確定性，一些產品還是會保留）。
而H5編輯器中用戶本質上不是需要對每個操作都進行保存，而只是在效果達到預期時才會需要保存，所以目前在凡科、MAKA、易企秀和兔展中，就只有兔展提供了自動保存的功能。
所以當考慮是否需要自動保存時，可以考慮你的用戶是會在怎樣的場景下需要保存的，是對輸入的每個字都需要保存，還是隻對編輯內容達到某個預期時才保存。
簡書：自動保存同時也提供手動保存
知乎：自動保存且未提供手動保存
三、發佈
1. 是否需要發佈功能？
當內容無需區分是否可見、是否有效、無需提交審核（往往發佈是觸發審核的一個動作）時，或者雖需區分是否可見和有效，但是往往簡單編輯即可完成時，可以考慮不提供發佈操作。比如圖片編輯器，即不會和創作平臺的文章編輯器一樣需要區分文章是否編輯完成並可見，也不會和workflow 編輯器一樣需要區分流程是否可以正式執行，所以一般不會提供發佈操作。
"預覽、保存和發佈，是在進行一些圖文編輯時會涉及到的基礎功能，身為這些編輯器的設計者，該如何對這些功能進行考量，如何在設計時最大限度對使用者提供便利，筆者結合自己的工作經歷給出瞭解答。
預覽、保存和發佈是在設計編輯器類產品中會遇到的基礎功能點，筆者分別負責過H5編輯器、表單編輯器、Workflow編輯器的產品設計。文本將進一步結合圖片編輯器、文字編輯器的分析，在此將自己的思考進行總結，主要涉及到的是實際功能設計時需要注意的部分點，希望與大家討論學習。
一、預覽
預覽功能一般滿足的是編輯者對編輯內容進行確認的需求，當無法在編輯中實現“所見即所得”的效果時，往往會通過預覽來幫助確認實際效果符合其心理預期，在設計時需要考慮以下要點。
1. 是否需要預覽？
需要思考是否為用戶提供了“所見即所得”的效果，“所見”包含的意義不單指視覺層面的文章排版、圖片樣式，比如對於H5還意味著實際的交互體驗，對於Workflow還意味著實際的工作流程是否有效。如果答案是否定的，則可以考慮提供預覽功能。
目前市面上的H5/視頻編輯器等產品一般都會有預覽功能，比如易企秀、兔展等；創作平臺的文章編輯器，比如知乎專欄、人人都是產品經理社區等基本也會提供。
圖片編輯器雖然部分產品沒提供直接的預覽入口，但一般會在下載或分享時順帶提供預覽。
H5編輯器 – 易企秀
文章編輯器 – 人人都是產品經理社區
圖片編輯器 – 凡科快圖
2. 誰可以預覽？
一般我們談及預覽，都會認為是面向編輯者的，但在設計時還需要除編輯者外其他人還是否也可以預覽，以及其他人預覽的作用和意義是什麼。
一般支持其他人預覽的往往是為了在內容正式使用前，可以讓其他相關者來對內容進行確認，比如知乎專欄支持邀請專欄編輯或好友來查看文章，從而提升專欄文章質量。
知乎專欄 – 寫文章 – 邀請預覽功能
3. 預覽時是否觸發自動保存？
回答這個問題還是需要回歸到預覽的場景中來，預覽對於編輯者而言是一種確認的作用，進一步思考編輯者在確認是否符合預期後的動作是什麼，往往符合預期的下一步動作是保存，而不符合則會取消剛才的編輯。對於符合預期的場景，自動保存是符合邏輯的，而對於不符合的場景，無論我們是否設計是否自動保存，用戶都需要進行撤回操作。
所以，預覽時最好是要進行自動保存的，但要注意預覽時的自動保存並不意味著編輯者已經確認就要採取此時預覽的方案，如果此時保存代表著確認完成則會出現問題。
以H5編輯器來說明問題：目前凡科和兔展在預覽時都會觸發自動保存，假設編輯者需要對已傳播的作品進行編輯，在編輯中進行預覽並觸發自動保存。由於凡科和兔展都沒有一個是否發佈的狀態，會導致此時保存的內容直接對線上的訪客可見，從而影響實際作品的線上傳播。這種情況下要解決問題，要麼增加發布狀態，要麼取消自動保存的邏輯。
二、保存
1. 離線保存
指在斷網情況下仍可以保存，數據將臨時緩存，等到網絡正常時再同步數據到線上，可以最大程度不影響用戶使用產品，比如processon就提供了離線保存功能。
2. 自動保存與手動保存
自動保存存在的意義上是通過定時的自動保存來避免數據意外丟失，可以給編輯者安全感。對於文章編輯器而言，用戶在打字排版過程中是幾乎需要實時地對輸入的內容進行保存，所以自動保存在文章編輯器中是最為常見的，並且當提供了定時自動保存，手動保存的功能其實也是可以不需要了（但為了給用戶確定性，一些產品還是會保留）。
而H5編輯器中用戶本質上不是需要對每個操作都進行保存，而只是在效果達到預期時才會需要保存，所以目前在凡科、MAKA、易企秀和兔展中，就只有兔展提供了自動保存的功能。
所以當考慮是否需要自動保存時，可以考慮你的用戶是會在怎樣的場景下需要保存的，是對輸入的每個字都需要保存，還是隻對編輯內容達到某個預期時才保存。
簡書：自動保存同時也提供手動保存
知乎：自動保存且未提供手動保存
三、發佈
1. 是否需要發佈功能？
當內容無需區分是否可見、是否有效、無需提交審核（往往發佈是觸發審核的一個動作）時，或者雖需區分是否可見和有效，但是往往簡單編輯即可完成時，可以考慮不提供發佈操作。比如圖片編輯器，即不會和創作平臺的文章編輯器一樣需要區分文章是否編輯完成並可見，也不會和workflow 編輯器一樣需要區分流程是否可以正式執行，所以一般不會提供發佈操作。
易企秀圖片編輯器：沒有發佈操作
對於H5編輯器而言，在首次編輯場景下其實也是無需區分是否可見，因為取決於用戶是否是主動傳播的。但在傳播後二次編輯的場景下，是需要區分修改是否可見的，可以跟易企秀一樣提供發佈功能，不然就會出現前文在講預覽時H5編輯器遇到的問題。
"預覽、保存和發佈，是在進行一些圖文編輯時會涉及到的基礎功能，身為這些編輯器的設計者，該如何對這些功能進行考量，如何在設計時最大限度對使用者提供便利，筆者結合自己的工作經歷給出瞭解答。
預覽、保存和發佈是在設計編輯器類產品中會遇到的基礎功能點，筆者分別負責過H5編輯器、表單編輯器、Workflow編輯器的產品設計。文本將進一步結合圖片編輯器、文字編輯器的分析，在此將自己的思考進行總結，主要涉及到的是實際功能設計時需要注意的部分點，希望與大家討論學習。
一、預覽
預覽功能一般滿足的是編輯者對編輯內容進行確認的需求，當無法在編輯中實現“所見即所得”的效果時，往往會通過預覽來幫助確認實際效果符合其心理預期，在設計時需要考慮以下要點。
1. 是否需要預覽？
需要思考是否為用戶提供了“所見即所得”的效果，“所見”包含的意義不單指視覺層面的文章排版、圖片樣式，比如對於H5還意味著實際的交互體驗，對於Workflow還意味著實際的工作流程是否有效。如果答案是否定的，則可以考慮提供預覽功能。
目前市面上的H5/視頻編輯器等產品一般都會有預覽功能，比如易企秀、兔展等；創作平臺的文章編輯器，比如知乎專欄、人人都是產品經理社區等基本也會提供。
圖片編輯器雖然部分產品沒提供直接的預覽入口，但一般會在下載或分享時順帶提供預覽。
H5編輯器 – 易企秀
文章編輯器 – 人人都是產品經理社區
圖片編輯器 – 凡科快圖
2. 誰可以預覽？
一般我們談及預覽，都會認為是面向編輯者的，但在設計時還需要除編輯者外其他人還是否也可以預覽，以及其他人預覽的作用和意義是什麼。
一般支持其他人預覽的往往是為了在內容正式使用前，可以讓其他相關者來對內容進行確認，比如知乎專欄支持邀請專欄編輯或好友來查看文章，從而提升專欄文章質量。
知乎專欄 – 寫文章 – 邀請預覽功能
3. 預覽時是否觸發自動保存？
回答這個問題還是需要回歸到預覽的場景中來，預覽對於編輯者而言是一種確認的作用，進一步思考編輯者在確認是否符合預期後的動作是什麼，往往符合預期的下一步動作是保存，而不符合則會取消剛才的編輯。對於符合預期的場景，自動保存是符合邏輯的，而對於不符合的場景，無論我們是否設計是否自動保存，用戶都需要進行撤回操作。
所以，預覽時最好是要進行自動保存的，但要注意預覽時的自動保存並不意味著編輯者已經確認就要採取此時預覽的方案，如果此時保存代表著確認完成則會出現問題。
以H5編輯器來說明問題：目前凡科和兔展在預覽時都會觸發自動保存，假設編輯者需要對已傳播的作品進行編輯，在編輯中進行預覽並觸發自動保存。由於凡科和兔展都沒有一個是否發佈的狀態，會導致此時保存的內容直接對線上的訪客可見，從而影響實際作品的線上傳播。這種情況下要解決問題，要麼增加發布狀態，要麼取消自動保存的邏輯。
二、保存
1. 離線保存
指在斷網情況下仍可以保存，數據將臨時緩存，等到網絡正常時再同步數據到線上，可以最大程度不影響用戶使用產品，比如processon就提供了離線保存功能。
2. 自動保存與手動保存
自動保存存在的意義上是通過定時的自動保存來避免數據意外丟失，可以給編輯者安全感。對於文章編輯器而言，用戶在打字排版過程中是幾乎需要實時地對輸入的內容進行保存，所以自動保存在文章編輯器中是最為常見的，並且當提供了定時自動保存，手動保存的功能其實也是可以不需要了（但為了給用戶確定性，一些產品還是會保留）。
而H5編輯器中用戶本質上不是需要對每個操作都進行保存，而只是在效果達到預期時才會需要保存，所以目前在凡科、MAKA、易企秀和兔展中，就只有兔展提供了自動保存的功能。
所以當考慮是否需要自動保存時，可以考慮你的用戶是會在怎樣的場景下需要保存的，是對輸入的每個字都需要保存，還是隻對編輯內容達到某個預期時才保存。
簡書：自動保存同時也提供手動保存
知乎：自動保存且未提供手動保存
三、發佈
1. 是否需要發佈功能？
當內容無需區分是否可見、是否有效、無需提交審核（往往發佈是觸發審核的一個動作）時，或者雖需區分是否可見和有效，但是往往簡單編輯即可完成時，可以考慮不提供發佈操作。比如圖片編輯器，即不會和創作平臺的文章編輯器一樣需要區分文章是否編輯完成並可見，也不會和workflow 編輯器一樣需要區分流程是否可以正式執行，所以一般不會提供發佈操作。
易企秀圖片編輯器：沒有發佈操作
對於H5編輯器而言，在首次編輯場景下其實也是無需區分是否可見，因為取決於用戶是否是主動傳播的。但在傳播後二次編輯的場景下，是需要區分修改是否可見的，可以跟易企秀一樣提供發佈功能，不然就會出現前文在講預覽時H5編輯器遇到的問題。
易企秀H5編輯器：提供發佈功能
2. 二次發佈
當內容發佈後，可能存在的場景就是已經發布的內容進行調整，需結合調整的場景來設計二次發佈的邏輯。
如果二次調整不是一個耗時長且可能需多次間斷編輯的操作，這個時候可以會將保存和發佈合併為“保存併發布”；如果二次調整可能也是一個耗時長的操作，這個時候可以繼續提供獨立的保存和發佈功能，需再次發佈後才會把內容更新到線上。
四、總結
最後對預覽、保存、發佈功能的設計時的考慮點進行總結（太常規的比如發佈狀態定義就不涉及了）。
- 預覽：側重考慮編輯是否可以實現“所見即所得”，如已提供發佈功能，則預覽時自動保存即可；
- 保存：自動保存在文章編輯器中建議做，在非文章編輯器中必要性較低，可結合資源和優先級考慮；
- 發佈：發佈用於區分是否真正完成，以決定是否可見或有效，如果是H5編輯器、創作平臺文章編輯器、workflow 編輯器建議做，表單編輯器可做可不做（用戶側編輯完成一個表單的操作會比較簡單），圖片編輯器一般無需考慮做。
本文由 @Sen 原創發佈於人人都是產品經理。未經許可，禁止轉載。
題圖來自unsplash，基於CC0協議
"