在產(chǎn)品設(shè)計(jì)中，頁面無非就兩種狀態(tài)，編輯態(tài)和瀏覽態(tài)。大多數(shù)產(chǎn)品以瀏覽態(tài)為主，有些產(chǎn)品兩種狀態(tài)并存。那么，我們?cè)撊绾巫龊镁庉嫅B(tài)和瀏覽態(tài)的設(shè)計(jì)呢？又該如何做好這兩種狀態(tài)的轉(zhuǎn)換呢？

產(chǎn)品設(shè)計(jì)中，頁面無非就兩種狀態(tài)：編輯態(tài)和瀏覽態(tài)。

設(shè)計(jì)系統(tǒng)中，組件無非也就兩種組件：輸入類和展示類。

大多數(shù)產(chǎn)品以瀏覽態(tài)為主，如新聞、視頻、電商等；有些產(chǎn)品則編輯態(tài)和瀏覽態(tài)并重，如筆記、P圖、社交等；少數(shù)產(chǎn)品則以編輯態(tài)為主，如信息采集、信息錄入、信息轉(zhuǎn)換等。

那么在產(chǎn)品設(shè)計(jì)中，我們?cè)撊绾巫龊镁庉嫅B(tài)和瀏覽態(tài)的設(shè)計(jì)呢？又該如何做好這兩種狀態(tài)的轉(zhuǎn)換呢？

01

在討論這個(gè)問題之前，我們需要先討論清楚另外一個(gè)問題：對(duì)于輸入類的組件，它在瀏覽態(tài)下該如何處理？

有人說，這還不簡(jiǎn)單，置灰即可！相信你也一定見到過這樣的處理，比如下面這樣，這是某頁面對(duì)于單選按鈕這個(gè)輸入組件在瀏覽態(tài)下的處理：

上面這種處理方式其實(shí)挺常見的，把組件置灰，使它變得不可編輯，但還保留了組件的樣式。

有人會(huì)覺得這樣處理非常好，好的地方在于它還能讓用戶看到其他選項(xiàng)，而且實(shí)現(xiàn)成本非常低。

那么這樣處理有什么問題嗎？我想它的問題恰恰也在于還能讓用戶看到其他選項(xiàng)。一般情況下，用戶在瀏覽態(tài)下只關(guān)注最終結(jié)果，這時(shí)其實(shí)最好不要再用其他選項(xiàng)來干擾用戶對(duì)于結(jié)果的關(guān)注。

那么對(duì)于CheckBox復(fù)選框、Select選擇器、Form表單、Cascader 級(jí)聯(lián)選擇、Switch開關(guān)等組件呢？

也是一樣的道理。其實(shí)對(duì)于這些輸入類的組件，一般情況下在瀏覽態(tài)下都要轉(zhuǎn)換成對(duì)應(yīng)的結(jié)果類樣式，常常是結(jié)果的文本呈現(xiàn)。像上圖中的單選按鈕，在瀏覽態(tài)下應(yīng)該轉(zhuǎn)換成“點(diǎn)擊推送后：?jiǎn)拘褢?yīng)用”。

除了上面說的置灰處理和轉(zhuǎn)換成瀏覽態(tài)這兩種處理以外，還有一種處理是編輯即瀏覽，如下圖所示。點(diǎn)擊提交以后并不會(huì)轉(zhuǎn)變成我們常見的瀏覽態(tài)，還是當(dāng)前這種編輯狀態(tài)。

這種處理，可能是認(rèn)為用戶來到這個(gè)地方的目的就是編輯修改吧，所以默認(rèn)給的是編輯態(tài)而不是瀏覽態(tài)。

筆者個(gè)人認(rèn)為這種處理不是一個(gè)好的選擇，一是提交后和提交前無變化，讓用戶疑惑有沒有提交成功，同時(shí)編輯操作后有無進(jìn)行提交操作看不出來，可能會(huì)導(dǎo)致用戶忘記進(jìn)行提交操作；二是用戶來到此頁面并非一定是要編輯修改，對(duì)于僅瀏覽的用戶默認(rèn)進(jìn)入編輯態(tài)有一種不安全感，容易誤觸修改了信息。

討論完輸入組件的瀏覽態(tài)處理，我們?cè)倩氐阶畛?，看一看頁面的編輯態(tài)和瀏覽態(tài)及其轉(zhuǎn)換。

對(duì)于一個(gè)用戶可以修改的頁面，最傳統(tǒng)、最可靠的方式是：瀏覽態(tài)+編輯態(tài)。在瀏覽態(tài)的頁面上點(diǎn)擊“修改”按鈕，進(jìn)入編輯狀態(tài)。在編輯態(tài)修改好之后點(diǎn)擊“保存”，回到瀏覽態(tài)。

這種處理讓用戶很清晰明白地知曉當(dāng)前處于什么狀態(tài)之下，也使用戶對(duì)于提交了什么數(shù)據(jù)、提交有沒有成功、數(shù)據(jù)的最終狀態(tài)是什么有很強(qiáng)的控制感。

這種處理方式的問題在于：即便僅僅是要修改其中的一兩項(xiàng)內(nèi)容，也需要點(diǎn)“修改”按鈕，進(jìn)入編輯態(tài)，再重新定位到要修改的地方，完成修改、點(diǎn)擊保存。內(nèi)容很多的時(shí)候，在編輯態(tài)頁面中再找一遍，找到剛才要修改的那些項(xiàng)，還是有點(diǎn)費(fèi)勁的。它的缺陷核心體現(xiàn)在：看到了卻不能直接改。所以，這種處理方式在某些情況下顯得比較笨重、不夠輕盈。

blog是這種處理方式的一個(gè)具體應(yīng)用。編輯是一個(gè)界面，實(shí)際瀏覽的時(shí)候是另外一個(gè)界面，兩個(gè)界面的差別還不小。這種處理方式適用于對(duì)“顯示”要求比較高的頁面，即對(duì)瀏覽態(tài)的排版和效果要求比較高。

在這種傳統(tǒng)的、比較重的處理方式之外，所見即所得是另一種選擇。這種處理方式不再用一個(gè)統(tǒng)一的“編輯”按鈕來完成整個(gè)頁面所有組件的瀏覽態(tài)和編輯態(tài)切換，而是把頁面中每個(gè)組件的編輯態(tài)和瀏覽態(tài)處理好。

這種處理方式，是頁面在瀏覽態(tài)下為每個(gè)輸入類組件設(shè)計(jì)了進(jìn)入編輯態(tài)的方式，可采取更隱形的Hover方式或者明顯一點(diǎn)的外顯方式。在每個(gè)輸入類組件編輯完成后即可回到瀏覽態(tài)。

這種處理方式，應(yīng)盡量避免或者減小在瀏覽態(tài)下對(duì)用戶閱讀體驗(yàn)的影響。這種處理方式將進(jìn)入編輯態(tài)的觸發(fā)方式變得更輕盈，同時(shí)每個(gè)組件進(jìn)入自己的編輯態(tài)也解決了在編輯態(tài)中查找修改項(xiàng)的問題，看到了可以直接改。

上述兩種處理方式，需要在明確閱讀體驗(yàn)與編輯需求的優(yōu)先級(jí)之后進(jìn)行選擇?！盀g覽態(tài)”與“編輯態(tài)”并不是一對(duì)相互對(duì)立的狀態(tài)。相反，這兩種狀態(tài)是可以共存的，而通過需求優(yōu)先級(jí)的排序，可以幫助我們確定觸發(fā)操作的交互比重，從而保證當(dāng)前用戶閱讀需求與編輯需求的平衡。

02

討論完了編輯態(tài)和瀏覽態(tài)及其切換的大方案，我們?cè)賮砜戳硗庖粋€(gè)小一點(diǎn)兒的問題：編輯態(tài)的交互方式。

一、頁面內(nèi)方式。編輯態(tài)呈現(xiàn)在當(dāng)前頁面，僅是組件由瀏覽態(tài)切換為編輯態(tài)，編輯完成后回到瀏覽態(tài)。

這種方式體驗(yàn)比較流暢，比較輕盈。但頁面內(nèi)方式，為了保持統(tǒng)一性，只能支持文本編輯等簡(jiǎn)單內(nèi)容的編輯模式。

二、彈窗方式。將編輯態(tài)與當(dāng)前頁面脫離，呈現(xiàn)在新的彈窗里，在彈窗完成操作后點(diǎn)擊確定回到之前的頁面。頁面永遠(yuǎn)呈現(xiàn)的是瀏覽態(tài)。

彈窗方式，由于其空間的延展性以及內(nèi)容的相對(duì)獨(dú)立性，可以支持一些較復(fù)雜內(nèi)容的編輯模式，如：附件上傳、圖片上傳等。

三、新頁面方式。點(diǎn)擊某個(gè)編輯入口后進(jìn)入一個(gè)全新的頁面，在這個(gè)新的頁面內(nèi)完成編輯操作后回到之前的頁面。原頁面永遠(yuǎn)呈現(xiàn)的是瀏覽態(tài)。

新頁面方式，對(duì)操作的流暢性存在一個(gè)大的跳轉(zhuǎn)，切斷了用戶與之前頁面的聯(lián)系，強(qiáng)行打斷了用戶當(dāng)前頁面的閱讀進(jìn)度。但它有更充足的空間，適用于大量數(shù)據(jù)的編輯或者交互邏輯比較復(fù)雜的情景。

03

最后，我們小結(jié)一下：

1、輸入組件的瀏覽態(tài)處理有3種方式：置灰、轉(zhuǎn)換成結(jié)果文本類的瀏覽態(tài)、編輯即瀏覽。

2、編輯態(tài)和瀏覽態(tài)及其轉(zhuǎn)換有2種處理：瀏覽態(tài)+編輯態(tài)嚴(yán)格區(qū)分并通過一個(gè)統(tǒng)一的按鈕進(jìn)行轉(zhuǎn)換的最傳統(tǒng)最可靠的方式、所見即所得。

3、編輯態(tài)的交互方式有3種：頁面內(nèi)方式、彈窗方式、新頁面方式。

選用時(shí)要看編輯態(tài)和瀏覽態(tài)的需求優(yōu)先級(jí)，也要看內(nèi)容的簡(jiǎn)單與復(fù)雜性，還要看用戶對(duì)于該頁面場(chǎng)景下的認(rèn)知與理解。

為我投票

我在參加人人都是產(chǎn)品經(jīng)理2022年度作者評(píng)選，希望喜歡我的文章的朋友都能來支持我一下~

點(diǎn)擊下方鏈接進(jìn)入我的個(gè)人參選頁面，點(diǎn)擊紅心即可為我投票。

每人每天最多可投35票，投票即可獲得抽獎(jiǎng)機(jī)會(huì)，抽取書籍、人人都是產(chǎn)品經(jīng)理紀(jì)念周邊和起點(diǎn)課堂會(huì)員等好禮哦！

投票傳送門：https://996.pm/7pgKk