| 导语这里谈到的svg回退，不针对于动画的回退，针对于面对高清屏的日益普及项目中所利用svg矢量图形，所做的图片和图标的回退。目前类似的高清处理方案还有icon fonts，也有多倍图，经过项目中不断尝试和总结，svg目前可能是最符合我们预期的方案，无论是浏览器渲染后的效果，还是出于对设计师的工作成本的考虑，以及后期各个环节人员配合的效率来看，svg都有过人之处。（具体推演过程参看ISUX博文）1. 为什么使用SVG体积小，可压缩与同类图片相比，在体积上有优势，同时作为一种XML文件，对gzip的压缩支持度好。矢量，清晰可以任意改变大小，不会影响图片质量。可交互可对图形元素进行操作。2. 支持高清屏2.1常见的svg使用方法2.2 background-image从最基本的背景图说起。使用方法如下图：因为各种方法的浏览器支持度会有些许差别，所以单独罗列(点击图片可查看)：回退：常用的有两种方法，1.使用类名来区分，对不支持的浏览器，单独加载png; 2. 使用-webkit-image-set 写法对支持svg的高清屏，使用svg图片，对于普通屏使用1倍png。2.2img标签用法与图片无异，非常简单。浏览器支持(点击图片可查看)：回退：主要有两种方法，一种通过脚本方式，对不支持的浏览器加载普通图片。（线上有很多成熟的库可以用，比如Modernizr, 是一个开源的功能检测类JS ...继续阅读 (19)

概述B2B网站和B2C的电商网站有很多共同点：他们都需要建立一个清晰的信息架构、包含引人注目的内容、提供他们关心的产品或服务的细节、并拥有简单易懂的交互。本质上，几乎所有在B2C网站上适用的用户体验准则在B2B网站上也同样适用。当我们在做B2B网站的测试时，我们经常听到商业客户吐槽B2B网站与那些设计的较好的2C网站之间的可用性差距。我们关于B2B网站的研究涵盖了非常多的垂直领域，并认为在B2B和B2C网站的用户体验需求上，他们之间存在着5点主要的差异。不同点1：网站内容必须为长期购买决策服务，而不是冲动消费。B2B的购买行为很少冲动。更多情况下，它是经过长期复杂决策过程的结果，因为他们需要为产品付出相当高的价格，并期望使用较长的时间。ToB的购买行为经常会涉及到公司各个层级、各个职能的的角色。每个购买决策的最终确定，经常需要调研数周、数月甚至好多年，然后，他们会将这些不同的方案分享给团队里的更多人以便研究、论证、决策。这种购买行为的产生，基本上是因为他们遇到了问题需要解决。最初，他们或许很少意识到有这样的细分市场、行业或产品，只是简单的寻找特定问题的解决方案。一旦用户有了简单的理解，他们就会开始仔细研究竞争对手并寻找最好的解决方案。为了服务B2B客户在所有购买决策阶段，你需要：提供诸如文章、博客、在线研讨、技术白皮书、购买指引、案例研究等内容，来帮助用户在早期研究阶段明白你能解决 ...继续阅读 (18)

相信很多设计师都见过这张图，它说明设计已经成为一门综合性学科。不仅仅需要熟练主技能，设计师还需要在其他技能上有所领悟，才能更好的辅助自己的设计。《设计师辅助技能手册》系列目的就是探讨设计师的一些有趣&有用的辅助技能。前言：性格研究&设计完善产品的用户体验是设计师的本职，但是殊不知，客户的体验往往也很重要。只有当合作融洽时，团队才能更加稳定，设计才能更好的落地。对于合作体验设计而言，核心是看人，也就是“快速了解用户”。了解之后，才能去寻找合适的方式去沟通和推动。那么如何看人？一般而言看人被分为以下三个维度：性格，情绪和人性。本篇将从性格说起。先说结论：在实际的设计工作中，针对不同的性格，使用不一样的合作策略，可以避免冲突，增进融洽并提高合作效率。例如和“高开放性”性格的人合作，设计师可以不断的主动头脑风暴，出idea；和“高外向性”的人合作时，信任感比较容易搭建，可以随时进行质疑和讨论。但是如何去评判人的性格？这些性格的长短处是什么？下文将具体分析性格，并提出性格评判的方法。同时给出实际工作案例。Part 1.什么是性格性格是只是指人的一贯，稳定的心理特征、思维和行为方式。学术界主要有以下三个研究方向：欧洲研究者认为，性格（Character），原意为“被刻上的印记”，先天意向比较强烈。然而美国学术界认为，人格（Personality），原意为Persona（面具）， ...继续阅读 (25)

很多有资历的设计师会厌烦那些具体且琐碎的需求。因为设计已被当作一种明确的任务去执行。现实就是这样，当你把自己局限并等待别人过来派发“任务”时，其实已被降格成乙方。怎样才能摆脱这样的窘境？除了让自己努力当上乔纳森·埃维外，唯一的办法就是系统地洞察产品的真正问题，将自己的想法勇敢讲出来。企鹅FM 3.0设计中，设计团队也在努力实现自我价值，洞察产品的核心体验并针对问题思考策略。探索设计洞察要思考影响产品存活的核心体验，而不是把自己当成乙方去执行想法。这要求团队对产品和用户有足够的理解。坦白说，了解用户如何使用产品是长线工作，不是一蹴而就的用户访谈或头脑风暴。设计师要把玩产品，关注反馈，甚至契而不舍地研究竞品。设计师应收集用户可能关注的一切问题归纳“体验地图”及时共享。时间越久，我们对用户和产品的理解越深刻。“体验地图”将问题可视化，能帮助团队统一共识减少分歧。正如下图所展示，企鹅FM核心使用流程有两条，在线听和离线听。将流程简化并将用户问题归类。可以看出用户所遇到的核心问题主要有四类：“找不到喜欢的节目”；“期待与好友互动”；“申请当主播特麻烦”；“流量不够用，户外不敢听”。针对用户问题整理产品描述，思考产品价值。产品描述的好处是在你创新之前，让团队搞清楚所解决的问题是否足够正确。解决错误的问题就意味着产品不受欢迎，甚至快速地死掉。所以，通过整理产品描述来降低创新产品的死亡风险也是设计 ...继续阅读 (17)

  项目背景 About Project腾讯优图实验室(Tencent YouTu Lab) —— 腾讯旗下顶级机器学习研发团队，在人脸检测、五官定位、人脸识别、图像理解等领域都积累了完整的解决方案和领先的技术水平。作为腾讯顶尖科技的品牌，其品牌应当结合优图实验室的“科技”“人工智能”等特性，让用户感受到品牌的魅力和实力，提升整体品牌体验。同时品牌视觉识别应当保持统一风格，构建一个完善的视觉识别系统。 品牌概述 Brand Overview腾讯优图实验室隶属于腾讯社交网络事业群(SNG)，团队整体立足于腾讯社交网络大平台，遵循公司“一切以用户价值为依归”的理念和“研究成果落地才能产生价值”的原则，专注于机器学习、模式识别、认知技术的研究和突破，在人工智能产业兴起的大背景下,迅速发展成为人工智能行业领军团队。目前优图在人脸识别、图像识别、声音识别三大领域拥有数十项业界领先的技术，均在国际比赛中创造了世界纪录。优图实验室通过智能云服务、智能硬件、行业解决方案等多元化的产品策略，大力推动人工智能技术的广泛应用，通过人工智能提升互联网使用体验。 品牌标志关键词 Brand Logo Idea  图形标志 Symbol 文字标志 Logotype 品牌标志 Logo 品牌色 Brand Color&nb ...继续阅读 (15)

曾看到网上一些帖子讨论UI设计师和平面设计师的差异，总结为思维方式的不同: UI设计师考虑用户习惯和易用体验，平面设计师专注于更具吸引力的信息传达。两者侧重不同但专业上有非常大的交集，信息传达的核心基础技能其实都是相通的。平面设计是如何表达一个事物，而UI设计是如何让用户更好使用一个事物，表达层面令人费解则卡在了使用的第一步。UI论坛有人吐槽:“不要用平面设计思维做UI”，然而许多UI设计师往往缺少平面设计最基本的意识。常见的平面设计基础问题平面设计的基础设计理论包括: 色彩构成、平面构成、字体设计、图案设计、版式设计等。平面设计基础能力可以概括为视觉化处理与传达信息的能力。UI设计在视觉化界面操作的阶段，与平面设计的交集是如何组织和处理每个界面的信息。平面设计中俗称的排版，把文字、表格、图形、图片等进行合理的排列调整，有效传达信息，并达到美观的视觉效果。1. 如何组织信息组织页面信息的首要任务是判断信息优先级，分清重要信息与次要信息，删除无用信息。化繁为简，降低视觉干扰。举个小例子，从一份简历，就可对一名应聘UI设计师的平面设计基础能力略知一二。首先对无用信息的判断（讲真，曾看到简历中还有体重信息）。其次是关键信息的组织排列、清晰表达。个人信息：姓名、年龄、照片、联系方式；基本信息：工作经历、教育背景、职业技能；其他信息:兴趣爱好等。数份简历扎堆时，信息有效快速传达是第一步，再者 ...继续阅读 (21)

iOS从07年第一代iPhone发布时的iPhone OS，已发展到今天的iOS10，这些年来，iOS从最初的一个简单、粗糙的ROM，发展成现在手机ROM中体验标杆的操作系统。设计风格走过了拟物化，扁平化，今年已发布的iOS10，设计风格也开始偏向卡片式风格，随着新的交互方式3D Touch的加入，开始脱离单调的扁平化设计，卡片式风格让设计语言更加符合用户的操作认知（卡片式的内容，对人有更强的按压操作暗示）。iOS10锁屏Widget界面手机友商的跟进苹果的设计，给大家的印象，总能精准的发现用户的痛点，在合适的场景下，创造眼前一亮的设计。如手机屏幕下滑出现快速搜索（Spotlight Search），屏幕下边缘上滑出现控制中心，这些设计创新，都能引起行业内的友商迅速跟进。Vivo的控制中心的设计思路与iOS几乎一致，操作方式都是从屏幕下边缘上滑出现控制中心。上图从左至右，依次为iOS10、MIUI、华为EMUI系统设置界面。很多手机ROM的系统设置，都沿用了苹果的一套设计模式，将系统设置项，用列表分组展示，同时将不常用设置项，收纳在二级界面中，如左图，iOS将更多设置收纳在【通用】中，小米则为【其他高级设置】，EMUI则为【高级设置】。 交互细节亮点苹果在交互细节上，也能深刻洞察用户使用场景中的操作习惯，抓住用户的需求和痛点，针对用户该使用场景下，可能的行为，去做针对性的 ...继续阅读 (16)

一个优秀的产品被大家知道才能更全面的体现出它的价值，优秀的产品推广和产品设计同样的重要。然而在这个信息爆炸的互联网时代，用户如何过滤掉其他品牌的噪音来记住你的品牌呢。“走心”的推广就显得格外重要了。 放低姿态，更亲民的品牌输出企业和用户的交流在根本上来说是处于一个不平等的关系，许多品牌站在高处向用户传递着空洞无物、毫无价值的信息，这些对用户不痛不痒的信息会马上被用户当做噪音过滤掉。在品牌运营同类化竞争越来越激烈的今天，越来越多的品牌选择创造一个人格化的形象来帮助他们的品牌和产品进行推广。 创造人格化的形象 ——line&kakao talk在品牌的人格化形象输出中，韩国的一些互联网品牌走在了第一梯队。像line，kakao这样冷冰冰的聊天软件形象，在被赋予了人格化品牌形象后产生了新的生命力。line对这种卡通人格化形象早早已经提升到战略层面的高度，他们把line的形象带到世界各地，先用他们吸引用户的眼球，再让用户去体验line。Line Café & Store开遍世界各地，每次开业总是能引起无数少女的疯狂追捧，这些衍生的产品也为line带来了巨大的传播力。2015年7月31日，中国第一家Line Café & Store开业第一天，许多顶着37度高温排队的line的粉丝（配图来自探店中国首家 Line 主题咖啡馆）当line frien ...继续阅读 (14)

这段时间有幸加入了一个关于微信小程序的项目开发组，从无到有的根据文档自行学习了小程序的开发过程，前面已经有几位前辈的文章珠玉在前，我这里就先从前端界面的开发方面谈一谈小程序以及我所遇到的问题吧。在结构和样式方面，小程序提供了一些常用的标签与控件，比如：view，小程序主要的布局元素，类似于html标签的div，你也完全可以像控制div那样去控制view。scroll-view，你要滚动内容的话，没必要用view去做overflow，scroll-view提供了更为强大的功能，通过参数的调整，你可以控制滚动方向，触发的事件等等swiper，滑块视图容器，对于新手来说，再也不用为选用哪个滚动插件伤脑筋了icon，小程序提供了多种图标供你直接使用text，文本，唯一可以通过长按被选中内容的一个组件。progress，进度条button 按钮，尽量使用小程序提供给你的几种样式参数表单以及常用表单组件 ：form，input，checkbox，label，picker，radio，slider，switch各种操作反馈，消息提示框：action-sheet，modal，toast，loading以及一些媒体组件，video、audio，image，canvas等等这些东西在几位前辈的文章里，以及微信的开发文档里都有更详细的介绍，我这里就不再一一介绍。那么我们就快速的跑通一个小程序的demo先 ...继续阅读 (19)

导语：日前苹果发布会上，最大的亮点之一当属替代一栏功能键的Touch bar。本文包括有5个小节，详细介绍了Touch bar设计原则、新特性和基本元素 ，一起来学习。文章直达电梯：1.交互2.视觉3.图标4.控件Touch bar概述Touch Bar是位于新一代MacBook Pro键盘上方的一条 Retina 显示屏，同时也是与主屏幕内容交互提供动态操作界面的输入设备。基于当前语境，Touch Bar的这些控件能对系统或应用的功能进行快速访问。 例如，当用户在编辑文档时，Touch Bar可提供调整字体类型和大小的控件。 当用户查看地图时，Touch Bar可一键快速查找位置附近的加油站、住宿和餐馆。 Touch Bar右侧的Touch ID传感器支持指纹登录计算机及App Store和Apple Pay的购买支付功能。  默认情况下，位于Touch Bar右侧的可扩展控件条（Control Strip）中包含了系统级操作的控件，如唤起Siri、调整主屏幕的亮度及音量等。而在此之前，用户是通过物理按键进行大多数的此类操作。你可以在位于控件条左侧的应用程序区域中，写入特定的应用控件。Esc（退出键）或其他系统按键会根据当前情况出现在应用区域的左侧。Touch Bar是可配置的。用户可以从控件条中移除功能，甚至将其完全隐藏。在隐藏状态下，仅显示应用控件。用户也 ...继续阅读 (19)

上次和大家一起，用最简单直白，轻松粗暴的方式学习了一遍SVG动画，这次我们再一起来搞点不一样的东西，SVG滤镜的实现。SVG滤镜绝对称得上是他最强大的功能之一，在不影响任何文档结构的前提下，允许你给你的矢量图形添加各种专业视觉效果，我个人给他的定义就是，把PS装到了网页上。一、  SVG滤镜的原理基本原理描述太多明显有违我们 “轻松打开” 的目的，这里简单的描述一下，SVG在使用了滤镜的元素里，不会将原始图形直接渲染出来，而是会将原始图形的像素信息渲染到临时位图中，然后由 filter元素指定的操作会被应用到这个临时位图，最终把计算结果渲染为最终图形输出。举个例子，我们用腾讯云的CVM图标来做一个最简单，最常见的滤镜效果——投影。首先我把图标画出来，demo1然后放到一个defs里，没有被引用之前你肯定是什么都看不到的。接着写filter，尝试使用feGaussianBlur给logo生成阴影效果用stdDeviation 来指定模糊程度，值越大，模糊效果越强，并且可以接受两个数字，分别为X Y方向的模糊度。 然后指定SourceAlpha为他的输入源，如果不指定将在原色值上做模糊。现在我们看一下效果截图，好像有哪里不对劲？demo2这是什么黑乎乎的一坨？原因是滤镜返回的是一个模糊过的阿尔法通道，并不是原始图形。（另外当我们在浏览器里查看的时候，可以明显的看到滤镜对象的边界明显不同 ...继续阅读 (21)

SVG是什么？SVG是一种可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。简单的理解它是图形的另一种格式例如它和常见的图片格式.png、.jpg、.gif等是一类。SVG发展历程2001年9月4日，发布SVG 1.02003年1月4日，发布SVG 1.12003年1月14日，推出SVG移动子版本：SVG Tiny和SVG Basic2008年12月22日，發布SVG Tiny 1.22011年8月16日，發布SVG 1.1（第2版），成为W3C目前推荐的标准W3C目前仍正在研究制定SVG 2他在2001年就已经被加入到W3C的标准中去了，历时这么久终于到了该翻身的时候了。它和传统图片格式有什么不同？1.兼容现有图片能力前提还支持矢量SVG提供的功能集涵盖了嵌套转换、裁剪路径、Alpha通道、滤镜效果等能力，它还具备了传统图片没有的矢量功能，在任何高清设备都很高清。点击查看下面这张SVG图形：这样一张高质量的矢量图片它的质量仅仅只有：2.可读性好，有利于SEO与无障碍由于SVG采用的是XML语法，图形的里面的文本内容可以直接被浏览器，搜索引擎SEO和无障碍读屏软件读取，具体用法如下代码设置title与desc标签即可：与icon font对比1.渲染方式 ...继续阅读 (19)

轮播图（Carousels）这样的交互方式，在web时代似乎已经司空见惯。当一群人在会议室里争夺首屏焦点图的优先级时，使用轮播图，似乎能够不费吹灰之力地解决这场争端，没有人是输家。然而，轮播图这种方式真的有效吗？如何设计才能带给用户更好的体验呢？事实上，“万能和事佬”轮播图的点击率通常都很低，转化效果也并不好，却往往占用了页面最抢眼的大面积位置。想象这么一个场景：当你走进图书馆想找一本特定的书阅读时，一个销售员挡在你面前让你先看一个大广告图，然后等你还没读完具体讲了什么内容时，他又突然换了一张，是不是很惹人厌呢？大部分轮播图的设计也是如此。确保你真的需要使用轮播图首先，设计不当的轮播图容易被用户当成与他想浏览的内容不相关的广告图片而直接无视。在各种网页中早以身经百战的用户，会选择最快速的方式找到和浏览他们想要看的内容。把精力放在翻看没有预期的轮播图上显然是低效的，一上来就自动进入了用户的视觉盲区。下面的热力图展示了用户的浏览行为习惯：快速扫描找到想要阅读的区域，然后再进行有序的沉浸式阅读，毫无例外他们都忽略了看起来像广告的图片部分。（以上热力图源自James Royal-Lawson）（以上热力图源自Nielsen Norman Group）除此之外，在2013就有研究结果表明，轮播图的交互效果十分不理想： 只有 1% 的用户点击了轮播图上切换按钮，其中 84% 的用户只在首屏点了 ...继续阅读 (15)

 腾讯设计周(TDW)是由设计通道与腾讯学院联合发起的年度设计盛会，来自各大业务群的专业团队汇聚一堂，围绕设计课题进行丰富的展示与交流，期望通过一周的时间，让参与者深度体验设计的价值与魅力。作为腾讯的首届设计周，其品牌设计突出腾讯品牌的延伸，视觉上体现全民设计的多元化和内容的丰富精彩。 ...继续阅读 (19)

注：D族通道是指“Tencent Design腾讯设计通道”，设计通道成立于2006年，隶属于腾讯职业发展通道设计族（简称TDCP or D族），致力于腾讯设计专业培养及公司设计氛围提升。日常主要工作包括助力员工通道晋级（制定晋级标准、组织晋级培训、认证培训课程）、促进设计骨干交流（组织外部考察、课题沙龙、设计峰会）、组织专业深度专业培训（专家课程、大师课程、腾讯学院课程）、传播设计文化（设计展、设计公益日、设计论坛）等，并积累建立起通道数据中心，服务于公司各项设计相关工作。腾讯设计通道是助力设计师成长的重要平台，在2016年9月举办了第一届TDW(腾讯设计周)，为设计师提供一个分享行业趋势，相互交流和提升的平台。本人有幸能有机会作为通道助理观摩了2016年上半年D族交互通道晋升的过程，受益匪浅。台上一分钟，台下十年功，通过这次经历让我觉得平常的积累和思考才是最重要的，“高级”是对设计师能力的一种认可和肯定，但是更重要的是能够真正将高级设计师的水准和能力在平常的工作中体现出来，为团队带来价值。古人说，有三种境界：看山是山，看山不是山，看山还是山。经过这次评审，收获最大的莫过于对于这句话的理解。抬起头，从画稿的过程中释放出来，换个角度看待自己的工作，喃喃地问自己一句：设计的本质是什么？每个人心里的答案都可能不一样，包括我自己。但经过了亲眼观察设计大神们的评审，不禁反思了自己平常的设计 ...继续阅读 (18)

9月7日，Apple将会召开本年度的秋季发布会，发布的新产品包括新款的MacBook Pro、iPhone 7以及Apple Watch 2。但是我更加关注的是随着iPhone 7一起发布的iOS 10正式版，因为在之前6月份的WWDC 2016大会上，Apple就宣称iOS 10是「The biggest iOS release ever」，这次正式版的发布，Apple应该会对iOS 10给予重大的期望。在iOS 10正式发布前夕，本文主要针对已经发布的iOS 10的人机界面设计指南（Human Interface Guidelines，简称HIG）来对比分析新老版本的iOS系统在设计上究竟有哪些改变，有哪些设计趋势值得我们注意。 改变：越来越像给设计师用的「设计指南」首先，我们先来看一下iOS 10之前的HIG历史版本记录，了解一下在以前的版本中Apple都做了些什么：图1 iOS HIG Revision History自从iOS 7开始，每个版本的HIG都是在同一个框架中进行维护的，而且维护频率之低改动幅度之小令人发指（当然跟Apple一贯的严谨风格有关）而针对设计部分的内容一共也只有两次改动，这种情况一直持续到iOS 9，如果你愿意把iOS 7、8、9三个版本的HIG拿出来一起看，简直就是在玩找茬游戏。然后，我们再拿iOS 9 和 iOS 10 的HIG结构框架 ...继续阅读 (17)

9月7日，Apple将会召开本年度的秋季发布会，发布的新产品包括新款的MacBook Pro、iPhone 7以及Apple Watch 2。但是我更加关注的是随着iPhone 7一起发布的iOS 10正式版，因为在之前6月份的WWDC 2016大会上，Apple就宣称iOS 10是「The biggest iOS release ever」，这次正式版的发布，Apple应该会对iOS 10给予重大的期望。在iOS 10正式发布前夕，本文主要针对已经发布的iOS 10的人机界面设计指南（Human Interface Guidelines，简称HIG）来对比分析新老版本的iOS系统在设计上究竟有哪些改变，有哪些设计趋势值得我们注意。 改变：越来越像给设计师用的「设计指南」首先，我们先来看一下iOS 10之前的HIG历史版本记录，了解一下在以前的版本中Apple都做了些什么：图1 iOS HIG Revision History自从iOS 7开始，每个版本的HIG都是在同一个框架中进行维护的，而且维护频率之低改动幅度之小令人发指（当然跟Apple一贯的严谨风格有关）而针对设计部分的内容一共也只有两次改动，这种情况一直持续到iOS 9，如果你愿意把iOS 7、8、9三个版本的HIG拿出来一起看，简直就是在玩找茬游戏。然后，我们再拿iOS 9 和 iOS 10 的HIG结构框架 ...继续阅读 (18)

自QQfamily在2014年推出以来，一直没有正式的介绍他们的角色和故事背景。借着QQfamily成立两周年之际，希望大家对他们能有更多的认识！在2014年初，公司业务和架构调整的原因，SNG接收了QQ产品和企鹅品牌形象的重任。面对这互联网史上最悠久的产品和品牌，ISUX开始构思如何能让QQ再次蜕变，让用户感受不一样的新感觉。最初我们想到企鹅那么多年过去了，为什么还是孤身一鹅呢？然而SNG负责社交网络产品，QQ则作为史上最长久和成功的聊天工具，我们应该让聊天的感觉变得更热闹和更社交化，所以萌生了创作QQfamily的念头。第一时间想到的是一个“人类”当QQ的好朋友。因为QQ无缝连接我们，考虑到企鹅居住在南极，离它们最远的就是地球的另一端北极！爱斯基摩人是唯一居住在北极地带的人类群族，所以首选角色就是他们了。爱斯基摩人原属于东亚蒙古人种北极类型，由于当时介乎於美洲和亚洲之间的白令海床甚浅，使他们可以从海堤上横渡发现北美洲，成为美洲原住民。这不是很有感觉吗？有着东亚血统然后移居美洲，很适合QQ多元化、连接人类的属性！再加上小时候看纪录片便开始很欣赏爱斯基摩人的顽强民族斗志，在长期严寒的北极，以猎物为主要生活来源，已经足够让我们敬重他们的民族精神了！基于上述我们成就了Qana(卡纳)的诞生！最后顺带一提Qana(卡纳)的名字由来，是我们在寻找爱斯基摩文化时，偶然发现带着Q字母开头的爱斯 ...继续阅读 (25)

在APP中我们经常会在页面下拉时看到一些动效，例如下拉图片跟随放大、下拉刷新出现loading动画等，这个交互细节在各个主流APP以及手机原生系统中随处可见，能为APP增添个性亮点。一、背景在我们的日常项目中，也会遇到这样的需求，在当前环境下，此类效果大多是靠原生来实现的，但是用原生实现有不少缺陷，原因如下：原生实现周期长;跨平台实现成本高;解决方案通用性差;运用到现有项目改造成本高;那么我们的H5页面能否实现呢？下面和大家一起来探索。首先，我们先来实现下拉banner图放大的动效。效果类似于：动效要求：当处于顶部页面下拉时，banner图跟随放大，下拉结束时，banner图还原回弹。下拉动效可以分解为两部分：页面主体内容整体下滑滚动;顶部元素进行放大动效。在以往，在H5实现页面滚动效果是一般采用JS插件模拟滚动，例如：iScroll。但在这里存在几个问题：对现有页面的改造非常大，不适宜大范围运用;模拟滚动取代原生滚动会引发未知的bug;在低端手机性能差，体验不佳;要解决这些问题，可以采用如下方案：1，保持页面的原生滚动，只有在顶部下拉事件中，才触发动效执行;2，用JS拷贝DOM结构，使动效结构与页面结构解耦，互不影响;这样下拉动效会相对更流畅并基本不影响页面正常滚动。二、技术实现按照上面的技术方案实施，具体过程为：禁用页面顶部下拉事件  ------>  将页面的主体内容用 ...继续阅读 (25)

QQ全新社交体系品牌发布伴随腾讯社交网络体系的年轻化, QQ全新社交网络体系品牌视频发布，在此社交新城，你将体验全方位无限乐趣社交网络生活！QQ(Logo)的造型基于企鹅形象，所以QQ其实也是一个角色 但是作为一个互联网平台的logo，我们必须让它呈现中性的特质 我们在故事版阶段反复的修改直至完成。 在实际的制作过程中，QQ的变化比较轻量，这使得整条视频变得更加流畅渲染花费了非常多的时间，为此进行了前期的动画渲染测试，使得正式工程的时候得以顺利进行。我们想让QQ呈现一种未来的科技感，所以使用了边线渲染以突出QQ造型结构上的改变为了让QQ能够动起来，经历了非常多复杂的测试，尤其它的肩膀覆盖在围巾下面。因此在视频中，用了有限制动作去呈现一个中性的QQ（logo）印象我们想要传达为什么我们改变了QQLogo的造型，改变的目的又是什么。我们需要表达，新QQ作为一个更有效也更让人兴奋平台，如何把更多的乐趣带给你更智能的生活. 3D动画让我们可以更好的表现新QQ的动态，让它更生动活泼。 ...继续阅读 (21)

在SNG（腾讯社交网络事业群）品牌系统语言体系里，品牌影像承担了重要的一部分——直观传达受众，统一影像风格语言显得尤为重要。以往的设计师通过各式各样的方式找来图片，而在整个项目里，我们尝试塑造整体影像的风格，并且在大统一的前提下，保留属于单个品牌的特性，不断探索提升品牌质感从而打动受众的方式。对品牌来说，影像风格意味着什么以往在传统行业中，品牌作为产品的精神象征，创造了同类产品之间的差异特征。在互联网行业这一原则同样适用。品牌往往能产生一种超越其功能文化附加值，其中包含交流方式、生活态度和消费理念。当这些文化价值被我们认同的时候，共鸣由此产生。在SNG（腾讯社交网络事业群）品牌系统语言体系中。品牌视觉具体表现集中在以下几种形式内： LOGO／ 品牌色 ／字体 ／影像／ 图形（ICON｜插画）／ 物料如今，碎片化的信息融入我们生活各处。截至2015年12月，中国手机网民规模已达到6.20亿，较2014年底增加6303万人。网民中使用手机上网人群占比由2014年的85.8%提升至90.1% 。较2014年底提高4.3个百分点；平板电脑上网使用率为31.5% 。在移动互联网大背景下，用户浏览阅读习惯已经被改变，使得影像传播有了便捷的路径。影像对比他信息载体简单、明确、直观，这些特性容易让使用者快速产生代入感，传播优势得天独厚。在这样琐碎而密集的信息背景下，建立统一的品牌影像的风格，提升影 ...继续阅读 (15)

引言两年前，因QQ空间一个带宽优化项目的契机，我们团队制作了一个在线图片优化的系统—智图（http://zhitu.isux.us/），提供用户在线压缩图片，智能转换图片格式，在线生成webP格式图片等功能。在这两年的期间，我们根据用户的需求不断优化这个系统，也开放过api接口，同时我们也在考虑一种更快捷，更方便的图片压缩方式，nodejs时代的到来给我们提供了很大的便利，基于nodejs的跨平台客户端也在这两年如春笋般崛起。于是我们开始着手开发基于用户客户端的图片压缩工具（脱网模式），结合nodejs + electron 客户端技术，初步敲定开发智图系统的线下伙伴——智图客户端的计划。经过近4个月的钻研开发，智图客户端Windows，Mac版本于2016年8月横空出世！关于智图这里还是要再安利下智图在线图片压缩系统，该系统上线以来统计已帮用户压缩处理了超过150万张图片（实际数据超过250万），压缩率稳定在30%左右（处理带半透明的png图片效果更佳哦）。很适合H5页面上线前做图片压缩这一块，同等质量情况下相比于国外的tinypng或者kraken压缩更快，还是免费的有木有。最重要的是，我们智图可以帮你选择最优的图片格式，避免由于格式问题导致的流量浪费。之前也有相关的文章介绍：https://isux.tencent.com/zhitu.html智图客户端啥都不用说了，直接先上 ...继续阅读 (22)

首先来看下我们准备要做的粒子动画效果是怎么样的~是这样：或者是这样：甚至是这样：很酷炫！那如何去实现类似上面的粒子动画甚至根据自己的喜好去做更多其他轨迹的动画呢~请看下面详细的讲解。技术选择因为粒子数量很多，而且涉及到图像像素处理，所以这里使用Canvas是不二选择。 注意，以下演示的代码只是关键代码，重点在于解决思路。一、绘制粒子轮廓图首先要在canvas画布上绘制一个由粒子组成的轮廓图，记录下每一个粒子的坐标，这样才能有后续的动画。1. 创建一个<canvas>元素，并获取Canvas画布渲染上下文< canvas>是一个双标签元素，通过width和height的值来设置画布的大小。至于ctx（画布渲染上下文），可以理解为画布上的画笔，我们可以通过画笔在画布上随心所欲的绘制图案。如果浏览器不支持canvas会直接显示<canvas>标签中间自己设定的文字。当然<canvas>标签中间也可以是一张当不支持canvas时需要替换显示的图片。 2. 使用canvas的图像操作API绘制图像绘制图像的关键API及参数说明：引用MDN上的一张图会比较清晰的看出每个参数的作用：drawImage就是把一个image对象或者canvas上（甚至是video对象上的的每一帧）指定位置和尺寸的图像绘制到当前的画布上。而在我们的需 ...继续阅读 (19)

“理论不懂就实践，实践不会就学理论”，非常赞同bluedavy的这句话。实践过程中经常会遇到某个属性的使用，浏览器渲染效果与预期效果不符，虽然通过死记硬背能避免或巧妙应用这种效果，但总感心虚发慌、毫无自信，因为不知晓背后的原理。这时就不要再用“就是这样的”的借口来搪塞自己，我们需要重新认识它。实践与现象绝对定位是一种常用的定位方式，也经常会看到一些使用技巧，轻松搞定一些不太容易实现的效果。现介绍两个绝对定位的使用技巧：1. 绝对定位元素，水平方向（top和bottom）或和垂直方向（left和right）的定位值不设置时，其位置受其前面的兄弟元素影响，如同其在常规流中的位置。如下例所示：元素A，C绝对定位，不设置top，bottom值；元素B处于常规流中；结果是：元素C的位置受元素B的影响，跟随在元素B的下方。See the Penabsolute-positionby wenjul (@wenjul) onCodePen.这种看似毫无用处的技巧，却能帮助我们解决一些项目实际问题。我们总希望我们的布局是自适应的，即不依赖与所处环境，当环境改变时，仍能完美工作。下面这个实例要求蓝色购买按钮水平居中，其后跟随一个链接。为了达到自适应布局，我们不能假设父级容器宽度固定，也不能假设蓝色按钮的文案固定，所以链接元素的位置也是根据上下文环境改变的。这种情况下，我们就可以对链接设置绝对定位，并且 ...继续阅读 (39)

大家好，我是腾讯的一名女设计湿…万万没想到…我居然火了，而且火的很彻底！换一个平台是我…换一个平台还是我！我瞬间被各种朋友同事@了，连十几年没见过小学同学都冒出来…我的QQ，微信，微博的私信通通爆了！我瞬间觉得我的人气有了质的飙升！因为获取不到笑点，对于火我感到很疑惑…朋友让我去看网友评论…本宝宝很（西安）负（DE）责（丹）任（10克）的看完了几万条网友评论。简直激发大批段子手网友脑洞大开二次创作…还有网友写诗！还挺顺溜！给你101分，多一分不怕你骄傲！网友说：“现在做广告的套路越来越深。”今天我就来揭开做一个刷爆微博动图海报，顺便捧红一个网红的层层“套路”…故事应该从我接到一个社平需求说起〜作为一个鹅厂太老的新鹅，第一次和国际化大品牌合作…只能说我日出江花红胜火，感谢领导相信我接到需求后，第一时间找到QQ商业化团队产品了解项目背景、时间、预期效果和预算等…然后，老大和我们在草地上展开了第一次脑爆会…基于产品诉求和特性，我们围绕“亲情”、“友情”、“爱情”三个情感维度。写出自己对可口可乐&QQ空间印象关键词，并对大家所认同的关键字做了聚焦和延展。A.初期想法：我们认为QQ空间最大的价值就是用户的故事和情怀，贴近生活，真正洞察到“人性”，才能引起大家共鸣。对 ...继续阅读 (35)

动画最终所呈现的视觉效果是观众最终看到的结果；在结果之前是不容易被注意到的创作过程；而在过程之前是更不易被察觉却又极其重要的脚本设计。也就是整部动画的”原因“，是可以用来解释为什么这么做而不那么做的答案。因此我在脚本设计的时候就先给自己提了几个问题，然后顺着问题去寻找答案：· 如何用动画体现QQ音乐的品牌属性?QQ音乐的品牌性格是个性张扬，有着年轻人独有的无畏和潇洒。因此我在动画表现上也设定了几个关键词作为标准：纯粹、大方、鲜明、节奏。希望如品牌色一样，在动效设计上也能建立一套具有QQ音乐品牌感的解决方案。· 如何在40秒内打动观众?现在的观众越来越挑剔，特别是在拥有主动选择权的互联网环境。因此易于表现明快节奏，具有视觉冲击力的Motion Graphic成为了首选。而与音乐的配合也十分重要，动画的节奏感和视觉表现力都有赖于音乐情绪的表达。因此在动画制作的时候心中就得有一个大致的旋律，而所有的动画节奏都按八拍一个单位去设计。· 当观众看完视频之后能记住什么?个性张扬、无畏潇洒的品牌形象是核心信息，然后就是”个性化皮肤“这个新版本功能。其实，就是用QQ音乐的方式，去讲”个性化皮肤“这个功能的故事。因此，我延续了品牌”纯色“、”扁平化“的设计语言，并挑选了其中四款最具代表性的播放器进行拆分和重构。 ...继续阅读 (26)

4月22日，世界地球日。ISUX的设计师们琢磨着，怎样可以对这颗危机四伏的蓝色星球好一点？环顾四周审视自己，觉得身为设计师最大的特点，就是各种玩意儿多啦！经过他们工位的人，总经不住打听，诶，你这东西哪买的？那不如……“以旧易蓝”咯！他们忍痛割爱，砸锅卖铁，摆出11个各具特色的小摊儿，期望能筹得一笔钱，用于支持中国的海洋保护项目。每个小摊简直包罗万象，啥都有。从单反相机到收音机，从画册到化妆品，从生活范到文艺范，一网打尽。各种设计师的手工作物更是吸引了不少眼球，也掏空了不少人的钱包啊。比如亲手做的皮具，做工堪称上乘。自己作画的环保袋，以及一些小陶艺。“公益约拍”的想法简直完全戳准大伙的痛点，私人给你定制卡通头像，全天跟拍P到你美绝人寰。苏师傅的祖传贴膜生意听说还排起了长队，像素眼贴的膜会不会格外服帖呢~花生的销量据说特别好，自制酸奶的味道也很不错，现场还有香辣鸡爪卖。还有从贵州黔东南远道而来的大米，来自大山民族的勤劳与汗水，期望能以一些销量帮助到当地的居民。当然我们各种萌化人心的公仔早就被一抢而光。最高潮的拍卖环节，各种重磅数码产品，围观群众嘴上说着不要不要，身体却很诚实的举手报价呢。当中最重磅的则属Jonathan的John lennon同款吉他啦，猜猜拍出多少价钱？值得一提的是，此次集市环保到底，全程无现金交易，全部采用QQ钱包支付，买完开心合影一个~抢起生意来也各种不含糊，看到 ...继续阅读 (36)

什么？空间也做直播了！没错，在当今直播的热潮下，国内外的直播产品大都是基于陌生人的关系链，且内容结构与视觉效果同质化严重。如何让用户更好的分享生活？如何为用户提供差异化的内容消费？如何给用户更多新鲜趣味的互动玩法？这是我们做直播希望解决的问题。Qzone依托自身优势，另辟蹊径地发掘基于好友关系链的直播场景。与此同时，我们不断探索更符合空间用户直播的设计形态，发掘与竞品的差异点，寻找直播的下一个突破口，通过系统化的设计，为用户提供非一般的直播体验。系统化的互动体验1、互动形式探索直播主要围绕“主播与观众”之间的互动，其二者之间属于强互动关系；同时“观众之间”也存在着弱互动关系（如：观众之间可以聊天），良好的互动环境、趣味的互动形式，对于提升提升直播氛围、提升互动体验起着举足轻重的作用。通过对竞品的分析,我们总结出目前直播产品常见的几种互动方式:通过对直播数据的分析，我们发现送礼的操作大都存在于PGC直播的场景，而在UGC的直播场景，好友间极少存在花钱送礼的需求。因此在UGC层面，我们也在探索除了满足基本功能之外，更加有趣、刺激活跃的互动形式，这里我们创新性的设计了两种互动玩法。2、按信息优先级，布局产品框架在项目前期，我们对交互框架在多个维度进行了分析与尝试。在功能模块的划分上，区分用户操作与信息的优先级：功能操作>轻量互动>主播信息>房间信息。操作区域根据用户的使 ...继续阅读 (22)

旅行不仅仅是发现最美的风景，更多的是发现心灵的自己，记录某个有意思的状态，赋予生活感慨，旅行是为了更好的工作！每次旅行都会纠结要不要带单反，作为女生，单反太沉重，不带又可惜。即使带着单反出去，旅行回来照片都没时间整理，甚至是懒得复制出来。最终还是选择了手机，下面的画册照片设备是iphone6 / iphone6s。先看一下旅行画册：根河湿地山头俯瞰一望无际的草原〜一朵乌云飘过来~牛羊在蓝天白云下悠然的啃着青草，有没有Windows桌面的感觉？驰骋在辽阔的草原上，策马奔腾，躺在绿油油的草地上望着蓝天白云，呼吸着夹杂着青草味的草原〜有种“蓝蓝的天上白云飘”的感觉〜夕阳下的女孩〜距离城市最近的沙漠〜高昌古城里悠扬的旋律和苍老的面容〜看了这么多照片~接下来介绍一下如何拍出来这样的照片作为一名视觉设计师，这个分享从：构图—用光—调色—情感四个维度出发的一：构图1：留白中国国画讲：疏能跑马密不透风也就是说：画面有“疏密，节奏，韵律，美感”2：构图：黄金分割法3：构图：三角形构图4：构图：•形构图4：构图：C形构图5：构图：抓拍动态的美6：透视：一点透视（平行透视）两点透视（成角透视）三点透视二：用光1：逆光2：晨光3：夕阳光三：调色：色彩三元素1：色相：色彩相貌2：饱和度：色彩的鲜艳程度3：明度：颜色的亮度四：情感没有单反的快门效果，没有特殊的技能，很多时候摄影拍的是一种“感觉”一种“情感”一 ...继续阅读 (41)

旅行不仅仅是发现最美的风景，更多的是发现心灵的自己，记录某个有意思的状态，赋予生活感慨，旅行是为了更好的工作！每次旅行都会纠结要不要带单反，作为女生，单反太沉重，不带又可惜。即使带着单反出去，旅行回来照片都没时间整理，甚至是懒得复制出来。最终还是选择了手机，下面的画册照片设备是iphone6 / iphone6s。先看一下旅行画册：根河湿地山头俯瞰一望无际的草原〜一朵乌云飘过来~牛羊在蓝天白云下悠然的啃着青草，有没有Windows桌面的感觉？驰骋在辽阔的草原上，策马奔腾，躺在绿油油的草地上望着蓝天白云，呼吸着夹杂着青草味的草原〜有种“蓝蓝的天上白云飘”的感觉〜夕阳下的女孩〜距离城市最近的沙漠〜高昌古城里悠扬的旋律和苍老的面容〜看了这么多照片~接下来介绍一下如何拍出来这样的照片作为一名视觉设计师，这个分享从：构图—用光—调色—情感四个维度出发的一：构图1：留白中国国画讲：疏能跑马密不透风也就是说：画面有“疏密，节奏，韵律，美感”2：构图：黄金分割法3：构图：三角形构图4：构图：•形构图4：构图：C形构图5：构图：抓拍动态的美6：透视：一点透视（平行透视）两点透视（成角透视）三点透视二：用光1：逆光2：晨光3：夕阳光三：调色：色彩三元素1：色相：色彩相貌2：饱和度：色彩的鲜艳程度3：明度：颜色的亮度四：情感没有单反的快门效果，没有特殊的技能，很多时候摄影拍的是一种“感觉”一种“情感”一 ...继续阅读 (35)