阿里巴巴中国站UED -- IT技术博客大学习 -- 共学习共进步！

• Node.js 打造实时多人游戏框架

在 Node.js 如火如荼发展的今天，我们已经可以用它来做各种各样的事情。前段时间UP主参加了极客松活动，在这次活动中我们意在做出一款让“低头族”能够更多交流的游戏，核心功能便是 Lan Party 概念的实时多人互动。极客松比赛只有短得可怜的36个小时，要求一切都敏捷迅速。在这样的前提下初期的准备显得有些“水到渠成”。跨平台应用的 solution 我们选择了 node-webkit，它足够简单且符合我们的要求。按照需求，我们的开发可以按照模块分开进行。本文具体讲述了开发 Spaceroom（我们的实时多人游戏框架）的过程，包括一系列的探索与尝试，以及对 Node.js、WebKit 平台本身的一些限制的解决，和解决方案的提出。

• 用户满意度指标权重计算方法

用户满意度调查是用户体验工作中重要一项活动。在了解整体满意度、一级指标满意度、二级指标满意度外，还需要了解下一级指标对上一级指标的权重，帮助确定各个方面的工作优先级，为产品优化改进方向提供决策依据。下文将简单介绍一下几种满意度指标权重的计算方法。

• 基于用户尺度评价的人物角色分类方法与实践

人物角色可以从很多维度来划分，例如用户目标、用户场景、用户行为、体验周期、用户价值、……，根据实际情况，人物角色可能按一个维度划分，或结合多个维度进行划分。

• Beforeunload打点丢失原因分析及解决方案

当点击浏览器的当前页面某个元素后，当前页面创建image对象，并把这个image对象的src设为指向打点服务器的url,发送打点请求。接着，当前页又向页面服务器发送页面跳转请求。假设页面服务器很快就返回了请求的html, 则浏览器窗口接收到页面服务器的响应后，开始卸载保存在用户内存中的跟当前页面的有关的所有元素，包括刚才创建的用来向打点服务器发送打点的image对象。

• 关于交互Demo设计的一些建议

为方便产品经理、设计师、开发及项目相关人员能够看到直观的效果，进行更有效的沟通；提供直观的产品设想，说明用户将如何与产品进行交互，在交互设计的过程中一定会产出各种各样的产出物，如流程图、思维图、纸上的草稿、甚至高保真演示稿。

• 移动开发之touch event篇

目前最流行的两大移动操作系统IOS和Android都具备了解析标准的HTML、CSS和JS的能力,网页开发者还是可以用桌面浏览器来开发网页。通过这两个系统上的浏览器看到的网页和我们桌面浏览器上看到的网页几乎是一致的。虽然看起来是一致的，但是在交互上面还是有一些区别的，最大的区别就是，这些移动设备都没有鼠标，我们平时在桌面浏览器上用的鼠标事件，在移动设备浏览器上用起来怪怪的。想要发挥移动设备触摸屏的特点，给用户提供良好的体验，就要用到浏览器的触摸事件。

• jQuery选择器探讨进阶

在jQuery中，当用户把选择器表达式作为参数传递给$()函数时，jQery的Sizzle先对这个选择器表达式进行语法分析，然后再决定如何获得表达式所代表的这些元素。在框架底层，Sizzle应用了浏览器所支持的最高效的DOM 方法来获取一个节点列表(nodeList)，这个节点列表是一个类似于数组的对象的DOM元素的集合

• jQuery事件编写进阶

事件委托，是一种优化DOM元素事件绑定的技巧，利用事件冒泡的原理，通过绑定事件到父元素，检查event触发元素的target，最终执行相应的事件函数处理，它的几个好处一般前端开发程序员都知道。在jQuery中，一般是delegate()方法和.live()方法，但是，如何选择事件委托的方法，或者在什么情况下用.live(),什么情况下用.delegate(),这个值得讲一讲。

• web前端性能优化进阶路

Web前端性能优化WPO，相信大多数前端同学都不会陌生，在各自所负责的站点页面中，也都会或多或少的有过一定的技术实践。可以说，这个领域并不缺乏成熟技术理论和技术牛人：例如Yahoo的web站点性能优化黄金法则，以及大名鼎鼎的优化大师Steve Souders。本文并非一篇讨论性能优化技术方法的文章，而更多的是对中文站搜索List页面持续两年多的前端性能优化实践的思路总结。希望对正在从事这个领域研究的前端同学能有所帮助。

• CSS布局中一个简单的应用BFC的例子

什么是BFC？ BFC(Block Formatting Context)，简单讲，它是提供了一个独立布局的环境，每个BFC都遵守同一套布局规则。例如，在同一个BFC内，盒子会一个挨着一个的排，相邻盒子的间距是由margin决定且垂直方向的margin会重叠。而float和clear float也只对同一个BFC内的元素有效。

• overflow:hidden真的失效了吗

项目中常常有同学遇到这样的问题，现象是给元素设置了overflow:hidden，但超出容器的部分并没有被隐藏，难道是设置的hidden失效了吗？其实看似不合理的现象背后都会有其合理的解释。

• 登录图的趣味设计

阿里巴巴登录页面左侧一直都会有个banner，这个图片因为位置、环境的特殊性，跟我们平常做的首页banner的设计思路会有所不同。首页banner更注重的是信息传达，登录左侧的这个banner偏重情感化设计，情感化设计除了节日、事件的氛围之后，还有就是趣味性。趣味设计是一个比较大的概念，在这里我狭隘的把趣味设计分成两个部分来介绍，1.主体元素的创意；2.背景元素的处理。每次在做这个banner的时候，都非常的纠结，当然最纠结的地方就是创意，虽然创意是给非常主观的东西，但是我们还是可以通过对一些元素处理找到创意点。

• 使用 SourceMap 来进行前端代码调试

什么是 SourceMap 呢？在这个年代，对于前端开发来说，很少有用户浏览器执行的代码和我们写的 code 完全相同的情况。因为我们的代码一般要经过压缩、合并。另外现在还有 sass, less, stylus, coffscript, typescript 等等预编译语言。那么在这些情况下我们如何进行调试呢？SourceMap 就是为了解决这个问题而生的，虽然它还不够成熟，支持它的工具还不够多，但是我们能从它身上看到未来。

• 前后端应用平滑发布方案设计

网站核心页面前后端代码平滑发布的问题是日常开发中的常见问题，本文结合阿里巴巴中文站的实践，给出了一套自动化的解决方案，希望能给大家提供思路上的借鉴，同时欢迎探讨。

• 浏览器的重绘[repaints]与重排[reflows]

在项目的交互或视觉评审中，前端同学常常会对一些交互效果质疑，提出这样做不好那样做不好。主要原因是这些效果通常会产生一系列的浏览器重绘和重排，需要付出高昂的性能代价。

• 构建web前端异常监控系统–FdSafe

如果你碰巧是一名前端开发，而又碰巧在维护着一个对可用性有极高要求的站点，那么也许你我有过共同的苦恼：如何在第一时间发现线上出现的前端异常？毕竟前端不是每天都可以过网页裸奔节，线上的Javascript错误也足以让用户抓狂地拿起他们的投诉电话。。。每天心惊胆战发布的日子不好过吧？是时候改变下了，让心惊胆战见鬼去吧！我的目标很简单：要在用户和boss发现异常之前就彻底修复问题，其余的时间充分地享受高质量生活:)

• 响应式Web设计

响应式Web设计(Responsive Web design)的理念是页面的设计与开发应当根据设备环境(屏幕尺寸、屏幕定向、系统平台等)以及用户行为(改变窗口大小等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用pc、平板电脑，或者手机，无论是全屏显示还是非全屏的情况，无论屏幕是横向还是竖向，页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。

• 倾听色彩的声音

色彩是一个网站的情绪表达方式或者说是性格特征的体现，每种颜色都有着属于自己的声音。作为一种视觉元素，色彩是很难被量化被衡量的，也很难用理性的角度去分析和阐述它，我现在试着用另外一个角度去试图衡量网页的色彩，一种尝试。从最基础的色彩本质、色彩搭配形式、及色彩对用户的潜在影响和心理暗示等着手，去分析色彩，读懂色彩，让色彩帮设计师说话。

• Web导航设计二三事

导航在Web中扮演一个回答用户“我是谁？”“我从哪里来?”“我到哪里去”的角色。好的导航是一个网站的主要基石。而在开始设计一个网站或者改版一个网页时，它往往是设计师第一个面临...

• 界面设计中的结构设计

构建界面视觉层级的元素有颜色的显著程度，图片、文字的尺寸大小，还有最基础的，内容的组织结构。结构设计是指对界面内容进行分组，对界面中的信息、数据进行设计使之结构化呈现的...