手机淘宝“首页”模块是显示商品信息的页面，用户进来第一个访问的页面就是首页，进入首页之后，可以检索自己想要的商品信息，也可以按淘宝的分类查找相应的商品。

　　“首页”页面内容布局设计

　　“首页”大致可以分为几部分：最上面是状态栏，可以进行扫一扫，可以进行商品检索，可以进行拍照检索商品;接着是商品海报轮播的区域，它放置了八张商品广告，自动轮播显示;再往下就是九宫格导航，把与淘宝相关的内容展现出来;淘宝头条是展示淘宝的一些新闻信息;最后是商品展示信息;“首页”模块展示内容很多，页面很长，在这种情况下，就要求设计者在设计页面时，突出显示重点，页面简洁大方。下面开始设计“首页”的布局，如图6.24所示，具体操作步骤如下。

　　(1)拖动一个图片组件，用“1-首页状态栏”图片替换图片组件，坐标位置设置为(0,0);拖动一个动态面板组件，宽度设置为350,高度设置为506,动态面板的名称为“首页屏幕显示区”，状态名称修改为“首页屏幕”。

　　(2)进入“首页屏幕”状态，拖动一个动态面板组件，宽度设置为350,高度设置为620,坐标位置设置为(0,0);动态面板的名称为“首页内容显示区”，状态名称修改为“首页内容”。

　　3)进入“首页内容”状态，拖动一个动态面板组件，宽度设置为350,高度设置为109,坐标位置设置为(0,0);动态面板的名称为“商品海报显示区”，新建八个状态。

　　(4)手机淘宝APP高保真原型设计

　　将“2-轮播-1”、“2-轮播-2”、“2-轮播-3”、“2-轮播-4”、“2-轮播-5”、“2-轮播-6”、“2-轮播-7”、“2-轮播-8”图片分别复制到“商品海报显示区”动态面板的各个状态中，坐标位置都设置为(0,0)。

　　(5)将“3-首页-内容”图片复制到“首页内容”状态，坐标位置设置为(0,109)，作为首页的内容。剩下的页面内容就不再详细介绍设计的过程了，由于页面内容很多，只选取了一部分简单介绍。