對(duì)于一個(gè)用戶可以修改的頁(yè)面, 最傳統(tǒng)、最可靠的方式:瀏覽態(tài)+編輯態(tài)
在瀏覽態(tài)的頁(yè)面上點(diǎn)擊“修改”按鈕,進(jìn)入編輯狀態(tài)。 這樣可以用瀏覽態(tài)很清晰的告訴用戶當(dāng)前保存的表單內(nèi)容是什么樣的。在編輯態(tài)修改好之后,保存,回到瀏覽態(tài)。
這種方式有自己的問(wèn)題:如果原本只是要修改某一項(xiàng)內(nèi)容,也需要點(diǎn)“修改”按鈕,進(jìn)入編輯態(tài),再重新找到那項(xiàng),修改。內(nèi)容很多的時(shí)候,在編輯態(tài)頁(yè)面中再找一遍,找到剛才看好要修改的那項(xiàng),還是挺吃力的。
在實(shí)際的應(yīng)用中經(jīng)常會(huì)只有編輯態(tài)。
很多個(gè)人資料頁(yè)、設(shè)置頁(yè)通常都只有編輯態(tài)。只有編輯態(tài)的好處是所見(jiàn)即可修改。看到了某項(xiàng)內(nèi)容,想修改,直接就可以改。輸入框、單選、復(fù)選…這些表單元件都可以既展示又修改。
只有編輯態(tài)的方式也存在一些問(wèn)題:“當(dāng)前頁(yè)面中有沒(méi)有修改?”“是否需要保存?”“我忘記了剛才的修改有沒(méi)有保存過(guò),再按一次保存?”“確實(shí)保存了嗎?咋和沒(méi)點(diǎn)保存按鈕之前完全一樣?”
“瀏覽態(tài)+編輯態(tài)”的設(shè)計(jì)模式是原始的,是技術(shù)局限下的產(chǎn)物。 “所見(jiàn)即所得”是被廣泛應(yīng)用的一個(gè)設(shè)計(jì)原則,設(shè)計(jì)師們不管用得上用不上,只要能靠上點(diǎn)兒邊兒都愿意往這個(gè)原則上靠。 前面描述的那種只有編輯態(tài)的方式不是“所見(jiàn)即所得”好的范例。我們來(lái)看看 MS word:
當(dāng)前看到的樣子就是這份文檔實(shí)際的樣子,隨時(shí)可以編輯。 寫(xiě)一篇blog的時(shí)候是怎樣的?發(fā)表、編輯是一個(gè)界面,實(shí)際瀏覽的時(shí)候是另外一個(gè)界面,兩個(gè)界面的差別還是不小的。是的,blog是“瀏覽態(tài)+編輯態(tài)”的設(shè)計(jì)模式。 顯然word更好。blog的展示有很高的要求,排版布局、圖片位置、字體樣式、行距…如果能做到像word一樣,估計(jì)頁(yè)面就打不開(kāi)了。
有沒(méi)有更好的方案?
并不是所有的允許用戶修改內(nèi)容的頁(yè)面對(duì)顯示都有那么高的要求,前面提到的那些設(shè)置頁(yè)面、個(gè)人資料之類的頁(yè)面用戶更改的只是內(nèi)容,那么,這類產(chǎn)品的設(shè)計(jì)有沒(méi)有可能突破只是編輯態(tài)的困惑,又避免瀏覽態(tài)+編輯態(tài)帶來(lái)的麻煩呢?
“編輯態(tài)+瀏覽態(tài)”的缺陷是:看到了不能直接改。 “只有編輯態(tài)”的缺陷是:當(dāng)前是否做了修改,說(shuō)明的不夠清楚。 我們來(lái)嘗試沒(méi)有瀏覽態(tài)的優(yōu)化方案:
這個(gè)方案是在編輯態(tài)的基礎(chǔ)上添加一個(gè)狀態(tài)說(shuō)明,始終提示是否有修改。避免了原先只有編輯態(tài)的狀態(tài)不清問(wèn)題。因?yàn)槭窃诰庉嫅B(tài)的基礎(chǔ)的優(yōu)化,所以顯然“瀏覽態(tài)+編輯態(tài)”模式的缺陷也不存在。 對(duì)排版要求不那么高的google notebook、google doc的設(shè)計(jì)實(shí)際上就是這個(gè)方案。只是在這個(gè)方案的基礎(chǔ)上再加入了自動(dòng)保存的功能。
我們順著這個(gè)方案再往下想: 如果頁(yè)面中的那些輸入框、下拉選擇框…在未操作的時(shí)候使用一種樣式能顯示的不那么搶眼,而在用戶觸發(fā)操作時(shí)使用系統(tǒng)的標(biāo)準(zhǔn)樣式,這樣,頁(yè)面平時(shí)看上去就很接近瀏覽態(tài)了。那么,無(wú)修改的時(shí)候也可以不再提示…
沒(méi)有修改,只是瀏覽時(shí),不需要再特意的提示“內(nèi)容無(wú)修改,不需保存。”而是用近似于瀏覽態(tài)的樣式給用戶暗示可修改。雖然看上去像是瀏覽態(tài),但用戶卻可以隨時(shí)修改…
當(dāng)用戶修改了其中的內(nèi)容時(shí):
嗯,就是這么個(gè)方案。實(shí)際上這個(gè)方案是將編輯態(tài)隱藏了起來(lái),用戶觸發(fā)編輯操作時(shí)自動(dòng)切換到編輯態(tài)。
“只有編輯態(tài)”是不夠清晰的,“編輯態(tài)+瀏覽態(tài)”也不是萬(wàn)能藥。 減少頁(yè)面,減少認(rèn)知成本;隨時(shí)可編輯;足夠的狀態(tài)提示,基于目前的技術(shù),這些是優(yōu)化的目標(biāo),還有其他更好的方案嗎?
本文鏈接:http://m.95time.cn/design/doc/2011/8549.asp
出處:臭魚(yú)的交互設(shè)計(jì)
責(zé)任編輯:bluehearts
|