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

• 闲谈CSS3动画

随着CSS3越来越热，CSS3动画也逐渐受到大家的关注。这次有幸修改淘宝网全站页头，小小地应用了下(详见http://www.taobao.com/下拉箭头处的hover效果)。与其说是渐进增强，不如说是满足了技术人小小的虚荣心。以下是自己的一点理解，希望能对大家有所帮助。 … 关于CSS3动画从(http://www.w3.org/Style/CSS/current-work)可以看出，CSS动画涉及的知识点包括 CSS 2D Transformations, CSS 3D Transformations, CSS Transition...

• 用户体验量化方法研究（三）

前面的文章中介绍了三种用户体验量化方法。通过这篇文章，我们将通过案例来一起研究以行为为中心的量化方法的使用。案例需要借助以体验为中心的量化方法来得到以行为为中心的量化表达式，并将其与以体验为中心的量化结果进行比较。

• 用户体验量化方法研究（二）

在用户体验量化方法研究（一）中，我们以用户体验层次模型为基础，提出了三种量化用户体验的方法：以任务为中心、以行为为中心以及以体验为中心的量化方法。在本篇博客中我们将具体向大家介绍下三种方法。

• 用户体验量化方法研究（一）

近年来，用户体验如雨后春笋般快速发展着。而此时，用户体验的相关工作人员所面临的问题是如何评测产品给用户带来的体验，这需要我们通过一定的方法对用户体验进行量化。在诺曼、Robert等学者所作研究的基础上，我们在用户体验量化方法上进行了大胆的尝试。首先通过分析用户体验的流程来建立用户体验的层次；其次，以该层次为基础来寻找每个层次的组成要素以及要素间的相互关系，并依照层次的划分提出用户体验量化的方法；最后通过...

• 交互设计实用指南系列(8)―深广度平衡

相信大家对街边林林总总的房产中介并不陌生，那么我们先看看下面这张图片。图1 从右侧这家店的橱窗里，我们能迅速分清哪些是租房信息哪些是售房信息。因为店家很贴心的将房产信息进行归类，并且在视觉上做了一些划分，让我们对信息能一目了然。借这个小案例引出我们今天要分享的话题：深广度平衡。 1. 什么是深广度？其实“深广度”本身并不是一个单一的概念。在网站的信息架构中，有一种组织结构叫做树形结构：网站首页视为链...

• 交互设计实用指南系列(9)―一次点击

有一次去超市换货，本能的找到服务中心，服务中心说这个业务在超市旁边一个房间里，由于忘记带小票，那个小房间的人让我去另外一个小房间调电脑里的记录，调出来我拿着记录单去了卖货的地方才换货。其实超市退换的需求也不少，整个过程服务态度很好，但是很麻烦。其实我们日常生活中很多事情，办起来过程很罗嗦，办事的工作人员说这是应该的，都这样做，可应该不应该，谁是评判标准呢？交互设计一个很重要的目地就是让用户方便...

• 交互设计实用指南系列(11)―减少记忆负担

写在前面的话关于《交互设计实用指南》，我们最近收到很多朋友的反馈，有支持的也有提意见的，在此一并感谢了，有你们的关注，我们才能走得更远。《交互设计实用指南》其实是收集和总结了交互设计上的一些问题，肯定有很多老生常谈的东西，是不是老生常谈其实不是问题，“问题在于，这些老生常谈的东西有没有被积累，有没有被传承，有没有被体系化。”（青云语）《交互设计实用指南》的读者群涵盖了许多行业，而且就算是交互设计...

• 不一样的交互组件（下）

四、翻页的创新【替代法】传统的翻页方式是“上一页+页码+下一页”，大家最熟悉的设计。 Bing图片搜索 Google reader 看图购而近年兴起的这种“无尽滚动翻页”的翻页方式，即滚动条拖动到最底部后开始加载后面的内容，而不再有“上一页+页码+下一页”这样的链接。相对而言twitter、Iphone app store这样的“递进式翻页”则没那么激进，保留了一个翻页按钮，是介于传统翻页与无尽滚动翻页的一种折中方式。上图是Google boo...

• 不一样的交互组件（中）

二、组合搜索框的创新【组合法】常见的带条件搜索框是“输入框+下拉菜单+按钮”三个控件组成的，合适的控件组合可以带来更好的效果。 1、【输入框+下拉菜单】组合新浪微博的搜索框，将下拉选项融合到输入框提示里，选择搜索范围的操作更加便利。 Google reader这样的带输入操作的下拉菜单，让下拉菜单更加易用。（这种控件组合在word、photoshop等软件里很常见，如字体选择控件） 2、【按钮+下拉菜单】组合豆瓣与Flickr的...

• 不一样的交互组件（上）

交互设计是一个创造性的工作，利用创新的方式漂亮地解决产品问题，是一个交互设计师价值的体现。当创新的交互设计被用户认可、被业界同行学习，更是一种巨大的职业满足感。这种创新不一定是惊天地泣鬼神的革命性设计，一个小小的交互组件的创新就可以让产品体验增色不少。今天就通过一些案例聊聊交互组件创新的四种常见方式，与大家共勉。一、滚动条的创新【重构法】我们先来回想一下阅读PDF文档的两种滚动方式：1、手型工具...

• 别让我思考

虎年ued第一篇，年前写完，今天发出来给大家分享！先给互联网上的梦想者们拜个晚年！以前经常吃公司旁边的食堂，人多，排队。夏天的时候，我们总要找一个靠窗口通风好的地方坐，没有空调只有风扇，风扇很多，开关都集中在一个地方，应该是方便操作人员统一管理，有时自己头上的风扇没开，当我要去开这个风扇时，麻烦来了，很多排的风扇开关，到底哪个是我头上的呢？生活中有很多总让我们感觉莫名其妙，或者停下来需要思考的情况...

• 标签明晰、有效

导航标签彼此互斥、完全穷尽。导航标签其实就是一种文字表达形式，我们用标签来代表网站上的各种分类信息。比如“联系我们”这个标签，代表的内容通常会包括公司名称、电话、地址、邮箱等信息。它可以是文字，也可以是图片。在英文里被称作“Label”，并不同于我们常说的“tag”标签云图。说简单一点，我们就是要为网站的信息做分类，并为它们起一个通俗易懂的名字。这其实是任何人都可以做的一件事情，所以在导航设计流程中，...

• 交互设计实用指南系列(5)

看到这张照片，我们一眼能够看到天宏(图中这位UED俊男)的眼睛。我们能从他的表情里读出一些他的性格。一张好的摄影作品，最重要的一点，就是这个照片是否有焦点，照片的主题是否一目了然。而摄影作品的用光、构图、景深等等手法，其实就是在让一个照片能够有其焦点，并且利用这些艺术手法来烘托气氛，提升主题。一个优秀的页面亦如此：应当突出重点，一目了然。相信大家也知道，一个用户在浏览网页的过程中，只是扫描页面，而不...

• When we`re only No.2, we try harder之淘宝节日LOGO互动设计小探讨

从去年六一儿童节的LOGO开始，我们就要求以后的每一个节日FLASH LOGO设计时除了具备创意故事外，还必须设计一个小的互动效果，当受众把鼠标移到LOGO上面时（Rollover），会有响应（Response）情节发生。节日LOGO设计几乎每一个网站都在做，之前有太多非常成功和优秀的LOGO设计作品。作为后来者，我们一直努力希望在众多的节日LOGO设计中走出一条（哪怕说只有一点点）自己风格的道路，老实说，这一点都不容易。When you`re only No...

• YUI3设计中的激进和妥协

相信每个前端工程师都有自己喜爱的javascript框架，说情感也好，道信仰也罢，javascript框架带给人的不仅仅是便捷的开发，更有一种纯粹的逻辑美感，不管是jquery曼妙的简洁，还是yui魔术般的沙箱，都使我们产生无穷的想象。然而，js框架却又必然无法做到面面俱到的完美无瑕，比如jquery在OO方面做出的让步，以及yui在性能上做的牺牲，无不给人传达一种缺憾美、一种理想的现实主义。今天，我们来看看yui3在框架设计中的这些牺牲和让...

• 概念视觉设计

10月份，工作之外，做了一款控件不全的“播放器”界面，叫它播放器只是个借口，也许更偏重视觉技法的练习。本文就让我们分析下，一个复杂图形是如何从无到有的，希望对视觉设计师们有所帮助，也能盛产一些“古怪”的作品。制作之初，脑海里就反复罗列一些极具复杂的图形，闪闪发光，搜集的变形金刚素材：素描这版感觉这不错，特点鲜明，尖尖的犄角，硬硬的质感，皮肤下面泛光，结构虽复杂但交代的却很清楚。就它了：）万事开头...

• 手机网站开发必修课[2009总结版]

从09年初接手淘宝手机网站前端开发的工作至今，转眼已是一年。一步步看着手机淘宝从最初的beta版本到今天的样子，感慨良多。手机网站开发，有着许多不为人知的困难：一是可参考的资料太少，大部分手机网站都处于起步阶段，很多的时候都是摸着石头过河，而鉴于淘宝自身的特殊性，也使得我们在参考成功案例之余，要做更多的思考；二是兼容性工作异常艰辛，难度一点也不比web网站的兼容性工作来的低（关于这点，请参见我之前的文...

• When we`re only No.2, we try harder之聊天表情设计小探讨

解释一下文章title的意思，取自William Bernbach (DDB)1963年为Avis设计的广告。（原话为：When you’re only No.2, you try harder. Or else…）去年初开始接触淘宝蚂蚁聊天表情的设计任务，上面本来想找外包广告公司做，但后来由于种种原因，最后还是决定让我这个门外汉直接设计。无论是之前提到的pixel art，旺旺的淘宝蚂蚁聊天表情，以及我们的FLASH节日LOGO，都是在别人已经做得很成功的设计领域，硬着头皮闯进...

• 关注前端开发流程

流程，通俗来讲，就是许多人，在做一系列的事情时，怎样相互协调，安排好这一系列事情的先后顺序，有什么事先的约定，需要达到怎样的预期目标。在UED里，前端同学需要处理的需求比较多，早些时候，前端这里的开发流程还是比较模糊的，UED以外的同学也不清楚这边的工作具体是怎样进行的，所以难免会有需求插队的情况发生，打乱了大家的计划，因此今年Q3的时候，在与SCM团队同学的共同努力下，形成了一个前端的ASSETS发布流程。这...

• 基于生活形态的用户分群研究

生活形态（Life-Style）的概念源自社会学与心理学，六十年代即有学者正式引用到市场营销领域，并运用其心理影射与多维度等特质，着力解释人口统计变量所无法解释的行为，描绘出消费者的态度与价值观等人性层面，是细分市场、深挖客户价值的利器。因此，在网络购物迅猛发展的当下，购物网站如何把握自身产品和服务的消费者视角，并深入研究现有消费者和潜在消费者的生活形态和消费观念，同时，借用生活形态深入分析网购用户的价值诉...