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