Panli 移动触屏站(HTML5)

触屏站 HTML5

需求背景

初看了一下触屏站的文档和设计稿，发现一个严重的问题:
触屏站没有明确的产品定位，也没有仔细考虑过用户的使用场景。

可以看到，除了上方多了一个常驻的返回按钮外，触屏站基本上是尽可能沿袭了 iPhone 版的结构和界面。在界面外包装了一个“iPhone 6”的外壳后，几乎无法一眼看出这是一个网站产品。
这是我意识到前面这两个问题的原因。

关于用户使用场景的问题，可能没人仔细想过这个触屏站在微信里打开之后会怎么样。印象中活动商品都是小编挑选好商品发布到网站上，不是用户自己搜出来的。

微信打开时可能存在的问题

由于微信屏蔽了阿里巴巴一切网络流量和数据，甚至连淘宝都无法打开。
在微信打开时，可能会有很多地方限制住我们的功能:
1. URL 下单功能不可用；
2. 商品库中的商品无法打开；
3. 无法跳转到 App。

把淘宝大多数商品抓下来，并且频繁维护的话，前面两个问题就解决了，但成本非常之高。如果短时间内无法解决，触屏站很有可能既不能 URL 下单也不支持商品库。
无法跳转的问题，目前还在研究之中，也许还是有办法解决的，后面会提到案例。

既然如此，我试着根据自己的理解，规划一下这个移动触屏站产品。

产品定位

1. 面向想试试 Panli 服务的用户(通常为一些广告渠道招来的用户)——注册，看看 Panli 的商品能不能满足自己需要，然后视情况决定是否购买；#轻便化
2. 面向刚更换设备等情况的老用户，临时想在触屏站解决一下问题——登录，找商品下单或查看送货车运单信息；#轻便化
3. 教导新用户如何使用 URL 下单；#新手引导
   

   不仅仅是让用户“能”用 URL 下单

主要改动

1. 打开后的第一个页面，只能选择注册或者登录，注册登录的要求不再像 App 一样嵌入各个流程中；

   • 因为触屏站功能简单，没有商品库也没有团购拼单等频道，用户不注册登录的话几乎没有什么事可以做(想看淘宝的话完全可以直接打开淘宝 App 或者淘宝触屏站)。
   • 原来的触屏站似乎没有具体说明点击哪里的时候要求注册登录，也没有网页版的联合登录流程图。个人认为网页版的直接要求补邮箱的方式更好些。

2. 触屏站可以在微信中打开，但最重要的是引导用户用设备默认浏览器访问，跳出微信；//如果微信中打开我们的触屏站可以使用 URL 下单/打开商品详情/跳转到应用商店或者我们的 App，那么这一条可以无视

3. 这应该是一个很轻便化的产品，用户登录后马上能使用主要功能，甚至连 MyPanli 也可以去掉；
4. 不但不能放弃 URL 下单，我们还应该好好利用网页版的开放性，教导新用户如何使用 URL 下单；
5. 那个看上去像搜索框的文本框，现在除了贴链接以外，还能直接搜索商品，点击。

点击搜索商品后，当前页面先跳转到一个空白页面，页面上提示用户如何复制 URL，然后从新窗口打开移动版淘宝的搜索结果页。具体效果可以参考原型；
点击充值时，当前页面变为提示用户充值完成后刷新，从新窗口打开充值页面，与搜索商品类似。

细节(完善中)

1. 在微信中需要支持自动跳转到应用商店(参考手机版知乎打开 URL Scheme 时)/打开 App；
2. 如果没有必要的话，banner、图片尽量不使用，文字也不需要太多；
3. 按钮最好稍微大一点；
4. 说明好响应式设计；
5. 由于可以判断设备是iPhone/iPad/Android 手机/Android 平板等，引导功能需要分开设计，其他地方统一设计和开发即可。