这一天，淘宝开放平台（Taobao Open Platform， 简称TOP）Beta发布，“大淘宝战略”又有了实质性的进展。

淘宝开放平台的宗旨是高效、安全、稳定的提供淘宝网电子商务基础服务；目标是建立以淘宝开放平台为基础的大淘宝商业生态系统。

淘宝开放平台地址：http://open.taobao.com

淘宝TOP的同事向全淘宝发了召集令，来庆祝这一事件。

平台架构的菲青老大

铁木真，空闻，优昙也到场了

空闻和铁木真为“大淘宝”开香槟

各位淘宝的同事，让我们庆祝这一刻！

“目前的赢利只是淘宝未来赢利中的一部分，不过这都不重要，重要的是淘宝对于未来商业趋势的把握，这也是如今的‘大淘宝’的秘密所在——以开放API（应用程序接口）为契机，形成一个多接口的开放性平台，吸引大量的合作伙伴结集为一个商业生态系统。” — 淘宝网CEO 陆兆禧

秉承着”开放、协同、繁荣”的思想，让我们展望一下未来吧。

什么？连(上)都没看？快看看吧：垂直栅格与渐进式行距(上)

新问题

渐进式行距

• 正文：字体大小14px，行距24px，段后距24px
• h1：字体大小24px，行距24px，段前距24px，段后距24px
• h2：字体大小：18px，行距24px，段前距12px，段后距12px
• 边注正文：字体大小12px，行距24px，段后距24px
• 边注边框：边框粗1px，内补白11px——别忘了还要把它上移12px

我们修改边注的行距和段后距都为18px。那么情况就会像这样：

(demo-9.html)

不知道各位看官发现了没有，为什么第一行基线没对齐呢？这是因为流布局会将文字块按照行高做顶端对齐。如下图：

所以，在这里，为了使首行基线对齐，我们还要将边注下降一定的像素。可恨的是，需要下降的像素是多少——这个很复杂的问题，至少经过不才好几次的尝试都没有看出个规律来，而只得出以下三个结论：

• 设正文行高是h px，边注行高是h’ px，需要下降的值为d px，那么，这个值将介于 1/2(h-h’) < d < (h-h’) . ①
• 如果该行引入了西文字符(半角数字或者字母)，该行的基线有时会比没有西文字符偏移一个像素。
• 不同的字体渲染引擎可能行为不一致。

这 个结论并不能有成型的公式来确定需要下降的具体像素值。那么，我们就根据结论①一个一个像素试验吧(3 < d < 6)，反正不会太多。在本例中经试验可得，下降4px是能够让首行对齐的。对齐后，各位可以看到正文每隔4行，边注每隔5行，他们的基线会对齐一次。

(demo-10.html)

很有趣，是吧？

垂直栅格与渐进式行距应用举例

这 套理论看起来略显枯燥。所以，我还是得举个应用的例子，不然理论对于现在来说没有任何意义。前几天，我遇到了一个问题是这样的：有一个系统，它能够用像 iGoogle那样的模块迅速搭建一个页面用于淘宝的各个子页面。但是，用模块搭建却常常遇到开天窗的问题，就像下面这样：

好， 现在，我们开始开刀。首先，我们用6px的红色网格线，画好标尺。为什么用6px呢？我们在前面的例子中，正文行距是24px，边注行距是18px，那么 他们的最大公约数就是6px. 也就是说，如果我们画好以6px为单位的横线族，那么，每3条横线就是一个18px单位，每4条横线就是一个24px单位。

画上线后，工作简单啦！利用18px和24px这两种行距，将文字的基线都挪到红色网格线上。

回顾一下优化前的样子：

全部使用了18px或者24px的行距。其中，将右边模块的资讯条数由8条缩减为5条。甚至，我们可以继续发现，应用了垂直韵律之后，垂直的行数可以做自由得调整，而两个模块的高度可以保持高度一致。例如我们缩减了行数：

应用了垂直韵律之后，既美观又灵活，何乐不为呢？哇咔咔～

最后

当然，垂直韵律和渐进式行距还有很多应用的方法。总之，作为设计师，特别是网页设计师/交互设计师，我们不应当单纯地凭借感觉，应当专注到像素级别，严谨设计。

“严谨”一词，永远受用。送给我和大家。

最近网上再度兴起了CSS布局和Table 布局的争论。我最初颇有些不以为然：我原以为CSS 布局的意义早已深入人心，却没想到还有这么多设计师及开发人员持有异议。

静下心来看罢大家的讨论，一番细想，觉得原因可能有两个方面：

一方面，IE6阴魂不散，让Web开发成本居高不下。网上曾经有一个统计，数据显示Web开发人员针对IE6的投入/产出比是最低的。相信大多数前端工程师都有被IE6折磨得咬牙切齿的经历。与其那般痛苦的用CSS布局，还不如用table 来的爽快方便。

另一方面，我发现前端工程师们越来越务实和注重效率。CSS2以及CSS3的诸多新特性迟迟未能广泛普及，而Web标准布道者们所津津乐道的CSS的优点，在照进现实时又经常会遭遇妥协。尽管我一直以Web标准布道为己任，但也不得不同意：table的浏览器兼容性是最好的；table 布局对于设计师来说更容易上手。 就国内环境而言， table切图依旧是制作门户网站专题或者电子商务网站促销页面的最常用方式，存在即有它的合理性。

所以，我们在推崇CSS布局的同时，无需为了证明它的优越性而把table本身贬得一文不值。日常开发中，也无需激进得完全抛弃table。table本身有语义，该显示数据表格的时候就应该使用<table>；在开发过程中，一些需要权衡成本的场合用table+css的布局也未尝不可。在这方面，很欣赏google 和 facebook 前端工程师们的务实做法。大家可以去关注下facebook 上常见的带半透明阴影的弹出对话框，就是使用<table>来制作的，同样非常的精妙。

这一番的争论，结合近年来Web标准的发展，让我开始思考Web开发中改良和改革的区别。

XHTML 2试图直接进化到XML，宣布与HTML的决裂。这曾经让我这个传统的HTML开发者感到恐慌。而当我看到WHATWG组织提出HTML5(最终被W3C认可)的时候，它的温良的改进让我感觉亲切得多，事实也证明，HTML5正越来越向我们走进。而Douglas Crockford甚至觉得HTML5都太猛烈了，提出了HTML 4.2的改良方案。

再看JavaScript， ECMAScript 4 将JavaScript 改得天翻地覆，所幸技术委员会在最终阶段回归理智，重新提出的向下兼容的ESMAScript 3.1 显然得到更多真正战斗在一线的开发人员的认可。

改良，而非血淋淋的改革，也许才是推动技术发展的更实际、更合情合理的方式。Web标准的演进是如此，产品或项目的升级是如此，甚至社会制度的建设亦如此。

征集作品的海报

UED由于拥有大量的创意人才，因此每年为自己部门设计的文化T-SHIRT都会成为淘宝公司内一道亮丽的风景线。今年也不例外，2009年度的淘宝用户体验设计部（UED）主题文化T-SHIRT设计大赛于5月底拉开了序幕。为了最大限度地调动UED内部不同功能组别同学对比赛的热情，本次比赛的参赛对象是包括推广组20多位外包同事在内的100多位UED全体成员。而比赛评审方式，也是采用全民投票的形式来进行，让所有成员都可以自由决定穿在身上的T-SHIRT样式。

征集作品第二期的海报

征集作品的EDM海报发出后马上吸引了很多UED同学的关注，我们接收作品的信箱每天都有很多的童鞋们的大作喔，而且随着比赛截稿时间的逼近，收到的T-SHIRT创意也越来越丰富、越看越让人激动了。

投票的海报

到5.31号截止为止，我们一共收到了29位同学的一共57个创意方案呢。请让我再一次衷心地感谢本次比赛中投稿的29位UED及外包同学，没有你们的积极参与，我们的比赛将举步为艰。同时感谢所有对比赛关注、投票选出自己心仪作品的同学，有了你们，我们的比赛才会更加精彩。经过三个星期的作品收集，2009 UED T-SHIRT设计大赛终于进入到了投票阶段。

一共有57个创意的作品啊，在这里就不一一罗列了

经过了在淘宝内网的激烈竞争，大家终于选出了部分无论在创意和表情手法上都比较吸引的方案。我们将把这些作品收集起来，进行视觉上的一些优化和提升，然后印制出属于UED的2009年度T-SHIRT。

上面的T-Shirt是一些创意很不错的作品，经投票后，将在这些作品中进行优化，最终印制UED 09年的衣服

本次比赛的最终目的，并不是评出谁是所谓的冠军或者谁的设计水平最高，因为相对于前端、用研或者部分交互设计师来说，以视觉设计为评比方向的比赛，对于他们来说，终究是有失公平的，正如要求全体视觉设计师参加前端开发比赛一样，竞赛性质本身就在很大程度上决定了比赛结果。我们希望全部UED同学参与的原因，是为了调动大家的热情，以各种各样的创意参与到属于UED自己的文化T-SHIRT设计里，然后评出最为大家接受和认可的作品。创意与表现形式不同，在创意上，大家相对是平等的。比如，我们在作品收集的过程中，就发现晓荷的Memo想法相当具有创意。在本次比赛中，过程绝对重于结果。最后，由STAR TRUCK（星际卡车）舰长小猪肉（Small Pork）为我们作总结性发言吧。

在碳酸饮料会一周年之际，我们回顾了过去的分享成果，一年多来，已经有1000人次参与其中，一共做了24期分享，有23个设计师参与了分享话题，有10余篇专业文章诞生。庆典上温馨感人又激情的碳酸一周年回顾短片、壮观的碳酸开罐仪式、特殊贡献奖及分享达人奖获奖人发自肺腑的获奖感言、宗羲和无酬的幽默主持、董建明博士精彩的分享都让我们记忆犹新。

碳酸饮料会能够做的不仅仅是一个交流的平台，我们希望碳酸饮料会能够：让每个演讲者收获点什么，让每个听众听到有价值的东西，让他人了解到设计师的进步，为了实现我们最终的愿景——成为地球上最专业的交互设计分享会，相信它会走的更远。

回顾历程视频

华丽丽的讲台

周年庆正式开始，啪！

碳酸会特殊贡献达人和分享达人

董健明博士精彩演讲ing…

我们在听ing…

碳酸记下载

我们的规范到底做到哪一步算是发挥良好的价值？
其实一件事物我们理解错根本目的会导致出大不一样的结果，直接反应在设计师到底要体现什么的价值。
想想我们天天最大的工作量是在什么地方，产品应用创意？制定清晰的信息架构？新用户体验？交互逻辑关系？还是开着制作软件去左三个像素调边距，为了一个虚线去画半天，文字行距调来调去，图片尺寸争执不休…
我想大家都明白我们要做什么，所以规范的问题就来了，如果等你做完一个稿子，用规范来卡你：行距不标准，容器边线的颜色不规范，字体大小有问题，图片尺寸不标准…回去重新调整，然后设计师吭哧吭哧放大像素一点点的去调整，结果制作时间又延长一倍。你再给设计师说规范的好，我想没人去从心里真正相应你，只能说这是工作规定，不得不遵守。
规范好，但不是这样做的。
首先，根据上一篇所述，一刀切产品肯定有问题，根据不同特点和用户使用心里去规划制定好各自合理的规则，先要保证的是这个规则是合理，有效，易用，符合用户使用心里的（这部分也是需要时间去不断演化和发展）。这个前提下，如何应用的问题将是最重要的，直接影响到设计师的工作内容，就像上面所说的，这是堵墙还是电梯。
规范可以到设计制作的每一个环节：交互，视觉，前端代码，再加上用户研究，用户测试，文案制定。用户不知道我们有这些环节（这些也仅是产品的一部分），用户看到的就是产品上线本身，上面讲到的是一个整体。如果说一个月设计时间里，一两天简单了解功能需求，剩下大部分时间全部用来消耗在制作上，也许用户看到就是一个没有新意思维，应用平平的普通产品。要是我们还是用一个月时间，前期大部分时间来规划好产品，设计师根据创新思维去提出更合理，更易用，更贴心于用户的的设计方法，后面的制作其实我们用规范了的机械化操作来大幅节省时间，那么最终用户看到的将感受完全不一样。甚至说没有必要用或者没有创新思路，那么起码我们还可以一个月做2个，甚至3个产品出来。
问题的关键就在如何真正节省机械化的时间。
工具，任何工具的使用目的都是为了让人们生活工作方便，我们设计产品的目的也毫无疑问的是这样，那么我们设计产品的过程也应该是让我们方便的。时间花在一个好的创意点上，哪怕有技术成本，但这个成本一定会被机械制作成本的节省所抵消。
时间是金钱，就看花费这个金钱换回来的是石头还是钻石了。

感谢二当家抛出对此问题的看法，应该会有设计方法革命的。

现在，我又要开始极力去推崇后规范时代的重构与打破思维了！

为什么？因为现在是后工业时代，我们要从大环境背景说起。

17世纪工业革命之前，世界产品制造基本属于手工作坊，产品完全依靠每个劳动者的手工制作，也发明过简单的流水线作业，这样出来的产品，每个产品都有各自劳动者的特点，但最大的问题是工作效率低下，同一类产品会导致水平参差不齐。
工业革命的工业大生产，提供了良好的产品制造标准和机器流水线，工作效率上百倍提高，商业规模也上百倍的扩大，人们用到的产品有了统一的规格和质量，也有了统一的使用习惯，同时产品的价格也大大降低。之后，全球化，品牌化，随应而生。

上世纪末，量身定制，个性定制，自定义设计开始进入大众视线，计划经济后的开放经济让人们内心个性需求开始膨胀，大家看厌了一成不变的产品，不喜欢毫无个性的东西，更甚者开始推崇手工作坊时代的物品，这样，应声而出了宜家家居这种自定义家居产品。

以上简单的回顾历史上的产品设计，其实不是简单的轮回，而是更进一步的发展，产品的标准化不是简单的千篇一律，发展到这一步应该是更高级的利用工业制造来满足个性需求。

看我们的互联网产品，是不是都要这样来做呢？答案是否定的，任何事物都不能一盆水端平。我把我们的产品分为三类，一类是快速应用型，产品的目的就是快速应用，不能让用户多待一秒钟，而且让用户走的明白，走的确认。这类产品往往是流程设计，注册设计，表单设计，搜索设计，因为要求快，这种设计往往需要高度简洁与易用（不排除因为品牌效应而做的个性设计，比如每个网站的登录框）。

另外一类是自我应用型，产品归用户来管理，比如个人空间，我的XX的产品，这类产品的目的是留住用户，希望用户能多点时间呆在这里，因为其他用户可以访问使得用户自己希望自己的空间有个性，与众不同，自定义的设计产生。而为了网站提供的应用可以插入到任何人的地方（当然一般插入与否是用户自己的行为），这种自定义又是控制在一定合理的统一框架内。

还有一类，不需要自定义，也需要个性化设计，而且是有一定的品牌性，页面内容相关性，我叫它服务应用型，垂直网站就属于此，这些产品不属于用户自己，但需要给用户灌输品牌特征，让用户明白设计表达出了内容特点，所以，美容产品不能设计成数码产品的样子。

通过以上三类产品，我们就可以看出，其实对待产品设计，不能用一个标准来对待的，分析清楚各自的特点和实际给用户的反应，设计师们要有针对性对待，所以有一种言论：“你这个产品搞特殊，那其他产品是不是都要特殊”。这句话本身就已经一盆水端平了，有计划经济的味道。

转眼，碳酸将迎来一周岁的生日。这一年中，那些生动有趣的分享会还历历在目 ——宗羲大师的字体、阿福的情绪版和故事版、飞飞的视觉、襄襄的文案、在天的瘦身日记 …….

6月4日，我们将展开碳酸周年庆的各项庆祝活动。届时，我们将第一次邀请公司以外的，业内名U前来分享；还有碳酸饮料会的周年回顾，优秀讲师评比；当然啦，还有那些吃吃喝喝的事儿……

特邀嘉宾：董建明(上海)
美国Paypal高级研究专家   HFI亚洲区技术总监。毕业于美国普杜大学 HCI专业，博士。董建明先生具有超过十年的用户体验研究经验，先后在IBM，eBAY以及Paypal中担任高级研究员，实施和领导了大量独特鲜明的用 户体验研究。他的研究兴趣和技术覆盖了大量的用户为中心的设计领域，从探寻，到形成化和积累性研究方法。他还是EZSort的创立者，EZSort 是全世界人机交互团体广泛使用的卡片分类和集群分析软件。同时持有至少四项已注册专利和六项在审议专利，以及人机交互设计和评估领域的七项发明。

分享课题：
“User-Centered Information Architecture Design – Card Sorting Methodology and Cases”–以用户为中心的信息架构设计。

请关注我们的后续报导！

　　SQL全名是结构化查询语言（Structured Query Language）,一直是后台开发者用来操作数据库的语言。对于我们大部分前端开发者来说，数据库和SQL目前看似都是遥远和陌生的。

　　然而随着Web的发展潮流，一方面Web正在成为新的应用平台，越来越多的Web App为了提高用户体验，纷纷推出离线功能，比如Gmail、Facebook、WordPress等等，当然他们都依赖于本地存储方案。W3C在最新的HTML5草案中，就加入了浏览器端本地数据存储（Web Storage）的规范，而SQL语言就是其中的一部分，这对RIA应用有特别重大的意义。浏览器内置数据库，通过脚本操作客户端的本地存储，就可以圆满的解决保持客户端状态的大难题。让人欣喜的是，尽管浏览器大战狼烟四起，但是新版的主流浏览器都不约而同的提供了对本地存储规范的支持。

　　另一方面，云计算的出现，让OpenAPI的应用越来越广泛。来看看Yahoo！的YQL(http://developer.yahoo.com/yql/console/)， 以及Facebook的FQL(http://wiki.developers.facebook.com/index.php/FQL)， 还有Google App Engine的GQL(http://code.google.com/intl/zh-CN/appengine/) ，分别是三个业界翘楚推出的基础开放平台上的结构化数据的查询语言，他们都用了大家熟知的SQL-Like 的语言作为自身开放平台的接口交互语言。

　　我想原因有以下几点：

　　　　1.SQL非常易学！它是大部分Web开发者都已经熟知的一个语言标准，很容易上手。

　　　　2.SQL语法简单，但应付一般的数据查询和操作已经绰绰有余。特别是对于轻量级的本地存储来说，直接用SQL已经能满足绝大部分业务需求，同时非常便捷。

　　　　3.用SQL的语法，可以让OpenAPI的设计优雅简单。过多的参数定义会使得API不够灵活。而采用SQL直接作为参数，增删改查等操作的传递甚至不需要去改动接口。

　　我们几乎可以肯定，随着后台程序的底层服务化，除了负责数据展现，数据的获取和操作也会逐渐成为前端工程师的工作内容。这也意味着前端工程师的职责会越来越大。当然，我们需要掌握和了解的技能自然也要更加丰富—HTML、CSS、JAVASCRIPT、FLASH、服务端编程语言 … 而SQL正在加入到这个序列中来。

　　SQL语言离我们前端不远 — 它，已经轰然在我们眼前！

相信大家从去年圣诞节开始，逐渐发现淘宝网首页的标志开始有了新的形式，从过往的静态图片节日LOGO变成了FLASH的动画小故事LOGO。

1.1淘宝网首页FLASH LOGO设计的意义

淘宝网首页的FLASH 节日LOGO设计是为了活跃淘宝网首页的节日气氛，以情感化交流设计的方式为广大用户在大型节假日之前登录淘宝网购物营造良好的购物氛围。同时，传达淘宝网大众化的定位、欢乐的购物体验、无所不包的商品等等特点，从而潜移默化地在消费者心目中建立起淘宝网独特的品牌形象与品牌个性，使淘宝网在越来越多的同类C2C网站中脱颖而出，增加消费者对淘宝网的黏性。淘宝网首页FLASH节日LOGO设计属于在线品牌推广非常重要的一步。

1.2淘宝网首页FLASH LOGO设计的特点

节日静态图片LOGO设计几乎所有的网站都在做，但Google在这方面的设计优势和品牌积累已经非常雄厚，任何后来者想要涉足该领域，都免不了落得一个“模仿Google”的口实。因此，淘宝网首页的节日LOGO设计如果要做出自己的名声来，必须有自己鲜明的设计和视觉风格。为了建立起淘宝独有的节日LOGO，我们选择矢量图FLASH动画的小故事形式来传达节日气氛，用更加动态的、有趣的讲故事形式树立起淘宝网节日LOGO设计的品牌特色。用“动态”的节日LOGO与一般网站的“静态”节日LOGO拉开距离，使受众在观看时有一种期盼和等待的心情。

以下为2009年淘宝网动画节日LOGO第一季的SWF页面预览效果，

点击以下链接可以看到全FLASH格式的第一季所有LOGO：

http://img01.taobaocdn.com/tps/i1/T1E90hXgwUddNtxVjX.swf

当然，对于节日LOGO收集爱好者（例如我）而言，我们还为大家提供了SWF格式的

LOGO集合包，以感谢大家一直以来对我们的支持，

点击以下链接将直接下载9个SWF格式淘宝官方节日FLASH动画LOGO压缩包:

http://download.taobaocdn.com/ant/Taobao_logoes_collection_season1.rar