ASP.NET MVC后台管理系统精美UI设计

现在越来越多的系统都是BS架构，什么样的界面风格才更加大气、美观、实用呢？

先给大家看一下我自己做的后台系统风格，然后再讲几个主要的界面

地址：http://121.40.148.178:8080/ 、 用户名：guest，密码：123456

一、整体部局

现在的管理系统比较流行把界面做得跟CS应用程序很像，让人一眼看去都以为是CS程序，的确那样看起来很大气，很漂亮。

以往的做法，通常是在工作区只能显示一个功能页面，打开一个新的功能以后页面就跳转了，当用户需要同时打开两个功能的时候就很蛋疼，所以我在自己的开发框架中用了多页签方式布局，用easyui和其它UI能实现，为了更好控制，我是自己实现的没有采用第三方插件，效果如下图所示：

其原理就是：当点击一个菜单项，我在工作区就加了个div,然后在div里以iframe的方式打开页面，切换功能其实就是改变哪个div在显示，核心代码如下

function AddTabMenu(tabid, url, name, img, Isclose, IsReplace) {
    $(‘#overlay_startmenu‘).hide(); $(‘#start_menu_panel‘).hide(); $(‘#start_menu_panel .nicescroll-rails‘).show(); $(‘.nicescroll-rails‘).hide();
    if (url == "" || url == "#") {
        url = "/Error/Error404";
    }
    var tabs_container = top.$("#tabs_container");
    var ContentPannel = top.$("#ContentPannel");
    if (IsReplace == ‘true‘) {
        top.RemoveDiv(tabid);
    }
    if (top.document.getElementById("tabs_" + tabid) == null) { //如果当前tabid存在直接显示已经打开的tab
        Loading(true);
        VisitorModule(tabid, name);
        if (tabs_container.find(‘li‘).length >= 10) {
            top.jBox.info("为保证系统效率,只允许同时运行10个功能窗口,请关闭一些窗口后重试！", ‘信息警告‘);
            return false;
        }
        tabs_container.find(‘li‘).removeClass(‘selected‘);
        ContentPannel.find(‘iframe‘).hide();
        if (Isclose != ‘false‘) { //判断是否带关闭tab
            tabs_container.append("<li id=\"tabs_" + tabid + "\" class=‘selected‘ win_close=‘true‘><span title=‘" + name + "‘ onclick=\"AddTabMenu(‘" + tabid + "‘,‘" + url + "‘,‘" + name + "‘,‘true‘)\"><a><img src=‘/Content/Images/Icon16/" + img + "‘ width=‘16‘ height=‘16‘>" + name + "</a></span><a class=\"win_close\" title=\"关闭当前窗口\" onclick=\"RemoveDiv(‘" + tabid + "‘)\"></a></li>");
        } else {
            tabs_container.append("<li id=\"tabs_" + tabid + "\" class=\"selected\" onclick=\"AddTabMenu(‘" + tabid + "‘,‘" + url + "‘,‘" + name + "‘,‘false‘)\"><a><img src=‘/Content/Images/Icon16/" + img + "‘ width=‘16‘ height=‘16‘>" + name + "</a></li>");
        }
        ContentPannel.append("<iframe id=\"tabs_iframe_" + tabid + "\" name=\"tabs_iframe_" + tabid + "\" height=\"100%\" width=\"100%\" src=\"" + url + "\" frameBorder=\"0\"></iframe>");
    } else {
        VisitorModule(tabid);
        tabs_container.find(‘li‘).removeClass(‘selected‘);
        ContentPannel.find(‘iframe‘).hide();
        tabs_container.find(‘#tabs_‘ + tabid).addClass(‘selected‘);
        top.document.getElementById("tabs_iframe_" + tabid).style.display = ‘block‘;
    }
    $(‘iframe#‘ + tabiframeId()).load(function () {
        Loading(false);
    });
    LoadrightMenu(".tab-nav li");
}
//关闭当前tab
function ThisCloseTab() {
    var tabs_container = top.$("#tabs_container");
    top.RemoveDiv(tabs_container.find(‘.selected‘).attr(‘id‘).substr(5));
}
//全部关闭tab
function AllcloseTab() {
    top.$(".tab-nav").find("[win_close=true]").each(function () {
        RemoveDiv($(this).attr(‘id‘).substr(5))
    });
}
//关闭除当前之外的tab
function othercloseTab() {
    var tabs_container = top.$("#tabs_container");
    var id = tabs_container.find(‘.selected‘).attr(‘id‘).substr(5);
    top.$(".tab-nav").find("[win_close=true]").each(function () {
        if ($(this).attr(‘id‘).substr(5) != id) {
            RemoveDiv($(this).attr(‘id‘).substr(5))
        }
    });
}

导航菜单我采用的是手风琴风格

另外再加入快捷导航，把常用功能加入其中，让操作更快捷

二、功能页面设计

功能页面里，主要介绍下列表和表单，一般进入功能页先显示一个列表，列表上方为工具栏，常用操作在工具栏执行

这里的查询也是自定义了，省去了以往那种一个个地去写查询条件，每个界面都可以通用，用户控制起来也很灵活。

表单新增和删除的时候一般是弹出个窗口，周围用一个遮罩的效果。

以上就是我在开发框架中用到的UI风格，希望大家能得到一些启发。