淘宝webapp产品调研

淘宝webapp调研一、调研范围从页面通用模块的角度来看，淘宝webapp（手机触屏版）分为：首页、商品列表页、商品详情页、用户页、店铺页、分类频道页、主题频道页，共6个页面。下图为淘宝webapp的页面结构图。二、首页与百科、知道等产品不同，首页是淘宝用户访问的起始页面。因此淘宝首页承担了分流的作用，是一个导航页面。淘宝首页导航可分成4类：搜索、常用导航、活动导航、热门频道导航。关于搜索搜索框位置非常明显，点击后进入一个单独的搜索页。这样做的好处是：1、节省首页空间，在搜索页的搜索框上方增加tab，以便选择搜索类型，保持搜索体验与PC端一致。2、搜索建议和搜索历史不会遮挡下方内容，可显示更多条目，且只要滚动页面即可看到下方被键盘遮挡的部分。3、页面结构简单，学习成本低。非首页的搜索框，因为不需要tab选择，则没有采用单独搜索页的形式。常用导航常用导航包括两种：一是根据用户使用最多的功能或页面导航，放在第一屏。使用icon的形式，表意明确，点击感很强。二是常用搜索词。点击直接进入搜索结果页，减少用户输入成本。活动时间轴促销活动是商家的法宝。但在无线端碎片化浏览的情境下，过多的活动信息反而让人眼花缭乱。所以淘宝试用“时间轴”的形式，让用户在一个时间点迅速定位到当前正在进行的活动，并且用定点开始的方式营造“抢拍”的氛围，促成无线端冲动消费。热门频道导航淘宝根据无线端浏览/成交热门度，推出的几个频道页：逛有爱、女人街、男人帮、手机频道、母婴频道。其中，逛有爱、女人街、男人帮都是在PC端没有对应频道的，是为了适应无线端需求而特别设置的。从内容来看，无线端有专门的编辑运营团队。反馈首页底部有“用户反馈”入口，收集用户对webapp的意见建议。收集反馈包括网络类型和浏览器。目前已收集到5792条建议，主要是反馈加载慢、费流量、功能不完整、稳定性差。三、商品详情页商品详情页是淘宝最核心的页面。页面设计得非常精心，从以下几点可以看出：内容筛选PC端商品详情页的信息非常多，无线端展现需要进行精简。哪些内容展现，哪些内容隐藏（折叠或tab），哪些内容去掉？筛选之后，该页面默认展现的内容是：商品大图、商品售卖信息、卖家&促销信息、买家评论、本店推荐商品、搜索框。可以看出，前4项内容足以让买家做出购买决策，第5、6项内容则是当买家放弃购买时提供其他选择，从而防止流失。虽然宝贝详情在购买决策中也非常重要，但是因为详情是由卖家提供的，内容质量和大小都不可控，默认加载这部分信息会造成大量的流量消耗。所以使用tab的方式由用户触发加载。按屏布局第一屏是商品核心内容：大图和名称。第二屏是商品售卖信息和卖家信息。第三屏是评论和宝贝详情。第四屏是推荐商品、搜索框等延伸步长的内容。超长的部分采用折起、分页的形式，以保证布局的规律性。一方面能有效控制页面长度，另一方面给人一种简洁流畅、一目了然的感觉。足见设计师的匠心。三、搜索结果页淘宝的搜索结果页是一个商品列表。但有着强大的筛选、排序功能。其中，分类筛选采用侧入浮层的交互方式，比较新颖。和百科的目录效果类似，但开发成本更小。四、用户个人页和详情页一样，用户个人页对信息进行了精简。只保留了基本个人信息、消息提醒、常用操作。页面长度仅1屏，看起来和原生APP已经非常接近了。通过按屏布局来营造APP体验是淘宝webapp的一大特点。五、公共模块和百度一样，淘宝webapp也可见到“通用组件”。主要的公用模块有：菜单圆盘所有页面左下角都有的“淘”字按钮，可呼出圆盘菜单。这是淘宝webapp最大的交互亮点。Ios下，圆盘打开还会有旋转的动态效果，看起来非常炫。这个稳定的菜单最重要的作用是：稳定的常用功能导航。淘宝为了给页面“减负”而增加了页面数量，也导致页面层级非常深（返回按钮常出现bug就能看出其页面关系的复杂性）。为了避免用户迷失在层层页面中，一个稳定的导航。不过显然设计师发现了在ios4下，“淘”字按钮会随页面一起滚动，从而定位不准。于是将交互方法修改为：页面滚动时隐藏，滚动停止时显示，并且带有淡出效果，巧妙地将bug绕过。同样的手法，还使用在“将淘宝保存到主屏幕”的提示浮层上。菜单圆盘除导航功能外，还兼具消息提醒功能。当有未处理的消息时，“淘”字会变换成相应的icon并跳动几下，圆盘上也会用红色字体标识出消息类型和数量。导航栏淘宝的导航栏不固顶，所以页面不需要页面的局部滚动，也避免了很多性能问题。而之所以可以采用不固顶的方案，有两个原因：一是页面长度短，返回页头成本低；二是导航栏的作用不大，最重要的导航功能均由菜单圆盘承担了。页面页面长度（屏）首页6搜索结果页5商品详情页3~6用户个人页1店铺页8.5主题频道页3.5类目浏览页6导航栏的基本结构是：返回按钮（左）、页面名称（中）、最相关页面导航按钮（右）。当没有上一页时，返回按钮统一显示为“淘宝首页”。页面名称位置，可增加下拉浮层，也可显示为tab。七、其他创新点高清/流畅模式切换。分别满足质量和流量的需求。Metro风格。美观的同时，更重要的是点击方便。选择类操作，直接调用系统拣选器。如翻页时选择页码。Loading过程有橘色动态