2018年电子商务网站设计的五大趋势

新技术、用户行为及设计趋势正持续推动电商网站与应用的迭代。2018年，电商设计预计将广泛采用CSS Grid Layout（网格布局）、移动端友好的全屏模态窗口，并增加视频内容、微交互及引导式销售功能。 ### 1. CSS 网格布局 CSS Grid Layout是W3C CSS标准中的二维布局模型，赋予设计师更强的页面控制权，能更高效地利用不同设备和屏幕尺寸的空间，显著优化用户界面。 W3C编辑在推荐标准中指出：“随着网站从简单文档演变为复杂交互应用，传统的浮动等文档布局技术已不再适用。”过去开发者常通过表格、JavaScript或精确测量浮动元素来实现布局，但这些方法往往脆弱且反直觉；固定布局虽常见却无法适应屏幕变化。CSS Grid Layout有效解决了上述痛点，使网页设计得到质的提升。 2018年，建议关注电商设计师和主题制作者是否会在产品类目页或搜索结果页中应用该技术。目前Chrome、Firefox、Safari、Opera和Edge等主流浏览器最新版本均已支持，仅部分早期版本可能存在兼容性问题。 ### 2. 全屏搜索与表单 模态窗口（Modal）作为叠加于内容之上的交互元素，已在电商领域广泛应用多年。2018年的新趋势是将搜索框和表单升级为全屏模态窗口，这一变化源于移动优先的设计理念。 以Overstock为例，其针对新访客的新闻注册表单采用了全屏模态窗口：移动端居中全屏显示，大屏端则配合半透明灰色背景横跨整个屏幕。Ralph Lauren的搜索模态窗口同样如此，在大屏上覆盖绝大部分内容，移动端则为真正的全屏体验。 秉持移动端优先理念的设计师，正将这种全屏模态交互延伸至搜索及其他表单场景中。 ### 3. 更多的视频内容 视频是传递复杂信息、讲述故事及唤起情感的绝佳媒介。随着互联网视频发布量与观看量的持续增长，在线零售商在网页设计中融入视频元素已成必然趋势。 Beardbrand等网站长期深耕视频内容营销，率先在产品详情页嵌入内联视频，起到了行业引领作用。 预计2018年，视频将被更广泛地应用于产品页、落地页、站内商品展示、Hero Images乃至网页背景中。 ### 4. 更多的微交互 自Facebook引入“点赞”按钮以来，微交互已从单纯的社交评分工具，发展为2018年网站与应用设计的核心趋势之一。 对在线卖家而言，微交互的核心价值在于培养用户习惯或奖励特定行为（如加购、评价、订阅）。Planet UX主编Nick Babich指出：“微交互具有促使用户实际互动的力量，是构建习惯循环的强大工具。”例如，当购物者提交产品评论后，一个微小的动画反馈能给予即时奖励，激励其持续产出内容。 《Microinteractions》作者Dan Saffer提出，微交互包含四个组成部分：

• 触发器：启动或开始微交互。
• 规则：定义或确定交互过程中发生的情况。
• 反馈：传达正在发生或刚刚发生的事情。
• 循环和模式：控制内容的重复与演变。

2018年，预计更多电商设计师会将微交互深度融入产品设计之中。 ### 5. 引导式销售 引导式销售指通过询问用户关于功能需求和使用场景的问题，帮助其精准发现目标产品。该模式在电商领域已有成熟应用，如Victoria’s Secret的运动内衣选择器、The North Face的夹克挑选助手，以及Bodybuilding.com的三步补充剂查找工具。 与其他设计趋势一样，引导式销售在2018年有望变得更加普及，成为提升转化率的标配功能。