对于一个用户可以修改的页面，
最传统、最可靠的方式：浏览态+编辑态

在浏览态的页面上点击“修改”按钮，进入编辑状态。
这样可以用浏览态很清晰的告诉用户当前保存的表单内容是什么样的。在编辑态修改好之后，保存，回到浏览态。

这种方式有自己的问题：如果原本只是要修改某一项内容，也需要点“修改”按钮，进入编辑态，再重新找到那项，修改。内容很多的时候，在编辑态页面中再找一遍，找到刚才看好要修改的那项，还是挺吃力的。

在实际的应用中经常会只有编辑态。

很多个人资料页、设置页通常都只有编辑态。只有编辑态的好处是所见即可修改。看到了某项内容，想修改，直接就可以改。输入框、单选、复选…这些表单元件都可以既展示又修改。

只有编辑态的方式也存在一些问题：“当前页面中有没有修改？”“是否需要保存？”“我忘记了刚才的修改有没有保存过，再按一次保存？”“确实保存了吗?咋和没点保存按钮之前完全一样？”

“浏览态+编辑态”的设计模式是原始的，是技术局限下的产物。
“所见即所得”是被广泛应用的一个设计原则，设计师们不管用得上用不上，只要能靠上点儿边儿都愿意往这个原则上靠。
前面描述的那种只有编辑态的方式不是“所见即所得”好的范例。我们来看看 MS word：

当前看到的样子就是这份文档实际的样子，随时可以编辑。
写一篇blog的时候是怎样的？发表、编辑是一个界面，实际浏览的时候是另外一个界面，两个界面的差别还是不小的。是的，blog是“浏览态+编辑态”的设计模式。
显然word更好。blog的展示有很高的要求，排版布局、图片位置、字体样式、行距…如果能做到像word一样，估计页面就打不开了。

有没有更好的方案？

并不是所有的允许用户修改内容的页面对显示都有那么高的要求，前面提到的那些设置页面、个人资料之类的页面用户更改的只是内容，那么，这类产品的设计有没有可能突破只是编辑态的困惑，又避免浏览态+编辑态带来的麻烦呢？

“编辑态+浏览态”的缺陷是：看到了不能直接改。
“只有编辑态”的缺陷是：当前是否做了修改，说明的不够清楚。
我们来尝试没有浏览态的优化方案：

这个方案是在编辑态的基础上添加一个状态说明，始终提示是否有修改。避免了原先只有编辑态的状态不清问题。因为是在编辑态的基础的优化，所以显然“浏览态+编辑态”模式的缺陷也不存在。
对排版要求不那么高的google notebook、google doc的设计实际上就是这个方案。只是在这个方案的基础上再加入了自动保存的功能。

我们顺着这个方案再往下想：
如果页面中的那些输入框、下拉选择框…在未操作的时候使用一种样式能显示的不那么抢眼，而在用户触发操作时使用系统的标准样式，这样，页面平时看上去就很接近浏览态了。那么，无修改的时候也可以不再提示…

没有修改，只是浏览时，不需要再特意的提示“内容无修改，不需保存。”而是用近似于浏览态的样式给用户暗示可修改。虽然看上去像是浏览态，但用户却可以随时修改…

当用户修改了其中的内容时：

嗯，就是这么个方案。实际上这个方案是将编辑态隐藏了起来，用户触发编辑操作时自动切换到编辑态。

“只有编辑态”是不够清晰的，“编辑态+浏览态”也不是万能药。
减少页面，减少认知成本；随时可编辑；足够的状态提示，基于目前的技术，这些是优化的目标，还有其他更好的方案吗？

本文链接：http://www.blueidea.com/design/doc/2011/8549.asp　

出处：臭鱼的交互设计
责任编辑：bluehearts