ASP.NET MVC快速開發框架清新簡潔界面設計，有興趣可以模仿參考

軟件的用戶體驗很重要，要抓住用戶的心，這篇博文分享一下最近一個項目的UI設計。

我做UI設計是從用戶的角度出發的，要去揣摩用戶的習慣。

大部分用戶都是使用windows操作系統，所以我這套軟件的風格也是做成windows式的。

              地址：http://121.40.148.178:8080/ 、 用戶名：guest，密碼：123456

首先看一下首頁導航菜單

這個導航菜單其實也是由div拼了來的，另外用css樣式調一下就好了，下面給大家看一下加載菜單的代碼

      function initStartMenu() {
            $('#overlay_startmenu').click(function () {
                if ($('#start_menu_panel:visible').length) {
                    $('#overlay_startmenu').hide();
                    $('#start_menu_panel').slideUp(1);
                    $('.nicescroll-rails').hide();
                }
            });
            $('#start_menu').click(function () {
                if ($('#start_menu_panel:visible').length) {
                    $('#overlay_startmenu').hide();
                    $('#start_menu_panel').slideUp(1);
                    $('.nicescroll-rails').hide();
                }
                //遮罩層位置和顯示
                $('#overlay_startmenu').show();
                //菜單面板位置
                var top = $('#start_menu').offset().top - $('#start_menu_panel').outerHeight() - 1;
                $('#start_menu_panel').css({ top: top });
                $('#start_menu_panel').show();
                $('.nicescroll-rails').show();
            });
        }
        //導航一級菜單
        var StartmenuJson = "";
        function GetStartmenu() {
            var index = 0;
            var html = "";
            getAjax("/Home/LoadStartMenu", "", function (data) {
                StartmenuJson = eval("(" + data + ")");
                $.each(StartmenuJson, function (i) {
                    if (StartmenuJson[i].ParentId == '9f8ce93a-fc2d-4914-a59c-a6b49494108f') {
                        html += "<li>";
                        if (index == 0) {
                            html += "<div class='main_menu leftselected' onclick=\"GetSubmenu('" + StartmenuJson[i].ModuleId + "')\">";
                            GetSubmenu(StartmenuJson[i].ModuleId);
                        } else {
                            html += "<div onclick=\"GetSubmenu('" + StartmenuJson[i].ModuleId + "')\">";
                        }
                        html += "<img src='../Content/Images/Icon32/" + StartmenuJson[i].Icon + "' width='32' height='32'>" + StartmenuJson[i].FullName + "";
                        html += "</div>";
                        html += "</li>";
                        index++;
                    }
                });
            })
            $("#htmlMenu").append(html);
            var menuheight = $('.main_menu div').height() * $('.main_menu li').length + $('.main_menu li').length + 1;
            if (menuheight <= 360) {
                menuheight = 360
            }
            $(".panel-menu").height(menuheight);
            $("#main_menu").height(menuheight);
            $("#Submenu").height(menuheight);
            divniceScroll("#Submenu");
            readyIndex();
        }
        //導航子菜單
        function GetSubmenu(ModuleId) {
            $("#Submenu").html("");
            var html = "";
            $.each(StartmenuJson, function (i) {
                if (StartmenuJson[i].ParentId == ModuleId) {
                    var Icon = "";
                    if (StartmenuJson[i].Icon != "") {
                        Icon = StartmenuJson[i].Icon;
                    }
                    if (IsBelowMenu(StartmenuJson[i].ModuleId) > 0) {
                        html += "<div title='" + StartmenuJson[i].FullName + "' class=\"shortcuticons\" onclick=\"GetSubmenu('" + StartmenuJson[i].ModuleId + "')\"><img src='../Content/Images/Icon32/" + Icon + "'><br />" + StartmenuJson[i].FullName + "</div>";
                    } else {
                        html += "<div title='" + StartmenuJson[i].FullName + "' class=\"shortcuticons\" onclick=\"AddTabMenu('" + StartmenuJson[i].ModuleId + "', '" + RootPath() + StartmenuJson[i].Location + "', '" + StartmenuJson[i].FullName + "',  '" + StartmenuJson[i].Icon + "','true');\"><img src='../Content/Images/Icon32/" + Icon + "'><br />" + StartmenuJson[i].FullName + "</div>";
                    }
                }
            });
            $("#Submenu").html(html);
        }
        //判斷是否有子節點
        function IsBelowMenu(ModuleId) {
            var count = 0;
            $.each(StartmenuJson, function (i) {
                if (StartmenuJson[i].ParentId == ModuleId) {
                    count++;
                    return false;
                }
            });
            return count;
        }

   以上就是頁面上去加載菜單的代碼，那后台要寫些什么東西呢？獲得一下菜單信息就好了，我們把菜單的圖標、名稱、路徑都存在數據庫里，后台寫個方法取出來轉成Json讓上面這個JS方法去調用就好了。

下面這個是列表頁，表格插件用的是jqgrid,看起來還不錯加載速度也蠻快的

下面這個是彈出窗，看起來是不是有點像windows窗口了。

這里是以另外一種方式顯示人員信息，用圖片加數據顯示明細。其實這里也是先把數據取出來，然后再組成一個個的div,div好控制，圖片文字都可以放。

以下這個也是同樣的道理，點擊后更新了一下div的圖標，我們就看到了下面的小勾勾

是的，學會了使用div排版真的是很方便，這個容器什么都可以放，左邊弄了個tree出來

 

看看一面的下拉框，其實也是動態加載出來的，使用div+css+ajax界面真的可以做得很靈活，用戶體驗也非常好。