2016年,随着设计师普遍采用相似的用户界面模式、卡片及类卡片布局,甚至以雷同方式获取邮件订阅者,电子商务网站的外观或将愈发趋同。
网站设计的演变往往源于使用方式的变革。2016年,移动端使用的普及推动了几乎所有设计趋势。这些模式为购物者提供了便捷且一致的体验;卡片布局在智能手机与大屏设备上均表现优异,动态内容也进一步改善了跨设备体验。
1. 常见的用户界面设计模式
在软件开发及电商网站设计中,设计模式指针对常见问题的可复用解决方案。具体而言,用户界面(UI)设计模式旨在解决诸如“如何在智能手机上设计易用导航菜单”等挑战。
近年来,设计师已确立了多种广泛应用的设计模式。对于响应式设计或依赖Bootstrap、Foundation等CSS框架的网站,这一点尤为显著。
这种设计模式的连续性可能对电商网站产生两方面影响:
首先,网站外观可能趋于相似,页面设计将成为同一主题下的变体,而非截然不同的布局。
其次,站点间的相似性可能降低用户学习成本,使浏览和导航更便捷,尤其在移动设备上能带来更好的购物体验。
每个网站上都可以看到几种常见的用户界面设计模式。
例如,观察上图中的Chuck Levin’s(在线音乐商店)、Collared Greens(服装店)和Di Bruno Bros.(美食店)。这三个站点均在顶部设置了“汉堡”菜单(三条水平线),标题栏包含搜索图标和购物车图标,并展示了一张特色商品图。
预计2016年,此类常见的用户界面设计模式将出现得更加频繁。
2. 卡片和类卡片布局
在网站设计中,“卡片”封装了与单一主题相关的图像、文本等资源。它既美观又易于组织不同主题的内容,且非常适合响应式设计。
事实上,卡片本身就是一种设计模式。该模式正逐渐升温,有望在2016年的电商设计中更为普及。Google的Material Design将其作为核心组件纳入(并应用于Android系统),进一步推动了这一趋势。
电商领域已有诸多应用案例。Lord & Taylor网站利用卡片展示特色类别或产品。
在 Lord & Taylor 网站上,卡片用于突出显示类别或产品。
Rejuvenation同样采用卡片式布局,配以大幅产品图片来组织主页。
Rejuvenation 使用类卡片布局,通过大幅产品展示图片来组织其主页。
Belk则使用卡片来展示各类促销商品。
Belk 采用卡片式布局来推广促销活动。
3. 快闪店与中断式营销
弹出式广告曾是最令人反感的在线推广形式之一。早期弹窗会在浏览器中打开新窗口展示广告,因具有欺骗性和干扰性而被广泛拦截。
有趣的是,这种中断式营销正以新形态回归。如今的弹窗多以模态框形式出现,通常提供折扣以换取用户加入邮件列表或关注社交媒体账号。
Ann Taylor 的网站只是众多全渠道零售商之一,它们利用网站上的模态框来推广电子邮件订阅。
推动这一趋势的原因在于,邮件营销仍是线上卖家最强大的工具之一。为获取更多订阅者以提升销售额,商家似乎不遗余力。
预计到2016年,国家零售联合会(NRF)排名前三分之一的零售商中,可能有三分之一会使用此类弹窗。不过,营销策略将更具选择性:弹窗不会每次访问都出现,往往需要特定触发条件(如滚动页面)才会显示。
Big Lots 也使用弹出式广告来推广电子邮件订阅。
4. 大幅摄影图片与视频
“一图胜千言”,视频的价值更甚。2016年,电商网站将更多展示大幅图片并使用视频内容。同时,设计师和开发人员也将优化这些丰富内容的交付方式,以提升各平台的网站性能。
Best Made网站的首页便是一个典型例子,一张全宽的生活方式照片极具视觉冲击力。
Best Made 在其首页展示了一张巨大的生活方式主题照片。
5. 动态视图
许多在线商店的产品列表是静态的,由服务器预先排版后交付给浏览器。当用户更改筛选条件时,浏览器需重新请求服务器获取新页面。
2016年,越来越多的网站将转向依赖JavaScript和Ajax的动态视图。JadoPado网站便是一个引人注目的例子:在搜索框输入字符时,页面上的产品结果会实时动态更新,无需刷新页面。
JadoPado 的网站搜索功能具有动态特性且易于使用。

