header_v1.7.39

营销页面设计方法在零售空间中的设计秩序

128天前发布

原创文章 / 多领域 / 教程
阿里巴巴_B2B_UED 原创,如需商业用途或转载请与阿里巴巴_B2B_UED联系,谢谢配合。

利用营销视觉设计的方法,赋能新零售浪潮下店面空间的信息设计秩序。

文章写在2017天猫双十一全球狂欢节结束后。自天猫2009年首创双十一购物节以来,每年的这一天已成为全民购物盛宴。在当前经济下行压力加大的背景下,双十一购物狂欢节的汹涌客流和极为庞大的单日成交量显示了用户群体较强的消费意愿和较高的消费能力。在这九年里,作为阿里巴巴每一次促销活动页面的创作者,不仅仅在视觉表现上创造出一场场令人叹为观止的视觉体验,在视觉的背后,也有着完整的视觉传达以及逻辑秩序。我们将从题图的信息视觉秩序和会场的信息视觉秩序,两部分来了解营销活动页面中的方法,利用营销视觉设计的方法,赋能新零售浪潮下店面空间的信息设计秩序。


会场页面的信息视觉秩序


在线上页面的视觉设计中无论web还是无线,他们都是承载在浏览器中的。而浏览器作为视觉透出的窗口,结合鼠标操作的习惯,因此用户浏览页面的行动是线性的。例如“尼尔森F视觉模型”中指出用户的视觉随着操作行动,通常不是先看中间,而是根据母语的读写习惯,经过大脑的指令,按照:从上到下,从左到右的路线进行查看。从左上角至右下角优先比重逐级递减。首先用户会先从顶部开始从左到右水平移动。从而目光再向下移。开始从左到右观察,但是长度会相对较短。最后以较短的长度向下扫视,形成一个 F形状。此时我们的阅读速度较慢,也更为系统和条理性。



因此在过去经验中我们也依据用户线性的浏览动向,将整个活动的页面分为了四个主要区域。而他们则承载着不同的作用。


1)氛围题图。活动题图承载着运营内容的主副标题、利益点的重点透出和传播。同时它需要为用户进入页面后,带来视觉上的信息进入感和关联感。再依次在用户线性前进的过程中带动信息内容的确定感和沉浸感。这就是题图创作中信息视觉的递进秩序。


2)会场分流器。会场页面题图部分向下的区域,负责引导用户前往定向内容或利益点细分的功能。在用户与题图主题产生体感关联后,在视觉信息的这个部分,引导用户进行首次判断,辅助用户对信息目标产生肯定感。而分流器是面向具备清晰购买目标的用户群体。他们的特点是清晰的了解活动特征并产生强烈关联感。


3)海景房模块。是负责重点商品的透出传播的区域。它具备计划性的同时也担负着营销策略变化的可变性。随着互联网大数据的深入,营销时期的海景房模块已经具备千人千面的特点,定向个性化内容常常会在这个区域,对用户进行强弱不同的引导,进而形成营销内容,当然通常依据营运策略,分流器和海景房的促销区域时常会进行位置互换,并不是固定不变的。



4)行业楼层。线性浏览的行动,行进到的第四区域是主题会场设计中的子区域。负责承载页面活动的商品和区域划分的作用。当用户浏览到此时,用户已经完成了从进入页面形成对活动的理解,但并未就以上区域的辅助信息产生明确判断。进而直行达到的楼层设计则可以在设计信息上增加丰富性,最终帮助用户前往准确的商品detail。


以上从纵向观察四个区域的信息作用,分别承担着用户从外部banner入口进入页面会场之后,信息体感的递进模式和责任。作为UED营销视觉,我们也依据这样的信息秩序分别向不同板块注入了四个感知阶段。即用题图氛围营造明确的进入感、通过题图中焦点信息和用户产生关联感、通过分流器或者海景房引导用户产生内容肯定感,随后的用户行进将逐步进入视觉沉浸的感知中。


会场题图的信息视觉秩序


从页面的纵向我们通过四个递进的感知,向用户输送页面的信息设计秩序。在题图的视觉设计中我们也有着明确的信息排序。在过去的专业输出中,我们将营销设计从形式感的角度分为了前中后三景。通过前中后的三个位置的设计我们可以得到一张完整的营销视觉画面。但是营销视觉设计不单纯是一场艺术设计,作为互联网营销的一种重要设计形式,视觉题图设计也蕴含着不同的信息逻辑,因此我们进一步将三景分为了焦点信息层、辅助信息层和背景信息层。每一个景别都清晰的承载用户进入页面后的信息感知。通过明确的信息分区,我们就可以得到一张功能性和艺术性结合紧密的营销设计题图。




1.景别一:焦点信息层


在我们设计营销页面中,我们通常会设置一个重要的视觉焦点,视觉焦点所富含的信息主要由主标题文字信息和图形核心为主要元素。那么焦点信息层起到的作用是在用户视觉对焦的时候,第一时间获得准确的信息接收。文字是人类文明发展以来的准确信息承载的最佳方式,往往会处于画面的中心位置或者靠前的位置。但是有时候在大型促销氛围中,我们也会使用更多的图形处于焦点的位置,例如农村淘宝双十一的页面,我们在通过走访用户、收集业务目标、提出体验目标后得出的设计策略是:具象的群众聚集欢庆的画面。因此我们的焦点信息层通过群众聚合欢庆的形式画面准确表达了狂欢的含义。这也是一种表达的设计策略。灵活调整焦点信息也需要根据设计策略随时进行变换。


2.景别二:辅助信息层


当在焦点明确传递之后,在营销页面设计当中为了使用户更深层次的获得肯定的感知,辅助信息层则是一个必要的环节。例如活动焦点是“冬季女装五折起”。当用户获取信息时,若页面毫无女装热点品牌或者没有冬季特征元素,则用户会对接受的焦点信息产生疑虑。任何在促销中的犹豫和疑问状态都是造成用户跳失的主要原因。因此辅助信息层所起到的作用除去帮助用户肯定焦点信息,还有帮助用户产生活动的关联感,打消犹豫和疑虑。


3.景别三:背景信息层


当用户对于活动焦点信息完成认识和肯定的情况下,保持用户持续感知的视觉信息则在于第三景别的背景信息层。关联的就是我们前面谈到的沉浸式体感。很多设计师在设计营销页面的时候通常不会将背景设计纳入信息秩序当中。但是在阿里巴巴的各类营销活动中通过背景中的色彩和机理调节,确保用户对于会场和活动的级别有显著的感受。例如在S级大促中,我们会预设好主会场的色调,即明度和纯度较高的红色暖系颜色。但是通过分流的主题会场和其他分会场则尽可能的规避该色调。以保证整体活动的视觉色彩信息,带给用户既微妙又明确的主次区别。


通过页面纵向和题图部分横向的分析,我们针对营销运营活动可以建立起一套纵横均明确的信息设计秩序。当然在不同的业务场景下,我们会针对业务属性的不同和其需求的不同,做出不同的响应和调整。虽然设计本身背离不掉艺术属性,但是用户体验的目标总是严肃又任重道远。一横又一纵的设计方法可以在线上页面的设计中给予大家一些参考。但是在不同属性的电商平台间,营销设计也有着不一样的设计策略。以下我们以严选和天猫平台为例,看看其中的信息设计的秩序。


——————————————————————

1、以上只是文章的部分内容,更多精彩请“淘宝”“天猫”搜索《U一点料Ⅱ》了解详情。

2、您也可以访问“U一点”的官方博客,查看更多优质文章。


作者:superking | UXD

805

    文章信息

    • 文章标签

    Hello PM 意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功