對于一個用戶可以修改的頁面，最傳統(tǒng)、最可靠的方式：瀏覽態(tài)+編輯態(tài)

在瀏覽態(tài)的頁面上點擊“修改”按鈕，進入編輯狀態(tài)。

這樣可以用瀏覽態(tài)很清晰的告訴用戶當(dāng)前保存的表單內(nèi)容是什么樣的。在編輯態(tài)修改好之后，保存，回到瀏覽態(tài)。

這種方式有自己的問題：如果原本只是要修改某一項內(nèi)容，也需要點“修改”按鈕，進入編輯態(tài)，再重新找到那項，修改。內(nèi)容很多的時候，在編輯態(tài)頁面中再找一遍，找到剛才看好要修改的那項，還是挺吃力的。

在實際的應(yīng)用中經(jīng)常會只有編輯態(tài)。

很多個人資料頁、設(shè)置頁通常都只有編輯態(tài)。只有編輯態(tài)的好處是所見即可修改。看到了某項內(nèi)容，想修改，直接就可以改。輸入框、單選、復(fù)選…這些表單元件都可以既展示又修改。

只有編輯態(tài)的方式也存在一些問題：“當(dāng)前頁面中有沒有修改？”“是否需要保存？”“我忘記了剛才的修改有沒有保存過，再按一次保存？”“確實保存了嗎？咋和沒點保存按鈕之前完全一樣？”

“瀏覽態(tài)+編輯態(tài)”的設(shè)計模式是原始的，是技術(shù)局限下的產(chǎn)物。

“所見即所得”是被廣泛應(yīng)用的一個設(shè)計原則，設(shè)計師們不管用得上用不上，只要能靠上點兒邊兒都愿意往這個原則上靠。

前面描述的那種只有編輯態(tài)的方式不是“所見即所得”好的范例。我們來看看 MS word：

當(dāng)前看到的樣子就是這份文檔實際的樣子，隨時可以編輯。

寫一篇blog的時候是怎樣的？發(fā)表、編輯是一個界面，實際瀏覽的時候是另外一個界面，兩個界面的差別還是不小的。是的，blog是“瀏覽態(tài)+編輯態(tài)”的設(shè)計模式。

顯然word更好。blog的展示有很高的要求，排版布局、圖片位置、字體樣式、行距…如果能做到像word一樣，估計頁面就打不開了。

有沒有更好的方案？

并不是所有的允許用戶修改內(nèi)容的頁面對顯示都有那么高的要求，前面提到的那些設(shè)置頁面、個人資料之類的頁面用戶更改的只是內(nèi)容，那么，這類產(chǎn)品的設(shè)計有沒有可能突破只是編輯態(tài)的困惑，又避免瀏覽態(tài)+編輯態(tài)帶來的麻煩呢？

“編輯態(tài)+瀏覽態(tài)”的缺陷是：看到了不能直接改。

“只有編輯態(tài)”的缺陷是：當(dāng)前是否做了修改，說明的不夠清楚。

我們來嘗試沒有瀏覽態(tài)的優(yōu)化方案：

這個方案是在編輯態(tài)的基礎(chǔ)上添加一個狀態(tài)說明，始終提示是否有修改。避免了原先只有編輯態(tài)的狀態(tài)不清問題。因為是在編輯態(tài)的基礎(chǔ)的優(yōu)化，所以顯然“瀏覽態(tài)+編輯態(tài)”模式的缺陷也不存在。

對排版要求不那么高的google notebook、google doc的設(shè)計實際上就是這個方案。只是在這個方案的基礎(chǔ)上再加入了自動保存的功能。

我們順著這個方案再往下想：

如果頁面中的那些輸入框、下拉選擇框…在未操作的時候使用一種樣式能顯示的不那么搶眼，而在用戶觸發(fā)操作時使用系統(tǒng)的標(biāo)準(zhǔn)樣式，這樣，頁面平時看上去就很接近瀏覽態(tài)了。那么，無修改的時候也可以不再提示…

沒有修改，只是瀏覽時，不需要再特意的提示“內(nèi)容無修改，不需保存。”而是用近似于瀏覽態(tài)的樣式給用戶暗示可修改。雖然看上去像是瀏覽態(tài)，但用戶卻可以隨時修改…

當(dāng)用戶修改了其中的內(nèi)容時：

嗯，就是這么個方案。實際上這個方案是將編輯態(tài)隱藏了起來，用戶觸發(fā)編輯操作時自動切換到編輯態(tài)。

“只有編輯態(tài)”是不夠清晰的，“編輯態(tài)+瀏覽態(tài)”也不是萬能藥。

減少頁面，減少認知成本；隨時可編輯；足夠的狀態(tài)提示，基于目前的技術(shù)，這些是優(yōu)化的目標(biāo)，還有其他更好的方案嗎？

文章來源：臭魚的交互設(shè)計 轉(zhuǎn)載請注明出處鏈接。

標(biāo)簽： 交互設(shè)計 瀏覽態(tài) 編輯態(tài) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。