电商原型设计：“天猫商城”高保真原型.pdf资源-CSDN文库

需积分: 16 187 浏览量 2020-05-07 17:40:04 上传评论 2 收藏 2.42MB PDF 举报

资源推荐

资源详情

资源评论

1

第 9 章电商原型设计：“天猫商城” 高保真原型

“天猫商城”网站是网上购物平台，每天都会被很多人使用，下面通过制作“天猫商城”

的高保真原型，来熟悉电商原型设计过程中经常会碰到交互效果以及掌握各种效果的制作过

程，如图 9.1、9.2 所示。

图 9.1 “天猫商城”登录

图 9.2 “天猫商城”首页

2

9.1 需求描述

“天猫商城”原型设计需要完成如下需求：

（1）“天猫商城”登录功能，当登录名未输入时，提示“请输入账户名和密码”；当

密码未输入时，提示“请输入密码”；当登录名和密码都输入时，登录到“天猫商城”，并

把登录名显示在“天猫商城”首页。

（2）“天猫商城”首页导航菜单手风琴效果制作，根据不同的导航菜单名称，显示不

同的子菜单。

（3）“天猫商城”首页里的“精选市场”菜单里的图片幻灯片播放效果。

（4）“天猫商城”的搜索栏随滚动条上下滚动效果。

9.2 设计思路

完成“天猫商城”原型设计的需求，需要使用如下知识点：

（1）“天猫商城”商城的登录功能，需要设置不同的条件显示不同的提示信息，需要

用到动态面板组件；把登录名带到首页里需要使用全局变量。

（2）制作菜单手风琴效果，需要设置给菜单添加动态面板，动态面板里新增三种状态，

一是默认状态、而是鼠标移入时状态、三是鼠标移出时状态，添加鼠标移入时和鼠标移出时

用例，显示不同的二级菜单手风琴效果。

（3）制作幻灯片轮播效果，需要设置动态面板状态自动切换，从而实现轮播效果。

（4）制作搜索栏随滚动条上下滚动效果，需要添加窗口滚动时用例，新增窗口高度作

为条件，根据窗口高度触发相应的操作。

9.3 准备工作

在制作原型之前，我们需要在“天猫商城”网站上截取如下图片，图片存放在第 9 章里

的天猫商城图片文件夹里。

（1）截取“登录”页面，作为登录页面的背景图；

（2）截取“登录”页面的登录按钮图片；

（3）截取用户名为空、密码为空的提示信息；

（3）截取“首页”灰色导航信息，分为三部分截取，命名为顶部信息 1、顶部信息 2

和顶部信息 3；

（4）截取滚动搜索框图片；

（5）截取幻灯片轮播的序号背景，分为黑色和红色背景图；

（6）截取精选市场二级菜单和女装内衣二级菜单图片；

（7）截取精选市场和女装内衣的一级菜单图片，包括默认时图片、鼠标移入时图片、

鼠标移出时图片；

（8）截取精选市场菜单下幻灯轮播的图片；

（9）截取女装内衣菜单下的内容；

（10）截取搜索框里的放大镜图片；

剩余20页未读，继续阅读

内容反馈

ghyu_jx

粉丝: 0
资源: 22

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip