探究影响视觉效果的设计细节——以拼多多、京东、淘宝首页为例

为了使界面视觉差异更加直观，这里将拼多多，京东，淘宝的界面截图展示如下

接下来，我将从页面布局，icon,字体，主要控件三个方向进行细节分析：

一：页面布局

• 内容：这里发现一个很有意思的点，作为电商产品引流重点之一的猜你喜欢部分，从上至下在页面中最先出现的是拼多多，其次是淘宝，最后是京东，这个顺序恰好与产品带给人的精致感受排序是一致的，这里根据产品定位给出如下分析，供君探讨：
  

1.京东主打自营商品的质量与服务，需要将高品质的服务态度通过大量的运营推荐板块第一时间传达给客户，而拼多多靠的是价格吸引，快速下单，所以页面简单直接。

2.因为猜你喜欢内的商品图片不受平台控制，图片质量的层次不齐容易影响用户对产品格调的判断。京东需要高质量的图片和排版来营造品牌氛围，而拼多多需要量多且杂的商品展现低价大促销的氛围。

• 边距：在页边距，栏边距的选择上，三个产品出奇的一致，页边距均为12，栏边距均为8，以此表现电商产品的热闹感
  

• 分区：在内容分区上，拼多多采用灰色色块进行隔断，让页面信息紧凑，传达出一丝廉价感；淘宝采用卡片分区形式，让页面信息呈现更加明确；京东同样是卡片分区，但是也留有无卡片的信息区域，让信息展现少了拥挤感，也让页面多了一分精致。

二：icon

这里主要以金刚区的icon进行分析：

• 整体

三个产品的icon都是异形图标的样式，与统一外轮廓的图标相比少了几分理智，多了几分喧嚣，让用户更有购买的欲望。

• 大小（这里以图标有色面积为准）：
  
  

拼多多：      京东：         淘宝：

• 间距：

拼多多：

           

 京东：

淘宝：

通过大小和间距的对比发现，京东的图标面积是最小的，间距最大，在同样两行五列的排布下，京东的页面空白区会更多，也使得整个页面看上去很精致。而拼多多与淘宝在图标大小一致的情况下，拼多多的提示文本字号较大，淘宝的icon间距较小，整体感受上更加热闹。

• 颜色：

三个产品金刚区的图标给人的感觉差异还是挺大的，除了图标的细节处理（阴影/高光/渐变）外，图标的固有色也是值得探究的，接下来我以红色相的三个图标为例进行分析：

              

            

在固有色的选取上，拼多多的颜色明度值低，加上没有光影细节，使得图标显得有些老旧平淡。

三：字体

三款产品在字号，字体颜色的处理上没有太大的区别，但是有一个容易忽视的字重，通过字重加颜色加大小来拉开信息层级的方式会更加清晰，页面观感更好，具体表现在淘宝及京东的价格呈现上：

                   

四：主要控件

• 商品推荐区

  
  

拼多多：

京东：

淘宝：

淘宝和京东在排布上大体相同，但京东文字与图片间的间距较大，页面比较有呼吸感，同时渐变色块营销文案的加持让商品更有吸引力。

淘宝在在色彩修饰的色块上又加入了细线进行分割，元素过多，较拥挤。

拼多多纵向排列加灰色色块分割让推荐区的视觉吸引力降低，排布太理性了，没有凸显其价格优势。

• 商品陈列区：

  
  

   

拼多多：

京东：            淘宝：

拼多多商品单列排布，中间用细线进行分割，不像淘宝，京东一样用白底色块分区呈现，虽然视觉感知上不够精致，但这样不加修饰的商品呈现更能传达出商品的廉价，也能促使目标用户下单。

淘宝和京东排布相似，但是淘宝的信息层级较模糊，信息呈现较松散。

总结

总体研究下来，个人认为影响电商类产品气质的细节因素主要有两点：

一：呼吸感，这一般取决于元素之间的间距，间距越大（合理范围内），产品感受会越有品质，间距越小，产品感受会越实惠。

影响间距的因素：

有信息分块方式，如果采用不通栏的色块分区，色块与页面边界间，色块与信息间都存在间距，整体边距相对于通栏来说更大

信息之间的间距，容易忽视的是金刚区或标签栏图标的大小，建议图标排布好后缩小几像素对比感受下。

二：颜色细节，主要表现在颜色亮度饱和度及颜色层次上。

三：第一屏的商品展示，像京东一样将首屏的图片风格控制在运营手中能极大的提高京东的品质感。