上一篇博客中 Easyui-Datagrid—表頭靈活顯示小編給大家分享用戶體驗(yàn)度的頁(yè)面的幾大要點(diǎn)

        如果你設(shè)計(jì)的軟件，豬都會(huì)用，那你就是軟件工程師。

        如果你設(shè)計(jì)的軟件，豬都不會(huì)用，那你就是豬。

          續(xù)上篇博客，設(shè)計(jì)軟件UI界面原則

• 用戶控制

          用戶界面設(shè)計(jì)的一個(gè)重要原則是用戶應(yīng)該總是感覺在控制軟件而不是感覺被軟件所控制。

操作上假設(shè)是用戶–而不是計(jì)算機(jī)或軟件–開始動(dòng)作。用戶扮演主動(dòng)角色，而不是扮演被動(dòng)角色。在需要自動(dòng)執(zhí)行任務(wù)時(shí)，要以允許用戶進(jìn)行選擇或控制它的方式來實(shí)現(xiàn)該自動(dòng)任務(wù)。

該設(shè)計(jì)理念可用流程形式實(shí)現(xiàn)效果

• 清楚一致的設(shè)計(jì)

             提供一種穩(wěn)定的感覺，使得界面熟悉而又可預(yù)測(cè)。包括命令的名稱、信息的可視表示，操作行為，以及元素在屏幕和窗口內(nèi)部的放置。

頁(yè)面樣式和風(fēng)格要統(tǒng)一。

• 有良好的直覺特性

           提供直接而直觀的界面，沒有多余的其他無用信息ps:功能可以統(tǒng)一放入更多種

• 較快的響應(yīng)速度

            保持界面能很快對(duì)用戶操作作出反應(yīng)

提供快捷鍵，可以使速度快的用戶可以控制界面并加快數(shù)據(jù)的輸入

不要重繪屏幕。

• 簡(jiǎn)單且美觀

            簡(jiǎn)單。界面應(yīng)該很簡(jiǎn)單（不是過分單純化）、易于學(xué)習(xí)、并且易于使用。不相關(guān)或冗長(zhǎng)的句子擾亂了您的設(shè)計(jì)，使得用戶難以很容易地提取重要信息；盡可能嘗試建立利用用戶已有的知識(shí)和經(jīng)歷的聯(lián)系，可以使用漸進(jìn)揭示來幫助用戶管理復(fù)雜的事物，”漸進(jìn)揭示”涉及到仔細(xì)的信息組織，以便只在恰當(dāng)?shù)臅r(shí)候才顯示信息。通過隱藏向用戶表達(dá)的信息

可以使用菜單來顯示操作或選擇的列表，還可以使用對(duì)話框來顯示一組選項(xiàng)。

            美觀?？梢曉O(shè)計(jì)是應(yīng)用程序界面的重要部分?？梢晫傩蕴峁┝朔浅：玫挠∠螅鬟_(dá)特定對(duì)象的交互行為的重要線索。同時(shí)，出現(xiàn)在屏幕上的每一個(gè)可視元素也是很重要的，它們可能競(jìng)爭(zhēng)用戶的注意。提供清楚地促進(jìn)用戶對(duì)表達(dá)的信息的理解的連貫環(huán)境。圖形或可視設(shè)計(jì)器的技巧對(duì)于這一方面是無價(jià)的。

小編努力在做“豬”都能使用的軟件UI界面設(shè)計(jì)（ps:(*^__^*)嘻嘻……不知道這個(gè)比喻恰不恰當(dāng)，戳到痛處的小盆友無怪哈）

一、效果圖

    只要你用心發(fā)現(xiàn)，原來微軟的軟件是那樣的貼心：

經(jīng)這樣一位“高人”指點(diǎn)，在Easyui-DataGrid上我有了新的想法，為何不加上這樣的效果展示給用戶呢？

表頭拖動(dòng)事件效果圖：

二、代碼實(shí)現(xiàn)

    小編Demo運(yùn)用的是MVC3框架結(jié)合jQueryEasyUI開發(fā)UI界面，在你要實(shí)現(xiàn)的Index母版頁(yè)視圖中添加js的應(yīng)用，就能實(shí)現(xiàn)該效果

     在js添加事件代碼即可達(dá)到效果:

//表頭拖動(dòng) js 事件
$.extend($.fn.datagrid.methods, {
   columnMoving: function (jq) {
     return jq.each(function () {
       var target = this;
       var cells = $(this).datagrid('getPanel').find('div.datagrid-header td[field]');
       cells.draggable({
         revert: true,
         cursor: 'pointer',
         edge: 5,
         proxy: function (source) {
           var p = $('
').appendTo('body');
           p.html($(source).text());
           p.hide();
           return p;
         },
         onBeforeDrag: function (e) {
           e.data.startLeft = $(this).offset().left;
           e.data.startTop = $(this).offset().top;
         },
         onStartDrag: function () {
           $(this).draggable('proxy').css({
             left: -10000,
             top: -10000
           });
         },
         onDrag: function (e) {
           $(this).draggable('proxy').show().css({
             left: e.pageX + 15,
             top: e.pageY + 15
           });
           return false;
         }
       }).droppable({
         accept: 'td[field]',
         onDragOver: function (e, source) {
           $(source).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes');
           $(this).css('border-left', '1px solid #ff0000');
         },
         onDragLeave: function (e, source) {
           $(source).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no');
           $(this).css('border-left', 0);
         },
         onDrop: function (e, source) {
           $(this).css('border-left', 0);
           var fromField = $(source).attr('field');
           var toField = $(this).attr('field');
           setTimeout(function () {
             moveField(fromField, toField);
             $(target).datagrid();
             $(target).datagrid('columnMoving');
           }, 0);
         }
       });

       // move field to another location
       function moveField(from, to) {
         var columns = $(target).datagrid('options').columns;
         var cc = columns[0];
         var c = _remove(from);
         if (c) {
           _insert(to, c);
         }

         function _remove(field) {
           for (var i = 0; i < cc.length; i++) {
             if (cc[i].field == field) {
               var c = cc[i];
               cc.splice(i, 1);
               return c;
             }
           }
           return null;
         }
         function _insert(field, c) {
           var newcc = [];
           for (var i = 0; i < cc.length; i++) {
             if (cc[i].field == field) {
               newcc.push(c);
             }
             newcc.push(cc[i]);
           }
           columns[0] = newcc;
         }
       }
     });
   }
});

三、總結(jié)
只有你想不到的，沒有你實(shí)現(xiàn)不了的。

開發(fā)一個(gè)軟件不難，開發(fā)一個(gè)人人都愛的軟件，還需要努力。

小編上傳了一個(gè)Demo ,實(shí)現(xiàn)表頭靈活顯示和表頭拖動(dòng)的效果，喜歡的博友可以下載看看。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。