在互联网产品中，除了内容型外，一些功能型的产品信息内容也是相当巨大的，特别是管理控制系统，业务管理、功能操作、数据展示等。在信息量这么大的页面中除了重视内容质量外，形式功能的组织与呈现也是同等重要，对提高用户获取有效信息的效率有着非常大的帮助。上面所说的形式功能的组织与呈现其实讲的是设计排版上的问题，当然对设计师排版功力也有相当的要求。这种排版优化的方法有很多种，我这里主要围绕卡片式设计的理论进行深入探讨，相信大家对卡片式设计已非常熟悉，虽然已流行了好多年，但是设计形式并不是随着使用年龄的增长而消失，芝加哥学派路易斯.H.沙利文提出过：“形式追随功能”就能说明这一点。最近笔者在项目改版中也运用了相关卡片方法，发现效果不错，所以希望借在项目里的思考与尝试，抛出引子，供大家参考。卡片式设计的定义在生活中，我们经常接触到各式各样的类似右图中的卡片，比如扑克牌、名片、机场和地铁的指示牌等等。如上图，大家可以看出，他们普遍具有以下特点：一清晰直观，二简单易懂，三信息模块化。比如扑克牌我们可以看出虽然只有一个图案，一组文字，但很清晰传达出这张牌所代表的含义；又比如机场和地铁的指示牌，采用了图标、字体元素，很清晰直观地引导乘客方向，这种由文字或图案组成的方块样式叫做“卡片式设计”。这种轻巧、简洁的实物设计也被慢慢应用到虚拟设计当中。如上图，现在卡片式设计的应用场景非常广泛，最有代表性的是微软Wi ...继续阅读 (41)

写在前面去年上半年，我开始着手推动项目中响应式设计的落地。以官网优化需求为契机，主动去做了响应式的页面设计，也说服了产品、设计和开发的相关同事一起把它上线落实，但不幸的是，由于各种方面的原因，比如，生搬硬套的PC模块，无差异化的设计使得移动端阅读不佳，导航兼容性有限等等原因，上线几个月后又悄然下线。我不禁反思，项目中是否应该推行响应式？今年年初重新启动了全站响应式项目，从产品、交互、视觉到开发，各个角色全方面参与了响应式项目，最终门户的页面实现全面响应式。在项目过程中有技术沉淀，也有不少的思考，也就有了以下的文字。文章的内容围绕四个方面，响应式的概念，实践方法，一些案例，以及一些看法。概念Ehan Marcotte 为A List Apart写过一篇介绍型的文章 <响应式网页设计> 。文中讲到响应式的概念源自响应式建筑设计，即房间或者空间会根据其内部人群数量和流动而变化。[最近一门新兴的学科“响应式建筑(responsive architecture)”开始在探讨物理空间根据流动于其中的人进行响应的方法。建筑师们通过把嵌入式机器人与可拉伸材料结合的方法，尝试艺术装置和可弯曲、伸缩和扩展的墙体结构，达到根据接近人群的情况变化的效果。运动传感器与气候控制系统相结合，调整围绕人们周围的房间的温度以及环境照明。已经有公司制造了“智能玻璃技术”，当室内人数达到一定的阀值时，它可以 ...继续阅读 (30)

最近2年一直在做WebApp相关项目，设计过上百个弹框，其中总结了一些心得，将透过以下文章介绍弹框在Web上的各种应用﹑技巧及表现。什么是弹框?弹框是一种交互方式，用作提醒，做决定或者解决某个任务。弹框一般包含一个蒙版，一个主体及一个关闭入口，常见于网页及移动端。其好处是让用户更聚焦，且不用离开当前页面，更快更容易完成任务。由于弹框与当下流行的卡片式设计在表现形式上十分接近，同时弹框也逐渐承载了更多功能性需求，不再是简单的内容堆砌，因此弹框设计正在被越来越多设计师关注。弹框尺寸怎么定?在真正着手设计一个弹框时, 第一个遇到的问题就是弹框的尺寸到底要定多大。市面上各种各样尺寸的屏幕分辨率，如果你希望以一个尺寸适配所有屏幕分辨率，那可以参考以下数据。2016年5月中国市场主流电脑分辨率统计Top 5 (资料来源自百度统计)从上图得知市面上最小的屏幕是1024×768,因此只要保证在这个尺寸放得下, 其他尺寸也肯定没有问题。弹框的宽度一般不会太宽，1000px通常是足够有余的。高度的话，以Windows为例，去掉系统底部功能条的高度及浏览器的高度后，可以得出:768px – 约60~100px(浏览器高度) – 40px(系统底部工具栏高度) = 约620px弹框高度控制在620px以内，可以避免在小屏幕下滚动一点点才能看全整个弹框的尴尬情况。假设弹框本 ...继续阅读 (47)

最近2年一直在做WebApp相关项目，设计过上百个弹框，其中总结了一些心得，将透过以下文章介绍弹框在Web上的各种应用﹑技巧及表现。什么是弹框?弹框是一种交互方式，用作提醒，做决定或者解决某个任务。弹框一般包含一个蒙版，一个主体及一个关闭入口，常见于网页及移动端。其好处是让用户更聚焦，且不用离开当前页面，更快更容易完成任务。由于弹框与当下流行的卡片式设计在表现形式上十分接近，同时弹框也逐渐承载了更多功能性需求，不再是简单的内容堆砌，因此弹框设计正在被越来越多设计师关注。弹框尺寸怎么定?在真正着手设计一个弹框时, 第一个遇到的问题就是弹框的尺寸到底要定多大。市面上各种各样尺寸的屏幕分辨率，如果你希望以一个尺寸适配所有屏幕分辨率，那可以参考以下数据。2016年5月中国市场主流电脑分辨率统计Top 5 (资料来源自百度统计)从上图得知市面上最小的屏幕是1024×768,因此只要保证在这个尺寸放得下, 其他尺寸也肯定没有问题。弹框的宽度一般不会太宽，1000px通常是足够有余的。高度的话，以Windows为例，去掉系统底部功能条的高度及浏览器的高度后，可以得出:768px – 约60~100px(浏览器高度) – 40px(系统底部工具栏高度) = 约620px弹框高度控制在620px以内，可以避免在小屏幕下滚动一点点才能看全整个弹框的尴尬情况。假设弹框本 ...继续阅读 (28)

最近2年一直在做WebApp相关项目，设计过上百个弹框，其中总结了一些心得，将透过以下文章介绍弹框在Web上的各种应用﹑技巧及表现。什么是弹框?弹框是一种交互方式，用作提醒，做决定或者解决某个任务。弹框一般包含一个蒙版，一个主体及一个关闭入口，常见于网页及移动端。其好处是让用户更聚焦，且不用离开当前页面，更快更容易完成任务。由于弹框与当下流行的卡片式设计在表现形式上十分接近，同时弹框也逐渐承载了更多功能性需求，不再是简单的内容堆砌，因此弹框设计正在被越来越多设计师关注。弹框尺寸怎么定?在真正着手设计一个弹框时, 第一个遇到的问题就是弹框的尺寸到底要定多大。市面上各种各样尺寸的屏幕分辨率，如果你希望以一个尺寸适配所有屏幕分辨率，那可以参考以下数据。2016年5月中国市场主流电脑分辨率统计Top 5 (资料来源自百度统计)从上图得知市面上最小的屏幕是1024×768,因此只要保证在这个尺寸放得下, 其他尺寸也肯定没有问题。弹框的宽度一般不会太宽，1000px通常是足够有余的。高度的话，以Windows为例，去掉系统底部功能条的高度及浏览器的高度后，可以得出:768px – 约60~100px(浏览器高度) – 40px(系统底部工具栏高度) = 约620px弹框高度控制在620px以内，可以避免在小屏幕下滚动一点点才能看全整个弹框的尴尬情况。假设弹框本 ...继续阅读 (22)

说起flexbox，都算是件陈年旧事了，它是2009年W3C提出的一种全新的可伸缩的CSS布局方式。依赖flexbox，我们可以更简单，高效的完成可伸缩式页面的布局。业界与flexbox的相关教程文章也是各式各样，新旧交替，很多小伙伴对flexbox想用又不敢用，究其原因也就是即分不清它各个版本的编写规范，又苦恼于大家总是挂在嘴边的一句“flexbox兼容性不好”。 所以今儿前来总结一个精华干货贴，回顾那些楼主在项目里用过的flexbox，来谈谈那些不用苦恼“兼容”的flexbox最佳实例（本文只聊移动端）。Part1 先聊聊历史：在2009年最早版本的Flexbox规范中，我们编写为“display:box;”，中期版本的Flexbox；我们编写为“display:flexbox;”而目前的规范版本，我们定义“display:flex;”。flexbox规范的制定可谓是艰辛百变，但目前使用的最新版本草案已于今年3-1日正式进入W3C的候选推荐标准（Candidate Recommendation）阶段，这也就意味着关于flexbox的最终规范即将落地。 Part2 版本VS兼容：如下图所示，除了Opera mobile12，移动端的各大浏览器都是支持flexbox的旧版语法的，但不包含flex的wrap属性。 Part3 信手拈来的flexbox最佳实例(以下 ...继续阅读 (26)

说起flexbox，都算是件陈年旧事了，它是2009年W3C提出的一种全新的可伸缩的CSS布局方式。依赖flexbox，我们可以更简单，高效的完成可伸缩式页面的布局。业界与flexbox的相关教程文章也是各式各样，新旧交替，很多小伙伴对flexbox想用又不敢用，究其原因也就是即分不清它各个版本的编写规范，又苦恼于大家总是挂在嘴边的一句“flexbox兼容性不好”。 所以今儿前来总结一个精华干货贴，回顾那些楼主在项目里用过的flexbox，来谈谈那些不用苦恼“兼容”的flexbox最佳实例（本文只聊移动端）。Part1 先聊聊历史：在2009年最早版本的Flexbox规范中，我们编写为“display:box;”，中期版本的Flexbox；我们编写为“display:flexbox;”而目前的规范版本，我们定义“display:flex;”。flexbox规范的制定可谓是艰辛百变，但目前使用的最新版本草案已于今年3-1日正式进入W3C的候选推荐标准（Candidate Recommendation）阶段，这也就意味着关于flexbox的最终规范即将落地。 Part2 版本VS兼容：如下图所示，除了Opera mobile12，移动端的各大浏览器都是支持flexbox的旧版语法的，但不包含flex的wrap属性。 Part3 信手拈来的flexbox最佳实例(以下 ...继续阅读 (35)

初学SVG的时候，感觉那一坨一坨的代码难读难懂，现在回过头仔细想想，是因为那时候看文档缺少一些具体的实例，导致学习起来很枯燥。如今SVG已经在前端各个领域都有所作为，无论是项目里的应用还是demo都所处可见，这里我就用一个实例的写法带新同学轻松的打开SVG动画的大门。首先我们定义一块画布，然后在上面画一个圆形。他看起来应该是这个样子的：（每一个实例我都会附加图片以及demo链接，方便直观的理解与源代码的查看，查看的时候请使用标准浏览器）点击查看Demo现在我们就让这个圆动起来动起来是这个样子的（gif循环之后234三个demo将无法区分，所以这里的gif只循环一次，需要多次查看效果请刷新或者进入demo查看）：点击查看Demo我们可以看到圆动起来的时候，circle元素里边不再是空的，多了一个animate的元素，这个animate含有下面几个属性：attributeName：动画属性名，顾名思义，你想要改变哪个属性attributeType：动画属性的类别，常见的两个值，XML和css，取决于属性是在xml里还是在style里，下面改变opacity的demo里，就是使用的css。不写的时候默认值为auto，他会先搜索css，建议写上。from to ：性的开始和结束值，from可选，当不写的时候会取默认值。begin dur ：动画的开始时间与结束时间。如果你想打开页面过几秒才 ...继续阅读 (45)

初学SVG的时候，感觉那一坨一坨的代码难读难懂，现在回过头仔细想想，是因为那时候看文档缺少一些具体的实例，导致学习起来很枯燥。如今SVG已经在前端各个领域都有所作为，无论是项目里的应用还是demo都所处可见，这里我就用一个实例的写法带新同学轻松的打开SVG动画的大门。首先我们定义一块画布，然后在上面画一个圆形。他看起来应该是这个样子的：（每一个实例我都会附加图片以及demo链接，方便直观的理解与源代码的查看，查看的时候请使用标准浏览器）点击查看Demo现在我们就让这个圆动起来动起来是这个样子的（gif循环之后234三个demo将无法区分，所以这里的gif只循环一次，需要多次查看效果请刷新或者进入demo查看）：点击查看Demo我们可以看到圆动起来的时候，circle元素里边不再是空的，多了一个animata的元素，这个animata含有下面几个属性：attributeName：动画属性名，顾名思义，你想要改变哪个属性attributeType：动画属性的类别，常见的两个值，XML和css，取决于属性是在xml里还是在style里，下面改变opacity的demo里，就是使用的css。不写的时候默认值为auto，他会先搜索css，建议写上。from to ：性的开始和结束值，from可选，当不写的时候会取默认值。begin dur ：动画的开始时间与结束时间。如果你想打开页面过几秒才 ...继续阅读 (35)

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

设计推动更好体验，一直是ISUX的设计宗旨，而全新体验的ISUX官网应势而生。从设计初期到最终的设计定稿再到今日上线，反复打磨至最终定稿的状态历历在目。下面将从两大维度来讲解这次官网的改版。设计维度一 多平台统一体验随着科技的进步发展，移动互联网已经深入每个人的生活当中，使用手持设备已经成为用户日常生活中不可缺失的习惯，本次ISUX官网的改版首要目标就是完成多平台的统一体验，保证PC / Phone / Pad 三大平台的设计统一，让用户能随时随地能够访问。二 阅读体验的提升一款内容类网站，设计的核心价值在于其阅读体验，当然文章能否吸引人是最重要的，让用户在阅读过程中磕磕绊绊，我认为这是设计师缺乏足够的细心与耐力，而在当下到处在讲究细致服务的社会中将会被慢慢淘汰掉。随着ISUX有越来越多不同专业的人员加入，增加了创新产品、品牌、动画视频、设计项目管理等等角色，已经不再是以前四个颜色代表四大专业，更希望新品牌能够代表今天我们共融为一个大团队的精神；新官网的导航舍去了原有的四色风格，采用单色logo，让我们目标更加专注在一致性的设计体验、简洁化界面风格，去凸显功能与内容。针对首页的交互框架进行了新的调整，突出推荐文章，版式更加清爽利落；新版仍然继续采用十分合理的卡片式体验，新版本对卡片进一步优化，减化骚扰信息并重新调整框架，让用户的关注度重新回落到文章本身；内文的框架设定，老版本的左中 ...继续阅读 (39)

设计推动更好体验，一直是ISUX的设计宗旨，而全新体验的ISUX官网应势而生。从设计初期到最终的设计定稿再到今日上线，反复打磨至最终定稿的状态历历在目。下面将从两大维度来讲解这次官网的改版。设计维度一 多平台统一体验随着科技的进步发展，移动互联网已经深入每个人的生活当中，使用手持设备已经成为用户日常生活中不可缺失的习惯，本次ISUX官网的改版首要目标就是完成多平台的统一体验，保证PC / Phone / Pad 三大平台的设计统一，让用户能随时随地能够访问。二 阅读体验的提升一款内容类网站，设计的核心价值在于其阅读体验，当然文章能否吸引人是最重要的，让用户在阅读过程中磕磕绊绊，我认为这是设计师缺乏足够的细心与耐力，而在当下到处在讲究细致服务的社会中将会被慢慢淘汰掉。随着ISUX有越来越多不同专业的人员加入，增加了创新产品、品牌、动画视频、设计项目管理等等角色，已经不再是以前四个颜色代表四大专业，更希望新品牌能够代表今天我们共融为一个大团队的精神；新官网的导航舍去了原有的四色风格，采用单色logo，让我们目标更加专注在一致性的设计体验、简洁化界面风格，去凸显功能与内容。针对首页的交互框架进行了新的调整，突出推荐文章，版式更加清爽利落；新版仍然继续采用十分合理的卡片式体验，新版本对卡片进一步优化，减化骚扰信息并重新调整框架，让用户的关注度重新回落到文章本身；内文的框架设定，老版本的左中 ...继续阅读 (37)

品牌概述Brand Overview腾讯云基于腾讯多年来海量业务的技术锤炼，从基础架构到精细化运营，从平台实力到生态能力建设，通过游戏、视频、移动应用、金融、政企等行业解决方案和云服务器、云数据库、音视频等一系列明星产品服务的打造，致力于为企业和创业者提供集云计算、云数据、云运营于一体更优质的云端服务体验，成为全球领先的云服务提供商。Tencent Cloud is committed to provide high-quality cloud services including cloud computing, cloud data and cloud operations for enterprises and entrepreneurs. Based on the years of massive cloud-based business technology, it covers many areas such as infrastructure to fine operation, platforms to ecological capacity, games, videos, mobile applications, finance, government and etc. Also industry solutions, and building cloud ser ...继续阅读 (64)

关于短片的构思“一部永远在发展中的短片”这是我们几位创作者对于这个项目的定义。“发展中”表示她是可以不断加入新的元素，是永远都在为了能变的更好而努力。我们的基本想法是挑选一些经典的电影片段、艺术品或者流行元素（总之就是大家能都一眼认得出来的东西），再用ISUX的方式呈现出来，而其片段可以不断增加。所以从一开始我们就没有限定故事架构和表现手法，有很多想法都是在我们的创作过程当中所产生的。甚至整部短片的框架也是在拍摄最后一组镜头的时候才想到的。（ 嗯，是不是听起来很像王家卫的创作方式：D ）这个项目的最终目标是让观众看到短片后可以感受到我们的创意，有乐趣的工作氛围和积极的态度，从而想加入我们。这超越了所有的叙事方式、故事结构和拍摄技巧。所以轻松且开放的创作方式是这个项目的必然选择。故事架构这个在最后一刻才想到的东西，其实就是我们设计师每天所要面对的创作过程:然后我们把每一个关键词匹配相对应的镜头:制作与拍摄为了体现我们ISUX设计师专业（ZUO）的精神，基本上每个片段我们都采用了不同的制作方法。其过程必然充满挑战，所幸结果也满布惊喜，下面为大家逐一解构。ISUX月球旅行记道具：纸板、剃须霜、报纸摄影器材：Canon 6D如同人类第一部科幻电影一样，这也是我们拍摄的第一个镜头。首先用报纸混合胶水贴在篮球上，等完全晾干后取下来做成一个半球体的面罩。然后用剃须霜涂在表面，做成凹凸不平的月球表 ...继续阅读 (25)

关于短片的构思“一部永远在发展中的短片”这是我们几位创作者对于这个项目的定义。“发展中”表示她是可以不断加入新的元素，是永远都在为了能变的更好而努力。我们的基本想法是挑选一些经典的电影片段、艺术品或者流行元素（总之就是大家能都一眼认得出来的东西），再用ISUX的方式呈现出来，而其片段可以不断增加。所以从一开始我们就没有限定故事架构和表现手法，有很多想法都是在我们的创作过程当中所产生的。甚至整部短片的框架也是在拍摄最后一组镜头的时候才想到的。（ 嗯，是不是听起来很像王家卫的创作方式：D ）这个项目的最终目标是让观众看到短片后可以感受到我们的创意，有乐趣的工作氛围和积极的态度，从而想加入我们。这超越了所有的叙事方式、故事结构和拍摄技巧。所以轻松且开放的创作方式是这个项目的必然选择。故事架构这个在最后一刻才想到的东西，其实就是我们设计师每天所要面对的创作过程:然后我们把每一个关键词匹配相对应的镜头:制作与拍摄为了体现我们ISUX设计师专业（ZUO）的精神，基本上每个片段我们都采用了不同的制作方法。其过程必然充满挑战，所幸结果也满布惊喜，下面为大家逐一解构。ISUX月球旅行记道具：纸板、剃须霜、报纸摄影器材：Canon 6D如同人类第一部科幻电影一样，这也是我们拍摄的第一个镜头。首先用报纸混合胶水贴在篮球上，等完全晾干后取下来做成一个半球体的面罩。然后用剃须霜涂在表面，做成凹凸不平的月球表 ...继续阅读 (22)

大江南北除了美猴王还有一枚萌物家闻户晓必然是企鹅QQ而二零一六年企鹅QQ即将迎来十八周年礼天降大任于企鹅面对向更年轻潮用户是以赋予自己一次品牌蜕变其实从最早的企鹅诞生至今鹅从未停止品牌演变的步伐一九九九记得“滴滴滴”的消息寻呼那时的鹅是“OICQ”小名“中文网络寻呼机”名未见经传当时修身型似帝企鹅二零零零企鹅新设定悄然发布美其新名“QQ”赋予标志性大红围脖经典胖嘟造型简直花见花开伴随敦实鼠标Q字顿时名噪大江南北二零零六企鹅拔高修身质感立体有致形体左右终于双双对称那时水晶立体质感就是潮二零一二企鹅不想被低龄第一次走向极简剪影线型朴质美文字也干净利索那时品牌是南极的极地雪二零一三各路终端不同的企鹅终于一统天下成为同一只鹅于是QQ不禁咧嘴一笑二零一六QQ愈发清晰时代使命与未来搭建互联网内容大平台面对更年轻潮用户决意挺起腰板修身锐意呐喊“我是潮鹅~~~~”纵观六阶演变鹅型与命名一直在不断简化而不变的根本是鹅依旧是鹅最终塑型多一笔太多少一笔太少新鹅进化细读1. 企鹅从俯视进化为正视角度2. 整体造型更加锐利修身简洁3. 眼珠更具灵气鹅嘴更具想象4. 字型加粗适用于多应用场景QQ 2016品牌蜕变过程视频细心的你早已察觉QQ会员与超级会员都已升级为新企鹅比之前愈发统一一致会员进化细读1. 统一启用新企鹅造型2. 统一红毛与围脖造型3. 极简造型与简化色彩回到标志字体设计QQ两字不是孤军奋战是整 ...继续阅读 (31)

大江南北除了美猴王还有一枚萌物家闻户晓必然是企鹅QQ而二零一六年企鹅QQ即将迎来十八周年礼天降大任于企鹅面对向更年轻潮用户是以赋予自己一次品牌蜕变其实从最早的企鹅诞生至今鹅从未停止品牌演变的步伐一九九九记得“滴滴滴”的消息寻呼那时的鹅是“OICQ”小名“中文网络寻呼机”名未见经传当时修身型似帝企鹅二零零零企鹅新设定悄然发布美其新名“QQ”赋予标志性大红围脖经典胖嘟造型简直花见花开伴随敦实鼠标Q字顿时名噪大江南北二零零六企鹅拔高修身质感立体有致形体左右终于双双对称那时水晶立体质感就是潮二零一二企鹅不想被低龄第一次走向极简剪影线型朴质美文字也干净利索那时品牌是南极的极地雪二零一三各路终端不同的企鹅终于一统天下成为同一只鹅于是QQ不禁咧嘴一笑二零一六QQ愈发清晰时代使命与未来搭建互联网内容大平台面对更年轻潮用户决意挺起腰板修身锐意呐喊“我是潮鹅~~~~”纵观六阶演变鹅型与命名一直在不断简化而不变的根本是鹅依旧是鹅最终塑型多一笔太多少一笔太少新鹅进化细读1. 企鹅从俯视进化为正视角度2. 整体造型更加锐利修身简洁3. 眼珠更具灵气鹅嘴更具想象4. 字型加粗适用于多应用场景QQ 2016品牌蜕变过程视频细心的你早已察觉QQ会员与超级会员都已升级为新企鹅比之前愈发统一一致会员进化细读1. 统一启用新企鹅造型2. 统一红毛与围脖造型3. 极简造型与简化色彩回到标志字体设计QQ两字不是孤军奋战是整 ...继续阅读 (24)

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

关于短片的构思“一部永远在发展中的短片”这是我们几位创作者对于这个项目的定义。“发展中”表示她是可以不断加入新的元素，是永远都在为了能变的更好而努力。我们的基本想法是挑选一些经典的电影片段、艺术品或者流行元素（总之就是大家能都一眼认得出来的东西），再用ISUX的方式呈现出来，而其片段可以不断增加。所以从一开始我们就没有限定故事架构和表现手法，有很多想法都是在我们的创作过程当中所产生的。甚至整部短片的框架也是在拍摄最后一组镜头的时候才想到的。（ 嗯，是不是听起来很像王家卫的创作方式：D ）这个项目的最终目标是让观众看到短片后可以感受到我们的创意，有乐趣的工作氛围和积极的态度，从而想加入我们。这超越了所有的叙事方式、故事结构和拍摄技巧。所以轻松且开放的创作方式是这个项目的必然选择。故事架构这个在最后一刻才想到的东西，其实就是我们设计师每天所要面对的创作过程:然后我们把每一个关键词匹配相对应的镜头:制作与拍摄为了体现我们ISUX设计师专业（ZUO）的精神，基本上每个片段我们都采用了不同的制作方法。其过程必然充满挑战，所幸结果也满布惊喜，下面为大家逐一解构。ISUX月球旅行记道具：纸板、剃须霜、报纸摄影器材：Canon 6D如同人类第一部科幻电影一样，这也是我们拍摄的第一个镜头。首先用报纸混合胶水贴在篮球上，等完全晾干后取下来做成一个半球体的面罩。然后用剃须霜涂在表面，做成凹凸不平的月球表 ...继续阅读 (28)

———————————————————————————————————————————品牌概述Brand Overview腾讯云基于腾讯多年来海量业务的技术锤炼，从基础架构到精细化运营，从平台实力到生态能力建设，通过游戏、视频、移动应用、金融、政企等行业解决方案和云服务器、云数据库、音视频等一系列明星产品服务的打造，致力于为企业和创业者提供集云计算、云数据、云运营于一体更优质的云端服务体验，成为全球领先的云服务提供商。Tencent Cloud is committed to provide high-quality cloud services including cloud computing, cloud data and cloud operations for enterprises and entrepreneurs. Based on the years of massive cloud-based business technology, it covers many areas such as infrastructure to fine operation, platforms to ecological capacity, games, videos, mobile applications, finance, government and etc. Also ...继续阅读 (17)

近来风生水起的VR虚拟现实技术，抽空想起年初完成的“星球计划”项目，总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍。 QQ物联与深圳市天文台合作，在手Q“发现新设备”-“公共设备”里，连接QQ物联摄像头为用户提供2016年天体大事件的直播，大家可以通过手Q实时观看到世界各地最佳观测点的日食，流星等天体现象。承载整个“星球计划”活动的运营页面，经多方讨论，我们决定尝试3D全景漫游模式的H5运营页进行推广，今天就不详述活动的具体内容，先和大家聊一聊这H5里“3D全景漫游”的制作方法。先贴一个体验地址（请忽略GIF录屏的卡顿及字体，iOS开启陀螺仪体验最佳），Page3的宇宙部分-转动手机在模拟的宇宙里搜寻各大行星，就是我们今天要说的基于Html5的3D全景漫游。 要制作全景漫游，首先得有全景图像。全景图像的获取通常是借助鱼眼的全景摄像机的拍摄来完成的，或者是单反相机、鱼眼镜头、云台和三角架的组合。需要按照一个方向旋转360度拍摄一组照片，照片之间要有部分重合的部分，方便进行后期的拼接和融合。在拍好照片后需要将它们无缝拼接在一起，生成的全景图像可分为球面全景图、立方体全景图以及柱状全景图等。（咋们腾讯地图的街景体验，就是最常见的全景漫游技术啦）没有全景摄像机，也可以通过一些素材站点拿到适合我们项目的全景图。例如：某素材站点当然，星球计划的背景图是宇宙星际 ...继续阅读 (40)

近来风生水起的VR虚拟现实技术，抽空想起年初完成的“星球计划”项目，总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍。 QQ物联与深圳市天文台合作，在手Q“发现新设备”-“公共设备”里，连接QQ物联摄像头为用户提供2016年天体大事件的直播，大家可以通过手Q实时观看到世界各地最佳观测点的日食，流星等天体现象。承载整个“星球计划”活动的运营页面，经多方讨论，我们决定尝试3D全景漫游模式的H5运营页进行推广，今天就不详述活动的具体内容，先和大家聊一聊这H5里“3D全景漫游”的制作方法。先贴一个体验地址（请忽略GIF录屏的卡顿及字体，iOS开启陀螺仪体验最佳），Page3的宇宙部分-转动手机在模拟的宇宙里搜寻各大行星，就是我们今天要说的基于Html5的3D全景漫游。 要制作全景漫游，首先得有全景图像。全景图像的获取通常是借助鱼眼的全景摄像机的拍摄来完成的，或者是单反相机、鱼眼镜头、云台和三角架的组合。需要按照一个方向旋转360度拍摄一组照片，照片之间要有部分重合的部分，方便进行后期的拼接和融合。在拍好照片后需要将它们无缝拼接在一起，生成的全景图像可分为球面全景图、立方体全景图以及柱状全景图等。（咋们腾讯地图的街景体验，就是最常见的全景漫游技术啦）没有全景摄像机，也可以通过一些素材站点拿到适合我们项目的全景图。例如：某素材站点当然，星球计划的背景图是宇宙星际 ...继续阅读 (25)

入行早期是带交互设计团队，近两年负责产品团队，对于“需求”的接受方和给予方角色都有过扮演，想和大家探讨一下“需求的正确打开方式”。每次探讨相关问题，我都会以一个餐厅的试运营案例作为开头。这个案例是借来的，发生在兰桂坊。A餐厅试运营，请了第一批客户来试吃，之后收集反馈，用户的评价中规中矩。相对之下，椅子不好坐的负面评价就显得很刺眼，这让老板很苦恼，因为这些椅子是内地找原木材订做的，老板个人很是喜欢。第二天，老板叫来了厨师长，把菜单换了，厨师长很不解。没有客户说菜不好吃呀？为什么不把椅子换掉，而要换菜单。厨师长还是照做了，老板要求新菜单里的菜色，必须是其他店里没有的。厨师长绞尽脑汁，终于拿出了些创意，比如“石板人参虾”，滚烫的石板摆在客户面前，里面摆着红色的大虾，人参高汤浇下去，人参香味与滚烫石板的“嗞嗞”声一同扑面而来，色香味各感官的一次集体盛宴。之后再收集反馈，倒也再没有客户抱怨椅子不好坐了。有没有对错，谁对谁错，我不知道。我的理解是，椅子不好坐是事实，但作为一家餐厅，核心问题是菜色。大家看下重庆的小面，好吃的店门口都是蹲着一排人在塑料小凳子上吃。所以老板换了菜单后，椅子不好坐也就没有人抱怨了。所以,需求真实存在并不说明什么,真正能把设计结果区分开的,是如何理解表面需求背后的根本需求,这里的理解其实是个创造的过程。你可以拿到需求就做，你也可以拿到需求，先想一想，去厕所转一圈，找寻一 ...继续阅读 (17)

入行早期是带交互设计团队，近两年负责产品团队，对于“需求”的接受方和给予方角色都有过扮演，想和大家探讨一下“需求的正确打开方式”。每次探讨相关问题，我都会以一个餐厅的试运营案例作为开头。这个案例是借来的，发生在兰桂坊。A餐厅试运营，请了第一批客户来试吃，之后收集反馈，用户的评价中规中矩。相对之下，椅子不好坐的负面评价就显得很刺眼，这让老板很苦恼，因为这些椅子是内地找原木材订做的，老板个人很是喜欢。第二天，老板叫来了厨师长，把菜单换了，厨师长很不解。没有客户说菜不好吃呀？为什么不把椅子换掉，而要换菜单。厨师长还是照做了，老板要求新菜单里的菜色，必须是其他店里没有的。厨师长绞尽脑汁，终于拿出了些创意，比如“石板人参虾”，滚烫的石板摆在客户面前，里面摆着红色的大虾，人参高汤浇下去，人参香味与滚烫石板的“嗞嗞”声一同扑面而来，色香味各感官的一次集体盛宴。之后再收集反馈，倒也再没有客户抱怨椅子不好坐了。有没有对错，谁对谁错，我不知道。我的理解是，椅子不好坐是事实，但作为一家餐厅，核心问题是菜色。大家看下重庆的小面，好吃的店门口都是蹲着一排人在塑料小凳子上吃。所以老板换了菜单后，椅子不好坐也就没有人抱怨了。所以,需求真实存在并不说明什么,真正能把设计结果区分开的,是如何理解表面需求背后的根本需求,这里的理解其实是个创造的过程。你可以拿到需求就做，你也可以拿到需求，先想一想，去厕所转一圈，找寻一 ...继续阅读 (23)

自从2010年Ethan Marcotte开始讨论响应式网页设计，开发者和设计师们竞相寻求处理响应式图片的方法。这的确是一个棘手的问题，因为我们对同一个网站在众多设备宽度下，使用同一图像源。你愿意在一个大显示屏上显示模糊地、马赛克状的图像？你愿意在你的手机上加载一个巨大的（虽然更漂亮的）图像？这个问题令人左右为难。一群来自响应式问题社区组(RICG)的聪明家伙致力于解决这个难题，他们使picture元素和srcset、sizes属性纳入HTML 5.1规范草案 。因为我们无法预测用户在何地以及如何访问我们的网站，所以我们需要浏览器自身根据情况选择最好的图像。新规范将解决以下问题：基于设备象素比（device-pixel-radio）选择基于viewport选择基于Art direction（美术设计）选择基于图像格式选择该规范中，img元素增加了两个新属性：srcset和sizes。srcset用来声明一组图像源，浏览器根据我们使用描述符指定的条件来选择图像。描述符x表示图像的像素密度，描述符w表示图像的宽度；浏览器使用这些信息从列表中选择合适的图像。sizes属性为浏览器提供将要显示图像的尺寸信息，srcset使用w描述符时必须包含此属性。这种方法尤其适用于可变宽度的图像，我将在后面详细讨论。我们现在可以根据用户的viewport，提供不同质量或美术设计(art directio ...继续阅读 (31)

自从2010年Ethan Marcotte开始讨论响应式网页设计，开发者和设计师们竞相寻求处理响应式图片的方法。这的确是一个棘手的问题，因为我们对同一个网站在众多设备宽度下，使用同一图像源。你愿意在一个大显示屏上显示模糊地、马赛克状的图像？你愿意在你的手机上加载一个巨大的（虽然更漂亮的）图像？这个问题令人左右为难。一群来自响应式问题社区组(RICG)的聪明家伙致力于解决这个难题，他们使picture元素和srcset、sizes属性纳入HTML 5.1规范草案 。因为我们无法预测用户在何地以及如何访问我们的网站，所以我们需要浏览器自身根据情况选择最好的图像。新规范将解决以下问题：基于设备象素比（device-pixel-radio）选择基于viewport选择基于Art direction（美术设计）选择基于图像格式选择该规范中，img元素增加了两个新属性：srcset和sizes。srcset用来声明一组图像源，浏览器根据我们使用描述符指定的条件来选择图像。描述符x表示图像的像素密度，描述符w表示图像的宽度；浏览器使用这些信息从列表中选择合适的图像。sizes属性为浏览器提供将要显示图像的尺寸信息，srcset使用w描述符时必须包含此属性。这种方法尤其适用于可变宽度的图像，我将在后面详细讨论。我们现在可以根据用户的viewport，提供不同质量或美术设计(art directio ...继续阅读 (38)

首先祝大家新年快乐～新年新气象，天天猴赛雷！今年除夕，QQ红包2亿现金大家估计都收获不少吧（反正我是刷出了不少，哦呵呵呵呵！），而在大家欢乐刷一刷的背后，我们也是进行了不少的工作。除了全民刷一刷的重要功能体验，元旦和除夕我们都做了预热推广的H5，告知用户这个活动的相关信息和内容并让用户对这个活动感兴趣。预热推广将会影响到用户参与到刷一刷活动的人数和参与体验，因此要打造一个体验不错的预热H5，需要策划、技术、设计的紧密配合，那么设计在其中做了什么工作呢，这个故事让我娓娓道来……“那个元旦刷一刷红包预热H5，你来做下呗？”“哦…好哒～” 当我接下这个运营活动的时候，根据以往做运营的经验，预计这个需求不会太难弄。很快的，运营策划童鞋过来和我讲解并沟通需求，沟通一开始挺愉快，然后他们和我说这次希望做个告知用户刷红包时间的预热H5活动，并给出以下的一些需求和一些风险点：这个H5需要教育用户刷一刷的操作方式，需要告诉用户明确的抢红包时间、谁来发红包，需要有明确的时间线。除了最后一页，只能有下拉这一种交互动作（点击啊，左划右划都不出现）。画面需要精美（常规都是这么要求的吧）。整个时间线部分最好3屏之内显示完，其中有一屏希望是完整时间线。希望有刺激用户分享的内容。关于活动涉及到的具体明星、企业和总明星、企业数量都很难最终确定，可能会有多次调整。时间点不到临近上线 ...继续阅读 (23)

首先祝大家新年快乐～新年新气象，天天猴赛雷！今年除夕，QQ红包2亿现金大家估计都收获不少吧（反正我是刷出了不少，哦呵呵呵呵！），而在大家欢乐刷一刷的背后，我们也是进行了不少的工作。除了全民刷一刷的重要功能体验，元旦和除夕我们都做了预热推广的H5，告知用户这个活动的相关信息和内容并让用户对这个活动感兴趣。预热推广将会影响到用户参与到刷一刷活动的人数和参与体验，因此要打造一个体验不错的预热H5，需要策划、技术、设计的紧密配合，那么设计在其中做了什么工作呢，这个故事让我娓娓道来……“那个元旦刷一刷红包预热H5，你来做下呗？”“哦…好哒～” 当我接下这个运营活动的时候，根据以往做运营的经验，预计这个需求不会太难弄。很快的，运营策划童鞋过来和我讲解并沟通需求，沟通一开始挺愉快，然后他们和我说这次希望做个告知用户刷红包时间的预热H5活动，并给出以下的一些需求和一些风险点：这个H5需要教育用户刷一刷的操作方式，需要告诉用户明确的抢红包时间、谁来发红包，需要有明确的时间线。除了最后一页，只能有下拉这一种交互动作（点击啊，左划右划都不出现）。画面需要精美（常规都是这么要求的吧）。整个时间线部分最好3屏之内显示完，其中有一屏希望是完整时间线。希望有刺激用户分享的内容。关于活动涉及到的具体明星、企业和总明星、企业数量都很难最终确定，可能会有多次调整。时间点不到临近上线 ...继续阅读 (9)

首先祝大家新年快乐～新年新气象，天天猴赛雷！今年除夕，QQ红包2亿现金大家估计都收获不少吧（反正我是刷出了不少，哦呵呵呵呵！），而在大家欢乐刷一刷的背后，我们也是进行了不少的工作。除了全民刷一刷的重要功能体验，元旦和除夕我们都做了预热推广的H5，告知用户这个活动的相关信息和内容并让用户对这个活动感兴趣。预热推广将会影响到用户参与到刷一刷活动的人数和参与体验，因此要打造一个体验不错的预热H5，需要策划、技术、设计的紧密配合，那么设计在其中做了什么工作呢，这个故事让我娓娓道来……“那个元旦刷一刷红包预热H5，你来做下呗？”“哦…好哒～” 当我接下这个运营活动的时候，根据以往做运营的经验，预计这个需求不会太难弄。很快的，运营策划童鞋过来和我讲解并沟通需求，沟通一开始挺愉快，然后他们和我说这次希望做个告知用户刷红包时间的预热H5活动，并给出以下的一些需求和一些风险点：这个H5需要教育用户刷一刷的操作方式，需要告诉用户明确的抢红包时间、谁来发红包，需要有明确的时间线。除了最后一页，只能有下拉这一种交互动作（点击啊，左划右划都不出现）。画面需要精美（常规都是这么要求的吧）。整个时间线部分最好3屏之内显示完，其中有一屏希望是完整时间线。希望有刺激用户分享的内容。关于活动涉及到的具体明星、企业和总明星、企业数量都很难最终确定，可能会有多次调整。时间点不到临近上线 ...继续阅读 (22)

译者注：本章是iOS Human Interface Guideline的最后一章，文末附上全文PDF下载地址。译文如有任何疏漏之处，或任何意见或建议，请不吝指出，翻译组感谢大家长久以来的关注和支持！5.1 图标与图像尺寸(Icon and Image Sizes)每个app都需要icon，以及启动画面，此外一些app需要一些自定义图标用于导航栏、工具栏和标签栏中，来代表app特有的内容、功能或模式。表格45-1所罗列出来的尺寸可以为自定义图标和图片做参考。表格45-1：自定义图标和图像的尺寸(像素)注意：如果你需要在主屏幕快捷操作上创建自定义icon，请参考主屏幕快捷操作。除了AppStore的icon，你必须把命名为iTunesArtwork之外，你可以任意命名你的icon。在xcode工程中可以使用图片资源目录来组织你的图片icon文件。如果要添加icon，在工程图片资源目录下添加对应的图片文件。在编译时，xcode添加合适的密钥到你的应用Info.plist文件中并且把图片打包进应用中。iOS会根据设备尺寸选择一个合适的icon。关于asset catalogs想要知道更多，可以查阅Asset Catlog Help。所有的图片和icon建议使用png格式，避免使用交错的png。icon和图像的标准位深(bit depth)是24位。 5.2 应用图标(App I ...继续阅读 (29)