京东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

相关推荐

  • 观点 | 交互设计在未来会多火?

    周一:AE动效 | 如何入手创作才能更加真实?周二:马克笔如何通过"叠加技法"精准调色周三:更快更好 | 手绘板也能比着尺子画!?周四:观点 | 交互设计在未来会有多火?周五:开拓视野 | 哪些用户体验很棒的APP设计好在哪里周六:如何看懂艾迪.斯理曼的Dior Homme周日:学珠宝设计我们推荐给你的必看书目交互设计是什么?对你而言,它可能还是未知数。让我们先看看大多数人如何看待交互设计这一专业:1.交互设计师是做APP的2.交互设计...

    2018-04-06
  • 写给想要从事交互或者刚从事交互的盆友们

    本文作者是从一个工业设计毕业的学生,走过平面设计,做过UI设计,一步步转行到现在所喜爱的UX设计,并且一直处在努力开心地进步着的状态中。在本文中,也只想通过结合自己的经历和周围同学、同行的状况给大家一些实在的帮助。

    2017-05-08
  • 秒懂MIUI 6是如何一步步扁平化的

    MIUI被很多人看作是小米的最大优势,历经4年时间更新演变,从MIUI的变化我们可以看到主流图标的设计趋势正在从质感到扁平,从灰暗到明亮,观一点而知天下,让我们一起来体会下这些年,我们身边图标的变化。 四年,M…

    2014-10-21
  • 特殊情况下的APP设计(6):交互走查表

    本文作者将用交互走查表的形式,对系列文章“特殊情况下的APP设计”进行一个总结。enjoy~

    2017-04-27
  • 国内大公司的交互设计实习面试经验总结

    沈天宇 :看着拉钩、脉脉上关于互联网岗位的信息,找一个交互设计的岗位几乎要面对100个人的竞争。想想我面前站着100个人,我要赤手空拳的打败他们,这画面简直不敢想。所以一开始我完全不知道我到底能找到一个什么样的工作,大概有一种「大爷赏口饭吃」的姿态去找实习。毕竟,我们实验室也好几年没出过阿里的人了,我也感觉我没那么优秀。面对如此严峻的就业形势,恩,首先还是开始找实习吧。这是一个最坏的时代,(一点也不好。),而且也许以后会更坏。对于找工作...

    2018-02-01
  • 改版设计的思路(下):解决问题

    做改版设计大体思路很简单,只需要做好两件事:发现问题与解决问题。上一期(点击查看)我们做了改版设计的第一步──发现问题,今天我们来做第二步──解决问题!

    2017-05-03
  • Big Than Big ,在移动设备屏幕变大的时代,交互师!你的交互该怎么进行设计?

    这是一个大屏手机的时代。强调这件事情的意义在于,这已经成为事实。这是一个大屏手机的时代。

    2015-01-06
  • 交叉学科-交互设计春季周末班课程计划

    开课时间:本周末4.14日开课,可预约免费试听。请单独联系教务老师。联系方式:教务老师微信二维码上课地址:北京海淀区北四  环保福寺桥南  恒兴大厦10层E室

    2018-04-11
  • 从实际案例出发,说说交互文案设计的几个原则

    想必大家都见过下图所示的著名的“交互文案”反例吧?如果文案写成这样,无论设计师在文案出现方式、时机等方面再怎么优化,这也不可能成为一个合格的设计。因为“看起来重复、读起来绕口、理解起来更是云里雾里”的文案很难让用户获得良好的阅读体验和使用体验。

    2017-05-24
  • 网页首图抓住用户注意力的8个要点

    Banner 是我们最常聊到的设计元素,它是一个网页的招牌,是用户最容易看到的视觉元素。今天,我们来聊聊Banner中的急先锋,网页首图,它的设计之道。

    2017-05-08