一、最常見的網站后臺管理的界面布局

1.頭部

2.菜單

3.主要工作區域

4.底部

二、工作區的交互設計

后臺操作管理的主要工作區域在圖示的區域3，古老的網站后臺管理程序中，區域3被設計成一次只能展示一個頁面。而現在的流行做法是區域3是多Tab的，其實每個Tab都是一個Iframe。相對于古老的做法，這樣做的好處是可以多窗口切換，有一些"協同的"味道。有時候我們填寫一個表單，需要參考系統中其他表單的內容。這個時候我們完全可以保留當前窗口的情況下去查看其他表單的內容。

三、 列表頁面與新增（編輯）頁面的交互設計

1.新增頁面和列表界面分開兩個菜單
2.新增界面以彈窗的形式顯示在列表頁面

在古老的網站后臺管理系統里面，我們會看到第一種方式。但是我個人傾向于第二中方式原因是，操作簡單，無需切換頁面，這樣做的代價是增加列表頁面與編輯界面的交互，編程稍微復雜一些。但相比給用戶帶來的操作便捷性，這點點編程的代價實在不算什么。

四、關于彈出窗口的選擇

1. 用原生的window.open或者是IE特有的window.showModelDialog方式

2. 用目前主流的Div模擬的dialog方式

我的選擇是第二種div模擬Dialog的方式，理由是window.open不可以鎖屏，而可以鎖頻的IE特有的window.showModelDialog瀏覽器不兼容，Div模擬的Dialog方式沒有這樣的問題。主流的模擬的窗口都是各種瀏覽器兼容的，并通過遮罩層的方式來阻止對彈窗其他區域的操作。

五、Dialog的內容的加載方式

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

2. load一個新的頁面(Dialog.open({url:create.cshtml}))

就Dialog內容的加載方式會影響到整個操作區域的設計。

第一種方式：那么你的“新增界面”的html內容與List列表頁面混放在一起。兩個頁面的職責是完全不同的放在一起怪怪的。也不能達到頁面重用的目的。你也可以異步請求頁面，來獲取需要加載進彈出窗口的內容。當然在asp.net mvc框架中，你還可以用PartialView的方式將新增頁面隱藏展現在List頁面中。這樣可以達到頁面的重復利用，但是這個頁面是不可以脫離母頁工作的。

?

第二種方式：不需要在你的界面引入“新增界面”的Html內容，列表頁和新增頁分開放置。單獨的新增界面也是可以脫離List頁面獨立工作的。
相比之下我更愿意選擇第二種方式去展現一個彈出窗口，編程方便。但是這種方式下也會有一些"坑"

1. 當我們保存成功后，關閉窗口

Dialog的容器div和新增頁面是在不同的Dom文檔中的。在新增界面關閉Dialog需要跨文檔。也許有人說把保存等按鈕放入Dialog所在的dom中不久可以了嗎？同樣如果放入Dialog所在的Dom中，我們一樣遇到需要跨文檔提交表單、驗證等問題。而且畢竟每個表單的按鈕可能會根據業務的不同而不同。所以按鈕應該放置于具體的新增頁面中。

六、Dialog在哪里彈出？

關于這個問題，如果只是在工作區域彈出，遮罩層鎖頻的功能就無用了，還有，工作局域可能的高度可能由于頂部和底部，占用的高度，使得彈出界面的高度太短。不夠大氣呀。所以我們應該將Dialog的彈出放在最頂層的Dom中。這也是（五）中我們為什么選擇第二種方式彈出dialog的一個原因了。

?

結束

?

?

?

?

?

?

轉載于:https://www.cnblogs.com/windfighter/archive/2013/05/12/3070361.html

總結

以上是生活随笔為你收集整理的网站后台管理界面设计的一些想法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。