tmall website

天猫网站前端设计

GitHub同步训练,搭建完成前记录效果截图。

当前进度:node+express 搭建,因没有数据库后台,只是功能上的展示

公共部分

公共

1. 置顶导航、页脚

置顶导航、页脚

2. 搜索栏

搜索栏

3. 简易搜索栏

简易搜索栏

首页

1. 分类、导航轮播

分类、导航轮播

2. 交互

  • 显示、隐藏产品列表
    交互

分类

1. 产品列表

产品列表

2. 交互

  • 选择价格
    交互

产品

1. 产品图片、基本信息

产品图片、基本信息

2. 产品详情

产品详情

3. 产品评论

产品评论

4. 交互

  • 鼠标移动到小图片,大图片一起变化(图片的预加载)
  • 产品详情和产品评论的切换

购物车

1. 结算、订单内容

结算、订单内容

2. 交互

  • 选中物品(结算button和价格的变化)
    交互1
  • 全选(直接点击 和 分别选中)
    交互2
  • 增加、减少数量及直接修改

订单

1. 标题、订单内容

标题、订单内容

2. 交互

  • 切换不同类型的订单
    交互

结算

1. 头部、收货地址

头部、收货地址

2. 订单信息

订单信息

3. 交互

  • 点击input,显示textarea。
  • 同步和限制字数
    交互

支付

支付

支付成功

支付成功

确认收货

1. 订单

订单

2. 详情

订单

收货成功

收货成功

评价

1. 评价商品信息

评价商品信息

2. 商品评价

商品评价

登陆

登陆

注册

注册

文章目录
  1. 1. 天猫网站前端设计
    1. 1.1. 公共部分
      1. 1.1.1. 1. 置顶导航、页脚
      2. 1.1.2. 2. 搜索栏
      3. 1.1.3. 3. 简易搜索栏
    2. 1.2. 首页
      1. 1.2.1. 1. 分类、导航轮播
      2. 1.2.2. 2. 交互
    3. 1.3. 分类
      1. 1.3.1. 1. 产品列表
      2. 1.3.2. 2. 交互
    4. 1.4. 产品
      1. 1.4.1. 1. 产品图片、基本信息
      2. 1.4.2. 2. 产品详情
      3. 1.4.3. 3. 产品评论
      4. 1.4.4. 4. 交互
    5. 1.5. 购物车
      1. 1.5.1. 1. 结算、订单内容
      2. 1.5.2. 2. 交互
    6. 1.6. 订单
      1. 1.6.1. 1. 标题、订单内容
      2. 1.6.2. 2. 交互
    7. 1.7. 结算
      1. 1.7.1. 1. 头部、收货地址
      2. 1.7.2. 2. 订单信息
      3. 1.7.3. 3. 交互
    8. 1.8. 支付
    9. 1.9. 支付成功
    10. 1.10. 确认收货
      1. 1.10.1. 1. 订单
      2. 1.10.2. 2. 详情
    11. 1.11. 收货成功
    12. 1.12. 评价
      1. 1.12.1. 1. 评价商品信息
      2. 1.12.2. 2. 商品评价
    13. 1.13. 登陆
    14. 1.14. 注册