IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

淘宝双12亲亲节:活动视觉分析(预热期)

Catherine • 2017-05-14 04:31 • 交互设计

双12对比双11,最大的区别是双11更强调品牌的狂欢、而双12更强调年轻、有趣、活力。本文作者将为大家分析一些观点,仅供参考!亲,能包邮吗?亲,还能在便宜点吗?

文章目录[隐藏]

  • 一、活动定位
    • 1、设计关键词 ─── 年轻、网络、亲
    • 2、内容营销───话题及直播设计风格
  • 二、官网首页氛围
    • 页面
  • 三、会场视觉分析
    • 层次
    • 氛围
    • 配色
    • 淘宝H5

双12对比双11,最大的区别是双11更强调品牌的狂欢、而双12更强调年轻、有趣、活力。本文作者将为大家分析一些观点,仅供参考!

淘宝双12亲亲节:活动视觉分析(预热期)

一、活动定位

(活动定位由同事亮神分析)

1、设计关键词 ─── 年轻、网络、亲

双12对比双11,最大的区别是双11更强调品牌的狂欢、而双12更强调年轻、有趣、活力。

(1)采用有趣的人物形象为主体,能快速地将用户代入轻松的氛围里,而且能呼应“亲”的主题。人物不管是老的少的小的,都齐聚一堂。

淘宝双12亲亲节:活动视觉分析(预热期)

(2)网络用语的烘托氛围,如图中的@、#、,、~……不管是逗号还是句号,这些的确都是我们平常聊天中会用到的。

淘宝双12亲亲节:活动视觉分析(预热期)

其次是 “Fashion” 的 logo和其它元素做到统一,同时元素上面也区分了以往活动中大家都用的几何形状,千篇一律。相反这些更有意思、有趣、贴合网络。

(3)淘宝亲亲节在视觉定位上更加年轻,丰富的色彩和立体的网络符号以及情绪化的文案。

淘宝双12亲亲节:活动视觉分析(预热期)

(图片来自淘宝)

2、内容营销───话题及直播设计风格

今年淘宝亲亲节更加注重内容营销,围绕用户兴趣主推了12个话题。在话题设计上,使用了手写字体及网络表情这更符合年轻用户群体的风格喜好,也可以更好的和有趣文案相互动。

淘宝双12亲亲节:活动视觉分析(预热期)

淘宝双12亲亲节:活动视觉分析(预热期)

淘宝双12亲亲节:活动视觉分析(预热期)

视觉上面就感觉很二次元,的确也是符合年轻人的定位。

二、官网首页氛围

淘宝双12亲亲节:活动视觉分析(预热期)

淘宝双12活动主题为《1212淘宝亲亲节》,视乎主题的由来是我们所有人都熟悉的购物开头语:

亲,能包邮吗?亲,还能在便宜点吗?

主题也很符合淘宝定位,也有亲切感。从元素中看到波点元素和其它纹理的装饰。

页面

主会场:

淘宝双12亲亲节:活动视觉分析(预热期)

特色频道会场:

淘宝双12亲亲节:活动视觉分析(预热期)

品类分会场:

淘宝双12亲亲节:活动视觉分析(预热期)

虽然淘宝给出的图形规范中说这种是不规则曲线,文中就暂且用“不规则”一词代替。

从大风格方向看我更喜欢把它称为迷彩风格,波点元素。形状很有律动感、流动的视觉感受。区别以往棱角分明,严肃的感。

放了2张迷彩感觉的图:

淘宝双12亲亲节:活动视觉分析(预热期)

三、会场视觉分析

层次

淘宝双12亲亲节:活动视觉分析(预热期)

红色背景和黄色蓝色的撞色非常热烈,商品和装饰向外散发。而中间的不规则圆形则把视觉收缩进来。

但两者似乎有一些冲突了,不知道大家有没有这种感觉。

外围的红色和黄色属于暖色,暖色给人收缩感。中间的蓝色属于冷色给人一种向外扩展的视觉感受。

视觉层次大概6中,背景的形状加上标题和元素。

淘宝双12亲亲节:活动视觉分析(预热期)

这样虽然层次多了,但我却无法集中。而且还有一种视觉疲劳感,因为红色的视觉刺激比较大。(你可以试试把PC的两边遮挡起来,在看中间的内容会轻松很多)

那么,我们再看M端上们看看:

淘宝双12亲亲节:活动视觉分析(预热期)

在手机端上面直接去掉了红色背景,这样的确感觉没有那么疲劳了。在手机上可以一眼把内容都包揽下来,减少了周围的干扰,视觉上会比PC上面舒服。

其次,我们看PC的上面主要的颜色有红色、黄色、紫色、蓝色和绿色,而且部分颜色的范围很大,已经超过了我们平时说的配色不要超过3中的原理。

氛围

以分会场举例分析

淘宝双12亲亲节:活动视觉分析(预热期)

排版采用居中布局模特或主推商品主打、其它商品为辅。

1、背景采用不规则的形状做层次叠加、让页面律动性更强。

背景的视觉走向:

淘宝双12亲亲节:活动视觉分析(预热期)

2、元素使用 @  #   。~……我们平常都会用到的。比如微博@谁谁,热门标题中的#等这些网络符号,年轻活力。

元素及商品的视觉走向:

淘宝双12亲亲节:活动视觉分析(预热期)

配色

颜色之间的撞色让画面更加热闹,加上不规则形状的渐变色画面则更加缤纷多彩。部分形状为页面中高亮色,高亮色也是作为视觉的落点。

淘宝双12亲亲节:活动视觉分析(预热期)

淘宝双12亲亲节:活动视觉分析(预热期)

上面黄色圈出来的是高亮色

淘宝双12亲亲节:活动视觉分析(预热期)

淘宝双12亲亲节:活动视觉分析(预热期)

做活动不会配色的,多看看官方的页面,会场这些配色。有暗色和亮色,颜色直接的碰撞。今年双11、12活动配色都偏向微渐变色、色彩的碰撞。所以不敢用色、不会配色的朋友得琢磨琢磨了。

其它部分会场

淘宝双12亲亲节:活动视觉分析(预热期)

淘宝双12亲亲节:活动视觉分析(预热期)

淘宝双12亲亲节:活动视觉分析(预热期)

淘宝双12亲亲节:活动视觉分析(预热期)

里面的那些元素,不是3D做的,就是复制了一层往下移动然后改变颜色的深浅。总体来说:淘宝这次的1212卖场页面较为常规。

淘宝H5

淘宝双12亲亲节:活动视觉分析(预热期)

淘宝双12亲亲节:活动视觉分析(预热期)

厉害了淘宝!旋梯式,形式不错。

 

作者:不沉的骨头,一个段子与干货兼有的设计师。

来源:微信公众号【三根设计骨】

本文由 @不沉的骨头 授权发布于人人都是产品经理,未经作者许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/26346/

logoUIUX产品产品经理字体微信淘宝双12用户观点视觉视觉分析设计设计师话题转载配色页面设计
赞 (0)
CatherineCatherine
0
生成海报
帮你梳理微交互的五个基本要素
上一篇 2017-05-14 03:36
界面设计规范:历经实战,我总结了四个经验
下一篇 2017-05-14 05:24

相关推荐

  • 用户体验设计专题——前言

    元宵佳节一过,春节假期正式步入尾声,相信大家的工作也已步入正轨。为了感谢大家对我们这个略显晦涩却干货满满的公众号的支持,经过系统梳理,我们归纳总结了9个用户产品设计的基本原理,结合从数千个小流量评估实验中筛选的经典案例予以阐述,在未来两个月的时间里,会逐步分享给大家!废话少叙,步入正题!笼统地说,用户体验(User Experience,简称UX或者UE),是指用户在使用一个产品、系统或者服务时建立起来的纯主观感受。这里我们会关注两个重...

    微信热点 2018-03-02
  • 微信热点

    产品学习——用户体验要素

    最近看完了这边和产品相关的书籍——《用户体验要素》,读完之后感觉这本书写的挺好。下面做了一些思维导图,做的比较详细,这样就可以当做是读书笔记了。自己的不足:1,读起来的困难是这本书翻译的不是特别好,所以为了理清楚这个本的脉络,还是花费了比预期要久的时间。2,是第一次使用xmind,在一边做思维导图,一边学习使用xmind上面花费了一些时间。3,是专注度还是不够,集中精力的时间太少了,所以做一件事的时间就会拖的太久。第一章:用户体验为什么...

    2018-02-23
  • 通过减少认知超载提升用户体验(下) 交互设计

    通过减少认知超载提升用户体验(下)

    “怎样才能改善用户体验设计?这是关于用户体验研究恒久不变的话题。今天给大家推送的是关于运用认知心理学中的相关理论来提升用户体验的研究。希望对大家有帮助。 文章过长,分成上下两篇,上篇可查阅《通过减少认知超载,提升用户体验(上)》。

    2017-05-06
  • 交互设计的用户行为模式十二项 交互设计

    交互设计的用户行为模式十二项

      安全探索 方便用户进行探索和尝试,支持多级撤销, 即时满意 让用户立即完成一个任务,给他们信心。 满意即可 人们不愿意付出哪怕一点点多余的思考,给他们他们熟悉的模式元素,让他们熟悉环境,可已立即上…

    2015-01-21
  • 交互设计

    关于工作效率的心得分享?(拖延症患者必看!)

    来源:Tencent CDC 作者:milaky 这是去年11月底在小组里分享过的工作效率心得,在这里也跟大家分享一下工作“快”感哈哈。我相信大家应该都有过工作效率的些许烦恼。而这个效率啊伴随我很长时间的痛苦。每每到PDI的…

    2014-09-21
  • 使用app真正给你快乐体验的是微交互设计 交互专题

    使用app真正给你快乐体验的是微交互设计

    在我们日常生活中所使用的比较多的优秀APP中,真正给我们动心和吸引的细节是在于那些小小的微交互,整个app整体的排版和线框图的的用心制作是可以提高用户对app的操作性与整体感觉,从目前的情况来看看,交互设计师…

    2015-11-03
  • 微信热点

    Axure RP 8软件和安装教程

    Axure RP 8(64位)下载链接:百度网盘:https://pan.baidu.com/s/1hsfD3Kg提取密码:ivma软件简介:Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。(仅供学习交流使用)安装前须知:1.解压和安装前请关闭...

    2018-04-17
  • Affinity Photo 最新破解版–PS真的遇到对手了,这里是 for Mac1.3.4免费下载! 交互设计

    Affinity Photo 最新破解版–PS真的遇到对手了,这里是 for Mac1.3.4免费下载!

    应网友要求更新。Affinity Photo已公布其在Mac App Store的最终版本。最终版本拥有众多专业高端功能,如Raw处理、PSD导入和导出、16位通道的编辑和ICC色彩管理以及兼容大量图片格式。Affinity Photo充分利用了Mac O…

    2015-08-12
  • 从可用到易用的一次思考|手机获取验证码那点体验 交互设计

    从可用到易用的一次思考|手机获取验证码那点体验

    我们做用户体验的不能将系统过失/产品过失迁就于我们的用户。因为用户永远不会错,用户也没有必要为产品和过失负责。我们要做的就是穷尽我们解决问题的能力帮助用户获得最佳的使用操作,并能带来一丝的惊喜。

    2017-05-17
  • 微信热点

    为增强产品的用户体验,UI设计师会做哪些工作

    近年来,人们越来越多地谈及用户体验,甚至将其视为互联网产品赢得市场的最关键因素。作为UI设计师,我们战斗在用户体验设计的一线,那么在实际工作中我们会通过哪些工作来提升产品的体验呢?下文给出了几点关于实际工作中提升产品用户体验的思考。我们在设计一个程序或者系统的时候,前提是保证产品定位及有目标用户群,保证产品是有用的,能连接不同的节点产生价值。如果一个程序没有用,那么对用户来讲就没有下载、使用的必要了。而当程序有用了之后,如果用户需要付出...

    2018-02-03
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress