京东JDC交互设计揭秘:大促分会场-模块化设计方法总结

写在前面

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

NO!如何提高设计及后续工作的效率,似乎在工业产品的标准化零件中找到了答案——标准化模块设计京东JDC交互设计揭秘:大促分会场-模块化设计方法总结

 

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

京东JDC交互设计揭秘:大促分会场-模块化设计方法总结京东JDC交互设计揭秘:大促分会场-模块化设计方法总结

 

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

一.模块设计原则

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

京东JDC交互设计揭秘:大促分会场-模块化设计方法总结

part1.可变性原则

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

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

京东JDC交互设计揭秘:大促分会场-模块化设计方法总结        京东JDC交互设计揭秘:大促分会场-模块化设计方法总结

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

京东JDC交互设计揭秘:大促分会场-模块化设计方法总结   京东JDC交互设计揭秘:大促分会场-模块化设计方法总结

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

京东JDC交互设计揭秘:大促分会场-模块化设计方法总结

part2.可拓展性原则

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

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

京东JDC交互设计揭秘:大促分会场-模块化设计方法总结

 

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

京东JDC交互设计揭秘:大促分会场-模块化设计方法总结   京东JDC交互设计揭秘:大促分会场-模块化设计方法总结

 

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

京东JDC交互设计揭秘:大促分会场-模块化设计方法总结

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

part3.丰富性原则

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

京东JDC交互设计揭秘:大促分会场-模块化设计方法总结 京东JDC交互设计揭秘:大促分会场-模块化设计方法总结

 

part4.创新性原则

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

京东JDC交互设计揭秘:大促分会场-模块化设计方法总结

 

京东JDC交互设计揭秘:大促分会场-模块化设计方法总结

 

二.其它设计要求

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

1.挖掘运营实际需求

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

3.技术的可实施性

4.用户体验感受

5.视觉氛围呈现

三.会场动线设计

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

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

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

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

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

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

京东JDC交互设计揭秘:大促分会场-模块化设计方法总结

 

写在最后

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

作者:Xueyuan

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/20042/

(0)
iouedioued
上一篇 2017-06-12 15:00
下一篇 2017-06-12

相关推荐

  • 从地方性视角谈民宿的定位(二): 找到有趣而唯一的内核

    ▲点击关注我们,挖掘土壤的内涵近些年来,随着旅游的快速发展尤其是大众旅游市场的迅速兴起,旅游与地方的关系引发越来越多的关注和讨论。“地方性”一方面作为旅游目的地吸引力的内核被重视,另一方面又因其趋于淡化而引起对地方可持续发展的担忧和对旅游发展的批判。▋什么是“地方性”?事实上,地方性不是绝对的现实,而是话语与知识生产的过程。全球化进程必将是均质化与地方性凸显相互伴生的过程。虽然在全球化背景下,旅游产业的发展由于多种要素的作用,会带来社会...

    2018-03-10
  • app反馈信息的交互设计

    请戳“小白的交互设计”,关注我,么么哒。反馈的作用是帮助用户理解系统行为,合理的反馈就像两个用普通话交流的人之间的对话,互相可以轻易地理解,而糟糕的反馈就像是一个用普通话,一个用粤语的两个人之间的对话…

    2017-08-02
  • 用户体验分享-儿童玩具上的用户体验与交互设计

    大约在同一时间,我成为了一位父亲,我刚进入用户体验世界,试图找出如何使我的产品,够了吧,可以理解的、 易于使用,并且直观。我是一个巨大的玩具迷,还是玩,他们之前到达了我的儿子,但他在房子里意味着更多的玩具和更多的机会来观察他与他的玩具在他的生活非常首个月的交互。看着他让我想起了关于如何普遍经验和界面设计是在我们的生活从一开始,从这些经验,我们能学到多少 — — 尤其是如果我们打算建立一种可以理解的产品。

    2015-01-03
  • 交互设计 | 这到底是交互设计还是黑科技?

    Create Your Difference.           by CYD01能看透你的灯光今天创艺典与你分享的交互装置不再是学习你、跟随你的灯光装置了无论你怎么装高冷当面瘫今天的它能把你扒光把你一览无余地看透我觉得你必需服Aura这是Aura,一个视听和互动装置它解读和翻译人类的情感,然后将其转化成发光窗帘光的强度、形状和颜色会随着人情绪的变化而精确地改变这样的绿,或许代表了平静而这位哥们儿的绿,恕我直言,或许是一种失恋的绿这样...

    2018-04-30
  • Axure RP 7.0 安装教程

    Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。•可以在公众号后台回复『042』或『Axure RP』获取下载链接。安装步骤:❶下载并解压安装包。❷双击安装程序。❸同意,并下一步。❹选择安装路径,下一步。❺下一步。❻取消勾选,点击Finish结...

    2018-03-20
  • 广告Banner :20种高度可行、转化率高的设计思路

    Banner广告是快速高效的吸引用户的重要手段。Banner广告在网站中通常都占据着不错的位置,它们的转化率和它本身的设计优秀与否息息相关,最重要的是,它要能迅速的吸引用户的注意力,通过优秀的文案和视觉让用户立刻马上点击。今天的文章,我们通过一系列优秀的范例,帮你梳理Banner 广告的20种高度可行、转化率高的设计思路。

    2017-05-03
  • 如何建立用户评价模型,量化用户体验

    在互联网趋势盛行的当下​,我们不得不思考: 用户体验是个很重要的事情,要真正领会其精髓并将其发挥到极致, 绝不是通过简单的模仿就能实现的。同样, 一个网站受欢迎的程度远不只与精美程度相关,更重要的是用户在登陆网站的过程中是否能够得到愉悦的体验。

    2017-06-02
  • 【UED人物】朱锫:自然建筑

    近日,朱锫建筑事务所作品景德镇御窑博物馆荣获“2017年度The Architectural Review未来建筑奖”之“最佳文化建筑”(the Winner of the Cultural Regeneration category)。自此,又一位中国建筑师叩开了国际大奖之门。△ 景德镇御窑博物馆室内效果图“未来建筑奖”始于2002年,每年由英国知名建筑专业杂志《The Architectural Review》(建筑评论)评选并颁发...

    2018-02-07
  • 移动界面动效设计的全方位科普指南

    读了这篇文章,你可以知道动效的作用、设计原则、动效工具、制作方法、标注技巧等等,特别全面,强烈推荐收藏学习。

    2017-05-13
  • 浅谈视觉设计与用户体验的统一

    Dribbble,国内比较追捧的媒体。上面聚集了很多项目的视觉设计图,有的配色很漂亮,有的表现手法很新颖(一定程度上会激发我们灵感的火花),但我们在不了解设计场景、目标的情况下是无法判断出这样的视觉设计是否最终解决了用户的问题。脱离业务场景的设计是没有生命力的更谈不上产品体验、服务体验,只有视觉和体验统一起来才能更好的占有市场,设计才具备了商业价值。

    2017-05-24