UI/UE | 产品体验日记 04（电商软件专题）

如何让自己的产品在保证基本的可用性和易用性的同时，还能让界面看起来柔和、更富有亲和力？一个产品能留住用户的虽然是内容本身的质量与吸引力，但一个小小的细节却能够阻止用户的流失，成为内容转化的最后一道防线，让人眼前一亮，值得借鉴。

体验目录：

01.【淘宝】循序渐进，首页的商品交错式排序

02.【淘宝】优秀的内容归类！淘宝商品内页结构解析

03.【京东】看小视频购物，京东的逛一逛板块

04.【京东】社交才是最强的用户粘度，京东逛一逛-部落板块

05.【京东】操作小彩蛋！京东首页下滑抽屉页

06.【淘宝】淘宝的小程序！淘宝首页抽屉页设计解析

07.【58到家】图片比图标内容传达更清晰，58到家的金刚区实物图标

08.【58到家，京东】每日签到活动，提高用户日活量

09.【唯品会】Banner瀑布流设计，保持浏览新鲜感！

01.【淘宝】循序渐进，首页的商品交错式排序

产品体验：

几年来，各大电商平台巨头如京东，淘宝，唯品会都开始使用了商品交错式排序，这样做会让用户在下滑浏览时，视觉体验感受更自然，视觉体验更佳

设计思考：

为什么会觉得错位排序的设计，浏览起来视觉会更舒服呢？是因为交错式排列，会让用户产生“阶梯式视觉体验”，会让视觉体验更有阶梯感，层次感

02.【淘宝】优秀的内容归类！淘宝商品内页结构解析

产品体验：

淘宝的商品内页是各大电商平台参考的对象，因为淘宝商品内页将许多繁杂的数据，总结分类得非常出色，淘宝的商品内页主要分为几个部分

按从上到下顺序分别是：（产品主图 - 产品信息 - 评论 - 卖家店铺入口 - 产品详情页 - 底部推荐栏）

设计思考：

产品主图紧跟着产品信息，这设计逻辑很好理解，用户看中这个商品的视觉，才会有兴趣去了解产品的价格，发货地，产品规格等信息。

淘宝处理得真正出色的是淘宝的评论区，淘宝的评论区分为4个大块，分别是（评论类型标签，评论区，买家图片区，问大家提问区），这四个分区大大的便利了用户的使用，增加了用户查看评论时的视觉效率，也为消除用户购买顾虑作出了重大贡献。评论类型标签可以第一时间总结大家对此商品的评价，评论区可以让真正关心商品质量的用户点击进去详细了解，买家秀是一个专门让买家上传产品图片的区域，可以增加商品评价的真实性。问大家板块，这个板块能最大程度解答用户关心的问题，只有差评的商品，用户不会买，但是只有好评的商品，用户也不敢买，只有用户在对产品优劣有充分了解后，才会决心下单

再往下，就是卖家的店铺入口，为店家的商品提供更高的曝光率，对于一些大牌厂商，用户可以更便捷地浏览该大牌厂商的商品，属于是用户和商家共赢互利的设计案例了

往下是产品详情页，是产品的灵魂，也是产品的形象展示，详情页的好坏，甚至影响用户是否购买此商品

底部是推荐栏，会推荐相关的商品，瀑布流的浏览，可以增加用户的使用时长

03.【京东】看小视频购物，京东的逛一逛板块

产品体验：

京东在界面Tap栏中间，新增了一个【逛一逛】页，这个界面的主要功能是利用各种小视频，推荐宣传商品，本质上也仍然保留了京东作为一个购物平台的本分，在原有的购物体验中，把图片变成了一个个小视屏，一方面，是增加了用户在软件中的使用时间。另一方面，可以为一些如（手办，球鞋，电器）等注重外观的商品通过视频，得到更充分的展示

设计思考：
【一些注重外观展示的商品】可以通过视频得到更充分的展示

相比起干巴巴的图片，小视频的360°展示，更能让消费者对产品外形进行了解，从而产生购买欲望，以及消除购买顾虑，所以京东才会单独推出了一个【逛一逛】板块，本意就是把一些商品相关的小视频，通过这个界面进行整合，但是此功能对于转化率的提升有多大，目前就不得而知了

04. 【京东】社交才是最强的用户粘度，京东逛一逛-部落板块

产品体验：

京东逛一逛-部落板块，这一个板块主要是负责平台的交流社区，把志同道合的用户集合在一起，共同交流，互相推荐商品，从而提升平台中产品成交量.

设计思考：

京东作为一个电商平台，为什么要费心思建立一个社区社交系统呢？和支付宝对聊天功能一般，现在的APP市场都进入了“万物皆社交“的时代，因为对一个用户来说，最大的使用粘度，就是在一个APP中，有一群志同道合的好友，社交系统是最好，也是最原生的增加用户对平台粘度的方式

05.【京东】操作小彩蛋！京东首页下滑抽屉页

产品体验：

京东的首页中，用户下滑可以看到京东的隐藏抽屉页，这里主要展示京东APP的内部促销活动，给予用户一些趣味性的操作体验。

设计思考：

如何在有限的空间内，放入更多的内容？京东也许给出了答案，假如首页位置不够用，不妨选择设计一个下滑抽屉页，让用户拥有操作趣味感的同时，又能承载更多内容，但是需要注意的是，设计一个抽屉页来展示活动，这种方式太过于隐蔽，可能会有大批用户不知情的情况，这也是设计师需要思考的

06.【淘宝】淘宝的小程序！淘宝首页抽屉页设计解析

产品体验：

淘宝首页中，也有下拉抽屉页的设计，但是和京东的产品逻辑不同，京东的抽屉页是宣传活动，淘宝的抽屉页则是“工具箱”，淘宝的抽屉页的交互逻辑更像微信的下拉页，内设有许多快捷入口，和频道。是为了方便用户使用而设计的

设计思考：

想知道自己的快递现在到哪了吗？不用反复点击跳转，直接在首页中下划抽屉页吧！相比起京东的抽屉页用来宣传活动，淘宝的工具箱抽屉页显得更加为用户思考，是真正的为用户思考，解决用户的使用痛点。

我们在未来的产品设计中，我们不妨将用户常用的功能，或者比较重要的数据，放在首页二楼抽屉页，方便用户操作，提高用户使用体验的同时，也是在培养用户对产品的忠诚度

07.【58到家】图片比图标内容传达更清晰，58到家的金刚区实物图标

产品体验：

在第一次打开58到家这APP的时候，进入眼帘的金刚区图标给人一种独特的新奇感，但不得不否认，这种新奇感并没有牺牲视觉传达效率，反而感觉比用传统图标的传达效率要高不少。

设计思考：
实物图标，应该是从美团外卖开始兴起的，大家越来越发现，实物图片才是视觉传达效率最高的图标。在未来产品设计中，如果遇到一些比较具象的功能模块，不妨尝试使用实物图标，在让用户产生视觉新奇感的同时，也能提高自己APP的视觉传达效率，还能节省设计师的设计时间，一举多得。

08.【58到家，京东】每日签到活动，提高用户日活量

产品体验：

在各大平台中，都能见到“每日签到，赢取积分”的界面，其积分可以在平台内兑换一些优惠活动，对于一些常常使用平台，或者看中其签到奖励的用户还是有其吸引力的。

设计思考：

每日签到的活动，用户为了获取利益 - 每日上线点击签到 这短短的用户行为过程，可以延伸出许多变现可能
比如说用户点击签到后，可能会在首页中浏览一番，看中了心仪的产品，从而点击下单。或者，新用户被优惠吸引，点击每日签到的过程中，培养了每天打开此软件的习惯，从而提高了用户粘度与用户日活量。

简单的每日签到活动，不仅仅可以提高一些常用平台的用户的上线率。假如优惠力度够大，还能吸引许多本就不常用平台的用户上线，从而提升平台的用户量和平台的用户粘度，每日活跃度。这一个小小的签到功能，可谓是一举多得！

09. 【唯品会】Banner瀑布流设计，保持浏览新鲜感！

产品体验：

初次使用唯品会，在首页中就给我一种耳目一新的感觉，唯品会的产品展示，使用的不是淘宝，京东那种常见的商品错位排序风格，而是一张张亮眼的Banner 形成瀑布流，这种新奇的使用体验，让我不知不觉连续滑动了好久也毫不自知。

设计思考：
牺牲了展示效率，但却换来了耳目一新，不觉疲倦的浏览体验。由于产品定位的差异，唯品会做了一次聪明的设计选择！因为不同于淘宝京东的产品多元化，唯品会的产品多是衣服，鞋子等日用品，假如和淘宝一样，使用交错式排列，一件件衣服展示在用户眼前，用户不仅会觉得眼花缭乱，还会因为产品的单一性，觉得枯燥乏味。

而Banner瀑布流的展示方法，很好规避了这一问题，因为每个Banner都会经过精心的差异化设计，保证视觉差异性的同时，也能很好的展示商品特点。几百张精美的Banner，还能让用户“保持浏览新鲜感”。

所以，在未来我们设计APP时，遇到平台商品单一的情况，不要过于迷信淘宝和京东的商品排序方式，可以参考一下唯品会的Banner瀑布流展示。