本文通过对于国内常用电商APP的分析，从以下三个部分阐述，在相同的产品框架下，不同的UI设计对用户体验造成的不同影响。阅读大概需要十五分钟。

1、用户专注目标，但好的UI设计让人忘掉搜索。

2、各类电商APP对于分类功能的UI处理。

3、文字、颜色对用户注意力的影响。

一、用户专注目标，但好的UI会引导用户忘掉直接搜索。

人人都需要购物，每个互联网公司都需要在网上卖货，如果说手机桌面上有什么APP是最不能删除的，可能就是购物APP了。既然现实生活中有那么多的实体购物MALL、小夜市、大超市，为什么我们还是需要购物APP？

我个人认为最重要的原因，就是因为网购与购物实体店相比更方便。

这种方便主要体现在：

1、启动的方便

购物更加快捷，可能你到最近的实体店要走10分钟，但是现在你躺在家里沙发上就可以买买买。

2、选择的方便

如果今天是想买鞋，只需要用搜索框搜索鞋，各种各样的鞋跃然屏上。如果到实体店，可能只能看到一家鞋店，再找一家又得走上5公里。

3、购物过程的方便

不用一进门就被人饥渴的眼光包围，再被导购小姐跟着到处走，在网上购物遇到问题，只需要点点客服小按钮，很轻松自在有木有。

4、售后的方便

电商以平台作为担保，还有评价系统，比起实体店付了钱就不认账，维权跑断腿的情况，确实方便很多。

既然用户选择网购的原因是因为方便（懒），（用户在进入app的时候，通常是带着目的，比如想买家电）当APP界面设计不能很快的引导用户找到心中所想的时候，我们就会使用方便的方法：搜索功能。

但是逛过商场的人都知道，商场的室内设计虽然给你设置了直升电梯，但是都藏在幽暗的拐角处，主要的购物路线可谓九曲十八弯，目的就是让用户在一门心思滴查找自己心中所想的同时，也能在这种环线中顺便买点别的，增加购买率。这个理论套用到app设计上，我们可以得到，好的电商app设计最好让用户忘掉搜索功能。

二、相同的产品结构，不同的UI处理，会带来不同的用户体验。

 1、对于分类ICON的处理

对比下京东和淘宝首页视觉设计我们可以发现，他们的产品框架几乎一致：搜索导航栏+banner+活动+分类icon+头条+板块，然而由于视觉设计的不同，却让两个页面对我这个用户造成的感觉有了些许不同！想一想，进入下面哪个页面的设计，更会让你有查看分类icon的欲望呢？

我个人更喜欢京东的页面ui，整个页面东西虽多，却暗暗滴分层明确，因此不显得杂乱。

左图为京东页面，从颜色就可以看出整个页面分为3个层次，除此之外，每层统一的圆角倒角也强化了这种层次感，所以页面内容虽然多，但是却不杂乱，视觉的归纳，让复杂内容井井有条。在淘宝页面，虽然设计师使用了多种语言，直角、弧形、三角形、破图、阴影，却不仅没有让本来繁杂的产品信息层次更加清晰，反而加深了混乱。

京东首屏的视觉分层

其中第二层的颜色使用背景颜色最浅，浅色在视觉上是靠前，这样的视觉处理方法可以看出来，第二层的内容是设计师想要向我们展示的重点。

同时，设计师将分类图标九宫格放在页面中线偏上部分（人眼视觉重点位置）。

由此可见，用户进入京东页面首屏，视觉逻辑应该是 : 整个页面——第二层——分类。

由此，视觉设计师通过视觉语言将庞杂的产品信息分类有序，达到让用户关注分类的目的。

反观淘宝的首页ui设计，似乎也有这样的分层处理,但是却由于视觉语言的不统一，不仅没有让这种层次变得分明，反而加深了混乱。

2、总分类导航的处理

几乎所有的电商都有整个网站的分类导航功能，就仿佛进入一个大楼首先看到的大楼平面沙盘，它让用户能全面的了解应用的所有商品，并按照自己的意愿，选择分类去进入。它被各类电商放在页面不同的位置，主要来说主要分为三个位置：与子分类放在一起、页面左上角、标签栏。

对于滑动分类的设计，我个人更喜欢天猫国际的方式，因为当分类数目比较多的时候，用户要不断滑动才能看到后面的内容，无疑，这是不方便的。

天猫将滑动条做到了100px,点击范围不再像严选（70px）那样局促，而且在视觉上加粗了字体，让分类更显眼，加大了滑动色块，使得滑动更明确。并且设计师将总体分类和滑动分类归纳在一起，设想一下，用户可能刚在想，分类好多，不想滑动的时候，正好看到有总分类的导航按钮，归纳相似功能的UI设计，减轻了用户负担，无疑使总分类导航拥有更多的点击率。

而针对没有设置滑块分类的APP，我个人比较推荐蘑菇街式的：将总分类导航放在页面的最左上角的方式：因为一张页面的左上角是视觉的中心，所以，每个进入页面的人都可以看到，但是由于手机大部分是右手单手手持，所以点击页面的左上角并不是特别的方便（尤其在这个大屏横行的年代），这种特别显眼，又不太方便摸得着的特殊位置，让有了解全局需求的用户无论如何也知道在哪里点击，没有观看全体产品欲望的人（比如我），就可以选择不点击。

所以，将总分类导航放在页面左上角，既不占用手指容易点击的黄金位置，又能使所有用户都能看的到。

三、文字、颜色对用户视觉注意力的影响。

1、嘈杂的文字

周围环境的视觉噪声能够干扰用户对文字的识别，再来看看万能的淘宝与京东的对比。

淘宝

京东

可以看到淘宝的图标设计背景更加的复杂，颜色更多，背景图形更多，因此真正要表达的内容反而被弱化了，加深了用户的识别难度。来看京东，图标背景颜色虽然也有变化，但是渐变的很克制，没有多余的图形，图标内容呈现统一的克制的渐变的白色，一层阴影将底与面分开，让人看着一目了然，简单而有细节。

2、使用低频颜色呈现重点

电商应用可能是所有app里面用色用的最多的了，当然通过互联网买卖商品是注意力经济，注意力在哪里钱就在哪里，也许我们可以通过电商app对颜色的选择，看到色彩对于引导用户注意力的作用。

色相环有无数种颜色，为何几乎所有电商都换选上图红框的颜色范围？而很少选择由蓝到绿部分的颜色（特立独行的网易考拉除外）？

因为人眼对于低频颜色（红-黄）最为敏感，用作banner, 图标都会在页面第一时间进入人的视觉，而相反，紫色—蓝色—绿色视觉偏于后退，克制。我想大部分电商都不太希望他们的用户选择克制。

但是如果整个页面全部用同一个色系，又会显得无聊而层次单一，巧妙的对比、互补色运用，让页面更加有趣而吸引。

看看京东的万红丛中一点绿，反而突出了绿的内容。

好了，今天这篇文章就写到这里了，作为浅显的用户体验分析抛砖引玉，其中一些理论参考《认知与设计理解UI设计准则》《多设备时代的UI设计法则》《简约至上交互式设计四策略》，这些书带给我很多ui设计方面的启发，下次有机会我们再来谈一谈。

最后，如果大家有什么想法，欢迎给我留言讨论，或者私信我，谢谢观看么么哒。