Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

多层对话框的设计逻辑

  在Windows上,很多操作都是在对话框上实现的。当操作需求越来越复杂时,就可能需要多级对话框。Windows上的多级对话框大部分都用模态对话框来实现,但Web设计已经抛弃了这种方式,我们要考虑的是如何在适合Web的对话框设计上实现多级对话框。
  首先我们来看看浏览器自带的一些对话框:
    showModelDialog 传统的模态对话框,已经被废弃,今后会从浏览器上移除
    alert/prompt/confirm 经典对话框,可以实现一些简单的功能,但毫无可扩展性
    DialogAPI 目前最新的对话框API,规范暂不稳定,暂时无法在正式项目中使用
  也就是说,浏览器自带的对话框API目前是没戏的。现在大多数网站对于对话框都是自己用程序实现的。通常会用一个半透明的元素遮住整个页面,然后再显示一个自己做的对话框。这么一来对于多层对话框的处理就有两种解决方案可选,一种是直接堆叠,每次都覆盖之前的所有内容弹出对话框。这是最简单的办法,但用户体验不太好,因为半透明的背景也会一直叠加。另一种是在对话框的管理逻辑上建立一个栈,每次只显示栈顶的对话框。当对话框关闭时候就删除掉一层栈顶。也就是说,页面无论如何都只显示一层对话框,只是内容在切换。栈用于维护内容的层级,比如顶层对话框被关闭时就自动切换到前一个对话框,而不是直接关闭所有。
  我认为这样使用栈来管理对话框,只对用户显示一层,在体验上会稍好一些。但设计和操作上需要考虑的比较多。首先,它需要的API就比较复杂,比如关闭对话框的方法应该要有两个,cancel和cancelAll。打开对话框的API可能也需要两个,popup和popupNew。如果对话框的封装还包含一些事件,这些处理也需要考虑,比如开发者可能想知道调整到这个对话框是因为调用了popup还是cancel掉了更高层的对话框后返回来的。
  最后,也许有些人会直接认为“多层对话框是不科学的设计,现在都流行扁平式设计”。但我觉得,扁平式设计就像共产主义,它只是一个美好的梦。世界不可能扁平,阶级斗争永远存在。
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^