任务1.4
划分网店装修的页面内容

1.4.1 任务引入

本任务要求读者首先了解店铺页面的构成；然后通过划分店铺的首页和详情页，加深对店铺页面构成的认知。

1.4.2 任务知识：店铺页面构成

1 店铺首页的页面构成

在PC端中，首页通常由店招/导航、轮播海报、优惠券、分类导航、商品展示和底部信息组成，如图1-17（a）所示。在无线端中，首页除了尺寸有变化，页面构成与PC端几乎相同。部分店铺会根据商家需求，自行选择加入文字标题、店铺热搜、排行榜和更多商品等模块，如图1-17（b）所示。

2 店铺详情页的页面构成

在PC端中，详情页通常由主图、左侧区域及详情区域组成，如图1-18（a）所示。在无线端中，详情页除了尺寸有变化，页面构成与PC端相比缺少了左侧区域，如图1-18（b）所示。

1.4.3 任务实施

（1）启动Illustrator，打开云盘中的“Ch01＞任务1.4 划分网店装修的页面内容＞素材＞01”文件，如图1-19所示。使用“直线段”工具 和“文字”工具 划分网店的首页，效果如图1-20所示。

（2）使用相同的方法，打开云盘中的“Ch01＞任务1.4 划分网店装修的页面内容＞素材＞02”文件，如图1-21所示。使用“矩形”工具 和“文字”工具 划分网店的详情页，效果如图1-22所示。