1. 概述
本次网页设计作业的实现目标是一个在线购物商城网站,我们小组共同完成了该项目。该网站主要包括以下几个模块:首页、商品列表、商品详情、购物车、结算、订单详情、我的订单、我的收藏等。
2. 首页设计
我们的首页设计主要包括banner轮播图、商品分类、热门商品推荐等。Banner轮播图使用了jQuery插件Slick实现,展示了商城主打品牌的广告图片;商品分类按照不同的的商品类型进行分组,方便用户查找自己需要的商品;热门商品推荐则根据销量等指标选出热门商品,可以直接点击加入购物车。
3. 商品列表页面设计
在商品列表页面设计中,我们主要采用了响应式布局以及滚动加载等技术,使得页面可以适应不同大小的屏幕和不同的设备。同时,我们还加入筛选和排序功能,将商品按照不同的价格、品牌等条件进行筛选和排序,方便用户选择自己需要的商品。
4. 商品详情页设计
商品详情页主要包括商品的图片、名称、价格、详细描述、评论等。我们采用了放大镜效果,让用户可以更清晰地查看商品图片,提高了用户的购买体验。同时,用户可以通过商品详情页直接将该商品加入购物车或者收藏。
5. 购物车页面设计
用户在商品列表页面或者商品详情页面可以将自己感兴趣的商品添加到购物车中。在购物车页面,用户可以看到自己添加的所有商品,可以对商品进行删除、数量修改等操作。购物车页面还有一个小功能,可以将商品加入到收藏夹中,以便以后再次查看。
6. 结算页面设计
结算页面主要是用户对购物车中的商品进行结算(结账)。在结算页面中,用户可以看到自己要购买的商品的图片、名称、价格等详细信息,并且可以选择付款方式和配送方式。这里的付款方式有支付宝、微信支付、银联等多种选择,用户可以根据自己的需求进行选择。
7. 订单详情页面设计
在用户完成订单支付之后,可以在订单详情页面看到自己的订单信息。订单详情页面主要包括订单号、订单状态、订单金额、订单商品信息等。如果订单中有需要配送的商品,用户还需要填写收货地址以及联系方式等信息。订单详情页面中还有一个小功能,可以取消订单,如果用户不想继续购买该订单,则可以通过该功能进行取消。
8. 我的订单页面设计
在我的订单页面中,用户可以看到自己所有的订单信息,包括待付款、待发货、待收货、已完成等状态。用户可以在这里查看订单详情、取消订单、评价商品等操作。我的订单页面也是一个响应式布局,可以适应不同的设备。
9. 我的收藏页面设计
在我的收藏页面中,用户可以看到自己已经收藏的商品信息。用户可以根据自己的需求进行删除或者继续收藏。在商品列表页面或者商品详情页面中,用户也可以添加或者删除收藏夹中的商品。
10. 总结
通过这次网页设计作业,我们小组在实践中学习到了很多专业知识和技能。我们深入了解了网页设计的流程以及各个页面的设计原理,同时也熟悉了各种前端开发工具和插件的使用。最终,我们成功地完成了一个模拟在线购物商城的网站,为我们今后的职业生涯打下了坚实的基础。