切图小贴士

切图小贴士:

用户手中看到的产品界面，并非设计师呕心沥血创作的效果图，而是一个个单独的切图经由开发同学技术实现。切图作为设计师与开发者之间的桥梁，它的作用很关键，合适的切图、精准的位置可以最大限度的还原效果图的设计，精妙的切图更会有事半功倍的效果哦！



我们经常会做一个俗称“点九”的切图，什么是“点九”呢？“点九”是Android平台处理图片的一种特殊的形式，由于文件的扩展名为：“.9.png”，所以被称为“点九”。“点九”也是由于Android平台多种分辨率需适配的需求下，发展出来的一种独特的技术。它可以将图片横向和纵向随意进行拉伸，而保留像素精细度、渐变质感和圆角的原大小，实现多分辨率下的完美显示效果，同时减少不必要的图片资源，可谓切图利器。
“点九”的制作工具为“draw9patch”，具体制作步骤这里不多讲了，插播小贴士第一条：舍弃这个制作工具吧，减少繁琐的步骤，不要再每张图片都拖到工具里画啦！直接用ps＋铅笔就可以画哦。
“点九”的学问当然很大，但Android切图不仅需要清楚“点九”的方法，还有其他各种小技巧。下面为大家分享我在工作中总结的几个关于切图的心得。

(一)站在开发的角度来切图

了解技术实现方式，就像了解一位开发同学，更多的了解，会让工作更加顺畅。

如为下图按钮做“点九”图，一部分同学可能会这样做：


这是一张高度不变左右拉伸的“点九”图片，内容显示区域为整个按钮范围。按钮效果图上看，文字是垂直居中显示的，开发同学拿到这张“点九”图片，就会在代码里写上center的属性，此属性就是设定让文字在按钮的垂直居中位置。说到这，有没有察觉出问题呢？先让我们看一下实现出来的效果怎么样。


拥有像素眼的设计师们，立刻会察觉文字偏下了。然后找开发同学调整文字的位置，“把文字向上n个像素吧，没有居中”等等，这是很经常发生的对话，开发同学会增加代码微调文字的位置以达到效果图效果。事情圆满解决了吗？不然。其实是我们错了。
当我们了解开发同学实现方法后，我们可以试试用逆推法验证这张“点九”图片是否还有进一步精确的可能。


如上图，设计效果图中红色区域是文字排版区域，是理想化的位置，1和2的高度是相等的；而实现效果图中3和4的高度是相等的。问题出现了！在我们画点九的时候，把投影的高度也画进去了，所以视觉上文字就偏下了。
我们通常的画法应该是：

1. 在高度不拉伸的情况下，在空白区域点一像素的点。

这是与开发同学之间约定俗成的习惯，凭着默契就知道此按钮高度不进行拉伸，而且就是被拉伸了，拉伸的是空白区域，视觉上也不会造成影响。
对比如图所示：

2. 内容显示区域的高度要避开投影区域，这样可以保证文字视觉的居中。

“点九”图片的内容显示区域，我喜欢称为内容排版区域。在切图的过程中，还会发现不同的情景，要时刻想着你要的结果，通过对此区域的仔细处理，可以更好的为图片上所承载的内容做排版。这样开发同学只要通过一些简单的属性设定，就可以实现效果图上精确的布局。同时减少不必要的开发，精简代码，提高产品的性能，积少成多，带给用户更好的体验感受。

(二)选择更优的切图方式

当我们遇到异形或较为复杂的切图时，往往需要抛开固有的思维程式，去找到更适合的切图方式。举例如为下图浮层切图的时候，我们还可以用我们的利器“点九”么？


首先分析一下此浮层的几个特点：一是半透明渐变有厚度又有投影的效果；二是有三角异形，而且位置不固定。在切图的时候先走了一下小弯路，用固有思维把浮层分成了上下两个部分，下面方形做成“点九”，上面三角形单独一个切图，用拼接的方式去实现。这是符合开发同学的原子拆分设计模式的，把会变化的部分取出并封装起来，让其他部分不受到影响。所以开发同学很快做好了实现，但效果不尽人意。我们其实可以预想得到，因为有投影效果上下拼接一定有重叠，这样拼接处就会有一条明显的线。
那怎么办呢？经过设计师的进一步思考，终于找到了一种更适合的切图方式：


左右分割成两个“点九”图片，这样即能保证连接处的效果，又能灵活三角指向的位置。思考好如何切图的同时也要跟技术同学沟通能否实现，衡量实现的成本。最后值得高兴的是，实现出来的效果­跟设计效果图没有任何出入。

(三)尽可能的减小资源的大小

切图的时候尽可能减小资源的大小，为产品安装包瘦身。

1.“点九”图片拉伸1个像素与拉伸10个像素效果上是没有区别的，所以尽量缩小图片的尺寸。

(在上面的例子当中，为了保持看得清楚，没有缩小到最小情况，在实际工作中可以稍加注意。)

2.当我们遇到有纹理的背景或有纹理的按钮时，切图原则为：找到纹理的规律，用最小的切图去平铺，可以想象中图案叠加的原理。

第一种纹理背景，如输入法多媒体中随写输入的界面，不同的信纸，我们就用了尽可能最小的切图去平铺而实现的。如下图：


这是我们输入法中信纸的切图，遵循用最小切图的原则，按照不同纹理的规律调整到最小的切图，所以可以看出不同纹理的切图尺寸是不一样的。
第二种有纹理的按钮，我们一般会这样处理：


我们的目标是把按钮分成三段，保留左右圆角部分，找到中间纹理可复用平铺的部分，同事确保中间纹理可以与左右两张图无缝连接，这样按钮的长度就变成可控的了，可以适用于不同的场景。
首先找到纹理的规律，这里的斜线纹理只需切宽为3px的图即可；然后用纹理图片去尝试左右圆角部分，连接到圆角部分的纹理就成功咯。遇到其他类型纹理切图时，思路是可以复用的。

3.适当压缩图片质量，在单色或没有过多效果时可存储为png8位或索引模式。

这里就不做举例了。

小结

设计师在提供设计规范后愁苦实现效果不尽如人意的同时，可以尽可能的利用一些切图手段，帮助你的设计达到零差别的呈现，同时也帮助开发同学减少了很多不必要的开发负担，对于产品本身也有提高运行速度等很多不言而喻的好处。让设计师同学与我们亲爱的开发同学成为更贴心更默契的合作伙伴吧！
以上为工作中关于Android切图的一点小经验，如有错误或不足的地方请大家指正，同时欢迎大家分享更多的切图经验与技巧。






转载请注明出自”百度MUX”

翻越GFW-技术总结和指南

        为了迎接斯巴达，GFW进行了大规模的升级，原来经常使用的一些翻墙手段纷纷落马，被清除差不多了，比如OpenVPN、SSH等。向往自由是人类的天性，墙高了一尺，无奈我们也只有练就更高深的内力，才能自如地飞檐走壁。这篇文章是这段时间研究GFW的一些心得，同时在对最近新出现的一些翻墙方法和工具进行研究之后，也给出了怎么翻墙的一些对策和建议。

要想越过GFW，了解它是必要的。WIKI维护的词条“防火长城”是非常好的起点。

• 防火长城（英语：Great Firewall，常用简称：GFW或功夫网，中文也称中国国家防火墙[1]、长城防火墙或万里防火墙）是对中华人民共和国政府在其管辖互联网内部创建的多套网络审查系统（包括相关行政审查系统）的称呼。起步于1998年[2]。其英文名称得自于2002年5月17日Charles R. Smith所写的一篇关于中国网络审查的文章《The Great Firewall of China》[3]，取与Great Wall（长城）相谐的效果，简写为Great Firewall，缩写GFW[4]。随着使用的拓广，中文“墙”和英文“GFW”已被用于动词，“GFWed”及“被墙”均指被防火长城所屏蔽。

        如果你对网络技术缺乏了解，可能会难以理解WIKI对GFW的解释。简单的类比下，你可以把互联网想像成一个交通网络，在这个网络里，比较特殊的是每辆车都有一个GPS装置记录了每次上路的起点和终点。为了让这个交通网络顺畅，能让每辆车都到达想要的目的地，必须要对网络进行一些规则和限制，所以要在每个路口设置红绿灯。在互联网上，把这些红绿灯称为路由器。现在，你可以把GFW看成是在关键路口上设卡的一伙交通警察，它们偷偷的操控红绿灯，主要任务就是阻止你到达一些特定的地方。为此，它们所采取的方法有：

粗暴的阻断。就是直接在路上设卡，检查你的目的地，如果你这辆车要到达的地方在黑名单上，GFW会直接将车扣下。甚至对某些地方会直接封路，谁也不让过。这是比较简单的方法，包括IP地址封锁、IP地址特定端口封锁。早期GFW主要采用的这些技术，比较容易绕过。

• 巧妙的诱骗。在交通网络中，当我们想到达某个目的地时，需要一个路线来规划走哪些路？在哪转弯？就象GPS需要路径规则一个，在互联网上使用DNS、路由和BGP协议来共同完成这个任务。GFW从很早就开始干扰DNS（正式的名称叫DNS投毒污染），在你想访问黑名单上的网站时，GFW就伪装成你的GPS，告诉你一条根本无法到达的路线。早期的DNS干扰是在运营商的DNS服务器直接完成的，方式比较粗暴，可以通过简单的设定一个国外的正确DNS服务器绕过，这也是早期通过修改DNS和Hosts文件翻墙的由来。后期，GFW干扰DNS的方法取得了巨大进步，直接通过DNS协议投毒。想像一下，在你的车向GPS请求路线的时候，GFW直接叫住了给你送路线的邮差，将里面的正确路线替换成了一条永远到不了的绝路。在进步到DNS协议投毒后，修改DNS服务器的方法事实上已经失效了。好在在繁忙的互联网上，各种请求路线的DNS数量巨大，GFW并没有完全过滤，所以作为补充方法，在有些时候修改DNS还是有些用处的。要彻底排除GFW的DNS投毒干扰，还有待DNSSEC协议或是dnscrypt这样的工具的发展。DNSSEC是可以验证DNS查询数据可信的协议，dnscrypt是加密DNS通信的工具，都可以加密DNS查询。可惜的是现在支持DNSSEC和dnscrypt的DNS Server还不多，基本都是些试验性或开源的服务器，速度较慢。而且GFW已经开始对DNSSEC和dnscrypt进行试验性的干扰，所以这一方法还有待发展。
• 关键字阻断。在网络中，就象交通网络中运行数量和运载数量都最多的公共大巴一样，最常使用的就是HTTP协议。如果你以前在查询或是点击某些链接时突然出现了“服务器被重置”这样的错误，很可能你遇到的就是GFW的关键字阻断。就象交通网络中的设卡查车一样，GFW对道路中的所有大巴车（也就是HTTP协议）进行检查，如果里面有长得比较象通缉犯（也就是类似“江”、“youtube”、“刘晓波”这样的关键字）的人，就全部拦截下来。GFW从很早就对HTTP协议进行了关键字阻断，这些年间又经过了不小的发展，比如对google各种服务的定时干扰、增加对email电邮和eD2k电驴协议的审查等等。要知道，GFW的关键字阻断可是高精尖的技术，要从众多的流量里过滤并阻断这些关键字，需要大量的计算资源，GFW为此在骨干网和各省运营商的出口都部署了大量设备。不得不说，就是作为一个纳税人，个人都觉得太心痛了。为了绕过GFW的关键字阻断，广大翻墙者发展了不少有用的方法，常见的比如VPN、SSH等代理，其原理基本就是将大巴车（HTTP协议）伪装成私家车（VPN协议），从而避开GFW的检查和阻断。
• 协议封锁。这么多年来，GFW逐渐为人所熟悉，翻墙的人也越来越多。就象交通网络中伪装的私家车多了，交通警察就会查车一样。使用VPN的人多了之后，GFW近两年开始对VPN进行干扰，很多ISP已经封锁了PPTP VPN，象自由门、无界浏览之类的翻墙软件也被定点清除。由于个人翻墙者使用OpenVPN搭建VPN服务器比较多，最近的18大召开，GFW甚至发展到对OpenVPN进行定点清除，所以如今单独使用VPN翻墙也不是那么可靠了。
• 记录。相比检测、阻断和干扰等，最可怕的可能还是GFW的记录功能。 GFW对连接境外网络的起始时间、源地址、目的地址、端口和服务类型等进行了记录，有很大可能对VPN、SSH、HTTP、HTTPS、POP3、SMTP和IMAP也进行了相应记录。GFW近期发表的很多论文有很多数据融合、聚类和分类的内容，各种神经网络、概率模型、人工智能的应用了不少，至少从论文看，对记录的应用还在理论阶段。一旦在模型和应用方面有突破，这货留下来的记录有可能恢复任意人的浏览记录，简直都有点象“黑客帝国”里的天网了。

         GFW对境外网站的封锁，使得很多人的正常工作和生活被严重干扰，为此人们发展出了形形色色的翻墙技术。下面简单分析一下：

• 修改Hosts。因为对于添加到了Hosts中的主机，就不用再去DNS查询目的地址，所以这是对付DNS投毒的好办法。这一方法的问题是修改比较繁琐，使用上不方便。
• 修改DNS。在不使用其它代理技术的情况下，这个只能避开ISP的DNS干扰，对于GFW的DNS投毒无能为力。但与其它代理技术结合，修改DNS就是必要的了，使你能够查询到真正的目的地址。
• VPN、自由门、无界等其它代理方式。在你的电脑与VPN服务器之间建立一个隧道，从隧道通过VPN服务器再去浏览网络，VPN服务器在墙外时你已经翻过GFW的高墙了。之前这是比较靠谱的翻墙方法，可惜现在GFW已经对VPN特别是用OpenVPN实现的VPN隧道进行了定点清除，连接成功率大幅下降，而且即便连接成功也会被定时切断。市场上还有一些可以翻墙的路由器，其实大多是在底层绑定了VPN，也属于这一类。这些产品的使用简单，缺点就是移动不便，还有就是质量严重信赖供应商，选择靠谱的供应商非常重要。
• Goagent、西厢等HTTP代理方式。在OpenVPN被定点清除之后，HTTP代理方式反而成了比较靠谱的翻墙方式。因为建立隧道使用的是HTTP协议，隐藏在无穷无尽的HTTP浏览流量之中，GFW也很难识别。当然你的Goagent服务器必须可用，GAE已经被GFW定点清除，在GAE搭建的Goagent服务器并不稳定，最好是使用自建的服务器。
• ShadowSocks等Socks代理方式。比HTTP代理更难识别，Socks代理直接使用TCP建立隧道。只要你的ShadowSocks服务器没有被定点清除，这种翻墙方式是最难被发现的，也是最靠谱的。可惜ShadowSocks使用的是Socks代理，不是所有软件都支持，特别是iOS在不越狱时就不支持。

        除了以上所说的翻墙方法，还有一些辅助方法也是非常有用的，比如：

• PAC。PAC并不是用于翻墙，而是为了改善翻墙的体验。使用VPN、Socks等代理翻墙的时候，会感觉访问墙内的网站速度特别慢。这是因为所有流量都通过代理绕回来访问了，当然速度会慢。 设置好之后， PAC可以识别要访问的网站，如果在墙内就直接访问，如果在墙外再通过代理访问。这样显著改善了上网浏览的速度。
• obfsproxy。obfsproxy是著名的TOR项目组开发的开源软件，主要目的是将各种网络通信封装为一种混杂通信。obfsproxy可以混杂Goagent、ShadowSocks等其它代理技术一起使用，对经过这些代理的数据包进行加密，并且混杂一些无用信息，使得GFW难以侦测到有效流量，从而降低被屏蔽的可能性。

        GFW发展至今，已经建立了一套探测、封锁的方法体系， 翻墙的难度越来越高，这样的趋势大概会不断继续下去。不过，需要翻墙的人从不需担心，只要不是真正的物理断网，实际上总是能有方法的。

        翻墙时最关键的一点就是伪装。GFW不是封锁所有境外网站，只需将访问被封锁网站的流量隐藏在访问没有被封锁网站的流量中，就可以自如地翻越GFW，畅游无锁的互联网世界。Goagent、ShadowSocks由于使用私有协议，将翻墙流量隐藏到了几乎无穷无尽的http和tcp流量中，就是这类GFW很难封锁的代理的典型代表。而HTTPS、VPN、SPDY这类标准协议，GFW对流量进行统计学模型匹配，封锁的准确率是相当高的。但这类标准协议有一个好处是因为标准化，客户端的支持特别好，使用也很简便，所以有些时候也是必不可少的。在选择这类代理服务器时就应该选择相对小众的，流量较少的供应商，比较安全。

我目前使用的翻墙方法是：修改DNS+PAC+GAE Goagent，因为使用的是GAE的免费空间，所以是零成本。在我的电脑上，用GoAgentX作为代理客户端，结合SwitchySharp和PAC，几乎感觉不到GFW的存在。在我的手机上，则使用了Goagent iOS。此外，我维护了一个ShadowSocks server作为万一Goagent不能用时的备份，也是使用的国外免费空间。

GFW的封锁是多管齐下的，所以在翻墙时也不要指望能一种方法包打天下，结合使用不同方法，各施其责，就能轻松越过。GFW的封锁也不是一成不变的，所以也不要指望能够一劳永逸。

        为了自由的互联网，翻越GFW的战斗将是一个长期的过程，我们能够也应该在一起努力。

创业公司应该如何为设计工作制定预算

创业公司应该如何为设计工作制定预算:

设计的重要性自不待言，Path第二版就是靠着精良的设计瞬间抓住了不少用户的心。但是对创业公司来说，如何用最少的钱做最多的事才是王道。著名的科技问答类网站Stack Overflow就是通过众包类设计网站99Designs完成自己的logo设计的。Sacha Greif作为一名设计师和创业者，就创业公司如何为设计工作制定预算这一问题给出了自己的建议，详见：

先来看一个大致的分类：

1. 没钱：用免费的框架和UI吧亲
2. 0-100美元：可以试试预制主题和很赞的字体
3. 100-500美元：考虑下众包设计
4. 500-1000美元：众包设计或者雇佣一位自由设计师
5. 1000-10000美元：找一位优秀设计师
6. 10000+美元：专业设计机构

详情请继续往下。
没钱
首先设计这一块其实你是可以不花钱搞定很多事的。类似Bootstrap和Foundation这类网站可以为你提供一个非常不错的初始平台，而且能帮你搞定基本的字体和布局。

设计师之间也经常会共享UI元素作为赠品，有时候你甚至能找到一些已经编码好的UI。当然，由于是赠品，你需要特别注意UI的使用授权。我建议你在将其用于商业活动前先跟创作者联系，虽然我的经验表明设计师通常都非常高兴自己的工作能派上用场。

0-100美元
哪怕你只有不到100美元，设计上的选择也会多出许多。首先你可以考虑Themeforest或者Woothemes这类有着丰富的预制模版资源的网站，通常每个模版的售价也只有约50美元。

不要以为这些网站都只有一些WordPress的主题模版，Themeforest就有许多管理模版，非常适合Web App的皮肤设计工作。
如果你还要一个Logo呢？你不可能以低于100美元的价格弄到一个logo，但是这并不是说你就没其他办法了。如果一个纯文字的logo对你而言OK的话，你完全可以自己设计。Path就是典型的例子，选了一个很赞的字体（Coquette）做成一个不错的Logo。

类似MyFonts类的字体网站有着许多专业字体资源，你可以在上面预览自己设计的logo效果，通常一款字体的售价也差不多是50美元。
如果你想找一个图像logo，那么可以试试GraphicRiver这类有很多可以用作logo的图片资源的网站。虽然这些图片做成的logo你是没有专有权的，但是如果你只是想把这个logo放在登录首页的话，也没关系啦。

100-500美元
如果你还打算再多花点钱，那么可以考虑下类似99Designs的众包设计网站。
虽然作为一个设计师我个人是不喜欢这类投机性工作，也很反感设计工作的商业化，但是不得不承认的是，如果你只有不到500美元，99Design可能是你的最佳选择了。因为在这一预算下，你很难请到一个优秀设计师来帮你。但是有了99Designs，起码你有更多的选择，可以从中挑一个不那么坏的。

如果你不太确定自己想要什么样的效果，通过这类众包设计网站获得的诸多备选方案也是一个不错的资产。你可以从中挑出你最喜欢的类型，然后按照这个模子再去请一个更有经验的设计师来完成最终稿（这招可真狠…)。

当然99Designs也不是唯一的选择，BrandCrowd就可以为你提供许多预制的logo，很多都比99Designs有着更好的品质。顺便提一句，有些通过99Designs找到的设计师会将已有的艺术图片用作自己的作品，可得小心鉴别了。
500-1000美元
这一阶段其实是不太好选的。是该依旧采用众包的方式呢，还是直接雇一名自由设计师呢？
当然还是取决于你到底要搞定什么类型的设计工作：品牌、网页设计或者交互设计都不一样。虽然可以用不到1000美元搞定一个不错的logo，但是如果是要搞定全套的话这点预算就略显吃紧了。所以你可以试试杂糅的解决方式，比如用Bootstrap或者预制模版搞定网站，然后再去做一个定制版的logo。
话虽如此，但我的个人原则是设计上要么做的最好，要么花的最少，绝不容忍中间态。所以如果你预算不太够的话，最好不要过早跳到更高的设计阶段。
1000-10000美元
在这个价位你可以找到一个不错的自由设计师，类似的网站有Folyo。同99Designs众包式设计相比，专门雇佣一名设计师除了可以获得更有质量的产出，通常设计师还会在产品上更替你操心。因为从设计师身上能获得最宝贵的东西之一就是能以全新的视角去观察你的产品和生意，而要达到这一效果通常需要长期性的合作。


10000+美元
如果你已经拿到几轮融资了，而且手上现金充足的话，可以考虑去专业设计机构试试。相比起单个设计师，这些大型机构可以组织更多的人来解决你的问题，也许集合众人的智慧会给出更好的方案。
但是我个人没有多少同这类机构打交道的经验，所以也不好说他们的服务是否抵得上这个价。我只知道大部分我了解的创业公司都会直接去找独立设计师，而不是去找设计机构。
结论
就像上面说的那样，不花钱或者花一点钱也可以完成很多设计任务，如果你的预算稍微宽裕一点的话，也会有很多其他选择。创业公司通常会在中间阶段纠结：众包服务似乎是一个不错的选择，但是切记这条路是有一定风险的，有时候不如省点钱去请一个独立设计师。
via Folyo

除非注明，本站文章均为原创或编译，转载请注明： 文章来自36氪

交互技术：又一次革命的准备期

交互技术：又一次革命的准备期:

iPhone 5 出来的时候，有人说，苹果已经不酷了。
“如其运转，则已过时”(If it works, it’s obsolete —— 马歇尔.麦克卢汉)。说苹果已经不酷了的人们，大多厌恶平淡。
这两年来，在引起剧烈的市场震荡后，通过手指直接触摸屏幕来进行交互的移动设备已不再是让人感到新奇与惊艳的新玩意儿，它们已经被视作是日常的电子消费品。人们已经习惯于多点触控带来的便利。
因此，尽管新一代 iPhone 比前代 4S 还薄了18%，重量低至112克，但因其基于电容屏的多点触控的交互方式，事实上跟 iPhone  第一代相比并没有任何本质的变化，也就没有革命性可言；而随着智能手机、平板等触控设备的巨大成功，人们开始意识到目前技术条件已经成熟，除了使用键盘、鼠标来操作计算机以外，交互方式还有着无尽的可能。

交互的革新，才刚刚进入大爆发的阶段，消费者的胃口却已被苹果之前所创造的奇迹高高吊了起来。大家都对下一个交互革命翘首以盼，厂商稍有懈怠，便被视为不思进取，于是创新花样繁出。
目前看来，交互的创新，主要有两条不同的技术路线。一条是走非穿戴的手势、体感感知方向；另一条是走穿戴式的眼球、手指识别方向。作为辅助的，还有走语音识别的人工智能旁支。
尤为要注意的是，与以往纯粹的实验室玩具不同，上述两条主要路线，现在都有了较为成熟的商业产品。
在非穿戴的体感交互上，最著名的产品莫过于微软公司出品的 XBox360 输入设备 Kinect 。该设备采用光编码技术对一定区域内的景深进行编码，其原理如雷达一般，用激光扫射场景并摄下衍射效果，通过软件计算，得到较为精确的物体形态及运动轨迹。该产品的技术含量及交互体验，给消费者留下了很深刻的印象。
随着 Kinect 的成功，不少创新公司也投身该路线，尝试开发更精确、更实时或更便捷的体感识别设备。
例如， Leap Motion 的手势识别装置 Leap 据说能在 4 立方英尺的工作空间达到 1 / 100 毫米内的检测误差，在精确度上比 Kinect 提高了很多；而初创公司 Flutter 的技术则试图使用最普通的手机、笔记本摄像镜头，通过纯软件算法，来实现对动作的编码及识别，以达到输入的便捷性。
通过摄像进行姿态捕捉的交互，目前还有扫描延迟、精确度无法保证、设备通用性差等缺陷，但这些技术问题已经不是最大的障碍。手势、体感识别的最大优势在于能响应人的自然的形体状态，但问题也在于需要对输入进行定义及规范，因此，该路线产品在普及上的最大问题，可以说是教育市场。
在穿戴式的交互路线上，最吸引人眼球的产品莫过于 Google 公司即将推出的 Google Glass 。
对该款产品而言，吸引眼球甚至是字面意义上的。佩戴这种眼镜的用户需要通过眼球的特定转动来实开机、解锁，关机等关键操作；之后，通过眼镜上的细小屏幕，用户可以获得各种增强现实手段所带来的交互功能。
如果说 Kinect 极大的拓宽了人机交互在输入上的可能的话， Google Glass 则极大的拓展了计算输出的可能。用户可以获得一种随时随地的、浸没式的感受，因此其虽未面世，却已饱受关注。
但是，单就 Google Glass 而言，可能不能称之为可佩戴式交互技术的革命。因捕捉眼球并不能获得良好的输入效果， Google Glass 在本身设计上还是主要靠镜脚的小型触摸片来感应手势的操作，这毫无疑问会影响用户进行相对精确及快捷的输入。
故而，为了完善佩戴式的交互，谷歌公司还有另外的基于手套的输入专利，通过对手势的位移计算，即可得到精确的输入。从专利到产品还有一段不短的距离，事实上，更有别的软件公司也同样看好了可佩戴设备的未来。另一家知名的软件公司 Autodesk 就已开发出了佩戴在手指上的手势识别设备的原型；而微软公司的研究院里也同样有着相关的原型产品。
眼镜加指套，可以说是新一代的视窗加鼠标，更妙的是，它们被直接佩戴在人身上。人在移动中，只需要眼与手的结合，不依赖于对任何特定设备的持握与关注，也不需要身处预设的场景，就能获得信息。这种结合若能成功的实用化，毫无疑问又是革命性的。
而说到革命性，作为非视觉的语音识别技术，或许没有前面二条路线那么光明，但随着知识库的完善。各种语音输入产品的搜索辅助的能力也在迅速提高。
交互技术，或者说面向大众的民用计算机技术的发展，经过了波澜壮阔的三十多年，孕育出无数传奇的人物与企业，创造了巨大的财富。但尽管时光已不算短暂，风口浪尖上的人物也已经换了一代，这个行业却似乎仍在高歌猛进，一直保持着激烈竞争的状态。人们对交互的需求，是否是一个永远无法满足的存在？

自杀的房间（波兰女诗人辛波丝卡诗选031）

自杀的房间（波兰女诗人辛波丝卡诗选031）:
译者 介末花花
自杀的房间

我打赌你一定认为这个房间是空的。

错。里面有三把带靠背的椅子。

一盏灯，可用来驱逐黑暗。

一张桌子，桌上有一个钱夹，几张报纸。

一尊笑口常开的佛像，一尊满怀忧虑的基督。

七个可带来好运的大象，抽屉里还有个笔记本。

你觉得里边会不会记着我们的地址？



你猜这里没有书，没有画，也没有唱片？

错。一支会令人心慰的小号悬在一双黑色的手上。

伦勃朗画的萨士基亚持着一朵热诚的小花。

众神们相聚的欢乐。

翻开在书架上的奥德修斯经过了第五卷的劳累

正在为恢复精力而安睡。

那些道德家们

金光闪闪的名字

刻印在精致的皮面书脊上。

紧挨着他们的，是在后面撑着的政治家们。



没有出路了么？那房门是干什么的？

没有前景了么？透过窗子也可以看到别的景象啊。

他的望远镜

放在窗台上。

却有一只苍蝇在嗡嗡嗡——那东西仍然活着，还会活下去。



你觉得那留下的信笺至少能告诉我们些什么吧。

但是如果我告诉你并没有留下信笺——

他有这么多的朋友，而我们所有人刚好能塞进

紧靠在杯子旁的那个空空的信封里面。

Web设计的8个趋势

Web设计的8个趋势:
本文译自网站设计公司weavora.com，介绍了在他们眼里8个Web设计趋势：单页面、用照片做背景、色块设计、超大号的图片、聚焦简洁、响应式设计、视差滚动、强调字体，每个趋势后面都附了数个案例，相信对网站设计师会有一定的参考价值。

单页面

单个长页面的设计一度不受人待见（无论是客户还是设计师），但现在整个互联网随处可见。一个合理的解释是，用户现在早已习惯于使用鼠标滚轮了，比起在多个页面间来回查看，用滚轮上下浏览要省事得多。
包括苹果在内的一些知名大公司也使用了相当长的页面来展示产品，获得了很不错的效果。

更多例子：

• http://www.apple.com/iphone/features/
• http://www.visualboxsite.com/
• http://www.versapay.com/
• http://www.fitbit.com/
• http://cageapp.com/
• http://www.squarespace.com/

用照片做背景

出于品牌或展示的目的，把照片用作网站的背景，这样可以形成强烈的视觉表达效果。这也是为何你能在时尚、服装品牌、旅游业等等行业看到这样的设计办法。

更多例子：

• http://www.biamar.com
• http://alexarts.ru/en/index.html
• http://www.davidia-int.hr/

色块设计

这一设计方法主要是引入了方块的网格设计，这些方块要么是纯色块配上文字，要么是方形照片配上文字。“简洁”是吸引用户的一大原因。不同的色块放在一起形成强烈的对比，容易引起用户的视觉兴趣，进而继续探索下去。

更多例子：

• http://dynamit.us/
• http://lithium.com/
• http://landor.com/
• http://www.pepsi.com/

超大号的图片

这一潮流的兴起多少与Mac OS X 图标设计的流行有关。当程序员为自己的Mac 程序推出网站时，这样配有超大号图片、突出品牌的设计再常见不过。自然地，这一潮流后来也被iOS 开发者继承了下来，成为现代设计文化的一部分。

更多例子：

• http://www.zennaware.com/cornerstone/index.php
• http://panic.com/
• http://versionsapp.com/
• http://www.piictu.com/
• http://www.enstore.com/

聚焦简洁

对简洁的追求贯穿了整个2012年，许多的网站开始寻求明快、直观的设计。极简设计旨在通过整合或是删除多余的页面实现简化，只给用户需要的东西。极简设计通常会用到大号的加粗字体、以及超大号的图片，清晰地把重要的东西传达出来。

更多例子：

• http://basecamp.com/
• https://www.dropbox.com/
• http://www.checkoutapp.com/
• http://www.htc.com/

响应式设计

随着手机和平板设备越来越多地进入人们的生活，响应式设计也成为了当下网站开发不可忽视的一股力量。一个可自适应任何设备的网页是很了不起的。响应式设计能确保用户无论是在移动设备还是在PC上都能按你的意愿浏览内容。

更多例子：

• http://www.nealite.fr/
• http://twitter.github.com/bootstrap/
• http://www.fork-cms.com/
• http://www.floridahospital.com/

视差滚动

所谓“视差滚动 (Parallax Scrolling)”就是让多层背景以不同的速度移动，形成运动视差 3D 效果。随着越来越多的浏览器增加对视差的支持，这一技术也很有可能会更加流行。

更多例子：

• http://benthebodyguard.com/index.php
• http://www.tokiolab.it/#/
• http://chartbeat.com/
• http://inze.it/
• http://titanic.q-music.be/
• http://www.noleath.com/noleath/

强调字体

从前，设计师所能使用的字体受用户电脑本地已有的字体所限。现在，借助Google fonts 和Typekit 等服务，从理论上说，你能使用的字体是无限多的，极大增强了网站设计的吸引力。设计师利用这一机会也已有了一段时间了，越来越多的网站也体现了对字体的重视。甚至有些网站如Typographica，字体就占了整个网站设计的绝大部分，出来的效果也相当不错。

更多例子：

• http://nicehair.org/
• http://bitfoundry.ca/
• http://daneden.me/type/

相信以上的这些设计方法会流行相当长的一段时间，当然，你也可以发挥创造力，有机地组合它们，做出优秀的网站。

性格外向的人真的是更好的领导者吗？一个性格内向的人可以成为一个好的领导者吗？

性格外向的人真的是更好的领导者吗？一个性格内向的人可以成为一个好的领导者吗？:
译者 流年y

Why Introverts Can’t Be Leaders?

为什么性格内向的人不能当领导者？

（注：由于作者开篇就提出标题隐含有修辞学问题，因此这里个人觉得理解为《凭什么说性格内向的人不能当领导？》

Are extraverts really better leaders? Can an introvert be a good leader?

性格外向的人真的是更好的领导者吗？一个性格内向的人可以成为一个好的领导者吗？

Published on October 27, 2012 by Ronald E. Riggio, Ph.D. in Cutting-Edge Leadership

于2012年10月27日由上 Ronald E. Riggio博士发表在尖端的领导上。

hope you realize the title is a rhetorical question.

希望你能认识到这个标题是一个反问句。

Research has shown a consistent positive relationship between extraversion and leadership. In groups of strangers, such as a jury, extraversion predicts who will be selected foreperson of the jury (it’s actually likely to be the person who talks the most, and that person is probably an extravert). So, extraverts are more likely to be chosen for leadership positions (what we call leader ‘emergence’).

研究表明外向性和领导能力之间是一种一致的，积极的关系。在陌生的团体中，例如一个陪审团，外向性预测谁将会被选为陪审团的团长（事实上可能是说话最多的那个人，而这个人可能是个效果外向的人）。所以，性格外向的人更可能被选上领导者职位（我们称之为“领袖”的崛起）。

There is also a positive relationship (although a weaker one) between extraversion and leader effectiveness, particularly rated effectiveness of leaders. So it appears that extraverts have an edge, but does this mean that introverts can’t be good leaders? Of course not!

 在外向性和领导效率（尤其是对领导效力的评估）之间还有一个积极的关系（尽管较为微弱）。如此看来，性格外向的人有优势，但是否意味着性格内向的人就不能成为好的领导者？当然不！

Many successful leaders are introverted, for example Abraham Lincoln, Gandhi, and in business, Bill Gates and Warren Buffett. One of the best company presidents that I’ve known was easily the most introverted person among his executive team, but he was very successful and his colleagues admired his “quiet reserve and confidence.” So what is the critical factor that both extraverts and introverts need to emerge as a leader and to be effective?

许多成功的领导者性格内向，例如 Abraham Lincoln, Gandhi和商业领域的Bill Gates and Warren Buffett。我所知道的一个最好的公司总裁在他的经营团队中无疑是最内向的那个人，但是他很成功，并且他的同事很钦佩他“无声地储备和自信”。因此，性格外向的人和内向的人作为一个领导者需要表现的有效的关键因素是什么？

Our research has suggested that the key element is good interpersonal, or social, skills. In one study, we looked at the relationship of extraversion to leadership emergence and effectiveness and found that the advantage that extraverts had disappeared when we put social skills into the equation (social skills mediated the relationship between extraversion and leadership). In other words, only extraverts who possessed social skills were effective leaders. Good interpersonal skills are critical whether the leader is an extravert or an introvert.

我们的研究表明关键因素是良好的人际关系，或社交关系、技巧。在一项研究中，我们观察到领导能力的外向性的浮现和效力之间的关系，并且发现当我们把社交技巧放入方程式中时（社交技巧在外向性和领导能力之间的关系中起媒介作用）， 性格外向的人的优势已经消失了。换句话说，只有拥有社交技巧的性格外向的人是有效地领导者。无论领导者的性格是外向或内向，良好的人际交往能力都是至关重要的。

In addition, we know that we are more likely to choose leaders who look like their prototypes of leaders – they speak well, interact well with others, and just look “leader-like.” Extraverts just naturally look more like a prototypical leader (particularly political leaders) than do introverts. [Think of the U.S. presidential campaign where presidential hopefuls were evaluated for how much each looked like he or she could be the Commander-in-Chief].

另外，我们知道，我们最有可能选择的领导者是具有领导者雏形的人——他们善于讲话，善于与别人交往，而且看起来很有领导人像。性格外向的人天生看起来就比内向的人更像一个典型的领袖（尤其是政治领袖)。【想起美国的总统竞选，那些总统候选人被评估的依据是他们与理想领导者的相似度】。

The key to leadership success then is to develop the people skills needed to look like a leader, but to also develop the good leader-follower relationships that are necessary for success. If you possess these skills, introversion and extraversion don’t matter very much.

领导成功的关键是去发展看起来像一个领导者所需要的个人的技能，但是也要发展成功所必须的良好的主从关系。如果你拥有这些技能，那么内向性和外向性都不再重要。

與別不同的煙花拍攝 - 曝光中的手動對焦

與別不同的煙花拍攝 - 曝光中的手動對焦:
拍了多年煙花發覺變化不大？讓我們看看攝影師 David Johnson 利用曝光時中途變換焦點的技巧來拍出抽象、與眾不同的煙花相片！拍攝技巧不複雜，只要設定為長曝，拍攝時變換焦點便可以了！
除了變換焦點，我們也可以變換焦距來拍攝，也會有另一種效果呢！

伸延閱讀：

1. 煙花攝影入門技巧
2. 曝光變焦拍攝法

(Image credit: David Johnson)

Kano模型在用户调研中的应用 ———客户关系管理工具调研实例

Kano模型在用户调研中的应用 ———客户关系管理工具调研实例:
1、Kano模型简介

1.1 Kano模型起源：满意度的二维模式
著名市场营销学大师、美国西北大学教授菲利普•科特勒说过：满意是指一个人通过对一个产品的可感知的效果与他的期望值相比较后，所形成的愉悦或失望的感觉状态。在竞争日益激烈的当下，用户的满意度直接影响着用户对于企业/产品的忠诚度，进而影响用户的粘性和流失。正因如此，每个公司/产品，都想了解自己客户的满意度状况，从而制定后续的策略和规划。
在传统的观念里，会认为满意的反面就是不满意。然而赫兹伯格（1974）在研究员工满意度时提出了双因素理论（也被称作激励-保健理论），如图1所示，他认为满意与不满意并不是存共同存在一个单一的连续体，而是分开的。即满意和不满意不是二选一的关系，满意的反面是没有满意，而不满意的反面是没有不满意。所以令人满意的因素即使被去除，并不一定会导致员工的不满意。同样的，让人感到不满的因素被去掉，也不一定会导致员工满意。

图1赫兹伯格激励-保健理论图示

1.2 Kano模型的二维属性模式

日本教授狩野纪昭(Noriaki Kano)将赫兹伯格的理论引入到产品质量管理中来。在1984年首度提出了Kano模型，如图2所示：横坐标表示某项要素的具备程度，越向右边表示该品质要素的具备程度越高，越向左边，具备程度越低。纵坐标表示顾客或使用者的满意程度，越向上，越满意，越向下，越不满意。利用坐标的相对关系，可以分为五类属性。

图2 Kano二维属性模型示意图

魅力属性：用户意想不到的，如果不提供此需求，用户满意度不会降低，但当提供此需求，用户满意度会有很大提升；

期望属性：当提供此需求，用户满意度会提升，当不提供此需求，用户满意度会降低；

必备属性：当优化此需求，用户满意度不会提升，当不提供此需求，用户满意度会大幅降低；

无差异因素：无论提供或不提供此需求，用户满意度都不会有改变，用户根本不在意；

反向属性：用户根本都没有此需求，提供后用户满意度反而会下降；
Q2淘宝网UED用研一组在卖家客户关系管理工具的研究项目中，便运用了Kano模型，辅助业务方对后续工作进行决策判断。下文将通过这个实际应用案例，和大家分享一下Kano模型的整个操作流程，包括需求沟通、问卷编制、数据收集&清洗分析、结果产出和模型应用时的思考与讨论。
2、需求沟通——为什么会用Kano模型
为了适应淘宝卖家日益增长的管理客户的需求，淘宝官方客户关系管理工具需要引入一些新功能。业务方希望知晓在众多用户需要的功能中，哪些是基本功能，哪些是增值功能，功能的优先级又是如何分布排列的。从而可以在进行功能开发优先级排期的同时，结合实际业务情况，考虑哪些功能应该由淘宝官方做，哪些更适合与第三方合作完成。
Kano模型很好地贴和了业务的需求，从具备程度和满意程度这两个维度出发，将客户关系管理工具中的功能进行细致有效的区分和排序，帮助我们了解：哪些功能是一定要有，否则会直接影响用户体验的（必备属性、期望属性）；哪些功能是没有时不会造成负向影响，拥有时会给用户带来惊喜的（魅力属性）；哪些功能是可有可无，具备与否对用户都不会有太多影响的（无差异因素）。
由此决定利用Kano模型，对于客户关系管理工具的功能属性归属进行讨论。接下来将对于Kano模型的问题设置和分析方法的具体操作进行阐述。
3、Kano模型问卷编制——-正、反两面的Kano问题模式
Kano模型设置题目时，对于每一个想要探测的问题，均需要了解以下两个方面：用户对于工具具备该功能时的评价（态度）和工具不具备该功能时的评价（态度）。
例如，在探讨客户关系管理工具“信息管理-购买行为信息”这一功能点时，会分别正向和反向地询问用户对客户关系管理工具是否具备该功能的评价，题目设置如下图：

图3 Kano模型题目设置举例

为了保证用户对问卷中各功能点准确理解，从而保证数据回收质量，我们进行了两个工作。1）对于每个功能点进行举例说明。如图3所示，对于“客户信息管理-购买行为信息”这一功能点，进行举例“如不同类目下面的历史购买商品”，方便用户清晰、生动地了解此功能内容和使用场景；2）预访谈3名卖家，请卖家做完问卷后提出自己疑惑的地方，检验功能点的阐述是否可以被卖家理解，对于卖家不能清晰理解的部分加以讨论和完善补充。
另外，由于每个用户对于“我很喜欢”“理所当然”“无所谓”“勉强接受”“我很不喜欢”的理解不尽相同，因此需要在问卷填写前给出统一解释说明，让用户有一个相对一致的标准，方便填答。本次在调研中给出的说明见下图：

图4 问卷填答说明

4数据收集&清洗分析

4.1数据收集
调研样本为3-4月有成交的卖家，通过EDM进行问卷投放，共回收5906份数据。
4.2数据清洗
除了严格的清洗程序，Kano问卷中，清楚了全部选择“我很喜欢”和全部选择“我很不喜欢”的数据。经过清洗，得到有效数据4395份。
4.3数据分析

对于Kano模型部分，重点针对于近一个月发单量大于20单的139名用户进行分析。分析方法主要为“Kano二维属性归类”和“better-worse系数分析”。

4.3.1 Kano二维属性归属分类

图5 Kano二维属性分类模板

分类标准如图5所示，若具备这一功能时感觉“很喜欢”，不具备时感受不强烈（“理所当然”/“无所谓”/“勉强接受”），说明这一选项属于锦上添花的“魅力属性”;
若具备时感受不强烈（“理所当然”/“无所谓”/“勉强接受”），但不具备时感受到“很不喜欢”，则属于一定需要的“必备属性”；
若具备时“很喜欢”，不具备时“很不喜欢”，可以称之为“期望属性”，呈一元线性模式；
无论具备还是不具备，感受都不强烈（“理所当然”/“无所谓”/“勉强接受”）的，便是中间部分的“无差异因素”；
若具备时感受偏不满意（“理所当然”/“无所谓”/“勉强接受”/“很不喜欢”），而不具备时感受偏满意（“很喜欢”/“理所当然”/“无所谓”/“勉强接受”），则说明这一因素的存在和用户的满意度呈反向关系，称做“反向结果”。
除了以上因素外，倘若出现功能具备和不具备情况下，用户都表示“很喜欢”，或者具备和不具备情况下均表示“很不喜欢”，这种矛盾的现象，我们把它叫做“可疑结果”。
图5中不难看出，每一个功能在6个维度上（魅力属性、期望属性、必备属性、无差异因素、反向属性、可疑结果）上均可能有得分，将相同维度的比例相加后，可得到各个属性维度的占比总和，总和最大的一个属性维度，便是该功能的属性归属。

图6 功能属性结果举例

如上图所示，在对“信息管理-购买行为信息”这一功能进行统计整理时，发现魅力属性的占比总数最高。进而得到，客户关系管理工具中，“信息管理-购买行为信息”功能属于魅力属性。即没有这个功能，卖家不会有强烈负性情绪，但是有了这个功能，会让卖家感受到满意和惊喜。
4.3.2 Better-worse系数分析

除了对于Kano属性归属的探讨，还可以通过对于功能属性归类的百分比，计算出Better-Worse系数，表示某功能可以增加满意或者消除很不喜欢的影响程度。
Better，可以被解读为增加后的满意系数。better的数值通常为正，代表如果提供某种功能属性的话，用户满意度会提升；正值越大，代表用户满意度提升的影响效果越强，上升的也就更快。
Worse，则可以被叫做消除后的不满意系数。其数值通常为负，代表如果不提供某种功能属性的话，用户的满意度会降低；值越负向，代表满意度降低的影响效果越强，下降的越快。
Berger（1993)提出的指标计算公式如下：

增加后的满意系数（better）： （魅力属性+期望属性）/(魅力属性+期望属性+必备属性+无差异因素）

消除后的不满意系数（worse）： (期望属性+必备属性）/(魅力属性+期望属性+必备属性+无差异因素）×（-1）。
如将功能“信息管理-购买行为信息”的数据带入后，得到Better-Worse系数如下：

Better=（.367+.288)/(.367+.288+.029+.216)=0.73

Worse=(.288_.029)/(.367+.288+.029+.216)×（-1）=-0.35
5、Kano模型结果概览

图7 Kano属性结果 ＊:表示大于增加滿意指标及小于消除不满意指标之平均數

图7中反映的是日发20单以上的139名卖家的选择分布情况。由于部分结果还在应用初期，各功能细节点暂时隐藏，如有兴趣，欢迎私下讨论交流。
Kano属性归属是我们关注的首要指标，可以从图7中看出，客户关系管理工具的17个功能点中，大多数为魅力因素，而本次调研中并没有发现必备因素。关于这一点，会在后续讨论中和大家继续交流。
当关注better-worse系数这一衡量指标时，不难发现，“忠诚度-C2”、“忠诚度-C3”、“信息传达-F1”、“信息传达-F4”都是better、worse值均很高（大于平均数）的要素。客户关系管理工具要加强这些功能，不仅会消除客户的不满意，还会提升客户的满意水平。
6、模型应用的思考与讨论

6.1 Kano属性的优先级排序：
辅助业务进行优先级排序，是Kano模型的一大功能特点。业务方在排序功能优先级时，可主要参考：必备属性>期望属性>魅力属性>无差异因素的基本顺序进行排序。结合本次调研结果，给出可与业务结合的建议如下：

 期望属性的功能点对于工具的意义重大，建议优先考虑开发或强化；

 魅力属性的功能点，建议优先考虑better值较高的功能，会达到事半功倍的效果；

 无差异因素可以成为节约成本的机会；
6.2如何看待结果中的Kano属性
案例中多数功能属于魅力属性，可以看出卖家对于客户关系管理工具中，对于推出/待推出功能的积极态度。笔者认为，对于客户关系管理工具，魅力属性十分值得重视。从业务本身来看，客户关系管理虽未直接影响卖家进销存主流程，但若管理得好，会为卖家带来极大的利益点。由此，也可以将客户关系管理工具认为是魅力型工具。对于魅力型工具而言，能让卖家感到惊喜、满意的魅力属性，更有可能成为工具的闪光点。因此，对于魅力属性，尤其是better系数高的魅力属性，是值得引起重视的。
本次调研结果没有发现必备属性，笔者认为，这一结果与客户关系管理的市场现状是密切相关的。目前，卖家进行客户关系管理的意识还在成长阶段（2012年4月调研结果显示，对于日发20单以上的活跃卖家，仅有18.7%的卖家已经在进行客户关系管理，多处于有意愿进行管理但还未执行或准备执行的状态），同时，本次调研涉及的部分功能点还未面世，具体情景和效用未能得到真实体验。所以在这个阶段，卖家对于客户关系管理工具中这些（新）功能的缺失，没有体验到强烈的负性情绪，也不会存在大幅度满意度的下降。
需要注意的一点是，Kano属性的划分并非一成不变的，随着时间的变化，卖家对于客户关系管理的概念会日益成熟，各功能的属性归属很有可能会发生变化。如对于早期的电视机，遥控器也许是魅力属性（电视机上的按钮可能已经足够解决问题了），而放在当代，遥控器则应该是人人需要的必备属性了。
6.3应用Kano模型进行调研的优势和不足
结合过往的资料和自己的心得，笔者认为在调研中，Kano模型有以下几个优势：

1）Kano模型可以细致全面的挖掘功能的特质；

2）Kano模型可以帮助业务方在工作中排优先级，辅助项目排期；

3）Kano模型可以帮助人们摆脱“误以为‘没有抱怨’等于用户满意”的想法。

同样，Kano模型也有它的不足：

1）Kano问卷通常较长，而且从正反两面询问，可能会导致用户感觉重复，并引

起情绪上的波动，若用户受到影响没有认真作答，则会引起数据质量的下降。

2）Kano问卷是针对产品属性进行测试时，部分属性也许并不是很好理解。

3）Kano模型类似于一种定性归类的方法，以频数来判断每个测试属性的归类，

这种情况下，可能会出属性归类结果表中，同一属性出现了不同归类栏频数相等或

近似的情况。
由于KANO 模型存在这些不足，在运用KANO模型分析数据的时候就要注重数据收集前期的准备工作，比如在问卷设计时，把问卷尽量设计得清晰易懂、语言尽量简单具体，避免语意产生歧义。同时，可以在在问卷中加入简短且明显的提示或说明。方便用户顺利填答。
7、小结
本次利用Kano模型进行的调研，属于对于工具功能进行的优先性探测。在这里，小结一下应用Kano模型的操作流程，也结合切身体验和大家分享下，笔者认为在应用Kano模型时各阶段需要注意的事项。

图8 Kano模型操作流程和注意事项

1、需求沟通阶段。与所有调研一样的，和业务方沟通项目时，需要明确调研目的，而后反问自己，本次调研是否适合利用Kano模型去解决，利用Kano模型做调研的意义和好处在哪里？如经过分析发现Kano模型很好地贴近业务需求，并且预计可以真正解决业务问题时，用它。同时，需求沟通阶段尽可能深入了解业务，比如在本次调研中，需要熟悉工具各功能点的应用场景，保证自己做到全面清楚了解，才能在后续问卷编制时做到清晰传达。
2、问卷编制阶段。对于Kano问卷，由于涉及到重复正反式的询问，可能会导致用户的疲惫、厌倦情绪。所以要在方便用户了解上做足功夫。比如1）在用户填答问卷前加入说明，保证用户理解选项标准；2）对于具体的功能/服务点加入典型例子说明，让用户可以生动地了解功能点的作用；3）问卷措辞简单具体，避免语意歧义。
3、数据收集&分析阶段。为了保证数据质量，可以酌情剔除明显乱答的数据，如本次数据中，剔除了全部选择第一个选项“我很喜欢”和全部选择最后一个选项“我很不喜欢”的数据。
4、结果产出阶段。这个阶段需要注意对于结果的解读和解释。在本次调研中，结合调研目的，主要关注了Kano模型属性归属这一指标，结合better-worse系数进行结果的丰富性解读。大家可根据具体调研项目的目的进行选择性重点解读。
5、模型应用阶段。这个阶段，是一个需要和业务方充分沟通和碰撞的阶段。我们拿到了Kano模型的结果，清楚了功能点的属性归属、better-worse系数等丰富信息。但如果不能和业务做有效结合，那么这份结果也只能停留在一个“参考分类”的层面。若希望它真正发挥作用，则需要和业务方进行充分讨论，共同结合Kano模型的结果和业务实际情况对于产品功能和开发和排期进行优先级排序。在这个阶段，可能你会需要其他一些数据的支持，比如现阶段用户对于产品的意识、使用频率等等。而关于这些的讨论，我们就又要回到需求沟通阶段，在项目初期深入了解业务，对于可能出现的结果和需要了解的其它数据进行评估和预设，方便在问卷编制阶段，早早地“埋下伏笔”。这样，在后期讨论结果应用时，就可以更加丰富，更好地支持业务。
本次对于Kano模型的应用，笔者认为有以下几处不足。

1）问卷编制中，选项设置里包括“我很喜欢”和“我很不喜欢”两项，这里的程度词“很”可能会让用户不去选择这两项（虽然在结果来看并没有明显趋势），但后续可考虑将选项变为“我喜欢/我满意”和“我不喜欢/我不满意”这种程度相对没有那么强烈的表述，避免无关变量的干扰。
2）为了保证回收数据的准确性，我们做了如下的工作：1）问卷中加入说明，引导用户在同样基准上填答问卷；2）功能点举例阐述；2）预访3名卖家，对于卖家不能清晰理解的部分加以讨论和完善补充。而真正问卷投放过程中，依然可能有卖家对于功能点描述不理解的地方，这样会导致数据质量的下降。对于这一点，后续研究中时间允许的情况下，可尝试采用电话访问的形式与用户进行一对一的交流，保证数据的质量。

主要参考文献：

Berger C., Blauth R., Boger D., etc. Kano’s methods for understanding customer-defined quality [J]. Center for Quality Management Journal, 1993, 2(4): 3-36.

Herzberg, F.: Work and the Nature of Man.1974.

Kano, N., Seraku, N., Takahashi, F., Tsuji, S.: Attractive quality and must-be quality. The Journal of Japaneses Society for Quality Control 1984,14(2), 39–48.

Matzler, K., Hinterhuber, H.H.: How to make product development projects more successful by integrating Kano’s model of customer satisfaction into quality. Technovation.1998,18(1),25–38.

Zhang, P., von Dran, G.M.: Satisfiers and Dissatisfiers: A Two-Factor Model for WebsiteDesign and Evaluation. Journal of The American Society For Information Science.2000,51(14),1253–1268.

林英枫; 郑静文; 钟隆胜; 吕珊卉.台南地区牙科诊所服务品质属性及民众再诊因素之探讨.2006.

淘宝网UEDblog： http://ued.taobao.com/blog/2011/06/13/ Kano模型论与应用

基于有限状态机的交互组件设计与实现

基于有限状态机的交互组件设计与实现:
有限状态机（FSM）（维基百科）是设计和实现事件驱动程序内复杂行为组织原则的有力工具。
早在2007年，IBM的工程师就提出在在JAVASCRIPT中使用有限状态机来实现组件的方法，原文地址如下：
《JavaScript 中的有限状态机》http://www.ibm.com/developerworks/cn/web/wa-finitemach/
现在结合KISSY等现代JS库和框架提供的强大的自定义事件的功能，我们可以利用有限状态机设计出代码层次清晰，结构优雅的前端交互组件。
今天，我们会通过设计并实现一个下拉选择（模拟select）组件来一步步说明如何利用FSM和KISSY来设计和实现一个有复杂行为的交互组件。
我们的工作会分成三个步骤来进行：

• 第一步：设计组件状态，用户行为和组件行为
• 第二步：通过代码来描述设计出来的内容
• 第三步：实现一个有限状态机让组件工作起来

第一步：设计阶段

首先，我们需要确定组件的状态和状态间的转换关系
通过对组件可能会发生的行为进行研究，我们为组件设计了以下三个状态：
1.收起状态（fold）:

组件的初始状态，用户可能会进行以下操作：

展开下拉框（unfoldmenu）转移到展开状态（unfold）

2.展开状态（unfold）:

用户展开下拉框的状态，用户可能会进行以下操作：

收起下拉框（foldmenu）转移到收起状态（fold）
鼠标经过选项（overitem）转移到高亮状态（highlight）

3.高亮状态（highlight）:

鼠标经过选项时，高亮经过的选项，用户可能会进行以下操作：

收起下拉框（foldmenu）转移到收起状态（fold）
点击选项（clickitem）转移到收起状态（fold）
鼠标经过选项（overitem）转移到高亮状态（highlight）

以上就是这个小组件可能会有的三种状态，用一个状态转换图来表示如下：

• 在状态描述中包含了触发状态发生转移的动作（事件）
• 可以很明显的看出这些事件并不是浏览器中原生的事件。
• 这里，我们使用自定义事件来描述用户的行为，这样我们可以使得用户行为和组件行为的逻辑完全分离，代码将会更容易理解和维护。

定义用户行为：
在这个组件里，我们有以下四种用户行为：

展开下拉框（unfoldmenu）：鼠标点击橙色区域时触发
收起下拉框（foldmenu）：鼠标离开组件区域达到2秒，点击橙色区域，点击组
                       件外部区域
点击选项（clickitem）：点击下拉框中的某个选项
鼠标经过选项（overitem）：鼠标经过下拉框中的某个选项

定义组件行为：
在状态转移的过程中，组件本身会有很多动作，如显示下拉框等，我们接下来在上面的状态图中加入转移过程中组件的动作

fold():收起下拉框
unfold():展开下拉框
highlightItem():高亮某个选项
selectItem():选中某个选项，并把值填充到橘黄色区域

第二步：实现阶段（基于KISSY实现）

全局变量：S=KISSY, D=S.DOM, E=S.Event

1.描述状态
跟设计过程一样，我们需要用一个结构来描述状态的转移以及转移过程中的动作
我们在这里使用对象来描述：

"fold":{
    unfoldmenu:function(event){
        _this.unfold();
        return "unfold";
    }
}

如上面这段代码就描述了在fold状态下，可以触发unfoldmenu这个用户行为来转移到unfold状态，
我们通过函数返回值的形式来通知FSM下一步的状态。



这样，我们就可以通过这种形式描述所有的状态，结构如下：

states:{
    //收起（初始状态）
    "fold":{
        unfoldmenu:function(event){
            _this.unfold();
            return "unfold";
        }
    },

    //展开状态
    "unfold":{
        foldmenu:function(event){
            _this.fold();
            return "fold";
        },
        overitem:function(event){
            _this.highlightItem(event.currentItem);
            return "highlight";
        }

    },

    //高亮状态
    "highlight":{
        foldmenu:function(event){
            _this.fold();
            return "fold";
        },

        //选中条目
        clickitem:function(event){
            _this.selectItem(event.currentItem);
            return "fold";
        },

        overitem:function(event){
            _this.highlightItem(event.currentItem);
            return "highlight";
        }

    }
}

在定义好状态后，我们还需要设定一个初始状态：

initState:"fold"

2.描述用户行为
我们使用一个方法来描述用户行为，即驱动FSM发生状态转移的事件：

"foldmenu":function(fn){
    var timeout;
    E.on(_this.container,"mouseleave",function(e){
        if(timeout)clearTimeout(timeout);
        timeout = setTimeout(function(){
            fn();
        },1000);
    });
    E.on([_this.container,_this.slideBox],"mouseenter",
    function(e){
        if(timeout)clearTimeout(timeout);
    });
    E.on("body","click",function(e){
        var target = e.target;
        if(!D.get(target,_this.container)){
            if(timeout)clearTimeout(timeout);
            fn();
        }
    });
}

如上面这个代码就定义了foldmenu这个用户行为，同时，FSM会自动将它定义为一个自定义事件，我们通过传入的回调函数fn来通知FSM触发这个事件的时机。
通过上边的例子可以看出，我们可以将一个很复杂的动作定义为一个用户行为，也可以将几个不同的动作定义为一个用户行为，将用户行为和组件的动作彻底分开。
与状态相同，我们也将所有的用户行为放在一个对象中。

events:{

    "unfoldmenu":function(fn){

    },

    "foldmenu":function(fn){

    },

    "overitem":function(fn){

    },

    "clickitem":function(fn){

    }
}

3.描述组件行为

由于组件行为一般都包含对组件本身的一些直接操作，可以作为API开放给用户使用，因此我们把描述组件行为的方法放在组件的prototype上，这部分代码如下：

S.augment(SlideMenu,S.EventTarget,{

    setText:function(){
        var _this = this,
        select = _this.select;
        D.html(select,_this.text);
    },

    unfold:function(){
        var _this = this,
        slideBox = _this.slideBox;
        if(!_this.isFold)return;
        _this.isFold = false;
        D.show(slideBox);
    },

    fold:function(){
        var _this = this,
        options = _this.options,
        slideBox = _this.slideBox;
        if(_this.isFold)return;
        D.removeClass(options,"hover");
        _this.isFold = true;
        D.hide(slideBox);
    },

    highlightItem:function(curItem){
        var _this = this,
        options = _this.options;
        D.removeClass(options,"hover");
        D.addClass(curItem,"hover");
    },

    selectItem:function(curItem){
        var _this = this,
        value = D.attr(curItem,"data-value"),
        text = D.attr(curItem,"data-text");
        _this.value = value;
        _this.text = text;
        _this.setText()
        _this.fold();
        _this.fire("select",{
            value:value,
            text:text
        });
    }
});

第三步：实现有限状态机（基于KISSY实现）

前面我们定义了组件的状态，用户行为，以及组件本身的动作，
接下来我们来实现一个有限状态机（FSM），让整个组件工作起来。
通过上面实现的代码，我们可以看出FSM的输入有以下三个：

• 初始状态
• 状态描述对象
• 用户行为描述对象

代码结构如下：

initState:"fold",
states:{
    //收起（初始状态）
    "fold":{
    },
    //展开状态
    "unfold":{
    },
    //高亮状态
    "highlight":{
    }
},

events:{
    "unfoldmenu":function(fn){
    },
    "foldmenu":function(fn){
    },
    "overitem":function(fn){
    },
    "clickitem":function(fn){
    }
}

FSM需要2个功能：

• 将用户行为与自定义事件相关联（defineEvents）
• 在用户行为发生时（即触发自定义事件时），根据状态描述对象来转移状态（handleEvents）

代码如下：

functionFSM(config){
    this.config = config;
    this.currentState = this.config.initState;
    this.nextState = null;
    this.states = this.config.states;
    this.events = this.config.events;
    this.defineEvents();
}

var proto = {
    //事件驱动状态转换(表现层)
    handleEvents:function(event){
        if(!this.currentState)return;

 var actionTransitionFunction =
 this.states[this.currentState][event.type];

        if(!actionTransitionFunction)return;
        

 var nextState = actionTransitionFunction
 .call(this,event);

        this.currentState = nextState;
    },

    //定义事件 (行为层)
    defineEvents:function(){
        var _this = this,
        events = this.events;
        for(k in events){
            (function(k){
                var fn = events[k];
                fn.call(_this,function(event){
                    _this.fire(k,event);
                });
                _this.on(k,_this.handleEvents);
            })(k)
        }
    }

}
S.augment(FSM, S.EventTarget, proto);

然后，只需要实例化一个FSM即可

new FSM({
     initState:"fold",
     states:{...},
     events:{...}
});

最后，总结一下。

使用FSM模式设计和实现交互组件，可以获得以下特性：

• 交互逻辑清晰
• 用户行为和组件行为完全分离，代码具有良好的分层结构
• 对设计具有良好的纠错特性，当设计上对状态和状态的转移有遗漏时，在实现阶段很容易流程出现走不通的情况，可以促进交互设计对细节的补充。

源码：https://github.com/yhanwen/fsm