随着移动互联网的攻击，网站建设已经不能满足企业的需求。很多有产品的企业已经开始蚕食移动市场，比如微信微信官方账号、微信小程序、移动APP建设、移动网站建设、手机登陆页面建设等。而各种类型中最有代表性的就是电商APP的设计。电商APP是所有APP的精华，其技术性和层次性都高于其他行业产品，所以应该是一个能够用新思维搭建移动APP的

　　任何有建设电子商务网站经验的人都知道，电子商务行业可以大也可以小。大的可以包括我们生活中的所有产品，比如工业品，日用品，新鲜果蔬，甚至新鲜的，小的可以包括我们生活中的一些品类。例如，鞋类加工厂围绕一个品牌进行加工，从而为该品牌设计一个交易平台。

　　电子商务APP是现代日常生活中经常使用的应用。每一次更新和修改都是业务的拓展，是用户需求的满足，是消费趋势的引领和追随。

　　摘要：以淘宝APP为例，分析了电子商务APP的构建，并从重点页面分析了淘宝、JD.COM、苏宁易购三大综合电子商务平台的产品设计，让大家对电子商务APP更加熟悉。

　　一、淘宝改版

　　前段时间淘宝做了一个修改，这个修改是循序渐进的，做了更多的A/B测试。

　　1.主要修订页面

　　从视觉上看，明显去掉了大圆角和线条的卡片，整体风格统一而轻盈。大圆卡沿袭了iOS11的风格(尤其是在App  Store中)，卡让信息更集中，模块感更强；圆角卡本身也比原卡类型增加了更多细节；圆角大的卡，亲和力高，生动活泼，也符合淘宝人的定位。

　　2.个人主页

　　通过新旧版本对比可以看出，88会员和卡券的优先级有所提高，会员的信息更加集中和突出。这也印证了过去两年火热的会员机制。在带来新产品的成本和难度越来越高的情况下，整合老用户可以带来更多的价值。

　　新版卡片非常突出，去掉了大部分线条，用块代替线条，表达层次关系。

　　88会员和最新物流滚动呈现，真正解决了有动态效果的问题，从时间轴上解决了信息量大，空间有限的问题。同时，动态效果增加了用户吸引力。

　　在beta版中，这个页面主要看到两个变化，一个是图标改为原来的填充类型，一个是动态滚动的节奏。

　　Icon个人猜测是因为体积、重要性、位置的问题，线型体积弱于填充型。在“我的淘宝”页面，最重要的信息是“我的订单”，所以需要突出显示。另外，在beta版中，旅行蛙的广告放在My  Order上方的固定广告位，弱化了底部的My  Order，占据了原My  Order的C位。所以beta版考虑了一个更完整的场景(有广告)，从而把图标的样式改成了大填充类型。动态效果滚动是指上面提到的88个会员和最新的物流。在版本7中。7.2，两个卷轴同时进行，而在beta版7。7.8、两个卷轴交错。同时上下滚动会让人迷惑，让人以为这两条信息是相互关联的。

　　3.商店主页

　　这一块的A/B测试。商店页面做了很大的改变，导航也做了很大的调整。新版本把常用操作和重要功能放在最底层，并进行修复；二次导航中的内容允许商家定制自己的选择，以满足不同店铺的需求；与老版本相比，新版本的主次导航层次关系更加清晰。

　　再说说这次的A/B测试，时间比较长(从7。7.2比7。8.2目前目测后应该给出结果为8。0).店铺页面导航的巨大变化会对已经形成习惯的老用户产生一定程度的影响，重新调整学习页面，有点类似于主动抑制(在认知心理学中，是指之前学到的材料对后来学到的材料的维护和回忆的干扰)。新设计的目的是方便用户前期快速学习，中后期快速使用。对于中后期的快速使用，需要一段时间的铺垫才能获得数据。这个测试应该区分不同的用户。简单来说就是测试新老用户对新老版本的学习，以及熟悉新版本后的使用情况。

　　4.物流细节

　　这件作品可以说是风格上的一大转变。可视化用于显示包裹的位置和即将进行的操作，增强了用户的感知(降低了理解的难度)，进一步增强了对商品信息的掌控感。比原文展示生动多了，风格接近等待外卖的订单页面。可视化当然可以展示更多的信息，但是信息传递的速度并不一定比文字快，在用户未经训练的情况下，不同的人对图形会有不同的理解。但是很多用户都是在外卖App的页面上接受过教育的，所以相信这个理解不会太难。但是在后续的优化中还是要逐步突出信息的重点。

　　除了风格上的巨大变化，物流详情页还有场景细分的特点，不同场景有所区别。比如只是物流详情页，页面上突出显示的信息根据不同的场景有所不同，比如：无包裹投递——无包裹投递——快递送达——到达菜鸟站/其他快递点——签收。包裹收齐后突出快递信息，配送时突出调度员信息。

　　与场景细分区分开来，让用户得到目前最需要的信息，无疑是一个很好的起点。但是从上图来看，信息有快递信息等三种样式，而且位置不统一。如果用户在不同的店铺买了几件商品，快递员打电话说我是XX快递，快递员给你放在某个地方。这时候想知道是什么货，就打开物流明细，找快递信息，发现快递信息不在原地图下。搜了一会，发现放在快递下面了。这个例子意味着，当你在不寻常的情况下获得一些信息时，你可能需要支付额外的学习成本。但是，在7的测试版本中。7.8、快递信息的样式减少为两种，这是一种妥协。在我看来，场景细分的出发点是好的，但风格和位置这两点至少有一点是固定的，这样既不会过多增加用户的学习成本，又能覆盖一些概率小的场景。

　　5.动力效应

　　这两张图是店铺页面顶部的动态效果。当用户滑下页面时，顶部的信息会发生变化，这可以看作是一种细分场景。通过动态效果，过渡很完美，过渡的流畅感会让用户对平台感觉好一点。

　　解决我的淘宝页面动态效果的问题，上面已经提到了。右边有好货页面。当用户滑动页面时，《攻略推荐》栏目中的图片具有依次展示、吸引眼球、给人一点惊喜的效果。

　　总结起来，淘宝改版的设计角度可以概括为：设计遵循目标，品牌和成员突出，设计趋势跟随，场景细分，视觉展示和动态效果流畅。另外，淘宝对设计和测试的态度是设计解决实际问题，设计需要验证，测试需要严谨。

　　二、淘宝等竞争产品

　　这里只选择了Tesco和苏宁易购与淘宝在几个重点页面进行对比。这里主要从视觉的角度来说问题。这里几乎没有涉及业务、跳页等问题。

　　1.主页

　　淘宝：整体看起来伤的不算严重，也不使用卡式。

　　JD。COM:淘宝改版后不久也改版上线了。这里第一屏图标的卡牌类型比较生硬，为了卡牌，让卡牌好看。JD.COM斯派克的整洁度不高，有些是左偏右。“日常购物”这种极具装饰性的风格，也与整体紧凑的卡牌风格不符。“东家小院”地板上的小标题颜色跳跃，有很大的篡夺主人角色的感觉。

　　苏宁易购：还没修改。这层的均匀度不高，和JD.COM差不多。同时又缺乏层次感，有些是渐变的，很不一致。“购物实惠”楼层视觉不平衡，信息水平很成问题。

　　2.搜索结果页面

　　风格：淘宝采用无框设计，省略中间分割线，产品图片尺寸较大；从左到右，画面尺寸越来越小，分割线从细到粗。淘宝和JD.COM的整体效果比易购好。

　　标签：在标签的处理上，易买标签非常强势，在页面上脱颖而出；JD。COM的标签弱化了，和淘宝差不多，但是完全不同的标签风格都一样(穗和自营)，让人觉得有点迷茫。

　　平面布局：淘宝和JD.COM无重伤，和谐，但易购图片和文字大小比例不协调，图片和线框在视觉效果或像素上不对齐；IPhone  X不适合在网店底部。3.分类页面

　　风格：淘宝用明显的卡去除线条；JD.COM也用牌，牌感弱，是为了团结；电商还是线框歧视，整体歧视效果不好。

　　品牌：淘宝和JD.COM在文字处理上用的颜色不多，而容易买到的颜色用的非常多，削弱了品牌感，没有带来任何优势。

　　4.产品详细信息页面

　　我只从节奏的角度看这一页。上图已经标出了每页的节奏给我的感觉。淘宝整体节奏感较好，严重性适中；JD.COM和一狗在节奏感上都存在一些问题。如果重节奏之间没有轻节奏，他们就会缺乏呼吸的感觉。

　　5.购物手推车

　　风格效果：淘宝不使用卡式；JD.COM用卡，这导致了很多空白，但没有带来任何优势。苏宁易购略显拥挤，没有亮点。

　　平面布局：淘宝整体很和谐；JD.COM图片全部使用白色背景，很好的保持了统一性；JD.COM使用了很多设计细节，如字体大小、粗细、字体、颜色等。但整体效果不理想，略显琐碎凌乱；苏宁易购的文字大小和间距不协调，带来拥堵。

　　其他细节：JD.COM标签不同于搜索结果页面的弱化，而是非常强化，导致视觉焦点混乱，按钮小，操作不方便；易买标签处理比JD.COM更收敛；电子商务底部的标签与其他部分没有区别。浮框像广告，效果不好。数字修改框笔画太硬，比例不协调。

　　6.个人主页

　　整体风格：淘宝和Tesco都是明牌，苏宁易购是广义的牌。

　　这里主要说一下容易购买的问题：《我的特别秀》的大块不平衡色块出现在第一屏是非常不合适的，有些图标没有效果，内容上也有一些bug。

　　7.顺序

　　淘宝和JD.COM的订单页面个人认为没什么严重的，淘宝有改编的问题。苏宁易购有很多问题，首先是顶部“常购单”没有bug，然后图片不符合购物车等地方的款式，商品之间的分割线有时不存在，间距有问题。

　　三.总结

　　电商APP设计不同于网站建设。区别在于电商APP设计最终还是在UI设计上。跟随设计潮流，统一、排版和谐等设计元素是其设计优势。设计风格仅次于设计目标。当设计风格不能很好的满足本页面的设计目标时，建议重点关注设计目标。强行使用这种风格，得不偿失。

　　广州建站公司建议开发电商app的用户在设计app时，可以围绕自己的需求和意愿，选择如何设计好app，为我们做出从PC到手机的进化，将电商网站建设推向移动app建设。