CD RIA

UPA2009工作坊讲义：统一体验的设计

2009-12-10T08:47:01+08:00

via Tencent CDC Blog by 标叔 on 12/8/09

　　本文为UPA2009 统一体验的设计PPT讲义稿，应各位同行的要求整理并公布出来，希望能对各位有一些帮助和启发，也欢迎大家一起进行更深入的探讨。

　　最初确定这个题目来跟各位同行和朋友们分享是因为在迈向团队成熟的过程中，我们碰到了关于体验统一化的难题，简单来讲，这个话题可以归结为“用户愉悦感如何传递？”记得在经历了一次较为严重的设计质量危机后，托哥问了我一个问题，如何避免同一个设计错误不再重复犯？一个看似简单的问题，当它涉及到长期项目迭代，短期项目变更，涉及到跨项目组，甚至跨团队合作设计时就变成了大问题，最开始我想引入的是很多公司成熟的经验即为项目建立详细明确的UI规范，这个事情在06年的一段时间里在各项目组热火朝天做起来了，相比较腾讯早期产品的设计，确实是个不小的进步，因为在设计维度上终于可以有据可依，有章可循了，但后来发现这个只能解决某一项目的“同一个设计错误不再重复犯”，不能解决跨项目组的“同一个设计错误不再重复犯”的问题，于是我们开始写统一控件，统一组件，统一框架的规范，花了很多时间，感觉差不多了，准备推行时却发现很多规范开始过时了，同时依靠强制规定的规范制定模式逐渐成为束缚设计师工作热情的事情，设计师要额外做很多工作，还看不到直接效益，因为为项目制定规范最后总是淹没在浩如烟波的文档体系中了，没人关注，这个时候，整个团队，包括我在思考一个问题：规范对设计师的价值在哪里，对客户的价值在哪里？如何保持规范的通用性，时效性，实用性，我们大概用了1天来想解决方案，1月来想清楚，1年来做相关的工作推动，3年来一直在持续改进我们工作方式，在这次会上拿出来讨论是感觉自己比较有底气了，也感觉自己沉淀了一些实际的工作案例，也希望对有需要的朋友们有一些帮助和借鉴，终极来看，我们最终将要建立一个协同的工作空间（collaborative? workspace），就像我表述在“应用，维护，更新”slide里那样，希望借助我们正在搭建的协同平台，最终使得对设计细节的推敲能成为设计师的一种工作常态，希望对设计的体悟和总结不再是某个人的“只可意会不可言传”的skills，而是整个团队的思考结晶，希望涌动在设计师群体当中的鲜活思想不再是一种临时的，短期，松散的状态，而是可以在一个空间能够快速聚集，在非组织化的状体下，大家仍然可以相互吸引，相互激荡，并借助平台空间的力量，能将众多的角色一一卷入进来，也只有这样，设计才能做到不是依赖于某一两个明星设计师，只有这样才能真正发挥第一线设计师们的聪明才智，最后才能做到真正意义上将设计做深，做透，做细。就像《Here Comes Everybody：The Power of Organizing Without Organizations》中讲到的那样，我一直坚信无组织的组织力量是最大，最有生命力的，设计思考永无止境，让我们在协同合作中将我们的思维从一维扩展到万维吧。

注：部分内容应公司的保密政策有删减，请见谅

版权所有 ? 2008
您看到的文章来自腾讯CDC博客 http://cdc.tencent.com ，原文链接为 http://cdc.tencent.com/?p=1963 ，转载时请注明出处。

本文由maxwellsdemon分享

点这里查看原文

让页面等待不再漫长

2009-12-10T08:40:30+08:00

via 所有文章 - UCD大社区 by oligan on 12/8/09

在上星期的网站性能研讨会上，我们了解到，几乎大半部分的访问者如果他们察觉到一个页面或者一项功能将花费两秒钟以上的加载时间，他们将会放弃这个站点。

关键是“察觉”页面加载。

如果有一种方式在一个页面或者对象加载的时候能够娱乐观众又如何呢？

例如给他们一些东西去阅读会怎么样呢？

当你在银行或有线电视公司排队的时候，一些文字信息可以分散客户的注意力，让等待时间看起来不会那么长。这里我将介绍我发现的网上零售商们的做法。

告诉客户他们在加载什么

Diapers.com告诉客户加载的是一个互动式的展示。“互动式的展示”听起来是有吸引力的。或许有吸引力到能够激发一些人使之更有耐心。

同样的，Anthropologie解释它加载的是一个全球性的检验。也许有人会疑惑为什么要加载超过2秒钟，但至少有一个承诺的事情发生，而不是一张空白页。

对你的对象倒计时

只有geeky们明白对象将是什么。但Dell.ca对对象进行3-2-1的倒计时满足了“are we there yet?”（我们还在那里吗？）。（这段翻译的怪怪的，大意就是采取了倒计时的方式）

做一个承诺

弹出窗口展示放大图片和多个视图是许多顶级在线零售商所采用的方法，但它们花费了许多美好的时间用来加载。DSW承诺的加载延迟是“well worth the wait（非常值得的等待）.”

让访客们笑

“Nothing’s worse than waiting for a page to load. Except?getting cheated on, of course（没有比等待一个页面加载更糟糕的事了。当然欺骗除外）”Moosejaw Mountaineering是这么说的。（这个幽默理解不了=。-，让访客笑就对了）

除了DSW 和Moosejaw，我并不认为以上零售商在页面加载时的目的是娱乐访客、劝说访客、告知访客抑或是简单的转移访客的注意力。但我们有机会去利用这个有价值的主张，加载页面/功能上的免费信息或者幽默的内容都可以用来减少“察觉”页面加载时间。这个想法是可以在用户试验中继续探究的。

原文

源地址：http://imnotahippie.cn/?p=41

本文由maxwellsdemon分享

点这里查看原文

为中文而设计的文本框

2009-12-07T11:00:34+08:00

via 所有文章 - UCD大社区 by 大脸 on 12/5/09

我一直觉得，文本框的这个东西，在有输入法的国家，是我们这些懒人的杯具，文本框的自动完成功能，在配合输入法下，简直是个鸡肋。一次次的切换Ctrl+Space，是否有让你崩溃想敲烂键盘呢？

上面的那张图已经很明显的让我们感觉到了三个问题：

输入法把自动完成遮挡住了，我看不见。
使用键盘↑↓键只能切换输入法内的选字，无法选择自动完成内的选项。想用却用不到。
当你懊恼的打算用鼠标去点自动完成列表内的文字时，杯具发生了，你发觉，你点了，事实上什么效果都没有。你的文本框变成一遍空白。（在Chrome下多种中文搜索引擎有此问题，杯具啊。）

备注：经过笔者测试多种搜索引擎在不同浏览器的呈现效果，这三个问题出现的几率各不相同，但在chrome下这三个问题非常明显。（Chrome渲染有问题？）

关于问题一

在Chrome下似乎没有解决方案，所有的搜索引擎表现都如文章开头的图片的效果。

IE下，大部分的搜索引擎都采用了一种笨可是最有效的方法：只有文字被完全输入到文本框内后，自动完成才出现，这样就避免了遮挡的问题了。

在FF下，大部分搜索引擎也是采用与IE内的做法，隐藏自动完成。当然，也有笨家伙：百度和有道，在FF下依然还是遮挡住了。

关于问题二

因为在IE与FF下大部分搜索引擎采用了上诉的的方法避免了出现输入法与自动完成，所以这个问题主要是出现在Chrome内。从实际的测试中发现，国外的搜索引擎表现更佳。

在Chrome的Google与bing搜索，如果使用↑↓键，是可以选中自动完成的，当然，你的输入法选字也同时切换了。

当然，也有笨家伙：Chrome下的所有中文搜索引擎，以及FF下的百度和有道，依然还是无法使用↑↓键选择自动完成。

关于问题三

好了，我就直接说笨家伙吧，这次上榜的还是百度与有道。但是百度这次可以欣慰了：有道垫底了。有道在FF与Chrome下鼠标点击自动完成后，文本框都会自动消失。百度只在Chrome下出现此问题。

说明这些问题并不是表示我强烈的鄙视中文搜索引擎，相反我更爱好他们。但我们需要考虑的问题是：在设计文本框的时候，是否应该更加考虑到一个现实：所有的中文用户都在用输入法输入文本框。我们的操作比英文用户更复杂。

在输入的时候，中文用户多了一个翻译的步骤，把键盘上的字母翻译为中文汉字。这也是中文用户偏爱鼠标操作的原因，因为输入的工作太复杂了，虽然我们的输入法在近几年有着超越的发展，但对于用户而言，这种门槛还是存在的。——至少我的爸妈想使用电脑打字，他们就不得不去学拼音。

那么，为了使用户少按一次ctrl+space，让用户操作更流畅，在文本框的设计上，我们必须更加细致与谨慎。我个人总结有以下几个方法。

禁用输入法

如果某些文本框只允许用户输入字母符号以及数字（如登陆界面的“用户名”），那就禁用输入法吧。

网易邮箱的登陆界面就采用了这种方法，Web界面的实现手段很简单，只需在CSS代码内加上：ime-mode:disabled;

当然，目前很多产品的登陆界面都进行了相同的处理，不妨挖掘下更多产品内部的文本框吧。如验证码输入框。

用户输入之后才提供响应

只有用户把文字输入到文本框内才提供响应，这是主要是针对一些自动完成和即时搜索（输入后自动搜索）功能的。

windows7的资源管理器的搜索框为即时搜索，但文字还在输入法内时，它并不启动搜索。这样的设计能让界面更简洁且让用户容易理解。

提供正确的键盘反馈

如前面Chrome的下的Google，还是支持↑↓键选择自动完成的，这样至少保证了，在使用输入法的时候，用户的一些按键还是有效的。

当然，我也见过一种很白痴的界面，他对Enter键的感知错误（Enter键在输入法内常用作用是输入英文字母），截图我无法找到，但大致是这样。

注：下图是我PS用以说明问题案例（因为暂时找不到真实案例），并不代表其真实情况如图所示。

按下Enter之后，系统自动响应了默认的“登录”按钮，但事实上我只是想把邮件地址输入文本框而已。明显的键盘反馈错误。

用户输入之后才提供响应

只有用户把文字输入到文本框内才提供响应，这是主要是针对一些自动完成和即时搜索（输入后自动搜索）功能的。

windows7的资源管理器的搜索框为即时搜索，但文字还在输入法内时，它并不启动搜索。这样的设计能让界面更简洁且让用户容易理解。

尝试使用拼音识别

毫无疑问，拼音识别能够有效帮助中文用户，就算他没有使用输入法，同时也有可能帮他纠正一些汉字输入错误。

史上最佳中文文本框？

我把这个讲颁给QQ邮箱的写信页面收件人文本框，原因有三个：禁止输入法，块状结构，拼音识别。如果你把联系人都加了中文名字（火星文就没办法了），试试输入10个人的邮箱地址，你的速度有多快？告诉你，我只需要25秒。

从图中可以查出，这个文本框是支持拼音识别的，同时，他采用了块状结构，邮件地址是整块被删除或增加的。

无疑QQ的设计值得学习。

史上最差中文文本框？

我要把这个奖颁给新浪微博的登陆框，当然，他们最近改进了这个设计，不过，这个反例，值得我们吸取教训。（来自Fenng）

如果在这个图内还存在输入法的输入框呢?够杯具了吧,OK,我想这个图已经算是文本框设计的经典反例了,欢迎大家膜拜学习。

写在最后

文本框是一个很细节的东西，因为他属于一个用户信息收集的有效控件。而我们的中文用户，值得拥有它们自己的特色文本框。

在设计的同时，我们更应该考虑到用户的输入法状态。

文中的测试皆采用搜狗拼音输入法测试，如有不正确的，还请指正。

源地址：http://www.userkon.com/tolyer/design_input_for_chinese.html

本文由maxwellsdemon分享

Interesting～

点这里查看原文

视觉设计前瞻实用性研究（PNVD）第二期

2009-12-07T10:57:03+08:00

via 所有文章 - UCD大社区 by 牛来了 on 12/5/09

本期特约作者：打火机，菜花，布莱恩，为大家一起分享他们的独特见解。

关键字：创意、混维
所谓反 Box 布局，就是不再拘泥与传统的 Box 布局模型，而是采用一种更有创意的的布局，为用户带来非常规的视觉体验。然而需要指出，这种创意布局需要非常注意易用性问题，一种新的创意布局需要时间去慢慢成熟。

当混维的概念进入页面
设计师刻意营造出来的3D空间感被突如其来的图片和文字打回2D的原形，着实让用户体验了一把错落的空间感带来的快感。

小细节成大效果
有时候，我们需要做的仅仅是处理好一个简单的小细节，这便让整个画面活了起来。。

上图列表式的展示效果让人眼前一亮，但是其真正的亮点在于上下边框两条并不起眼的不水平的线，微妙的透视关系让用户感觉到了这个页面的空间感，配合 flash动态效果使得这种看似呆板的布局变得调皮而生动。

左图是一个页面的导航部分，简洁的大色块和文字，乍一看并未觉得特别，但是设计师用了简单的透视关系，让导航左边的色块向后延伸，便产生了奇特的空间感，内容也由此变得有层次感，整个页面的结构也更加清晰，带给用户愉悦的体验。

关键字：统一直观
单页布局是使用单一页面展示站点的全部内容，这并不意味着站点内容少，这个页可能很复杂，包含了大量图形和动画效果，加载的时间也会有些长。比如，用户点击导航菜单后，该栏目下的新内容会通过渐入渐出，滑入滑出等动画效果显示出来，替换原来的内容，而页面其它部分始终保持不变。

角色扮演游戏
单页布局擅于扮演各种角色，用于场景表现实在是再适合不过了，直观地将信息传达给用户。

关键字：视觉冲击前卫
象巨型字体主导当前 Web 设计一样，巨型插图风格设计似乎也正流行起来，巨型插图可以和巨型字体的结合使用，带来更吸引人，更生动的效果。另外，设计师们越来越喜欢使用那些色彩鲜艳的图形提供背景，包含各种风格，抽象画，剪贴画，剪贴簿，装饰画，怀旧，水彩，有机纹理以及照片背景等。

潮流插画
个性的插画风格和醒目的文字，猛烈地刺激着用户的视觉。

制造氛围
这类表现形式似乎让失去了激情的设计师们一下子找到了艺术家的感觉，复古风、矢量插画、照片拼贴、传统艺术等各种风格的图案、元素在这里能够发挥得淋漓尽致。
当然，过于猛烈的视觉刺激可能让用户产生视觉疲劳，让我们看看另外一种安静的，舒服的表现方法。

如左下图，整个画面被背景的大图气氛所感染，大胆的留白简约而静谧。简约设计在这里也能得到大胆的发挥。

写在后面的几句话
看了这么多优秀案例，可以看出未来web design发展不拘一格，呈多元化方向发展，没有做不到，只有想不到，身边的一支笔，一张纸，都可能触发我们每个人的设计灵感。所以，当我们在苦苦挠头的做需求的时候，不妨多看看一些好的设计作品，或者倒上一杯冰水，让自己冷静下来，跳出自己的惯性思维，更多的从生活中，来发掘出新的创意。
最后，还是那句话，希望这些优秀作品，能够对您接来下的工作、学习、人生观、价值观能有深刻影响。

写在前边的话
提到传统的WUI设计，通常想到是品牌传达、氛围渲染、信息排版等纯粹的视觉表现。然而随着随着诸如 jQuery， Mootools， Prototype 一类的 JavaScript 框架的崛起，视觉表现不再仅仅是静态的Newspaper，适当的引入上流、易用的动态效果正是当前网页设计的趋势。下面主要结合实例与大家分享jQuery tools的华丽应用效果。

Scrollable image gallery
Apple.inc近期的几款新产品首页首屏内容统一采用了具有冲击力的产品大图，当我们点击下方的缩略图后可以发现，产品图以流畅的滑动视觉表现进行切换。这有别于传统站点设计中生硬的单帧切换，同时细腻的动态效果与Apple时尚科技的品牌气质非常Match，也传达出设计师对细节的完美追求。

http://www.apple.com/ipodnano/

Tabs
Panic Coda的网页设计的整体风格非常清新，介绍部分同样也运用了jQuery技术，点击tab轻盈的切换与清新风格相映成趣。操作体验上同样值得称赞，不需要刷新页面、不需要拖拉滚动条、甚至不需要移动鼠标，只需要单击就可以完成全部信息的浏览。

http://www.panic.com/coda/
Tooltip
ToolTips是非常实用的临时信息表现，之前我们只能使用windows默认的小黄条。而现在无论是酷炫的DockStack风格，还是清爽light风都可以配合页面风格与内容的需求的设计任意表现。设计贴士：Tips中加入适当的阴影会增强视觉冲击力感，同时也能更好的把视觉重心转移到当前的信息上。

http://flowplayer.org/tools/demos/tooltip/any-html.html
Overlay
在现代WebUI设计中，浮动层是一种非常有效的UI概念，可以用来显示产品细节、不再需要刷新整个页面。Apple配合整体的页面风格采用白色系，设计手法很简洁，并没有多余的元素，界面中最重要的操作“关闭”按钮使用了白色的反色醒目的置于界面中，看得出对细节设计的考究，对每个细节都注入人性的关怀。

http://www.apple.com/macosx/what-is-macosx/dock-and-finder.html
Palm的浮层设计在黑色80%透明度的背景色叠加下，使浮出层与点击前的内容保持一定的联系，同时又能很好的将目光focus在当前信息中。内容区采用了无边框的设计配以柔和的阴影产生了细腻的层次感，操作区设计同样非常简洁，所有的元素与手法综合起来传达出低调的高品质感。

http://www.palm.com/us/products/phones/pre/index.html
目前这些效果已经成熟的应用于国际知名站点中，不但以很炫的方式展示了产品，同时很优雅的提升了网站的易用性，从而间接增强了用户的品牌好感度。实现它们并不需要大量的代码和流量，精巧的JS文件只有 5.72 Kb，现在只需要通过与前台工程师简单的沟通就能实现。快在你的下一次WUI设计中尝试引入这些效果吧
More Resources:
http://flowplayer.org/tools/demos/index.html

在现代设计领域中，插画设计可以说是最具有表现意味的，它与绘画艺术有着亲近的血缘关系。插画艺术的许多表现技法都是借鉴了绘画艺术的表现技法。插画艺术与绘画艺术的联姻使得前者无论是在表现技法多样性的探求，或是在设计主题表现的深度和广度方面，都有着长足的进展，展示出更加独特的艺术魅力，从而更具表现力。从某种意义上讲，绘画艺术成了基础学科，插画成了应用学科。
网路上常充满了各式各样地商业信息，插画设计已成为现实社会不可替代的艺术形式。其中插画特有的那份活泼、轻松、亲切、个性感觉，是其他表现手法无法代替的。若插画在网站设计中，把握不当就会被人认为“非”主流、低龄、乱等毛病。这里整理一下自己收集一些较出色的网站，看看国外的大师们是如何找到一条可以两者结合的道路。希望带给你同我一些建设性的建议。

插画式Banner：
左图：Top区域用色彩明快，线条简练的插画吸引视线，页面主题采取简洁色块。这种插画和网站的最基本组合方式，很适合应用到一些活动页面当中。
右图：同样Top区域运用插画作为头部，带来不少的眼球注意。但在页面内容区，颜色的对比，造成一种反差效果。在个性、活泼感强的广告、活动即可使用此法。

网站细节，插画元素运用：
左图：在网站小细节运用插画元素，既简练又有力，细节的奢华。
右图：同样是细节运用了插画元素，却给用户带来的是一阵轻松亲切的感觉。

全站式插画：
整站都用插画贯穿的在韩国和日本应用较频繁，无论大小网站，都喜欢用上一两个卡通元素。而这基本成为日韩两地网站的一大特色。我们平时在活动和广告都可以应用。同时左图中的动势设计，有引领观赏者走入主题之感。

http://www.pictoplasmaconference.com/colourme.html
与日韩一样爱用插画的欧美国家，也很喜欢使用全站式的插画。但欧美会更着重于颜色鲜明的对比，和大量使用实物、3D技术作为辅助剂。

http://web4t.oneforyouoneforme.ca/indexFlash.html
“线条”是绘画最基本的表现手法，这个网站除了简洁的线条感外，特别的地方还在于是蓝色和白色两快区域是可以同时有两个鼠标在操作。为单纯的线条营造了科技感。

http://www.tracychapman.com/
这个网站咋眼看是一幅白底黑线的黑白插画。当你进入页面后，你很快就发现右上角有一块色条，你可以用上面的颜色任意添加到画面的物品中，可以让用户重温一把儿时玩填色游戏的乐趣。

http://quakequizsf.org/
一个关于地震常识的网站，这种手绘的风格让人易于去接受枯燥的知识。节制的颜色运用、规整的线条，还有谁敢说它低龄呢？

http://watchmenmotioncomic.com/
这个网站中，随着鼠标的移动，插画呈现3D转动效果，即观赏画面的角度改变。原来在单纯的画面中，只要加如小小3D技术，网站也可以很有型。

http://www.knutselwereld.nl/
还有一些…

左:http://14-7.com/http://14-7.com/
中:http://cardboard.theupsstore.com/
右:http://ecodazoo.com/
以上几个网站均是插画、实物、3D的结合。这种结合方式在欧美设计师手下很熟练地把玩着。尽管欧美插画的创作媒材多变且多元，但有一共同点就是透过这些媒材的使用将可塑造一画面的气氛与情感，从而传达出作品的意象。意即，一媒材的使用可看出创作者如何营造与诠释文本或创作者本身所欲表达的概念。

现在带有插画的网站多以线条、实物、3D卡通……为主，还有更多的插画风格等着我们去尝试，找出更多插画与网站关系纽带，设计出属于我们自己风格的网站，同时我们创作的插画风格符合产品的品牌风格。。

源地址：http://webteam.tencent.com/?p=1562

本文由maxwellsdemon分享

不错的设计～

点这里查看原文

为什么老板总是不喜欢 Social Media

2009-12-05T16:48:26+08:00

via WebLeOn's Blog by WebLeOn on 8/8/09

开心网可以说是目前中国使用最多的SNS，它已经成为一个非常强大的社会化媒体营销工具。但我们发现，有很多公司，甚至是从事和网络、市场营销相关工作的公司和部门，都禁止员工在办公室使用开心网。当然，这种情况也不是中国独有，一些欧美公司也不允许上班时间访问Facebook或Twitter。

那么，很多公司老板们为什么容易不喜欢社会化媒体呢？他们有最简单的理由：降低工作效率。但我觉得，真正的问题是出在认知、效率评估、公司文化等方面。

先来说下对社会化媒体的认知。很多人把社会化媒体等同于游戏，以至于他们把“玩”当做使用社会化媒体工具的动词：“玩”开心网、“玩”Twitter。这其中固然有国内SNS功能上娱乐性质偏重的原因，但也反映了人们并没有意识到Social Meida娱乐以外的价值。既然很多员工都这样想，老板当然会把Social Media当成工作效率的杀手。

另一个问题是如何评价员工的工作效率？其实在SNS、Mircoblog这些新兴的Social Media Tools出现之前，已经有足够多可以在办公室用来“消磨时光的办法”：一天数次的抽烟时间、参加无关紧要的会议/培训，即使在电脑前，我们也早就有了BBS、IM、群发邮件这些时间杀手。社会化媒体的出现，不意味着员工的工作效率会比之前更低。

缺乏规则和培训也是让老板对社会化媒体不放心的原因。对于员工使用社会化媒体，制定规则肯定比完全禁止更得人心。而如果通过一定的培训，让员工也能利用社会化媒体来帮助他们的工作，将是老板和员工都希望看到的结果。

Social Media作为一种新的营销工具，决定它效用的是使用它的人。因为社会化媒体会浪费时间而拒绝使用它，其实无异于因为刀能杀人而不用其切菜。等竞争对手的社会化媒体营销取得了成功再接受它，很可能已经为时太晚。

-Original By WebLeOn

本文由shawn分享

点这里查看原文

社会化媒体营销的常规化

2009-12-05T16:41:55+08:00

via WebLeOn's Blog by WebLeOn on 9/23/09

之前看到的一份出自美国国家广告协会的报告中指出，已经有三分之二的营销人员在利用社会化媒体来进行市场营销活动，他们所使用的主要工具包括Facebook、Youtube、Twitter以及LinkedIn。虽然在国内我们有不同的社会化媒体工具，但类似的趋势也在上演：越来越多的品牌开始通过视频、SNS等手段来增加和用户的互动，从而提高网络营销的效果。

eMarketer刚刚公布的另一份报告也显示出相同的趋势。而且这份报告还进一步指出，在未来一年内，使用社会化媒体营销的普及率将达到82%，成为一种为大部分公司所使用的常规营销手段。

品牌和代理公司使用社会化媒体的情况

下面图表里面的数据更有意思一点。从图中我们发现，其实绝大部分的人还是承认社会化媒体的作用。他们还没有参与到社会化媒体中的原因是不得其门而入或者是担心真正执行起来的效果。

品牌和代理公司不接纳社会化媒体的原因：

品牌和代理公司评估其社会化媒体营销效果的方法：

这些统计可以说明的一个问题是，社会化媒体不再是一个蒙着神秘面纱的概念。广告/公关代理公司可能再也没有机会拿Social Media这个字眼来吸引客户的眼球，因为客户们早已经了解它的作用，并知道这是理所当然的营销手段。Social Media成为各种Marketing Campaign中必不可少的部分。

而代理公司目前所要考虑的或者说要去解决的，是如何更有效的执行社会化媒体营销，如何更客观有效的衡量社会化媒体营销的效果。不然，必然会迅速减少和其它代理公司竞争的筹码。

-Original By WebLeOn

本文由shawn分享

点这里查看原文

CPC广告还有多少意义？

2009-12-05T15:31:53+08:00

via WebLeOn's Blog by WebLeOn on 10/12/09

直到今天，CPC（Cost per Click）依然是最重要的互联网广告形式，但是最近comScore 和 Starcom USA在美国进行的一项研究却发现，点击广告的人数越来越少，且点击也越来越集中。

在2007年，有大约32%的人会点击网页上的展示广告；而到了2009年，会去点击广告的人下降到只有16%。

广告的点击的集中程度的变化也非常大。到2009年的3月，超过三分之二的互联网广告的点击，来自仅仅4%的互联网用户。

这样的比例，让人很难再相信“广告点击量”能够完整的体现互联网营销的价值。消费行为模型从AIDMA到AISAS的转变也反映出营销互联网营销的因素越来越多，单纯的CPC广告显得越来越单薄和不合理。

互联网用户的行为习惯在不断的演进，他们对于展示广告的“免疫力”越来越强，而他们在互联网上关注的重点也从原来的门户和资讯网站开始慢慢转移到论坛、Blog、SNS这样更具有互动性的平台上。展示广告本身也越来越无法承载互联网营销的所有任务，而会变成单纯的信息告知途径。

企业要想通过互联网影响消费者整个认知-决策-购买的过程，需要更加多样化的营销手段。这也就是为什么社会化媒体营销被越来越多企业所重视的根本原因。

-Original By WebLeOn

本文由shawn分享

互联网营销和传统营销的区别

点这里查看原文

Twitter List的营销意义

2009-12-05T15:30:23+08:00

via WebLeOn's Blog by WebLeOn on 10/29/09

Twitter终于推出了List功能。在最近的1年多里，Twitter依然是最有效的营销工具之一。那么Twitter List这个新功能又能为营销带来什么新的机会呢？

Twitter平等公开的信息组织构架改变了网络营销的思路，为企业的带来不少新的营销机会。但当你的好友有数千人之重的时候，信息管理又很容就让不堪重负。作为企业或者网络营销的执行者，List功能可以帮助以更高的效率来倾听各方的声音。比如，建立像“上海核心用户”、“XX型号使用者”这样的列表，就能够比较容易的过滤不同客户的需求和建议；

同时，Twitter List也让一个企业/品牌的多个Twitter帐号能够同时出现，更好的展现作为一个整体在Twitter上的形象。做法当然就是把相关的帐号全部放在一个列表里，在之后提及整个企业/品牌的时候，直接给出这个列表，而不是数个单独的Twitter帐号。比如Dell就完全可以作一个甚至几个List，来分组他们在Twitter上的众多功能帐号和员工帐号；

另外，Twitter List也让营销者多了一个了解企业/品牌/个人知名程度和其在消费者心目中的形象的标尺。TA被列进了多少个列表？人们都把TA归入了哪个列表？我们都能够一目了然。

在截这张图的时候，我（@webleon）被加入了24个列表，人们给我冠上了smart、geek、test等称号。 >_<

当然，你也可以利用Twitter List来安排会议/聚会。把参加聚会的人或者是某个会议的演讲者放入一个特定的列表，就可以同时完成告知、聚合、了解、推广等功能。

发挥想象，List能做的事情还真不少。在不久的将来，如果有一个好的客户端能够很好的支持Twitter的List功能，对很多人来说Google Reader也许就再不是一个必要的工具了。

不过，我好像还是有那么一丁点的Geek心理。依然担心Twitter List会不会让Twitter的发展开始偏离其最初的原旨。Twitter有群组功能很好，但一定要Twitter自己来做么？我保留意见。

-Original By WebLeOn

本文由shawn分享

点这里查看原文

大企业如何使用Twitter

2009-12-05T15:26:52+08:00

via WebLeOn's Blog by WebLeOn on 11/29/09

万博宣伟最近对世界排名前100名公司使用Twitter的习惯作了一次调查。让我们来看看这些世界顶尖的公司是如何使用Twitter的。

调查显示，已经有73%的100强大企业出现在了Twitter上。不过有一半的大企业Twitter帐号仅有不到500人关注，和他们在现实世界中的知名度显然不符。更有超过3/4的大企业Twitter帐号只更新了不到500条内容，虽然Tweets不是越多越好，不过作为企业在互联网上的一个窗口，不到500条的更新也是少了一点。

世界100强的企业在Twitter帐户的使用方法上各不相同，有26%仅仅通过RSS或者人工更新来同步发表企业新闻；另外有24%的大企业Twitter帐号也只是作为品牌展示之用。这说明，有一半的大企业，虽然在使用Twitter，但并没有充分利用Twitter的互动功能，而仅仅进行单向的信息传递。

不过，能够更深入应用Twitter的100强大企业也不少。已经有16%的大企业Twitter帐号已经开始在利用Twitter促进销售。一些在互动营销方面更加前卫的大公司所属的Twitter帐号已经开始进行客户服务（9%）和建立权威（11%）等互动。

万博宣伟认为：对大部分世界100强企业来说，Twitter仍然是一个“被错过”的营销机会。企业要最大限度的从Twitter中获益，应该有自己的观点并鼓励讨论；逐步建立自己的消费者和拥护者社区；不断与新客户建立关系并寻找新的支持者。

而在具体操作上，万博宣伟建议下面5种方法：
1，聆听对话；
2，参与交流；
3，经常发布有价值的信息；
4，回复那些谈论公司的人；
5，锐推相关的对话内容。

下载完整报告：Twittervention Study（PDF）

-Original By WebLeOn

本文由shawn分享

Twitter在发达地区已经成为了一个很大众的沟通媒介，在中国可能需要一点时间。。。

点这里查看原文

10大变化新版Android 2.1系统大揭密

2009-12-05T15:23:51+08:00

via Android/Android手机/Android资讯网 by admin on 12/2/09

腾讯数码：Android系统平台推出的时间虽然不长，但却受到了众多手机厂商的鼎立支持，尤其是悉数发布的众多新机更是极大的提升了Android系统的关注度和影响力。与此同时，Android系统也在不断的完善和更新，从过去的Android 1.1、Android 1.5、Android 1.6到现在的2.0版本，新版本带来的人性化的体验也让人们对最新曝光的Android 2.1系统版本给予了更多的期待。日前，继该版本在HTC Hero手机上惊鸿一瞥之后，来自国内外的玩家们经过一致努力，不仅将全中文界面基于Android 2.1版本的Sense UI界面成功装入最古老的Android手机G1上，而且通过对新版本的介绍，也让人们第一次Android 2.1系统版本的最新变化和改进有了初步的了解。

从目前了解到的情况来看，新的Android 2.1版本相比过去更新了许多的内容。总结起来主要包括以下10个方面变化：一是新版本的电源widget比过去更好看，并且在具备2.0版本所有功能的同时可以绑定多个Google账号；二是新版本在设置里增加Personalize功能，并且在无线控件里有了VPN设置，而这在之前Sense的1.5里是没有的功能。三是新版本增加Mobile network sharing功能，并且手机声音和显示也可以选择增加的重力感应校准。第四点变化是新版本将Location和Privacy分开，并且可以进行Connect to PC设置。

至于新版本的第五点变化则是拥有更多桌面插件，在操作上更加简便和快捷。第六是还增加文字到语音转换功能；第七点则是新版本还采用新的拨号界面，其特色是按键更大，更易于操作。而新版本的第八点变化则是拥有最新的Google地图和将搭载新的浏览器；至于新版本的第九大则是具有所谓的全局搜索功能。相比而言，Android2.1版本的第十点变化则比较值得关注，其特色拥有最新版本的Android Market，将支持通过移动运营商网络支付购买应用程序和软件。

除了以上变化之外，有关新版本来自国外网站的消息还披露在12月11日将会更新的内容出炉，而目前所知的除了新Android Market，将支持通过移动运营商网络支付购买应用程序和软件之外，还有针对部分Android 2.1的设备更新；针对摩托罗拉Droid和HTC Eris的系统升级以及Android Market桌面客户端等新内容。不过，关于这个新版本的具体发布时间目前还没有准确的消息。但根据之前海外媒体披露的说法，即将到来的Android2.1仅仅是一次较小的发布。但该版本仍然是一次更新，并展现出Google对移动操作系统的重视程度。同时预计Android 2.1版本会在接下来的几周到达市场。相比之下，新版本的最有可能的发布时间还是可能在12月即将结束之际。

更多Android 2.1版本截图：

本文由shawn分享

点这里查看原文

Android 2.1+Sense界面成功移植HTC G1

2009-12-05T15:23:20+08:00

via Android/Android手机/Android资讯网 by admin on 12/3/09

中关村在线:就在Hero版的Android2.1固件曝光之后，经过国内外著名Android手机玩家HackDrizzy和Xdan等人的努力，在短短的两天时间内就制作出了基于Android2.1的SenseUI界面，并且成功的将其装入第一款Android手机G1之中。

?
Hero Android2.1已经移植G1

　　目前笔者还没有详细体验Android2.1，但是根据国内著名的Android手机论坛——机锋网放出的消息来看，Android2.1在多方面进行了改变。
　　1.增加电源widget

　　2.可以同时绑定多个Gmail账号

　　3.更快的运行和加载速度

　　4.设置里增加个性化功能

　　5.无线控件里有了VPN设置

　　6.增加非常实用的网络共享功能

　　7.声音和显示选择增加的重力感应校准

　　8.全新的商店

　　9.连接电脑设置

　　10.文字到语音转换

　　11.新的拨号界面

　　12.更多桌面插件

　　13.新的Google地图

　　14.新的浏览器

　　15.全局搜索
第2页：Android 2.1在G1上运行界面欣赏

?
界面截图

?
?
?
界面截图
?
?
界面截图

　　目前Android2.1的ROM已经放出，因此因此对这个版本固件感兴趣的朋友不妨用自己的G1进行尝试。但是笔者认为，G1受到自身配置的限制，可能很难流畅的运行Android2.1何况这个版本的Android2.1还加载了Sense界面，这样的界面对于G1来说应该是一种考验，我们更应该期待移植G2的ROM出现。

本文由shawn分享

点这里查看原文

JavaScript Memory and CPU Profiling in Adobe AIR 2

2009-12-05T15:20:18+08:00

via Adobe AIR Team Blog on 12/3/09

One of the biggest challenges our team continued to hear from JavaScript developers using Adobe AIR 1.5 was that it was too difficult to track down CPU and memory issues within their HTML-based AIR applications. To help JavaScript developers detect and resolve these issues, we have introduced new runtime support for CPU and memory profiling of HTML-based AIR applications in the Adobe AIR 2 beta.

By doing so, tools like Aptana Studio can build powerful features that make analyzing memory and CPU usage of JavaScript execution within an AIR app a breeze. In the video above, Paul Colton, CEO of Aptana, provides an overview of how Aptana Studio is able to take advantage of the new runtime support and build powerful new features to assist developers in tracking down performance issues.

Some of the features included in the new Adobe AIR 2 Beta Plug-In for Aptana Studio include:

Live Objects View
- Shows current information about how much current and cumulative memory is used by the application
- Shows the number of current and cumulative instances of objects
Memory Usage View
- Peak memory used
- Current memory used
Memory Snapshot and Object References Views
- Captures the number of class instances as well as memory used at a point in time
- Select an object to view its references
- Allocation trace information reveals where the objects are allocated
Loitering Objects View
- Displays the memory usage difference between two memory snapshots
- Helps detect loitering objects that are still present
Performance Profile View
- Displays a list of all method calls along with amount of time for each to run
Method Statistics View
- Presents information on the callers and callees of a function including statistics
- Quickly navigate to location of the function in the code

Both Adobe AIR 2 and Adobe AIR 2 Beta Plug-in for Aptana Studio are currently in beta. If you run into issues or have feature requests, both the Adobe and Aptana teams would appreciate hearing your feedback on these new capabilities.

Next steps:

Watch the tutorial video for a quick introduction on the new profiler capabilities
Download the Adobe AIR 2 Beta Plug-In
Discuss the feature on the Adobe AIR 2 Beta forums or post a comment below

Note: For Flex and Flash developers, support for application profiling has been available in Adobe Flex Builder for some time. We are very excited to bring this support to JavaScript developers as well.

本文由shawn分享

点这里查看原文

轻设计，让网站灵敏轻便的6个技巧

2009-12-04T16:00:56+08:00

via 所有文章 - UCD大社区 by Kevin Zhong on 12/3/09

在网站或软件的策划和设计过程中，我们经常听到这样的讨论：“这个功能设计得太重了”又或“我们希望能够处理得轻一些”。似乎轻设计是时下炙手可热的话题，也是方兴未艾的Web2.0大浪下设计师们的最爱（看看那些在全世界遍地开花的SNS网站，无论是视觉元素还是交互流程均能轻则轻）。本文主要从实践和总结的角度出发，提出了让设计变得更轻的6个技巧。

何为轻设计：

在开始之前先需要明确下何为轻设计。这里并不想给轻设计下一个专业的定义，只是归纳了大家对轻设计所应具有的特性的理解。
具有灵敏的可交互元素：页面上的链接、文本框、按钮等可交互元素能灵敏地响应操作并即时反馈。
轻便的流程和提示，不打断用户的当前任务：一项任务尽量用少而清晰的步骤去完成，提示和临时任务尽量不中断用户主任务，不要让用户做不必要的确认和操作。
不干扰用户的注意力：用户是来使用产品和服务的，而不是来欣赏精美的设计，如果使用过程中会因为设计元素分散注意力那么可能是设计太重了。试着少用些无用的装饰和细节。

轻设计的6个技巧：

1. 灵活的logo响应区
点击网站的logo通常能将我们带回到首页。从这个角度看，Logo不仅起着品牌标识的作用，还承担了重要的导航功能。就连普通的链接当在鼠标划过时都有下划线或者变色提示，那么logo作为一个更为重要的可交互元素，是否也应该在鼠标划过时提供适当的反馈呢？
下面列举了几个logo区灵活响应鼠标例子，在使用过程中发现，小小的变化不仅提升了可用性，还让网站显得灵敏而有生气。

2. 灵敏的可交互元素
导航对于网站的重要性不言而喻，导航元素要即时响应鼠标操作。

重要的操作和引导按钮应该设计得更加细致些，包括按钮的三态（常态，hover，active）甚至四态（增加一个禁用态）。这么做也是为了使重要的可交互元素对不同的操作及时给出反馈，使其显得灵敏高效。

文本框的状态也是一个容易被忽略的细节，主要是获取焦点后无提示或者提示不够明显。

另外对于一些响应时间稍长的操作，应该给出进度反馈。似乎是显而易见的道理，但是设计中往往也容易忽视。

3. 清晰且温和的提示
提示通常都是提供辅助性信息的，既然是辅助性的，就不宜喧宾夺主过分强化。除非必要，也最好不要给用户带来额外的操作（比如需要用户主动关闭，确认等）。提示的内容也是为了带来帮助或者提供反馈，因此言简意赅最重要。

twitter中更换个性化主题时的提示，从页面顶部柔和出现，停留片刻后自动消失。

meme中的follow提示，在操作处出现。

4. 隐藏或弱化不常用的操作
不常用的操作可以弱化，或者隐藏起来，当鼠标经过的时候再出现。这个是基于上文提到的不干扰用户注意力角度出发的。

Twitter中将每条微博条目的操作隐藏了起来，减小了对阅读的干扰。而且在鼠标经过条目响应区和操作时，都有相应的变化以作为反馈。

flickr中针对照片的操作也使用淡灰色，尽可能弱化和减少对照片浏览的干扰。

5. 引导和强化推荐操作
强而明晰的引导是十分必要的，研究表明用户在浏览页面的时候是跳跃性、非线性的，用户并不喜欢在诸多的操作中选择和寻找最佳选项。所以清晰的引导就显得更加重要了。重要和常用操作还可以特异处理，以便于寻找和点击。

大而易用的表单和注册按钮

箭头和红色的按钮一起提供了明晰的视觉路径指引。

常用操作的特异处理。某些浏览器的后退操作也有类似处理。

6. 轻便处理临时任务
如果在看一部精彩电影的时候想喝水了，是希望走到厨房间倒水呢还是希望手边就有一个杯子和水壶？显然人们都不太愿意中断主任务和注意力去处理临时任务，页面设计也是如此，能在当前页面完成就尽量在当前页面完成。模态窗口、跳转页面、付出层等都不是让用户觉得舒服的做法。除非确实必要，少使用这样的做法。

flickr中对相片名字的即时编辑，当页完成，非常轻巧。

Delicious中对收藏条目的删除确认，同样在当页完成，轻巧且很好地降低了骚扰。

小结：
本文从可用性角度提出了轻设计的几个技巧：
1. 灵活的logo响应区；
2. 灵敏的可交互元素；
3. 清晰且温和的提示；
4. 隐藏或弱化不常用的操作；
5. 引导和强化推荐操作；
6. 轻便处理临时任务
以上仅是个人的实践和经验总结，欢迎大家指出不足之处并提供更多轻设计方面的建议。

源地址：http://www.kevinzhong.com/index.php/2009/6-tips-for-creating-sensitive-website/

本文由maxwellsdemon分享

Just for test:)

点这里查看原文

软件工程师的最佳人选：自闭症患者

2009-12-04T15:01:56+08:00

via 译言-每日精品译文推荐 by daxiang on 11/29/09

译者：daxiang

大多数的职业要求员工具有人际关系能力。但是对于有些工作来说，超乎寻常的专著能力和近乎完美的记忆则更为重要。企业家Thorkil Sonne说，自闭症对于这些工作有些用处。

Sonne六年前在他最小的儿子被诊断出患有这种神秘的发展性障碍之后得到了这个结论。他回忆说：“一开始我陷入了痛苦与绝望，继而想到了当他长大之后会发生什么。

如同其他地方一样，在Sonne的祖国丹麦，自闭症患者一般被认为是不能胜任工作的。但是Sonne从事的IT业更适合患有自闭以及如阿斯伯格综合症一类的相关症状的人。“总体上来说，他们具备极佳的记忆并且注重细节。他们即执著又遵守规章制度。”，他说。换句话来讲，他们是天生的软件工程师。

在2004年，Sonne从他所在的电信公司辞职，成立了一家IT咨询公司Specialisterne,它的大部分雇员患有广义自闭症。它的60多名雇员为微软和思科这样的公司寻找软件中的错误。最近，公司的业务扩张到了其他重视细节的工作--像注意观察丹麦的光纤网络，以确保架设新的线路时不会意外的切断旧的线路。

将自闭转化为卖点确实需要一点额外的努力：Specialisterne的雇员一般完成为期五个月的训练课程，而且客户需要准备好面对一个不怎么常见的工作关系。但一旦工作起来，这些顾问们在使一般人的头脑变得麻木的情形下人能集中精力。因此他们犯的错误更少。有一位雇用了Specialisterne 雇员从事数据输入的客户发现他们比其他的承包商精确5到10倍。

Sonne最近推开了日常的业务，发起了一个专注于推广他的商业模式的基金会。到目前为止，从Specialisterne获得灵感的公司已经出现在瑞典，荷兰以及比利时。冰岛以及苏格兰也有类似的计划。他说：“这不是廉价劳力，也不是职业治疗法，我们只是工作得比别人好。”

添加评论

还在遵循老一辈的膳食宝塔？——欢迎你，火星人！
美国哈佛大学和美国农业部联合推荐，并根据阿特金斯健康膳食金字塔，制定出推荐给全民使用的科学饮食金字塔。阿特金斯法，新一代膳食金字塔，理性减肥科学饮食新主张。

www.atkinschina.com/

译言联合3G门户推出无线官网，手机看译言，登录wap.yeeyan.com

本文由shawn分享

额。。。

点这里查看原文

轻设计，让网站灵敏轻便的6个技巧

2009-12-04T14:58:21+08:00

via 所有文章 - UCD大社区 by Kevin Zhong on 12/3/09

何为轻设计：

轻设计的6个技巧：

2. 灵敏的可交互元素
导航对于网站的重要性不言而喻，导航元素要即时响应鼠标操作。

twitter中更换个性化主题时的提示，从页面顶部柔和出现，停留片刻后自动消失。

meme中的follow提示，在操作处出现。

Twitter中将每条微博条目的操作隐藏了起来，减小了对阅读的干扰。而且在鼠标经过条目响应区和操作时，都有相应的变化以作为反馈。

flickr中针对照片的操作也使用淡灰色，尽可能弱化和减少对照片浏览的干扰。

大而易用的表单和注册按钮

箭头和红色的按钮一起提供了明晰的视觉路径指引。

常用操作的特异处理。某些浏览器的后退操作也有类似处理。

flickr中对相片名字的即时编辑，当页完成，非常轻巧。

Delicious中对收藏条目的删除确认，同样在当页完成，轻巧且很好地降低了骚扰。

源地址：http://www.kevinzhong.com/index.php/2009/6-tips-for-creating-sensitive-website/

本文由maxwellsdemon分享

Just for test:)

点这里查看原文

subway architecture

2009-12-04T14:26:34+08:00

via Designboom - Weblog on 12/1/09

london’s underground became the first subway system in the world when it began operation in 1863.
since then, underground subways have been built in almost every major city of the world. from new york
and paris to hong kong and dubai, subways are an essential part of public transportation in cities.
within these systems, architecture plays a big role in defining the environment of the subway. here is
a collection of some of the most architecturally interesting subway stations.

t-centralen station (photo via flickr)

stockholm tunnelbana

the subway system in stockholm, sweden features art installations inalmost every station. the city’s 100 stations
feature art by almost 140artists and it is often called the world’s longest art gallery. thesystem may focus on
artwork, but it also features a number of stationswith unusual architecture. the t-centralen station is one of the
mostdistinctive designed by per olof ultvedt in 1975. the station featuresa massive mural painted on the cavern
like ceiling that exposes therocky core of the city. many of the system’s stations also feature thisunique cavern
ceiling that gives them an organic feeling and uniqueatmosphere.

stockholm tunnelbana station (photo via flickr)

solna centrum station (photo via flickr)

westfriedhof station light installation by ingo mauer (photo via flickr)

munich u-bahn

munich’s u-bahn subway system only began in 1972, but it has quicklygrown into a 98 station system spread
across the entire city. becauseof its young age munich had the advantage of learning from the mistakesof other
systems creating spacious and efficient stations. while thefirst stations were quite plain, the architecture of its
new stationsis often quite daring. some stand out stations include the colourfuldulferstrasse station designed
by peter lanz and jurgen rauch andwestfriedhof, which features lighting installations by ingo mauer.

candidplatz station (photo via flickr)

georg-brauchle ring station with installation by franz ackermann (photo via flickr)

st. quiren platz station by hermann + ottl (photo via flickr)

bilbao metro station by foster+partners

bilbao metro

the bilbao metro is unusual among subway systems since it was designedand engineered as a whole. the stations
were all designed byfoster+partners, who set to use dramatic curved forms to create asignature look for the
city’s transportation infrastructure. inside thestations, the space was kept as open as possible, using the full
heightand width of the underground tunnels. above ground, each stationfeatures a curved glass entrance that
is reminiscent of a shell andbecame known as a fosteritos by locals.?

http://www.fosterandpartners.com

bilbao metro station by foster+partners

bilbao metro station by foster+partners

bund sightseeing tunnel (photo via flickr)

shanghai – bund sightseeing tunnel

the bund sightseeing tunnel located in shanghai, china isn’ttechnically a subway system but rather a short
distance transporter.measuring only 647m long, the train tunnel connects the bund to pudong.along the way
the rider is bombarded with lighting effects, music andspecial effects that turn the ride into something out of
this world.

trains in the bund sightseeing tunnel (photo via flickr)

bund sightseeing tunnel (photo via flickr)

dubai metro station by aedas (photo via flickr)

dubai – metro station

one of the world’s newest subway systems is the automated rail networkin dubai which officially opened in
september of 2009. the red linewhich includes 10 stations is the first part of the project to becompleted and
features the aedas designed metro station. theinternational firm was selected to design all 47 stations in the
newsystem along with two rail depots. this particular station features acurved rood design that covers the
station and lets light in throughsmall windows. the iconic building is just the start of a series ofstations that
will push the boundaries for subway architecture.

dubai metro station by aedas (photo via flickr)

dubai metro station by aedas (photo via flickr)

iidabashi station by makoto sei watanabe architects (photos via tokyo buildings)

tokyo - iidabashi station

tokyo is well known for being one of the busiest subway systems is theworld, but so well known for its subway
architecture. the oedo line intokyo is the newest in the city’ massive system and features someinteresting
designs like iidabashi station designed by makoto seiwatanabe architects. the station was built in 2000 and
features adistinctive faced clad with massive curved steel and glass forms.inside the station has numerous
design features including a geometricgreen light sculpture running the length of the escalator shaft. thestation’s
design is also significant since it was create throughcomputer generated forms.

iidabashi station by makoto sei watanabe architects

iidabashi station by makoto sei watanabe architects

iidabashi station by makoto sei watanabe architects (photo via flickr)

line a station (photo via flickr)

prague – line a

prague’s subway system has a diverse array of station designs that spannumerous architectural styles. the line a
stations all featuredistinctive tile cladding that gives them a futuristic feel. eachstation along the line has
a different colour of aluminum tile that isrepeated in concave or convex patterns. the tiles are installed along
the tracks and curve up the wall and onto the ceiling. this subtlevariation from station to station gives riders
a navigation system toguide them on their travels.

line a station (photo via flickr)

komsomolskaya station (photo via flickr)

moscow – komsomolskaya station

moscow’s komsomolskaya station definitely goes down as the mostelaborate subway station. the design was
built in the 1930’s andfeatures large chandeliers, vaulted plaster ceilings and archedwalkways. the classical
design of the space gives the station apalatial feeling, not something you see in most subways. the stationalso
boasts hand painted frescoes and detailed plaster moulding onalmost every surface.

komsomolskaya station (photo via flickr)

museum station by diamond+schmitt architects

toronto - museum station

while most of the subways stations in toronto are very traditional, onenewly remodeled station stands out.
museum station is located rightbelow the city’s royal ontario museum which was recently added to bydaniel
libeskind. the new station replaces simple columns withrecreations of the museum’s collection including
egyptiansarcophaguses, totem poles and mayan statues. the station also haswalls clad with large aluminum
panels that are cut-out with the stationname to reveal a hieroglyphics pattern behind. the unique station links
the subway with the museum above.

museum station by diamond+schmitt architects

drassanes station by on-a arquitectura

barcelona – drassanes station

the spanish firm on-a arquitectura recently remodeled the barcelonasubway station drassanes. the space’s new
design was based on theconcept of using the same materials as the subway cars that drivethrough the station.
a white concrete covers the walls and slowlyblends into the floors which were made vibration proof. the ceiling
wasmade black to contrast the white and is lined with long angular lightfixtures. other corridors in the station
feature a mosaic of oversizedtiles in a variety of vivid colours.

drassanes station by on-a arquitectura

drassanes station by on-a arquitectura

本文由shawn分享

新奇的设计，也许会为我们做设计时找到灵感

点这里查看原文

Rons出品极品Photoshop高清笔刷精选 (PC和Mac均适用)

2009-12-04T14:26:03+08:00

via X-BetA 世纪资讯 by 灵魂行者 on 11/27/09

Rons出品的极品Photoshop高清笔刷精选，实在是难得一见的，非常好的资源！笔刷精度都很高，单个笔刷文件一般都有20-30M，制作非常精良，具体的看下面的图吧，笔刷文件pc和mac均通用……

[继续阅读全文内容 ]

[ 我要说几句 ] (已有11条评论) | 分类: 艺术设计 | 关键字: PS??笔刷??素材??

精美图标素材iD全套打包下载（ico格式）

一周高清壁纸集锦合集打包下载 (1920x1200高分辨率)

以爱的名义LOMO摄影照片组图

超精美的Office 2010图标集打包下载

本站网友原创搜狗输入法皮肤 Line (含PSD源文件、字体等素材)

异次元软件世界 - 真诚精选优秀的软件，让你的PC不再简单！

本文由shawn分享

点这里查看原文

Pushing Your Buttons With Practical CSS3

2009-12-04T14:09:58+08:00

via Smashing Magazine Feed by ZURB on 12/2/09

Pushing Your Buttons With Practical CSS3 (via @smashingmag) -

CSS3 is the partially implemented sequel to the CSS2 spec we all know and love. It’s already popping up in new browsers such as Firefox 3.5, Safari 4 and Chrome. In this article, the first of the articles that explore practical (and even far-fetched) implementation of CSS3, we start by applying CSS3 to something we all have to create: buttons.

Calls to action are critical for any website, and a compelling, attention-grabbing, clickable button goes a long way toward driving that engagement. In the past, really awesome buttons needed extra markup, sliding doors or other trickery. We’ll show you here how to create nice button styles without any hacks or cheats.

Step 1: The Super-Awesome Button

Some time ago we published a post titled “Super Awesome Buttons with CSS3 and RGBa.” Those buttons will be our first step to creating buttons that really click. We will briefly review the technique and then extend it, fixing the problems that we have encountered along the way.

Using Box-Shadow and RGBa

Our first goal when we were about to create a versatile family of buttons was to eliminate the problem that HEX-based drop-shadows have on different backgrounds. As you can see below, we can use box-shadow to create a drop-shadow, but the shadow color doesn’t work on both dark and light backgrounds. To get around that, we used a color model that is available in new browsers: RGBa.

RGBa works like the standard RGB model — 255, 255, 255 for white, for example — but has a fourth property that controls the alpha, or transparency, channel. In the buttons above, the gray shadow that we created for the white background is much too light against the dark background. However, using RGBa we can create a black shadow that is transparent. This allows the shadow to work against any kind of background:

button.awesome, .button.awesome {	…	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);	…}

That solves our box-shadow problems. All that’s left is a dash of CSS properties and a simple PNG overlay to create a finished button that can be restyled with any color, on any background, and that will work just fine.

The Amazing Border-Radius

Creating objects with rounded edges has always been a mess on the Web; after all, every object on the Web is a rectangle. CSS3 makes our lives a little easier by implementing an incredibly easy way to round off objects without sliding doors or obnoxious background elements. With these buttons, we’re using a standard background color and a PNG overlay to give them depth. We are not using a background image to round the edges.

button.awesome, .button.awesome {	…	-moz-border-radius: 5px;	-webkit-border-radius: 5px;	…}

Currently, Webkit (Safari, Chrome) and Firefox have slightly different implementations of border-radius. Webkit will round off functional elements (like images), while Firefox will not. However, both will very cleanly round off an object and mask the background image, color or both (as with our buttons).

If you get in close, you can see that the borders behave a little strangely at the pixel level, but for the most part border-radius is a great way to bring rounded edges into your design without the mess. Here’s the complete CSS for these buttons:

button.awesome, .button.awesome {	…	background: #222 url(/images/alert-overlay.png) repeat-x;	display: inline-block;	padding: 5px 10px 6px;	color: #fff;	text-decoration: none;	font-weight: bold;	line-height: 1;	-moz-border-radius: 5px;	-webkit-border-radius: 5px;	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);	border-bottom: 1px solid rgba(0,0,0,0.25);	position: relative;	cursor: pointer;	…}

Final Touches

We’ve created the standard buttons you can see above, but another great thing about buttons that don’t use images is that we can create any color we want and with some simple class names generate an entire repertoire of buttons that we can call on any time. This is great for creating a reusable set of buttons that can be adapted to your or your clients’ style guide. Check out the color codes that we are using:

.blue.awesome {	background-color: #2daebf;}.red.awesome {	background-color: #e33100;}.magenta.awesome {	background-color: #a9014b;}.orange.awesome {	background-color: #ff5c00;}.yellow.awesome {	background-color: #ffb515;}

These simple classes allow us to quickly call on the button we want to get the action we need users to take. We’ve used similar methods in the buttons we’ll walk through in the next few sections.

Our last step is sizing. Without a sliding-doors situation our button size is only limited by the size of our overlay image (and in future buttons, not even by that). We’ll use a few classes (small, medium and large) to create sizes that we can call in different situations.

The buttons in various sizes: an overview.

And that’s it! A scalable, easily configured set of buttons that works in all browsers (through graceful degradation) and will get you the impact you want. In the next few sections we’ll build on these buttons to show you how CSS3 can push these even further in some interesting directions.

See the live demo ?

We’ve created a live demo page for these buttons; it’s in a playground, where we create small side projects and cool toys. We’ll be linking to the playground examples throughout this post and the rest of our series.

A note about compatibility: true to form, IE8 does not support border-radius. At ZURB, we’ve adopted a “graceful degradation” paradigm, so these corners will be square in IE. In our experience, the additional development cost for elements like this is not worth it, and we rely on these properties to cleanly degrade and not damage the layout or readability. These buttons are no exception: they are still as clickable in IE as anywhere else, just not quite as pretty.

Step 2: Radioactive Buttons

Now that we’ve gotten our feet wet with CSS3, let’s go in a different direction. For a recent client project, we wanted to create a stylized, attractive and eye-catching call to action for the home page. We came up with the idea of a radioactive button, a button that actually pulses on the page for more attention.

Kitschy? Maybe a little. But despite its impracticality, for some websites and clients, the “Wow” factor—that feeling the user gets when they arrive at a website and say, “Oooh, ahhh!”—can’t be ignored. Where we only used to have , thanks to some tricks we’ve already covered (and one we haven’t), we can move beyond that terrifically obnoxious blink tag and explore a whole new range of opportunities to animate using pure CSS.

Animation: No JavaScript Required

The secret to the radioactive button is in a new CSS3 property called animation (or, as it currently exists, -webkit-animation and -moz-animation). Our radioactive buttons are structurally and stylistically identical to the buttons in step 1, but with one important change. In lieu of a static drop-shadow, we’ve used the box-shadow property to create a glow around the button. With “glowing shadow” added, the next step is to use CSS3 animation to dim and brighten it.

Creating the Animation

The first step in our radioactive awesomeness is to create a timed event that modifies existing CSS properties. Check out this odd-looking property:

@-webkit-keyframes greenPulse{	from {		background-color: #749a02;		-webkit-box-shadow: 0 0 9px #333;	}	50% {		background-color: #91bd09;		-webkit-box-shadow: 0 0 18px #91bd09;	}	to {		background-color: #749a02;		-webkit-box-shadow: 0 0 9px #333;	}}

Here’s how the code works:

@-webkit-keyframes tells the browser that we’re defining an animation based on keyframes, or points in the animation to where properties will change. The browser then knows to smoothly transition between those frames.
greenPulse is the name of the animation. We need this to attach to objects later on.
from { … } defines the starting point of the animation; in our case, a certain background color for the button and a box-shadow color (particularly, one that disappears into the background).
50% { … } means that one change happens halfway through the animation.
to { … } defines the last frame of the animation. Note that animations always return to their from state—they don’t stop on the last frame. This means that a smooth animation needs to begin and end with the same properties and values.

All right, we’ve created the animation. It takes an object and over a set time changes the box-shadow color to green and then back to gray. Now, we just have to make it active by applying the animation to our buttons.

.green.button {	…	-webkit-animation-name: greenPulse	-webkit-animation-duration: 2s;	-webkit-animation-iteration-count: infinite;	…}

Pretty cool, isn’t it? -webkit-animation has many potential uses and, when combined with some very simple JavaScript (like onclick), you can create very rich effects and interaction without resorting to a JavaScript effects library.

See the live demo ?

Check out the live demo of radioactive buttons in our playground. For maximum awesomeness, check it out in Safari 4; radioactive buttons use some Webkit-specific properties that aren’t implemented well in Chrome quite yet.

Nice, Simple, User-Friendly Buttons, Google-Style

Our last example was inspired by some recent changes made to one of the most trafficked pages on the Web: the Google search page. In addition to enlarging the search field and text size, Google also rolled out some new buttons for Webkit-based browsers (notably its own, Chrome).

These buttons incorporate everything that makes our buttons in this article great, with one cool trick: no images at all. Google has used a new property called -webkit-gradient to generate a gradient using only CSS.

Using CSS Gradients

Gradients in CSS are cool because they are a CSS function, much like url(), which means that we can use gradients anywhere images go, including in the background or in borders (don’t worry, we’ll get to border-image in a later post). Here’s how gradients work:

.g-button {	…	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(98,202,227)));	…}

Let’s break this down:

linear means this is a linear gradient, as opposed to radial. This changes the color across a single axis, rather than in concentric circles.
0% 0%, 0% 100% are coordinates. We’re saying that the gradient begins at 0% X, 0% Y and ends at 0% X, 100% Y: top-left corner to bottom-left corner. We could use top-left, bottom-left just as well.
from(rgb(255, 255, 255)) is the starting color for the gradient. If the syntax looks familiar, it should be: it’s very similar to the syntax for @-webkit-keyframes.
to(rgb(221, 221, 221)) is the ending color. While we have only used RGB here, you can see how gradients could get really interesting if we use RGBa and are able to control the opacity of points on the gradient.

The rest of the button is ordinary: padding, border-radius and all the fun things we’ve gone over so far. Gradients is the star here, though, and it has thousands of potential uses. Here, we’ve created (albeit in Google’s footsteps) rich, engaging buttons that are 100% CSS, no images required.

See the live demo ?

You can see a live demo of these buttons in the playground, or simply visit the Google search home page in a Webkit browser.

Coming Up: Better, Stronger, Faster Design

This is the first of the articles that take advantages of the powerful new features coming in CSS 3. In the following posts, we’ll show you how CSS3 not only can make implementation faster and easier, but can help you really fly off the rails and push CSS to its breaking point while creating impressive visual effects.

Would you like to see more similar posts on Smashing Magazine in the future?(opinion)

You may be interested in the following related posts:

References and Resources

(al)

本文由shawn分享

CSS3的新特性，让网站设计变得更轻量。

点这里查看原文

Easily Turn Your Images Into Polaroids with CSS3

2009-12-04T14:07:56+08:00

via ZURBlog on 10/14/09

Yesterday, Jon and I were going back and forth about what to blog about next. Love of CSS and doing something cool with it is kind of our thing and we quickly jumped on a brand new idea: polaroid style images with just CSS. Holy super awesome, Batman!

With our end goal in mind (polaroid style images), we needed to set a few ground rules:

Has to work on a grid of linked images
Images must be randomly rotated like a pile of images you're sifting through
No actual text should be used on the images (only title and alt attributes)
Has to be done with just CSS (no javascript)

After establishing those requirements, we got down to business. Here's a quick rundown of how we did it. (Not big on reading? Jump right to the demo.)

Starting with the Images

We get underway by first coding up our grid of images. We used an unordered list with each image linked to our Flickr account as the baseline for everything. This would allow us to echo the title text of the anchor while creating a clickable set of images.

Once we laid the groundwork, we moved on to getting the title attribute's content to show. That was difficult at first—we didn't realize the img element wasn't fully supported for this—but we quickly got it working with the anchor.

Using :after to Create Content

If you were to look at our demo, and then at the source code, you might be a little surprised. We're not showing any actual text in our HTML. Instead, we're using a CSS2.1 pseduo-selector, :after, to get the job done. Here's a look at the CSS:

ul.polaroids a:after {
content: attr(title);
}

By using the :after, we can add a rule to our CSS that gets the anchor tag's title attribute and echoes the content immediately following the img. You'll note that despite the selector saying "after," it actually means "after the actual content of this element," thus showing the title text withing the anchor and after the image.

And now comes the fun part of rotating our images and applying some badass styles for impact and cool-factor.

Randomly Rotate the Images

With some help from our browser-specific CSS3 properties, we can "randomly" rotate our images. To do it, we first set a default angle at which to rotate our images. From there, we apply additional rules with the :nth-child pseudo-selector to give the feeling of random.

Here's the CSS to do it:

/* By default, we tilt all our images -2 degrees */
ul.polaroids a {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}
?
/* Rotate all even images 2 degrees */
ul.polaroids li:nth-child(even) a {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}
?
/* Don't rotate every third image, but offset its position */
ul.polaroids li:nth-child(3n) a {
-webkit-transform: none;
-moz-transform: none;
position: relative;
top: -5px;
}
?
/* Rotate every fifth image by 5 degrees and offset it */
ul.polaroids li:nth-child(5n) a {
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
position: relative;
right: 5px;
}
?
/* Keep default rotate for every eighth, but offset it */
ul.polaroids li:nth-child(8n) a {
position: relative;
top: 8px;
right: 5px;
}
?
/* Keep default rotate for every eleventh, but offset it */
ul.polaroids li:nth-child(11n) a {
position: relative;
top: 3px;
left: -5px;
}

In the above code, we rotate all our images 2 degrees and then go back through to programatically rotate more to add variety. Here's how it looks:

The rotating above breaks down like so:

Every image is rotated -2 degrees by default
All even images are rotated 2 degrees
Every fifth image is rotated 5 degrees and moved right 5px
Every eighth image keeps the default rotation (-2 degrees) and is offset 8px from the top, 5px from the right
And every eleventh image keeps the default rotation but is offset 3px from the top and -5px from the left

Now, in a group of 12 images, they appear to be randomly rotated and positioned. Pretty slick, huh? Now we move onto the final details of visual aesthetic.

Final Touches

With the rotating in place, we can focus on the sex appeal of our grid of images. In addition to the basic stylistic changes, we'll add in drop shadows and a Webkit transition to smooth things out in Safari (sorry, Firefox users, but there is no support for transitions yet).

And that's a wrap! With just a bit of love from CSS, we've created some freaking sweet polaroid style images with nothing more than a list of images.

View the Demo

Be sure to read through the demo for more explanation around the CSS we've used and where to find additional information. We also included a true "pile of images" farther down the page—check it out!

View Demo ?

本文由shawn分享

CSS3的又一很cool的应用

点这里查看原文

《从》之“产品设计是什么？”

2009-12-04T13:50:00+08:00

via 玩聚SR|最佳 by 白鸦，以用户为中心的设计 on 12/2/09

玩聚SR还知道：

产品的业务模式同样需要从用户出发，针对于用户的需求设计业务模式，比针对于系统架构设计业务模式更合理。当然，产品设计也不能只围绕着固有的业务模式展开思路，还需要回归到用户的原始需求。
heely 在 GoogleReader 说

还有 caozenghui, Heyward, 推荐，查看全部 25 个推荐 29 次分享

白鸦，以用户为中心的设计发表于2009-12-03 02:37:29

UCD2009广州年会的主题是《从用户出发》，会上我做了主题分享。虽然提前透露过“核心观点”，但还是有不少朋友说要提供PPT下载，但PPT确实太简单读不出来什么。干脆，我用文字表述一下分享的主要内容。

这里是第一段：产品设计是什么？

Larry keeley 提供过这样一个“产品三要素”的模型，由三部分组成：“可行性”、“可能性”、“期望值”。“可行性”由商业和市场评估来解决，“可能性”由技术来解决，用户“期望值”靠的是产品设计来满足。

那么，我一直在想：产品设计要解决的只是期望值吗？
是不是满足好了用户的期望值，“让设计超出用户的期望值”，甚至说做好了“引导用户期望值”，就是完美的产品设计、就可以出来很成功的产品？

即便答案是肯定的。那么“什么是期望值”呢？或者说，我们应该给“期望”一个什么“值”呢？

.
.

上图这两款手机，左边是中国移动的OPhone，右边是一款“山寨IPhone”。 OPhone具体的使用体验要比山寨IPhone好很多。

假设，这两款手机定价都在1000元左右，同时拿到深圳的“华强北”市场上销售，哪一款销量会更好？
答案是：“IPhone”。
为什么？

没错，固然不少原因是因为“Apple和IPhone的品牌影响”，促进了一些消费者的购买。但，实际上“IPhone”对于这个消费层次的消费者影响并没有那么大。

在“华强北”，一份可靠的调研结果显示原因是：山寨IPhone内置并首屏默认显示了QQ，而OPhone只有他自己的“飞信”。数据同时显示：70%左右的潜在消费者认为“你的手机没有QQ，我不买”。

也许这个数据很多人会认为“太夸张”，但事实就是如此。当用户认定了自己的需求时，他选择的会很坚决。

曾经在一次杭州5G上，我编了一个未来的段子：几年后，电视都可以搜索到几百个频道，观众选频道会成为一个极其复杂的事情。看的最多的频道，变成了是遥控器上默认的“快捷频道”。可，这些“快捷频道”里没有一个是CCAV。CCAV急了，他们说“你们这些电视厂家，不给我放进默认的“快捷频道”，老子自己制造电视去！”，最后CCAV开始卖电视，把自己电视的遥控器上全默认CCAV自己的频道… 但它的电视就是卖不出去。

这个段子听起来是一个搞笑的杯具。但，如果移动的手机真的只有飞信没有QQ，它就真的只能是一个杯具。

所以：
市场运营的策略必须要从用户出发，针对于用户期望的市场策略，才会是一个好的策略。同时，产品设计不能是死板围绕着“市场运营战略”在做，还要回归到用户的需求上。

.
.

上图是两个搜索结果界面。左边我们给他叫“综合搜索”，右边我们给他叫“整合搜索”。
Google和百度的默认都是“网页搜索”，显然当互联网的信息呈现方式越来越多样，甚至blog、news、vido、map都开始成为搜索引擎独立“分类”的时候。如果这个默认搜索出来的结果还只有“网页”的话，显然产品已经不能很好的满足用户需求了。

于是，最早最快想出来的方案就是左边这种“综合搜索”：在一个搜索页面，按照不同业务产品线，分区块显示各自产品块的搜索结果。即将不同分类“综合”罗列到一起。（当然，最大块区域还是网页的）

事实告诉我们，而这种“综合搜索”的做法很不合理，过份的死搬硬套既定产品业务模型，给用户所提供服务的过于“业务化”。在用户心里并没有去给你分什么“博客、资讯、问答”，他只知道输入一个关键词，就应该给他需要的结果。业务模型和用户认知是两个维度上的事情。

今天，搜索引擎都开始采用了右侧这种“整合搜索”。（百度的“框计算”也是整合搜索的升级版嘛～，Google的新版其实已经开始用“整合搜索+综合搜索导航”的方式做）

可以用一句话来综合这个原因：用户对于满足的需求的方式是直接干脆的，他们并不愿意再去进行二次“分解”的。

所以：
产品的业务模式同样需要从用户出发，针对于用户的需求设计业务模式，比针对于系统架构设计业务模式更合理。当然，产品设计也不能只围绕着固有的业务模式展开思路，还需要回归到用户的原始需求。

.
.

这里是一个运营商的手机缴费流程。它可以直接通过充值卡进行充值，也可以通过“预缴费”的方式直接在花费管理系统进行缴费。

左边是按照既有业务模式设计出来的用户使用流程。基本上是：选择地区 >选择运营商 >查询欠费 > 充值或缴费。用户需要点击鼠标基本上接近20次。
右边是经过优化的流程。基本上是：输入手机号码 > 输入缴费金额 > 确认。通过几次点击即可完成。

这个改进其实根本没有改变产品业务流程，更没有触及市场运营策略。只是做了几个小小的处理： 135一定是中移动，不用让用户选择运营商；13501xxxxxx一定是北京的号码，不用让用户再选择地域。欠费与否边输入边可以查询到 …

这种改进的体验效果无疑会是很好的。用户的订单流失率也会下降很多。

所以：
即使在业务模型不可改变的时候，产品设计也不能照搬业务模式直接呈现给用户。?从业务模型到体验模型的再设计过程是一个必须的过程。

.
.

（最后结论）产品和业务模式、市场和运营策略、用户体验和界面设计都必须围绕着用户进行，且三者不可分割，必须融为一体。产品设计是一份综合性工作，只做好任何一块都不会成就好的产品。

请阅读相关的热文:

轻设计，让网站灵敏轻便的6个技巧

StandaloneStack 2 新增可動畫展開內容預覽的特製資料夾堆疊捷徑

IBM 中国研究院 Offer 之感言——能力是一种态度

好文章：什么叫工作？

纯CSS圆角框2－透明圆角化背景图片

网站分析意义重大——答点石大会朋友提问（上）

玩聚SR 是一个追踪各种社会化媒体，实时发现IT人都在分享和推荐什么的工具。点击阅读科技频道热文。
手机请登录移动版。

本文由shawn分享

点这里查看原文

CD RIA

UPA2009工作坊讲义：统一体验的设计

本文由maxwellsdemon分享

让页面等待不再漫长

本文由maxwellsdemon分享

为中文而设计的文本框

关于问题一

关于问题二

关于问题三

禁用输入法

用户输入之后才提供响应

提供正确的键盘反馈

用户输入之后才提供响应

尝试使用拼音识别

史上最佳中文文本框？

史上最差中文文本框？

写在最后

本文由maxwellsdemon分享

视觉设计前瞻实用性研究（PNVD）第二期

本文由maxwellsdemon分享

为什么老板总是不喜欢 Social Media

本文由shawn分享

社会化媒体营销的常规化

本文由shawn分享

CPC广告还有多少意义？

本文由shawn分享

Twitter List的营销意义

本文由shawn分享

大企业如何使用Twitter

本文由shawn分享

10大变化 新版Android 2.1系统大揭密

本文由shawn分享

Android 2.1+Sense界面成功移植HTC G1

本文由shawn分享

JavaScript Memory and CPU Profiling in Adobe AIR 2

本文由shawn分享

轻设计，让网站灵敏轻便的6个技巧

本文由maxwellsdemon分享

软件工程师的最佳人选：自闭症患者

本文由shawn分享

轻设计，让网站灵敏轻便的6个技巧

本文由maxwellsdemon分享

subway architecture

本文由shawn分享

Rons出品极品Photoshop高清笔刷精选 (PC和Mac均适用)

本文由shawn分享

Pushing Your Buttons With Practical CSS3

Step 1: The Super-Awesome Button

Using Box-Shadow and RGBa

The Amazing Border-Radius

Final Touches

See the live demo ?

Step 2: Radioactive Buttons

Animation: No JavaScript Required

Creating the Animation

See the live demo ?

Nice, Simple, User-Friendly Buttons, Google-Style

Using CSS Gradients

See the live demo ?

Coming Up: Better, Stronger, Faster Design

Related posts

References and Resources

本文由shawn分享

Easily Turn Your Images Into Polaroids with CSS3

Starting with the Images

Using :after to Create Content

Randomly Rotate the Images

Final Touches

View the Demo

本文由shawn分享

《从》之“产品设计是什么？”

本文由shawn分享

10大变化新版Android 2.1系统大揭密