首页/百家讲堂/琦琪五金网站设计制作分析

琦琪五金网站设计制作分析

一、网站架构如下:

网站主架构(主导航):Home(首页)、Products(产品页面)、About us(关于我们)、Case(案例)、FAQ(疑问解答)、News(新闻)、Contact us(联系页面)。

上述主导航中的Products还有二级分类, Products子分类: CNC Turning Parts、 CNC Milling Parts、 CNC Machining Center Parts、 Automatic Lathe Turning Parts、 Metal Stamping Parts、 Rivets、 Silver Electrical Contact、 Bottle Caps、 CNC Wooden Parts、 Aluminum Profile Parts。

琦琪五金网站设计制作分析

二、网站部分效果介绍:

1、Home( http://www.lmlmetalwork.com/)

琦琪五金网站设计制作分析

首页导航和banner(上图):一大块白色的地方是导航,这里亮点是在搜索那一两块,它曲折的展示效果很吸引人。 整个banner位置目前是三张轮播,这个地方能吸引客户的地方应该有两个地方, 第一点应该是设计师精心设计的banner(大图),第二点应该是这个地方做了自适应处理。

琦琪五金网站设计制作分析

首页热卖产品展示(上图):这个地方一次展示在我们面前产品数量是6,这里只截了3个,这里值得介绍的点有两个,第一点是:右上角可以切换产品展示,每6个算一板切换,后台管理员在后台指定了某个产品属于热卖(后台选择推荐),它就会在这里显示, 并且当前首页模板无需做任何调整。非常方便! 估计第二点比较吸引了:那就是它展示效果, 当我们鼠标移到单个产品上时, 当前产品上方会出现一块黑色的区域,同时带有当前产品的信息,同时你还会看到两条在运动的红线。 我想就这运动红线会吸引不少眼球。

琦琪五金网站设计制作分析

为什么选择我们(上图):这一块首先和关于我们页面都有展示, 这里值得介绍的是四个图标的动态效果,强大的css3让本来死的东西变得活泼乱跳,具体动画轨迹需要您自己去亲生体会。

琦琪五金网站设计制作分析

我们发展历史(上图):这一块在关于我们页面也有展示, 这里介绍的也是这个地方动态效果, 不过与上面有所不同的是靠js实现的,不需要考虑低版本浏览器兼容性问题。 这里的效果如下:当浏览器窗口滚到这个位置时,你会看到1998-2015,会有顺序的出现, 同时两个对话框也会智能出现。

琦琪五金网站设计制作分析

网站底部展示(上图):左边是产品列表的展示, 在底部展示这样可保证访问者在任何页面可以进到对应产品页面, 增加访问者进入产品页面的概率。中间是一些联系信息的展示, 这样的好处就是访问这不管在什么页面都快速联系到我们。 右边是一个发送邮件的功能,这个功能目前备受客户的喜欢, 给客户(网站所属者)增添了不少询盘,之所以这样是因为现在很多国外访问者,不喜欢繁琐的联系方式, 这样一个方便快速的联系功能他们还是可以接受的。

整个文档介绍的全是首页,其实其他页面的图片、动态效果都很有不少吸引人的地方,这需要您亲自去欣赏了、挖掘了。

最后:一个好的网站不仅要做到图片设计和动态效果吸引人、新技术使用还要做到内部优化, 这一点我们一直在不断的进步, 相信在不断的努力下我们会做得更好!