Taobao.com UED Team -- IT技术博客大学习 -- 共学习共进步！

• 前后端分离的思考与实践（二）

过去的AJAX、Client-side MVC、SPA、Two-way Data Binding 等技术的出现，都是试图要解决当时的前端开发遇到的瓶颈。而NodeJS中间层的出现，也是在试图解决现今前端被侷限在浏览器端的一个限制。这边文章专注于前后端模版共享，也希望能抛砖引玉，与大家一起讨论如何在NodeJS中间层这个架构下，我们可以怎样的改善我们的工作流程，怎样的跟后端配合，来把前端这个工作做得更好。

• 前后端分离的思考与实践（一）

为了解决传统Web开发模式带来的各种问题，我们进行了许多尝试，但由于前/后端的物理鸿沟，尝试的方案都大同小异。痛定思痛，今天我们重新思考了“前后端”的定义，引入前端同学都熟悉的NodeJS，试图探索一条全新的前后端分离模式。

• 走近用户，从访谈开始

在日常工作中，经常有业务方小伙伴来咨询用研“用户是怎么想的”，“用户是怎么做的”。很多时候用研都会选择用户访谈作为研究这类问题的方法。有时，业务方也会在用研的辅导下亲自执行访谈，当一回主访人。其实作为业务方，掌握一定的访谈技能是拉近你和用户距离的利器。通过访谈获得的用户端输入，可以帮助自己规划或优化产品和业务逻辑。今天就根据我们平时访谈的经验，以及在辅导业务方访谈时发现的一些常见问题，向大家介绍一下用户访谈。希望大家对访谈有进一步了解，如果你想自己尝试访谈，那么也可以从这篇文章开始，逐步进阶。

• 说说最近Google:safebrowsing引发页面加载阻塞的问题

发现这样一个问题：在某些Firefox浏览器中，表单的butterfly加载阻塞导致功能异常了。一开始，我们以为是即将发布的修改点导致的问题。但再三确认本次的修改点后，确定只是改了文案啊！这…因此，我们首先怀疑是否线上已经有问题？经过测试发现，果然，确实是个线上问题。经过并不算麻烦的自测后，发现问题还不小：影响范围：所有Firefox版本。

• Think Aloud－适合设计师的可用性方法

Think aloud 是可用性测试中常用的一种方法，它是由IBM公司Clayton Lewis 在1982年在《以任务为中心的界面设计》书中被阐述，同时引进到了可用性领域，1993年由前苹果研究院VP的Jakob Neilson在可用性工程这本书中再次推出。使用 Think aloud方法，需要提供给被测用户待测的产品或界面原型，要求被测用户根据指定任务操作产品或界面，与此同时，即时地说出使用产品界面时的想法、感受和意见。Think aloud适合在产品设计的任何阶段使用，并且适用于各种形式的产品原型，对于用户路径，界面信息构架，误操评估等有快速有效的校验作用。

• 高效输出移动app产品原型

如何高效输出移动app产品原型？清晰的产品思路，顺畅的协同合作，齐备的素材元素，真实的体验感受…保证过程的高效，更要保证有效的成果。下面我们将分三步走，来完成高效输出移动app产品原型。

• 在iOS中使用icon font

现在在web开发上，icon font技术的应用很广泛，它不仅在解决多分辨率显示问题上很有成效，而且在使用它的时候还能降低不少设计和开发成本。那么它能不能应用到ios开发上来呢？带着这个疑问，我在github上找到了FontasticIcons和ios-fontawesome，但是这两个OC包对icon资源封装都有限，而且扩展也不是很方便。

• 复杂产品的响应式设计【流程篇】

响应式设计之所以叫响应式“设计”而不叫响应式“技术”，是因为它是一项设计先行的工作。需要设计先明确好响应方式再实现出来，不能出一套设计稿后等着前端看情况把它变成响应式网页。所以整个流程最初从交互阶段开始，分成6个主要步骤，视觉、前端、开发等角色根据情况尽早介入。

• 谈谈 jQuery 中的防冲突（noConflict）机制

许多的 JS 框架类库都选择使用 $ 符号作为函数或变量名，jQuery 是其中最为典型的一个。在 jQuery 中，$ 符号只是 window.jQuery 对象的一个引用，因此即使 $ 被删除，window.jQuery 依然是保证整个类库完整性的坚强后盾。jQuery 的 API 设计充分考虑了多框架之间的引用冲突，我们可以使用 jQuery.noConflict 方法来轻松实现控制权的移交。

• 移动触屏的手指触发尺寸

使用手指大小的可触目标在平板电脑上的应用比移动设备要容易得多，因为平板有更大的屏幕空间。你可以自由地使用这些尺寸，而不必恐惧这些尺寸是否占据了太多空间。然而，移动设备屏幕的局限性，手指大小能触及的目标目标是最需要去考虑的。设计师面临的挑战就是如何定义出最常用的适用于移动设备的可触面积大小。或许，较少的可触目标是一个合理的解决方案，但这个方案的前提一定是需要设计师精简导航内容。

• 一种基于匹配回朔的 css3 选择器引擎实现

CSS 选择器是一种应用于 DOM 节点查找场景的特定微型语法，本质上和正则表达式一样都是一种模式匹配语言，灵活使用可以方便得获取指定位置的节点集合。目前 W3C 推荐标准为 Selectors Level 3 ，在 ie9+ 以及 firefox，chrome，mobile 等浏览器上原生有基本一致的实现，而在 ie 下则需要使用 javascript 模拟实现，本文介绍一种基于匹配回朔的 css3 选择器引擎实现，特定应用于 ie6，7，8 下。

• 从数据中了解用户——数据在现有产品改版设计中的应用

通常情况下，我们可以通过用户访谈的方法了解用户需求，其实设计师还可以通过分析用户问卷调查数据以及网站页面数据等方式，了解用户需求以及用户在使用产品时遇到的问题。而且，直接通过接触用户了解到的需求有可能只是个案，为了增强客观性，通常都会通过大样本调查，从数据实证的角度，进一步更准确和客观地找到用户的普遍需求。此外，通过对数据分析结果与用户访谈所得到的定性分析结论，进行比较和综合分析，设计师也能够从不同的角度了解用户的真实需求。从用研的角度来看，交互设计包括新产品设计以及已有产品的改版设计两大类业务，笔者将分两次分别叙述在这两大类业务中，可以如何利用数据了解用户需求。本文重点讨论数据在现有产品改版设计中的应用。因考虑到商业信息保密，本文案例采用了2011年的项目，互联网产品迭代频繁，文中提到的产品页面截至目前已经有多次改版，大家只需要了解整个文章的思路即可。

• 从数据中了解用户——数据在新产品设计中的应用

通常情况下，我们可以通过用户访谈的方法了解用户需求，其实设计师还可以通过分析用户问卷调查数据以及网站页面数据等方式，了解用户需求以及用户在使用产品时遇到的问题。而且，直接通过接触用户了解到的需求有可能只是个案，为了增强客观性，通常都会通过大样本调查，从数据实证的角度，进一步更准确和客观地找到用户的普遍需求。此外，通过对数据分析结果与用户访谈所得到的定性分析结论，进行比较和综合分析，设计师也能够从不同的角度了解用户的真实需求。从用研的角度来看，交互设计包括新产品设计以及已有产品的改版设计两大类业务，笔者将分两次分别叙述在这两大类业务中，可以如何利用数据了解用户需求。本文重点讨论数据在新产品设计中的应用。

• 定性资料分析工具Stickysorter介绍

定性研究是用户研究中常用的方法，通过对典型用户的深度挖掘，我们可以深入了解研究对象总体的特征、行为习惯、行为原因等信息。一般而言，我们会使用面对面深度访谈、电话访谈、日记法、卡片分类等方式来进行定性研究的执行，但是无论我们使用哪种方式，都会回收到大量的资料信息，而定性资料的分析才是我们研究是否能够达成目标的重头戏。我们常常需要对回收到的资料作多维度的整理和分析，例如信息点编码、个案行为过程及原因分析、个案典型特征提取、人群划分、人群行为过程及原因分析、人群行为原因层次划分等等，也就是说，定性资料分析的过程，是对回收到的资料进行不断的重组，合理区分并展现信息点的分组、层次的过程，能够帮助研究员快速且清晰地组织信息点，对于研究的效率和研究结果的质量都非常重要，StickySorter工具就是一款对信息点进行高可视化组织的好工具。

• 可用性测试好助手——Morae软件的应用

通过可用性测试，研究员可以梳理出产品存在的一些问题，有助于需求方对产品进行相应的改进。而需求方则可以直接体会到用户的困境，从而找出解决方案。因此，可用性测试不论对研究员发现问题还是需求方改进产品都是非常有价值的。但是在测试过程中，一些“其他”因素却可能让我们的测试效果打了折扣。

• 如何实现一个编译器

从本质上看模板也是一个微型语言，因此可以从 DSL 的角度着手，使用工具快速构建一个适合于特定前端框架的模板引擎。本文讨论的话题和承玉的差不多，相信大家都知道coffeescript，handlerbars。承玉的DSL和handlerbars类似，我完成了一个模板语言velocity的解析，更接近coffeescript的编译。在此，与大家分享一些经验，如果你也希望知道coffeescript语法解析如何完成的，那么，本文应该对你有所启示。

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

Kano模型起源：满意度的二维模式著名市场营销学大师、美国西北大学教授菲利普•科特勒说过：满意是指一个人通过对一个产品的可感知的效果与他的期望值相比较后，所形成的愉悦或失望的感觉状态。在竞争日益激烈的当下，用户的满意度直接影响着用户对于企业/产品的忠诚度，进而影响用户的粘性和流失。

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

有限状态机（FSM）是设计和实现事件驱动程序内复杂行为组织原则的有力工具。早在2007年，IBM的工程师就提出在在JAVASCRIPT中使用有限状态机来实现组件的方法，现在结合KISSY等现代JS库和框架提供的强大的自定义事件的功能，我们可以利用有限状态机设计出代码层次清晰，结构优雅的前端交互组件。今天，我们会通过设计并实现一个下拉选择（模拟select）组件来一步步说明如何利用FSM和KISSY来设计和实现一个有复杂行为的交互组件。

• 构建前端 DSL

目前在传统的软件开发领域 DSL 已经比较普遍，特别是 Martin Fowler 的突出贡献。而在前端领域尚较少涉及，而如果在前端开发中合理使用 DSL 同样也可以有效得减少代码数量，提高可读性，常见的一个应用场景即前端模板的构建。本质上说模板也是一个微型语言，因此可以从DSL的角度着手，使用工具快速构建一个适合于特定前端框架的模板引擎。本文将以 KISSY XTemplate 为例介绍如何构建前端的 DSL。

• 设计师的逆袭

“苦逼”这个词，很多设计师喜欢这么称呼自己，因为在工作中经常遇到改来改去的事情，有时候甚至只是产品的一个实现工具。为什么设计师会遇到这些窘境？其实不管什么职业被动了都会有这样那样的苦逼，因此设计师在整个过程中主动是必不可少的。领导能力与管理能力有所不同，管理是每个人公司赋予的职责，而领导力是潜意识所形成的并且能够影响和带动整个团队的能力。设计师不一定有管理职责，但拥有领导力是摆脱“苦逼”现状的最好办法，简单点说就是成为整个项目的owner。用心，你对项目团队有多用心，项目团队就对你有多用心。