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

相关推荐

  • “用户体验” 才是售电公司的未来(中电联课程)

    本文由全球首家智能传媒平台—中传媒平台(CMCNP)提供对于售电公司来说,用户体验就是电力用户用电过程的一个主观感受。那这样就有一个疑问:用电还有什么区别吗?电本身就是无差别的商品。所以,售电公司就应该提供差异化增值服务以满足用户体验。如果不谈用户体验,那售电公司单凭价差、所谓的增值服务去吸引用户,去谋未来?价差谁比的过电厂的售电公司,增值服务谁不会,不知道中国人最擅长的就是“借鉴”吗?如果是这样,独立售电公司在市场上就真的没什么竞争力...

    2018-02-05
  • 交互设计 | 如何创作一本足够打动考官的作品集

    近年交互设计大热,但交互设计是否如大家所见所想仅是网页及APP设计,申请交互设计艺术留学的同学们又该如何创作帮助自己跨入名校大门的作品集?今天,汉艺国际(H·Art)为大家带来《如何创作一本打动考官的作品集》系列第九期,与大家分享交互设计作品集的创作方法(求职作品集可同理借鉴创作思维)。关于交互设计必须要强调的事儿①——交互设计不仅仅是网页和APP▼交互设计并不是一个单纯研究电子产品用户界面交互的学科。 交互设计包括但不限于用户界面设计...

    2018-04-06
  • Axure案例-联想输入提示,Axure中继器的使用

    点击右面下载:axure-case-https://www.iamue.com 不多说了,源文件分享,使用Axure打开编辑可以查看原理。 日安 转载的童鞋带上:木卫艾欧网-交互学堂》 Axure案例-联想输入提示,Axure中继器的使用 

    IxD案例 2015-02-04
  • 交互设计牛校排行榜 | 卡内基梅隆

    创艺典国际艺术教育之院校介绍有一位老大哥是高校里的老大哥他在艺术、工业、计算机专业非常强势除此之外它还拥有全美顶尖对顶尖的计算机学院和戏剧学院他就是Carnegie Mellon UniversityCMU卡耐基梅隆大学这些看上去毫不相干但都那么强势的学科结合在一起岂不是成了飞机中的战斗机赛车中的四驱兄弟?卡梅这位老大哥还真这么干了他们开设了一个项目那就是——人机交互交互设计中应用最广泛的学科分支卡内基梅隆的人机交互项目是全球的交互项目...

    2018-04-26
  • 随想:智能车人机交互设计三要素

    BYTON拜腾标志性的共享体验屏和触摸式方向盘近期会总结下自己对智能车、自动驾驶人机交互相关的思考,很碎片,想到哪总结到哪。今天先写智能车相关的内容。这里的智能车先缩小范围到还需要人类驾驶员的智能网联汽车。1、总结之前,有个疑问。我很想知道各大车企在研发测试智能车的时候,是否有认真、大量地拿真实用户、真实场景,而非实验室场景去测试其诸如中控大屏这样的智能产品/功能?在我的印象里,或许车企更多的测试依旧在传统意义上汽车这一交通工具的性能、...

    2018-04-22
  • 2017年视觉设计的六大趋势

    我们在去年的趋势基础上进行筛选提炼,在历时两周的最终定义阶段之后,整合出一份2017年的设计趋势分析报告,希望能给各位从事并热爱设计的同学们带来一些启发和帮助。

    2017-05-09
  • 回归设计,iPhone 6是一个好产品吗?

    很有意思的是,几乎每一代新 iPhone 出来后网上总会骂声一片,许多人抱怨它的样子难看、没什么改变……这次发布的大屏 iPhone 6 也不例外,普遍大家抨击的焦点都在后置凸出的摄像头以及后壳两条突出的天线设计上。 有…

    2014-10-28
  • WEB用户体验

    点击标题下「智业人」可快速关注摘要:随着软件行业的迅速发展,各种软件产品更是形形色色,用户不再满足软件对其所需要的功能实现,更追求一种使用过程中的心里感受,因此用户体验足够好的才能走向最前端。用户体验的定义有很多,用一种比较简单的说法就是“用户对访问网站的感受”。本文主要从用户体验角度出发,从网站的构建到数据渲染完毕的过程提高用户体验。关键字:加载速度、动画、用户体验、布局一个好的网站离不开对用户体验的追求。因为良好的用户体验才能增加用...

    2018-02-03
  • 【干货】Axure产品原型在手机上运行的完整教程

      图1 模拟丁香园的高保真原型   在一般的开发工作之前,我们通常会设计产品原型,大部分为axure绘制的线框图作为产品的PRD文档,供UI和开发进行前期工作,但是有的时候客户、领导想在开发之前,看到产品的概貌…

    2014-11-26
  • 作品集总结|本科建筑跨专业申请交互设计?Dream School还是皇艺?这可能吗?

    PS-ONE#20180504建筑背景,申请交互设计跨专业申请结果如何?本科建筑,转专业申请交互设计Master?并且Dream School还是世界第一的RCA皇家艺术学院?在经历了PS-ONE历时8个月的内部评审后她如愿以偿了吗?。。。。。。8个月后爱丁堡大学,get拉夫堡,get交互设计,是细节非常复杂的专业涉及到的知识点、设计思维,对转专业申请者来说,是很苛刻的所以拿到爱丁堡、拉夫堡这样强势院校的Offer已经是很不错的结果了但...

    2018-05-04