<?xml version="1.0" encoding="utf-8"?><?xml-stylesheet href='http://feed.feedsky.com/styles/feedsky0.xsl' type='text/xsl' ?><!--这是一个由Feedsy提供技术支持的Feed，为了提高读者阅读的体验，以及满足用户美化自己Feed的需要，我们设计了多种精美的Feed模板，提供给大家选择，所有最终呈现出来的样式，皆由用户自愿选择使用，未经许可，任何团体和个人，请不要擅自修改样式或者盗用，这是对于用户选择权的尊重。--><rss xmlns:atom="http://www.w3.org/2005/Atom" xmlns:fs="http://www.feedsky.com/namespace/feed" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:dc="http://purl.org/dc/elements/1.1/" version="2.0"><channel><atom:link href="http://feed.happinesz.cn" type="application/rss+xml" rel="self"></atom:link><fs:self_link href="http://feed.feedsky.com/sofish" type="application/rss+xml"></fs:self_link><lastBuildDate>Wed, 27 Jan 2010 07:31:55 GMT</lastBuildDate><title>幸福收藏夹</title><description>在这里,存IT的理性,掺夹文学的浪漫…</description><image><url>http://www.feedsky.com/feed/sofish/sc/gif</url><title>幸福收藏夹</title><link>http://www.happinesz.cn</link></image><link>http://www.happinesz.cn</link><sy:updatePeriod>hourly</sy:updatePeriod><sy:updateFrequency>1</sy:updateFrequency><language>en</language><pubDate>Sat, 30 Jan 2010 07:43:21 GMT</pubDate><item><title>前端开发值得一看的文章</title><link>http://www.happinesz.cn/archives/1279/</link><content:encoded>&lt;p&gt;其实这篇文章不是这里的，只是，后台很傻B地进不了了。也不知道是什么乱七八糟的问题。先写在这里，当做这么久没更新的偷懒好了。（而且，挑出来的这些都是精华呢!），大家各取所需吧：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/mypics/f2-share.jpg&quot; alt=&quot;前端开发&quot; /&gt;&lt;/p&gt;
&lt;h3&gt;1. &lt;a href=&quot;http://feedproxy.google.com/%7Er/dancewithnet/%7E3/kM4jQKJJ7xA/&quot; target=&quot;_blank&quot;&gt;默认Web字体样式&lt;/a&gt; &amp;amp; &lt;a href=&quot;http://lifesinger.org/blog/2009/11/web-default-font/&quot; target=&quot;_blank&quot;&gt;再谈 Web 默认字体&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;这两篇文章是要联一起看的，总的来说，前者的精华在两句话（行高：1.5倍中的第2点和第3点），而玉伯的文章，在秦歌的文章后看，相信可以让你更好地知道如何选择排版中的字体。&lt;/p&gt;
&lt;h3&gt;2. &lt;a href=&quot;http://uedmagazine.com/ued/index.php?entry=entry091109-052418&quot; target=&quot;_blank&quot;&gt;jquery、prototype、mootools、YUI的继承的实现&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;继承、原型，两个难搞的东西，看看这些天才们是怎么来解决的。看看作者的理解和你的理解是不是一致的。&lt;/p&gt;
&lt;h3&gt;3. &lt;a href=&quot;http://www.99css.com/?p=67&quot; target=&quot;_blank&quot;&gt;Pixel Perfect &amp;ndash; 中文字体1&lt;/a&gt; &amp;amp; &lt;a href=&quot;http://www.99css.com/?p=126&quot; target=&quot;_blank&quot;&gt;Pixel Perfect &amp;ndash; 中文字体2&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;视觉要做到Pixel Perfect就是方便，不用考虑到各个平台的兼容。不过，有个偷懒的方法就是，看看别人的结果。这两篇文章可以参考参考。&lt;/p&gt;
&lt;h3&gt;4. &lt;a href=&quot;http://old9.blogsome.com/2008/10/26/css-expression-reloaded/&quot; title=&quot;Permanent Link: CSS Expression Reloaded&quot;&gt;CSS Expression Reloaded&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;有时候，被推荐不要用的东西，不一定是不好的。譬如在Javascript中只使用&amp;rdquo;//&amp;rdquo;注释代码，而不用  &amp;ldquo;/* */&amp;rdquo;，囧，至少我自己囧，看看，如果CSS Expression只在页面执行一次，也未必不好，当然这里别扯向后兼容。&lt;/p&gt;
&lt;h3&gt;5. &lt;a href=&quot;http://www.evotech.net/blog/2009/09/ie6ie7-implicit-label-bug/&quot; target=&quot;_blank&quot;&gt;IE6 &amp;amp; IE7 label bug (implicit label bug)&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;IE中乱七八糟的问题总是以乱七八糟的姿态出现着，其实给label定背景之类的事情是很少的，不过，了解一下，说不定真有一天碰上呢。&lt;/p&gt;
&lt;h3&gt;6. &lt;a href=&quot;http://dancewithnet.com/2009/09/06/css-opacity/&quot; title=&quot;到《CSS实现HTML元素透明的那些事》的永久链接&quot;&gt;CSS实现HTML元素透明的那些事&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;在处理PNG透明上有没有什么问题呢？是不是有什么解决方法呢？这篇文章可能没解决所有的问题，但这思路会让你找到寻找真相的感觉的。&lt;/p&gt;
&lt;h3&gt;7. &lt;a href=&quot;http://feedproxy.google.com/%7Er/nettuts/%7E3/u6oMMGCunVw/&quot; target=&quot;_blank&quot;&gt;8 Regular Expressions You Should Know&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;正则用得少，就会手生了。来来，温习一下。&lt;/p&gt;
&lt;h3&gt;8. &lt;a href=&quot;http://wlog.com.cn/?p=1267&quot;&gt;Javascript  keyCode 键盘键码值对照表&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;这只是一张图片啦，收藏起来，找Key code的时候就不用google了。&lt;/p&gt;
&lt;p&gt;&lt;hr&gt;&amp;copy;2010 &lt;a href=&quot;http://www.happinesz.cn&quot;&gt;幸福收藏夹&lt;/a&gt;. 版权所有,转载务必注明.该Feed只供个人使用,禁止未注明的转载或商业应用.非法应用的,一切法律后果自负.如有问题,可发E-mail至sofish@163.com.&lt;hr&gt;&lt;/p&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/327594736/sofish/feedsky/s.gif?r=http://www.happinesz.cn/archives/1279/&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/sofish/327594736/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/sofish/327594736/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fsflare&quot;&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=9fff30cd860d9bc5d211974e5ea2481c&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=9fff30cd860d9bc5d211974e5ea2481c&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=802ffa8756f541b96a567df0dcc4483c&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=802ffa8756f541b96a567df0dcc4483c&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=333e9e183c96ba29c1f2ce532c8ca6d9&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=333e9e183c96ba29c1f2ce532c8ca6d9&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=3afeb85a8187088fd4ad0ce78cf77f14&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=3afeb85a8187088fd4ad0ce78cf77f14&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=b8ff5f8a28a7c534ac1a2a1666b10e7b&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=b8ff5f8a28a7c534ac1a2a1666b10e7b&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/p&gt;</content:encoded><wfw:commentRss>http://www.happinesz.cn/archives/1279/feed/</wfw:commentRss><slash:comments>21</slash:comments><description>其实这篇文章不是这里的，只是，后台很傻B地进不了了。也不知道是什么乱七八糟的问题。先写在这里，当做这么久没更新的偷懒好了。（而且，挑出来的这些都是精华呢!），大家各取所需吧：

1. 默认Web字体样式 &amp;#38; 再谈 Web 默认字体
这两篇文章是要联一起看的，总的来说，前者的精华在两句话（行高：1.5倍中的第2点和第3点），而玉伯的文章，在秦歌的文章后看，相信可以让你更好地知道如何选择排版中的字体。
2. jquery、prototype、mootools、YUI的继承的实现
继承、原型，两个难搞的东西，看看这些天才们是怎么来解决的。看看作者的理解和你的理解是不是一致的。
3. Pixel Perfect &amp;#8211; 中文字体1 &amp;#38; Pixel Perfect &amp;#8211; 中文字体2
视觉要做到Pixel Perfect就是方便，不用考虑到各个平台的兼容。不过，有个偷懒的方法就是，看看别人的结果。这两篇文章可以参考参考。
4. CSS Expression Reloaded
有时候，被推荐不要用的东西，不一定是不好的。譬如在Javascript中只使用&amp;#8221;//&amp;#8221;注释代码，而不用  &amp;#8220;/* */&amp;#8221;，囧，至少我自己囧，看看，如果CSS Expression只在页面执行一次，也未必不好，当然这里别扯向后兼容。
5. IE6 &amp;#38; IE7 label bug (implicit label bug)
IE中乱七八糟的问题总是以乱七八糟的姿态出现着，其实给label定背景之类的事情是很少的，不过，了解一下，说不定真有一天碰上呢。
6. CSS实现HTML元素透明的那些事
在处理PNG透明上有没有什么问题呢？是不是有什么解决方法呢？这篇文章可能没解决所有的问题，但这思路会让你找到寻找真相的感觉的。
7. 8 Regular Expressions You Should Know
正则用得少，就会手生了。来来，温习一下。
8. Javascript  keyCode 键盘键码值对照表
这只是一张图片啦，收藏起来，找Key code的时候就不用google了。
&amp;#169;2010 幸福收藏夹. 版权所有,转载务必注明.该Feed只供个人使用,禁止未注明的转载或商业应用.非法应用的,一切法律后果自负.如有问题,可发E-mail至sofish@163.com.&lt;img src=&quot;http://www1.feedsky.com/t1/327594736/sofish/feedsky/s.gif?r=http://www.happinesz.cn/archives/1279/&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/sofish/327594736/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/sofish/327594736/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fsflare&quot;&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=9fff30cd860d9bc5d211974e5ea2481c&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=9fff30cd860d9bc5d211974e5ea2481c&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=802ffa8756f541b96a567df0dcc4483c&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=802ffa8756f541b96a567df0dcc4483c&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=333e9e183c96ba29c1f2ce532c8ca6d9&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=333e9e183c96ba29c1f2ce532c8ca6d9&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=3afeb85a8187088fd4ad0ce78cf77f14&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=3afeb85a8187088fd4ad0ce78cf77f14&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=b8ff5f8a28a7c534ac1a2a1666b10e7b&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=b8ff5f8a28a7c534ac1a2a1666b10e7b&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/p&gt;</description><category>前端</category><category>Reading List</category><category>分享</category><pubDate>Wed, 27 Jan 2010 15:31:55 +0800</pubDate><author>sofish</author><comments>http://www.happinesz.cn/archives/1279/#comments</comments><guid isPermaLink="false">http://www.happinesz.cn/?p=1279</guid><dc:creator>sofish</dc:creator><fs:srclink>http://www.happinesz.cn/archives/1279/</fs:srclink><fs:srcfeed>http://www.happinesz.cn/?feed=rss2</fs:srcfeed><fs:itemid>feedsky/sofish/~1329654/327594736/1334283</fs:itemid></item><item><title>视觉设计的一致性与用户体验</title><link>http://www.happinesz.cn/archives/1272/</link><content:encoded>&lt;p&gt;&lt;a href=&quot;http://blog.happinesz.cn/live-in-hangzhou/&quot;&gt;来到杭州&lt;/a&gt;，迅速租了房子，扫了日常用品。再非专业地提前体验一下与工作有那么一点点点点点相关的UED（用户体验设计）。良好的用户体验是一种非必须品，但绝对是好产品所离不开的。看看我所体验的：&lt;/p&gt;
&lt;h3&gt;1. 受骗了!&lt;/h3&gt;
&lt;p&gt;这是我昨天买的纸巾。看起来没什么不正常的，但这里面有着点非正常：&lt;/p&gt;
&lt;p&gt;&lt;img width=&quot;448&quot; height=&quot;336&quot; src=&quot;http://happinesz.cn/mypics/same_paper_1.jpg&quot; alt=&quot;shoes&quot; title=&quot;shoes&quot; class=&quot;iborder&quot; /&gt;&lt;/p&gt;
&lt;p&gt;这是我第一次买清风的纸巾，以前常看到，但习惯买维达的我，昨天去商场没看到维达，就直接拿了这种。看看清风这牌子，应该是一个比较出名的牌子吧，在广东的各种商场也经常见到。大家可能跟我一样，都记得清风这个牌，也或许跟我一样遇到这样的情况：&amp;quot;金红叶纸业，不是清风么，我受骗了?!&amp;quot;&lt;/p&gt;
&lt;p&gt;&lt;img width=&quot;448&quot; height=&quot;336&quot; src=&quot;http://happinesz.cn/mypics/same_paper_2.jpg&quot; alt=&quot;shoes&quot; title=&quot;shoes&quot; class=&quot;iborder&quot; /&gt;&lt;/p&gt;
&lt;p&gt;拿掉透明塑料纸后，如你所见，我看到内胆（ERRR&amp;#8230;能这样称呼么?）里面写着金红叶纸业，下意识觉得自己受骗了。难道这里的商场超市这么不靠谱。再想想，通常情况下，一个公司可能会有多个产品。然后，拿起另一卷纸，果然，清风是金红叶纸业的制造的。&lt;/p&gt;
&lt;p&gt;这种设计，让我认识了金红叶纸业。估计他们这样设计就是为了让我们知道这是怎样一个公司的产品。可是这样对他们清风这个品牌到底有多少帮助呢?   我是认识了，知道了，如果用得好，我会推荐清风给朋友，但不会推荐金红叶给朋友。如果不去看包装纸，还让我有受骗的感觉。&lt;/p&gt;
&lt;h3&gt;2. 是否值得信任&lt;/h3&gt;
&lt;p&gt;看看这双鞋，很巧中的不巧。同样是不一致的问题，导致疑问冒出来。有时候，如果不懂，我的直接选择就是价格。39块，估计可以信任，就买下了。拖着人字拖的我，伸出脚想换这双鞋，发现，怎么LOGO不同，难道是不同牌子，相同设计的鞋(当时我站着，近视的我即使带着眼镜也没看清楚那些文字)?   有了刚才纸巾的经历，拿上来看了一下，才知道没错（如下图），只是，很巧，又是一个不一致的设计。不巧的是，这次的感觉不是受骗，而是是否值得信任。&lt;/p&gt;
&lt;p&gt;&lt;img width=&quot;336&quot; height=&quot;448&quot; src=&quot;http://happinesz.cn/mypics/same_shoes.jpg&quot; alt=&quot;shoes&quot; title=&quot;shoes&quot; class=&quot;iborder&quot; /&gt;&lt;/p&gt;
&lt;p&gt;刚才已经说了，一般情况下，如果对一种商品不了解，我通常的选择是信任价格。但这样一来，两个不同的LOGO，让我想到的是，他们在加工时，可能拿错了。那这样低级的错误也犯，并且有经过检验吗，这种商品值得信任么?   如果是故意这样设计的，那他们的设计师，所能设计的东西，是值得信任的么?&lt;/p&gt;
&lt;h3&gt;总结&lt;/h3&gt;
&lt;p&gt;不一致的视觉设计，可能会让人感觉到欺骗，也可能会让人怀疑质量的优劣。要知道，当有更多的选择时，良好的体验会被更多人选中。如果是其他了更细心的人，看到这鞋子的标志不同，可能会觉得不放心而转向别的鞋子。这样，即使鞋子穿起来舒服，视觉的体验不好，就已经失去了一个用户。保持设计的视觉上的一致性，是一种良好的用户体验，设计师注意了。&lt;/p&gt;
&lt;p&gt;&lt;hr&gt;&amp;copy;2010 &lt;a href=&quot;http://www.happinesz.cn&quot;&gt;幸福收藏夹&lt;/a&gt;. 版权所有,转载务必注明.该Feed只供个人使用,禁止未注明的转载或商业应用.非法应用的,一切法律后果自负.如有问题,可发E-mail至sofish@163.com.&lt;hr&gt;&lt;/p&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/327594737/sofish/feedsky/s.gif?r=http://www.happinesz.cn/archives/1272/&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/sofish/327594737/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/sofish/327594737/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fsflare&quot;&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=104ce9defa444fb1ebe07a3c47cedfbc&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=104ce9defa444fb1ebe07a3c47cedfbc&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=fa7572d89b54993b94cd9bb00329bed8&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=fa7572d89b54993b94cd9bb00329bed8&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=8ac9446251a0436ffa191ac407d4f4fb&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=8ac9446251a0436ffa191ac407d4f4fb&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=5137973d7cdd4215f9483e3d479ff85f&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=5137973d7cdd4215f9483e3d479ff85f&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=c618abf9dda249f8f05cb6f99af689d4&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=c618abf9dda249f8f05cb6f99af689d4&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/p&gt;</content:encoded><wfw:commentRss>http://www.happinesz.cn/archives/1272/feed/</wfw:commentRss><slash:comments>58</slash:comments><description>来到杭州，迅速租了房子，扫了日常用品。再非专业地提前体验一下与工作有那么一点点点点点相关的UED（用户体验设计）。良好的用户体验是一种非必须品，但绝对是好产品所离不开的。看看我所体验的：
1. 受骗了!
这是我昨天买的纸巾。看起来没什么不正常的，但这里面有着点非正常：

这是我第一次买清风的纸巾，以前常看到，但习惯买维达的我，昨天去商场没看到维达，就直接拿了这种。看看清风这牌子，应该是一个比较出名的牌子吧，在广东的各种商场也经常见到。大家可能跟我一样，都记得清风这个牌，也或许跟我一样遇到这样的情况：&amp;#34;金红叶纸业，不是清风么，我受骗了?!&amp;#34;

拿掉透明塑料纸后，如你所见，我看到内胆（ERRR&amp;#8230;能这样称呼么?）里面写着金红叶纸业，下意识觉得自己受骗了。难道这里的商场超市这么不靠谱。再想想，通常情况下，一个公司可能会有多个产品。然后，拿起另一卷纸，果然，清风是金红叶纸业的制造的。
这种设计，让我认识了金红叶纸业。估计他们这样设计就是为了让我们知道这是怎样一个公司的产品。可是这样对他们清风这个品牌到底有多少帮助呢?   我是认识了，知道了，如果用得好，我会推荐清风给朋友，但不会推荐金红叶给朋友。如果不去看包装纸，还让我有受骗的感觉。
2. 是否值得信任
看看这双鞋，很巧中的不巧。同样是不一致的问题，导致疑问冒出来。有时候，如果不懂，我的直接选择就是价格。39块，估计可以信任，就买下了。拖着人字拖的我，伸出脚想换这双鞋，发现，怎么LOGO不同，难道是不同牌子，相同设计的鞋(当时我站着，近视的我即使带着眼镜也没看清楚那些文字)?   有了刚才纸巾的经历，拿上来看了一下，才知道没错（如下图），只是，很巧，又是一个不一致的设计。不巧的是，这次的感觉不是受骗，而是是否值得信任。

刚才已经说了，一般情况下，如果对一种商品不了解，我通常的选择是信任价格。但这样一来，两个不同的LOGO，让我想到的是，他们在加工时，可能拿错了。那这样低级的错误也犯，并且有经过检验吗，这种商品值得信任么?   如果是故意这样设计的，那他们的设计师，所能设计的东西，是值得信任的么?
总结
不一致的视觉设计，可能会让人感觉到欺骗，也可能会让人怀疑质量的优劣。要知道，当有更多的选择时，良好的体验会被更多人选中。如果是其他了更细心的人，看到这鞋子的标志不同，可能会觉得不放心而转向别的鞋子。这样，即使鞋子穿起来舒服，视觉的体验不好，就已经失去了一个用户。保持设计的视觉上的一致性，是一种良好的用户体验，设计师注意了。
&amp;#169;2010 幸福收藏夹. 版权所有,转载务必注明.该Feed只供个人使用,禁止未注明的转载或商业应用.非法应用的,一切法律后果自负.如有问题,可发E-mail至sofish@163.com.&lt;img src=&quot;http://www1.feedsky.com/t1/327594737/sofish/feedsky/s.gif?r=http://www.happinesz.cn/archives/1272/&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/sofish/327594737/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/sofish/327594737/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fsflare&quot;&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=104ce9defa444fb1ebe07a3c47cedfbc&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=104ce9defa444fb1ebe07a3c47cedfbc&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=fa7572d89b54993b94cd9bb00329bed8&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=fa7572d89b54993b94cd9bb00329bed8&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=8ac9446251a0436ffa191ac407d4f4fb&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=8ac9446251a0436ffa191ac407d4f4fb&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=5137973d7cdd4215f9483e3d479ff85f&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=5137973d7cdd4215f9483e3d479ff85f&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=c618abf9dda249f8f05cb6f99af689d4&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=c618abf9dda249f8f05cb6f99af689d4&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/p&gt;</description><category>UED</category><category>清风</category><category>Design</category><category>一致性</category><pubDate>Sun, 03 Jan 2010 15:53:21 +0800</pubDate><author>sofish</author><comments>http://www.happinesz.cn/archives/1272/#comments</comments><guid isPermaLink="false">http://www.happinesz.cn/?p=1272</guid><dc:creator>sofish</dc:creator><fs:srclink>http://www.happinesz.cn/archives/1272/</fs:srclink><fs:srcfeed>http://www.happinesz.cn/?feed=rss2</fs:srcfeed><fs:itemid>feedsky/sofish/~1329654/327594737/1334283</fs:itemid></item><item><title>读《JavaScript 高级程序设计》</title><link>http://www.happinesz.cn/archives/1270/</link><content:encoded>&lt;p&gt;一向喜欢买最厚书，但只看最薄书的我，终于把530+页的《JavaScript   高级程序设计》看完了。其实，看到一半的时候，我很怀疑这本书值不值得读下去。介于很多前端爱好者读这个博客，准备简单地来说一下这本书。如果用一句话来概括，就是：丫有点跟不上时代了，但这里面的方法和思想值得你认真读一读这本书。&lt;/p&gt;
&lt;p&gt;&lt;img width=&quot;500&quot; height=&quot;250&quot; alt=&quot;JavaScript 高级程序设计&quot; src=&quot;http://happinesz.cn/mypics/pro_js_4_wd.jpg&quot; /&gt;&lt;/p&gt;
&lt;h3&gt;1. 太老的内容&lt;/h3&gt;
&lt;p&gt;浏览器检测（和兼容）、Javascript中的XML、flash，HTTP请求等，讲的内容太老了。另外，这本书还在说ECMAScript   4是未来的时候，在不久的过去，ES5已经成为了新的标准。（FML，这就是时间的力量）怎么说呢，如果想学这方面的内容，也想加强AJAX，你基本上不用考虑这本书了，可以考虑《AJAX 高级程序设计》，依然是Nicholas   C.Zakas的书，只不过还有其他两位合著。&lt;/p&gt;
&lt;h3&gt;2. 错误的内容&lt;/h3&gt;
&lt;p&gt;正则表达式这一章写得很不错，个人来说，这一章是所有章节中写得最容易看懂的，但也是最容易误导别的人。比如检测MAIL的正则表达式考虑不周（可能参考我写的一篇文章：&lt;a title=&quot;Permanent Links to 用Javascript正则表达式验证Email地址&quot; href=&quot;http://www.happinesz.cn/archives/1244/&quot; rel=&quot;bookmark&quot;&gt;用Javascript正则表达式验证Email地址&lt;/a&gt;），而删除行头行末的空格也出现了错误。这会让人对这本书的内容很不放心，至少我当时的感受就是这样，在想有没有必要继续读下去。当然，或许你也会觉得，这没什么，书总会有错误，但这么低级的错误，比较不应该。&lt;/p&gt;
&lt;h3&gt;3. 值得一看&lt;/h3&gt;
&lt;p&gt;上面说了。一方面：内容太老了，当时都还没有IE7，Mozilla Firefox 3(甚至ver.2都没有)，更没有今天的safari   4和同样优秀的Chrome（当然，不是必要的）；另一方面，内容不严谨。但是，这还是一本值得看的书。虽然这些问题有了（其实很多书都没想象中的新），并且有随意给HTML加Attribute这种忽视标准的做法。但：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;系统。虽然这本书说是高级程序设计，但这绝对不是一本把你带向高手的书，而是一本更适合新手进行系统学习的书。《JavaScript       权威指南》更系统，但950+页的内容，并不适合一个新手来全面对这本书进行了解，而又能学到比较有用的的技术。《权威指南》比较适合作为一本详细的参考书来用（现在我就拿着第5版，重得要死）。不过，《权威指南》相对于这本书来说，内容更适合你了解AJAX相关的技术；&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;活力。这个很泛。但这是你在枯燥的《权威指南》找不到的，后者为了尽可能详情，想把一切都灌输给你。这本书也灌输给你，但相对来说有利于向下看，因为它偏向于对解决问题的方法的进行介绍，而不是说技术本身，这样容易引发你的成就感，让你想继续下去。而这是正是这本书的活力所在。&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;好吧，说到这里，还是要强调一下。这些观点比较主观，这些只是建议。看个人吧，照我想的是，如果你已经有一定的基础，至少能自己写出检测那个是浏览器、写出表格排序的基本，那你不用买这本书，因为你会失望；如果你想学习AJAX，也不建议你买这本书，同样会失望。这书适合一些想相比比较初级，而想系统地学习一下JS的人。&lt;/p&gt;
&lt;p&gt;&lt;hr&gt;&amp;copy;2010 &lt;a href=&quot;http://www.happinesz.cn&quot;&gt;幸福收藏夹&lt;/a&gt;. 版权所有,转载务必注明.该Feed只供个人使用,禁止未注明的转载或商业应用.非法应用的,一切法律后果自负.如有问题,可发E-mail至sofish@163.com.&lt;hr&gt;&lt;/p&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/327594738/sofish/feedsky/s.gif?r=http://www.happinesz.cn/archives/1270/&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/sofish/327594738/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/sofish/327594738/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fsflare&quot;&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=ac33188996b030ac5cae99226f8d970e&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=ac33188996b030ac5cae99226f8d970e&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=d8fd94793b7a542a594f0ad66d8fbd6f&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=d8fd94793b7a542a594f0ad66d8fbd6f&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=535d6974136810b4c46767f7d50de4df&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=535d6974136810b4c46767f7d50de4df&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=81b79b9816eb428982c43db33eb469eb&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=81b79b9816eb428982c43db33eb469eb&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=8aae7da8775fc9fb4cf6d27d9eeddbf1&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=8aae7da8775fc9fb4cf6d27d9eeddbf1&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/p&gt;</content:encoded><wfw:commentRss>http://www.happinesz.cn/archives/1270/feed/</wfw:commentRss><slash:comments>42</slash:comments><description>一向喜欢买最厚书，但只看最薄书的我，终于把530+页的《JavaScript   高级程序设计》看完了。其实，看到一半的时候，我很怀疑这本书值不值得读下去。介于很多前端爱好者读这个博客，准备简单地来说一下这本书。如果用一句话来概括，就是：丫有点跟不上时代了，但这里面的方法和思想值得你认真读一读这本书。

1. 太老的内容
浏览器检测（和兼容）、Javascript中的XML、flash，HTTP请求等，讲的内容太老了。另外，这本书还在说ECMAScript   4是未来的时候，在不久的过去，ES5已经成为了新的标准。（FML，这就是时间的力量）怎么说呢，如果想学这方面的内容，也想加强AJAX，你基本上不用考虑这本书了，可以考虑《AJAX 高级程序设计》，依然是Nicholas   C.Zakas的书，只不过还有其他两位合著。
2. 错误的内容
正则表达式这一章写得很不错，个人来说，这一章是所有章节中写得最容易看懂的，但也是最容易误导别的人。比如检测MAIL的正则表达式考虑不周（可能参考我写的一篇文章：用Javascript正则表达式验证Email地址），而删除行头行末的空格也出现了错误。这会让人对这本书的内容很不放心，至少我当时的感受就是这样，在想有没有必要继续读下去。当然，或许你也会觉得，这没什么，书总会有错误，但这么低级的错误，比较不应该。
3. 值得一看
上面说了。一方面：内容太老了，当时都还没有IE7，Mozilla Firefox 3(甚至ver.2都没有)，更没有今天的safari   4和同样优秀的Chrome（当然，不是必要的）；另一方面，内容不严谨。但是，这还是一本值得看的书。虽然这些问题有了（其实很多书都没想象中的新），并且有随意给HTML加Attribute这种忽视标准的做法。但：


系统。虽然这本书说是高级程序设计，但这绝对不是一本把你带向高手的书，而是一本更适合新手进行系统学习的书。《JavaScript       权威指南》更系统，但950+页的内容，并不适合一个新手来全面对这本书进行了解，而又能学到比较有用的的技术。《权威指南》比较适合作为一本详细的参考书来用（现在我就拿着第5版，重得要死）。不过，《权威指南》相对于这本书来说，内容更适合你了解AJAX相关的技术；

活力。这个很泛。但这是你在枯燥的《权威指南》找不到的，后者为了尽可能详情，想把一切都灌输给你。这本书也灌输给你，但相对来说有利于向下看，因为它偏向于对解决问题的方法的进行介绍，而不是说技术本身，这样容易引发你的成就感，让你想继续下去。而这是正是这本书的活力所在。

好吧，说到这里，还是要强调一下。这些观点比较主观，这些只是建议。看个人吧，照我想的是，如果你已经有一定的基础，至少能自己写出检测那个是浏览器、写出表格排序的基本，那你不用买这本书，因为你会失望；如果你想学习AJAX，也不建议你买这本书，同样会失望。这书适合一些想相比比较初级，而想系统地学习一下JS的人。
&amp;#169;2010 幸福收藏夹. 版权所有,转载务必注明.该Feed只供个人使用,禁止未注明的转载或商业应用.非法应用的,一切法律后果自负.如有问题,可发E-mail至sofish@163.com.&lt;img src=&quot;http://www1.feedsky.com/t1/327594738/sofish/feedsky/s.gif?r=http://www.happinesz.cn/archives/1270/&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/sofish/327594738/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/sofish/327594738/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fsflare&quot;&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=ac33188996b030ac5cae99226f8d970e&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=ac33188996b030ac5cae99226f8d970e&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=d8fd94793b7a542a594f0ad66d8fbd6f&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=d8fd94793b7a542a594f0ad66d8fbd6f&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=535d6974136810b4c46767f7d50de4df&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=535d6974136810b4c46767f7d50de4df&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=81b79b9816eb428982c43db33eb469eb&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=81b79b9816eb428982c43db33eb469eb&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=8aae7da8775fc9fb4cf6d27d9eeddbf1&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=8aae7da8775fc9fb4cf6d27d9eeddbf1&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/p&gt;</description><category>书</category><category>JavaScript</category><pubDate>Thu, 10 Dec 2009 09:00:03 +0800</pubDate><author>sofish</author><comments>http://www.happinesz.cn/archives/1270/#comments</comments><guid isPermaLink="false">http://www.happinesz.cn/archives/1270/</guid><dc:creator>sofish</dc:creator><fs:srclink>http://www.happinesz.cn/archives/1270/</fs:srclink><fs:srcfeed>http://www.happinesz.cn/?feed=rss2</fs:srcfeed><fs:itemid>feedsky/sofish/~1329654/327594738/1334283</fs:itemid></item><item><title>腾讯深圳现场招聘会</title><link>http://www.happinesz.cn/archives/1267/</link><content:encoded>&lt;p&gt;来来，友情发一下招聘贴。腾讯公司将会在2009年12月12日在深圳腾讯大厦一楼大堂举办现场招聘会，现场招聘职位超过170个，详情请见: （&lt;a href=&quot;http://hr.tencent.com/pages/scene/live_20091130_sz.shtml&quot;&gt;猛击&lt;/a&gt;）。如果您是应聘&lt;a href=&quot;http://hr.tencent.com/pages/position/detail.shtml?jobid=1997&amp;amp;location=0&quot;&gt; HL1-页面重构工程师&lt;/a&gt;，可以先发您的简历到：ivane@qq.com，对啦，这就是传说中的 &lt;a href=&quot;http://ivane.net/blog/&quot;&gt;ivane&lt;/a&gt; 老师的邮箱。特别热心、特别靠谱的家伙，推荐大家先发邮件给他，这样&amp;#8230; Errr&amp;#8230; 照我说的做，准没错！&lt;/p&gt;
&lt;p&gt;&lt;img width=&quot;500&quot; alt=&quot;腾讯&quot; class=&quot;iborder&quot; src=&quot;http://hr.tencent.com/pages/scene/images/20091130_001.jpg&quot; /&gt;&lt;/p&gt;
&lt;p&gt;好吧，就到这里，下面没什么，祝你成功！&lt;/p&gt;
&lt;p&gt;&lt;hr&gt;&amp;copy;2010 &lt;a href=&quot;http://www.happinesz.cn&quot;&gt;幸福收藏夹&lt;/a&gt;. 版权所有,转载务必注明.该Feed只供个人使用,禁止未注明的转载或商业应用.非法应用的,一切法律后果自负.如有问题,可发E-mail至sofish@163.com.&lt;hr&gt;&lt;/p&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/327594739/sofish/feedsky/s.gif?r=http://www.happinesz.cn/archives/1267/&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/sofish/327594739/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/sofish/327594739/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fsflare&quot;&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=3ba664fa79917f9dbce9deb524f93433&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=3ba664fa79917f9dbce9deb524f93433&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=b22b84b2d77936745134c4e8362252fb&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=b22b84b2d77936745134c4e8362252fb&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=2debdc56641a34b7cd712b29cd990cd3&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=2debdc56641a34b7cd712b29cd990cd3&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=990a9b89740964b69b006808c5a2b566&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=990a9b89740964b69b006808c5a2b566&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=2fe7e501ff7c03115eb3a8923a68a722&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=2fe7e501ff7c03115eb3a8923a68a722&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/p&gt;</content:encoded><wfw:commentRss>http://www.happinesz.cn/archives/1267/feed/</wfw:commentRss><slash:comments>32</slash:comments><description>来来，友情发一下招聘贴。腾讯公司将会在2009年12月12日在深圳腾讯大厦一楼大堂举办现场招聘会，现场招聘职位超过170个，详情请见: （猛击）。如果您是应聘 HL1-页面重构工程师，可以先发您的简历到：ivane@qq.com，对啦，这就是传说中的 ivane 老师的邮箱。特别热心、特别靠谱的家伙，推荐大家先发邮件给他，这样&amp;#8230; Errr&amp;#8230; 照我说的做，准没错！

好吧，就到这里，下面没什么，祝你成功！
&amp;#169;2010 幸福收藏夹. 版权所有,转载务必注明.该Feed只供个人使用,禁止未注明的转载或商业应用.非法应用的,一切法律后果自负.如有问题,可发E-mail至sofish@163.com.&lt;img src=&quot;http://www1.feedsky.com/t1/327594739/sofish/feedsky/s.gif?r=http://www.happinesz.cn/archives/1267/&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/sofish/327594739/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/sofish/327594739/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fsflare&quot;&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=3ba664fa79917f9dbce9deb524f93433&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=3ba664fa79917f9dbce9deb524f93433&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=b22b84b2d77936745134c4e8362252fb&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=b22b84b2d77936745134c4e8362252fb&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=2debdc56641a34b7cd712b29cd990cd3&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=2debdc56641a34b7cd712b29cd990cd3&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=990a9b89740964b69b006808c5a2b566&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=990a9b89740964b69b006808c5a2b566&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=2fe7e501ff7c03115eb3a8923a68a722&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=2fe7e501ff7c03115eb3a8923a68a722&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/p&gt;</description><category>腾讯</category><category>互联网小记</category><category>招聘</category><pubDate>Sun, 06 Dec 2009 23:10:34 +0800</pubDate><author>sofish</author><comments>http://www.happinesz.cn/archives/1267/#comments</comments><guid isPermaLink="false">http://www.happinesz.cn/archives/1267/</guid><dc:creator>sofish</dc:creator><fs:srclink>http://www.happinesz.cn/archives/1267/</fs:srclink><fs:srcfeed>http://www.happinesz.cn/?feed=rss2</fs:srcfeed><fs:itemid>feedsky/sofish/~1329654/327594739/1334283</fs:itemid></item><item><title>与 Twitter 相关的设计</title><link>http://www.happinesz.cn/archives/1261/</link><content:encoded>&lt;p&gt;这两天又荒废了，没有看书。不知道不觉过了。从明天起，估计要忙到下周一了。这日子啊。不过，搞了一点与Twitter有关的东西。两个设计：&lt;/p&gt;
&lt;h3&gt;1. Rabr 的登陆界面&lt;/h3&gt;
&lt;p&gt;&lt;img width=&quot;500&quot; height=&quot;240&quot; class=&quot;iborder&quot; alt=&quot;rabr&quot; src=&quot;http://www.happinesz.cn/mypics/twitter_design_rabr.jpg&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;a title=&quot;disinfeqt&quot; href=&quot;http://twitter.com/disinfeqt&quot;&gt;disinfeqt&lt;/a&gt; 同学就是喜欢折腾，还弄了个rabr（&lt;a href=&quot;#comment-14668&quot;&gt;showfom&lt;/a&gt; 同学说放在他服务器上，不要公开地址，囧，我写nofollow，没事的），就是山寨的修改版呗。 不过，爱折腾是好事，至少有很多同学正开心地用着。他就是让我写了几行JS，还要我帮他做个登陆界面，Errr&amp;#8230;   不过，还是帮他整了。样子就像上面这个图。具体的效果可以看这里，code出来的效果比图来得好多了：&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://is.gd/59Wgi&quot; rel=&quot;nofollow&quot;&gt;http://is.gd/59Wgi&lt;/a&gt;（还不错吧，一张35K的图片，HTML+CSS+JS）&lt;/p&gt;
&lt;h3&gt;1. Twfav 的登陆界面&lt;/h3&gt;
&lt;p&gt;&lt;img width=&quot;500&quot; height=&quot;263&quot; class=&quot;iborder&quot; alt=&quot;twfav&quot; src=&quot;http://www.happinesz.cn/mypics/twitter_design_twfav.jpg&quot; /&gt;&lt;/p&gt;
&lt;p&gt;一不小心，被&lt;a href=&quot;http://riku.me/&quot;&gt;riku&lt;/a&gt;同学拉进了&lt;a href=&quot;http://twfav.com/&quot;&gt;twfav&lt;/a&gt;的团队；一不小心，   我又多了一个让我折腾设计和前端代码的地方。其实挺好的，平时学习之后可以当练习。而且了解过了，这个是业余的，不用花连续的时间在里面。还有3个很有爱的队友（&lt;a href=&quot;http://twitter.com/hfcorriez&quot;&gt;@hfcorriez&lt;/a&gt; &lt;a href=&quot;http://twitter.com/gowers&quot;&gt;@gowers&lt;/a&gt;），不是很好么？&lt;/p&gt;
&lt;p&gt;然后，心血来潮，就画了这个界面。Errr&amp;#8230; 感觉还不够的样子。不过，暂时就这样定了。不折腾了。等我忙完回来再说。预览可以看这个：&lt;a href=&quot;http://is.gd/59WhT&quot;&gt;http://is.gd/59WhT&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;好，结束。我睡觉了。今天@hfcorriez 同学说，我是睡神。有点。囧，昨晚睡得不是很好，虽然10多起床，还是很不爽，然后，下午又睡到4点多，依然不爽。现在又要去猪睡了。&lt;/p&gt;
&lt;p&gt;晚安！^,^&amp;#8230;&lt;/p&gt;
&lt;p&gt;&lt;hr&gt;&amp;copy;2010 &lt;a href=&quot;http://www.happinesz.cn&quot;&gt;幸福收藏夹&lt;/a&gt;. 版权所有,转载务必注明.该Feed只供个人使用,禁止未注明的转载或商业应用.非法应用的,一切法律后果自负.如有问题,可发E-mail至sofish@163.com.&lt;hr&gt;&lt;/p&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/327594740/sofish/feedsky/s.gif?r=http://www.happinesz.cn/archives/1261/&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/sofish/327594740/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/sofish/327594740/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fsflare&quot;&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=f211d4544b19e0f4e15dcaeaccd49d8b&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=f211d4544b19e0f4e15dcaeaccd49d8b&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=7f9dcfc494f9fafb0b713f2720c9d4da&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=7f9dcfc494f9fafb0b713f2720c9d4da&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=320b7e9f64760bd8096434f3e9d45f10&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=320b7e9f64760bd8096434f3e9d45f10&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=6e5d6adea66cb213e80022be76e1b67a&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=6e5d6adea66cb213e80022be76e1b67a&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=14210a560b66328acbedc32c0e0bc079&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=14210a560b66328acbedc32c0e0bc079&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/p&gt;</content:encoded><wfw:commentRss>http://www.happinesz.cn/archives/1261/feed/</wfw:commentRss><slash:comments>71</slash:comments><description>这两天又荒废了，没有看书。不知道不觉过了。从明天起，估计要忙到下周一了。这日子啊。不过，搞了一点与Twitter有关的东西。两个设计：
1. Rabr 的登陆界面

disinfeqt 同学就是喜欢折腾，还弄了个rabr（showfom 同学说放在他服务器上，不要公开地址，囧，我写nofollow，没事的），就是山寨的修改版呗。 不过，爱折腾是好事，至少有很多同学正开心地用着。他就是让我写了几行JS，还要我帮他做个登陆界面，Errr&amp;#8230;   不过，还是帮他整了。样子就像上面这个图。具体的效果可以看这里，code出来的效果比图来得好多了：
http://is.gd/59Wgi（还不错吧，一张35K的图片，HTML+CSS+JS）
1. Twfav 的登陆界面

一不小心，被riku同学拉进了twfav的团队；一不小心，   我又多了一个让我折腾设计和前端代码的地方。其实挺好的，平时学习之后可以当练习。而且了解过了，这个是业余的，不用花连续的时间在里面。还有3个很有爱的队友（@hfcorriez @gowers），不是很好么？
然后，心血来潮，就画了这个界面。Errr&amp;#8230; 感觉还不够的样子。不过，暂时就这样定了。不折腾了。等我忙完回来再说。预览可以看这个：http://is.gd/59WhT
好，结束。我睡觉了。今天@hfcorriez 同学说，我是睡神。有点。囧，昨晚睡得不是很好，虽然10多起床，还是很不爽，然后，下午又睡到4点多，依然不爽。现在又要去猪睡了。
晚安！^,^&amp;#8230;
&amp;#169;2010 幸福收藏夹. 版权所有,转载务必注明.该Feed只供个人使用,禁止未注明的转载或商业应用.非法应用的,一切法律后果自负.如有问题,可发E-mail至sofish@163.com.&lt;img src=&quot;http://www1.feedsky.com/t1/327594740/sofish/feedsky/s.gif?r=http://www.happinesz.cn/archives/1261/&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/sofish/327594740/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/sofish/327594740/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fsflare&quot;&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=f211d4544b19e0f4e15dcaeaccd49d8b&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=f211d4544b19e0f4e15dcaeaccd49d8b&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=7f9dcfc494f9fafb0b713f2720c9d4da&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=7f9dcfc494f9fafb0b713f2720c9d4da&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=320b7e9f64760bd8096434f3e9d45f10&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=320b7e9f64760bd8096434f3e9d45f10&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=6e5d6adea66cb213e80022be76e1b67a&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=6e5d6adea66cb213e80022be76e1b67a&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=14210a560b66328acbedc32c0e0bc079&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=14210a560b66328acbedc32c0e0bc079&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/p&gt;</description><category>twitter</category><category>Design</category><pubDate>Wed, 02 Dec 2009 19:50:47 +0800</pubDate><author>sofish</author><comments>http://www.happinesz.cn/archives/1261/#comments</comments><guid isPermaLink="false">http://www.happinesz.cn/?p=1261</guid><dc:creator>sofish</dc:creator><fs:srclink>http://www.happinesz.cn/archives/1261/</fs:srclink><fs:srcfeed>http://www.happinesz.cn/?feed=rss2</fs:srcfeed><fs:itemid>feedsky/sofish/~1329654/327594740/1334283</fs:itemid></item><item><title>改善登陆界面的用户体验: 自动聚焦表单</title><link>http://www.happinesz.cn/archives/1258/</link><content:encoded>&lt;p&gt;在登陆界面中，通常，最重要的部分为登陆的Form表。一个非常棒的提升体验的做法是，在载入页面时自动聚焦到第一个提供用户输入的表单框，让用户不用再多一个点击，就可以输入。这被很多网站采用。记得这在&lt;a title=&quot;Permanent Links to 10个改善UI设计的技术(2)&quot; href=&quot;http://www.happinesz.cn/archives/844/&quot; rel=&quot;bookmark&quot;&gt;10个改善UI设计的技术(2)&lt;/a&gt;这篇文章中也有提到过，这也被很多网站采用，比如维基百科就是这样：&lt;/p&gt;
&lt;p&gt;&lt;img width=&quot;420&quot; height=&quot;70&quot; alt=&quot;auto focus&quot; src=&quot;http://happinesz.cn/mypics/js_auto_focus_1.png&quot; /&gt;&lt;/p&gt;
&lt;p&gt;当然，自动聚焦不仅仅适合在登陆界面，而适合在任何需要的界面。比如WordPress登陆后台的界面和支付宝的登陆界面，都采用了自动聚焦的方法。&lt;/p&gt;
&lt;p&gt;&lt;img width=&quot;500&quot; height=&quot;296&quot; alt=&quot;auto focus&quot; src=&quot;http://happinesz.cn/mypics/js_auto_focus_2.png&quot; /&gt;&lt;/p&gt;
&lt;p&gt;而具体应该是怎样实现的呢？假设我们的表单如下：&lt;/p&gt;
&lt;pre class=&quot;code_bg&quot;&gt;
&amp;lt;form id=&amp;quot;signin&amp;quot; method=&amp;quot;post&amp;quot; name=&amp;quot;signin&amp;quot; action=&amp;quot;http://www.happinesz.cn&amp;quot;&amp;gt;
 &amp;lt;input value=&amp;quot;hidefor&amp;quot; type=&amp;quot;hidden&amp;quot; name=&amp;quot;hide&amp;quot; /&amp;gt;
 &amp;lt;input id=&amp;quot;usr&amp;quot; name=&amp;quot;usr&amp;quot; /&amp;gt;
 &amp;lt;input id=&amp;quot;pwd&amp;quot; type=&amp;quot;password&amp;quot; name=&amp;quot;pwd&amp;quot; /&amp;gt;
 &amp;lt;input id=&amp;quot;smbt&amp;quot; value=&amp;quot;submit&amp;quot; type=&amp;quot;button&amp;quot; name=&amp;quot;smbt&amp;quot; /&amp;gt;
&amp;lt;/form&amp;gt;
&lt;/pre&gt;
&lt;p&gt;我们要让焦点落在&lt;code&gt;id=&amp;quot;usr&amp;quot;&lt;/code&gt;的&lt;code&gt;input&lt;/code&gt;上，用 Javascript 的方法，我们可以这样做：&lt;/p&gt;
&lt;pre class=&quot;code_bg&quot;&gt;
  document.forms[&amp;quot;signin&amp;quot;].elements[&amp;quot;usr&amp;quot;].focus();
&lt;/pre&gt;
&lt;p&gt;这里是当我们明确知道要在那个表单上添加 &lt;code&gt;focus&lt;/code&gt;   的时候可以用的方法。这里，&lt;code&gt;elements&lt;/code&gt;也可以用方括号的方法来获取&lt;code&gt;input&lt;/code&gt;表单，比如&lt;code&gt;.elements[0]&lt;/code&gt;即为第一个&lt;code&gt;input&lt;/code&gt;表单。当我们要聚焦的   &lt;code&gt;input&lt;/code&gt;前面有&lt;code&gt;type=&amp;quot;hidden&amp;quot;&lt;/code&gt;的隐藏&lt;code&gt;input&lt;/code&gt;，由于隐藏的&lt;code&gt;input&lt;/code&gt;是不支持&lt;code&gt;.focus&lt;/code&gt;的，一旦应用其上，就会出现Javascript错误，要避免这样的的错误。我们可以搜索第一个表单中，第一个非隐藏的   &lt;code&gt;input&lt;/code&gt;，并给加上&lt;code&gt;.focus&lt;/code&gt;：（除非你是想封装起来，自动判断，不然，最好不要用这个方法，多浪费资源啊，又if又for的）&lt;/p&gt;
&lt;pre class=&quot;code_bg&quot;&gt;
window.onload = function(){
 if(document.forms.length&amp;gt;0){
  for(i=0;i&amp;lt;document.forms[0].elements.length; i++){
   var oInput = document.forms[0].elements[i];
   if(oInput.type!=&amp;quot;hidden&amp;quot;){
    oInput.focus();
    return;
   }
  }
 }
}
&lt;/pre&gt;
&lt;p&gt;到这里，很多网站都只做到这里，比如我前面提到的Wordpress的登陆界面和支付宝的登陆界面。他们的目标的相同的，提升用户体验。我的目标也这样。但是，这有时候，这并不一定提升了用户体验。为什么呢？&lt;/p&gt;
&lt;p&gt;想想，你是不是也曾出现过这样的状况：当时，你的网速并不快，你进入&lt;a href=&quot;http://www.alipay.com&quot;&gt;www.alipay.com&lt;/a&gt;的时候，还没有自动聚集，因为JS还没加载。但，你已经输入用户名了，并且已经在输入密码。好，打住。我们来讲个故事：很久很久以前，有个叫sofish，他当时挂着迅雷在下载XXX东西，急着想要用支付宝，当时页面还没有加载完，输入用户名后，正准备输入密码（习惯性地用键盘上的TAB键来切换到密码框），然后，抬头，当时，密码出现在输入用户名的框上，并且，旁边有一同学正在那里看着。&lt;/p&gt;
&lt;p&gt;你看，你看，难道，这样的自动聚焦提升了用户的所谓的体验么? 这里，就往往相反，可能导致用户要重新改密码（比如那个当时RP比较低下的叫sofish的家伙）。&lt;/p&gt;
&lt;p&gt;有什么方法可以解决么？当然！我们把上面的代码改装如下：&lt;/p&gt;
&lt;pre class=&quot;code_bg&quot;&gt;
window.onload = function(){
 if(document.forms.length&amp;gt;0){
  for(i=0;i&amp;lt;document.forms[0].elements.length; i++){
   var oInput = document.forms[0].elements[i];
   if(oInput.type!=&amp;quot;hidden&amp;quot; &amp;amp;&amp;amp; oInput.value==&amp;quot;&amp;quot;){
    oInput.focus();
    return;
   }
  }
 }
}
&lt;/pre&gt;
&lt;p&gt;但是，这样一来，这个聚集就会自动跳到下一个非隐藏的&lt;code&gt;input&lt;/code&gt;中，如果我正在输入，那不是很不爽? 嗯，当然不爽，所以，我们再折腾一下，做点小改正：&lt;/p&gt;
&lt;pre class=&quot;code_bg&quot;&gt;
window.onload = function(){
 if(document.forms.length&amp;gt;0){
  for(i=0;i&amp;lt;document.forms[0].elements.length; i++){
   var oInput = document.forms[0].elements[i];
   if(oInput.type!=&amp;quot;hidden&amp;quot; &amp;amp;&amp;amp; oInput.value.length&amp;gt;0){
     oInput.blur();
     return;
   }else if(oInput.type!=&amp;quot;hidden&amp;quot;){
    oInput.focus();return
    }
  }
 }
}
&lt;/pre&gt;
&lt;p&gt;由于在&lt;code&gt;oInput.type!=&amp;quot;hidden&amp;quot;&lt;/code&gt;中有一种情况，即当用户已经输入的时候，他会自动聚集到下一个，这样，也有问题，所以，我们让如果已经有输入的情况下，去掉所有&lt;code&gt;input&lt;/code&gt;的焦点，而   &lt;code&gt;else if&lt;/code&gt;中才让没有输入的用户自动对焦到第一个。（当然，如果有人习惯先输入密码，再输入用户名，那就再另想办法吧）。&lt;/p&gt;
&lt;p&gt;其实，这样，有时候好用，但有时候相当于根本不去自动聚焦。不过，对于保护用户的输入（特别是密码）来说，我想，用改进的方法，会比无改进的自动聚焦和根本不自动聚集来得好。当然，我相信，会有更好的方法。请不吝赐教。其他的就让我这个爱折腾的JS编程学院新生慢慢发现吧。&lt;/p&gt;
&lt;p&gt;&lt;hr&gt;&amp;copy;2010 &lt;a href=&quot;http://www.happinesz.cn&quot;&gt;幸福收藏夹&lt;/a&gt;. 版权所有,转载务必注明.该Feed只供个人使用,禁止未注明的转载或商业应用.非法应用的,一切法律后果自负.如有问题,可发E-mail至sofish@163.com.&lt;hr&gt;&lt;/p&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/327594741/sofish/feedsky/s.gif?r=http://www.happinesz.cn/archives/1258/&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/sofish/327594741/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/sofish/327594741/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fsflare&quot;&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=2263110934b33c581837577ac2e8d27c&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=2263110934b33c581837577ac2e8d27c&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=6761b43cedfae31adffd8f13a2dfaa50&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=6761b43cedfae31adffd8f13a2dfaa50&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=6d884fa28ea28148f11bcd231f83dd92&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=6d884fa28ea28148f11bcd231f83dd92&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=2c8f208fbf037a94d001a49678175dd6&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=2c8f208fbf037a94d001a49678175dd6&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=6deb14e07a8942c474796b76564068c7&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=6deb14e07a8942c474796b76564068c7&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/p&gt;</content:encoded><wfw:commentRss>http://www.happinesz.cn/archives/1258/feed/</wfw:commentRss><slash:comments>27</slash:comments><description>在登陆界面中，通常，最重要的部分为登陆的Form表。一个非常棒的提升体验的做法是，在载入页面时自动聚焦到第一个提供用户输入的表单框，让用户不用再多一个点击，就可以输入。这被很多网站采用。记得这在10个改善UI设计的技术(2)这篇文章中也有提到过，这也被很多网站采用，比如维基百科就是这样：

当然，自动聚焦不仅仅适合在登陆界面，而适合在任何需要的界面。比如WordPress登陆后台的界面和支付宝的登陆界面，都采用了自动聚焦的方法。

而具体应该是怎样实现的呢？假设我们的表单如下：

&amp;#60;form id=&amp;#34;signin&amp;#34; method=&amp;#34;post&amp;#34; name=&amp;#34;signin&amp;#34; action=&amp;#34;http://www.happinesz.cn&amp;#34;&amp;#62;
 &amp;#60;input value=&amp;#34;hidefor&amp;#34; type=&amp;#34;hidden&amp;#34; name=&amp;#34;hide&amp;#34; /&amp;#62;
 &amp;#60;input id=&amp;#34;usr&amp;#34; name=&amp;#34;usr&amp;#34; /&amp;#62;
 &amp;#60;input id=&amp;#34;pwd&amp;#34; type=&amp;#34;password&amp;#34; name=&amp;#34;pwd&amp;#34; /&amp;#62;
 &amp;#60;input id=&amp;#34;smbt&amp;#34; value=&amp;#34;submit&amp;#34; type=&amp;#34;button&amp;#34; name=&amp;#34;smbt&amp;#34; /&amp;#62;
&amp;#60;/form&amp;#62;

我们要让焦点落在id=&amp;#34;usr&amp;#34;的input上，用 Javascript 的方法，我们可以这样做：

  document.forms[&amp;#34;signin&amp;#34;].elements[&amp;#34;usr&amp;#34;].focus();

这里是当我们明确知道要在那个表单上添加 focus   的时候可以用的方法。这里，elements也可以用方括号的方法来获取input表单，比如.elements[0]即为第一个input表单。当我们要聚焦的   input前面有type=&amp;#34;hidden&amp;#34;的隐藏input，由于隐藏的input是不支持.focus的，一旦应用其上，就会出现Javascript错误，要避免这样的的错误。我们可以搜索第一个表单中，第一个非隐藏的   input，并给加上.focus：（除非你是想封装起来，自动判断，不然，最好不要用这个方法，多浪费资源啊，又if又for的）

window.onload = function(){
 if(document.forms.length&amp;#62;0){
  for(i=0;i&amp;#60;document.forms[0].elements.length; i++){
   var oInput = document.forms[0].elements[i];
   if(oInput.type!=&amp;#34;hidden&amp;#34;){
  [...]&lt;img src=&quot;http://www1.feedsky.com/t1/327594741/sofish/feedsky/s.gif?r=http://www.happinesz.cn/archives/1258/&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/sofish/327594741/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/sofish/327594741/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fsflare&quot;&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=2263110934b33c581837577ac2e8d27c&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=2263110934b33c581837577ac2e8d27c&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=6761b43cedfae31adffd8f13a2dfaa50&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=6761b43cedfae31adffd8f13a2dfaa50&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=6d884fa28ea28148f11bcd231f83dd92&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=6d884fa28ea28148f11bcd231f83dd92&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=2c8f208fbf037a94d001a49678175dd6&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=2c8f208fbf037a94d001a49678175dd6&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=6deb14e07a8942c474796b76564068c7&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=6deb14e07a8942c474796b76564068c7&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/p&gt;</description><category>用户体验</category><category>JavaScript</category><pubDate>Sun, 29 Nov 2009 20:08:12 +0800</pubDate><author>sofish</author><comments>http://www.happinesz.cn/archives/1258/#comments</comments><guid isPermaLink="false">http://www.happinesz.cn/?p=1258</guid><dc:creator>sofish</dc:creator><fs:srclink>http://www.happinesz.cn/archives/1258/</fs:srclink><fs:srcfeed>http://www.happinesz.cn/?feed=rss2</fs:srcfeed><fs:itemid>feedsky/sofish/~1329654/327594741/1334283</fs:itemid></item><item><title>用Javascript正则表达式验证Email地址</title><link>http://www.happinesz.cn/archives/1244/</link><content:encoded>&lt;p&gt;白天总是玩着不看书，这两晚却很神奇地因为睡不着起来看书，正则表达式。很好玩的东西。《Javascript   高级程序设计》是本好书，写得很系统。不过，在正则表达式那一章，看到验证电子邮件那里，似乎把正式表达式给写错了，也被我不小心发现了。&lt;/p&gt;
&lt;p&gt;&lt;img width=&quot;500&quot; height=&quot;150&quot; alt=&quot;&quot; src=&quot;http://happinesz.cn/mypics/isvalidmail.jpg&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;原代码是这样的：&lt;/strong&gt;&lt;/p&gt;
&lt;pre class=&quot;code_bg&quot;&gt;
function isValidMail(sText){
 var reMail = /^(?:\w+\.?)*\w+@(?:\w+\.?)*\w+$/;
 return reMail.test(sText);
}
&lt;/pre&gt;
&lt;p&gt;似乎这样验证像sofish@163.com这样的邮箱是没问题的。但，由于仔细看一下在AT（@）后面的非捕获性引用中，使用的是&lt;span style=&quot;color: rgb(255, 0, 0);&quot;&gt;*&lt;/span&gt;（出现任意次）：&lt;/p&gt;
&lt;pre class=&quot;code_bg&quot;&gt;
var reMail = /^(?:\w+\.?)*\w+@&lt;span style=&quot;color: rgb(0, 128, 255);&quot;&gt;(?:\w+\.?)&lt;/span&gt;&lt;span style=&quot;color: rgb(255, 0, 0);&quot;&gt;*&lt;/span&gt;\w+$/;
&lt;/pre&gt;
&lt;p&gt;那么，也包括出现0次，这样的话。像sofish@163com这样的邮箱也是通过验证的。   显然，&amp;quot;.&amp;quot;是必须至少出现一次的，因此，而&amp;quot;+&amp;quot;才表示至少出现一次。但这里，在AT后面，我们可以写像163.com.cn这样的结尾，但直接改成&amp;quot;+&amp;quot;的话，这样163..com.cn也可以通过验证。下面是我的方法：&lt;/p&gt;
&lt;pre class=&quot;code_bg&quot;&gt;
function isValidMail(sText) {
 var reMail = /^(?:\w+\.?)*\w+@(?:\w+\.)+\w+$/;
 alert(reMail.test(sText))
}
&lt;/pre&gt;
&lt;p&gt;规定&amp;quot;.&amp;quot;号只出现一次。然后在非捕获引用后面，让其他至少显示1次，再以任意的字符结束。不过，这里的&amp;quot;\w&amp;quot;是包括下划线的，也就是说，像   sofish@163_.com_这样的邮件也是可能通过难的，显然，这是一个不合法的邮件，在AT后面的&amp;quot;.&amp;quot;号后前，是不可以出现下划线的，而后面，只能是英文字母的(至少目前我没有见过用后面是数字的域名)。并且，这里应该注意到的是，&amp;quot;\w&amp;quot;所代表的字符包括下划线，不用缩写是这样的：&lt;/p&gt;
&lt;pre class=&quot;code_bg&quot;&gt;
 [a-zA-Z_0-9]
&lt;/pre&gt;
&lt;p&gt;因此，上面的代码可以这样进行改装：&lt;/p&gt;
&lt;pre class=&quot;code_bg&quot;&gt;
function isValidMail(sText) {
 var reMail = /^(?:[a-z\d]+[_\-\+\.]?)*[a-z\d]+@(?:([a-z\d]+\-?)*[a-z\d]+\.)+([a-z]{2,})+$/i;
 alert(reMail.test(sText))
}
&lt;/pre&gt;
&lt;p&gt;其实，通常这样写就可以了，对吧。要更深入，还可以考虑AT后面的各个点后面，不应该用相同的字母，比如.com.cn.com.cn（很显然，这样的域名还是有的，我错了，感谢@&lt;a href=&quot;http://twitter.com/StonyWang&quot;&gt;StonyWang&lt;/a&gt;同学的提醒，真的有人这么囧这样做么?）这样是不被请允许的。可以考虑一下利用捕获性引用进行储存，并进行比较验证。当做一道练习题吧（突然感觉好像在学高中的数学题）。&lt;/p&gt;
&lt;p class=&quot;idownload&quot;&gt;&lt;strong&gt;你可能需要的：&lt;/strong&gt;&lt;a href=&quot;/file/demo/RegExp_isValidMail.html&quot;&gt;测试性预览&lt;/a&gt; | 源代码 (ctrl+U)&lt;/p&gt;
&lt;p&gt;&lt;hr&gt;&amp;copy;2010 &lt;a href=&quot;http://www.happinesz.cn&quot;&gt;幸福收藏夹&lt;/a&gt;. 版权所有,转载务必注明.该Feed只供个人使用,禁止未注明的转载或商业应用.非法应用的,一切法律后果自负.如有问题,可发E-mail至sofish@163.com.&lt;hr&gt;&lt;/p&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/327594742/sofish/feedsky/s.gif?r=http://www.happinesz.cn/archives/1244/&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/sofish/327594742/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/sofish/327594742/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fsflare&quot;&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=3a48f8658941fda9d4a3ac889a09f9f4&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=3a48f8658941fda9d4a3ac889a09f9f4&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=ec69a936b33ffb8f3f3ce19691551fe1&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=ec69a936b33ffb8f3f3ce19691551fe1&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=1c87a3f1fd854ae8bffcf4dc001399db&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=1c87a3f1fd854ae8bffcf4dc001399db&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=19910880168714236e8e1afd243564de&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=19910880168714236e8e1afd243564de&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=2b370c657971c6a0d10f48dadf339e9a&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=2b370c657971c6a0d10f48dadf339e9a&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/p&gt;</content:encoded><wfw:commentRss>http://www.happinesz.cn/archives/1244/feed/</wfw:commentRss><slash:comments>38</slash:comments><description>白天总是玩着不看书，这两晚却很神奇地因为睡不着起来看书，正则表达式。很好玩的东西。《Javascript   高级程序设计》是本好书，写得很系统。不过，在正则表达式那一章，看到验证电子邮件那里，似乎把正式表达式给写错了，也被我不小心发现了。

原代码是这样的：

function isValidMail(sText){
 var reMail = /^(?:\w+\.?)*\w+@(?:\w+\.?)*\w+$/;
 return reMail.test(sText);
}

似乎这样验证像sofish@163.com这样的邮箱是没问题的。但，由于仔细看一下在AT（@）后面的非捕获性引用中，使用的是*（出现任意次）：

var reMail = /^(?:\w+\.?)*\w+@(?:\w+\.?)*\w+$/;

那么，也包括出现0次，这样的话。像sofish@163com这样的邮箱也是通过验证的。   显然，&amp;#34;.&amp;#34;是必须至少出现一次的，因此，而&amp;#34;+&amp;#34;才表示至少出现一次。但这里，在AT后面，我们可以写像163.com.cn这样的结尾，但直接改成&amp;#34;+&amp;#34;的话，这样163..com.cn也可以通过验证。下面是我的方法：

function isValidMail(sText) {
 var reMail = /^(?:\w+\.?)*\w+@(?:\w+\.)+\w+$/;
 alert(reMail.test(sText))
}

规定&amp;#34;.&amp;#34;号只出现一次。然后在非捕获引用后面，让其他至少显示1次，再以任意的字符结束。不过，这里的&amp;#34;\w&amp;#34;是包括下划线的，也就是说，像   sofish@163_.com_这样的邮件也是可能通过难的，显然，这是一个不合法的邮件，在AT后面的&amp;#34;.&amp;#34;号后前，是不可以出现下划线的，而后面，只能是英文字母的(至少目前我没有见过用后面是数字的域名)。并且，这里应该注意到的是，&amp;#34;\w&amp;#34;所代表的字符包括下划线，不用缩写是这样的：

 [a-zA-Z_0-9]

因此，上面的代码可以这样进行改装：

function isValidMail(sText) {
 var reMail = /^(?:[a-z\d]+[_\-\+\.]?)*[a-z\d]+@(?:([a-z\d]+\-?)*[a-z\d]+\.)+([a-z]{2,})+$/i;
 alert(reMail.test(sText))
}

其实，通常这样写就可以了，对吧。要更深入，还可以考虑AT后面的各个点后面，不应该用相同的字母，比如.com.cn.com.cn（很显然，这样的域名还是有的，我错了，感谢@StonyWang同学的提醒，真的有人这么囧这样做么?）这样是不被请允许的。可以考虑一下利用捕获性引用进行储存，并进行比较验证。当做一道练习题吧（突然感觉好像在学高中的数学题）。
你可能需要的：测试性预览 &amp;#124; 源代码 (ctrl+U)
&amp;#169;2010 幸福收藏夹. 版权所有,转载务必注明.该Feed只供个人使用,禁止未注明的转载或商业应用.非法应用的,一切法律后果自负.如有问题,可发E-mail至sofish@163.com.&lt;img src=&quot;http://www1.feedsky.com/t1/327594742/sofish/feedsky/s.gif?r=http://www.happinesz.cn/archives/1244/&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/sofish/327594742/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/sofish/327594742/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fsflare&quot;&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=3a48f8658941fda9d4a3ac889a09f9f4&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=3a48f8658941fda9d4a3ac889a09f9f4&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=ec69a936b33ffb8f3f3ce19691551fe1&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=ec69a936b33ffb8f3f3ce19691551fe1&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=1c87a3f1fd854ae8bffcf4dc001399db&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=1c87a3f1fd854ae8bffcf4dc001399db&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=19910880168714236e8e1afd243564de&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=19910880168714236e8e1afd243564de&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=2b370c657971c6a0d10f48dadf339e9a&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=2b370c657971c6a0d10f48dadf339e9a&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/p&gt;</description><category>正则表达式</category><category>email</category><category>JavaScript</category><pubDate>Fri, 27 Nov 2009 12:56:46 +0800</pubDate><author>sofish</author><comments>http://www.happinesz.cn/archives/1244/#comments</comments><guid isPermaLink="false">http://www.happinesz.cn/?p=1244</guid><dc:creator>sofish</dc:creator><fs:srclink>http://www.happinesz.cn/archives/1244/</fs:srclink><fs:srcfeed>http://www.happinesz.cn/?feed=rss2</fs:srcfeed><fs:itemid>feedsky/sofish/~1329654/327594742/1334283</fs:itemid></item><item><title>The DOM is a Mess</title><link>http://www.happinesz.cn/archives/1242/</link><content:encoded>&lt;p&gt;在Twitter上，&lt;a href=&quot;http://twitter.com/xushengs&quot;&gt;@xushengs&lt;/a&gt; 分享的一个内容。看了，虽然不能听懂所有，不过，挺有收获。特分享出来。各种技术都一样，有老有新，但兼容性各异，需要仔细斟酌，在DOM上，JR的这篇演讲，相信可以让你获益良多。&lt;/p&gt;
&lt;p&gt;顺便说一句，JR就是传说中的 &lt;a href=&quot;http://ejohn.org/&quot; title=&quot;John Resig - JavaScript Programmer&quot;&gt;John Resig&lt;/a&gt; ，jQuery的作者，很Niu[(a+c)/2]的家伙。目前应该是 Mozilla 的员工。哦也，欣赏一下吧。这个白白的小胖子挺好玩的。&lt;/p&gt;
&lt;div&gt;&lt;object width=&quot;512&quot; height=&quot;322&quot;&gt;&lt;param name=&quot;movie&quot; value=&quot;http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.46&quot; /&gt;&lt;param name=&quot;allowFullScreen&quot; value=&quot;true&quot; /&gt;&lt;param name=&quot;AllowScriptAccess&quot; value=&quot;always&quot; /&gt;&lt;param name=&quot;bgcolor&quot; value=&quot;#000000&quot; /&gt;&lt;param name=&quot;flashVars&quot; value=&quot;id=11812238&amp;amp;vid=4403981&amp;amp;lang=en-us&amp;amp;intl=us&amp;amp;thumbUrl=http%3A//l.yimg.com/a/p/i/bcst/videosearch/899/79387316.jpeg&amp;amp;embed=1&quot; /&gt;&lt;embed width=&quot;512&quot; height=&quot;322&quot; src=&quot;http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.46&quot; type=&quot;application/x-shockwave-flash&quot; allowfullscreen=&quot;true&quot; allowscriptaccess=&quot;always&quot; bgcolor=&quot;#000000&quot; flashvars=&quot;id=11812238&amp;amp;vid=4403981&amp;amp;lang=en-us&amp;amp;intl=us&amp;amp;thumbUrl=http%3A//l.yimg.com/a/p/i/bcst/videosearch/899/79387316.jpeg&amp;amp;embed=1&quot;&gt;&lt;/embed&gt;&lt;/object&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://video.yahoo.com/watch/4403981/11812238&quot;&gt;John Resig: &amp;quot;The DOM Is a  Mess&amp;quot;&lt;/a&gt; @ &lt;a href=&quot;http://video.yahoo.com&quot;&gt;Yahoo! Video&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;&lt;hr&gt;&amp;copy;2010 &lt;a href=&quot;http://www.happinesz.cn&quot;&gt;幸福收藏夹&lt;/a&gt;. 版权所有,转载务必注明.该Feed只供个人使用,禁止未注明的转载或商业应用.非法应用的,一切法律后果自负.如有问题,可发E-mail至sofish@163.com.&lt;hr&gt;&lt;/p&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/327594743/sofish/feedsky/s.gif?r=http://www.happinesz.cn/archives/1242/&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/sofish/327594743/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/sofish/327594743/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fsflare&quot;&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=c844d3a7542edc74099b70657961c926&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=c844d3a7542edc74099b70657961c926&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=6f2db1e147e1d9436168486e398823fc&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=6f2db1e147e1d9436168486e398823fc&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=a80e3aa81f42bda3c8ee60d4bcbe4db7&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=a80e3aa81f42bda3c8ee60d4bcbe4db7&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=c797974ed0b4063e207032becca4ecdd&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=c797974ed0b4063e207032becca4ecdd&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=bf7e94ac135c8afa93ba97fc4a5757ca&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=bf7e94ac135c8afa93ba97fc4a5757ca&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/p&gt;</content:encoded><wfw:commentRss>http://www.happinesz.cn/archives/1242/feed/</wfw:commentRss><slash:comments>15</slash:comments><description>在Twitter上，@xushengs 分享的一个内容。看了，虽然不能听懂所有，不过，挺有收获。特分享出来。各种技术都一样，有老有新，但兼容性各异，需要仔细斟酌，在DOM上，JR的这篇演讲，相信可以让你获益良多。
顺便说一句，JR就是传说中的 John Resig ，jQuery的作者，很Niu[(a+c)/2]的家伙。目前应该是 Mozilla 的员工。哦也，欣赏一下吧。这个白白的小胖子挺好玩的。

John Resig: &amp;#34;The DOM Is a  Mess&amp;#34; @ Yahoo! Video

&amp;#169;2010 幸福收藏夹. 版权所有,转载务必注明.该Feed只供个人使用,禁止未注明的转载或商业应用.非法应用的,一切法律后果自负.如有问题,可发E-mail至sofish@163.com.&lt;img src=&quot;http://www1.feedsky.com/t1/327594743/sofish/feedsky/s.gif?r=http://www.happinesz.cn/archives/1242/&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/sofish/327594743/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/sofish/327594743/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fsflare&quot;&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=c844d3a7542edc74099b70657961c926&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=c844d3a7542edc74099b70657961c926&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=6f2db1e147e1d9436168486e398823fc&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=6f2db1e147e1d9436168486e398823fc&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=a80e3aa81f42bda3c8ee60d4bcbe4db7&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=a80e3aa81f42bda3c8ee60d4bcbe4db7&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=c797974ed0b4063e207032becca4ecdd&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=c797974ed0b4063e207032becca4ecdd&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=bf7e94ac135c8afa93ba97fc4a5757ca&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=bf7e94ac135c8afa93ba97fc4a5757ca&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/p&gt;</description><category>DOM</category><category>JavaScript</category><pubDate>Wed, 25 Nov 2009 11:29:59 +0800</pubDate><author>sofish</author><comments>http://www.happinesz.cn/archives/1242/#comments</comments><guid isPermaLink="false">http://www.happinesz.cn/archives/1242/</guid><dc:creator>sofish</dc:creator><fs:srclink>http://www.happinesz.cn/archives/1242/</fs:srclink><fs:srcfeed>http://www.happinesz.cn/?feed=rss2</fs:srcfeed><fs:itemid>feedsky/sofish/~1329654/327594743/1334283</fs:itemid></item><item><title>美之鉴 – 女人与Web设计</title><link>http://www.happinesz.cn/archives/1235/</link><content:encoded>&lt;p&gt;或许你也经历过，很多人都说一个女人很漂亮，而你觉得很一般。有时候，我也尝试理解为什么会对某个女人情有独钟。通常，我用迷人来描述，但这个&amp;quot;迷人&amp;quot;很难再细化解释，即使它真实地表现为一种强烈的吸引感。某些Web设计也一样，很简单，但就是受欢迎。&lt;/p&gt;
&lt;p&gt;&lt;img height=&quot;180&quot; width=&quot;500&quot; title=&quot;hebe&quot; alt=&quot;hebe&quot; src=&quot;http://happinesz.cn/mypics/web_and_beauty.jpg&quot; /&gt;&lt;/p&gt;
&lt;p&gt;今天看到一则古文，解决了自己的某些表达上的疑惑。《美之鉴》，这个对美的刻画很深入。一理通万理，或许，你也会在这几句话中得知什么女人最美，如何设计最中人心：&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;女人之美，下美在貌，中美在情，上美在态。   &lt;br /&gt;
以镜为镜，可以观貌；   &lt;br /&gt;
以女人为镜，可以动情；   &lt;br /&gt;
以男人为镜，可以生态。   &lt;br /&gt;
无貌，还可有情；   &lt;br /&gt;
无情，还可有态；   &lt;br /&gt;
有态，则上可倾国，下可倾城。&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;你可以自己在网站尝试找一下解释，特别是&amp;quot;态&amp;quot;的释义。这里就不多做解释了，直接在下文中边提出自己的理解，边阐述对Web设计之美的总结：设计之美，一般的美为&lt;a href=&quot;#web_and_beauty_1&quot;&gt;外观之美&lt;/a&gt;；中等的美为&lt;a href=&quot;#web_and_beauty_2&quot;&gt;排版之美&lt;/a&gt;；最美为&lt;a href=&quot;#web_and_beauty_3&quot;&gt;体验之美&lt;/a&gt;。&lt;/p&gt;
&lt;h3 id=&quot;web_and_beauty_1&quot;&gt;1. 外观之美&lt;/h3&gt;
&lt;p&gt;&amp;quot;下美在貌&amp;#8230;   以镜为镜，可以观貌&amp;quot;，这里说的是，外观上的美，可以根据某此自己的总结经历的标准（镜不是活的，镜前之美，是我们自我理解的美），对比着实现。Web设计也一样，根据标准，我们要求别人，或者自己对比着实现，一个属于自己的美。比如中国风这个主题的第一印象：&lt;/p&gt;
&lt;p&gt;&lt;img height=&quot;238&quot; width=&quot;500&quot; alt=&quot;中国风&quot; src=&quot;http://happinesz.cn/mypics/web_and_beauty_chinafun.jpg&quot; /&gt;&lt;/p&gt;
&lt;p&gt;喜欢中国风情的人，会觉得漂亮；崇尚简洁的人则不以为然。这是决定于评判美的标准是不同的。外观之美，是下美，有人喜欢，但只是某些特定的人喜欢。这种设计，通常比较适合需要展示个性的个人主页。&lt;/p&gt;
&lt;h3 id=&quot;web_and_beauty_2&quot;&gt;2. 排版之美&lt;/h3&gt;
&lt;p&gt;&amp;quot;中美在情&amp;#8230;以女人为镜，可以动情&amp;quot;，这里说的是，性格上的美，可以以同类为标准来做改变。Web设计上，可以不用独具视觉冲击的背景或图标，却可以在同类的比较中得出改造的方案。比如我自己博客在排版上的处理与RSS阅读器中排版的区别：&lt;/p&gt;
&lt;p&gt;&lt;img height=&quot;482&quot; width=&quot;500&quot; alt=&quot;type&quot; src=&quot;http://happinesz.cn/mypics/web_and_beauty_type.png&quot; /&gt;&lt;/p&gt;
&lt;p&gt;博客上的排版，标题与加粗分明，字体大小和色调不同，代码与文字内容区分开，更方便快速浏览。这是由排版所决定的。这在以字母（类似于英文字母）为文字的设计中，这种区分将会更有必要。通常，这种设计适合所有网站。当然，是所有。每个网站都需要更好的排版。&lt;/p&gt;
&lt;h3 id=&quot;web_and_beauty_3&quot;&gt;3. 体验之美&lt;/h3&gt;
&lt;p&gt;&amp;quot;上美在态&amp;#8230;   以男人为镜，可以生态&amp;quot;，这里说的是，女人气质情趣之美，可以以男人的需求为标准而产生。可以用一句最简单的话来描述一个具备上等美的女人：&amp;quot;这个女人既漂亮又懂得相夫教子&amp;quot;（我想如果你将来用上，应该感谢一下sofish）。刚才为什么在描述&lt;a href=&quot;#web_and_beauty_2&quot;&gt;   排版之美&lt;/a&gt;的时候，说到的是需要&amp;quot;更好&amp;quot;的排版；为什么说一个具备&amp;quot;上等美&amp;quot;的女人，而不是说&amp;quot;最美&amp;quot;的女人。因为一方面最美并不是具备一方面就能达到的，一个网站可能其他方面做得更好，但排版一般（我们认为可以更好）；另一方面是最美是对不同人而言的，就像你认为自己的女人最漂亮是一样的道理。因为别人并不知道她对于你的特别之处，只是看到她的外貌。Web设计也一样，体验之美是上美，是最美，因为他针对特定的用户而开发，充分考虑各种需求，不断增强体验。&lt;/p&gt;
&lt;p&gt;来看看某些增加体验上的设计，比如我博客的留言表单，留言前与留言后的表现：&lt;/p&gt;
&lt;p&gt;&lt;img height=&quot;348&quot; width=&quot;500&quot; alt=&quot;comments&quot; src=&quot;http://happinesz.cn/mypics/web_and_beauty_sofish.png&quot; /&gt;&lt;/p&gt;
&lt;p&gt;又比如，我们最讨厌的万恶心的验证码。像当当这种设计，才是王道。我们不就怕穷举法破解吗? 那我们就设计3次，或者1次错误之后，才提示要输入验证码才能登陆。像当当网的这种设计，不正是我们所要的么？&lt;/p&gt;
&lt;p&gt;&lt;img height=&quot;451&quot; width=&quot;500&quot; alt=&quot;验证码&quot; src=&quot;http://happinesz.cn/mypics/web_and_beauty_dd.png&quot; /&gt;&lt;/p&gt;
&lt;p&gt;通常，这并不是适不适合某个网站的问题，而是Web设计者是否有能力做到、能考虑到的问题。&lt;/p&gt;
&lt;h3&gt;总结：&lt;/h3&gt;
&lt;p&gt;&amp;quot;无貌，还可有情；无情，还可有态；有态，则上可倾国，下可倾城&amp;quot;。没有好的外貌，还可以有好的性格；没有好的性格，还可以有好的气质情趣。有好的气质情趣，甚至可以吸引全国的人。Web设计也一样，没有强大视觉冲击的图片，还可以有适合浏览的排版；没有更好的排版，还能有上等的体验。以用户为中心而设计的网站为上等美，对用户来是众多选择中的最美。&lt;/p&gt;
&lt;p&gt;这里有必要说明一下，在&lt;a href=&quot;#web_and_beauty_2&quot;&gt;排版之美&lt;/a&gt;中，用的博客内容排版与Google   Reader中的排版作为比较，是否与&amp;quot;没有更好的排版，还能有上等的体验&amp;quot;冲突。其实刚才相反，这正是一个上等美体验的表现。让我们想象一下，如果GR给我们定义特定的样式，而我博客上也定义了样式，并且在GR中输入，这样，两种样式混合，将会产生冲突，这将是一种更糟的体验。这是为体验而作的之中折衷选择。当然，我相信这可以做得更好，但同类中这样已经是最好的体验了。&lt;/p&gt;
&lt;p&gt;另外，这里以我的博客作为演示，并不说明这个博客是最美的，而是给一些例子，让你知道为什么这样设计会更好。&lt;/p&gt;
&lt;p&gt;所谓&amp;quot;一理通万理&amp;quot;，鉴别女子美丑与鉴别网站美丑有同样的道理。这事见仁见智，还需要看个人的理解。而上面是我的总结。当然，我想表达得更清楚、更详尽，但语言表达能力与时间让我不得不现在停下。如果你有什么好的想法，欢迎来交流；同样欢迎给这篇文章挑刺。&lt;/p&gt;
&lt;p&gt;&lt;hr&gt;&amp;copy;2010 &lt;a href=&quot;http://www.happinesz.cn&quot;&gt;幸福收藏夹&lt;/a&gt;. 版权所有,转载务必注明.该Feed只供个人使用,禁止未注明的转载或商业应用.非法应用的,一切法律后果自负.如有问题,可发E-mail至sofish@163.com.&lt;hr&gt;&lt;/p&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/327594744/sofish/feedsky/s.gif?r=http://www.happinesz.cn/archives/1235/&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/sofish/327594744/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/sofish/327594744/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fsflare&quot;&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=639b9654e711514a813499bfd667cbc8&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=639b9654e711514a813499bfd667cbc8&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=2e98d10348792daf511e7e1b74361c9f&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=2e98d10348792daf511e7e1b74361c9f&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=3d765cece9b7dc63c1566ca9c893d3a9&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=3d765cece9b7dc63c1566ca9c893d3a9&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=25b40f6ca7913fa7a8492bc58c0f3f40&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=25b40f6ca7913fa7a8492bc58c0f3f40&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=3669799195eeb736dbfb110d9978fa43&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=3669799195eeb736dbfb110d9978fa43&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/p&gt;</content:encoded><wfw:commentRss>http://www.happinesz.cn/archives/1235/feed/</wfw:commentRss><slash:comments>44</slash:comments><description>或许你也经历过，很多人都说一个女人很漂亮，而你觉得很一般。有时候，我也尝试理解为什么会对某个女人情有独钟。通常，我用迷人来描述，但这个&amp;#34;迷人&amp;#34;很难再细化解释，即使它真实地表现为一种强烈的吸引感。某些Web设计也一样，很简单，但就是受欢迎。

今天看到一则古文，解决了自己的某些表达上的疑惑。《美之鉴》，这个对美的刻画很深入。一理通万理，或许，你也会在这几句话中得知什么女人最美，如何设计最中人心：
女人之美，下美在貌，中美在情，上美在态。   
以镜为镜，可以观貌；   
以女人为镜，可以动情；   
以男人为镜，可以生态。   
无貌，还可有情；   
无情，还可有态；   
有态，则上可倾国，下可倾城。
你可以自己在网站尝试找一下解释，特别是&amp;#34;态&amp;#34;的释义。这里就不多做解释了，直接在下文中边提出自己的理解，边阐述对Web设计之美的总结：设计之美，一般的美为外观之美；中等的美为排版之美；最美为体验之美。
1. 外观之美
&amp;#34;下美在貌&amp;#8230;   以镜为镜，可以观貌&amp;#34;，这里说的是，外观上的美，可以根据某此自己的总结经历的标准（镜不是活的，镜前之美，是我们自我理解的美），对比着实现。Web设计也一样，根据标准，我们要求别人，或者自己对比着实现，一个属于自己的美。比如中国风这个主题的第一印象：

喜欢中国风情的人，会觉得漂亮；崇尚简洁的人则不以为然。这是决定于评判美的标准是不同的。外观之美，是下美，有人喜欢，但只是某些特定的人喜欢。这种设计，通常比较适合需要展示个性的个人主页。
2. 排版之美
&amp;#34;中美在情&amp;#8230;以女人为镜，可以动情&amp;#34;，这里说的是，性格上的美，可以以同类为标准来做改变。Web设计上，可以不用独具视觉冲击的背景或图标，却可以在同类的比较中得出改造的方案。比如我自己博客在排版上的处理与RSS阅读器中排版的区别：

博客上的排版，标题与加粗分明，字体大小和色调不同，代码与文字内容区分开，更方便快速浏览。这是由排版所决定的。这在以字母（类似于英文字母）为文字的设计中，这种区分将会更有必要。通常，这种设计适合所有网站。当然，是所有。每个网站都需要更好的排版。
3. 体验之美
&amp;#34;上美在态&amp;#8230;   以男人为镜，可以生态&amp;#34;，这里说的是，女人气质情趣之美，可以以男人的需求为标准而产生。可以用一句最简单的话来描述一个具备上等美的女人：&amp;#34;这个女人既漂亮又懂得相夫教子&amp;#34;（我想如果你将来用上，应该感谢一下sofish）。刚才为什么在描述   排版之美的时候，说到的是需要&amp;#34;更好&amp;#34;的排版；为什么说一个具备&amp;#34;上等美&amp;#34;的女人，而不是说&amp;#34;最美&amp;#34;的女人。因为一方面最美并不是具备一方面就能达到的，一个网站可能其他方面做得更好，但排版一般（我们认为可以更好）；另一方面是最美是对不同人而言的，就像你认为自己的女人最漂亮是一样的道理。因为别人并不知道她对于你的特别之处，只是看到她的外貌。Web设计也一样，体验之美是上美，是最美，因为他针对特定的用户而开发，充分考虑各种需求，不断增强体验。
来看看某些增加体验上的设计，比如我博客的留言表单，留言前与留言后的表现：

又比如，我们最讨厌的万恶心的验证码。像当当这种设计，才是王道。我们不就怕穷举法破解吗? 那我们就设计3次，或者1次错误之后，才提示要输入验证码才能登陆。像当当网的这种设计，不正是我们所要的么？

通常，这并不是适不适合某个网站的问题，而是Web设计者是否有能力做到、能考虑到的问题。
总结：
&amp;#34;无貌，还可有情；无情，还可有态；有态，则上可倾国，下可倾城&amp;#34;。没有好的外貌，还可以有好的性格；没有好的性格，还可以有好的气质情趣。有好的气质情趣，甚至可以吸引全国的人。Web设计也一样，没有强大视觉冲击的图片，还可以有适合浏览的排版；没有更好的排版，还能有上等的体验。以用户为中心而设计的网站为上等美，对用户来是众多选择中的最美。
这里有必要说明一下，在排版之美中，用的博客内容排版与Google   Reader中的排版作为比较，是否与&amp;#34;没有更好的排版，还能有上等的体验&amp;#34;冲突。其实刚才相反，这正是一个上等美体验的表现。让我们想象一下，如果GR给我们定义特定的样式，而我博客上也定义了样式，并且在GR中输入，这样，两种样式混合，将会产生冲突，这将是一种更糟的体验。这是为体验而作的之中折衷选择。当然，我相信这可以做得更好，但同类中这样已经是最好的体验了。
另外，这里以我的博客作为演示，并不说明这个博客是最美的，而是给一些例子，让你知道为什么这样设计会更好。
所谓&amp;#34;一理通万理&amp;#34;，鉴别女子美丑与鉴别网站美丑有同样的道理。这事见仁见智，还需要看个人的理解。而上面是我的总结。当然，我想表达得更清楚、更详尽，但语言表达能力与时间让我不得不现在停下。如果你有什么好的想法，欢迎来交流；同样欢迎给这篇文章挑刺。
&amp;#169;2010 幸福收藏夹. 版权所有,转载务必注明.该Feed只供个人使用,禁止未注明的转载或商业应用.非法应用的,一切法律后果自负.如有问题,可发E-mail至sofish@163.com.&lt;img src=&quot;http://www1.feedsky.com/t1/327594744/sofish/feedsky/s.gif?r=http://www.happinesz.cn/archives/1235/&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/sofish/327594744/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/sofish/327594744/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fsflare&quot;&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=639b9654e711514a813499bfd667cbc8&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=639b9654e711514a813499bfd667cbc8&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=2e98d10348792daf511e7e1b74361c9f&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=2e98d10348792daf511e7e1b74361c9f&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=3d765cece9b7dc63c1566ca9c893d3a9&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=3d765cece9b7dc63c1566ca9c893d3a9&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=25b40f6ca7913fa7a8492bc58c0f3f40&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=25b40f6ca7913fa7a8492bc58c0f3f40&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=3669799195eeb736dbfb110d9978fa43&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=3669799195eeb736dbfb110d9978fa43&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/p&gt;</description><category>Design</category><category>美之鉴</category><category>女人</category><pubDate>Mon, 23 Nov 2009 21:32:33 +0800</pubDate><author>sofish</author><comments>http://www.happinesz.cn/archives/1235/#comments</comments><guid isPermaLink="false">http://www.happinesz.cn/archives/1235/</guid><dc:creator>sofish</dc:creator><fs:srclink>http://www.happinesz.cn/archives/1235/</fs:srclink><fs:srcfeed>http://www.happinesz.cn/?feed=rss2</fs:srcfeed><fs:itemid>feedsky/sofish/~1329654/327594744/1334283</fs:itemid></item><item><title>关于易联主机和幸福收藏夹</title><link>http://www.happinesz.cn/archives/1228/</link><content:encoded>&lt;p&gt;似乎有不少朋友通过我这里买&lt;a href=&quot;http://elinkhost.com/&quot;&gt;易联主机&lt;/a&gt;。不过，没有多少人告诉我他们用得怎样（或许你应该告诉我，你用着的情况是怎样的）。他们关心的是，说是来自sofish的话，有8.5折。其实这样挺好。不是么？有人有得便宜，有人有得赚，这样挺好的。这里说明一下。我不是易联的代理，不是客服，也不是技术人员，身份是易联所赞助主机的博客的主人。哦也，我就这样免费用着别人的主机。&lt;/p&gt;
&lt;p&gt;&lt;img width=&quot;500&quot; height=&quot;159&quot; src=&quot;http://happinesz.cn/mypics/about_elinkhost.png&quot; alt=&quot;易联主机与幸福收藏夹&quot; /&gt;&lt;/p&gt;
&lt;/p&gt;
&lt;p&gt;易联的老板叫Tension   ，幸福收藏夹的老板叫sofish，博友关系。然后，因为博客认识，他赞助了我。然后，我友情推介易联主机。事实就是这样。当然，如果不是好主机，我也不会推荐。因为至少我用了这么久，他们的态度确实很赞。以前&lt;a href=&quot;http://qiuai.name/blog/&quot;&gt;秋爱&lt;/a&gt;同学在的时候，有问题他都很热情帮忙搞定，现在，&lt;a href=&quot;http://www.enjoyeasy.com.cn/blog&quot;&gt;柴鸡&lt;/a&gt;同学，他的态度也是相当赞。所以，我就一直这样，有人来邮件，要国内主机的，我都会推荐。&lt;/p&gt;
&lt;p&gt;但，这不是代理，不收钱（&lt;span style=&quot;color: rgb(128, 128, 128);&quot;&gt;收钱让这种事情变质，而且，带不来给我几个钱&lt;/span&gt;）。纯友情支持，就像他们友情赞助我一样。有时候有些同学会告诉我：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;这个主机好不好，我说好。（他们会问，真的吗?）&lt;/li&gt;
&lt;li&gt;这个主机的界面是仿MT的。（其实我不是老板，这个我决定不了啊）&lt;/li&gt;
&lt;li&gt;心里说：sofish推荐又不负责支持。（老大，我只能告诉你好坏）&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;嗯，就是这样。今天&lt;a href=&quot;http://www.bssn.org/elinkhost.html&quot;&gt;BSSN&lt;/a&gt;同学留言说，如果看到留言，帮他解决一下。Cool，沟通问题。Tension这家伙看来忙得很。柴鸡同学又是热心地解决了这事。BSSN同学还是的同学态度也很好。不过，突然让我想出来说句话。&lt;/p&gt;
&lt;p&gt;如果你遇到问题，应该找：QQ 97500562。这个人帮助到你。如果还有问题，再找我。哦也。我可以顺便帮你联系一下，但总的来说，是帮不上在忙的。除非我是老板。&lt;/p&gt;
&lt;p&gt;&lt;hr&gt;&amp;copy;2010 &lt;a href=&quot;http://www.happinesz.cn&quot;&gt;幸福收藏夹&lt;/a&gt;. 版权所有,转载务必注明.该Feed只供个人使用,禁止未注明的转载或商业应用.非法应用的,一切法律后果自负.如有问题,可发E-mail至sofish@163.com.&lt;hr&gt;&lt;/p&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/327594745/sofish/feedsky/s.gif?r=http://www.happinesz.cn/archives/1228/&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/sofish/327594745/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/sofish/327594745/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fsflare&quot;&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=549cb0b3b82ee2506c5d616c989a96ce&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=549cb0b3b82ee2506c5d616c989a96ce&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=0fd2c01a0fa24a073fe35d25510cc86d&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=0fd2c01a0fa24a073fe35d25510cc86d&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=3e3eb652c4b449efb622431c4b65c036&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=3e3eb652c4b449efb622431c4b65c036&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=9f5f6fa4d0e7f5647568bd55ef6dd845&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=9f5f6fa4d0e7f5647568bd55ef6dd845&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=5bcff510a42b75307939743b05010db0&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=5bcff510a42b75307939743b05010db0&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/p&gt;</content:encoded><wfw:commentRss>http://www.happinesz.cn/archives/1228/feed/</wfw:commentRss><slash:comments>27</slash:comments><description>似乎有不少朋友通过我这里买易联主机。不过，没有多少人告诉我他们用得怎样（或许你应该告诉我，你用着的情况是怎样的）。他们关心的是，说是来自sofish的话，有8.5折。其实这样挺好。不是么？有人有得便宜，有人有得赚，这样挺好的。这里说明一下。我不是易联的代理，不是客服，也不是技术人员，身份是易联所赞助主机的博客的主人。哦也，我就这样免费用着别人的主机。


易联的老板叫Tension   ，幸福收藏夹的老板叫sofish，博友关系。然后，因为博客认识，他赞助了我。然后，我友情推介易联主机。事实就是这样。当然，如果不是好主机，我也不会推荐。因为至少我用了这么久，他们的态度确实很赞。以前秋爱同学在的时候，有问题他都很热情帮忙搞定，现在，柴鸡同学，他的态度也是相当赞。所以，我就一直这样，有人来邮件，要国内主机的，我都会推荐。
但，这不是代理，不收钱（收钱让这种事情变质，而且，带不来给我几个钱）。纯友情支持，就像他们友情赞助我一样。有时候有些同学会告诉我：

这个主机好不好，我说好。（他们会问，真的吗?）
这个主机的界面是仿MT的。（其实我不是老板，这个我决定不了啊）
心里说：sofish推荐又不负责支持。（老大，我只能告诉你好坏）

嗯，就是这样。今天BSSN同学留言说，如果看到留言，帮他解决一下。Cool，沟通问题。Tension这家伙看来忙得很。柴鸡同学又是热心地解决了这事。BSSN同学还是的同学态度也很好。不过，突然让我想出来说句话。
如果你遇到问题，应该找：QQ 97500562。这个人帮助到你。如果还有问题，再找我。哦也。我可以顺便帮你联系一下，但总的来说，是帮不上在忙的。除非我是老板。
&amp;#169;2010 幸福收藏夹. 版权所有,转载务必注明.该Feed只供个人使用,禁止未注明的转载或商业应用.非法应用的,一切法律后果自负.如有问题,可发E-mail至sofish@163.com.&lt;img src=&quot;http://www1.feedsky.com/t1/327594745/sofish/feedsky/s.gif?r=http://www.happinesz.cn/archives/1228/&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/sofish/327594745/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/sofish/327594745/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fsflare&quot;&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=549cb0b3b82ee2506c5d616c989a96ce&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=549cb0b3b82ee2506c5d616c989a96ce&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=0fd2c01a0fa24a073fe35d25510cc86d&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=0fd2c01a0fa24a073fe35d25510cc86d&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=3e3eb652c4b449efb622431c4b65c036&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=3e3eb652c4b449efb622431c4b65c036&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=9f5f6fa4d0e7f5647568bd55ef6dd845&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=9f5f6fa4d0e7f5647568bd55ef6dd845&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;a href=&quot;http://feed.feedsky.com/~flare/sofish?a=5bcff510a42b75307939743b05010db0&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://feed.feedsky.com/~flare/sofish?i=5bcff510a42b75307939743b05010db0&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/p&gt;</description><category>sofish</category><category>互联网小记</category><category>易联主机</category><pubDate>Wed, 18 Nov 2009 17:07:07 +0800</pubDate><author>sofish</author><comments>http://www.happinesz.cn/archives/1228/#comments</comments><guid isPermaLink="false">http://www.happinesz.cn/?p=1228</guid><dc:creator>sofish</dc:creator><fs:srclink>http://www.happinesz.cn/archives/1228/</fs:srclink><fs:srcfeed>http://www.happinesz.cn/?feed=rss2</fs:srcfeed><fs:itemid>feedsky/sofish/~1329654/327594745/1334283</fs:itemid></item></channel></rss>