好的交互设计是什么样的（一）淘宝、京东篇

这里说的结构是指基于产品目录层次的路径，是一个产品的导航构造，假设我需要购买一款iPhone手机，那么在还没有打开京东前我就知道怎么找到所需要的商品，首先会打开APP切换到“分类”页面，我称它为一级导航，然后点击左侧的“手机数码”，称为二级导航，然后手机数码又分为“热门品牌”、“手机通讯”、“运营商”等三级导航，我们从其中的“热门品牌”中点击其中iPhone，进入商品列表，称之为四级导航，这里展示就是所有iPhone的型号，从其中可以点击我们需要的型号进入到最终商品的页面，虽然这些不是真正的层级目录，对于程序来说是通过一层层标签的筛选，但它所展现给用户的就是一个路径，我们可以很清晰的知道是怎么样从商城进入到准确的商品页面。我们再回到“分类”页面，如果我们把所有导航都当做是标签的话，其实一级导航、二级导航和三级导航是可以相互包含的，我们也可以通过“热门品牌”再进入“手机数码”，但这种导航结构最终也会指向我们需要的商品，但显然这种导航方式不符合用户的认知，最终造成用户的迷惑。

每个APP都有一个主流程，就是这个APP为用户提供某项服务的主线，以京东和淘宝来说，它们的主流程就是用户通过搜索或者分类或者推荐等途径->找到需要的商品->发起购买->填写信息->付款->商家发货->用户确认收货->评价服务，另外还会涉及到售前沟通、售后沟通、退货处理等等可能存在的支线环节，我们只看前期的几个流程，以京东为例，如果我们曾经在京东消费过的情况下，那么我从商品页面选购到支付完成不需要做出任何选择或者填写就可以完成整个步骤，所有需要填写或者选择的信息都存在一个默认的选项，而其他附加服务等不重要的选项都不会出现在主流程中，只有在用户需要时再自行选择。

我其实很喜欢SONY的手机，从我的第一部手机索尼爱立信的经典手机T618开始，一直到iPhone 3G的出现，之间我换了几款手机都是索尼爱立信的，换用iPhone之后我中间也买过几次SONY的安卓机，安卓用起来总不如iPhone流畅，但其实并不是iPhone的性能更好，而是因为iPhone的各种过渡效果减缓了等待的感觉同时营造了一个连贯的视觉。

例：淘宝商品页“更多”按钮动效

像京东的收藏图标，其实仅仅只是图标的变化已经足以让用户确认了收藏行为，但心形的动画更加强了这种反馈，可以把这两种方式想象成现实生活中的触摸键盘和机械键盘的区别，机械键盘的手感远远好于触摸键盘，虽然同样都是点击按钮输入文字，但机械键盘能给人更直接的反馈。

例：京东关注图标动效

淘宝和京东虽然同样是电商，但其实是两种模式，京东类似于一个大超市，虽然也有第三方商家入驻，但其主要业务还是京东自营，而淘宝是一个大卖场，只提供摊位自身并不直接出售商品给用户，京东有自己的一套物流系统，多数情况下商品都是由京东的快递进行配送，而淘宝是每个商家自行配送。再理解了这个前提下，再看京东商品的底栏和淘宝的区别，京东的商品页面缺少了立即购买的按钮，我其实非常不习惯京东的购买方式，京东的商品页面并没有立即购买的功能，只能先加入购物车，然后点击购物车图标进入结算页，但京东之所以这样做也是有它的原因，因为京东有自己的物流系统，如果每个商品都单独支付的话可能就会产生多次的运费。

准确的预判到用户意图，可以为用户带来更贴心的体验，当我们在淘宝的某个商品页面进行截屏操作时，淘宝会判断我们是想把这个商品分享出去，所以自动生成一个淘口令来更方便用户分享。