电商大促攻略页设计指南

通常我们看到的旅游攻略,游戏攻略等都是以文章资讯的形式呈现,只可阅读不可交互。而电商大促活动中的攻略页,可不仅仅是一篇资讯文章那么简单,除了要向用户传达促销信息,往往承载着引流,预约,发券,传播等营销目,同时存在很多交互操作。所以电商攻略页可被视为一个独立的小型产品,在设计这样的产品时,有什么设计方法可寻呢?本文内容即为笔者在多次大促攻略页设计经验中总结出来的一套方法,希望能对要设计促销攻略页的运营同学和交互同学有所帮助。 文章将从产品方案阶段基础知识,设计案例讲解,表现模型的可用性评价三个主要部分对攻略页设计进行讲解。先看一张图,希望大家能在头脑中能对攻略设计的方法形成一个大概的印象。 第一部分:产品方案阶段基础知识 1.1、战略层—产品目标确定和用户需求收集 不管是要做什么产品,在开始之前都要问这样两个问题: 我们要通过这个产品得到什么? 我们的用户要通过这个产品得到什么? 回答了第一个问题,即确定了产品目标;在攻略页的设计中,通常对攻略页定下的产品目标可能有:曝光大促内容,预约回流,为大促会场/自营活动/品牌活动引流,分享传播,发券,成交,品牌识别等。根据每次大促的战略不同,攻略页承担的产品目标也不一样。在确定具体产品目标后,需要对目标优先级进行排序,这决定了接下来的产品具体形态。 回答了第二个问题,即确定了用户需求;通常我们会对产品将要面对的人群进行分类建立用户画像,结合用户故事地图挖掘用户需求,但攻略页这个小型产品,面向全国大众,用户画像这步就可以省略了。 “攻略”这一常见的词汇在用户心中已形成一定的认知概念,可以用语言准确的描述为:在活动中向用户传达活动信息,帮助用户更好的参与活动并达到参与目的的指南性说明。所以,曝光促销信息,在页面上给用户提供参与活动的入口(参与方式),告诉用户怎么买最划算(省钱指导),即为本次产品的用户需求。 即使是攻略页这样的小型产品,在战略层阶段,也是需要各利益相关者共同得出的,当然最终的目标还是需要本次的产品决策者来确定,那个人应该是本次促销活动整体的大PM,或者你的直属领导。 可以把产品目标和用户需求提炼为关键词,整合在一张雷达图上。这个提炼过程可以帮助设计者更好的整合需求,避免需求重复或需求边界模糊的情况。根据每个目标的重要性进行节点标记,这样可以直观清晰的看出本次攻略页战略目标的数量和每个目标的优先级。你可以自由控制这张雷达图的节点数量和网格层数。保证你的关键词都是易懂的,如果简短的关键词一眼看去不能明其要旨,就需要对关键词进行备注性解释,毕竟这张图是为了帮助我们快速的整理需求,准确的沟通需求。 你所确定的每一个战略目标,都应该有一个验收标准;有些直接体现为业务KPI,比如预约占比达到50%,引流占比5%,发券率100%,流量扩散倍数1.1等。有些目标貌似没那么容易检测数据,可以通过用户调查来实现,比如曝光大促信息这条目标,可以问用户,看完这个攻略你知道怎么买更省钱了么?本次展示的信息看完记大概记住了百分之多少?对应的促销信息知道去哪儿找怎么参与了么?如果没有资源进行专业的用户调研,也可以问问周围的同事呀!这时确定的验收标准,也有助于在可用性测试阶段设计测试问题。 1.2、范围层—产品功能确定和内容网罗 当你把用户需求和产品目标转变成产品应该提供给用户什么样的内容和功能时,战略就变成了范围。 —–《用户体验要素》Jesse James Garrett 根据上一步我们确定的战略目标,可以提炼出具体的产品功能,比如:本次发券,以抽奖的方式实现,用户首次抽奖必中。这时的功能描述没必要具体到产品使用场景上,因为那是下一个层级,结构层—交互设计的工作,当然你也可以先想好几个备选的表现模型和产品使用场景。这里功能的确定主要用于执行开发调研和与交互设计师进行沟通。 通常在攻略页的设计中,我们能确定产品需要的功能有: 1.直接跳转:当某子活动正在进行中,或某件商品正在参与活动,需要给一个入口直接引流到对应活动页或商品详情页; 2.预约提醒:当某子活动即将开始,或某件商品即将参与活动,需要给一个预约按钮,以便于用户得到活动提醒,这时就需要考虑用户收到消息的方式,可以是短信告知(需获取用户手机号),app发送系统消息(需提示开启通知权限),调用系统日历提醒(获取系统日历权限),微信公众号提醒(需引导关注大账号)等; 3.一键预约:是否需要提供一键预约所有优惠功能;这个功能需要慎重考虑,需要考虑各子活动的开始时间,若全部提醒会过度打扰用户,就会面临取消关注,关闭通知权限,拉黑等不良后果。 4.抽奖:发券的形式通常是用户抽奖得券,引导用户分享的机制通常是获得抽奖机会,就需确定抽奖形式,进行奖池搭建和风险控制等 以上四点功能中,跳转和预约可以说是每个攻略页的必备功能,其它功能需视本次攻略的产品目的而添加,因每次产品的目的不甚相同,还可能有其它更多的功能,视情况而定即可。 内容方面,需要收集本次大促会场的数量,各个会场各自的促销时间节奏和优惠利益点;各个营销活动的时间节奏,奖品和玩法。通常在攻略页的设计阶段,我们并不能收集到特别详细的信息,只能确定一级活动的开始时间和最给力利益点,有时这种信息也收集不到,这就需要我们选择普适性较高的表现模型,能容纳的下任何类型的信息设计。 1.3、结构层-交互设计和信息架构 交互设计关注于描述“可能的用户行为”,同时定义“系统如何配合与响应”这些用户行为; 信息架构主要的工作是设计组织分类和导航结构。 让用户获得良好的行为引导和操作反馈,并高效的浏览内容是进行交互设计和信息架构的目的。范围层阶段我们提炼出了跳转,预约提醒,一键预约,抽奖四个功能和一个信息文档;在结构层我们对功能进行场景化描述,对信息进行组织分类,确定信息节点和结构方法,并选择合适的表现模型。 用户对于交互组件将怎样工作的观点称为概念模型(也称心里模型),设计者将功能展现给用户的方式称为表现模型,表现模型越接近于用户心理模型,用户就会感觉到产品容易使用和理解。在设计攻略页时,首先要设计个整体的表现模型,比如“攻略播报电台”,“内部泄密文件表格”,“新年醒狮送攻略”等会形成具体认知概念的模型,也可以不选择任何具象的趣味概念,直接以抽象的表现形式承载。但要注意,你选择的具象概念,不论是从视觉上还是从文字语义上,都要符合用户的原有认知。举个例子,我们曾经有过一个“攻略售货机”的表现方案,这个表现模型就存在认知冲突:用户对售货机的认知是,一个贩卖多种商品的机器,以此为表现模型,用户会疑惑“攻略售货机”是什么,卖攻略的么?机器里会卖很多攻略么?我要买攻略要什么成本么?……等等造成用户困惑的,对产品没有帮助的疑惑。同时“售货机”这个概念也限制住了视觉样式,要形成售货机的概念,视觉元素就脱离不开售货机本身;即使是选取关键视觉元素进行抽象表达,也不能形成很好的认知概念。 功能和信息可以细化成类似以下的描述: 1.当用户浏览到正在进行的卖场或活动时,可直接点击进入相应页面 2.当用户浏览到即将进行的卖场或活动时,可进行预约,通过微信公众号获得提醒消息,未关注大账号的用户先引导其关注大账号 3.正在进行的活动总是优先展示,其次展示即将进行的活动,再次展示已过期的活动 4.一键预约所有活动这一功能经评估,会对用户造成过度打扰且开发成本较大,不做此功能 5.抽奖的形式确定为彩蛋红包,用户首次进入页面并停留4s后出现动效红包引导点击,首次点击必中优惠券,在反馈弹框上提示用户分享可获得现金红包引导分享。 6.促销信息分两个页面展示,主页面展示趣味版,以主题进行一级划分,以品类进行二级划分,以时间进行三级划分,不设利益维度划分;简单版以时间维度和活动维度进行划分。两个页面分别设置互跳按钮,趣味版页内设计主题导航。 一些比较抽象的描述可以配合原型图来展示,一切都是为了方便沟通的快速表达。基于这样的描述和确定好的表现模型,我们就可以进入框架层阶段了。 1.4、框架层—界面设计、导航设计和信息设计 界面设计涵盖的范围比较大,包括基础交互组件的运用,创新交互样式的呈现,抽象信息的视觉符号化表现,信息呈现,和整体界面排版等; 导航设计是指引导用户在各种信息节点之间穿梭的方式,并告知用户在信息架构中的位置,最终会落实为界面元素; 信息设计包括信息分类和可视化设计,可视化设计最终也会落实为界面元素。 笔者沿用了《用户体验要素》中的分类方法,但对界面设计和信息设计的定义进行了小幅改动,可能这样的定义划分不是最准确,但保证了各个概念之间没有交叉,方便分析和处理问题。 攻略页中,涉及到的功能性交互组件很少,通常使用按钮、弹框,反馈toast。导航样式通常是页内锚点导航;如果攻略页本身包含多个页面,也需要页面间导航。促销信息通常以时间列表,日历图表,品类列表为基础样式进行展示。 1.5、表现层—感知设计 表现层是用户会首先注意到的地方,这里,内容,功能和美学汇集到一起,完成其他四个层面的所有目标,并同时满足用户的感官感受。攻略页的表现层涉及到视觉感受和听觉感受两个部分。因为是大促整个产品的子产品,在表现层设计时需确定攻略页的感知设计是否要遵循大促整体感知规范,如果遵循,要遵循到什么程度,攻略本身的可设计空间有多大。 工业设计界有个新的学科被称为“感性工学”,致力于研究人的感受与具体产品形态的对应,产品的视觉,触觉,听觉,嗅觉,味觉都可以通过感觉形容词进行描述,并落实到具体的产品形态上。攻略页表现层设计时,也可以用这种方法。我们收集视觉资料,确定预期的感觉形容词,比如年轻活力、热闹,复古,现代,未来科技感等等,在与视觉设计师沟通时,最好给形容词配上具体的图片,保证大家对形容词的认知理解在同一层面上。动效设计也同样,Q弹可爱、炫酷闪耀、平缓柔和等形容词都可以帮助你与视觉设计师沟通你想要的效果。 以上五个步骤并不是循序依次进行的,实际工作中经常会遇到反复的情况。比如进行到交互设计阶段发现需要加一个新功能才能实现产品目标,这时就要对范围层进行修改,并重新进行功能开发调研。为设计出好的产品这种情况不可避免,好的方法是,让每一个层面的工作在下一个层面可以结束之前完成即可。对应的,我们每个阶段输出的文档,都可能要面临很多次修改,每次修改都需要周知流程各相关人员以保证大家对产品进程理解一致。 以上五个步骤完成之后,产品方案阶段就完成了。运营同学根据交互稿编写《开发需求文档》 和《数据需求文档》 ,前端同学根据视觉稿进行前端设计。作为攻略页负责人,运营同学还需要考虑的就是攻略页的入口资源。 攻略页作为大促整体产品的一个信息节点,其入口也是大促整体的一个界面元素,具体如何设计,那是大促整体产品设计的范畴了。攻略页也可以作为一个完整的产品进行单独资源投放,如果你在今日头条看到一条咨询,标题为《京东双11大促省钱攻略》 ,也是很合理的事情。 第二部分:设计案例讲解 下面我来讲述一下京东微信购物入口2017年双11攻略页的设计过程,让大家能更好的理解攻略页设计的方法。 […]

“猜你喜欢”设计总结

‘猜你喜欢’当然它还有很多词汇可以形容,比如:为您推荐、为您精选…;经常在移动端购物的剁手一族们肯定都不会陌生;它似乎无孔不入般的存在于我们浏览的各种页面中作为长尾内容进行向用户补充推荐。我们在浏览时可能并不会细想其背后的逻辑是什么?这样设计的原因是什么?但仔细观察就会发现,虽然它们都有共同的名字‘猜你喜欢’,但在不同的运用场景下,其设计与推荐逻辑存在很大的差异化。 本文将从设计师的角度出发,全面而细致的介绍‘猜你喜欢’内容设计的思考与总结。首先,先来介绍一下什么是长尾 一、什么是长尾: 长尾(The Long Tail)这一概念是由Chris Anderson在2004年十月的“长尾” 一文中最早提出,用来描述诸如亚马逊和Netflix之类网站的商业和经济模式。 长尾理论是网络时代兴起的一种新理论,当商品的销售成本急剧降低时,几乎任何以前看似需求极低的产品,只要有卖,都会有人买。这些需求和销量不高的产品所占据的共同市场份额,可以和主流产品的市场份额相比,甚至更大 二、设计‘猜你喜欢’的原因: 简单了解长尾的含义后,可以清晰的知道移动电商在页面中要加入长尾设计(猜你喜欢)的原因:利用互联网移动端页面无限长的框架进行更多货品的曝光来留住剩余未跳转流量进行商品售卖来实现价值最大化 三、‘猜你喜欢’常见的内容形式: 猜你喜欢的推荐逻辑多以用户历史浏览记录或已购买记录进行推荐,而单品推荐更加贴近触达用户;因此,单品是经常运用到的展示形式,后续讲到的关于如何设计猜你喜欢也是以单品为例。同时,随着推荐逻辑的逐渐完善,为了丰富产品内容以及满足用户多维度需求,逐渐增加了关键词、促销活动、品牌、资讯等内容形式,通常以穿插的形式展示在单品列表中 四、如何设计‘猜你喜欢’: ‘猜你喜欢’涉及的后台技术为BI推荐(实现模型),即将现有的用户数据进行有效整合,快速准确的提供决策依据,帮助产品做出明智的内容呈现,这里将不在多做介绍延展;主要从界面设计(表现模型)、及用户分析(心理模型)这两方面出发进行分析。 在移动端购物APP界面中,运用猜你喜欢的场景大致有如下页面:首页、搜索结果页、商品详情页、购物车页、个人中心页、购买成功页、订单详情页、物流详情页、大促页面等场景。接下来,将分场景介绍在不同页面下如何设计‘猜你喜欢’。 4.1首页: 是最重要的运用场景,如京东、淘宝、严选等的首页都是以猜你喜欢作为长尾展示。用户在浏览首页时,多以无目的闲逛为主,当用户未在重点活动或栏目入口处点击跳走,此时进入长尾内容区‘猜你喜欢’,如何留住用户的脚步是其重点;因此首页‘猜你喜欢’的推荐逻辑多以用户历史浏览记录来向用户推荐,以此来激发用户的潜在遗忘需求。 随着首页猜你喜欢运用场景的完善,后续可以单品推荐为主,增加关键词、品牌、促销活动、内容资讯、店铺等内容的穿插,既能丰富内容推荐维度,又能满足不同维度偏好的用户在闲逛时激发其潜在需求 在设计首页猜你喜欢单品样式时,也从最初由图片、标题、价格三种元素组成的基础样式,逐渐演变新增了功能按钮:看相似/不喜欢/加车、推荐理由、标签、标识等的展示。对于这方面的具体设计将在后面详细讲到 4.2搜索结果页: 搜索是用户在移动端购物使用的重要场景,此时用户目的明确,但不排除所输入词汇系统不可整体识别而出现缺省页的情况;或者,筛选出的结果太少等情况的发生。为避免这两种情况的发生,往往会通过猜你喜欢的形式,识别用户所输词汇的部分字段进行推荐,或者历史浏览记录向用户进行推荐。 4.3商品详情页: 用户在浏览商详页时,此时目的较为明确:对此商品有较高兴趣或需求;在此场景下,若用户未能进行直接购买的行为,如何让用户在此场景需求下继续逛下去是其重点;因此商详页‘猜你喜欢’的推荐逻辑多以相似商品或排行榜形式来向用户推荐,以此来补充用户对比较、筛选场景的需求。 商品详情页包含商品基础信息介绍(图片/价格/促销/店家等)、评价、图文详情等,页面篇幅较长;此时,很难像首页一样把猜你喜欢作为长尾进行展示处理。原因有两点:1.在海量商品面前,用户更多是通过基础信息项来锁定商品,在多数情况下很难浏览到页面靠下的位置,若还作为长尾展示,很难进行模块的曝光;2.此场景下的猜你喜欢满足了用户对此类商品比较筛选的需求,在初期商品筛选中,与图文详情相比对用户意义更大。 因此,对商详页猜你喜欢的设计,往往会固定模块高度放在商品基础信息(图片/价格/促销/店家等)之后,图文详情之前进行展示。常用形式为:一排三个展示两排,可滑动拓展的形式解决因限制模块高度而造成的商品曝光数量受限的问题。这里的单品样式较为简单,多以图片、标题、价格三种元素组合而成。 4.4购物车页: 购物车页属于功能型页面,用户多数是查看已加车商品或选择商品进行支付,是进行支付环节的前一步,以目的性浏览为主;如何提升下单率是其重点;因此购物车‘猜你喜欢’的推荐逻辑多以加车记录来向用户推荐,以此来满足用户对比筛选的需求。表现形式如:购物车有XXX的人还在对比;购买XXX商品的人还买了。 4.4个人中心页: 与购物车页一样属于功能型页面,是用户相关信息整合页,以目的性浏览为主。此页面‘猜你喜欢’的作用是以补充内容,长尾展示为用户曝光商品为主,推荐逻辑多以用户历史浏览记录来向用户推荐。 4.6售后环节:购买完成页、订单详情页、物流详情页 售后环节的购买成功页/订单详情页/物流详情页与个人中心页面一样,是用户相关信息整合页,以目的性浏览为主。其猜你喜欢的作用是:补充内容,长尾展示为用户曝光商品;推荐逻辑可以此订单商品的连带商品向用户推荐,挖掘其潜在需求。 4.7大促页面:主会场、分会场等 大促页面是猜你喜欢运用的另一重要场景;因大促页面内容较多,页面篇幅也较长,猜你喜欢主要作为补充内容进行长尾展示;推荐逻辑多以用户历史浏览记录+会场属性来向用户推荐。因本身大促页面设计及促销信息繁杂,此时猜你喜欢的样式设计趋向简单更容易释放用户的浏览压力,因此样式多以图片、标题、价格、看相似等基础元素组合而成,以一排两个或三个的形式进行展示。 五、‘猜你喜欢’组件化设计: 在众多场景中都有猜你喜欢的涉及,为了提高设计、开发的工作效率,以及用户体验的一致性,规范猜你喜欢单品样式,进行组件化设计是一个很好的方法。目前猜你喜欢的单品模块可以归纳为七个组件,分别为: 1.商品图片:占据最大位置的组件,也是用户关注的首要元素 2.商品标题:有一行两行标题的区别,但猜你喜欢通常使用两行标题来展示更多的信息 3.商品价格:核心组件,有单价格和双价格展示之分 4.标签:分为大促标签、腰带标签、日常促销标签三种样式,一个单品可同时出现这三种标签,因此信息传递的层次性是设计的关注重点 5.标识:如自营、全球购、沃尔玛、京东精选等表明商品从属的标识,一般只展示一种标识 6.操作功能区:如看相似、加车功能按钮等 7.业务拓展区:如推荐理由的文案描述,同时支持链接填写 当一个单品同时出现上述七个组件时,如何使信息传递具有层次性,是设计重点;同时也要考虑不同单品展示不同组件对页面框架造成的影响:如图片、商品标题、商品价格组成基础单品架构,而其余组件的设计应该在不改变单品基础架构的前提下进行设计,这样才能使样式更具有普适性。 六、思考:猜你喜欢是否能够作为独立的产品进行展示? 讲到此刻,相信大家都有个疑问:猜你喜欢是否能够作为独立的页面场景进行展示呢?天猫APP2017年6月发布新版,可以清楚的看到首页框架发生了极大的改变:除保留一排icon、banner、两个品牌入口外,其余内容以猜你喜欢单品的形式进行承载,频道/活动入口穿插至单品中;可以看出此次改版以简化框架,重猜你喜欢的形式进行展示为主。但在不久的10月发布了与6月相比变化较大的首页改版:前两屏不仅增加了有关天猫直营的天猫超市/生鲜、进口、魅力惠等频道入口,还增加了品牌维度的入口曝光,最大的改动是猜你喜欢变成了切类目TAB的形式展示,默认TAB为精选(原猜你喜欢的内容) 我们无法拿到6月改版后的数据变化,但可以大胆猜测10月改版的原因:1.6月轻入口重猜你喜欢的形式,无法使重点栏目得到充分的流量曝光;2.由于各电商平台的数据壁垒,无法精确推测用户行为,使猜你喜欢的内容推荐无法精准的集中用户     笔者认为:就目前的市场环境与技术发展,猜你喜欢并不适合作为独立的页面场景进行展示 写在最后的话: 以上都是关于猜你喜欢的个人设计思考与总结,希望能帮到看完全文的你;可能会有一些缺点和不足,欢迎一起讨论,互相学习,共同进步。

大促分会场-模块化设计方法总结

写在前面 在电商的世界,似乎一切时间都可以和购物挂钩,5.20、6.18、11.11、12.12、年货…..;有购物节就要有各种各样的会场进行促销展示;面对越来越细分化的类目会场,作为设计师需要把多达几十个会场一一设计出吗? NO!如何提高设计及后续工作的效率,似乎在工业产品的标准化零件中找到了答案——标准化模块设计 如果将会场比作工业产品,模块即是零件,动线即是图纸;使用不同的模块与动线,即可组成满足不同需求的会场 如何进行会场模块与动线设计?接下来将从模块设计原则、其它设计要求、会场动线设计三个部分进行讲解 一.模块设计原则 从往年多次负责大促分会场的设计实践中,总结出一些模块化设计原则:可变性、可拓展性、丰富性、创新性;其中可变性与可拓展性属于结构化原则,创新性和丰富性属于内容性原则;接下来将逐一介绍遵循这些原则的原因以及如何遵循 part1.可变性原则 模块化设计并不意味着所有会场一成不变,需求总是多种多样的,如何在模块设计下满足需求的多样性,是遵循可变性原则的重要原因。 案例1.不同会场因其自身的需求,所要求放置的类目入口数量不可能完全相同,而在类目入口模块的设计中,如何满足数量的可变性呢?需要我们把握屏幕尺寸、模块最小可接受尺寸、浏览动线、尺寸的规律和融合,然后设计基础组件,需求方可根据不同的基础组件搭建不同数量的的类目入口如下图示:          案例2.单品模块的设计,不同类目要求展示的信息侧重点不同,拿一排一个单品展示样式为例:我们会模块化商品展示尺寸,固定信息可变区域,设计可变信息的基础组件     在可变区域内,考虑信息的布局、尺寸、字号、间距等,在方寸间千变万化,如图示: part2.可拓展性原则 方盘货策略、用户浏览记录、实时库存等都会影响会场各模块的内容展示数量,如何满足因数量变化而形成的会场差异,是模块化设计中考虑可拓展性原则的重要原因 案例1.‘加车商品降价提醒’模块:此模块自动拉取用户加车商品降价记录,因此用户不同看到的内容数量不同,此时的模块设计需要考虑0、1、2、3…数量的变化,同时需要考虑页面布局、模块占用高度等,如下图示:(此时,不使用一排多个竖排版的布局样式,是因为当只有1/2个商品时,布局有缺陷,对数量的兼容性较差)   案例2.优惠券模块:同样是需要考虑数量变化带来的样式不同,如下图示:       案例3.常用的品牌+单品的模块设计,因考虑平铺单品模块较高,采用单品横行滑动的设计,既能拓展单品展示数量,又能较好的控制模块高度,如下图示: Tips:有些模块的设计要同时考虑不同原则的设计要求,就如类目入口的设计需要遵循可变性原则的同时也要遵循可拓展性来满足数量的变化 part3.丰富性原则 需求总是多种多样的,以品牌模块为例,不同的类目有不同的展示需求;我们不能强迫所有会场使用同样的模板,这违背了类目个性;此时需要我们收集类目需求,判断需求的合理性,然后进行样式设计     part4.创新性原则 模块设计并不是延续以往一成不变的,好的模块需要继承,但更需要创新来应对需求的变化;创新并不是天马行空毫无根据的,需要我们在充分了解需求的前提下同时考虑尺寸、间距、大小等天然限制,更需要我们平时素材的积累来寻找灵感     二.其它设计要求 在实际的会场模块设计中,除了要遵循上述四条设计原则,还有一些更细致的设计要求需要我们综合考量 1.挖掘运营实际需求 2.屏幕的天然限制(尺寸、字号、间距、大小等) 3.技术的可实施性 4.用户体验感受 5.视觉氛围呈现 三.会场动线设计 已经讲了很多关于会场标准模块化设计的一些原则和注意事项,此时我们会根据设计输出一份包含各种各样的模块组件库交付给需求方;我们的设计工作完结了吗?当然不是!正如刚开始所提到的:将会场比作工业产品,模块即是零件,动线即是图纸;若没有一份图纸的指引,需求方搭建出的会场页面可能是千奇百怪的,这无疑增加了我们后续评审的工作,同时需求方也可能因为错误的搭建而做无用功;此时我们不仅要输出模块组件,还要给到动线设计示例。 作为设计师如何给出合理的动线设计示例?对于这个问题比较难回答,更多的源于日常工作的经验积累,这里有三条积累途径分享给大家: 1.来自日常各类目促销卖场的设计、评审总结(熟知各类目特性、日常卖场结构与沉淀) 2.来自往年大促设计的经验沉淀(各类目上线后的实际情况、数据分析、效果对比;总结精华,剔除糟粕) 3.来自对竞品的学习(多看、多截屏,分析总结竞品动线优缺点) 最后输出动线示例图,如下图:(一般会给出常用的几条示例)   写在最后 动线设计示例更多是作为参照物存在的,类目还需根据实际需求看待,动线搭建应以简洁高效、清晰明了为核心设计点;更要在各类目搭建完会场后进行逐一的交互评审检查。

清新而不失丰满-京东商城 iPad 4.0 商品详情页改版设计总结

​京东iPad作为一个独立的客户端app,在外界看来一直处于一个比较尴尬的境地。一方面对标的电商类竞品们大都放弃了Pad阵地,基本放弃了原生界面的开发;一方面在京东内部,相对于其他的客户端,Pad的体量也一直占比不高。但作为以品质保证、用心服务为价值观的一款京东产品,我们依然希望为Pad端用户设计最好的购物体验,这也是京东人自上而下达成的共识与默契。因此,作为负责京东商城iPad端产品设计的上海设计部创新设计组,经过大量的目标用户研究、商业逻辑梳理、前后台研发沟通等工作后,于17年的春季上线了4.0版本。 改版方向思考 在4.0改版立项之初,创新设计组与负责Pad的产品团队做了多次头脑风暴,除了新增业务之外,我们还应从哪些方面提高用户的购物体验?我们最终决定返璞归真,回溯Pad端京东商城最初的目的是什么?我们需要服务的用户有什么样的特点和需求?其次,分析目前整个大的购物环境发生了哪些变化?用户在京东的购物心理发生了哪些变化?Pad客户端的性能和使用习惯发生了哪些变化?结合这些因素,我们最终定稿了4.0的改版方向,而商品详情页的改版方向也随之确定下来。   设计服务于商业目的 在商业大背景下,任何决策都是服务于商业目的的,包括用户体验设计。京东商城Pad端的商业目的就是让使用Pad端京东的用户更方便、高效的购买ta喜爱的商品。 体验设计可以赋能商业,为了最大化的实现商业目的,我们要做的就是发现Pad用户的购物方式、喜好、需求特点,为他们定制最好的购物体验。 Pad大屏的特点 要想为Pad端用户设计更好的购物体验,首先要了解Pad端的特点。Pad作为一款大屏的移动端设备,它和手机相比有以下几个特点:   屏幕比一般的手机更大些,便于查看图片、视频等富媒体内容 一般需要双手操作; 使用横、竖屏的用户都占一定的比重; 性能的更新速度没有手机快,很多用户还在使用很老旧的设备; Pad一般作为”共享设备“和家人共同使用; Pad的使用时间不如手机碎片化,一般集中在中午、夜间、周末等空闲时间; 一般在有wifi的环境下才能使用;   Pad的这些特点也为我们刻画了一副Pad用户的粗略画像。那么除了硬件设备带来的使用习惯特点之外,在Pad京东的商品详情页,用户又有哪些使用习惯和痛点呢?我们对改版前的商祥页做了对比分析。 老版商品详情页的体验分析 商品详情页作为承载商品介绍信息的主要页面,对于引导用户购买商品,提高“下单转化率”至关重要。因此,商品详情页信息展示要做到足够简洁、易懂、易查找、易操作。 运营目的制约易读性 电商运营团队为了吸引用户下单,往往会发明许多促销、活动、服务等业务,这些信息都需要展示在商品详情页中。而屏幕的尺寸是固定的,用户的信息接收载荷有限,这就需要设计师通过转移、隐藏、分类等手段将信息更好地组织起来,让信息变得更加易读。 老版商祥竖屏 老版商祥横版 上图是老版商品详情页的横竖屏截图,可以看出,在横竖屏两种模式下,内容的排版是不一样的。这其中的原因是为了在两种屏幕模式下展示全部的内容。Pad大屏幕的优势是可以展示商品大图,而清晰的大图/视频是吸引用户对商品感兴趣的第一因素。促销信息也很重要!对于大量的追求性价比的用户来说,折扣、优惠券、活动等促销信息可以帮助他们从感兴趣的多个商品中选择一个性价比最高的商品。而规格、地址等信息又是用户下单所必须选择操作的信息。因此,为了服务于商业目的,老版的商品详情页将这些“重要内容”统统摆在了首屏。 旧框架不再兼容新内容 将繁杂的“重要信息”放在首屏变成了一项“政治任务”,为了完成这个任务,Pad京东商城在很长一段时间里不断地对商详首屏做细节的优化,还要满足业务方不断的新需求。比如促销活动的不断丰富(满减、满赠等业务的增多),京东物流业务的不断增多(运费规则的不断细化),这些都导致了商详首屏在阅读体验方面的不堪负荷。不仅仅在设计层面,研发层面本来对同时维护横竖屏两套框架就有不同的看法,新业务的不断增加也加重了研发团队的维护压力。这些原因都促使了商详页面的重新设计。 内容动线割裂 用户在电商购物已基本上养成了一条主要动线:商品图-价格优惠-评价-图文介绍-相似好货。因此,主要动线内容的关联性很重要。旧版商详在第一屏展示了商品图和价格优惠信息,但在评价,图文介绍和相似好货的展示方式却有所割裂。 推荐套装,相似好货等导流内容以tab形式展示在第二屏,很容易被用户忽略。购物动线有所割裂 新版商品详情页的改进方案分析 针对老版本商品详情页的一系列体验问题,我们通过与产品、研发以及业务方的多轮沟通,确定了方案的优先级与可行性,新版商品详情页主要从以下几个维度来优化的。 易读性为先 4.0版商品详情页-竖版 为了保证信息的简洁易读,新版的商品详情页不再将价格优惠等运营相关内容局限在第一屏,通过对内容归类,利用间距、分割线等视觉手段将内容重新组织起来。卡片式设计有利于内容的阅读性,通过阴影层级将大篇幅的商品图片置于文字内容后方,又利用了渐变错位动效让用户在浏览文字信息时逐渐隐去图片的干扰。 标准化框架的一致性和可扩展性 京东的商品购买类型是多种多样的,并且随着运营业务的拓展,商品购买类型会越来愈多,这就为商品详情页的展示框架设计带来了挑战。要设计一种可拓展兼容的标准化框架,且不仅仅满足现有类型,还要兼顾以后可能的商品类型。了解业务逻辑是做好设计的前提,在于产品与业务方多方沟通后,经过多轮的方案评审,我们采用了垂直式的楼层设计方案。将各类信息汇总分类,并归属于相应的楼层模块,并根据不同的商品购买类型,有后台控制展示楼层信息。比如最重要的商品名称和价格楼层,普通商品、全球购、山姆商品、秒杀商品等各自展示的信息都不相同。我们预先设计了最复杂商品类型的信息展示框架,并预留了未来可能增加的信息展示位。标准化框架有利于内容的一致性,增强了易读性,同时也降低了研发和维护成本。 预售、全球购、秒杀商品的信息展示框架是一致的 弹框是另外一个例子,在4.0之前,Pad京东商城的弹框有很多种,在不同页面场景下使用的弹框并没有被统一。随着4.0大改版的设计梳理,我们与研发同学一道梳理了弹框、toast、alert等组件的使用规范。商品详情页有很多的内容是通过弹框展示的,我们使用新规范的弹框来为用户营造了一致性的体验,降低了用户的学习成本,提高了阅读性。 4.0商品详情页的弹框 场景化的内容动线 用户通过前期的搜索挑选,当进入商品详情页的时候,通常已经对该商品产生了兴趣,接下来需要全方位的了解商品,从而决定是否购买。在Pad这个大屏的移动设备下,用户更容易产生沉浸式的阅读体验。因此,新版商品详情页在内容的布局分布上做了充分的引导。 顶部的TAB式导航确保用户在第一眼就了解信息的整体分布,侧滑切换相比点击切换则更加平顺流畅。下拉首屏伴随着图片的放大,则可以暗示与引导用户查看大图。评论信息是大多用户判断是否下单前一定会看的,而将评论信息入口放在导航的最后位置有些过深,增加了触达成本。因此,我们在商详首页第二屏的位置增加了评论的快捷入口,外露部分评论信息让用户能够快速发现。 一个完整的商品浏览闭环是从阅读详情到下单购买,但同时我们也要考虑到用户对该商品不感兴趣的情况,“相似好货”是目前最主流的“闭环兜底方案”。相似好货可以引导用户继续查看相似的品类,进入下一段商品浏览闭环流程。就像我们在菜市场买菜,我们在一个摊位看了一圈发现没有新鲜或者想要的菜品时,我们会很自然的查看下一个摊位。因此,“相似好货”应该放置在用户接近离开页面之前的位置,也就是商详首页的最底部,这符合了自然场景下的挑选商品动线。 楼层框架的扩展性分析 楼层的框架形式有利于商品详情页的内容可扩展性。通过前后端的楼层框架设计,当新的运营内容需要展示时,只需要选择一个楼层位置,将该楼层的内容展示进行设计和实现即可,更有利于整个页面的维护和整体感的统一。 礼物购、优惠套装作为单独的楼层展示 楼层框架的优势不仅仅表现在商品内容的可扩展性上,在一些运营维度的页面氛围表现上也更加高效。京东商城经常会有一些超级品牌日、超级品类日的促销活动,在活动当天,商城首页通常会展示一些banner、皮肤之类的氛围视觉优化,以营造促销场景。 手机京东首页-荣耀8超级品牌日 为了营造购物场景,商品详情页也增加了“氛围楼层”,当大促活动时,详情页会展示相应的大促氛围,营造一种促销场景。氛围楼层统一了大促活动的页面布局,设计只需要针对氛围楼层进行设计,研发也只需要在活动当日打开氛围楼层开关,节省了部署和维护成本。 新版商品详情页上线情况总结 从4.0上线初的数据来看,新版商详页通过对整个购物动线的引导式梳理,内容框架的易读性优化,用户从进入商品详情页到加入购物车的“提袋率”有了进一步的提升,并间接拉升了商详-结算的订单转化率,针对Pad端总体的用户使用情况来讲,这次的商详改版是成功的。更重要的是,此次4.0的整体改版为商品详情页,乃至整个核心流程的页面进行了结构化梳理,通过楼层框架的扩展性设计,为以后新业务、新内容的拓展提供了标准化的设计规范和理念。 Pad京东商城4.0此次的改版不仅仅是设计层面的,通过与目标用户的进一步沟通交流,我们对于未来Pad端京东商城的内容运营上面也有了新的认识,在不久的将来,我们将为我们的用户提供更加优质的、更有针对性的内容,让用户享受到更加个性化的“逛”体验。

年货大促导流卖场楼层搭建经验总结

各种大促、营销活动都在重复着一项工作——卖场楼层的搭建。 大促卖场根据其作用,可分为导流卖场(通常是“主会场”)和成交卖场(通常是“分会场”或品类、品牌、活动卖场)。     导流卖场的楼层,通常以类目或主题为维度的聚合模块,每个楼层包含N个成交卖场的导流入口。 导流卖场楼层设计包括如下几个方面:     1.为了方便用户纵向浏览、不用多余的操作,一般选择直白地暴露坑位,较少考虑左右滑动、隐藏 展开等设计; 2.坑位样式应具有较高的灵活性(包括数量、大小等),适应不同类目的的需求; 3.设计前能够确认坑位的数量范围,能更好地选择合适的坑位样式;   单行栅格划分 一、特点 1.界面工整、利用效率高 2.适用于无差异的坑位入口划分 3.任何数量的坑位都可以灵活搭建,坑位的高度可根据需求调节   二、应用举例 如果全部用高效的栅格划分的坑位样式来设计类目楼层,以11个坑位为例,如下图: 11个坑位也可以设计如下:   两行组合 一、特点: 1.坑位较大,可放置更多的信息 2.适用于有着重突出的坑位组合 3.可根据需要突出对象的不同采用不同的组合,亦可适当调节坑位的高度和宽度。   以上坑位样式180度横向翻转后仍然适用,例如:   二、应用举例 1.两行组合的模板既可以单独使用(楼层坑位少时),也可以与单行栅格模板组合使用(楼层坑位多时)。如下图:   2.不同的坑位样式设计可用于突出不同的对象,以16年年货大促不同阶段主会场楼层设计为例:   异形 一、特点 1.适用于有着重突出、或其他特殊要求的坑位组合 2.有更多视觉设计发挥空间,容易有新鲜感 3.可能对信息显示规范有不同的要求   二、应用举例 异形模板在大促期间较少使用,没有充分的数据支持,采用时请慎重。如下是衣橱app15年双12主会场类目入口:     1.导流卖场楼层的每个坑位通常包含信息有:细分类目/活动名称、利益点、图片素材、点击引导 图标(可选); 2.信息显示的样式可根据坑位大小让视觉设计师发挥,原则是突出名称、利益点,商品图烘托有 度;   标题/利益点 1.根据运营需求,选择突出标题或突出利益点; 2.文案的字号不宜过小,尤其是需要突出的信息点; 3.文字的以横向为佳,方便阅读。 […]

© 2018 JDC. All Rights Reserved.