现如今，emoji表情已经走入我们每个人的社交生活中，大多数现代计算机系统已经兼容emoji表情。今天，我们讲一下emoji表情在QQ空间中各个客户端的展示方案。Emoji的历史emoji，也叫绘文字（日语：絵文字/えもじemoji）是日本在无线通信中所使用的视觉情感符号，由栗田穰崇（Shigetaka Kurita）创作，并在日本网络及手机用户中流行。自苹果公司发布的ios5输入法中加入了emoji后，这种表情符号开始席卷全球，普遍应用于各种手机短信和社交网络中。苹果输入法不停的迭代emoji表情，在ios8.3中，加入了同性家庭、以及对不同肤色人种的职业展示：ios9.1中，苹果加入了很多新的有趣的表情：ios10.0输入法中，将大部分表情重新设计，同时加入了单亲家庭的emoji：同时，各个手机客户端也都支持emoji，不过每个系统有各自不同的设计效果：Emoji展示方案怎么样让emoji表情在每个客户端都能展示，并且有展示的一致性呢？我们的方案是将emoji表情改成图片的形式。由于emoji在各个系统上的设计不尽相同，为了体验的一致性，也为了更美的展示，我们将苹果设计的emoji表情作为规范。展示方案的逻辑如下：（1）用户在设备中输入emoji（2）获取用户输入的unicode编码（每一个emoji表情都是一个或几个unicode编码组成，跟文字一样）（3）生成unicode ...继续阅读 (36)

 现如今，emoji表情已经走入我们每个人的社交生活中，大多数现代计算机系统已经兼容emoji表情。今天，我们讲一下emoji表情在QQ空间中各个客户端的展示方案。Emoji的历史emoji，也叫绘文字（日语：絵文字/えもじemoji）是日本在无线通信中所使用的视觉情感符号，由栗田穰崇（Shigetaka Kurita）创作，并在日本网络及手机用户中流行。自苹果公司发布的ios5输入法中加入了emoji后，这种表情符号开始席卷全球，普遍应用于各种手机短信和社交网络中。苹果输入法不停的迭代emoji表情，在ios8.3中，加入了同性家庭、以及对不同肤色人种的职业展示：ios9.1中，苹果加入了很多新的有趣的表情：ios10.0输入法中，将大部分表情重新设计，同时加入了单亲家庭的emoji：同时，各个手机客户端也都支持emoji，不过每个系统有各自不同的设计效果：Emoji展示方案怎么样让emoji表情在每个客户端都能展示，并且有展示的一致性呢？我们的方案是将emoji表情改成图片的形式。由于emoji在各个系统上的设计不尽相同，为了体验的一致性，也为了更美的展示，我们将苹果设计的emoji表情作为规范。展示方案的逻辑如下：（1）用户在设备中输入emoji（2）获取用户输入的unicode编码（每一个emoji表情都是一个或几个unicode编码组成，跟文字一样）（3）生成u ...继续阅读 (34)

2017腾讯ISUX“屋台食戟”新年派对已于1月13日圆满结束。活动在深圳市龙岗区大鹏农科生态园举行，今年的年会以美食为主题，开展了烹饪，黏土和视频剪辑的比赛，这无疑点燃了小伙伴们心中那团激情的火焰，让大家体验一次充满娱乐性的年终派对。 品牌设计“屋台”日本传统街边可移动的小吃摊位;“营戟”表达用料理进行比试。为营造出以美食为主题的比拼氛围，设计师特别为“屋台食戟”设计了主视觉。以黄棕配色的应用烘托出幸福美食的基调，并以小毛笔触作为图形与字体的点缀，加入多福的料理大师的形状，烘托出一种“匠人之心”的理念，犹如设计师们总在尝试呈现最舒服流畅的产品体验，满足最深入人心的用户需求。 美食大比拼寒风并没有磨灭小伙伴对活动的热情，每个星座团队更显神通，为求把最好的美食带给现场的大家，都是色香味具全，看出了小伙伴们制作的用心。 黏土大乱斗美食比拼的同时，还要我们的黏土大乱斗，各小组派出手工艺最精致的队员，进行黏土比拼，在有限的时间内把QQfamily与美食融合得天衣无缝，黏土形象栩栩如生，评判在打分的时候都禁为之惊叹，简直是难分难解。 视频大剪辑每组的队员都派出自己的视频拍摄与剪辑的精英，在有限的时间内把每个组合，整个活动的过程都拍摄下来，并进行剪辑，这个时间就是考验各位专业水平的时候了，虽然已暗，但看到屏幕中的自己和自己的组员，也不禁开怀大笑，十分精彩。 抽奖环节新年派对当然少不了抽奖环节， ...继续阅读 (30)

2017腾讯ISUX“屋台食戟”新年派对已于1月13日圆满结束。活动在深圳市龙岗区大鹏农科生态园举行，今年的年会以美食为主题，开展了烹饪，黏土和视频剪辑的比赛，这无疑点燃了小伙伴们心中那团激情的火焰，让大家体验一次充满娱乐性的年终派对。 品牌设计“屋台”日本传统街边可移动的小吃摊位;“营戟”表达用料理进行比试。为营造出以美食为主题的比拼氛围，设计师特别为“屋台食戟”设计了主视觉。以黄棕配色的应用烘托出幸福美食的基调，并以小毛笔触作为图形与字体的点缀，加入多福的料理大师的形状，烘托出一种“匠人之心”的理念，犹如设计师们总在尝试呈现最舒服流畅的产品体验，满足最深入人心的用户需求。 美食大比拼寒风并没有磨灭小伙伴对活动的热情，每个星座团队更显神通，为求把最好的美食带给现场的大家，都是色香味具全，看出了小伙伴们制作的用心。 黏土大乱斗美食比拼的同时，还要我们的黏土大乱斗，各小组派出手工艺最精致的队员，进行黏土比拼，在有限的时间内把QQfamily与美食融合得天衣无缝，黏土形象栩栩如生，评判在打分的时候都禁为之惊叹，简直是难分难解。 视频大剪辑每组的队员都派出自己的视频拍摄与剪辑的精英，在有限的时间内把每个组合，整个活动的过程都拍摄下来，并进行剪辑，这个时间就是考验各位专业水平的时候了，虽然已暗，但看到屏幕中的自己和自己的组员，也不禁开怀大笑，十分精彩 ...继续阅读 (37)

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

前言以往做一些H5的运营项目，都是动画设计师使用Animate cc（原来的Flash）先设计好动画原型，然后交给我们UI开发来实现。做过动画开发的童鞋都知道动画开发都是比较耗费时间精力的，而且还要高质量的还原动画设计师设计好的动画，来回沟通成本也非常高。那有没有一种高效的方法来改善这种流程，提高开发效率的同时还能完成高品质的动画呢？经过一段时间的摸索，发现AnimateCC（就是原来的Flash）可以导出canvas动画，而且是基于createjs这个开发轻量级游戏的js库的，非常适合用来做移动端的一些h5动画。不仅缩短制作动画所需要的时间。同时它也是一个可视化的IDE，不需要编写代码就可以完成高品质的动画效果；还可以通过Javascript，为动画效果添加交互性。比如下面这一页动画，如果使用传统的html css3的动画开发或者是canvas方式来硬写代码来实现，切图加上动画开发没有一天应该是搞不定的；而使用AnimateCC导出配合自己写一点点代码，一两个小时就可以搞定。一些需要了解的概念开始之前先来了解下Animate CC中做动画的概念。帧频是指每秒钟放映或显示的帧或图像的数量，这个数值设置越大，动画越快，但同时也是性能消耗大户，一般设置24帧就可以了。图形与影片剪辑我们可以将单独的动画，放到一个独立的影片剪辑里，这样可以更好的控制动画。几个独立的剪片剪辑，可以组成一个完 ...继续阅读 (34)

前言以往做一些H5的运营项目，都是动画设计师使用Animate cc（原来的Flash）先设计好动画原型，然后交给我们UI开发来实现。做过动画开发的童鞋都知道动画开发都是比较耗费时间精力的，而且还要高质量的还原动画设计师设计好的动画，来回沟通成本也非常高。那有没有一种高效的方法来改善这种流程，提高开发效率的同时还能完成高品质的动画呢？经过一段时间的摸索，发现AnimateCC（就是原来的Flash）可以导出canvas动画，而且是基于createjs这个开发轻量级游戏的js库的，非常适合用来做移动端的一些h5动画。不仅缩短制作动画所需要的时间。同时它也是一个可视化的IDE，不需要编写代码就可以完成高品质的动画效果；还可以通过Javascript，为动画效果添加交互性。比如下面这一页动画，如果使用传统的html css3的动画开发或者是canvas方式来硬写代码来实现，切图加上动画开发没有一天应该是搞不定的；而使用AnimateCC导出配合自己写一点点代码，一两个小时就可以搞定。一些需要了解的概念开始之前先来了解下Animate CC中做动画的概念。帧频是指每秒钟放映或显示的帧或图像的数量，这个数值设置越大，动画越快，但同时也是性能消耗大户，一般设置24帧就可以了。图形与影片剪辑我们可以将单独的动画，放到一个独立的影片剪辑里，这样可以更好的控制动画。几个独立的剪片剪辑，可以组成一个完 ...继续阅读 (36)

主题一直是QQiPad比较薄弱的一块，在用户的强烈呼声下，项目组决定在6.5版本上线新的主题，为此做了大量的尝试和思考。基于大屏设计的QQiPad主题有何特点？应该如何设计？在此分享本次主题设计总结。需求背景主题设计的需求源自三个原因：1.从Support上梳理了用户对QQiPad的反馈，在体验方面，用户希望提供更多的主题，高居第一位；2.线上主题数量少，风格弱，只是手Q主题的简单搬运，没有为iPad大屏做针对性的设计；3.本期开发人力紧缺，从设计侧发起主题设计的需求，能够在占用开发资源较少的前提下实现项目落地。准备工作在着手设计前，我对三个影响本次主题设计的关键点进行了调研和分析，得到了一些有用的结论：1.现存主题数量少、效果弱现存4套主题题材少，受众相对局限；主题只对左侧Tab Bar底图和图标进行替换，效果较弱。2.活跃用户偏年轻&低龄，审美偏向清新简约的界面调研了今年QQiPad活跃用户的分布情况，发现30岁以下用户占据80%以上。同时，14及14岁以下的小／初学生人群及18-22岁的大学生人群在占比上较为突出，说明目前QQiPad的使用人群主要是30岁以下的青年人，同时低龄人群也占了明显的数量，因此在主题题材挑选上，应优先考虑青年人及低龄人群的喜好。ISUX北京设计中心在今年年中做了一次关于QQiPad用户审美取向的调研，得到了下面的一组数据：从这组数据我们可以相对直观地 ...继续阅读 (21)

主题一直是QQiPad比较薄弱的一块，在用户的强烈呼声下，项目组决定在6.5版本上线新的主题，为此做了大量的尝试和思考。基于大屏设计的QQiPad主题有何特点？应该如何设计？在此分享本次主题设计总结。需求背景主题设计的需求源自三个原因：1.从Support上梳理了用户对QQiPad的反馈，在体验方面，用户希望提供更多的主题，高居第一位；2.线上主题数量少，风格弱，只是手Q主题的简单搬运，没有为iPad大屏做针对性的设计；3.本期开发人力紧缺，从设计侧发起主题设计的需求，能够在占用开发资源较少的前提下实现项目落地。准备工作在着手设计前，我对三个影响本次主题设计的关键点进行了调研和分析，得到了一些有用的结论：1.现存主题数量少、效果弱现存4套主题题材少，受众相对局限；主题只对左侧Tab Bar底图和图标进行替换，效果较弱。2.活跃用户偏年轻&低龄，审美偏向清新简约的界面调研了今年QQiPad活跃用户的分布情况，发现30岁以下用户占据80%以上。同时，14及14岁以下的小／初学生人群及18-22岁的大学生人群在占比上较为突出，说明目前QQiPad的使用人群主要是30岁以下的青年人，同时低龄人群也占了明显的数量，因此在主题题材挑选上，应优先考虑青年人及低龄人群的喜好。ISUX北京设计中心在今年年中做了一次关于QQiPad用户审美取向的调研，得到了下面的一组数据：从这组数据我们可以相 ...继续阅读 (25)

1. 品牌概述  Brand Overview游戏应用中心是QQ空间用户专属的游戏平台，最新、最火、最好玩的游戏一网打尽：角色扮演、模拟经营、射击、棋牌、街机、赛车等各类游戏应有尽有。这里网罗了全平台最全、最给力的游戏礼包，更有积分兑换频道、各类精彩活动为玩家提供丰富给力的奖品。Game&App; Center is an exclusive gaming platform for Qzone users including the latest and hottest games such as role playing, simulation, shooting, puzzle, and racing games etc. In Game&App; Center, there are most comprehensive and greatest gift packs, points redeem channels and various activities to provide users with abundant prizes.2. 品牌更新目标  Renewal Goal游戏应用中心是QQ空间下基于网页的游戏平台。原名“应用中心”，不仅有游戏还有其他应用，所以旧Logo有“APP”字样。随着app的份额减少弱化，应用中心决定把重心放在游戏的部分，因此需要重新设计品牌标 ...继续阅读 (18)

1. 品牌概述  Brand Overview游戏应用中心是QQ空间用户专属的游戏平台，最新、最火、最好玩的游戏一网打尽：角色扮演、模拟经营、射击、棋牌、街机、赛车等各类游戏应有尽有。这里网罗了全平台最全、最给力的游戏礼包，更有积分兑换频道、各类精彩活动为玩家提供丰富给力的奖品。Game&App Center is an exclusive gaming platform for Qzone users including the latest and hottest games such as role playing, simulation, shooting, puzzle, and racing games etc. In Game&App Center, there are most comprehensive and greatest gift packs, points redeem channels and various activities to provide users with abundant prizes.2. 品牌更新目标  Renewal Goal游戏应用中心是QQ空间下基于网页的游戏平台。原名“应用中心”，不仅有游戏还有其他应用，所以旧Logo有“APP”字样。随着app的份额减少弱化，应用中心决定把重心放在游戏的部分，因此需要重 ...继续阅读 (21)

制作：alo / 编辑：红孩儿TIMTIM，腾讯旗下一款定位于办公协作的软件，可以看作是轻聊的QQ，办公更方便。在拿到这个宣传视频的需求后，我们在想如何用简洁生动的内容高效地传达出产品的价值。由于项目周期较长，在前期的沟通和设计过程中，我们也做了许多尝试。修改多次的分镜稿：    最终采用了便签代替人物角色的形式，在增加趣味性的同时，风格也更加简约。  顺畅的团队合作和高质量的产出，离不开前期大量的构思和尝试，更离不开部门和同事间完善的沟通。TIM，让团队沟通协作更轻松！ ...继续阅读 (19)

你有没有在夜间使用移动设备的习惯？你觉得QQ现有的夜间模式亮度在使用时是否舒适？为了能够更科学的验证我们的设计，我们通过对比度分析、尼特值测试、色彩亮度和色彩通用性等维度去设计界面，并总结出一套优化方法来分享给大家，相互启发。我们为什么要做夜间模式？1. 用户调研显示：57%的用户想要使用夜间模式，71.1%的用户习惯在夜间不开灯看手机在ISUX北京调研小组的帮助下，我们针对移动端QQ界面夜间模式进行了调研。从2000多份问卷数据中分析发现，用户对夜间模式有明确需求，且多数人在无照明下使用软件。2. 用户反馈现有界面夜间使用时刺眼，低亮度时界面文字不清晰调研发现，现有界面用户在夜间使用时感觉刺眼，长时间使用会感觉眼睛疼痛。部分用户认为文字看不清，辨识比较费眼。3. 用户期望更暗色 、更能保护眼睛的夜间模式设计从用户对夜间模式的期望来看，他们希望主体界面的颜色更暗，能够更加持久地使用软件。希望我们设计师，能够设计出更加保护眼睛的夜间模式。我们如何设计夜间模式？1.亮度、色彩对比度、通用性色彩是关键，行业趋势倾向低饱和无彩色*关注健康人眼特性——亮度的需求首先引入尼特值(nit)，它是用于量化亮度强度的专业术语，其意思每平方米烛光的强度：1nit=1坎德拉／平方米；白天，人的眼睛能适应亮度的值高于3.4尼特；夜晚，主体颜色接近0.034 尼特，最亮元素低于3.4尼特的亮度眼睛会比较舒适 ...继续阅读 (31)

导言：设计已经成为一门综合性学科。设计师不仅需要熟练主技能，还需要领悟其他技能，才能更好地辅助自己地工作。《设计师辅助技能手册》系列文章，目的就是探讨一些有趣&有用的辅助技能。上一篇文章讲述了设计师在合作过程中，可以通过看人识人，来优化合作体验，使用针对性的方法进行合作。通过人格分类，可以快速了解合作对象。在这一篇中将主要讲述另一个方法：情绪识别和管理。我们将讨论另一个看人技巧：情绪识别。与人格不同，人类的情绪是相同的，都有“喜怒哀乐”。而情绪的棘手之处在于：它的产生速度快，会导致本能反应，还会引发情绪感染。所以情绪波动是合作的灾难。本文将分析情绪，并展示如何管理情绪。Part 1：了解情绪1.情绪的来源情绪(Emotion)的词根是“motere”，意为“行动”。简单来说，情绪是大脑的条件反射系统，反射出人类从古到今的生存经验。当危险来临时，情绪迅速反应，根据经验，调动身体来应对，来保证存活。正因为如此，情绪会导致生理反应，例如：生气时，血液流到手部，方便攻击；恐惧时，血液流到双腿，方便逃跑；快乐时，身体恢复加快等等。这都是远古人类的生存经验。情绪反应深深地刻在我们的神经系统中。但近一万年来，随着人类文明迅速发展，情绪系统出现了严重问题：我们遭遇了现代社会的困境，但应对的条件反射却是万年前的。所以我们需要学会控制情绪，用正确的情绪应对现代场景。2.大脑的快与慢大脑的情绪反 ...继续阅读 (25)

个人型奖杯设计：四级专家奖杯设计在过去的2016年，腾讯公司SNG社交网络事业群数十名员工不断突破自我，晋升为四级专家。在鹅厂四级专家意味着在技术与经验上都有着颇深的积累与造诣，是目前职级架构最高的等级，也就是传说中的大神级人物。对于赋予专家的奖杯意义的奖杯该如何将其做出匠人精神呢？元素提炼与设计—奖杯的故事化对于准确表达出奖杯所传达的含义和分量，我们思考如何能更有深层次的彰显出自我突破与登峰造极却又不失分寸。 在纠结从职级的数字还是表意上提取元素之时，我们想象到了隐居高人，一览众山小的侠客，杰出沉着，分享自己的修为。就这样，给一个奖杯赋予故事，一位企鹅匠者屹立于抽象化的峰峦之上，每个获奖人从中都能看到自己一步步走过的故事，亦使得奖杯亲切又不失分量。材质与实现外形框架搭建好，下一步便是赋予材质，我们选择了水晶黑色与香槟金搭配，深沉内敛却让故事多一种味道。峰顶的企鹅我们选择手办制作工艺，斗笠披风也是手工粘合上去的。然而在这之前我们选择的是3D打印技术来实现，但因为材质表现和细节问题最终还是回归了传统工艺的制作。  团队型奖杯设计：腾讯荣誉奖杯在公司2016年度员工大会上，今年的腾讯荣誉奖项颁发给了在管理文化、技术实现和各业务中取得巨大突破的优秀团队。腾讯荣誉奖是在这一年内取得显著的成绩，为公司发展做出了突出的贡献，代表着公司的有突破性表现的荣誉奖项。元素 ...继续阅读 (13)

前言：工作需求每天都有，但总有一些冥冥之中会被更多人关注，如实事热点、周年庆典、大版本发布、热门合作等，那这些被更多关注的项目是否就是传说中的大型项目呢？视觉设计师在这样的项目中，又该如何发挥自己最大的作用，找到自己的最佳定位，保证高质量高效率的完成项目呢？项目需求中，往往会根据产品功能的优先级、重要程度、工作量级、影响效应范围、资源投入量等维度来对其进行项目级别的评判，如该项目需求能对团队、产品、品牌（甚至企业和社会）造成重要影响意义的，都可被认定为大型项目（重要项目）。也因其对团队、产品的意义区别于日常需求，所以相较于平常而言定会受到更多的关注和期待。视觉设计师作为输出线的中间环节，需要环扣上下游的整体协作，且作为用户浏览的媒体介质的设计者和输出者，在这之中的作用不可忽视。由于之前有幸参与了几次团队较大型项目需求的设计，对设计师在类似项目中的定位与协作方式积淀了自己的一些感悟和收获，在此和大家分享一下！大型项目类别一般情况下，大型项目可按时间划分为两种：计划型与紧急、突发型。 有可预见性，如传统节日、周年庆典、年中/年终大促，或有计划的大型改版、新产品发布等，准备时间相对充沛，且时间可弹性调整。整体设计目标以博人眼球、刺激高转化率或品牌的品质宣传为主。时间充沛的前提下，对输出的精度和效果自然需要更高的要求，这时我们须在日常需求的流程基础上增加更多的流程细节，如前期的脑 ...继续阅读 (22)

前言蒙版引导一直是一个十分热门的话题，对于很多用户来讲经常会不彻底阅读甚至快速关闭来结束引导，这样便起不到很好的教育作用。甚至还有“在界面上添加这些并不会让你的产品变得更易用”的说法（观点引自文章“Misused mobile UX patterns”）。但我认为这种说法过于片面，对于一些流程复杂或者功能个性的产品应用，添加蒙版引导进行说明，是十分有必要的。什么是蒙版引导蒙版引导（Coach Marks），从英文字面上的意思是指具有教育指示意义的引导标注。通常出现在用户初次使用产品的过程中，能够以最轻量的方式快速指引用户了解产品的使用方法或者新功能。现阶段用户打开一个新的产品通常会遇到各种引导提示（前置引导页，视频引导，弹窗提示，活动浮层介绍等等），区分于这些引导，蒙版引导通常紧贴着界面流程进行而出现,使用透明色间隔形式加上简单指示性文字与图形，总是能够简洁明了地告知用户产品的功能或者使用方法，并且由于其轻量的属性会大大减少用户的阅读时间。设计得当的蒙版引导不仅可以与其他引导相辅相成，同时也能够增加用户对产品的好感度。蒙版引导的应用场景蒙版引导的使用场景非常宽泛，根据不同的场景设计合适的蒙版引导，才能够最为直接的达到教育作用同时也不会对用户造成困扰。以下会结合案例来说明不同场景下的蒙版引导：1.阐述功能说明功能点是蒙版引导最常见的出现场景，通常会采用较为醒目的气泡或者箭头等指示性图 ...继续阅读 (21)

1. 品牌概述 Brand Overview闪咖是一款由腾讯公司出品的年轻人短视频社区应用，主打音乐秀、对口型、表演等功能，视频配上酷炫动效、实时美颜、加速录制等效果，瞬间逼格满满。闪咖还汇聚了一大批好玩有趣的网红达人，搞笑帅哥、呆萌萝莉、性感女神，应有尽有！  2. 品牌设计概念 Brand Concept闪咖是个超炫酷短视频社区，为突出业务，标志设计使用视频、皇冠、闪光三个元素。这三个元素结合，传达了闪咖录制的视频，就像王者一样闪耀夺目的寓意。   3. 品牌标志 Brand Logo闪咖标准标识由闪咖图形标志和SNG标准文字组成。设计保持SNG品牌体系一致性，其元素间的相对大小和位置是固定的，并且文字标志不能单独使用。   4. 品牌色 Brand Color为打造闪咖炫酷的品牌风格，黑色为主色。强调色使用鲜明的红色，红黑的配搭使品牌更有冲击力。不同色阶的灰色作为辅助色突出主色黑色。   5. 品牌专用字 Typography中文方正兰亭黑字体和英文Helvetica Neue字体做为闪咖的品牌专用字体，被用于品牌产品及品牌视觉传达中。遵循品牌字体运用示例，确保品牌视觉传达的一致性。    6. 品牌图案 Pattern用闪咖标 ...继续阅读 (24)

2016年末，各路APP也纷纷展开一轮轮的数据厮杀，从不同的视角阐述过去一年的精彩故事。而坐拥庞大用户数据的QQ空间，在这个既难忘又不舍的2016年，用户的故事将会被如何演绎，在寒冬带给用户怎样的温暖回忆呢？1、给2016的故事加点温度让根深蒂固的空间形象焕发新生，这势必要跳出固有的思维。我们历经多轮脑暴，逐层拆解空间内容，输出“空间、远近、门、世界、礼物、源泉、永恒……”等接近百个关键词，最终聚焦在“温度”与“自我”两个维度，希冀挖掘用户自身的故事，展现空间产品的温暖情怀。围绕着“温度”与“自我”，继续拓展出“书本、午后、回忆、穿越、斗转、星移”等关键词，最终取“时光”谐音，融合“采撷”之意，确立了“拾光2016”的概念。此次希望打破插图所营造的“虚拟世界”，以实拍的视频营造更真实的氛围。午间的阳光、白色纱窗、实木桌面给内容铺垫了温暖的基调；书本、日历、拍立得等小物件，作为内容的沉淀对象。生活中的光影瞬间，在温暖的小角落予以展示，表达“你我TA的空间回忆”。打造用户的“参与式体验”画面内容以用户的“第一视角”来呈现，营造用户“自身”翻看回忆的氛围。即：由“视觉引导”到“内容展示”的过程。观看体验是由“观看+互动”两次获知的过程组成，最后将这两层信息重新编码[1]。用户在此体验过程中增强了参与感，可以“身临其境”地参与到叙事场景之中，与内容即时地“交流”，增强内容的感知与认同感[2 ...继续阅读 (21)

导语没想到吧，你竟然可以通过企鹅FM来跑步？为什么在电台App要深度挖掘一个运动场景，交互设计师又是如何将痛点和需求转化为市场蓝海，在设计的过程中怎样将场景垂直的特色表现出来······关于这些，我有一些想法与大家分享。企鹅FM3.1上线了“跑步听”，我们内部都把它叫做“跑步电台”。跑步电台有独立入口，里面是企鹅FM联合专业运动主播精心准备的跑步节目，最大的特色在于：跑步电台会计算用户的实际跑步步频与节目目标步频之间的匹配度，来进行智能提醒，从而陪伴用户科学而轻松的跑步。用户真的有通过电台App来跑步的需求吗？这是我们在规划这个产品功能时的第一个问题。即使在音乐类软件都已经上线了跑步相关功能的当下，我们依然发问——真的有人，通过电台App来跑步吗？如果仅仅是针对现在电台类App，那需求一定是微乎其微，不同于音乐统一的内容属性，电台类内容属性太丰富——音乐时间短，小说时间长；相声很搞笑，新闻很严肃······这些内容决定了他们天然就不能像音乐一样随机重组。有时候我们需要退一步来思考需求。产品经理提出这种需求的初衷是什么——最初产品经理的出发点其实是怎样针对场景重组内容，让优质的节目得到更多的曝光，让用户可以对某一个功能入口产生粘性。所以这个需求的出发点更多是对于业务的一种探索。而之所以选择跑步这个场景，跟现在社会上健身这个“势”是分不开的。健身俨然已是全面风潮，约跑、晒跑成为了朋友圈 ...继续阅读 (15)

 Qzone logo换新配合7.0版本的发布，我们制作了一个简单明快的定格动画，带着共同的空间记忆一起讲述logo的变化。 当我们谈论时logo我们谈论的是什么？这次没有选择从logo的线条角度变化来演绎，而是选择了从有趣鲜活的形式感来解释。通过道具所代表的空间产品及属性来在logo的三个部分和镜头交替对比，进而引导用户慢慢转移到新的logo演变。 这次定格尝试小经验：1.保证灯光，场景，道具的绝对的纹丝不动。这个看似简单，其实在拍摄过程中往往经常会忽略到很多细节。固定是一个保证定格质量的重中之重呀。场景尽量不要安置在地面，因为防止道具的时候多多少少会碰触，导致元素晃动。2.相机电池满格多多益善，尽最大可能减少更换电池，三脚架各个部分锁紧，相机设置固定好，就不能再触碰了。3.用好dragonframe配合单反链接可以让你的定格事半功倍。4.考虑好构图和视频的出血线，不能完全按照相机画框构图来作为最后输出效果，也要考虑16：9等其他尺寸的输出都能适用。 ...继续阅读 (23)

以往拿到一份视觉稿要做页面适配，通常都是针对不同分辨率尺寸做断点写 media query，然后看效果再微调。开发过程中视觉稿要是做了修改，修改的地方就得再走一遍分辨率测试和微调，这时想屎的心都有了。而且这些适配都是建立在已 知的分辨率尺寸库上，如果市面新出来一款分辨率尺寸机型，呵呵，又要奔跑在测试微调路上。是不是能有用一套代码就适应各种分辨率窗口，那么就不会再有上面 这些烦恼，且开发效率快和维护成本会降低很多。答案是有的，而且这种形式最早出现于 flash 全屏整站，前阵子拜读了举总介绍的一篇文章关于图片适配属性Object-fit，发现这个属性Object-fit虽然只能应用在图片上，但是它的适配思路完全可以借鉴运用在 H5 页面适配上，这种思路即是「缩放」，也是本篇文章的核心内容。就是无论窗口宽高比怎样，页面能自动缩放到窗口大小，而且元素的坐标及大小还可以使用精确和便于js计算的px为单位。这里借用Object-fit的方法命名方便记忆，下面简单介绍 H5 页面适配几种展现形式。1、contain 模式：以内容中心为基点按照视觉稿的宽高比缩放以适配窗口显示全页面内容，窗口与内容的宽度比或高度比之间较小者缩放填满窗口，当窗口宽高比和视觉稿不同时，另一方向的两侧出现留空部分。2、cover 模式：以内容中心为基点按照窗口的宽高比等比缩放以适配窗口，窗口与内容的宽度比或高度比之间较 ...继续阅读 (25)

近期，我们对微云WEB端进行了一次“简单”的改版。这篇文章简要记录了改版过程中的一些思考。 为什么要改版微云WEB端与移动端体验不一致。移动互联网背景下，项目团队把多数资源都分配给了移动端的研发，桌面端的功能和体验得不到及时的跟进，导致用户在两个平台上的体验存在很大的落差。微云WEB端的设计较为陈旧。苹果iOS的快速发展使得整个UI设计行业日新月异，设计理念不断进化向前，微云WEB端的设计已经多年未更新，早已经不起当下设计原则的检验。 改版前的思考两端的体验对齐需要解决很多矛盾。想要将WEB端的体验与移动端统一，并没有想象中的那么简单。听起来好像只要把交互框架和视觉风格直接照搬过来就好了。但实际上要对齐的是两种使用场景的体验，这中间要调和的是小屏幕和大屏幕的矛盾，触摸操作和键鼠操作的矛盾，两种不同概念模式和心智模型的矛盾。新的设计除了符合潮流，还要更具前瞻性 。想要做出可持续的设计，首先要明确设计潮流的走向，从拟物到扁平，从形式到内容，从工具化到情感化，设计潮流的走向一直没有变，在以人为中心的前提下，越来越注重用户更深层的需求。项目团队在WEB端的资源投入注定了设计更新迭代的频率会很低。想要改版后的设计能够长久地支撑产品的发展，需要设计师把眼光放远，通过了解产品未来发展方向，做出更有前瞻性的设计。 求同存异的两端统一品牌统一性在设计一款产品不同平台客户 ...继续阅读 (28)

苹果在近期推出了新款Macbook Pro，以Touch Bar取代了原有的功能键。相信每个Mac产品团队都在思考，该如何利用它给用户带来更好的使用体验。在此分享一下QQ Mac版团队的一点思考。 Touch Bar是什么 想利用好Touch Bar，先要明白它是什么。通过苹果官方的介绍，可以了解到，苹果对Touch Bar的定义是“用来与主屏幕内容交互的具有动态界面的输入设备”。所以我们要明白它的两个主要特性：1、是键盘的延伸：Touch Bar虽然是一块屏幕，但是他并不作为显示设备，而是输入设备。它的设计初衷是希望用户能快速定位功能、调整参数，用户使用时的注意力应尽量在屏幕上，低头看Touchbar反而会降低使用效率。2、随焦点而变：Touch Bar上显示的功能会随着屏幕焦点的变化而变化，使得拓展性大大加强。因为与屏幕焦点直接关联，Touch Bar不光能随着应用的改变而变化功能，在同一个应用的不同页面，也可以有不同的功能，其状态、反馈均与屏幕保持一致。 设计原则 苹果对Touch Bar的设计给出了完整的设计规范，这里不再赘述。（ISUX已有翻译，点击查看）在初步体验过后，我们发现Touch Bar使一些使用场景变得更有效率也更有趣，但是功能项随着应用和页面频繁变动，也导致学习成本非常高，不熟练的时候经常需要低头看。因此我们认为想要提 ...继续阅读 (18)

下划线一般在文档中常被用作增强注意，在过去打字机时代，下划线成为了唯一的一种文字强调方式，具体的操作方法是在已经打出来的文字上面退格，再在同样的地方打出下划线。而在网页中，可以链接的文字（超链接）下面一般都有下划线。在制作页面的时候，当链接需要下划线的时候，UI开发很自然的会想到使用text-decoration属性来显示，例如这样：以上显示的是设计稿和浏览器渲染的实际效果，我们会发现浏览器渲染的效果和设计稿有出入，主要表现在下划线的位置，这时候细心的设计师会要求你想办法实现他们本来想要实现的效果。可惜的是，在这几年的网页排版技术发展中，并没有更好的css属性出现来支持下划线的个性化设置，所以这个问题常常会被忽略。这个一般在UI开发看来，可能觉得并没有什么问题，难道说不应该使用text-decoration这个属性吗？首先我们还是从实际想要表现的效果来说：能够支持换行能够改变颜色、线条样式和粗细能够被其它元素正常的包裹在所有浏览器都能正常显示以上特性其实text-decoration都只是部分实现，尤其是在表现的细节上让人觉得有些瑕疵，如果我们非要吹毛求疵，应该怎么办呢？那么，我们还有什么其它方法可以去尝试吗？以下是我列举的一些方案，我们一个个的来看：text-decorationborder-bottomtext-shadowbox-shadowlinear-gradientte ...继续阅读 (19)

项目背景 About Project自2005年腾讯第一代文化衫诞生，到今天腾讯文化衫已经拥有11年的历史。每年司庆，腾讯人身着文化衫济济一堂，切实感受腾讯文化。今年司庆暨文化日以“冲 · 动 - 燃梦想 闯未来”为主题举办系列活动。由企业文化与员工关系部携手ISUX共同完成文化衫设计及线下展示和义卖活动。 设计征集 Design Collection8月，文化衫项目组以设计大赛的形式，采用“冲动”主题面向ISUX全体设计师征集文化衫设计。经过评委重重筛选，最终从91份作品中诞生了4名优胜奖，制作成为今年深受大家喜爱的鹅厂文化衫。-获奖作品 Winners -优秀作品 Excellent Works  -内部反馈 Internal Feedback据统计，今年有超过22000名同事通过今年搭建的文化衫官网，对比去年参与人数上涨了25%，具有设计感的款式也吸引越来越多的员工积极地参与到文化衫的选择。其中灰色合作款（犀牛和犀牛鸟）成为本次大热款。线下活动 Offline Activities-展厅设计 Exhibition Design文化衫展厅位于腾大一楼大厅，根据展位的区域特征，整个展示区域采取开放形式布局，既保证多角度的展示效果，同时维持一楼正常访客接待的秩序。在活动中，设计师通过腾讯人穿着文化衫真实的生活状态打造文化衫橱窗设计，希望引起共 ...继续阅读 (16)

Pat LeePat Lee在北美漫画界打拼20载，是一位顶尖动漫艺术家，他曾效力美国著名漫画公司DC及漫威，推出蝙蝠侠，超人等畅销作。挤身美国漫画杂志《Wizard》十大热门艺术家第1位。9月5日，Pat Lee应邀参加腾讯设计周，并在活动现场为观众献上了中国内地第一次现场画作表演。在4平米见方的画板上，仅用40分钟，就完成了创作。独特的创意，流畅的笔触，惊艳了全场。遗憾错过现场的小伙伴们快来通过视频一睹风采吧！ ...继续阅读 (14)

Pat Lee曾效力美国著名漫画公司DC及漫威，成功推出蝙蝠侠、超人等畅销作。并挤身美国漫画杂志《Wizard》十大热门艺术家第1位。近日，他于香港的工作室中接受了我们的独家专访。谈及他的创作历程，以及对于中国漫画市场的看法。 ...继续阅读 (7)

不知道大家有没有这样的经历：当自己负责的产品需求上线一段日子后，发现活跃用户逐渐减少，这时我们不禁疑惑，究竟怎样才能激发用户的持续关注？项目优化不失为好的方法之一。要做项目优化，这不单是运营同学的事情，在设计以及技术实现层面上，我们也应该思考如何给项目带来一个好的方案。每一次的优化探索，都是一段结果未知的旅程。这里举例QQ会员公众号过期提醒项目，和大家聊聊我们的小尝试。起承转合这四个字并不陌生，在设计、音乐、文学等领域上经常会出现。在这里，我也用了“起承转合”来总结整个项目优化过程。一、起“起”，就是事情的起因。一开始，针对QQ会员/超级会员即将到期或者已经到期的用户，我们会通过公众号信息的形式提醒用户：你的QQ会员已到期。然而，为了提供干净的界面给用户，不带给用户过多的骚扰，今年5月份开始“QQ会员”手Q公众号被收进“服务号”。随之带来的是手Q公众号催费渠道付费数开始下降。起初公众号推送模版为纯文字的固定模版，界面如下：人都是没有耐心的，这种密密麻麻文字堆积的说明书形式的表现方式，加上本来的一级入口变成了二级入口，用户自然没有欲望点击。交代了背景后，可以看出QQ会员公众号催费项目面临着几个问题：1. “QQ会员”手Q公众号被收进服务号。2. 目前的模板形式过于单调。二、承针对这些痛点，我们开始构思公众号过期提醒的改版。“承”这一块，主要是描述改版的探索过程。在改版公众号展示方式的 ...继续阅读 (17)

遥想新版本表情上线，已经过去了许久。随着开发哥们不辞辛苦的版本优化，我们终于如约迎来了QQ新表情的加入（撒花）。寻找中国茶茶表情的加入源于我们对于表情中华元素缺失的反思。不同于emoji表情，作为中国人独有的表情包，QQ表情有义务更主动地去传播中国自己的文化。茶表情，将是我们的开端。茶文化博大精深，世界各地已经形成了许多独特的饮茶文化和风格，但我们需要做的是中国人的茶。那么，如何让我们的茶表情能够一眼分辨出是“中国茶”，是设计上遇到的最大难题。本着考据党死磕到底的精神（微笑），我们地毯式地搜集了各种画风的茶文化。柔和的英国茶，冰凉的泰国茶，蒙古的奶茶，北非的薄荷茶，埃及的甜茶，日本抹茶……世界上茶的种类繁多，但其实他们都有着共同的根源——中国茶。为了尽可能地与其他茶文化在视觉上做出明显的区分，需要选择一些中国独有的元素进行设计。我们最初尝试了传统的中国茶碗和功夫茶常用的紫砂小杯，试图从茶具的特色上去体现中国茶。茶碗的花色，我们衡量各种瓷器，选择了更为大众的青花瓷纹样，复古而有韵味。在紫砂杯的方案中，我们则尝试了茶汤升起的水雾和茶叶漂浮这两种细节表达。但第一批方案提出后，大家首先对紫砂杯的代表性提出了一些质疑。紫砂茶具虽然颇受饮茶爱好者的欢迎，但由于冲泡方式更为细致繁琐，对于大多数人而言，反而稍显陌生。茶碗的形式则过于隆重和复古，不太符合当代人饮茶的行为特征。收集了一些意见和建议后， ...继续阅读 (18)