如果没有浏览态…

八月 18th, 2011 24 Comments »

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

有24 条对“如果没有浏览态…”的评论

  1. iwege 说:

    在mail.google.com 的联系人里面就有hover就是编辑态的方案。
    实际上就是编辑之后即时生效,学习的是apple的方式,apple开关交互都是立即修改立即启用的,减少了一步操作。实际上因为用户可以无限制的修改,编辑,blur之后就直接提交修改是可行的。

    技术上可能要重新规划一下,比如每次只保存到本地,然后在一定的时间之后提交更新。用来减缓服务器压力。服务器也可以先将每次修改保存在数据库之外,等到第二次请求之前再插入数据库。

  2. liuyaping 说:

    我在现在的产品中使用了编辑和查看合一的设计。

    几点问comment:
    1,要么就更干脆点,未编辑的时候完全显示是一个纯文字,而不要做个折中的半透明(不抢眼)处理
    2,我这么做的问题是dropdown,texteditbox 这些控件都没问题,但是类似于 radiobutton 这样的控件显然会有问题,你的设计中也能看到。
    3,用户点击进入编辑状态,才出现下面的保存按钮好了,默认就出现毫无意义
    4,取消呢?

  3. iwege 说:

    radio的状态可以变更为select的设计,没什么问题。
    本质上single select 和radio是一样的,都是唯一的。

  4. chouyu 说:

    @liuyaping:
    1.如果干脆了,那么是不是没能够提供给用户一个暗示,暗示用户这些是可以编辑的。

    2.不突出的表现方式只是相对的不突出,radiobutton至少可以把非选中项的文字变浅一点儿吧?

    3.文章中最后的方案(最后两张图)就是在默认时没有保存按钮。

    4.“取消”按钮,这还真不是疏忽,是我还没想好。http://www.shupianhui.com/?p=73 这里曾经专门讨论过什么时候需要取消的。似乎这个方案中是应该有取消按钮的哈?

  5. iVane 说:

    其实我蛮喜欢 Google+ Profile 的那种编辑方式, 鱼哥怎么看?
    https://plus.google.com/你的帐号ID/about/edit/d

  6. sith 说:

    文中讨论的主要是页面内容的形式展现与修改问题。比如选项和文字的增删。结论的方案仅要考虑如果相同页面内容的副本也出现在浏览别人页面,即客人态,那么浏览与编辑合一的方案由于修改前跟浏览态是一致的,很难让用户意识到自己的页面我可以点击修改,别人页面我只可以看,比如facebook profile。

    另一个问题是,如gmail的设置,或wordpress的后台编辑,编辑项影响的的并非当前页面纯形式展现内容,有些选项是对系统的影响。这种情况设计个浏览态也没意义,进来就直接改保存了。

  7. sith 说:

    其实一个能统计修改项的常驻保存成功提示就够了。如果用文中方案,一样会存在修改在局部但保存在顶端(底端)的问题,即态的激活位置与恢复的位置不一致

  8. 布拉克尔 说:

    但是我觉得选用编辑态的话还有一个问题,就是信息的误读,就像GMAIL的那个设置页面,我每次寻找需要修改的选项都需要很仔细一项一项的寻找,如果是处于浏览态的话,我对信息的读入速度很明显的高于编辑态,对于gmail这样的很大信息的页面我可以很快速的找到我需要修改的选项,我觉得可以对每个选项旁边放置一个浅色的修改按钮,但是这样也许会使得页面显得很凌乱,灰度控制不好的话,个人拙见

  9. fangle 说:

    如果说是技术局限的产物,我觉得编辑态修改即时保存+无限的撤销与重做 也是一个不错的方案

  10. mykite 说:

    有一个问题,昨天刚遇到chinahr的简历修改页面正如你说的这种模式,当网络情况很糟糕的时候往往这个页面会出现假死状态。从另一种角度出发,我倒觉得传统的编辑模式会更好。

  11. 俊俊 说:

    浏览态,点击各项进入编辑态,焦点离开自动保存修改项,同时给出提示保存成功,并可以撤销。

  12. chouyu 说:

    @iVane:google+的profile页,先要点击页面右上角的“edit profile”按钮,进入编辑模式,进入编辑态后,页面上面有个红色按钮“finished editing”按钮用以退出编辑态。并没有简化浏览态与编辑态,也就是说,在浏览态的profile页里,要想编辑,必须先点“edit profile”。这是最原始的编辑态与浏览态的用法。

    另外,在编辑态中,要编辑具体的某一项,需要点击该项,弹出窗口来编辑,弹出窗口里有save按钮,编辑态页面中最上面有“finished editing”按钮,这是所谓的“多重表单嵌套”问题,带来的问题是:修改的内容什么时候生效?是点了弹出窗口中的save按钮就生效了,还是要点了“finished editing”按钮才一起生效?无论实际提供的功能是哪种,都会有另外一部分用户的困惑:“我以为点了save按钮就可以了,没注意页面上面的finished的按钮,没有点,修改的都没保存啊~”或者“我以为要点了最上面的finished按钮才生效呢,所以随便瞎改了一些,谁知道还没点finished的按钮,就已经公布出去了。”
    “多层表单的嵌套”是应该努力避免掉的。

  13. 东方cj 说:

    很有意义啊

  14. 东方cj 说:

    值得学习,毫不犹豫顶

  15. baxia 说:

    其实个人也很喜欢G+ Profile的编辑,关于您回复中提及的问题,其实是不是可以将“edit profile”和“finished editing”这两个步骤直接去掉呢,这样就不涉及多层表单的嵌套问题了。当用户浏览的时候可以直接浏览,需要修改的时候单击修改。其实跟正文中的方案比较相似,但不同在于用户每做个修改以马上点击“保存”按钮保存当前修改,若是修改量大的,G+的方式是将大任务分解成小块,若是修改量不大的,G+的方式直接将保存按钮提供在操作发生区域附近,也很方便且注意点集中。您文中提到的方式,保存按钮并非强制操作,而表单内容修改前后在样式上并未有区分,若是万一用户没有注意到“保存”按钮,则操作仍是失败的。且若是用户将A改成B,又改回A,这是算有修改呢还是没有修改呢。

    个人愚见,仅供探讨。

  16. 巴特推广 说:

    好方法http://www.0471bate.com

  17. prypl 说:

    还要考虑到网络问题,很多应用大量js和ajax的编辑保存页面都会因为网络异常而出现问题

  18. 华丽西瓜皮 说:

    这样还不够,应该在每个修改过的框附近加一个标记,如框的颜色变绿,或者右侧加一个感叹号,让用户知道哪里修改了

  19. tanglei 说:

    说得不错

  20. http://www.hitianmao.com/ 说:

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

  21. 橙子da 说:

    分析得很细致,学习了~不过,个人觉得,修改过的即时保存,将“有修改,需要保存+保存按钮”直接改为“已保存修改”的提示,去掉手动“保存”是不是会好些呢

  22. hsiaoyang 说:

    解决了我正遇到的一个疑惑,非常感谢!

  23. davisduan 说:

    我挺喜欢你的想法,不过我觉得是不是还得根据资料条目的多少来做选择采用什么方式,假如资料条目比较少,采用编辑状态可能会更好点。资料条目特别多,及时修改保存这种方式我觉得更好吧。

  24. wumervin 说:

    记得以前51job的简历编辑页面是分类目进行编辑态的,可以减少长字段页面对其他不需要编辑项的影响,也比较易于编辑与保存。

发表评论

您的大名: