怎樣在希望中編輯文字
在產品設計中，頁面無非就兩種狀態，編輯態和瀏覽態。大多數產品以瀏覽態為主，有些產品兩種狀態並存。那麼，我們該如何做好編輯態和瀏覽態的設計呢？又該如何做好這兩種狀態的轉換呢？
設計系統中，元件無非也就兩種元件：輸入類和展示類。
大多數產品以瀏覽態為主，如新聞、影片、電商等；有些產品則編輯態和瀏覽態並重，如筆記、P圖、社交等；少數產品則以編輯態為主，如資訊採集、資訊錄入、資訊轉換等。
那麼在產品設計中，我們該如何做好編輯態和瀏覽態的設計呢？又該如何做好這兩種狀態的轉換呢？
01
在討論這個問題之前，我們需要先討論清楚另外一個問題：對於輸入類的元件，它在瀏覽態下該如何處理？
有人說，這還不簡單，置灰即可！相信你也一定見到過這樣的處理，比如下面這樣，這是某頁面對於單選按鈕這個輸入元件在瀏覽態下的處理：
上面這種處理方式其實挺常見的，把元件置灰，使它變得不可編輯，但還保留了元件的樣式。
有人會覺得這樣處理非常好，好的地方在於它還能讓使用者看到其他選項，而且實現成本非常低。
那麼這樣處理有什麼問題嗎？我想它的問題恰恰也在於還能讓使用者看到其他選項。一般情況下，使用者在瀏覽態下只關注最終結果，這時其實最好不要再用其他選項來干擾使用者對於結果的關注。
那麼對於CheckBox複選框、Select選擇器、Form表單、Cascader 級聯選擇、Switch開關等元件呢？
也是一樣的道理。其實對於這些輸入類的元件，一般情況下在瀏覽態下都要轉換成對應的結果類樣式，常常是結果的文字呈現。像上圖中的單選按鈕，在瀏覽態下應該轉換成“點選推送後：喚醒應用”。
除了上面說的置灰處理和轉換成瀏覽態這兩種處理以外，還有一種處理是編輯即瀏覽，如下圖所示。點選提交以後並不會轉變成我們常見的瀏覽態，還是當前這種編輯狀態。
這種處理，可能是認為使用者來到這個地方的目的就是編輯修改吧，所以預設給的是編輯態而不是瀏覽態。
筆者個人認為這種處理不是一個好的選擇，一是提交後和提交前無變化，讓使用者疑惑有沒有提交成功，同時編輯操作後有無進行提交操作看不出來，可能會導致使用者忘記進行提交操作；二是使用者來到此頁面並非一定是要編輯修改，對於僅瀏覽的使用者預設進入編輯態有一種不安全感，容易誤觸修改了資訊。
討論完輸入元件的瀏覽態處理，我們再回到最初，看一看頁面的編輯態和瀏覽態及其轉換。
對於一個使用者可以修改的頁面，最傳統、最可靠的方式是：瀏覽態+編輯態。在瀏覽態的頁面上點選“修改”按鈕，進入編輯狀態。在編輯態修改好之後點選“儲存”，回到瀏覽態。
這種處理讓使用者很清晰明白地知曉當前處於什麼狀態之下，也使使用者對於提交了什麼資料、提交有沒有成功、資料的最終狀態是什麼有很強的控制感。
這種處理方式的問題在於：即便僅僅是要修改其中的一兩項內容，也需要點“修改”按鈕，進入編輯態，再重新定位到要修改的地方，完成修改、點選儲存。內容很多的時候，在編輯態頁面中再找一遍，找到剛才要修改的那些項，還是有點費勁的。它的缺陷核心體現在：看到了卻不能直接改。所以，這種處理方式在某些情況下顯得比較笨重、不夠輕盈。
blog是這種處理方式的一個具體應用。編輯是一個介面，實際瀏覽的時候是另外一個介面，兩個介面的差別還不小。這種處理方式適用於對“顯示”要求比較高的頁面，即對瀏覽態的排版和效果要求比較高。
在這種傳統的、比較重的處理方式之外，所見即所得是另一種選擇。這種處理方式不再用一個統一的“編輯”按鈕來完成整個頁面所有元件的瀏覽態和編輯態切換，而是把頁面中每個元件的編輯態和瀏覽態處理好。
這種處理方式，是頁面在瀏覽態下為每個輸入類元件設計了進入編輯態的方式，可採取更隱形的Hover方式或者明顯一點的外顯方式。在每個輸入類元件編輯完成後即可回到瀏覽態。
這種處理方式，應儘量避免或者減小在瀏覽態下對使用者閱讀體驗的影響。這種處理方式將進入編輯態的觸發方式變得更輕盈，同時每個元件進入自己的編輯態也解決了在編輯態中查詢修改項的問題，看到了可以直接改。
上述兩種處理方式，需要在明確閱讀體驗與編輯需求的優先順序之後進行選擇。“瀏覽態”與“編輯態”並不是一對相互對立的狀態。相反，這兩種狀態是可以共存的，而透過需求優先順序的排序，可以幫助我們確定觸發操作的互動比重，從而保證當前使用者閱讀需求與編輯需求的平衡。
02
討論完了編輯態和瀏覽態及其切換的大方案，我們再來看另外一個小一點兒的問題：編輯態的互動方式。
一、頁面內方式。編輯態呈現在當前頁面，僅是元件由瀏覽態切換為編輯態，編輯完成後回到瀏覽態。
這種方式體驗比較流暢，比較輕盈。但頁面內方式，為了保持統一性，只能支援文字編輯等簡單內容的編輯模式。
二、彈窗方式。將編輯態與當前頁面脫離，呈現在新的彈窗裡，在彈窗完成操作後點擊確定回到之前的頁面。頁面永遠呈現的是瀏覽態。
彈窗方式，由於其空間的延展性以及內容的相對獨立性，可以支援一些較複雜內容的編輯模式，如：附件上傳、圖片上傳等。
三、新頁面方式。點選某個編輯入口後進入一個全新的頁面，在這個新的頁面內完成編輯操作後回到之前的頁面。原頁面永遠呈現的是瀏覽態。
新頁面方式，對操作的流暢性存在一個大的跳轉，切斷了使用者與之前頁面的聯絡，強行打斷了使用者當前頁面的閱讀進度。但它有更充足的空間，適用於大量資料的編輯或者互動邏輯比較複雜的情景。
03
最後，我們小結一下：
1、輸入元件的瀏覽態處理有3種方式：置灰、轉換成結果文字類的瀏覽態、編輯即瀏覽。
2、編輯態和瀏覽態及其轉換有2種處理：瀏覽態+編輯態嚴格區分並透過一個統一的按鈕進行轉換的最傳統最可靠的方式、所見即所得。
3、編輯態的互動方式有3種：頁面內方式、彈窗方式、新頁面方式。
選用時要看編輯態和瀏覽態的需求優先順序，也要看內容的簡單與複雜性，還要看使用者對於該頁面場景下的認知與理解。
為我投票
我在參加人人都是產品經理2022年度作者評選，希望喜歡我的文章的朋友都能來支援我一下~
點選下方連結進入我的個人參選頁面，點選紅心即可為我投票。
每人每天最多可投35票，投票即可獲得抽獎機會，抽取書籍、人人都是產品經理紀念週邊和起點課堂會員等好禮哦！
專欄作家
厚厚，微信公眾號：厚厚的語和文，人人都是產品經理專欄作家。多年網際網路和傳統企業的跨界產品經理。
本文原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash，基於 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供資訊儲存空間服務。