海外电商UI设计视觉风格探索

前段时间公司启动了跨境电商业务，虽然之前已经有过国内电商产品的设计经验，但是因为是面向海外用户，就需要全面了解海外电商产品，设计出海外用户习惯的UI视觉风格。

我从美国区APPstore排名前十电商APP中选取排名最靠前的三个综合类电商APP，分别是亚马逊、沃尔玛，etsy；与国内大家熟知的淘宝，拼多多做对比；仅从UI布局和视觉表现进行分析对比，我总结3点最明显的风格差异：

1 多样化的品牌色以及字母形式的icon

我们可以看到，国内电商品牌色大多使用橙色红色等邻近色，比较符合促销的购物氛围感，而海外电商产品品牌色较为多样化，并善于使用对比色作为辅助色，这样设计更加突出产品的差异化；

中国传统文化普遍认为红色会更有过节喜庆的氛围，每年双十一都会看到大量红紫色促销banner；而在海外用户眼里，红色只不过是一个较为醒目的色值而已，所以在海外电商产品设定主色调的时候，不妨多一些更为大胆的尝试。

除了配色，国内电商产品大都有自己的品牌IP形象，比如天猫的黑猫，京东的电子狗，苏宁的狮子，也是强化品牌的一大关键因素，这些形象也大多会用在应用icon上面，而海外电商产品icon多为抽象图形或英文字母居多，所以海外电商产品能够给人记住的点就在品牌色加上特殊的品牌图形。

2 线性排版结构和图片堆叠

在UI设计中，只要把首页定稿了，那整个APP的视觉规范也就基本确定了，下面分别是四款APP的首页对比图：

我看到的第一感受就是：

国内电商：复杂有序

海外电商：简单轻便

电商产品首页最主要的功能就是流量分发，就是让不同用户都能在首页找到自己想去的地方然后点击进入不同的入口。

通过四个产品的首页对比发现，淘宝和拼多多都是使用模块化信息布局，而且把功能集中在首屏展示，充分利用了首屏空间，让用户在进入APP后不用滑动就能进入自己想去的某个功能，并且都使用了彩色化的图标作为每个模块的入口展示；

对比walmart和etsy, 它们都使用线性布局用户可以很自然的向下滑动获取更多信息，每屏所展示的模块控制在2个左右，模块入口的展示方式多为图片，且多用线条分割进行模块区分。

3 大间距小字号

除了首页布局的差异化，我又对比其他以文字为主的页面布局：

经过我精确的测量对比，发现淘宝的个人中心和购物车页面所用最多的字号是14-16pt，大标题字号为22pt; 而walmart的购物车页面， 所用最多的字号是10-12pt，最大标题字号才是12pt, 而Etsy购物车页面的最大字号用到了14pt。

除此之外，淘宝的模块间距在8-12pt；walmart的模块间距在20-32pt；Etsy的模块间距在14-24pt;

由此得出结论，海外电商UI设计规范中比较常用小字号和大间距的结合，这样的组合也是页面看起来简洁干净的一大因素。

4 写在最后

以上只是针对产品的视觉层面进行了简单的分析，当然APP的设计规范很大程度上受APP功能和信息架构的影响；

虽然都是综合类电商产品，国内的淘宝拼多多，除了核心的购物场景外，额外增加了许多想要留住用户的运营活动和玩法；而海外电商产品就是单一的购物，这也在一定程度上影响了UI设计排版。

希望这篇文章能够给正在做跨境电商或者以后准备做跨境电商的设计师们一点点不一样的思考。