商业体验设计红宝书

6天前发布

原创文章 / 网页 / 观点
方宁FNEYO 原创,如需商业用途或转载请与方宁FNEYO联系,谢谢配合。

专注于无界零售下完美体验的设计尝试与探索


第一节 专题页设计

1.1 专题页的作用以及组成要素

电商活动有很强的目的性和实效性,电商专题页是电商活动的载体,它通过特定的营销主题,在指定的时间内对产品进行集中展示和销售。电商专题页可以根据客户个性化的需求来补充和整合信息,并分模块的展现给客户,同时通过利益点的强化展示,挖掘用户的需求,吸引用户的点击,最终促成购买行为。

店铺专题页和店铺首页有什么不同呢,店铺首页除了展示产品信息,更重要的是要体现品牌或者店铺的调性,建立和用户之间的信任,甚至还承载了流量聚合和分流的功能,而专题页相对来说功能更专一、目的性更强,展示的信息更集中也更有时效性。

电商专题页按照营销的目的分为功能型和体验型,所谓功能型专题是指强销售导向的专题,比如历年的京东618,11.11;体验型是指不以强销售为导向的,重在氛围营造、引起用户情感共鸣的专题,比如母亲节、中秋节等。

一般来说,一个完整的电商专题页是由活动主题、利益点、营销玩法楼层、至少一个常规品类楼层组成。电商专题页设计不仅仅要求设计师具备最基础的设计功底,同时也需要设计师具有营销思维和有效的沟通能力,甚至需要具备消费心理学知识。

1.2 专题页设计规范以及注意事项

请查看【京东商家视觉规范】章节,或者直接登录https://svs.jd.com/


1.3  专题页制作流程

前期沟通:

设计师可以从项目立项就开始介入,也可以从执行阶段介入,需要注意的是前期的介入以倾听为主,在这个阶段需要结合相关数据,了解活动背景、目标人群、业务指标、活动节奏、营销玩法、匹配资源等信息,同时需要按照项目的量级评估和预留设计时间。

需求确认:

这个阶段营销策划已经输出完整的页面交互框架,设计师的角色也要从倾听转换为主动思考,不仅仅需要和营销策划确认交互框架的内容,还需要和前端工程师确认效果的实现,结合受众人群,展开创意设计,与BOSS的敲定最终设计方案。

版块确认的过程中要特别注意营销策划对特殊楼层的需求,如果后台和前端都不能实现营销策划构思的效果,那么需要在这一环节就把问题抛出寻找其他的办法;同时设计师也可以在这个环节给出自己的建议,影响甚至是帮助营销策划更好的优化页面框架。

视觉推导:

视觉推导的过程是设计师在脑海里构思主题的过程,同时也能给营销策划一个大概的心理预期,避免在最后成稿阶段因为风格和方向的不同造成灾难性返稿。视觉推导形式多样,比较常见的有图片、实物,甚至是短视频,同时需要向营销策划清晰的阐述设计思路以及设计风格和方向。  


贡献案例—电脑数码事业部营销中心设计组-胡依婷(女-单身 私信可要微信)


设计执行

专题页其实是banner制作的升级版,所以在做专题页之前都需要经历海量banner制作的痛苦过程。在制作专题页时有以下几点建议:

•         先整体后局部,先定基调再扣细节;

•         页面风格保持一致;

•         版块内容丰富,节奏有序。

京东电脑数码超级秒杀日

贡献案例—电脑数码事业部营销中心设计组-胡依婷(女-单身 私信可要微信)


上线维护

活动上线之后要有实时更新的意识,时刻关注页面上的利益点/优惠券/秒杀产品的实效性,单品坑售空之后要及时提醒营销策划更新坑位,避免流量浪费。


数据沉淀

在强结果导向的电商行业,大家似乎对数字更敏感。对于电商专题页来说,页面停留时长/页面转化率/页面跳失率这三个维度的数据,一定程度上能验证专题页的效果。我们可以以月为维度或者以季度为维度抓取数据进行纵向对比,也可以以项目为维度和往年的数据进行横向对比,数据的积累既可以验证效果,也可以沉淀优秀的案例复用于以后的工作中。


第二节  banner设计

什么是电商类banner?

电商类Banner,是以电子屏幕为媒介,在互联网传播的不同尺寸、大小和形状的广告,Banner的展示形式多样,比较常见的有静态图片、GIF动态图片,甚至是比较流行的短视频等,电商类Banner作用是曝光引流,销售转化以及占领市场。


banner设计中排版、色彩以及表现技法的奥秘


电商设计中的排版,更多的是运用到三大构成中的平面构成知识。平面构成主要是在二维空间中运用点、线、面按照一定的规律,形成的一种视觉语言,而Banner图中的产品、文案、场景等可以是看作是平面构成中的点、线、面。我们把这些元素之间的排列关系,归纳为以下几种电商设计中常见的构图形式:垂直水平式构图、正三角和倒三角构图、对角线构图、框架构图、中心辐射式构图。

活动的定位决定了banner设计的风格。当我们拿到一个设计需求的时候,首先要分析这场活动面对的用户群体,简单的做一个用户画像并根据用户群体的特征提炼出设计的关键词:简约时尚、热闹促销或者品质大牌等。不同的关键词对应不同的设计语言。

促销热闹的Banner设计,适合用大面积的暖色加上比较多的装饰元素,更容易营造热闹、充满购物欲望的氛围,给人热情有亲和力的感受,版式上以更聚焦、更有视觉冲击力的中心辐射式构图居多。

体现产品品质感的Banner设计,画面的排版通常更简洁一些,甚至可以多一些留白,或者是简单的几何图形,同时对产品的选择也有更高的要求,越是高端的产品,产品的细节也越吸引人。

从信息层级的角度看,首先要了解banner设计中可以突出的点:产品、利益点、活动的主题、品牌露出等,在制作之前明确banner的需求然后在设计中有选择的突出。



如何设计喜闻乐见的banner


无论设计是为了获取流量还是为了品牌曝光,最终的目的都是为了带动销售增长。设计的价值源于“设计赋能对商业贡献”的程度。简单来说就是设计师通过设计手法和技巧为合作伙伴、团队、企业、用户,创造额外的助力,辅助其商业目标的达成。所以一个优秀的电商设计需要将设计与销售目的相结合。

设计出一张好的Banner,首先要区分需求的层次:生理需求、安全需求、社会需求、尊重需求、自我实现需求,而需求层次不一样,也就意味着消费者所在乎的东西不一样。

生理需求:满足最低需求层次,消费品只要求产品具有一般功能即可。举个例子:几家店铺卖同一个型号的智能手环,消费者会选择价格最便宜的那家店铺购买,因为只需满足他是这个型号的智能手环就行。

安全需求:满足对“安全”的要求,消费者关注产品对身体的影响。举个例子:几家店铺卖同一个样式的电水壶,这类消费者会去比较哪一家的水货质量更好,而不是单看哪家更便宜。

社交需求:满足对“交际”要求,消费者关注产品是否有助于提高自己的交际形象。举个例子:有几款游戏机摆在消费者面前,这类消费者会想,哪一款游戏机是朋友们都在玩的,更合适和大家一起分享。

尊重需求:满足对产品“与众不同”的要求,消费者关注的是购买这件产品后的象征意义。可以拿来炫耀的东西。举个例子:买了笔记本就代表我是一个生活有品质、有态度的人。

自我实现:满足“对产品有特殊信仰”的需要,消费者拥有自己的追求和信仰,需求层次越高,消费者就越不容易被满足,而一旦被满足他所愿意付出的代价也就越高,这个代价不只是金钱,而是任何大众所认可的有意义的东西。举个例子:我买这个产品其实和钱关系不大,贵和便宜都无所谓。我就是想买这个品牌的产品,他的品牌理念恰好和我产生了共鸣。

促销的层次又分为以下5部分:价格引导型促销、功能引导型促销、情感引导型促销、地位引导型促销和品牌引导型促销。伴随着用户心智的不断成熟,吸引消费者购物的诉求也在不断的升级。所以促销的玩法也在不断的升级和变化。价格引导促销:就是利用低价秒杀等信息来吸引消费者购物,比如说“全场9.9元包邮、0元试用、笔记本5折抢等等”。功能引导型促销:这类促销更多的是在凸显产品本身的卖点。比如“充电1分钟,通话1小时。产品的创新以及质量如何的好等等等”,用这些产品卖点去博取消费者的目光。情感引导型促销:这类促销就是在摸索消费者的感受和情绪。在不同的节日做不同的促销、某某某同款等等都属于情感引导促销。地位引导型促销:这类促销活动更多在一些高端消费市场,产品的促销需要满足消费者尊贵地位的象征。品牌引导型促销:产品与消费者在灵魂深处早已达成共识,与价格没有关系,消费者的观念和追求和品牌产生了共鸣。


怎样打造高点击的banner


如何去设计一个高点击的素材?首先我们总结下在制作素材的过程中比较常见问题:

1、设计排版过于杂乱,文案的大小,字间距,排版比较随性、没有规律,从而导致视觉上看着就不舒服。

2、定位不准确,高端产品用掉价的促销文案,廉价产品走高端简洁风格。

3、信息层级不清晰,是不是真的把你想传达的信息传达给消费者了。

4、氛围是否到位,或是为了营造氛围导致画面凌乱而且掉档次。

5、细节问题,比如说产品抠图不干净,产品为修图,特效加的多而杂等等。

那么在这里和大家分享几点关于Banner设计的注意事项:

1、首先要保证Banner中文案可以让用户清晰的阅读,图文信息最好保持一致。

2、产品的抠图一定要干净,不要出现有白边的低级问题。

3、产品文案背景不要添加过多的叠加效果,导致画面杂而乱。

最后了我们来说一下如何做出一个高点击的Banner,设计之前要先思考一下我们为什么要做这个Banner;这是一个什么促销形式的Banner;活动产品对应的用户是谁;Banner什么时候在什么渠道投放;如何满足需求做这个设计。其实一张好的Banner图无非就是考虑到了以上的一些问题。商业体系中的设计,核心的价值就是解决用户的问题,以人为本做设计,按需求来做设计,要抓住不同用户的心理需求。

 

第3节  商详页的奥秘


如果商品主图是你对一个产品的第一印象,那么商品详情页就是建立你和商品关系的第二步。它通过有选择的信息展示和有目的的视觉引导,激发你的需求唤起你的欲望,赢得你的内心建立起和你的共鸣,最终帮助你完成购买。这个过程似乎和找男女朋友有异曲同工,所以一个商详页的“性格和气质”,决定了你是不是对方的Mr.Right。

商详页的终极目标,是形成购买促成转化。所以首先,一定要搞明白品牌/产品/商详页和消费者之间的关系。品牌不同,定位不同,目标用户群不同,那么商品详情页的设计风格和玩法就不能一样,就像奢侈品大牌不会用恶俗的视觉以及九块九包邮来自降身价,十八线小品牌也玩不起高冷一样,一个“合适”的商详页,是能够通过视觉来选择合适的用户,节约沟通成本,提高转化率的。



商详页设计规则规范以及注意事项

请查看【京东商家视觉规范】章节,或者直接登录https://svs.jd.com/  




如何打造吸引人的商详页


头图要有吸引力

头图是吸引用户留下来继续往下看的第一步,所以头图的设计至关重要。头图可以是产品为主体,也可以是人物甚至是文字为主体,不管是哪种元素为主体,都要求有非常强的吸引力。  


整体要有节奏感


一屏一内容,一屏一视觉,丰富又有节奏的版块内容能够有效的吸引用户浏览下去,就像我们会不自觉的跟着节拍哼歌一样;一屏一个信息单元,能够减少用户操作,一眼就能就能接收到完整的内容。

贡献案例-华硕智凝专卖店



竖屏思维

移动端占领大流量,要求我们必须把更多的精力放在移动端设计,PC端和移动端受设备的限制以及用户行为习惯的不同,又形成了各自不同的设计规则规范,所以我们在做移动端设计的时候要有适应移动端的竖屏思维,不能简单的把PC端放大或者缩小直接放到移动端,尤其是在页面的布局排版上,要适应移动端用户从上而下的浏览习惯,以及在字体字号的选择上也要考虑用户在移动端的体验。


风格要统一 气质要协调

一个商详页只展示一款产品,所以产品的气质决定了商详页的气质。不管是科技感还是高冷风,都要从一而终保持统一的调性,毕竟粗旷硬朗的男生穿上软萌萝莉的裙子并不是人人都能接受。




贡献案例-B&O旗舰店 



第4节  京东商家视觉规范

商家视觉规范系统简介

商家视觉规范系统基于各品类运营规则、各系统工具的输出要求以及电商广告法的相关标准,整合店铺、商详、活动页、主图、视频等相关运营方的视觉规则述求,面向商家端输出的视觉合规标准,旨在提升商家视觉展现的规范度和合规度。


视觉规范系统可以解决哪些问题?

•         帮助商家了解京东平台的视觉规范和规则,解决视觉呈现方面的困扰;

•         通过规范的引导和执行,帮助商家提升视觉展现的规范度和合规度;

•         避免商家因为违反相关电商法和广告法规范政策造成的违规和侵权风险。


视觉规范的具体内容有哪些?

商家视觉规范系统整合了京东平台关于视觉的方方面面,包括店铺、活动、详情、主图、视频、系统工具、和版权 7大模块的视觉规范:

1.   店铺页视觉规范:包括店铺页面整体规范,图片规范,文字规范,版权说明,PC&M对比,系统工具的使用,设计框架和布局建议;

2.   活动页视觉规范:包括活动页面整体规范,图片规范,文字规范,版权说明,PC&M对比,系统工具的使用,设计框架和布局建议;

3.   详情页视觉规范:包括详情页面整体规范,图片规范,文字规范,版权说明,PC&M对比,系统工具的使用,品类标头模块,关联模块,设计框架   和布局建议;

4.   主图规范:包括主图和透明图的规则规范、添加路径和审核流程;

5.   视频规范:包括活动页面整体规范,图片规范,文字规范,版权说明,PC&M对比,系统工具的使用,设计框架和布局建议;

6.   系统工具:包括店铺页、活动页、详情页的装修工具入口及说明介绍;

7.   版权规范:包括图片版权规范和文字版权规范。

结合各系统工具的输出规则以及各品类的运营规范,输出视觉合规标准,同时还会通过实际的视觉案例分析展示,促进提升商家视觉展现的合规度和规范度。后续根据商家及业务侧需求融入更多的视觉规范标准,如活动banner、广告投放图等。



规范制定的来源依据是什么?

视觉规范制定的来源依据包括系统工具方、品类运营方、电商广告法规、以及电商呈现要求。

1.   系统工具:根据京东智铺装修系统、通天塔活动装修系统、装吧详情页装修系统、商家后台等各系统工具的输出要求和标准制定;

2.   品类运营: 根据产品管理部制定的商家运营规则系统(psm.jd.com), 结合3C、日百各品类产品运营管理规范制定;

3.   事业部需求:经各事业部、各采销体系多年的销售需求沉淀,针对各品类的销售运营展现需求,整理出符合各品类销售所需要的展示呈现要素;

4.   电商广告法规:根据广告法、电商法的内容法规和限制要求,遵循相关规范政策;

5.   电商呈现要求:根据视觉设计呈现规范和要求,满足消费者的视觉体验,遵循以美观度和销售导向的视觉设计逻辑。


京东商家视觉规范系统进入渠道https//svs.jd.com/


25
- 0位站酷推荐设计师推荐 -

    文章信息

    • 文章标签

    没有新消息