我们在日常需求中，经常会碰到视觉设计师对某个中文字体效果非常坚持的情况，因为页面是否高大上，字体选择是很重要的一个因素，选择合适的字体可以让页面更优雅。面对这种问题，我们通常以下方式来进行设计还原：使用图片背景还原设计，即使用photoshop将文本图层单独导出成网页背景图片。产生的问题1.制作与维护成本很高。切图繁琐、高清屏适配繁琐、合并雪碧图更繁琐，后期修改更加繁琐。2.用户体验差。导致网页不支持选中、复制、搜索、翻译、矢量缩放，也会影响视障用户使用读屏器操作网页。3.带来更多带宽消耗。导出的图片体积随着文本面积增加，且字形无法重复利用，这消耗着大量的服务器资源WebFont技术提供了在网页使用特殊字体的可能，从而避免用图片的方法。它的实现方法是通过CSS的@font-face引入字体。很多互联网公司已经率先采用了这种方法，比如Apple官网就是采用了自己的字体。Google也推出了免费的WebFont云托管服务，在国外网站自定义字体得到很好的应用。在中文方面自定义字体却迟迟没有广泛应用，这是有什么原因呢？中文WebFont的困境：中文字体体积大英文字体文字部分由26个字母组成，所以字体文件通常不会太大；而中文汉字数量总共约有九万左右，国标(GB)字库 有6763字,  而根据《现代汉语常用字表》统计数据，常用汉字也要有3500个左右。 中文字体文件通常都会几M的大小，参照现在 ...继续阅读 (45)

移动H5前端性能优化指南概述1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点，首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因，除加载外渲染速度也是优化重点6. 基于第五点，要合理处理代码减少渲染损耗7. 基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置8. 加载完成后用户交互使用时也需注意性能优化指南[加载优化]加载过程是最为耗时的过程，可能会占到总耗时的80%时间，因此是优化的重点· 减少HTTP请求因为手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个a) 合并CSS、JavaScriptb) 合并小图片，使用雪碧图· 缓存使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳）a) 缓存一切可缓存的资源b) 使用长Cache（使用时间戳更新Cache）c) 使用外联式引用CSS、JavaScript· 压缩HTML、CSS、JavaScript减少资源大小可以加快网页显示速度，所以要对HTML、CSS ...继续阅读 (31)

实际工作中，虽然远程测试用得更少，但它确实能解决一些现场测试无法解决的问题。比如在当地无法找到目标用户时，远程测试相对出差是更为廉价可行的做法。或者当需要大量的样本时（现场测试因为时间空间的限制，只能做小样本测试），无主持的远程测试可以完成大样本的测试。此外远程测试相比现场测试，情境还原度更高，更能还原用户真实场景。1 远程测试的类型和选择通常来说，远程可用性测试按是否有主持人分为两种类型。一种是有主持的远程测试（Moderated Remote Testing），研究人员需要和被试者通过远程设备连接起来，使得不在同一地点的两方能同时处于同一个“真实”的空间中，研究人员可以通过远程观察设备完整地观察到用户的操作行为，同时能在测试过程中与被试者进行实时的在线交流。另一种是无主持的远程测试（Unmoderated Remote Testing），被试者根据研究人员的要求，按照自己的时间计划完成测试，并对自己的操作全程进行记录。测试过程中，研究人员并不进行干预与互动，所有的分析工作都在测试完成之后进行。两种类型的远程测试各有千秋，研究人员需要根据项目具体情况进行谨慎地选择。可以从以下几个方面考虑。项目时间安排和样本量要求有主持的远程测试，由于需要主持人的参与，一定程度上限制了同时进行测试的数量，测试阶段需要花费的时间较长。而无主持的远程测试能够同时进行多个测试，能在有限的时间内用较低的花 ...继续阅读 (33)

前言移动互联网时代，针对移动产品进行的可用性测试，主要是将PC产品可用性测试方法和经验照搬过来。但在实际的工作中，由于移动产品的特殊性，我们遇到了一些在PC产品可用性测试中不曾遇见的问题，例如“使用测试设备还是用户设备”，“选择iOS平台还是Android平台测试”，“使用什么原型工具和记录工具”等。因此，移动可用性测试的方法、设备、工具等都需要因“移动”制宜。我们尝试将移动可用性测试的零散知识总结梳理起来，加上我们的思考和探索整理成文，供大家一起交流。本系列文章会分成4个部分：移动可用性测试流程和常见问题（第一篇，即本文）；移动情境和移动设备选择（第二篇）；移动现场测试方法和工具（第三篇）；移动远程测试探索（第四篇）。1.移动可用性测试流程移动可用性测试流程与传统流程差异不大。但考虑到有读者可能是刚接触可用性测试，我们这里还是简单罗列一下。测试计划和招募(Prepare & Recruit)这是移动可用性测试最重要的阶段，这个阶段需要明确五大问题：为什么测试？在什么环境下进行测试？招募哪些对象进行测试？测试的系统和功能是什么？如何搜集和分析这些数据？对于这些问题，在内部需要讨论并达成一致意见。然后制定可用性测试计划，准备相关素材，包括制作测试原型、撰写测试任务和脚本、招募被试者、搭建测试环境和准备测试工具等。预测试和正式测试(Pilot & Test)移动可用性测试受到设备、环境 ...继续阅读 (22)

不要唱！在山的那边海的那边有一只小肥鹅，它活泼又呆萌，聪明又伶俐，它每天每天陪你打开萌萌哒小QQ，它勤劳勇敢青春又美腻。噢可爱的小肥鹅……上面的都不是重点，重点是今天我们要讲，小肥鹅变身小彩鹅的故事。从无到有小企鹅啪啪啪地走过了许多个时代，也许我们已经习惯了它固有的形象。突然想让它跟着潮流起来，也不是穿件秋季新装这么简单。灵感不会从天上掉下来，就像我们从来不会考虑端着凳子去门口等陨石来砸。为了找到设计的方向和适合它的风格，我们也经历了许多不同的尝试。发散思路有时候不是为了马上得到结果，而是为找到通向结果的那条路。哪怕做了错误的尝试，也可以成功得到“这个方法不可行”的正确结论。尝试的过程中慢慢发现，从潮流的角度来说给予具体的意向会让鹅的情感色彩变得局限：走煽情路线不够活泼，走网红路线不够正式，讲时事太过沉重，文青范又有点装……然而就如同走迷宫一样，最后终于找到了一条看似不通却能在拐角转弯的那条路，它叫做青春。灵感速写每个人都有过青春（当然进行时也是可以的），青春里有些什么？活力？激情？隐忍？奋发？还是更多？青春可以是抽象也可以是具象，而它承载得越多，我们就能沉淀得越深。翻着一坨坨概念稿，我们发现了这只鹅更能表达我们对待青春的心情。这张图从想法到完成只用了不到3个小时，虽然没有细节，但呈现的就是灵感本身。灵感写下来的时候不需要考虑细节，否则当它转瞬即逝，就只能四十五度仰望天空了。那么打 ...继续阅读 (33)

1现场测试还是远程测试现场测试可以面对面接触用户，能够观察和记录所有的现场信息。远程测试虽然情境还原度较高，但通过摄像头和麦克风得到的信息毕竟有限，很多场外信息包括用户肢体语言都会有所缺失。此外，现场测试更容易控场，可以保证无干扰的环境、通畅的网络，也可以及时解答用户的问题，保证用户能专注在测试本身，而远程测试在控场方面有所不足。最后，现场测试对工具的要求更低，不论是制作测试原型，还是测试环境的搭建。然而现场测试也有它的局限性。由于时间、空间及成本的限制，现场测试方法只适用于少量、有限制的样本测试。比如研究人员在一线城市，现场测试可能只能招募本地的被试者，难以触达其他地域的用户。缺少三四线城市的用户分析，那么最后的研究结果很可能会产生偏差。这种情况下，低成本的远程测试会是一个很好的补充。决定采用现场测试还是远程测试，主要取决于以下两点：用户分布如果产品的目标用户在本地无法招募，如面向海外市场的产品；或者产品的用户分布在地域上比较分散，如覆盖全国一二三四线城市的产品，本地招募的被试者不具代表性，那么远程测试就很有必要。样本量现场测试适合做小样本测试，当需要大样本结果时，无主持的远程测试可能是更好的方案。2何时开始测试现场测试和远程测试的选择，还要考虑此次可用性测试处在产品研发的哪个流程阶段。下面就“何时开始测试”这个话题，简单说下我们的看法。大部分公司的研发流程，都可以大致归类为需求 ...继续阅读 (29)

文章索引3.10 无线打印（AirPrint）3.11 访问用户数据（Accessing User Data）3.12 快速查看（Quick Look）3.13 声音（Sound）3.13.1 理解用户期望（Understand User Expectations）3.13.2 定义应用的音频行为（Define the Audio Behavior of Your App）3.13.3 管理音频中断（Manage Audio Interruptions）3.13.4 适时处理媒体远程控制事件（Handle Media Remote Control Events, if Appropriate）3.14 VoiceOver3.15 路线选择（Routing）3.16 编辑菜单（Edit Menu）3.17 撤销与重做（Undo and Redo）3.18 键盘和输入页面（Keyboards and Input Views）3.10 无线打印（AirPrint）用户可以通过AirPrint无线打印应用中的内容，还可以使用打印中心应用检查打印任务。你可以使用内置的支持程序来打印图片和PDF文件，或者可以使用特定的打印程序接口来做自定义的格式设置和渲染设置。iOS会处理打印机的发现，任务的排序以及在指定打印机上执行打印任务。通常来讲，用户想要打印文件的时候，只需要点击应用中的标准动作按钮（ ...继续阅读 (28)

本篇主要讨论两个问题：移动情境在移动可用性测试中的考虑使用测试设备还是用户设备1 移动情境探讨在移动互联网时代，我们可以在任何时间、任何地点使用移动设备，情境相对更为复杂。这里我们定义的移动情境，即用户使用移动应用和产品时的环境和状态，广义来讲可以是任何影响用户与移动设备、应用进行交互的事物。诸如导致用户分心的内容、多任务并行的场景、操作时的手势、低电量的情况和网络连接环境等都是典型问题。移动情境具有复杂性、多样性、多变性等特征，因此研究员和相关学者也非常重视在移动可用性测试中对情境的考虑。Harrison et al.在建立新的移动可用性测试模型PACMAD时，就将情境因素引起的认知负担纳入了其中。 那么移动情境包含哪些内容呢？Nadav Savio创建了移动交互情境模型（如下图）。该模型阐述了影响用户在使用移动应用时的情境变量，可简单划分为三类。第一类可称为环境情境，包括用户所处的环境、文化规范及所正在进行的活动；第二类可称为任务情境，即用户的使用目标、注意力水平及多任务状态；第三类可称为设备情境，包括用户所使用的移动设备本身（设备参数、用户对设备的熟悉程度等）、网络连接情况和运营商。所有这些包围在用户和设备之间的交叉空间，即移动界面。第三类设备情境所涉及的“使用测试设备还是用户设备”的问题，在后面我们将单独讨论。本节讨论的移动情境指的是环境情境和任务情境。1.1评估移动情境对 ...继续阅读 (32)

今年6月，伴随着iOS 8在WWDC上的发布，苹果为开发者提供了一项迟到已久的新特性——App Previews（应用预览视频）。它能够让用户在下载和购买应用之前有一个详细的心理预期和使用体验，使得用户的购买更有针对性，同时也提高了应用的下载量。虽然预览视频早已在Google Play和Amazon Store这类安卓应用市场广泛使用，但对于饱受诟病的App Store来说，无疑又是一次精进优化。通过App Previews，开发商可以对自己的产品进行更加直观的介绍，使得应用预览视频会成为下一轮产品宣传推广的新爆点。而对于我们设计师，你必须花费比做截图更多的时间去制作和打磨你的预览视频，才能够使得你的App在同一分类中脱颖而出。从各个环节着手研究App Previews，能够有效地帮助我们提升预览视频的呈现效果。1.从苹果官方规范说起内容上，App Previews以短视频的方式展现应用的特性，功能以及UI界面。位置上，App Previews被作为产品的第一形象优先放置在功能截图之前，可在App Store产品页面直接点击观看。这从某种意义上使得App Previews的宣传作用和意义远远高于产品截图。而对于如此位置的App Previews，苹果官方自然给出了十分严苛和详细的设计流程，以下为相应的简要概述：1.1 开始1）提前准备详细的提纲和分镜。2）列出可能出现的场景，来分配 ...继续阅读 (26)

趣味角色在社区类产品设计中的应用引子身处在移动互联网产品铺天盖地的时代，如何让一款产品在用户心中的第一印象不同寻常，是每个设计师在创意过程中必须时刻思考的问题，产品如人，当用户遇到一款产品就如同邂逅一位陌生人，首次见面散发出什么样的气息决定了这场邂逅能够持续多久。通常一个散发着有趣气息的人会更受人们的欢迎，同理，如果一款产品的气质独特或是有趣，势必会第一时间给用户留下好印象。使产品的气质独特起来的方法和策略很多，本文重点讲述如何将趣味角色融入设计中，使的产品更具有亲和力和活力，随时散发出有趣的气息。从而达到让用户喜爱和关注的目的。背景介绍简单介绍一下微社区这款产品，微社区是基于微信公众账号的人气移动社区、是年轻人聚居的地方，在这里可以与关注同一微信公众帐号的用户直接交流，。我们看到微社区解决了同一微信公众账号下用户无法直接交流、互动的难题，把公众账号“一对多”的单向推送信息方式变成用户与用户、用户与平台之间的“多对多”沟通模式，双向交流给用户带来更好的互动体验，让互动更便捷、更畅快。下面是从设计实施过程中整理出的一些干货分享给大家。设计方法方法1 为产品设计一个生动有趣的形象创造一个生动有趣的形象伴随产品会让产品的气息生动起来，这样成功例子很多例如京东的“Joy”金属小狗、围住神经猫游戏里的神经猫等，本文不深究角色是应用到品牌还是只做为一个流行形象出现，只从方法上剖析什么样的角色会 ...继续阅读 (31)

Qzone 5.0作为QQ空间的年度巅峰力作，在视觉风格、UI 动画设计等层面做了大幅提升。为了让用户更加直观形象地感受产品的全新特征，我们特别定制了重量级的宣传大片儿。在设计风格的设定上，以当前最流行的 “Motion Graphic” 的形式，全方位凸显我们新版的酷炫范儿，可谓“动若脱兔，静若处子”，立体化震撼你的视听感官。那么，如此重量级的大片儿又是如何诞生的？设计师又是怎样披荆斩棘，攻克重重难关，为大家呈现饕餮盛宴的呢？接下来将为大家解读大片儿背后的设计奥秘。一、跳动的旋律在新版的设计中，我们不要沉重的色彩，不要多余的修饰，我们要让视觉效果看起来更加活力和清爽。在视频的开场，通过黑色与彩色之间的颜色碰撞，来表现新版“colorful” 的概念。急速迸发的彩色小球，正是对青春与活力的诠释，也希望通过此开场来震撼观众的视觉神经。与此同时，为表现魅力动人的“+号”动画样式，我们以3D图层翻转的方式，将其从内容之中进行抽离，如此一来，在突出主体内容的前提下，又不失画面的节奏感；紧接着，内容切换为三个主题词；最后，快速翻动的彩球包裹在Qzone5.0的主题之中。在这里，如何将简单的内容做到动感十足，在瞬间“变身”而又毫无违和感的呢？说到底是借助了“跳动的旋律”，就好比人们呼吸的节奏，以 “放-收-放-收”的节奏形式，所有内容就被无形串联起来。二、“主角儿”串场众所周知，在一部电影中 ...继续阅读 (37)

文章索引3.1 应用扩展（App Extensions）3.1.1 今天部件（Today Widgets）3.1.2 分享和动作扩展（Share and Action Extensions）3.1.3 图片编辑扩展（Photo Editing Extensions）3.1.4 文档提供者扩展（Document Provider Extensions）3.1.5 自定义输入法（Custom Keyboards）3.2 通知（Notifications）3.3 多任务处理（Multitasking）3.4 社交媒体（Social Media）3.5 iCloud3.6 电子卡包（Passbook）3.7 应用内购买服务（In-App Purchase）3.8 游戏中心（Game Center）3.9 iAd富媒体广告（iAd Rich Media Ads）3.1 应用扩展（App Extensions）应用扩展可以延伸应用的使用范围。当用户使用其他应用时，应用扩展使得用户仍能使用你应用的核心功能。举个例子，当人们在Safari中浏览网页时，他们可以使用你的分享扩展来发送一张图片或一篇文章到你的社交网站上。或者当使用照片应用时，人们可能会使用你的图片编辑扩展来为一张图片加上一个滤镜效果。（在这些场景中，Safari和照片应用承载用户使用扩展的场景，因而被称为宿主应用（host apps） ...继续阅读 (25)

前言信息可视化是一个跨学科领域，旨在研究大规模非数值型信息的视觉呈现。数据可视化 （Data Visualization） 和信息可视化 （Infographics） 是两个相近的专业领域名词。狭义上的数据可视化指的是讲数据用统计图表方式呈现，而信息图形（信息可视化）则是将非数字的信息进行可视化。前者用于传递信息，后者用于表现抽象或复杂的概念、技术和信息。然而，当下信息可视化的手段比较单一，人们使用比较多的是信息图表或动态图形短片来表现信息与信息之间的关系。从人类感官的维度去看，信息图或动态图形只是通过平面的视觉语言来传达信息（动态图像短片或有加上音乐，但主要获取信息的途径也是通过视觉）。随着科技和社会的发展、人类认知能力与审美的提高，人们已经不满足单单通过平面来获取信息。如何通过一些新颖有趣的方式去展示信息，是当下我们作为设计者需要思考的问题。本文通过一些案例来展示和分析如何通过新媒体艺术装置这一种新的媒介来对信息进行设计，从不同的感官维度来设计和传达信息。装置艺术在案例分析之前，先粗略地给小白用户介绍装置艺术的概念。装置艺术（Installation art）是一种兴起于1970年代的西方当代艺术类型，许多人追溯装置艺术的根源到较早期的如杜尚这些艺术家，他们使用现成的材料而非传统上要求手工技巧的雕塑来创作。由于装置艺术创造使用的材料非常丰富，其作品传达信息的维度也是非常广，在艺 ...继续阅读 (30)

rem这是个低调的css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。rem是什么？rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。为什么web app要使用rem？这里我特别强调web app，web page就不能使用rem吗，其实也当然可以，不过出于兼容性的考虑在web app下使用更加能突显这个单位的价值和能力，接下来我们来看看目前一些企业的web app是怎么做屏幕适配的。1、实现强大的屏幕适配布局：最近iphone6一下出了两款尺寸的手机，导致的移动端的屏幕种类更加的混乱，记得一两年前做web app有一种做法是以320宽度为标准去做适配，超过320的大小还是以320的规格去展示，这种实现方式以淘宝web app为代表作，但是近期手机淘宝首页进行了改版，采用了rem这个单位，首页以内依旧是和以前一样各种混乱，有定死宽度的页面，也有那种流式布局的页面。我们现在在切页面布 ...继续阅读 (26)

随着电商的快速发展，“双十一”的交易额年年攀升。不管你有没有购物需求，但是在各类新闻媒体、周边亲朋好友、各类电商促销消息等的轰炸下，在“双十一”来临前你可能早就辛勤地把自己的购物车塞满了。即使“双十一”之前没有准备，但到了当天在浓烈的“购物氛围”渲染下，你总会想想有啥好买，逛逛看有什么值得买，结果可能会买了很多本来没想过会买的东西。为什么消费者在“双十一”、“黑色星期五”等这种所谓的购物日更容易达成购买行为呢？我们可以从消费者行为学中“消费者购买决策模式”来寻找原因，并从中看哪个环节是可以通过运营设计技巧来影响用户购买行为的。问题一：消费者的购买决策过程是怎样的呢？“消费者购买决策的模式”有很多种，但最基本的规律还是如S-O-R模式所揭示的：消费者在内外部各种因素的刺激下，产生一系列心理决策活动，做出购买决策并实施购买行为。这个模式简单地揭示了用户产生购买行为的基础原理，但那么问题来了：有什么因素可以刺激消费者？消费者又主要有哪些心理活动呢？刺激因素可以理解为“能引起消费者购买需求或动机”的因素，结合学者的研究和自己的心得体会，将这些因素总结为以下几个方面：1、产品本身，如产品功能、性能、外观、质量等方面的吸引力；2、商家及其营销刺激，如商家品牌和信誉、价格折扣、促销活动的宣传等；3、消费者个人情况变化，如生病、步入结婚、生孩子等人生阶段等；4、社会文化氛围，如流行趋势、节日送礼、 ...继续阅读 (31)

智能可穿戴概念近两年来越发火热，到底有多少网民对此有认知，又真正有多少网民使用过？使用特征以及未来的发展前景如何？请见下面智能可穿戴调查白皮书。==============================欲了解更多智能可穿戴市场详情，请查看完整版报告，请点击http://qrobot.qq.com/report/wearable.html ...继续阅读 (26)

【序言】前段时间QQ空间的前端团队针对空间做了一番流量带宽优化，其中包括在空间装饰头图中应用WebP格式的图片。其实很早之前空间的相册就已经接入了WebP格式的图片，由于支持度还不是很高，所以其他产品线也一直没应用，这次实施也带动了其他产品的前端同学们重新对这一块领域进行优化。于是我们产生了制作一套完整的前端图片优化方案的想法，智图系统因此应运而生。先上两张图，对比一下WebP格式图片的压缩威力。【智图】（http://zhitu.tencent.com）所谓智图，我们将之称为Smart Image，智能图片优化平台，其实是智能转换图片格式的简称。这里可能有人会提出疑问，转换图片格式，不就是JPEG To PNG 或者 PNG To JPEG嘛。是的，但我们在压缩图片的时候，往往根据以往经验或感觉去压然后反复比较，在质量和体积间难以达到平衡，而有了智图，你不需要再犹豫，把图片交给智图，智图自动识别最优格式并压缩处理。其实我们知道图片都是有一定压缩空间的，并且一张图片合适的格式取决于图片的尺寸，色值，透明度等属性。智图就是根据一张图片的上述属性，进行对比判断，输出合适的图片格式并进行压缩的一个图片优化平台。使用智图，你可以：更优——为你的图片智能选择合适的图片格式更快——为你压缩图片以便节省带宽优化体验更高——为你提供WebP图片让你的站点高大上【功能】首先看下智图系统的界面从主界面 ...继续阅读 (34)

前言不管是 PC 还是移动端，图片一直是流量大头，以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求，如何保证在图片的精细度不降低的前提下缩小图片体积，成为了一个有价值且值得探索的事情。但如今对于 JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致， 若想改变现状开辟新局面，便要有釜底抽薪的胆量和气魄，而 Google 给了我们一个新选择：WebP。对 WebP 的研究缘起于手机 QQ 原创表情商城，由于表情包体积较大，在 2G/3G 的网络环境下加载较慢。同事小贝恰好因为 2013 Google I/O Event 了解到了 WebP，于是我们便一起开始了没羞没躁的技术预研，期待在原创表情图片的质量与体积之间寻找最美的平衡。今年 WebP 图片格式得到越来越多的关注，很多团队也开始布道，前阵子的前端圈“走进腾讯互娱前端技术专场”也有相关专题。借此热潮，在这里把上一年的探索过程以及今年 WebP 新的发展一同分享出来，同时也期待更多的人将其应用于实际业务中。什么是 WebP？WebP（发音 weppy，项目主页），是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45％ 的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还 ...继续阅读 (32)

视差滚动，这一技术最早出现是在Nike better World，之后这一网页技术在这些年频繁的出现在人们的视线当中，网络上关于视差滚动的教程和插件已经是多如牛毛， 不胜枚举。 比如：30个让人兴奋的视差滚动、10个关于视差滚动的插件和教程、35个运用视差滚动效果的网站设计等等…1)那到底什么是视差滚动呢？2)它的实现原理是什么呢？3)什么场景我们需要用到视差滚动呢？4)有什么工具能帮助我们快速实现视差滚动效果呢？带着这些疑问，我们来一探究竟吧！ 视差滚动是怎样一个概念呢？ 首先我们还是先来了解一下什么是视差，维基百科的解释是这样的：视差，就是从有一定距离的两个点上观察同一个目标所产生的方向差异。从目标看两个点之间的夹角，叫做这两个点的视差，两点之间的距离称作基线。只要知道视差角度和基线长度，就可以计算出目标和观测者之间的距离。视差可用观测者的两个不同位置之间的距离（基线）在天体处的张角来表示。 可以从图中看到，随着观测点从一测移至另一侧，路边的河水和花草让人感觉远处的大山出现缓慢移动。 既然理解了视差，我们可以进一步来看下面这张图：在图中，我们可以看到，虽然多个建筑只是在按照自己的速度进行轨迹运动，但是在视觉上却行成一种新的体验，在web设计中，通过运用多层背景在以不同速度运动的情况下，形成的一种立体的运动效果，这种视觉体验，我们称之为视差效果。 那么在Web上是如何 ...继续阅读 (33)

原研哉在他的《设计中的设计》中有介绍过这样一个案例：日本机场原来是用一个圆圈和一个方块表示出入的区别，形式简单并且好用，但设计师佐藤雅彦却用一个更“温暖”的方式来重新设计了出入境的印章：入境章是一架向左的飞机，出境章则是个向右的飞机。通过一次次的盖章，将这种“温暖”的情绪传递给每一位进关的旅行者们。在他们的视线与印章相交的那一刻，会将这种温暖转化为小小的惊喜，而不由自主且充满善意的『啊哈』一下。一千一万次的『啊哈』就会伴随着这一千一万次对旅行者的善意与好客。这便是产品中的细节与用户直接情感化传递的结果。一兰拉面是在日本非常受欢迎的拉面店，在顾客吃完面并把汤喝完会看下碗底有这样几个字“この一滴が 最高喜びです（你最后一口是对我们最大的肯定）”，他们用这种简单的细节打通了产品与顾客感情的传递，顾客在喝完最后一口面汤是对店主的肯定，并也因为对店主的肯定同时获得了店主的感谢。产品中的情感化的细节经常会成为产品与用户之间情感传递的桥梁，这种传递情感的细节不仅可以增加用户对产品的好感度，更可以让产品更加深入人心，利于产品口碑的传播，有时候可能仅仅一句文案，一个动画，一个彩蛋都可以打动用户，使其与产品产生情感上的共鸣，这便是产品细节中的情感化设计的作用。以下便是情感化设计在网页或者App上的实际运用：情感化设计可以加强用户对产品气质的定位Timehop是一款让你回顾那年今日的App，它可以帮你把 ...继续阅读 (27)

在研究响应式的时候，记录了一些感想，分享出来，抛砖引玉，希望可以和大家一起讨论。总结下来，响应式比之前想象的要复杂得多。1. ie9以下（不包括ie9）采用ie条件注释，为ie8以及一下单独开一个样式文件1 2 3[if lt IE 9]> ...继续阅读 (18)

入职四周年，送上干货，10步大幅提升网站可访问性。每一步都可以在20分钟内完成。这篇文章也可以在20分钟内看完。第一步，检查，不允许空，不允许过长，简洁明了。是第一个可以访问到内容的元素，所以一定要非常重视。当用户切换浏览器Tab标签的时候，一定最先听到标记的内容。Title一定要能代表当前页面的主题。这里的要求和SEO最佳实践几乎一致。第二步，提供文字替代方案。走查网页上所有的图片、iframe、object，检查这些元素是否填写了适当的alt属性或者title属性的值，看看这些值是否可以描述这些元素的内容或者目的；heading元素是否标记了内容，而不仅仅是图片或者背景图片。比如，下图可以标记为“腾讯ISUX公共帐号二维码”。第三步，检查表单。是否有label标签，这些label的for属性是否通过填写相应表单元素的id来彼此绑定；label的标签包裹的范围是否足够大，一致鼠标很容易的就能操作到；表单元素在被聚焦的时候是否有清晰的视觉反馈；提交和重置按钮以及图片按钮是否标记了文字或者在title中写明了该按钮的作用。强调一下，比如一个按钮的样式是一个放大镜，那么替代文字的内容一定不是“放大镜”，而是“搜索”。第四步，使用heading做信息架构。辅助技术，特别是读屏软件，一般都会提供一个快捷键h，按h按键，焦点即可在heading之间切换，从而提高浏览效率。减轻读屏软件用户了解 ...继续阅读 (32)

设计师：怎么我设计的动态表情，上线以后周围多了这么多白色的噪点！更多请查看这里前端：GIF本来就会有锯齿，跟我没关系呀。设计师：太丑了，你不是万能的前端么？这个问题我用ps解决都是分分钟的事情呀！前端： ……（you can you up） 其实，在很久很久以前…2004年，mozilla社区也意识到这个问题，所以当时他们提出了一种新的图片格式——APNG。APNG又叫动态PNG（Animated PNG），第1帧为标准PNG图像，剩余的动画和帧速等数据放在PNG扩展数据块里，因此只支持原版PNG的软件会正确显示第1帧。更多资料请查看http://zh.wikipedia.org/wiki/APNG。由于APNG是PNG的扩展，所以它支持半透明，自然就不会有锯齿的问题。设计师：能说人话么？前端：- -！ APNG比GIF牛逼多了，妈妈再也不用担心锯齿的问题了。设计师：那就赶紧用起呀！这时产品出现了…产品： 不会有锯齿，那是不是APNG会比GIF的体积大呀！前端：just try it…拿一组图片进行测试，会发现有些APNG比GIF要大，如下图：再通过大批量的图片对比可以发现，APNG平均会比GIF的体积大一点点（3%左右）。更多请查看这里产品：只是大一点点而已，那也很不错了呀！前端：却多嘛得，如果APNG可以比GIF还要小，这样用户体验不就更好了。先看看APNG的原理：— ...继续阅读 (40)

我们几乎每天都会接触形形色色的表单，登录账号、填写信息以获取服务、发布内容等。然而填写表单的过程往往不是特别愉悦的，我们需要消耗时间输入信息，点击提交，可能还需要等待审核；尤其是碰到较为复杂、流程长的表单，如果用户体验较差，很容易让人产生挫败感，在中途选择放弃。那么，如何提高用户填写表单的效率，防止他们出错或中途流失，提升愉悦度及转化率呢？本文就web表单设计，总结了以下的一些方法：有效的说服用户进行填写首先，告知用户为什么要填写表单，他能获得什么，让用户看到把信息给你的好处。举个例子，GitHub在其注册表单的右侧清晰的告诉你注册使用它会得到的帮助：除了告诉用户填完整个表单可以得到什么好处，你还可以更具体一点，告诉用户你让他填写某一项信息是出于怎样的考虑。有效的说服用户填写表单，还需要剔除负面干扰，获取他们的信任。大多数情况下，用户对于填写表单的最大顾虑是信息被网站收集之后的用途。用户不希望源源不断的收到垃圾推销邮件，更不希望自己的隐私信息被公之于众。此时，你可以通过引用一些具有影响力的权威人士的承诺，或者展示一些具有公共效应的证据，如媒体报道、用户案例等。你还可以做的更贴心一些，告诉用户填写表单预计需要花费的时间。合理组织信息对于较为复杂、填写项多的表单，如果不对信息进行组织，很容易显得繁杂混乱，让用户在一开始就产生抵触的情绪，甚至选择放弃。合理有层次的组织信息，可以利用框线、 ...继续阅读 (31)

一、前端游击战为哪般？小鹿乱撞，心花怒放。终于有机会在梦寐以求的团队博客的评论以外位置留下自己的痕迹啦，撒花撒花！淡定淡定，官博是严肃的地方，要是随便侃大山侃小山，拙文估计会被“里德尔”砍成袁姗姗。深吸一口气，闲话少说，放马入题。首先有必要先回答这个问题：“何为前端游击战？”所谓“前端游击战”是相对“前端常规战”而言的。一般而言，一个前端会负责一个（也有多个项目）的开发、上线以及后期维护，精雕细琢产品。所谓一个team, 一个团队，大致如此。比方说Qzone的前端er, 至少在一个很长的时期里面，都会泡在Qzone这个产品上，此为“常规战”，我想大部分的小伙伴都是这样子的，不只前端，设计师甚至后台开发也是如此。而“游击战”就大不一样了，打一枪，放一炮，点到为止然后基本上就放手拜拜啦！“我擦”，你可能会惊讶，“还有这样玩的，能做出高品质的产品吗？”无数的偶然可以造就生命，自然各种因素相互碰撞也会造就不一样的开发模式。腾讯社交用户体验设计的小伙伴们遍布祖国大江南北，为亿万网民设计优质体验、提升生活品质。自然，上海这边也有不少很Nice的小伙伴啦，都是国内顶尖的用研、交互与视觉。稍等…这里怎么有个另类——那个喝娃哈哈AD钙奶的，没错，就是你！古人云，相由心生，你这么黑，快说，你到底是干嘛的！我……我是做前端重构的……剧情正如你看到的，我们上海设计中心现在有个独苗前端。要知道，我们设计中心 ...继续阅读 (28)

随着Pad的普及，人们如何使用Pad、有哪几类典型用户成为值得深入研究的问题。针对这些问题，ISUX北京设计中心于近期开展了Pad用户基础调研，综合日记卡记录、观察法、深度访谈、问卷调查等多种研究方法对Pad的使用情况以及Pad用户类型进行了分析。 ...继续阅读 (23)

随着苹果ios8的发布，可以看到App store货架上，众多主流App迫不及待地向人们展示产品视频预览，接下去会是被设计师、市场宣传相继关注的焦点，产品宣传的下一轮引爆点。作为能在App store上先发触达地形成前期推广的视频预览，又会否影响到App安装完毕后的引导页呈现？我们不得而知。鉴于两者形式的展现，间隔于安装App前后，多少会规避重复性。不管怎样，趁着手机App和扁平风热潮，一起来细数归纳下对手机引导页的所见所想。 早期我们会见到比较多成熟的PC软件或者网页产品的产品安装包或新特性指引页。近几年在移动端平台上兴起了各种门类，形式精彩纷呈的引导页。功能决定属性引导页在视觉表现上呈现繁多，归纳起来可以从以下几个功能来分类：1 新特性新功能最常见的属这类，当一个产品持续稳定迭代，每推出一些新功能，便跟随版本包装发布。2 推广运营包含类似市场专题推广、情感化内容运营两类。前者多为电商投资收益等产品，后者类似内容的片段剪辑，比如轻博客Lofter，引导页随机呈现博客用户的心路历程；或是”食色”，一壶茶、一段心情志，感受人生五味，预览的同时还能加以喜爱分享。3 品牌展现整体铺开去展现产品的核心亮点和品牌思想，这一类应用产品基调偏功能长期稳定、内容维护居多，甚至内嵌视频打包品牌概念和软件界面功能展示。Yummly开屏传达给用户，这里可以浏览收集食谱和清单，温暖色调直击内心，尽情享受美 ...继续阅读 (45)

hi，穿上文化衫的鹅们，想知道今年文化衫的来源么？我们超萌的babyQ和ISUX美少女战士之间究竟发生了什么故事？快来看看漫画大揭密吧~QQfamily的babyQ、Qana搪胶及毛绒公仔已登陆爱马哥，欢迎带走！ ...继续阅读 (33)

达人访谈简介借“达人访谈”的机会有幸访问到了标叔，社招入职的同学应该都会经历这个活动，它要求入职一周内和另外一个随机的小伙伴一起访谈一个达人。这是一个非常好的活动，通过对达人的访谈，可以解决新人的一些疑问，了解公司的基本环境，快速融入团队。 由于工作原因，以前做过一些用户访谈，所以刚接到这个活动任务时心里并不慌张，知道在做访谈之前，需要做诸多准备工作。D1，确定访谈对象由于是刚入职，达人的确定对我们来说并不容易，考虑到时间限制，预约时可能会被拒，所以，需要另找2-3人作为备用。 寻找的途径有以下几种： 1，通过内部的同学介绍 2，通过内网资源寻找，比如热门文章作者等 3，通过自己以前的积累，入职以前自己就已经知道的大名鼎鼎的人 在接到这个任务时，我首先想到了标叔。关于标叔，不多说，在我模模糊糊认识交互设计时，这是他的一篇对我深有影响的文章《我的十年，交互之外的那些事》。D2，准备访谈脚本访谈当然是要做有准备的访谈，想问的问题最好是提前准备好，对访谈的场景做预想，把对可能出现的追问也做具体的构想，另外也包括暖场、自我介绍、收尾等过程，这些内容也最好提前先写下来，这会给你带来极大的自信，并不是说完全按照脚本来走，而是在你紧张的时候这些东西可以立即让你得到缓解。D3，预约直接贸然打电话是不太合适的。最好是先通过邮件或IM给访谈对象留言，告诉他你的情况，简短的做一下介绍，”达人”们一般都比 ...继续阅读 (22)

日常的运维工作中为了经营和宣传产品，会策划很多专题运营活动，而根据不同的宣传周期和不同的运营目的，可将活动从本质上进行分类，总体来说可归为两大类：传播主导型运营和营销主导型运营。从设计层面分类，就是品牌运营专题设计和活动运营专题设计。定义活动运营专题：较为常见，他们的统一特性是生命周期短，主要是为了拉动转化率而策划的即时性活动，基本网络上所见到的大促、节日、福利方面的运营专题都属于这一分类。优点：活动氛围强劲、视觉冲击力强、设计较为活泼、用色大胆鲜亮、设计元素夸张吸睛，适合to C用户群，能够有效的刺激购买，大量导量，促进购买转化率。缺点：a.元素繁多容易视觉疲惫     b.不适合长周期运营，时效性短由于活动类专题大家都已被电商扫盲了，所以就不重点说道了。品牌运营专题：在设计风格上相对更为简洁、大气、不罗嗦，设计元素对比活动类运营更沉稳、规范一些。然而由于品牌类运营与小类风格的企业官网相似而常常被混淆和忽略。但是品牌运营设计其实是不同于官网设计的，因为它承载的信息量和转化入口都比官网更有针对性，一般是对产品的某一性能或优势或政策方面进行详细剖析诠释。就如同一间商店，官网装载了这个品牌的所有系列和款式，而品牌运营只是针对其中特有的一个系列做专属的橱窗展示，指向性更明确。优点：元素更为国际化，清晰有条理，适合长周期的性能宣传，适合to B用户群，能带动品牌影响力；较适合当下越发主流的 ...继续阅读 (29)