网站内容管理系统后台 设计(最常见的网站后台管理的主要工作区域和界面布局)

　　网站内容管理系统后台 设计(最常见的网站后台管理的主要工作区域和界面布局)

　　一、最常见的网站后台管理界面布局

　　1.头

　　2.菜单

　　3.主要工作区

　　4.底部

　　二、工作区交互设计

　　后台操作管理的主要工作区域如区域3所示。在古代的网站后台管理程序中，区域3设计为一次只显示一页。当前流行的做法是区域 3 有多个选项卡。实际上，每个选项卡都是一个 iframe。与老做法相比，这样做的好处是可以在多个窗口之间切换，还有一些“协同”的味道。有时我们在填写表格时，需要参考系统中其他表格的内容。这时，我们可以保持当前窗口查看其他窗体的内容。

　　三、 列表页与新建（编辑）页的交互设计

　　1.新建页面和列表界面分为两个菜单

　　2.新增的界面以弹窗的形式显示在列表页

　　在古老的网站后台管理系统中，我们将看到第一种方式。但我个人更喜欢第二种方法，因为操作简单，不需要切换页面。这样做的代价是增加列表页和编辑界面的交互，编程稍微复杂一些。但比起给用户带来的操作方便，这个小小的编程成本实在是不算什么。

　　四、关于弹出选项

　　1. 使用原生 window.open 或 IE 特定的 window.showModelDialog

　　2. 使用目前主流的Div模拟对话框

　　我的选择是通过div模拟Dialog的第二种方式。原因是window.open不能锁屏，IE特有的可以锁频的window.showModelDialog与浏览器不兼容。Div模拟的Dialog方法没有这样的问题。主流模拟窗口兼容各种浏览器，弹窗其他区域的操作通过遮罩层的方式进行屏蔽。

　　五、Dialog的内容是如何加载的

　　1. 拼出一段html元素（Dialog.open({content:"htmlstring"})）

　　2. 加载新页面 (Dialog.open({url:create.cshtml}))

　　Dialog内容的加载方式会影响整个操作区的设计。

　　第一种方式：然后把你的“新界面”的html内容和List页面混在一起。两个页面的职责完全不同，放在一起很奇怪。也不能达到页面重用的目的。您还可以异步请求页面以获取需要加载到弹出窗口中的内容。当然，在mvc框架中，也可以使用PartialView方法在List页面中隐藏和显示新页面。这样，页面可以被重用，但是这个页面不能与母版页分离。

　　第二种方式：不需要在你的界面中引入“新界面”的Html内容，列表页和新页分开放置。单独的新界面也可以独立于列表页面工作。

　　相比之下，我更喜欢选择第二种显示弹窗的方式，方便编程。但是这种方式也会有一些“坑”

　　1. 当我们保存成功后，关闭窗口

　　Dialog 的容器 div 和新页面在不同的 Dom 文档中。在新界面中关闭 Dialog 需要跨文档。可能有人说，把save等按钮放到Dialog所在的dom里面很快就OK了？同样，如果放在Dialog所在的Dom中，我们也会遇到表单提交和跨文档验证等问题。毕竟，每个表单的按钮可能因业务而异。所以按钮应该放在特定的新页面中。

　　六、对话框在哪里弹出？

　　关于这个问题，如果只是在工作区弹出，掩膜层的锁频功能是没有用的，工作区可能的高度可能是由于上下占据的高度，使得高度弹出的界面太短了。不够大气。所以我们应该把Dialog的popup放在最顶层的Dom中。这也是我们在五）中选择第二种方式弹出对话框的原因之一。

　　结尾