手机 SEM 广告引导页 H5

SEM HTML5 广告 A-运营线

需求背景

市场部 @Will 希望能够制作一个网页，让 Google/百度 的移动平台广告点击后进入到此页面。
页面并非直接下载 App，而是注册页面，注册完成后引导用户下载 App，因为这样可以统计到广告带来用户的转化效果。

点击这里下载原型。

最终页面

http://passport.panli.com/h5/NewRegister/Register.aspx
http://passport.panli.com/h5/NewRegister/RegisterSucceed.aspx
http://www.panli.com/Special/m/20150907/advertisement.aspx
http://www.panli.com/Special/m/20150907/service.aspx

介绍页

打开原型后，点击百度页面最上面的广告即可进入。

查看原图

下一步按钮

在浏览器底部工具栏上面，会浮动着一个现在注册按钮，点击之后出现阴影层以及一个转动的网络活动指示器，下一个页面加载完成之前一直保持显示。

注册页

界面元素

• App icon
• 一句话简介: “随时随地淘国货”
• Facebook 账号登录按钮，走 App 的不直接补邮箱的流程

• 没有异常的话，跳转到注册完成页
• 出现异常的话，警告框提示“登录失败，请用邮箱注册”

• 用户名表单
• 邮箱表单
• 密码表单(暗文，密码类型文本框)

当用户点击表单文本框/文本框获得焦点时，页面自动向上移动(506px 左右，@2X 下的尺寸)，使得弹出的软键盘不会覆盖掉表单文本框

• 注册 按钮

• 三个注册表单都填写的情况下，点击后会出现一个转圈的活动指示器，等待注册完成页加载完成后跳转
• 三个注册表单有任意一项未填写的情况下，点击后弹出警告框，请完善注册信息
• 用户名 / E-mail / 密码 填写不符合要求(与主站注册一致)时，弹出网页警告框。同时有多种不符合要求的情况出现时，优先提示“用户名”，其次 E-mail，最后密码。提示文字如下图:
  

• 服务条款超链接————点击可跳转到哦啊服务条款页面，视觉上使用通用超链接样式
• App 逛街界面(无状态栏和底部 tab bar)作为背景，上面覆盖一层蒙版层

服务条款页面

文本采用线上环境主站中http://service.panli.com/Help/Detail/67.html的内容。

注册完成页

注册完成后的文字：

恭喜你已经完成注册，现在可以开始您的购物之旅！
下载Panli手机应用可以随时随地查看代购进程，现在就去下载吧！

请注意英文单词两边的空格。

两个 App 下载按钮:

• iOS 版下载
• Android 版下载

相比图中增加“版”字。

统计代码

• 所有页面加上 Google Analytics 代码
• 注册完成页加上 Adwords 转化代码(现在主站的注册完成页上有)