(1)采用高保真原型设计方式来设计手机淘宝APP原型;在电子材料中提供相关的图片，以供制作原型时使用。

　　(2)采用标签导航方式制作手机淘宝APP的导航。

　　(3)“首页”模块内容布局设计。

　　(4)“首页”中商品海报轮播效果设计。

　　(5)“微淘”模块页面布局设计以及页签切换效果设计。(6)“社区”模块布局设计。

　　(7)“购物车”模块的布局设计。

　　(8)“购物车”商品列表上下滑动效果设计。

　　(9)“我的淘宝”模块的布局设计。

　　设计思路

　　(1)对于手机淘宝APP的标签导航，提供两种图片，标签导航选中图片和未选中图片，同时要

　　把它制作成母版，一次制作，多次使用。

　　(2)对于手机淘宝APP的页面进行布局设计，可以采用准备好的图片来设计。

　　(3)商品海报轮播效果需要借助于动态面板状态自动切换效果来实现。

　　(4)页签切换效果设计需要使用动态面板多个状态的切换显示。

　　(5)购物车中的商品信息可以通过动态面板实现上下滑动效果。

　　底部标签导航设计

　　手机淘宝APP底部标签导航分为5类：首页、微淘、社区、购物车、我的淘宝;把这个标签导航设计成母版，这样设计一次，多个页面可以重复使用。

　　标签导航布局设计

　　具体操作步骤如下：

　　(1)在母版区域新建一个母版“标签导航”，拖动两个矩形组件，一个矩形组件的宽度设置为350,高度设置为554,另一个矩形组件的宽度设置为350,高度设置为50,边框颜色设置为灰色。

　　(2)拖动一个图片组件，用“3-首页导航-选中”图片替换图片组件，选中图片右击转换为动态面板，动态面板的名称为“首页导航显示区”，状态重新命名为“选中”，再新增一个状态“未选中”，进入“未选中”状态，拖动一个图片组件，用“3-首页导航-未选中”图片替换图片组件。

　　(3)拖动一个图片组件，用“4-微淘导航-未选中”图片替换图片组件，’选中图片右击转换为动态面板，动态面板的名称为“微淘导航显示区”，状态重新命名为“未选中”，再新增一个状态“选中”，进入“选中”状态，拖动一个图片组件，用“4-微淘导航-选中”图片替换图片组件。

　　(4)拖动一个图片组件，用“5-社区导航-未选中”图片替换图片组件，选中图片右击转换为动态面板，动态面板的名称为“社区导航显示区”，状态重新命名为“未选中”，再新增一个状态“选中”，进入“选中”状态，拖动一个图片组件，用“5-社区导航-选中”图片替换图片组件。

　　(5)拖动一个图片组件，用“6-购物车-未选中”图片替换图片组件，选中图片右击转换为动态面板，动态面板的名称为“购物车导航显示区”，状态重新命名为“未选中”，再新増一个状态“选中”，进入“选中”状态，拖动一个图片组件，用“6-购物车-选中”图片替换图片组件。

　　(6)拖动一个图片组件，用“7-我的淘宝-未选中”图片替换图片组件，选中图片右击转换为动态面板，动态面板的名称为“我的淘宝导航显示区”，状态重新命名为“未选中”，再新增一个状态“选中”，进入“选中”状态，拖动一个图片组件，用“7-我的淘宝-选中”图片替换图片组件。

　　(7)调整最后一个动态面板的位置，选中这五个动态面板组件让它们横向均匀分布。