随着在线零售商愈发重视移动购物体验,2014年预计将迎来网站重新设计的高峰。这些新设计将紧跟娱乐、出版及移动应用领域的流行趋势。尽管Magento、Shopify和WooCommerce等电商平台对商店设计有既定影响,但在移动互联网流量持续增长(预计移动端使用量将超越桌面端,且移动电商占比达30%)的背景下,即便是持保守态度的卖家也将被迫进行移动端适配改造。
1. 响应式设计
移动端虽是2014年电商网页设计的核心驱动力,但零售商不会放弃桌面用户。响应式设计将继续作为主流趋势,确保购物者在任何设备上均能获得良好体验。
由Flexbox解决。
作为响应式设计的子集,CSS Flexible Box Layout Module(弹性盒子布局)的应用将更加广泛。该标准在Chrome 31、Firefox 25、IE 10+、Safari 7及各类移动端浏览器中已获得良好支持。不熟悉该模块的设计师可参考CSS-Tricks的《Flexbox完全指南》、Mozilla开发者网络的《使用CSS弹性盒子》以及Philip Walton的《Flexbox解决方案》。
2. 手指友好的界面
受“移动优先”设计理念影响,针对平板和智能手机触控操作的手指友好型界面将成为2014年的重要趋势。这一转变主要体现在两方面:
- 减少内容滑块:传统滑块虽节省空间,但“下一步”按钮过小,不利于移动端操作。
- 增大导航按钮与链接:优化点击区域,使购物者更轻松地浏览网站层级或跳转页面。
3. 扁平化设计
继Windows 8和iOS 7之后,扁平化设计正席卷各大流行网站。该风格摒弃投影阴影等特效,专注于鲜明色彩与趣味字体。其优势在于界面简洁、易于实现响应式、图形文件小(加载快),且能形成独特的品牌差异化。Canopy网站便是扁平化设计应用于电商的优秀范例。
Canopy
4. 单页更多内容
2014年,设计师将通过以下两种方式在单页内承载更多信息:
- 快速预览功能:允许用户在产品列表页直接获取详情,无需跳转加载,极大提升移动端浏览效率。
- 长页面与无限滚动:借鉴Tumblr或Pinterest模式,通过延长页面或无限加载来展示更多内容。
5. 有趣的字体
在线排版热潮在2014年仍将持续。网站将更多采用独特的品牌定制字体来传达店铺氛围。Free People、Design by Humans、Afends及Yellow Bird Project等站点展示了电商排版的实际应用效果。
Free People.
6. 大型图形设计
尽管看似与移动端轻量化背道而驰,但大尺寸图形实际上是相对于屏幕比例而言的。通过良好的开发技术,设计师可为不同设备提供适配的大图。此外,较大的产品图片天然具备“手指友好”特性,这也是该趋势得以延续的重要原因。Born、Hagger和Tommy Bahama等品牌均已采用此设计。
7. 视频及其他丰富内容
移动视频消费量同比增长超一倍,证明消费者已习惯在移动端观看视频。因此,视频及富媒体内容将成为在线零售商传递产品信息、开展内容营销的重要媒介,预计将有更多商家在产品描述及营销内容中融入此类形式。

