还记得几天前的520你在干什么吗？是在朋友圈争先恐后晒恩爱、晒求婚、晒结婚证结婚照，还是一边吃着狗粮一边被晒得双目失明呢？我们QQ钱包团队联合厘米秀在这一天特意奉上《520的正确操作方式：白和宝贝橘的520》H5，帮助各位用最正确的姿势过一个幸福的520。首先奉上H5线上地址，看看白和宝贝橘两只猫是怎么过这一天的：接下来，我给大家分享一下在这支H5在创作过程中的一些心得体会。 一、创作背景过情人节要做什么？除了吃饭逛街看戏送礼物，当然就是发个充满感情的红包给Ta啦。借着520这个节日，来一个情感化运营H5，既能给用户增添情趣，又能提醒对方发QQ红包表达对自己的爱意，何乐而不为呢？于是，就有了我们这次创作计划。（其实，这还伴随着一班单身狗深深的恶意，哈哈！） 二、创意和策划前期和产品经理脑爆大量创意，出了若干版本故事线和展现方式，最后发现日常的才是比较感人的，于是我们以情侣间发生的日常普通小事构造了三个情景：1.玩王者荣耀拿下四杀时也要接听另一半的电话。2.有好吃的东西要主动让给另一半吃。3.最好的情人节礼物就是给对方发个充满感情的QQ红包。从这些情景中提醒情侣们正确的520操作方式就是要懂得要替另一半着想、给对方惊喜。最后可在落地页给心爱的Ta发红包、领取厘米秀装饰和动作表情秀恩爱。故事从猫的角度去叙述，显得更生动形象有趣，而在每个关键时刻给予用户操作选择，使用户更具代入感，以及对 ...继续阅读 (28)

InspiratonEvery-time when i think of cute pets I get an avalanche of emotions and a feeling of pure joy. And i very popular music theme is playing in my head. "Ode To Joy" of the famous composer Ludwig van Beethoven a crucial figure in western art music, he remains one of the most famous and influential of all composers. So from there comes the main idea for the promotional video. Cute, caring, lovable pets singing all todether the song "Ode To Joy" in a pets choir. This short promotional video shows variety of pets and their features that the user can choose to interact with and have fun with ...继续阅读 (24)

设计源2017五一八迎来SNG五周年，以“从心出发”为设计源，企划了金喜一触即“发”，SNG王子一号美食馆，全民Talk秀等活动，带领大家一起从心出发，从新感悟。品牌标志关键词品牌标志设计过程1.第一轮尝试2.第二轮尝试3.最终方案设计围绕“爱心启航”的概念，采用“爱心”+“和平鸽”的视觉元素与字体组合，使“从心出发”的主题赋予更深刻的意义。主视觉品牌色品牌专用字图形语言品牌应用 ...继续阅读 (28)

背景对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生，它把一些常见的动画效果都封装起来了，非常实用。但是有时候在开发中，仅仅只是需要某一两个动画效果，把整个CSS文件都引入，这样不是太好。需求就出现了，能不能有一个工具可以直接预览Animate.css对应的动画效果，并且生成对应的动画代码呢？作为一个UI开发，平时跟Chrome浏览器打交道最多，于是就整了一个Chrome插件可以及时预览对应Animate.css中的动画效果并生成对应的动画代码，这样在实际开发中碰到一些需要使用到Animate.css中的动画效果时，可以大大的提高我们的开发效率。插件安装地址，快来安装体验吧！作为一个程序员，捣鼓些小工具，不但可以学些新技术还可以提高我们的开发效率，何乐而不为呢。下面就以一个简单的flexbox对齐预览的插件为例，讲讲使用vuejs开发Chrome插件的开发体验和效率。扩展如下图所示：插件主要功能是根据用户选择的对齐方式，实时预览效果和显示对应的CSS代码，方便我们可以直接拷贝代码使用。Chrome插件开发基本知识在应用商店中下载下来的插件基本上都是以.crx为文件后缀，该文件其实就是一个压缩包，包括插件所需要的html、css、javascript、图片资源等等文件。开发一个插件就跟我们平时做web开发流程没多大的区别，就是先搭好基本的页面，然后使用js ...继续阅读 (26)

企业楼梯文化墙是宣传公司文化、提升品牌形象以及增强团队凝聚力的宣传墙面。文化墙的视觉设计能改善美化公司环境，并与公司的自主形象品牌 “QQfamily” 有效融合，营造健康生活、高效工作的企业环境。 项目背景企业楼梯文化墙虽是一项体现企业关怀员工、增强凝聚力的有效载体，但万利达大厦文化墙现有的设计确实是比较薄弱的一块，鉴于文化墙的更换周期相对较长，为此我们如何订立新的主题、主题应有何特点、应该如何设计等做了大量的尝试与思考，在此分享本次文化墙的设计思考。 现有的视觉问题在着手设计前，我对现有的文化墙设计进行了调研和分析，取长补短，找到了一些现有的问题以待解决：1、视觉样式单一陈旧，整体视觉美感欠缺，整体的表达主题难统一。2、现有的视觉元素与形象是否符合项目气质，难出强效果。3、文化墙的指引性内容与提示缺乏。4、文化墙设计细节需优化，例如颜色的采纳、图形图案的处理、元素的比例分布等等，都有提升的空间。 解决方案1、文化墙设计需要明确统一的主题，我们主要围绕 “ 健康生活、高效工作 ” 这一中心主题，将其分为四大块主要内容，表达出活泼、愉快、积极向上的设计调性，如下图所示。2、因该项目的第一阶段需完成1~4楼的楼梯文化墙设计，所以，我们针对1~4楼的特征与个性，制定出了具有差异化的设计。a、1~2楼结合 “QQfamily” 营造出具有亲和力、积极向上的SNG社交网络事业群形象b、2~ ...继续阅读 (23)

简单之于性格，就像白T之于时尚，不管岁月曾在你脸上留下什么痕迹，阳光里一件白T会把痕迹都抹去。关于Dov多福白T的由来Dov多福是来自QQfamily的主要形象角色之一，他有着纯洁白净的皮毛，温暖治愈的性格一直深受大家喜爱。Dov多福白T的设计初衷也非常简单，有一次设计师在逛街时突然灵感来袭，想到夏天就要到来，日常繁杂的生活增添一丝平静显得非常必要，于是有了制作一件白T的想法，正好想到Dov多福的纯白造型与白T有着天然的契合，且他简洁的线条和白T所要传达的极简主义也不谋而合，于是有了2者结合，设计一款Dov多福潮T的想法。于是，这件带着Dov多福一如既往的平静，载着温柔的质感的Dov多福潮T全新诞生。极简主义的品质我们在设计的时候去除繁杂，保留了Dov多福精致的五官刺绣，避免多余的印花；关注色彩，反复比对，选择最柔和的白色；研究面料，找到最优质的100%精梳棉；考量厚度，白T太薄会很透，太厚会炽热，从而挑选适中的厚度为佳；宽松的版型既舒适，更能代表Dov多福温和的个性；在后期的制作过程中严格进行精微控制，追求极简主义的品质。众筹 每一个行为都源于一个小小的idea最终我们通过众筹的方式，让这件美好的设计发送到了更多人手中。我们想通过这个方式，汇集众人之力，看有多少人是真的喜欢这件T恤的，然后根据需要再去生产，有多少的需求，就有多少件白T制作完成，不多也不少。我们不想通过售卖的方 ...继续阅读 (24)

本文介绍一些关于响应式图像的适配应用策略，回退原理，SVG的换色技巧，雪碧图的百分比定位计算公式等相关的一些小知识点，目的在于帮助一部分同学快速的理清图像应用思路，以及一些web图像的应用技巧。1.响应式图像的应用与回退特点：应用简单，上手容易，性能表现良好难点：lazyload实现根据不同设备，不同分辨率，不同像素比使用的响应式图像，常用的有两种场景：1.1固定尺寸图像基于设备像素比选择，很多网站logo就是固定宽度图像的一个例子，不管viewport的宽度如何，始终保持相同的宽度。在dom里图像与在css里的图像写法如下面的例子background-image: image-set(url(test.jpg) 1x,url(test2.jpg) 2x);1.2不固定尺寸图像与内容相关的图片，在需要响应式的时候，它们的大小往往并不是不变的，会随viewport改变，对于这类图像，也有两种常用的处理方式1.2.1 我们使用srcset搭配w描述符以及sizes属性 。w描述符告诉浏览器列表中的每个图象的质量。sizes属性是一个包含两个值的，由逗号分隔的列表。根据最新规范，如果srcset中任何图像使用了w描述符，那么必须要设置sizes属性。sizes属性有两个值：第一个是媒体条件；第二个是源图尺寸值，在特定媒体条件下，此值决定了图片的宽度。比如：我们来逐条读这一个img标签的信 ...继续阅读 (28)

设计效果检验，即针对设计师的设计方案进行数据验证，通过客观的数据来量化一部分设计方案中较为主观或存在争议的地方，以此判断设计方案的优劣，从而得出检验结论。众所周知，每个人对设计的评判是主观的，设计效果也不容易被直接量化。所以针对设计效果的数据检验变得很有必要，它可以辅助设计决策，沉淀出优秀的设计案例，并且进一步衍化出更好的方案，同时好的设计方法论得以传承。从长远角度来看，设计价值得以彰显，设计师的说服力得到提升。同时我们是在一家商业公司，好的设计除了为用户带来良好体验，还要体现商业价值。而商业价值可较为直观的从数据中体现，这也是设计效果检验的目的之一。那么，如何做好设计效果检验？换个说法，如何去除其他噪点，让设计因素成为唯一的验证点，从而得到严谨可靠的检验结论？且听我一一道来： 一、检验结论的可靠性我们先从一个例子说起：临近农历春节，设计师为所在业务设计了一套春节氛围，并在除夕前几天发布上线。节后观察数据，发现春节期间页面顶部续费按钮点击率波动上升，相较春节前提升幅度很大：因此，我们得出如下结论：由于春节氛围的设计充分渲染喜庆的感觉，用户被情感化的设计所打动，并转化为实际的付费行为。该设计为业务带来了XX倍的数据提升，创造了XX的收入。后续氛围设计都可以参考该风格。看完上述结论后，你有何想法？你觉得它是否科学可靠？为什么？OK，相信你们内心已经有了答案。上述结论的论证过程不够严谨， ...继续阅读 (29)

用户研究日常工作中，我们会做很多用户访谈、问卷及后台数据分析等工作，来帮助团队内的各个同学，更深入地理解用户的需求和痛点。 不过对没有赶上访谈的同学，只能通过书面报告和图片来吸收信息。能否让同事在几分钟内对我们的用户有直观感受和客观认识：他们是谁？他们怎么看待产品？甚至纯粹的……他们是什么样子的。抱着这样的想法，用研和多媒体拍摄同学带着设备，去到了不同用户的家，学校，以及工作单位，拍摄了上面这段《用户之声》视频。 SNG的产品线广，因此我们在访谈对象的选取上，覆盖了各个产品的典型用户，包括初中生、高中生、大学生、蓝领、中老年以及企业用户。 在拍摄过程中，也通过访谈位置布置、访谈话术优化等手段，尽量降低用户的紧张感，呈现最真实的使用场景。拍摄脚本在拍摄前期我们设计了三类镜头，来表现被采访人物与SNG产品以及所回答问题的关系：A类镜头：两个固定机位的人物采访B类镜头：多机位人物生活画面C类镜头：多机位产品使用场景剪辑设计由于采访人物较多，而每个人物又谈及了多种产品。因此我们采用了基于产品分类的剪辑逻辑，把不同用户的采访素材打散，归类在他们所谈及的相同产品中。整个视频的结构分为：1. 片头2. 每位受访者的自我介绍3. 基于产品分类的采访内容4. 片尾（LOGO及品牌元素在成片中有所更新视频品牌设计我们以品牌的角度设计整体视觉形象，体现声的特性。在logo设计上把气泡符号与“声”字相结合 ...继续阅读 (35)

Data URI是一个富有争议的特性。即使在最有经验的前端开发者眼中，也会形成对 data URI 截然不同的看法：有人认为它是性能优化神器，有人认为它已经落后于时代。为什么会这样？本文带你进行深入的剖析。URI，不是URL我们习惯的 URL 的全称是统一资源定位符（uniform resource locator），它是由一个“协议”和一个“地址”组成。协议告诉浏览器或者程序用何种方式去获取这个资源，地址告诉程序在哪里找到这个资源，每个地址都能唯一定位一个公开资源（比如图片、HTML、JavaScript 等）或非公开资源（这时候就需要提供用户名和密码）。URI 是一个更广的概念，或者说 URL 是最常见的一种 URI。URI的全称是统一资源定位符（uniform resource identifier），由一个“协议”和“定位符”组成。定位符其实就是补充信息，它可以是一个地址（如果是这样的话，那这个 URI 就是一个 URL），也可以是数据本身（比如 data URI），或者命名空间（URN）。所以 Data URI 不是 URL。在1998年的RFC 2397中第一次定义了 Data URI：A new URL scheme, "data", is defined. It allows inclusion of small data items as "immediate" ...继续阅读 (30)

| 导语今年春节期间支付宝发生了一次支付安全风波，这让我们再次意识到安全对于支付、金融类产品而言就是生命线。但有时候产品安全并不等于用户就有了安全感，本文探讨了对于支付类产品而言，哪些方面因素影响了用户安全感的形成，并从设计角度出发，期望在安全感的提升上做出一些总结。在这里抛砖引玉，期望能和更多对这个问题感兴趣的小伙伴一起探讨。一、什么是产品的安全感？产品安全感指产品可以让用户信任的能力，一个可以让用户信任的产品，才能在用户信息获取、产品目标实现上成为可能。对支付工具或金融类产品而言，安全需求更是用户最核心的诉求。最近支付宝1月10日被曝光的“非密码登录模式下可能出现的账户安全风险”的风波，虽然支付宝并没有因为所谓的“漏洞”造成用户的资金损失，但造成了用户的强烈不安，导致大量用户解绑银行卡。安全感是建立在客观安全基础之上的一种主观感受，没有强大的技术支持、缜密的安全策略保障，安全感无从谈起，但并不是有了好的技术和缜密的安全策略用户就有了安全感。支付宝的账户安全风波发生后蚂蚁金服负责人在知乎上回应称：“安全不等于安全感。数据上显示这样找回登录密码的方式是安全的，我们就以为够了，但没有想到，这种方式其实是让不少用户没有安全感的。安全但没安全感，也会出大事。”安全感的塑造像用户体验一样需要所有岗位都有强烈意识和努力才能实现，它对用户来说是需要慢慢积累的。下图对影响支付产品安全感的因素进行 ...继续阅读 (36)

| 导语今年春节期间支付宝发生了一次支付安全风波，这让我们再次意识到安全对于支付、金融类产品而言就是生命线。但有时候产品安全并不等于用户就有了安全感，本文探讨了对于支付类产品而言，哪些方面因素影响了用户安全感的形成，并从设计角度出发，期望在安全感的提升上做出一些总结。在这里抛砖引玉，期望能和更多对这个问题感兴趣的小伙伴一起探讨。一、什么是产品的安全感？产品安全感指产品可以让用户信任的能力，一个可以让用户信任的产品，才能在用户信息获取、产品目标实现上成为可能。对支付工具或金融类产品而言，安全需求更是用户最核心的诉求。最近支付宝1月10日被曝光的“非密码登录模式下可能出现的账户安全风险”的风波，虽然支付宝并没有因为所谓的“漏洞”造成用户的资金损失，但造成了用户的强烈不安，导致大量用户解绑银行卡。安全感是建立在客观安全基础之上的一种主观感受，没有强大的技术支持、缜密的安全策略保障，安全感无从谈起，但并不是有了好的技术和缜密的安全策略用户就有了安全感。支付宝的账户安全风波发生后蚂蚁金服负责人在知乎上回应称：“安全不等于安全感。数据上显示这样找回登录密码的方式是安全的，我们就以为够了，但没有想到，这种方式其实是让不少用户没有安全感的。安全但没安全感，也会出大事。”安全感的塑造像用户体验一样需要所有岗位都有强烈意识和努力才能实现，它对用户来说是需要慢慢积累的。下图对影响支付产品安全感的因素进行 ...继续阅读 (34)

CSS Variable即CSS变量，聊CSS变量之前，我想先来说说Sass和Less,还有Stylus，它们都是目前使用较为普遍的三款CSS预处理框架，我们为什么要使用它们呢，因为它们都可以让你在CSS中方便的使用变量、简单的程序逻辑、函数等在编程时使用的一些基本技巧，这些框架对于这种CSS预处理的技术已经非常成熟，可以让你的CSS代码变的更加简洁、便于维护、在编写的时候也无需考虑代码的兼容性。三大编译语言的方法首先他们不约而同的都将自己的名称做为编译文件的后缀名，分别是：由于Sass和Less都使用的是标准的CSS语法，和Stylus有所不同，它们分别支持以下几种语法：它们的变量使用方法也有不太一样的地方：以上三种框架编译后的写法，都会得到以下相同的样式：其次就是嵌套方式，有时候我们的类名会引入非常多的父级元素，这样冗余的代码，不仅没有提升可读性，而且增加代码的体积：如果使用CSS预处理，就可以少些重复的类名，代码结构层次清晰，显得会比较优雅：css变量的方法那么CSS变量这边的情况又是如何？关于变量，其实不外乎定义和使用，我们可以通过这样一个简单的例子来了解，例如：CSS：HTML：这里定义了三个变量，title、link、text，变量的应用范围是整个document，实际效果如下：当然CSS变量也是有应用范围的，这就是说，你可以覆盖它们，因为变量的声明和使用遵循了CSS的 ...继续阅读 (22)

在响应式项目中，百分比的数值的应用越来越多，比如栅格化布局、背景定位、内边距等。以往对于这种数值，我们大都是直接采用计算器计算出来的数值。但这种数值有时会很长，特别是除不尽的数值如23.33333333%。数据不美观不说，关键对于这种小数位的位数应该如何取舍，一直以来都没有理论依据。为了解决这个问题，我们需要先了解浏览器是如何处理这些小数位的。对于小数位的处理，不同的浏览器有不同的处理方法，主要有三种：处理成整数、保留4位小数或保留15位小数。现代浏览器基本支持保留小数位的处理。由于显示器是由像素单元组成的，对于小于1像素的部分，是无法像像素级那样精确地处理的，而是采用亚像素渲染的方式进行处理（有兴趣了解亚像素渲染，可查看这篇文章“Subpixel rendering”）。这里我们借用Alex Kilgour的实验页面对常用的浏览器进行测试，具体实验页面见“带小数位的百分比、像素测试页面”。一、测试实验本次实验主要分为三组：（一）第一组第一组是测试页面中的例子1，本组主要测试浏览器对百分比小数位的值是如何处理的，方法是设置两个huge元素的百分比宽度为：50.4234112897987342876343534543534635653654654645676756756756756756765%、50.56976128979878658763435345435346356536546 ...继续阅读 (36)

在仲夏刚刚来到的六月，我们一行人二十位小朋友在欢快的六一儿童节出发去往韩国首尔进行5天的行程。一说到韩国，就会想到美美美美的男子天团，与跳舞超级nice的各色女子，以及各种买买买，当然还有各种吃喝玩乐等着我们，so动起来吧！闲话少说，进入正题。 五天的行程DAY1：深圳飞首尔，明洞吃吃吃，明洞天主教堂DAY2：韩屋北村，土俗村人参鸡，三清洞，仁寺洞，江南区DAY3：青瓦台，景福宫，安东鸡，猫咪咖啡馆，涂鸦秀DAY4：梨花女子大学，乱打秀，弘益大学周末市场DAY5：首尔回深圳 DAY1：深圳飞首尔，明洞吃吃吃，明洞天主教堂我在上深圳去首尔的飞机，到酒店的后修整了一阵，大家收拾收拾就立刻开始浪了~我们一行人按着GOOGLE地图开始向着明洞进发。在明洞的，各家店铺出来招揽生意的小妹都说说一两句：“快来看看试一试，免费送，有优惠。”兑换了韩币后，我们在大众点评找了一家评价挺好的饺子店开始吃韩国第一餐。韩国的饺子要包的又大又圆，不像中国那样是长条形的，而且韩国的饺子饺子皮一定要又薄又大。还有好吃的冷面与豆浆汤（大酱汤）。那些辣白菜等小菜都是可以加的，喝的也是冰水！吃的饱饱的，接下来就开始逛热闹的明洞啦~路边很多卖小吃的，烤鱿鱼、撸串、鸡蛋糕、辣年糕、新鲜水果等等~还有各色店铺~吃吃吃~逛逛逛~来了韩国一定要喝香蕉奶（后来好像发现我买的不是很正宗，不过也挺好喝的）吃饱了在明洞里散着步，夜里和 ...继续阅读 (41)

世界是一本书，不去旅行的人只看到了这本书的一页。 -- 圣奥古斯丁为了多看几页世界这本书，怀着对大自然和大海的畅想增值产品设计中心的小伙伴们开始了海南东线环岛深度游。海南自然风光秀美，生态环境得天独厚，旅游资源丰富多样，下面就让我们一起来揭开海南神秘的面纱。椰风一说到海南，往往想到的是蔚然成风的椰林和无边无际的大海。租车开在环岛公路上，路边是茂密的椰林，湛蓝的天空和朵朵白云相映成趣。亭台楼阁，错落有致,蓝天白云，心旷神怡。一个慵懒的午后，躺在沙滩上，惬意~天然形成的冷泉边，吟诗作画，在炎热的夏日中感受丝丝清凉。海韵大海总是神秘而美丽，时而如沐春风，时而风起云涌，时而微波粼粼，时而白浪滔滔。分层色的海水，带给你的是无边的广阔和大自然的美好。而海南的陵水分界洲岛的海水是其中的佼佼者，海水洁净，可见度达 5 - 10 米，岸上观看，海水的颜色分为碧蓝，碧绿，深蓝。这里是坠落红尘的天堂，被称为是浮在南海上的美丽遗世孤岛。清澈的海水。山海相应，海天相接。陶醉的游人。美食海南的美食数不胜数，除了喷香可口椰子之外，还有肉质紧实的文昌鸡，美味可口的嘉积鸭，鲜嫩多汁的东山羊，如沐春风的温泉鹅，以及各种生猛海鲜。除了有这些让人食指大动的美味佳肴，海南的甜品也是一绝。椰香四溢，用料上乘的清补凉；没吃后悔，吃了没多吃几盘更后悔的芒果肠粉；饭前必备，清凉入心的冰镇椰子。老板，来十个冰镇椰子。见闻海南除了风光 ...继续阅读 (32)

2017腾讯SNG “ 一起出发，为爱徒色 ” 新年徒步活动已于2月8日圆满结束。活动在深圳湾公园举行，全程以徒步为活动主题，在终点处开展了草地音乐节、颁奖、抽奖以及新年红包大放送等活动，让SNG的伙伴们活力四射、期待满满，在新的一年开年之际有一个青春活力、朝气蓬勃的开始。 品牌设计  BRAND DESIGN“ 一起出发，为爱徒色 ” 新年活动根据其徒步的属性，围绕Slogan为设计基础，展现属于腾讯社交网络事业群的文化，以充满活力、年轻四射为品牌调性，通过标志设计、主视觉设计以及一系列的周边设计来塑造品牌。为了让品牌标志更好的诠释活动的定位与性质，将“一起出发，为爱徒色”这一徒步活动进行了关键词的提取 。 标志关键词  LOGO IDEA标志设计过程  LOGO DESIGN PROCESS 1、第一轮尝试  FIRST ROUND OF STUDIES设计理念：第一轮尝试主要根据 “ 参与者 ” 、“ 道路 ” 、“ 活力 ” 、“ 速度 ” 等关键词，突出徒步活动的定位和活跃灵动的氛围，进行第一轮的LOGO设计尝试。意见反馈：经过初步沟通，对方较倾向方案A的表现方式与方案C的设计理念，提出需要更加图形化的标志设计，希望将方案A与方案C相结合，通过标志的设计来凸显活动属性与氛围。 2、第二轮尝试  SECOND ROUND OF STUDIES设计理念：这是标志设计的演变过 ...继续阅读 (31)

StartFragment新手设计师相较于资深设计师，后者技能更丰富且全面，很多人想要进阶资深却苦于培养新技能，笔者在经手不少视频动效项目后，对于技能进阶颇有心得。通常技能进阶的方向有如下两种：钻研型，工作需求和自身特长强结合，原特长在工作中日益强大，影响力不断提高；发散型，工作需求和自身特长有较大偏差，但经过努力让自己掌握了新技能，极大增强了职场的适应力和综合能力。两者各有千秋，笔者则是在发散型的艰难道路上一路飞奔后，大量积累了视频剪辑和动效制作的经验，希望给走发散型道路的设计师助一臂之力。我们的团队从“画报”开始，一个偏Loft感觉的照片分享app，到主打音乐MV的“企鹅MV”，最后到玩转动效的短视频app——“闪咖”，一路以来不断要求设计师的技能变得更加立体：设计能力从平面层次，提升到能稳定输出动效的层次，并且能够辅导新人去快速入门。产品的功能形态不断变化个人的能力值形态也不断立体化然而我会告诉你，刚来的时候我只是个会PS和画插画的愣头青吗？StartFragment目前的闪咖是一款玩法新鲜的视频app，最初以表演为切入点，一直持续更新音乐，滤镜和动效等，为大家能更好的秀出自己而服务，尤其微信推出了10秒短视频功能后，引爆了一波刷爆朋友圈的短视频需求，所以，迫切要求闪咖的设计师能在动效设计上扛起重担。那就是我们正在研究的手绘特效。什么是手绘特效？我们简单看一些案例：1.苹果A ...继续阅读 (25)

| 导语本文将从为什么要探究更自然的动画、如何探究运动曲线方程、列举常用的运动曲线、分别使用js和css实现曲线动画效果、可视化实现工具这几个方面进行介绍。希望阅读后，本文能给你在制作动画效果时带来一点帮助。1.为什么需要探究更自然的动画自css animation推出后，强大的功能使得我们通过css也能制作出媲美flash的动画效果。然而在制作动画的时候，我们也许会常常纠结怎么设置timing-function。一般情况下，我们会直接使用自带的五个动画函数（linear、ease、ease-in、ease-out、ease-in-out），或是在cubic-bezier.com创建一些自定义的动画函数(cubic-bezier(n,n,n,n))。但往往这一切都只是局限于使用，而不知道其原理究竟是什么，以及没有背后的物理原理支撑，使得做出来的动画可能会变得有点形而上学。例如用ease-in来做小球从高处掉下的效果，这个加速效果没有遵循相关物理原理，使得出来的动画效果不太自然。自然的动画效果应该是和我们在现实生活中看到的物体运动轨迹相似的。这样的效果往往与背后的运动曲线函数紧密联系在一起。如上面提到的小球从高处掉下效果，对应的是匀加速运动函数s1=0.5*g*t²。若再探讨之后受到空气阻力及接触面材质影响，回弹的高度s2=s1*n(0<1，可以假定n=0.64)，如此循环下去，直至 ...继续阅读 (34)

项目背景 About Project企鹅电竞（Tencent Egame） - 腾讯旗下的一站式移动电竞社区，为玩家提供移动电竞的一站式体验。作为腾讯旗下出色的电竞社区，其品牌应当结合企鹅电竞的“直播“等特性，让用户感受到品牌的魅力和实力，提升整体品牌元素。同时品牌视觉识别应用保持统一风格，通过对标志，品牌色，专用字体，辅助图形和应用系统的整体设计，构成一个完善的视觉识别系统。 品牌概述 Brand Overview企鹅电竞（Tencent Egame） - 腾讯旗下的一站式移动电竞社区，为玩家提供移动电竞的一站式体验。在腾讯大公司的体系下，作为核心移动电竞社区，承上启下联动环境。产品涵盖手游赛事，直播，视频，礼包等多方面内容，用户可以参加官方组织的各级比赛获得丰厚的奖金和荣誉，还有最精彩的职业选手直播内容。目前企鹅电竞连接了公司内各团队资源，搭建了全方位的电竞从业员（主播，选手，解说等）的培养体系，对不同层面的电竞爱好者，提供相应的产品能力和运营包装，致力于成就每一个有电竞梦想的人！ 品牌标志关键词 Brand Logo Idea企鹅电竞（Tencent Egame）作为腾讯旗下的一站式移动电竞社区，产品内容和活动更加多元化，其品牌标志也需要很好地解释产品的定位与性质，所以对企业电竞的产品与业务上进行了关键词地提取，为了更能让用户感受到品牌的魅力和实力，从而提升整体品牌体验。 ...继续阅读 (31)

1.About QQfamilyQQfamily was developed to represent official QQ cartoon IP(Intellectual Property) brand of  Tencent. QQfamily characters extend the brand image that QQ penguin of Tencent has built. By giving unique look and personality to each character, QQfamily is intended to make a positive impression through stories that characters create. Each character is involved with witty and fun stories of daily life that lead the users feel more closer to the brand and characters. Their dynamic emotional expressions make the brand image more young and friendly as well. QQfamily is not just a static ...继续阅读 (21)

前言微信小程序是一个工程，就和盖房子一样，打好了地基，才能保证后续工程师建立在可靠牢固的基础上。笔者需要经常新建项目，每次都要重复“修改项目结构 -> 从老项目中复制粘贴文件 -> 删除一些老项目中代码”这样的过程，实在是…费心费力。另一个痛点是：每次新建小程序页面要生成三个文件名相同的文件 ( .wxml、.wxss 和 .js )，命令行太长（据微信同事：也可以在 app.json 的pages字段下添加新页面的路径，保存后也会生成对应的文件）。因此，阅读本文需要对小程序开发稍有了解（简易教程指路）。 目标我们现在有两个目标：根据通用模板新建项目一键新建页面目录以及在目录中的三个文件 ：.wxml、 .wxss 和 .js也可以直接在 app.json 的pages字段创建页面，保存后生成这三个文件。笔者没有采用这个方法的缘由一个是开始时不知道有此功能，另一个是不合平时的操作习惯，再者想到 js 文件初始化后，需要引入常用库，要插入代码片段，所以保留了这个功能。这两个需求其实很简单，不需要 GUI，所以我们可以做一个 npm 命令行工具。想象一下这个命令行用起来应该是什么样的呢：~ npm install wxapp -g ~ wxapp -i myapp && cd myapp ~ wxapp -p list用流程图示意就是：实现正式开始之前，请先确认本地的开发环境，笔者的本 ...继续阅读 (38)

想方案想的头大，一直在原地打转跳不出来？想了半天提出的方案，被老板说怎么没想到别的某某方案？有时虽然想出不少方案，但是实质在渐行渐远？不是人人都有特别灵活的脑子 ，就算是灵活的脑子也不会无时无刻都灵感无限，那在我们面对思维瓶颈的时候，有没有方法可以帮助我们快速且有效的去拓展思维呢？ 一．理性感性，缺一不可我们思考方案面临“脑衰竭”的时候，往往喜欢会用两种方式来寻找突破口：第一种是借助工具或方法进行系统性的思维梳理和拓展，比如Storyboard、Design Thinking、SWOT分析等等。但有时经过理性的分析思考，并不容易产生“惊艳”的方案，尤其是作为一名交互设计师，合理的逻辑思维优势虽然明显，但往往又是一种束缚。第二种是借助集体的智慧——头脑风暴，在脑暴的过程中有的人想到的是些功能，有的人想到些相关技术，还有的人想到些场景甚至是一种感觉，就这样借助大家不同的思维角度来进行思维的碰撞。其实无论自己思考还是集体脑暴，都不要放过那些刹那间的感性感知，有时会带来意想不到的收获！面对问题，每个人都有自己习惯的思维方式和方法，多数人在工作中更习惯用理性思维去分析和操作，也有能凭感性思维做出成果的人。这并没有绝对的哪种思维更好，只不过个人的擅长不同，但无论哪种思维方式，都容易有视野的缺失。将两种思维结合起来进行思维发散，快速有效的想出更多的方案，在工作中我慢慢琢磨出自己的一些方法来。其实 ...继续阅读 (27)

随着大屏幕高清分辨率的普及，我们在打游戏、看电影、浏览美图时，总希望屏幕越大越好，这种视角上广度与深度的享受以及和沉浸式、聚焦的体验，是在小屏幕上完全给予不了的。图中可以看出5.5英寸以上屏幕可以称Phablet，7英寸以上就是Tablet。这次案例以Tablet设备为主，Phablet设备为辅进行体验设计。在我们的社交平台上，用户消息在多个终端设备传递中，产品功能只是在原有基础上简单粗暴放大而已，那么大屏手机/平板电脑存在的价值化为乌有。案例分析：这种结构化消息是目前国内主流的一种设计形态。1.以消息为主的结构化设计:不论是资讯分享、音乐分享、视频分享不以内容区分而设计，都在一种载体内呈现，这种结构虽普适性强，可以兼容多元化的场景。但因设计形态统一，导致在内容辨识度上也有所下降，内容设计上没有各自特点，用户在浏览过程中容易忽略内容本质。2.信息内容碎片化:用户可以获取到更多信息，但因内容平均分布，所以画面不够聚焦。我们可以把这些内容信息看成点的组合，点的基本属性是瞩目性，能形成视觉的中心.当画面中有3个以上的相同大小点时，画面就会显的凌乱。当画面有不同面积的点时，较大点会引起人们的注意 ，依次会关注较小的点。3.以标题文字为主进行快速浏览：在浏览过程中用户通常以抓取关键词为主,快速吸引到下一级信息。而图片在大部分情况下会有被缩小，裁剪，因图片尺寸较小，从图中获取不到更多的信息。在 ...继续阅读 (28)

随着大屏幕高清分辨率的普及，我们在打游戏、看电影、浏览美图时，总希望屏幕越大越好，这种视角上广度与深度的享受以及和沉浸式、聚焦的体验，是在小屏幕上完全给予不了的。图中可以看出5.5英寸以上屏幕可以称Phablet，7英寸以上就是Tablet。这次案例以Tablet设备为主，Phablet设备为辅进行体验设计。在我们的社交平台上，用户消息在多个终端设备传递中，产品功能只是在原有基础上简单粗暴放大而已，那么大屏手机/平板电脑存在的价值化为乌有。案例分析：这种结构化消息是目前国内主流的一种设计形态。1.以消息为主的结构化设计:不论是资讯分享、音乐分享、视频分享不以内容区分而设计，都在一种载体内呈现，这种结构虽普适性强，可以兼容多元化的场景。但因设计形态统一，导致在内容辨识度上也有所下降，内容设计上没有各自特点，用户在浏览过程中容易忽略内容本质。2.信息内容碎片化:用户可以获取到更多信息，但因内容平均分布，所以画面不够聚焦。我们可以把这些内容信息看成点的组合，点的基本属性是瞩目性，能形成视觉的中心.当画面中有3个以上的相同大小点时，画面就会显的凌乱。当画面有不同面积的点时，较大点会引起人们的注意 ，依次会关注较小的点。3.以标题文字为主进行快速浏览：在浏览过程中用户通常以抓取关键词为主,快速吸引到下一级信息。而图片在大部分情况下会有被缩小，裁剪，因图片尺寸较小，从图中获取不到更多的信息。在 ...继续阅读 (35)

在SNG（腾讯社交网络事业群）品牌系统语言里，LOGO系统承载品牌视觉的最核心容器，是整个品牌视觉系统的灵魂，是品牌的精神文化理念、信誉、服务等特点的浓缩表现，直接影响着社交网络品牌的发展。本文核心剖析社交网络产品LOGO设计系统。锐变启程伴随着我们的成长的QQ，2016年已经成功锐变。新企鹅整体造型更加锐利、修身、简洁。企鹅的视觉角度从略带俯视变成了平视，让其图形更加的几何化。更简洁时尚的企鹅LOGO在年轻用户心中成为“潮鹅”。QQ不是孤军奋战，是整个社交网络产品体系在一起奋进。我们的用户群体是年轻且最有活力的一代。品牌的内涵理念要持续提升，以保证品牌贴近市场和用户。打造品牌语言系统，表层价值是让社交网络产品脱颖而出。深层价值是塑造一个专业创新的内容平台，承载整个互联网生活体系，反映社交网络产品对优质设计体验的追求。品牌设计系统的背后是是整个社交网络品牌生态策略。社交网络品牌设计系统已经悄然进行，第一个重塑品牌的是腾讯云，接着腾讯企点、天天P图、微云等陆续刷新。SNG品牌集群 设计系统背后的品牌生态策略为什么要做SNG打造一个丰富的内容平台，承载整个互联网生活体系。视觉体系是社交网络品牌盛放意义的容器。过去的社交网络品牌体系，没有一套成熟的品牌设计系统。我们需要打造品牌视觉设计系统，让用户认知社交网络品牌，获得用户更高的忠诚度。旧版SNG品牌集群 系统梳理社交网络品牌语言系统的 ...继续阅读 (30)

项目背景QQ国际版主要是针对国外用户打造的一款轻量社交产品。由于当前产品迭代周期相对较长，我们对当前视觉提出一个疑问:现有产品的视觉形态，是否符合国际版的产品调性。基于这个问题，我们开启这次探索之旅。现有版本的视觉问题:1.现有的视觉形象是否符合产品气质，在用户使用的过程中，是否能够留下深刻印象。2.对于信息层级关系的处理，页面中元素的比例分布是否合理。3.设计细节的优化，例如分割线的处理、灰色的运用、图标的形体等，都有提升的空间。产品的认知与定位1. 产品定位通过用户调研的反馈，人们对国际版的使用印象主要集中在功能少、无广告、操作便捷、翻译功能等。轻量、效率对于他们来说是第一位。而手Q有着更佳丰富的功能以及资源，定位更倾向于娱乐化社交方向，所以两者产品的定位还是有些差异。2. 人群定位国际版主要针对海外市场，它可能是留学海外的文艺青年，时尚领域的潮流达人，也可能是商务业界的白领精英。他们往往对生活品质有着独特的追求，对新鲜事物也更容易去接受。在开始视觉探索的前提，我们不仅要展现用户个性化的一面，还要保证用户使用产品的高效性。3. 竞品分析竞品对象：Line 、Talk、Snapchat、Whatsapp、Allo、Skype、Messenger、Hangouts如图:Line、Talk主要针对日韩地区，无论配色还是设计细节，都能体现产品的亲和力。Whatsapp、Allo、Mes ...继续阅读 (30)

项目背景QQ国际版主要是针对国外用户打造的一款轻量社交产品。由于当前产品迭代周期相对较长，我们对当前视觉提出一个疑问:现有产品的视觉形态，是否符合国际版的产品调性。基于这个问题，我们开启这次探索之旅。现有版本的视觉问题:1.现有的视觉形象是否符合产品气质，在用户使用的过程中，是否能够留下深刻印象。2.对于信息层级关系的处理，页面中元素的比例分布是否合理。3.设计细节的优化，例如分割线的处理、灰色的运用、图标的形体等，都有提升的空间。产品的认知与定位1. 产品定位通过用户调研的反馈，人们对国际版的使用印象主要集中在功能少、无广告、操作便捷、翻译功能等。轻量、效率对于他们来说是第一位。而手Q有着更佳丰富的功能以及资源，定位更倾向于娱乐化社交方向，所以两者产品的定位还是有些差异。2. 人群定位国际版主要针对海外市场，它可能是留学海外的文艺青年，时尚领域的潮流达人，也可能是商务业界的白领精英。他们往往对生活品质有着独特的追求，对新鲜事物也更容易去接受。在开始视觉探索的前提，我们不仅要展现用户个性化的一面，还要保证用户使用产品的高效性。3. 竞品分析竞品对象：Line 、Talk、Snapchat、Whatsapp、Allo、Skype、Messenger、Hangouts如图:Line、Talk主要针对日韩地区，无论配色还是设计细节，都能体现产品的亲和力。Whatsapp、Allo、Mes ...继续阅读 (32)

| 导语在支持TIM Mac版的时间里，设计团队经历了产品的诞生、迭代、转型，在跟进一个个需求的同时我们也在反思：如今的产品是否理想？是否可以为用户解决办公场景中的痛点？如果重新定义一款办公产品，会是怎样的形态？为了解决这些问题，设计团队组成了焦点小组，重新梳理办公场景，尝试定义一款全新的办公产品。定义一款新产品，首先回归到三个最基本的问题：1. 确定用户对用户的精准定位与分析是发现问题、痛点从而找到解决方法的必要途径。在针对目前办公产品的市场现状调研显示，目前QQ的办公用户所在企业规模以小型、中型公司为主，约占59.3%；用户行业集中在IT、事业单位、房产、加工制造、贸易行业，其中IT/通信/电子/互联网占比达到20.3%；生产/加工/制造业为11.5%；房地产/建筑业为11.1%。（数据来源：《TIM调研分析》）在确定目标人群的过程中，我们尝试行业领域维度出发分析用户特点，但是由于行业范围过于宽泛，不同领域之间的办公需求千差万别，深入了解的研究成本过高，以至于很难概括和归纳用户数据。在改变用户定义角度之后，我们将目标人群定义为有办公需求的1-100中小型团队或个人。2. 发现问题在确认用户范围之后，通过对相关用户的调研结果可以将目标人群划分为两类：团队leader/管理者以及员工。两类用户对办公场景下的需求、痛点以及期望也有所不同：根据调研显示，团队管理者用户普遍关注团队整体发 ...继续阅读 (32)

| 导语在支持TIM Mac版的时间里，设计团队经历了产品的诞生、迭代、转型，在跟进一个个需求的同时我们也在反思：如今的产品是否理想？是否可以为用户解决办公场景中的痛点？如果重新定义一款办公产品，会是怎样的形态？为了解决这些问题，设计团队组成了焦点小组，重新梳理办公场景，尝试定义一款全新的办公产品。定义一款新产品，首先回归到三个最基本的问题：1. 确定用户对用户的精准定位与分析是发现问题、痛点从而找到解决方法的必要途径。在针对目前办公产品的市场现状调研显示，目前QQ的办公用户所在企业规模以小型、中型公司为主，约占59.3%；用户行业集中在IT、事业单位、房产、加工制造、贸易行业，其中IT/通信/电子/互联网占比达到20.3%；生产/加工/制造业为11.5%；房地产/建筑业为11.1%。（数据来源：《TIM调研分析》）在确定目标人群的过程中，我们尝试行业领域维度出发分析用户特点，但是由于行业范围过于宽泛，不同领域之间的办公需求千差万别，深入了解的研究成本过高，以至于很难概括和归纳用户数据。在改变用户定义角度之后，我们将目标人群定义为有办公需求的1-100中小型团队或个人。2. 发现问题在确认用户范围之后，通过对相关用户的调研结果可以将目标人群划分为两类：团队leader/管理者以及员工。两类用户对办公场景下的需求、痛点以及期望也有所不同：根据调研显示，团队管理者用户普遍关注团队整体发 ...继续阅读 (35)