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

相关推荐

  • 微信热点

    纽约大学交互设计研究生

    恭喜马同学收到纽约大学(NYU)Interactive Telecommunications 研究生offerOFFER展示:学生作品展示:作品集要求:CREATIVE PORTFOLIOSubmission of a creative portfolio is optional due to the diversity of applicant backgrounds. Portfolio materials need not be ...

    2018-03-09
  • 交互设计

    想成为高级交互设计师?这是我的5个经验总结

    Echo :交互设计师真正提高的标志是思维思想上的提高,而非专业技能的提高。

    2017-10-16
  • 亲历经验!没有学位和工作经验要怎么找到UX设计的工作? 交互设计

    亲历经验!没有学位和工作经验要怎么找到UX设计的工作?

    Tiger, Run! :我已经做了几个月的交互设计 师了,有不少人非常好奇想知道「没学历、没工作经验的我是如何找到工作的」。随着市场的逐渐饱合,我想分享一下我的故事,来鼓励那些没有任何设计经验、HCI(人机交互)学历的人,得以继续追求自己的梦想。

    2017-07-01
  • 百货类微信服务号改版:一个“失败”的设计案例? 交互设计

    百货类微信服务号改版:一个“失败”的设计案例?

    整理了一个售前项目的案例,重新绘制了36个原型页面,1张思维导图,3张流程图,2张对比图,1张结构图,介绍一家百货购物中心微信服务号改版的设计。

    2017-05-07
  • 微信热点

    用通俗的方式告诉你什么是交互设计

    文章底部可领取设计资源(软件、笔刷、视频教程等)↓↓↓通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了...

    2018-04-08
  • 微信热点

    Sketch49-原型设计才刚刚开始

    官方说明:草图49已经到来,在我们的图书馆更新之后,我们又为Sketch增加了另一个巨大且备受期待的功能。我们了解设计,所以我们知道你不能总是根据静态屏幕判断是否有效。有时你需要看到整个流程的实际运行情况,最好的方法是将你的设计变成交互式原型。通过我们的最新更新,我们正在使整个过程无缝 - 在Sketch中与原型设计师打招呼。Sketch 49带给我们的是最值得期待的功能之一:能够在本地创建和分享快速交互式原型当我听到这个消息时候,脑子...

    2018-03-02
  • 交互设计的前世今生:了解其产生与发展 交互设计

    交互设计的前世今生:了解其产生与发展

    读史使人明智,这几乎可以说是真理。可以从历史中洞悉事物发展的本质。帮助我们更好的活在现在和将来。回顾交互设计的历史,了解交互设计的产生与发展,让自己在交互设计的道路上越走越好。

    2017-05-16
  • 最浓缩的概念:交互是什么?交互的本质及如何理解 交互设计

    最浓缩的概念:交互是什么?交互的本质及如何理解

    在使用一种产品或东西的整体过程。而无论这个使用行为是有无目的导向。本身这个过程,即是交互的本质。而任何一个交互的过程中必定存在交互对相,及交互的媒介。在这里,我先声明一下哦。以下的分析过程可不那么容易跟得上,思维与对生活细节观察力不够的,请直接跳过。但,以下的内容是当年我在新加坡修用户体验时,在交互过程一环中的必修环节。做好心理准备,那就开始看吧。题外话:而如果想改进这一环节,那么在提升交互环节的效率方式手段上,也无非只能是,1,提升硬件能力来加速。2,减少多余软件操作环节。3,有无改变硬软件间关系的其它模式?题外话:而如果想改进这一环节,那么在提升交互环节的效率方式手段上,也无非只能是,1,提升硬件能力来加速。2,减少多余渠道操作环节,如展开一个个目录,或通过其它模式打开。3,提升系统本身效率。产品设计的体验层级关系:
    核心层:产品本质体验层。---这产品是为达成什么用户目的而生的。
    中间层:产品使用过程中的体验层。---这就是我们所有产品中的交互层。
    最表层:产品的视觉体验层。---这部分就是UI〜我们也知道约炮软件其实并没有什么用,但为什么能相对留存久呢?也就是在于用户在心理层上有侥幸心理。同时加上其在媒体上潜意默化的某某成功的宣传。所以,让用户的心理否定延后。所以,相对来说,知道没什么用,但还是久留一下看看。但大多有头脑的。基本上也在一段时间后最终放弃。

    2017-05-25
  • 优设访谈|腾讯高级交互设计师C7210的十年设计路 交互专题

    优设访谈|腾讯高级交互设计师C7210的十年设计路

    编者按:本期访谈人物大家都应该都有所耳闻,知名设计博客Be For Web作者@C7210 ,先后就职于博客大巴、Tom集团和大众点评网,现为腾讯ISUX高级交互设计师,从视觉设计、前端、重构,到交互设计,无一不通。当然,…

    2015-11-03
  • 用好的交互设计来减少用户等待 交互设计

    用好的交互设计来减少用户等待

    通过一些小小的「等待」机制来降低对用户感知的干扰,用心做好产品,让用户更“爽”一些。

    2017-05-19
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

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