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

                
</dl>
                
                
<div class="viewall"><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><class="more_white" href="allSort.aspx">全部分类</a></em><strong>商品分类</strong></h2>
            
<div id="AllSort">
                
<h3><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><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> <href="">{$T.category.name}</a></dt>
                        
                    {#/for}
                
</dl>
                
                
<div class="viewall"><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 阅读(4182) 评论(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)

随笔分类

值得一看的博客

积分与排名

最新评论

阅读排行榜