实例总结:大促分会场-模块化设计方法

写在前面

在电商的世界,似乎一切时间都可以和购物挂钩,5.20、6.18、11.11、12.12、年货…..;有购物节就要有各种各样的会场进行促销展示;面对越来越细分化的类目会场,作为设计师需要把多达几十个会场一一设计出吗?

NO!如何提高设计及后续工作的效率,似乎在工业产品的标准化零件中找到了答案——标准化模块设计

如果将会场比作工业产品,模块即是零件,动线即是图纸;使用不同的模块与动线,即可组成满足不同需求的会场

如何进行会场模块与动线设计?接下来将从模块设计原则、其它设计要求、会场动线设计三个部分进行讲解

一.模块设计原则

从往年多次负责大促分会场的设计实践中,总结出一些模块化设计原则:可变性、可拓展性、丰富性、创新性;其中可变性与可拓展性属于结构化原则,创新性和丰富性属于内容性原则;接下来将逐一介绍遵循这些原则的原因以及如何遵循

part1.可变性原则

模块化设计并不意味着所有会场一成不变,需求总是多种多样的,如何在模块设计下满足需求的多样性,是遵循可变性原则的重要原因。

案例1. 不同会场因其自身的需求,所要求放置的类目入口数量不可能完全相同,而在类目入口模块的设计中,如何满足数量的可变性呢?需要我们把握屏幕尺寸、模块最小可接受尺寸、浏览动线、尺寸的规律和融合,然后设计基础组件,需求方可根据不同的基础组件搭建不同数量的的类目入口如下图示:

案例2. 单品模块的设计,不同类目要求展示的信息侧重点不同,拿一排一个单品展示样式为例:我们会模块化商品展示尺寸,固定信息可变区域,设计可变信息的基础组件

在可变区域内,考虑信息的布局、尺寸、字号、间距等,在方寸间千变万化,如图示:

part2.可拓展性原则

方盘货策略、用户浏览记录、实时库存等都会影响会场各模块的内容展示数量,如何满足因数量变化而形成的会场差异,是模块化设计中考虑可拓展性原则的重要原因

案例1.‘加车商品降价提醒’模块:此模块自动拉取用户加车商品降价记录,因此用户不同看到的内容数量不同,此时的模块设计需要考虑0、1、2、3…数量的变化,同时需要考虑页面布局、模块占用高度等,如下图示:(此时,不使用一排多个竖排版的布局样式,是因为当只有1/2个商品时,布局有缺陷,对数量的兼容性较差)

案例2. 优惠券模块:同样是需要考虑数量变化带来的样式不同,如下图示:

案例3. 常用的品牌 单品的模块设计,因考虑平铺单品模块较高,采用单品横行滑动的设计,既能拓展单品展示数量,又能较好的控制模块高度,如下图示:

Tips有些模块的设计要同时考虑不同原则的设计要求,就如类目入口的设计需要遵循可变性原则的同时也要遵循可拓展性来满足数量的变化

part3.丰富性原则

需求总是多种多样的,以品牌模块为例,不同的类目有不同的展示需求;我们不能强迫所有会场使用同样的模板,这违背了类目个性;此时需要我们收集类目需求,判断需求的合理性,然后进行样式设计

part4.创新性原则

模块设计并不是延续以往一成不变的,好的模块需要继承,但更需要创新来应对需求的变化;创新并不是天马行空毫无根据的,需要我们在充分了解需求的前提下同时考虑尺寸、间距、大小等天然限制,更需要我们平时素材的积累来寻找灵感

二.其它设计要求

在实际的会场模块设计中,除了要遵循上述四条设计原则,还有一些更细致的设计要求需要我们综合考量

1.挖掘运营实际需求

2.屏幕的天然限制(尺寸、字号、间距、大小等)

3.技术的可实施性

4.用户体验感受

5.视觉氛围呈现

三.会场动线设计

已经讲了很多关于会场标准模块化设计的一些原则和注意事项,此时我们会根据设计输出一份包含各种各样的模块组件库交付给需求方;我们的设计工作完结了吗?当然不是!正如刚开始所提到的:将会场比作工业产品,模块即是零件,动线即是图纸;若没有一份图纸的指引,需求方搭建出的会场页面可能是千奇百怪的,这无疑增加了我们后续评审的工作,同时需求方也可能因为错误的搭建而做无用功;此时我们不仅要输出模块组件,还要给到动线设计示例

作为设计师如何给出合理的动线设计示例?对于这个问题比较难回答,更多的源于日常工作的积累,这里有三条积累途径分享给大家:

1.来自日常各类目促销卖场的设计、评审总结(熟知各类目特性、日常卖场结构与沉淀)

2.来自往年大促设计的沉淀(各类目上线后的实际情况、数据分析、效果对比;总结精华,剔除糟粕)

3.来自对竞品的学习(多看、多截屏,分析总结竞品动线优缺点)

最后输出动线示例图,如下图:(一般会给出常用的几条示例)

写在最后

动线设计示例更多是作为参照物存在的,类目还需根据实际需求看待,动线搭建应以简洁高效、清晰明了为核心设计点;更要在各类目搭建完会场后进行逐一的交互评审检查。

jdc.jd

作者:Xueyuan

(0)

相关推荐

  • 京东设计师:电商大促攻略页设计指南

    通常我们看到的旅游攻略.游戏攻略等都是以文章资讯的形式呈现,只可阅读不可交互.而电商大促活动中的攻略页,可不仅仅是一篇资讯文章那么简单,除了要向用户传达促销信息,往往承载着引流,预约,发券,传播等营销 ...

  • 328商人节-看阿里如何进行平台大促创新营销策略挖掘

    通过328商人节实战,分享如何高效梳理并制定设计策略.作者:大薛 同比去年的328,10倍销售额新增的背后是海量需求的激增,作为UED层面,我们要做的不是配合完成一次大促.而是带着需求来,反馈以高品质 ...

  • 谢谷歌大神传动画设计30年功力

    小编:咱们学UI网上有关于很多Material Design的文章,今天给大家带来的是@大E的关于material design 文档动画部分的学习笔记,之前不是很多小伙伴都在说看不懂,不好理解么?大 ...

  • 这个banner设计方法,不知当讲不?

    小编:banner设计难度真的是有点大到无从下手吗?一起去学习下来自沪江UED@萌萌老师总结的他做banner时的参考方法,说不定你的灵感就这么有了呐- 众所周知,沪江网校一年有几次大促,作为集团门面 ...

  • 揭开隐喻设计面纱-界面隐喻类型与隐喻设计方法

    隐喻设计是一种常用却很少有人提及的概念,人们往往身在其中却不知究竟为何物. 简单说,隐喻设计它可以将现实生活中用户熟悉的事物以多种形式映射到界面中,从而使用户不熟悉的概念.陌生且复杂的操作等变得熟悉与 ...

  • 降低用户成本的产品设计方法总结

    最近在整理接下来几个月的业务体验事件规划,发现产品无论 B/C 端,在新用户上手这块都存在较高的门槛,而目前已有的版本在降低用户认知.学习.操作成本方面,挖掘得并不够深入,便计划把降低成本作为接下来体 ...

  • 大屏数据可视化设计指南

    一.基础概念 1.什么是数据可视化 把相对复杂.抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化,数据可视化是为了更形象地表达数据内在的信息和规律,促进数据信息的传播和应 ...

  • 淘宝天猫大促承接页如何设置全屏

    如何设置大促承接页全屏模式,其实很简单就是有点麻烦,个人想到的一个小技巧,如果有更好的方法,欢迎大家一起来讨论哦! 操作方法 01 首先进入承接页装修页面,用马上要开始的清凉宅夏周活动做案例吧,进入装 ...

  • 魅族618大促 魅族MX3新品银翼版/魅白版京东限量抢购(好礼送)

    6月18日京东11周年店庆购物大趴,魅族也来添把火!据了解,在电商大促期间,魅族昨日已经在线上全平台开展一系列促销让利活动。在6月16日——6月20日活动期间,煤油们不仅有机会在魅族官方在线商店分时段 ...