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

相关推荐

  • App加载动画知识体系:交互、视觉都需要掌握! 交互设计

    App加载动画知识体系:交互、视觉都需要掌握!

    我大胆预测了一下,以后App的加载动画都应该遵循越来越简洁的设计原则,突出内容,去掉无用的、过渡的形式设计。也许无文字提示的加载动画确实是一个流行趋势!

    2017-05-12
  • 从情景出发的可用性设计 交互设计

    从情景出发的可用性设计

    设计文章 / 交互设计 | 来源:TID | 作者:stephyl 前言         为了优化产品,提升用户体验,产品团队经常做很多事情:数据监测、数据分析、竞品分析…然后给交互设计师提需求,让交互设计师把需求转化为可用的功能…

    2014-12-01
  • 腾讯多个品牌LOGO重设之思路

    作者:飛兒     在SNG(腾讯社交网络事业群)品牌系统语言里,LOGO系统承载品牌视觉的最核心容器,是整个品牌视觉系统的灵魂,是品牌的精神文化理念、信誉、服务等特点的浓缩表现,直接影响着社交网络品牌的发展。…

    交互专题 2017-08-07
  • 你离互联网产品经理,只差一句自我肯定!

    从2014年开始,伴随着越来越多产品人转岗心路历程的分享,产品壹佰为此专门开辟专栏,记录了他们这一段学习路程中的点点滴滴。他们之中,有对未来茫然无措的大学生、不甘于现状的互联网从业者、郁郁不得志的传统行业人、孤立无援的产品新人以及举步维艰的创业者……在他们的诉说中,有着转岗前的不安、惶恐,也有刚转岗成功的喜悦、激动,更有成为产品经理后自我知识的输出!分享!如今,这些记录成长历程的人儿们如疾风般快速的蜕变着,梦想实现,更幸运的是,其中的出...

    微信热点 2018-03-10
  • mBack交互方式分析 交互设计

    mBack交互方式分析

    本文作者将对魅族最新研发的交互方式—mBack进行分析,从谈论手机操作系统方式与电脑的操作系统方式有着两个较为明显的差异,到分析mBack的缺点,值得一看。乔布斯说:伟大的产品都是只有一个按键的。在已经将交互优化到已经不能再删减时,如何有效的组织和隐藏就显得尤为重要。随意性用户可能使用过类似的产品或服务,有兴趣使用更为复杂的产品,但是不愿意接触全新的产品,除非新功能足够简单。主流用户是最大地群体。他们使用产品的目的是完成任务,他们永远也不会产生学会所有功能的想法。

    2017-05-01
  • 微信热点

    大屏时代,如何做好电视端交互设计?

    在过去一年多的时间里,笔者有幸参与了电视端大屏幕的项目,在不断的尝试、探索和设计中,也收获了一些关于电视端的设计经验,因此将这些“电视交互设计的一些事”分享出来,共同探讨电视端的设计。-硬件+远距离操控——基本交互-基于桌面资料研究以及设计经验,总结了基本交互主要包含以下几个关键内容:遥控器输入、导航和菜单、信息展现、控件摆放和焦点状态。一 、遥控器输入当我们用手指快速便捷地在手机屏幕上点击或滑动时,主流电视大屏及应用的操作还是:使用遥...

    2018-04-01
  • 老年用户的体验思考:如何保证界面适合阅读 交互设计

    老年用户的体验思考:如何保证界面适合阅读

    老年用户群仍然有巨大的增长潜力。但就像其他任何用户群体一样,老年用户需要我们设计出符合他们需求的体验。随年龄而产生的局限意味着,数字科技中一些常规的吸引用户手段对老年用户不管用。

    2017-04-28
  • 怎么理解信息架构,什么是信息架构? 交互设计

    怎么理解信息架构,什么是信息架构?

      之前一直有朋友(初学者)问我什么是信息架构,什么是流程图等等,一直没有很好的答案回答对方。后来举例以下的例子,她说终于明白大概是什么意思了,在这里将回答分享给大家(或许可以帮助妹子们更好的理解…

    2015-11-18
  • 微信热点

    用户体验与seo并重的域名选择

    谈及网站域名的选择,在搜索引擎优化中,域名权重一直是困扰SOE优化的难题,因为域名权重和其他外部、内部优化不同,并不能在短时间内取得很好的效果,但是各大搜索引擎在各自的排名算法中,对域名权重“估分”却是较为重要的。在域名权重被提及初期,很多优化们使用各种各样的方法,对域名权重是否真的存在进行了繁杂的测试—毕竟各大搜索引擎的排名算法是绝对的核心商业机密,是不可能公开所有细节的。据了解经过各种测试,最后的结果均表明,域名权重在搜索引擎排名中...

    2018-04-20
  • 设计只在需要时 —— “暂停”按钮的消失又出现 交互设计

    设计只在需要时 —— “暂停”按钮的消失又出现

      很多时候,不好的设计往往是因为思考的不充分或者思考的太多;而好的设计则正是因为它出现的恰到好处,哪怕它可能是在对传统习惯做出的挑战。以下我将通过现实产品中“暂停”按钮的消失又出现来说明这一点。
      对于现实中的声音播放工具,大家应该不陌生吧。录音机、walkman、CD随身听,虽然这是上个世纪甚至上上世纪的名字,但是也不至于让现在沉溺于虚拟世界的人们彻底忘记(90后除外)。我们只是去回味这些古老工具的播放控制按钮,也是能够品味出优良的设计思想的。

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

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