• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 腾讯最新设计神器,可以一键智能生成H5!

腾讯最新设计神器,可以一键智能生成H5!

作者:腾讯ISUX 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含H5,HTML5,Xcube,人工智能等相关知识,腾讯ISUX希望在学习及工作中可以帮助到您

Xcube 是基于 QQ空间营收类活动所搭建的 H5 活动页面智能生成系统,是针对框架相对固定,高频率的运营 H5 活动所设计。系统通过预设活动组件的组合来完成页面生成,系统内会有各种类型活动的相关组件,系统内会预设很多常用活动模板,这些模板以及组件和素材会有各种不同维度的标签(圣诞节,春节,热闹等),可以在系统直接输入关键词,即可有一套符合需求的页面生成,然后在此基础上编辑活动页面文案,素材包括配置,到最终的发布都能一次性解决,甚至包括最终各个场景位置的 banner 素材图都能通过预设的尺寸自动生成。最终所有的流程都简化到一个点完成,省去了所有视觉和开发成本,在这整个链条中,产品,视觉,交互,重构,开发包括 cp 所有利益相关者的成本都得到了优化。不仅仅是运营活动,Xcube 也可用于更多高频且固定框架的页面的制作上。目前 Xcube 正在持续优化,暂时只针对内部使用。

在这里分享一下我们在日常运营 H5 活动设计当中遇到的问题以及 Xcube 开发的过程。

作为一名运营视觉设计师,针对运营活动需求我相信大家都会有太多的槽点:这个活动特别紧急,明天就要初稿!为什么不提前策划好,都是临时调整!什么!标题都还没定就直接做视觉?等等。

确实,在日常工作当中,我们承受了太多突如其来的「惊喜」,不断的压缩时间赶进度,猝不及防的调整和修改,甚至推翻重来。导致我们经常会消耗大量的时间和精力去填补这些大坑小坑。在整个过程中,我们既要考虑到对业务的贡献,而且还得体现出设计的价值。最终数据不好的话还有可能被指设计能力不行,数据好又没办法直接证明是设计带来的。

一、运营活动的目的

虽然我们经常会吐槽,但客观来说,我们还是应该理性的思考一下,跳出设计师的身份,站在全链路的角度去了解一下运营活动的目的和作用。产品经理通过策划组织各种活动吸引用户参与关注,以此达到宣传推广目的的手段,总的来说运营活动有这几个核心目标。

1. 拉新(拉新用户+创新内容)

通过传播吸引新用户,让平台在短的时间内,用户指数实现增长。用户体量越大,越需要持续的拉新、拉新、再拉新。新用户创造新内容,新内容再持续的吸引新的用户,平台上创造出越来越多的新内容。

2. 促活(用户活跃+内容活水)

拉新、留存、促活,是用户运营的关键路径。高的用户活跃度,使平台内的内容变活水。

3. 商业(促进转化+增加收入)

顾名思义,不断的拉新和新内容的不断创造以及高用户活跃度能带来商业核心价值的转化。

4. 口碑(品牌形象及传播)

活动的运营有助于品牌形象的塑造,通过活动持续普及品牌,让用户感知品牌符号,持续加强品牌与用户之间的联系。

综上所描述,是不是就可以理解为什么会有频繁的活动节奏,为了促新促活拉收需要有太多太多内容的更新和输出,也会有太多策略上的调整。那在我们的角色上,在活动开始之前先尽可能弄清楚这次活动的目标和侧重点,从而可以规避很多问题,让我们执行的时候思路更加清晰。产品经理的本质工作是产品与商业的平衡,而我们的角色应该是做到设计与产品体验与商业的平衡,不仅仅是视觉层面上的。

促新促活拉收更多是产品经理要考虑的问题,而回到我们设计的层面,我们在保证输出质量的前提下,需要在如何通过运营活动传递品牌形象上多做些研究和思考。

二、品牌如何被感知

用户通过各种类型的营销方式接触到我们的产品,感知到我们的品牌符号,从而了解我们的品牌性格及内核,运营活动是用户感知我们的一个主要场景。

用户从外到内感知到我们,我们从内而外逐步具像化信息使用户感知,通过品牌符号来具像化设定,让用户明确的感受到我们的视觉、声音、表现、内容是什么样子的。

这些标志性的符号代表了品牌内核要传达的内容,也映射了我们的品牌性格和内核,使用户直观的感受我们的品牌。

作为设计师我们的本职工作是关注并定义视觉符号的内容,其中包含了颜色、logo、字体、图形、影响等视觉层面的内容。但品牌对于用户而言是一种多维度的感知,并不是某一种单独的感受,所以也需要我们尽可能丰富其他维度的品牌符号,比如文案风格,声音语言系统,实现形式上的具像化。定义品牌的视觉符号,首先我们需要清楚品牌的内核及性格是什么。

三、QQ空间品牌符号的定义

回到我们自己的产品 QQ空间,「活力」是品牌的内核,QQ空间品牌的视觉风格一直在根据时代的变化不断更新,但其「活力」的内核并没有改变,活力表现出来新颖、有趣、鲜明的品牌性格。那品牌符号的定义就会围绕着新颖、有趣和鲜明来开展。

品牌性格关键词之间互相碰撞我们可以得出一些基本思路,明亮对比的色彩风格、新奇好玩的创意形式、变化发散的视觉结构。由此我们可以充分具像化视觉符号(颜色、图形、字体、文案、影像等)并体现在我们的运营活动页面当中。

四、高频次日常运营

我们日常工作中也会有很大一部分重复、机械、不需要太多独创性的高频次的小型活动,一般来说我们会制作相应的设计规范并交给 CP 去设计,但由于 CP 公司的运营模式,以及不固定的供应商,加上参差不齐的设计水平,在交付的时候往往会出现各种各样的问题,比如没有清楚了解规范内容,输出风格与品牌调性不匹配,重复素材来回用,甚至达不到要求的设计水平等等,最终不得不由设计师耗费大量的时间去进行沟通和指导。在整个过程中,设计规范并没有起到预期的作用,设计师反而花费了更多的时间。所以我们需要解决如何让规范发挥到该有的作用,尽可能的减少审核成本,解放设计师的时间。

我们制作设计规范时通常会比较直接的列出尺寸、位置、字体、间距等要求,cp设计师在拿到我们规范的时候只看到了这些框架和限制,并没有去深入了解到我们品牌想传达的感受。所以经常会出现输出风格与品牌调性不匹配的问题。QQ空间新品牌更新后,我们尝试了新的规范逻辑,先让 cp 充分了解我们的品牌,从我们的品牌核心价值到品牌符号再到具体应用,作出直观的说明和示例,再从具体的场景去规范尺寸、字体间距等。

规范分为两个部分:视觉的大原则和具体场景标准化(规范对象也不仅仅只是CP,也包含了产品及运营)。

1. 视觉大原则

大原则目的是为了让大家对品牌各方面有一个认知,清楚品牌所要传达的调性。

2. 具体应用场景下的标准化

针对用户感知我们的具体场景做出明确的视觉规范,保证其视觉风格的一致性。

3. 运营活动页

活动页面是用户感知我们的一个主要场景,所有运营位置的 banner 素材基本上都是以活动页面的头部进行的拓展,可见一个活动页面头部的重要性。我们发现在背景的纹样和辅助元素加入品牌符号是最能被感知的。所以在头部这一部分,我们针对标题、主题图形、背景逐一进行了规范。在规范中,从标题到主题图形到背景到 logo 到活动内容,根据设计的步骤每一步都进行了规范和示例。

五、规范不能从根本上解决问题

活动内容能传递品牌形象的关键在于画面中是否有品牌符号,针对品牌相关的活动页及素材,规范确实能起到一定的作用,但是在品牌符号比较有限的情况下,会导致最终输出比较雷同,没有办法根据活动主题灵活变动。保证有足够丰富的品牌符号是保证活动页面灵活多变并能保证品牌调性一致的关键点。

在与 cp 公司对接的过程中我们发现 cp 设计师花在页面的内容排布上的时间占了大多数,相比之下活动页面头部没有那么的出彩,并且使用的素材基本都是随处可见并

您可能想查找下面的文章:

  • 腾讯实战案例!设计师如何从零开始做一款H5?
  • 腾讯最新设计神器,可以一键智能生成H5!
  • 工作复盘:从四大角色带你了解H5制作流程
  • 腾讯出品!你离高效制作动画只差这一篇文章的距离
  • 新人想要入场视频类H5 设计?你需要了解这些
  • 腾讯设计师:极速适配 iPhone X 的技巧揭秘!
  • H5页面如何适配iPhone X ?腾讯设计师给出了通用解决方案!

相关文章

  • 2018-08-23长文揭秘!全新的大众点评V10版本是如何做品牌升级的?
  • 2018-08-23如何“浏览作品”才能事半功倍?来看高手的方法!
  • 2018-08-23用一个图形,帮你学会6个最流行的设计风格
  • 2018-08-23腾讯高级设计师:交互知识树系列之视觉思维
  • 2018-08-23腾讯实战案例!设计师如何从零开始做一款H5?
  • 2017-08-0640个知名网站Logo使用的字体推荐
  • 2018-08-23我花了五个小时,完成了iOS 11新版App Store的交互探索
  • 2018-08-23工作复盘:从四大角色带你了解H5制作流程
  • 2018-08-23专业科班方法!平面设计中如何把握比例?
  • 2018-08-23今年的双11品牌设计,官方首度揭秘背后全过程!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 组件化的前端开发流程详细说明
    • 网页设计中的6个小技巧分享
    • 实例解析「神奇数字7±2法则」在设计中的应用
    • 人工智能时代来临,设计师会被淘汰吗?
    • Airbnb 设计师:我们如何为残障人士做用户体验设计?
    • 一个针对女性用户的照片编辑软件,要如何设计UI?
    • 三谈Iframe自适应高度代码
    • 最新版iOS 11设计规范发布了,来下载官方源文件!
    • 沪江UED团队出品!用户体验设计师进阶实战指南(下)
    • 腾讯工作坊总结!如何构建智能空间的方法与应用?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有