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

相关推荐

  • 交互设计中的情感化!

    文/金雅庆UI即User Interface 用户界面的简称。UI设计是指设计人和产品或服务互动的一种机制 , 以用户体验为基础进行的人机交互设计是要考虑用户的背景、使用经验以及在操作过程中的感受,从而设计符合最终用户的产品,使得最终用户在使用产品时愉悦、符合自己的逻辑、有效完成并且是高效使用产品。交互设计是一种如何让产品易用,有效而让人方便的技术,它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理...

    2018-03-09
  • 用户体验“大不同”,合作伙伴分享会

    2018年3月15日,“用户体验“大不同”,合作伙伴分享会”在福建省科威技术发展有限公司举行。虽然屋外下了很大的雨,但也没能减小屋里同行朋友们的热情。分享会一开始,惠普华南区业务开发经理李浩泉就以十分轻松幽默的氛围,将与会者带入状态。随后介绍了页宽产品的主要特点,并对惠普A3页宽复合机作了产品推介。惠普新一代A3智能复合机页宽产品的主要特点是:最新技术(集激光/喷墨优势于一身)高速(40ppm~80ppm输出速度)经济(购买/使用/维护...

    2018-03-17
  • 扇贝单词App软件的交互思路,神还原!

    本篇勾文思路,重点是明白设计软件为了什么?而不要盲目设计,时刻记住目标。

    2017-05-13
  • axure 折叠菜单

    第一步:拖拽三个”动态面板“空间到制作区,分别命名为MB1、MB2、MB3,属性width:200,height:130。 每个动态面板都设置两个状态,分别为State1、State2。 打开MB1面板的State1状态,在里面添加一个名称为section1…

    2015-01-12
  • IOS 10人机界面设计指南[中文版]

    随着iPhone7的发布,iOS10普及起来已经不远,所以iOS10的人机交互规范大家也需要学习起来了,分享的是迄今为止翻译得最全面的,iOS10人机界面设计指南[中文版],希望能帮到大家,enjoy!

    2016-10-24
  • 欧洲刮起性爱机器人风,用户体验称比真人舒服;马化腾减持腾讯200万股,套现超6.4亿港元 | 早报

    语音版早报9.109月10日邦妹读新闻来自创业邦00:0004:09不可不知1、马化腾减持腾讯200万股 套现超6.4亿港元香港交易所资料显示,马化腾于9月5、6及7日,连续三天合计减持腾讯200万股,每股平均价介于321.64港元至323.521港元之间,持股量由8.71%降至8.69%,合共套现逾6.4亿港元。此时正值腾讯股价高点。马化腾今年4月连续4天减持,套现42.27亿元,其今年已合共套现近46亿元。2、传WePhone开发者...

    2018-01-31
  • 美国设计师总结:2018年的用户体验设计趋势和方法

    这是由一位美国作者站在美国的视角写的文章。即便抛开个人因素不谈,国内外的发展进度并不完全同步。例如情感化反馈这一块也许国内稍稍落后一点、但是移动支付和AR却要快一些,有些方面即便步调差不多,举出的例子却不一样。不过看看别人的总结也挺有意思,至少可以了解一下国际风向。2017年即将结束,是时候向前展望,预测在接下来的十二个月里,信息体验设计会如何。我将在本文概述的,除了2017年里见证到的巨大的变化之外,还有值得关注的趋势,以确保能够赶于...

    2018-03-29
  • 从周星驰的电影出发,浅谈用户体验的四个特点

    周星驰电影很受大众欢迎,而且具有很强的生命力却是一个不争的事实。而大众欢迎,生命力强正是我们在用户体验所追寻的目标。只有用户知道你核心性能和速度直接超越暴风影音,差异化才出得来。
    ——马化腾

    2017-05-03
  • 聊聊Axure RP 8 的动态面板(文末赠书)

    点击上方“蓝字”关注本公众号《Axure RP 8入门手册》本书的写作初衷是面向初学者,由浅至深地引导读者学习Axure RP 8.0的使用方法,从而实现最终的学习目标。本书不但适合初学者学习,在知识结构与案例的安排上,也非常适合工作中的查阅与参考。初学者只需要按照从前至后的顺序进行学习,就能够迅速、全面地掌握原型开发技能。具备一定原型开发基础的读者,也能够在本书的大量案例之中,获得各种实战的参考。书中的案例均为网站或App中采用的一些...

    2018-04-09
  • 不一样的方法论:从迪斯尼动画学到的五大UX设计原则

    本文作者 Rebecca Ussai  ,成文于她和迪斯尼首席动画师 Glen Keane 在  SXSW panel 合作的一次干货分享之后,文章讨论了 UX 设计师能从迪斯尼动画设计学到的 5 大原则,干货满满!不能对观众没有耐心,他们只是在对你的设计做出反应。吸引力是一种很玄的东西。我总是做些我做不来的事儿,因为我觉得可能做着做着就学会了。
    ——毕加索

    2017-05-19