in UI

双 11 未到,胜负已出 Winner of 11.11 Shopping War

眼看 11 月 11 日就要到了,这算是无节假日的 11 月唯一的一个节日了。电商大佬们想尽办法弄出点摩擦和声响,用抢注双十一商标的噱头,拉拢着视线。快递公司们盘算着,双 十一期间会有五亿件快递,每件涨一分钱,那就…… 当当也赶紧更换 Logo 以摆脱书生气。每一个电商的首页都默默地吆喝着自己的货,有的井然有序,有的绚丽多彩,而有的却吆喝得不那么漂亮。大促打响之前,单从淘宝京东苏宁当当的首页 UI 上,基本上就看出了胜负。

导航的淡化与回归

顶部横向导航的在淘宝首页已经淡化成无底色的一组链接,原本夺目的橙色让给了各个图标和按钮,更绚丽的色彩留给了轮播图和各品牌 Logo。左侧的纵向导航冠以“淘宝特色服务”,以主题市场、特色购物和优惠促销分为三块,原来鼠标划过弹出大片的子分类消失了,而是点击“更多”跳转锚点到细类区块。很多消费者进入首页,多数习惯是一边滚动一边看,而弹出菜单需要鼠标划过才能显示,这样就增加了鼠标来回的路线和页面滚动时停顿的次数,同时触屏设备没有鼠标划过效果。看似淘宝的导航不酷了,但赢得的是更简单更直观的浏览体验。

其它电商依然保留头部导航的底色,但百分百通栏宽度的做法逐渐弃用。一是,在超大屏下看,导航两侧会显得异常突兀;二是,某些浮动元素叠加时,视觉混乱。

nav-comparison

首页图片的用量

淘宝最少,京东其次,再次苏宁和当当。进入当当首页,从第二屏开始一直到第七、八屏,扑面而来的是满屏的标注着“抢抢抢”(抢购)和“杀杀杀”(秒杀)的商品图片。有人看着热闹,有人看了想逃。恍惚间,这是一张电子版的促销单页吗?我们理解当当急切地表达“我们不光卖书”的心情,但请稍稍高大上一些。从 1F 到 11F,图片的布局样式多达五六种,用户的视觉惯性不断地被调整着,让人很难沉下心连贯地看下去。苏宁首页用的图片也不少,但每个主题区块的布局是协调一致的,视觉的重点始终放在左侧和上部,用户滚动到下一屏后,可以很快地定位哪些是主推。

screenshot-homepage-taobaoscreenshot-homepage-jdscreenshot-homepage-suningscreenshot-homepage-dangdang

整体布局的主线

不得不再提黄金分割点。我们拍照片的时候,有三分法,焦点的位置基本就是黄金分割点的位置,这样拍出的照片才有文艺范儿。放到网页的布局中,从哪里做大的分割才能恰到好处,窄处不挤,宽处不疏?淘宝首页细类区块的中轴线选在了整个页面宽度的黄金分割点处,苏宁首页每类产品区块中的促销大图也放在了整个页面宽度的黄金分割点处。而京东放在了正中,当当似乎没有主线。

screenshot-golden-ratio-taobaoscreenshot-golden-ratio-suning

文字的措词与排版

淘宝首页那么多字,为什么不乱,反倒能很顺畅地看下去?除了自上而下对齐之外,就是四字措词法。引领每个细类的类名基本都是四个字,符合国人的措词习惯朗朗上口,视觉上整齐划一。仔细品味,如果有少于四个字的措词,通常都是字数少的门类在上,这样整体稳重,不会头重脚轻,也不会长长短短参差不齐。苏宁首页的图和字都不少,为什么也不乱呢?因为有规律:图片都在右下,文字都在左上,同行顶对齐,同列左对齐。好像整个商场所有的价格标签,位置统一,商品摆放统一。浏览者看起来自然不累。反观当当首页,单单一个折扣的标注就已经七零八落了,更不用提各元素的内边距、外边距、行距和字间距了。

typography-taobao

苏宁首页(部分)
typography-suning

当当首页(部分)
typography-dangdang

细节决定胜负,胜负已出。淘宝不愧是老大;京东还需继续努力,东哥不要整日泡奶茶;苏宁,有板有眼,下了功夫,所以 O2O 大有起色;而当当,不要再像新 Logo 那样萌呆萌呆的了,赶紧觉醒。