帮助IT团队快速构建符合jt808协议部标的基于java技术的GPS和视频平台(2379423771@qq.com)

前端工程师如何提高设计的功力(三)基于JQuery的分层设计

对于大型的电子商务网站，复杂的业务表现逻辑，高要求的可用性，海量的产品数据，对于前端设计是一个很高的要求，这种高要求并不是说，我们能够一步到位的作出非常完美的系统，使用户非常满意，虽然一个系统是从无到用的创建、运营者，但设计并不是想某些人所说的要有凭空想象复杂行为的能力，好的设计是无止境的，是在前面的基础上不断的Progressive Enhancement的。

要想在设计者的自我认知不断加深，用户的不断成熟的反馈积累，下能够对系统进行不断的改进、提高，就必须一开始就要秉承良好的架构设计思想、风格，为以后的重构、改进打下坚实的基础。

在一开始空手套白狼的时候，我们严格的分层，设计数据(Data)、结构(Strutcture)、行为(behaviour)、风格(style)，并绞尽脑汁的把要素粘连在一起，在随后的网站运营过程中，我们大多数的情况下，可能会改变风格、行为，少数的情况下，我们可能去重构结构，或者改变后端的数据定义，可以看出，以后的改进是局部的，增强的，不断提高交互能力和用户体验的。

如果要交系统的看设计，可以查看以前的文章：
前端工程师如何提高设计的功力(二) 之用户是真理，不要自己意淫设计

前端工程师如何提高设计的功力(一)

Think in Jquery

比如当一个网站刚开始的时候，他的产品很少，分类目录设计是这样子的。
国美的设计
当网站规模不断扩大，业务不断成熟的时候，无论是设计者、使用者，都觉得不爽，觉得以前的设计很傻的时候，就需要进行改版，这种改版如果建立在良好的分层结构上，就容易进行，改版，系统也可以稳定的过渡到新的版本上。

京东的设计

以上图为例，分层设计的步骤如下（最终的页面效果, 可以查看Demo)：
1）设计原型

<div class="left">
            <h2 id="h2_AllSort"><em><a class="more_white" href="allSort.aspx">全部分类</a></em><strong>商品分类</strong></h2>
            <div id="AllSort">
                <h3><a href="electronic.aspx">家用电器</a></h3>
                <dl id="EFF_dl_0">
                    <div class="pop_wrap" id="EFF_div_00" ><div class="pop"><span><a href="">洗衣机</a></span><span><a href="">平板电视</a></span><span><a href="">电热水器</a></span><span><a href="">家庭音响</a></span><span><a href="">燃气热水器</a></span><span><a href="">空调</a></span><span><a href="">冰箱</a></span><span><a href="">冷柜</a></span><span><a href="">DVD/USB播放器</a></span><span><a href="">电视附件</a></span></div></div>
                    <dt id="00" class="">             <span> - 洗衣机  平板电视</span>             <a href="">大 家 电</a></dt>
                    
                    <div class="pop_wrap" id="EFF_div_01" ><div class="pop"><span><a href="">吸尘器</a></span><span><a href="">电熨斗</a></span><span><a href="">饮水机</a></span><span><a href="">取暖电器</a></span><span><a href="">加湿器</a></span><span><a href="">净化器</a></span><span><a href="">电动工具</a></span><span><a href="">足浴盆</a></span><span><a href="">电话机</a></span><span><a href="">清洁机</a></span><span><a href="">电风扇</a></span><span><a href="">收录/音机</a></span><span><a href="">浴霸</a></span><span><a href="">净水设备</a></span><span><a href="">其它生活电器</a></span></div></div>
                    <dt id="01" class=""><span> - 吸尘器  电熨斗</span><a href="">生活电器</a></dt>
                    
                    <div class="pop_wrap" id="EFF_div_02" ><div class="pop"><span><a href="">电饭煲</a></span><span><a href="">电磁炉</a></span><span><a href="">电压力锅</a></span><span><a href="">电饼铛</a></span><span><a href="">榨汁/搅拌机</a></span><span><a href="">豆浆机</a></span><span><a href="">电水壶</a></span><span><a href="">咖啡机</a></span><span><a href="">微波炉</a></span><span><a href="">电烤箱</a></span><span><a href="">多用途锅</a></span><span><a href="">吸油烟机</a></span><span><a href="">燃气灶</a></span><span><a href="">消毒柜</a></span><span><a href="">洗碗机</a></span><span><a href="">面包机</a></span><span><a href="">果蔬解毒机</a></span><span><a href="">煮蛋器</a></span><span><a href="">酸奶机</a></span><span><a href="">其它厨房电器</a></span></div></div>
                    <dt id="02" class=""><span> - 电饭煲  电磁炉</span><a href="">厨房电器</a></dt>

                </dl>
                
                <div class="viewall"><a class="link_1" href="special.aspx?id=5" target="_blank">全部商品</a></div>
            </div>
            
</div>

2） 提出数据，设计成模板（通过javascript 可以编译模板，填充数据)
模板的语法参考JTemplate。


<div class="left">
            <h2 id="h2_AllSort"><em><a class="more_white" href="allSort.aspx">全部分类</a></em><strong>商品分类</strong></h2>
            <div id="AllSort">
                <h3><a href="{$T.url}">{$T.categoryName}</a></h3>
                 
                <dl id="EFF_dl_0">
                    {#foreach $T.categories as category}
                        <div class="pop_wrap" id="EFF_div_00" >
                            <div class="pop">
                                {#foreach $T.category.children as child} 
                                    <span><a href="{$T.child.url} ">{$T.child.name}</a></span>
                                {#/for}
                            </div>
                        </div>

                        <dt id="{$T.category.id}" class=""> <span> - {$T.category.p1}  {$T.category.p2}</span> <a href="">{$T.category.name}</a></dt>
                        
                    {#/for}
                </dl>
                
                <div class="viewall"><a class="link_1" href="#" target="_blank">全部商品</a></div>
            </div>
</div>

可以看出整个结构非常的清晰，自然。

3) 设计行为
     我们需要赋予目录菜单的鼠标移动时的Dring Down 效果。

     使用Jquery的时候，操作DOM节点非常简单。

    这个Javascript的代码非常简洁：
    1.读取Json产品目录数据
    2.读取HTML模板
    3.将数据填充到模板中，并显示
    4.通过Jquery，绑定菜单的move in, move out事件，显示和隐藏自菜单.
    


<script>
/** 当鼠标移动时，显示字菜单 */
function showSubCategory(){
    $("#AllSort dt").hover(function(){
            $(this).addClass("curr");        
            $(this).prev(".pop_wrap").show();

    },function(){
        $(this).removeClass("curr");
        $(this).prev(".pop_wrap").hide();
    });    

    $(".pop_wrap").hover(function(){
            $(this).show();
            $(this).next("dt").addClass("curr");
    },function(){
            $(this).hide();
            $(this).next("dt").removeClass("curr");
    });
}

/** 编译并填充模板 */
$.fn.fill = function(data){
   var template_content = $(this).html();
   $(this).setTemplate(template_content);
   $(this).processTemplate(data);
}

/** 读取数据文件，填充到模板结构中 */
$(function(){
 $.getJSON("data.html",{}, 
        function(data){
          $("#AllSort").fill(data);
          showSubCategory();

        }
 );

});

</script>


     总结：

    1）复杂的设计总是伴随着臃肿的代码、恶劣的用户体验、层出不穷的BUG.

    2)   Javascript代码越少，HTML结构越简单，就越容易维护.

    3)  交互设计，是在交互中，不断重构提高的。



20人服务器合租600元/年(绝对保证)

posted on 2008-11-17 17:44 Speed 阅读(4336) 评论(4)  编辑  收藏 所属分类: 前端设计 、JQuery

评论

# re: 前端工程师如何提高设计的功力(三)基于JQuery的分层设计 2008-11-18 09:08 HiMagic!

1. 如果简单的设计不能完成，就只能使用复杂的设计。评判设计好坏的标准不是复杂与否，而是其是否恰到好处的满足需求。
2. Javascript总比那些丑陋的标签好，标签是让HTML看起来代码少多了，但是其非标准性带来的维护问题是一个黑洞。请不要给原本朴质的语言穿上一层层的马甲。
3. 的确，交互设计是最异变的，所以在设计时，合理的分层至关重要。
  回复  更多评论   

# re: 前端工程师如何提高设计的功力(三)基于JQuery的分层设计 2008-11-18 12:41 leekiang

1，复杂与否主要取决于需求。
在满足需求的前提下，要使设计尽量简单。
2，是否采用模板就见仁见智了。看本文的例子，如果不用JTemplate，那就只能用js编码来生成，那样比较丑陋。不知js模板里JTemplate是不是最好的，如果是，就把它当作标准用不就得了。  回复  更多评论   

# re: 前端工程师如何提高设计的功力(三)基于JQuery的分层设计 2008-11-19 15:11 三人行，必有我师焉

简单不一定方便扩展呀，必要的设计还是要有的。在必要的程度上，越简单越好。  回复  更多评论   

# re: 前端工程师如何提高设计的功力(三)基于JQuery的分层设计 2008-11-19 21:22 appur

国美？  回复  更多评论   


只有注册用户登录后才能发表评论。
网站导航:
 

导航

留言簿(15)

随笔分类

值得一看的博客

积分与排名

最新评论

阅读排行榜