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

相关推荐

  • 译文 | 4种帮助设计师整理设计思路的方法

    当我们刚刚接手一个项目的时候,我们总能在初期迸发出很多有趣的想法,很多闪光的细节都是偶然闪现的,但当我们在设计的过程中,有多少能够真正落地到产出中呢?怎样才能成功捕捉到这些有趣的创意,并使之在后续的产品设计中表达出来?本文向大家推荐了四种方法,帮助大家整理设计思路,避免创意在你的脑海里逃走!下面进入译文。

    2017-05-25
  • 饿了么 UED 又搞事情啦!

    近日,据保洁阿姨匿名举报,在上海饿了么总部的榴莲酥会议室内,有人在工作时间聚众搞事情……据说场面隆重,气氛活跃,不堪入目。本台记者 @孟小雨 迅速赶往了现场。-----据调查,这次始作俑者是作为宇宙霹雳无敌超级吃货公司饿了么中最有逼格+设计感的团队—— UED 部门。在这个辞旧迎新、恭喜发财、还不放假的时刻,该部门秘密召开了第一届 UED 年度颁奖典礼!记者被大会的美食吸引,潜入该组织内部,随即被惊呆了。说到颁奖会,你以为是这样的?领导...

    2018-02-25
  • UE网国内首发:Axure APP:Axshare APP下载地址非google play

    很多童鞋反应googleplay下载不下来,我们发布在 UE社区 以后各种新的东东想第一时间知道欢迎安装我们的UE小组APP 请需要的同学尝鲜下载。 http://www.iamue.cn/read.php?tid=16&fid=2 不过阿西这里要提醒下,这…

    2015-05-25
  • 聊天的未来不是人工智能 ,及时交互才是关键

    作为Kik首席执行官,对于即将到来的聊天机器人革命,我思考了很长时间。一年半前,我们率先推出了一个基本版聊天机器人平台,之后,数百万Kik用户和这个机器人进行了对话。其他消息应用(比如Telegram和Slack)也在开发自己的聊天机器人,此外有传言称,Facebook将会在四月12日举办的f8大会上为Messenger推出自主开发的机器人平台。可能是有史以来第一次,聊天机器人能实现你和你周围世界的即时互动。最近,我亲身经历过的一件事,可能最好说明这一切。我的所有操作如下
    打开聊天应用 > 扫码> 输入“2”> 输入“百威”> 选择卡号。搞定!这种即时交互,只有聊天机器人能够做到。你不需要下载App应用,也不需要创建新账号,还有最重要的,你不用学习了解一款新应用里的操作界面了!只需扫码、聊天就能满足需求。这种体验,就像是我在手机上按了一个按键,三分钟之后一辆Uber出现在我面前。如今,科技行业喜欢把它称为O2O模式——在一款App里预订到实体产品或服务。而现在,你甚至不再需要一款App应用,只需用聊天的方式,就能满足自己的日常生活需要。

    2017-05-26
  • 设计一个快速提升用户体验度的网站架构

    点击上方“公众号”可以订阅哦渔哥服务☆ 网站建设:网站结构、网站功能、关键字策划、网站SEO、设计与开发。☆ 整合营销:品牌形象文案策划、产品销售概念策划、产品销售文案策划。☆ SEO优化:SEO排名优化、论坛营销、口碑营销、公关活动等病毒传播。☆ 托管服务:市场分析、受众分析、品牌与产品分析、全网整合营销推广。☆ 微信运营:微信公众号开发、朋友圈广告、微信运营活动、微商城搭建。☆ 定制培训:专业施教团队、完整课程体系、实际项目操作、低...

    2018-04-08
  • 从交互设计浅谈安卓开发有多痛苦,安卓程序员才最值得尊重

    导语:交互设计带来的痛苦和问题,总有种让我们安卓开发者恨铁不成钢的感觉,虽然想吐槽,又无力吐槽。如果你懂得微信交互的设计,那就勇敢的,尽情的去吐槽吧!微信的交互,Android和IOS都是按照各自的交互去展示的,去设计的。比如:列表的删除操作,Android中的微信它就严格遵循了长按删除功能,而IOS就一贯的按照自己的风格,滑动删除;又比如底层四个tab按钮,安卓中可以滑动变换界面,而苹果的只能点击操作;再比如顶层的标题栏安卓中微信的标题栏是不变动的,而IOS的是跟着界面变化的;再比如安卓的微信中点击退出是中间弹框,而苹果的则是底部弹出;再比如选择相册等等很多细节,你要注意去体验,去感受,你就会发现,微信的设计是按照Android和IOS各自的交互规范来设计和实施的。如果这样去设计和做就会大大降低开发者的难度。说到这里聪明的你们,估计想到我下面要说什么了?一个苹果手机用户手机破了,买不起了,一想要是再买个苹果手机,就得卖肾了,于是乎买了一款Android的坚果手机,之后打开微信后,看到好友给他发了一个优衣库的视频的公众号文章,感觉非常不错,直接就把这条链接收藏了,偷偷欣赏完之后,回到家怕被爱玩手机的儿子发现,就想删除这条收藏,哎呦喂,怎么滑动都没有滑动出删除按钮来,最后果真让自己的儿子看到了,听到声音的老婆过来就扇了他丈夫一嘴巴子!

    2017-05-28
  • 嘘!手机能听出你声音里的情绪

    对我们大部分人来说,每天心情有点变化是很正常的。女人的一天常常是喜怒哀乐随机出现,当然一般也就自己调整过来了,不至于要死要活。但有一类人例外,躁郁症患者。 事业不顺、丢了工作、失恋等等,当生活的不幸降…

    2014-12-13
  • Excel表格常用快捷键大全之11-20个(含操作演示)

    温馨提示:零基础或者对Excel不熟悉的小伙伴,请在公众号后台回复数字:1,免费学习滴答老师的全套Excel小白脱白系列视频教程。第十一,选定当前活动单元格区域比如,咱们需要给A1:C18单元格区域加上边框,首先得选中这些单元格。除了用鼠标拖动选择之外,还可以使用下面的两个快捷键:鼠标随便放在A1:C18单元格区域之间的任意单元格,按下Ctrl+Shift+*(星号)或者Ctrl+A就可以快速选定当前活动单元格区域。第十二,excel选...

    2018-03-18
  • 用户体验之 iPhone X

    Hello,everybody。今天给大家带来一篇关于iPhone X的用户实际测评。虽然iPhone X已经在国内上市有一段时间了,但是因为其价格也是让许多人叹为观止,今天小编在得到以为苹果手机顾客的同意后将其用户体验整合以后推送给大家,希望大家会满意。好,话不多说,我们马上开始。首先小编先来介绍一下iPhone X的优点吧。iPhone X 首次在手机行业中采用异形全面屏,相对于之前的iPhone,手握尺寸更小,首次采用OLED现实...

    2018-04-13
  • 程序员如何应对「给我弄个网站吧」的请求?

    点击上方“程序人生”,选择“置顶公众号”第一时间关注程序猿(媛)身边的故事编者按:昨天,我们在这篇《“你是程序员,帮我修个电脑吧” “不会,滚”》的文章中,发起了个投票。结果发现三个选项中,打败「修电脑」,位居榜首最令大家“抓狂”的选项,竟然是「我想要创业,你帮我建个网站吧,就像淘宝那样的,一定很好做吧」。一般,遇到此类情况,我们可以选择两种处理方式:第一种,直怼式。例如:“我给你1000块,你帮我做个淘宝,就和马云的淘宝一样的” “你...

    2018-04-08