一、最常見(jiàn)的網(wǎng)站后臺(tái)管理的界面布局

1.頭部

2.菜單

3.主要工作區(qū)域

4.底部

二、工作區(qū)的交互設(shè)計(jì)

后臺(tái)操作管理的主要工作區(qū)域在圖示的區(qū)域3，古老的網(wǎng)站后臺(tái)管理程序中，區(qū)域3被設(shè)計(jì)成一次只能展示一個(gè)頁(yè)面。而現(xiàn)在的流行做法是區(qū)域3是多Tab的，其實(shí)每個(gè)Tab都是一個(gè)Iframe。相對(duì)于古老的做法，這樣做的好處是可以多窗口切換，有一些"協(xié)同的"味道。有時(shí)候我們填寫一個(gè)表單，需要參考系統(tǒng)中其他表單的內(nèi)容。這個(gè)時(shí)候我們完全可以保留當(dāng)前窗口的情況下去查看其他表單的內(nèi)容。

三、 列表頁(yè)面與新增（編輯）頁(yè)面的交互設(shè)計(jì)

1.新增頁(yè)面和列表界面分開(kāi)兩個(gè)菜單
2.新增界面以彈窗的形式顯示在列表頁(yè)面

在古老的網(wǎng)站后臺(tái)管理系統(tǒng)里面，我們會(huì)看到第一種方式。但是我個(gè)人傾向于第二中方式原因是，操作簡(jiǎn)單，無(wú)需切換頁(yè)面，這樣做的代價(jià)是增加列表頁(yè)面與編輯界面的交互，編程稍微復(fù)雜一些。但相比給用戶帶來(lái)的操作便捷性，這點(diǎn)點(diǎn)編程的代價(jià)實(shí)在不算什么。

四、關(guān)于彈出窗口的選擇

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

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

我的選擇是第二種div模擬Dialog的方式，理由是window.open不可以鎖屏，而可以鎖頻的IE特有的window.showModelDialog瀏覽器不兼容，Div模擬的Dialog方式?jīng)]有這樣的問(wèn)題。主流的模擬的窗口都是各種瀏覽器兼容的，并通過(guò)遮罩層的方式來(lái)阻止對(duì)彈窗其他區(qū)域的操作。

五、Dialog的內(nèi)容的加載方式

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

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

就Dialog內(nèi)容的加載方式會(huì)影響到整個(gè)操作區(qū)域的設(shè)計(jì)。

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

?

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

1. 當(dāng)我們保存成功后，關(guān)閉窗口

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

六、Dialog在哪里彈出？

關(guān)于這個(gè)問(wèn)題，如果只是在工作區(qū)域彈出，遮罩層鎖頻的功能就無(wú)用了，還有，工作局域可能的高度可能由于頂部和底部，占用的高度，使得彈出界面的高度太短。不夠大氣呀。所以我們應(yīng)該將Dialog的彈出放在最頂層的Dom中。這也是（五）中我們?yōu)槭裁催x擇第二種方式彈出dialog的一個(gè)原因了。

?

結(jié)束

?

?

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/windfighter/archive/2013/05/12/3070361.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。