昨天看到李战写的《js真经》里有一个画围棋棋盘的算法，很简洁，
可怜我在学校学过的那点数学知识早已经还给老师了，看了好久才看懂，
仔细琢磨了一阵，觉得还有可简化的地方，于是乎写了下面这个精简版的“画围棋棋盘”，
Tips:You can change the code before run.
好玩，要不让我们在这个棋盘上摆几个棋子吧，下面记录我第一次下五子棋输掉的棋局……
Tips:You can change the code before run.
Less
More
07.02用js画出一个围棋棋盘的数学方法
（转自http://ineu.org.cn/blog/index.php/archives/430）
今天我们要对两家大公司——苹果和微软——的网站做一个比较。
这两大巨头都对生产尖端产品以及引领软硬件的发展感到自豪，但他们的网站又怎么样呢？如何做出比较？更重要的是，哪一个网站更好，更实用呢？
在本文中，我们将从网站可用性的角度，对这两家公司的网站做一个严密的剖析。
在这一比较开始前，我们应当注意到，这两家公司的业务是围绕着不同的市场展开的。
微软的利润基本上来自于企业用户，其中包括向计算机制造商销售操作系统许可和向企业销售办公软件。这并不是说他们不卖东西给个人用户——他们卖，他们一样拥有针对于个人用户的产品线，比如 X-Box，当然个人用户也会购买 Windows 和 Office。微软的客户目标是每一个人，从家用电脑用户到开发者及企业用户，这从侧面又补充了他们的网站的目的：试图服务每个人。
另一方面，苹果的业务基本针对个人用户，它的大部分利润来源于销售硬件，比如 iPod 和 Mac。这使得苹果的目标更加明确：推销，销售并提供售后服务。他们不必为卖给制造商许可而操心，因为他们是唯一的制造商，因此，他们的网站的主要目的就是宣传产品，扩展产品线，并通过在线商店销售产品。
1.首页
首页是网站中的第一页，最重要的页面之一，在多数情况下，主页是唯一打动访问者，并使他们继续浏览下去的理由。你有几秒钟的时间说服访问者你的网站对他们有足够的价值，否则的话，他们就会走开。
苹果公司的一贯做法是，通过主页告诉大家，网站还在正常运行着。他们把主页当做是一个广告板，总是展示一个他们最新产品的大幅广告，下面附带着三个当前同等重要的产品或新闻。如果对这四个条目都不感兴趣，可以点击上方的大型导航条，它被分成几部分来代表苹果公司的核心产品：Mac，iPod 和 iPhone，其下拉菜单中还有更多的链接，比如在线商店和售后支持。除此之外，还有个搜索栏。
有趣的是，这幅主体广告相当巨大，几乎覆盖了整个页面。如果它不能吸引你的注意力，那意味着整个网站的失败。幸运的是，苹果通过良好的产品营销知道如何抓住用户的吸引力，所以，他们没什么好怕的。
另一个需要注意的是，其网站简单的内容。你不会被侧边栏，通知或是额外的导航项目而打扰——在页面上只有很少的东西，吸引你的注意力，使人轻而易举地找到下一步的去向。
微软对自己的首页有着不同的诠释。首先，他们在顶部放置了一个风格相似的广告，目的是抓住人们的目光。这三幅巨大的图片广告——能够通过鼠标的滑过来轮流展示，很吸引人的眼球，但这可能会削弱其他两个广告的效应。在页面顶端的，是搜索栏和导航条。
在主广告下面的内容就更有趣了，正如我先前所提到的，微软的商业运作涵盖了从企业用户到个人用户的方方面面。这块区域展示着微软不同商业领域的新闻与重要信息。但是，其内容是相当枯燥无味的，大量信息充斥在这样一个小空间内，毫无条理而言。
诚然，这些内容也被细分为了几个要点，但其字号很小并缺乏图片来区分条目。总之，它很难勾起我读下去的欲望，因为它确实，很没劲。
2.流动性
我所说的流动的意思是：该网站的结构布局，能让人轻松地找到所需的信息吗？我是否知道接下来应该看什么——这个网站能否让我更容易的到达目标，或者说我需要在网页内容中努力寻找我想要的东西吗？
这是 Apple.com 的 MobileMe 区块：
苹果在网页架构方面做得不错，在这个页面，首先吸引你的应该是右面的图片，然后是左边的大标题。看了大标题后，可以继续阅读下面的推荐广告，它们能够轻松地引领人们去点击免费试用的注册按钮。每一项广告下面都以链接到详细内容页面的“Learn more”文本结束，这使得网页没有死角，并让访问者浏览下去。
微软似乎努力过却收效甚微。这是他们的 SharePoint 区块：
是的，这儿是有个吸引目光的焦点——顶端长长的引述和一张服务器的图片——但是接下来呢？下面所有内容都极为单调，尤其是那个有 8 个链接的“Learn More”区块。干巴巴的介绍让访问者缺乏浏览的欲望。有些微软站点在布局上做的稍好些，能指引用户的吸引力流动，但它们都有一个通病：内容太多。
提供给用户的多种选择，增加了用户的负担——他们不得不思考自己想要什么，并处理更多的信息。通过减少选择余地，苹果引领用户进入了一个经过精心设计的，提供了良好用户体验的通道。
3.导航条
苹果的网站上方有一个大型的导航条，这使网站的每个部分都能够保持一致。可供选择的部分展示了苹果的主线产品，同样也有包括售后支持和在线商店在内的重要内容。导航条同样集成了搜索功能，同时还进行了品牌展示，比如主页按钮显示的是苹果的 Logo 而不是简单的“Home”标签。任何额外的二级导航都位于个别页面，而且都在网页的内文中，也许是在侧边栏，也许是个顶端的水平条。
微软的主页有一个类似的导航条，但它在网站中并不是始终一致的。事实上，所有的子页面都有各自不同的导航条——不论在样式上还是内容上。主页的导航条几乎是微软网站各个部分的网站地图。在包括主页在内的许多导航条上，微软都使用了下拉菜单——与苹果不同，苹果不光使用下拉菜单——而且是巨大的下拉菜单。有时候，下拉菜单竟然还有一个滚动条！（Firefox 中）
这是好是坏？在最近的一篇文章中，Jakob Nielsen——有名的可用性大师——写到，巨型的下拉菜单还是可行的。说它可行是因为它集中提供了多种选项，使人更容易地检索并获取所需。通过它能够达成某个既定目标，比如将只需要显示一次的命令集中放在一起。
微软使用大型下拉菜单也有一定的道理，但他们做的有点儿过了。有些不同的选项都指向了同一个内容，像‘Office’下拉项和‘All Products’下拉项中的‘Office’选项。大型下拉菜单还遮挡了其下面的页面内容，如果鼠标不小心滑过了菜单，还要刻意移开鼠标以继续浏览——同时还要小心谨慎，不把鼠标移到其他条目上。
大的下拉菜单同样包含了不少内容——有时一次显示大约 13 个条目，这使得分辨选项更加困难。同样，网站各区块导航菜单的不一致也给页面跳转制造了障碍。像从 Office 网站跳转到 XBox 网站。
4.可读性
因为网站中的主要内容都是文字，所以确保每部分内容都清晰易读是尤其重要的。下面是改进网站可读性所需考虑的要点：
使文本足够大以便阅读；
确保文字与背景有足够的对比；
在文字周围提供足够的留白以避免其他图片和内容干扰读者；
提供充足的大标题和高亮/粗体字，以便读者快速获取关键信息；
为个别文字区域添加图片和图标来强调内容，如产品或功能描述；
保持文字简洁并突出重点；
现在让我们来看看苹果和微软在这方面做得如何。这是 Apple.com 上一个典型的页面：
苹果使所有东西都轻松易读。其文字虽然很小，但都不至于太小使阅读困难。标题很大很突出，使人很快就能找到这一部分的要点。苹果还大量地运用留白以区分每一部分，并添加图片提升每段文字的趣味性。
这是 Microsoft.com 上的一个典型页面：
它遵循了可用性设计的通常准则，把大块的东西分割成容易理解的小段文字。其页面上的更多内容和对标题及高亮文字的多种不同处理方式，使它看起来要比苹果的网站忙得多。
页面上的过多样式导致了视觉的混乱，各种不同的颜色和粗体字吸引着人们的注意力，在这种情况下，页面需要简单化以使访问者更易阅读。这是微软的另一个网页，微软安全中心：
页面上的文字过小而难以阅读，而且它需要更多的留白来把文本分离开来。再来看看 Apple.com 上一个繁忙的页面：
这是苹果在线商店，到处都有大量的商品信息和分类链接。字体小得恰到好处以容纳更多内容，当然，留白的良好运用仍然确保了页面的可用性。
5.搜索
苹果网站的搜索区域集成在导航菜单里。当键入内容的时候，会有使用 Ajax 实现的实时搜索结果以小方块的形式弹出来。这个东西非常棒——完全没有延迟，结果被组织成几个分类并且相当迅速，通常是在输入完查询语句之前，这是它的样子：
如果想查看更多结果，可以在完成输入之后敲击回车键，这样标准的搜索结果页面就会显现出来。它非常简洁，同样搜索结果也有组织地按分类排列。还可以通过分类进一步探究搜索结果，还有右侧可选的菜单。这些对寻找他们的产品很有帮助。
微软有一个更熟悉的搜索结果页，看起来很像是 Google（或当前其他搜索引擎）。它使用了微软自家的 LiveSearch 核心，很善于发掘人们所要寻找的并展示出来。搜索结果是一个大大的列表，标榜着微软的商业地位，它有许多子页面和不同的搜索内容。其功能性很强，但外观和感觉却与其他页面不同，好像是在浏览另一个网站。
6.美感
苹果的网站美学反映出了他们的产品线。具有铝质感的导航栏有着柔和过渡的文字。此外，还有大量的思考和简约的设计元素。苹果公司一直致力于统一其整个产品线的界面外观和风格，从硬件到软件，其网站当然也不例外。
美感与可用性有什么关系吗？当然有。研究表明，人们认为，美观的界面更好用。吸引人的界面给用户留下更好的第一印象，甚至会让用户更能够容忍缺点。微软在美观性上做得如何呢？这是 Internet Explorer 8 的页面：
这个页面采用了有着淡蓝色云彩的微软主题，很显然这是一个关于 Internet Explorer 或是 Windows 的网页。其外观和感觉都很一般，没有充分的体现出它自己的不同，也没有建立出一个统一的品牌形象。这里是另一个页面，下载中心：
这又是完全不同的另一种设计，尽管背景同样是淡蓝色的。如果页面上没有标题，你能知道这个是微软的网页吗？大概不能吧。总的来说其设计还是相当不错的，但这远远不够，还是有许多前后不一致和欠雕琢的地方，这方面，苹果仍然领先。
7.一致性
一致性非常重要，你可以以此为基础建立使用模式。这意味着如果你的网站有一个一致的界面贯穿始终，访问者就会迅速了解网站的运行模式，并使用这种方式浏览每一个页面。
苹果在保持页面一致性方面也做得相当不错，其各个产品页面都具有相似的美感与相同的架构。整个站点的外观与风格始终如一，每一个页面都有着相同的导航条。这意味着整个用户体验都是非常连贯统一的——你知道你正在浏览的是同一个网站。
这是微软 Azure 平台的网页：
如果拿掉 Logo 的话，你还能认得出来这是微软家的东西吗？微软每一个网站各自的图形，样式和颜色集使微软没能够建立一个统一的网络品牌形象。微软的主要问题在于，Microsoft.com 上的每个不同部分都有自己的外观与风格，即便是导航条。微软的在线商店，Office 站点与安全中心就像是三个不同的网站。
更糟糕的是，其网站的导航条会消失，这意味着访问者不得不后退到主页或进入网站地图才能够浏览其他站点。它就像是托管在同一域名下的生态系统，不能像苹果的网站一样从一致性建设中获益。其品牌形象也极其分散，难以定义一个完整的微软网站。
结论
哪一个网站是赢家？仅仅考虑可用性的话，苹果是出类拔萃的。他们的主页设计得更好，选项更少，减少了用户的思考。他们的每个页面都有一个相同的导航条，使用了大量的留白和子标题来增加可读性。他们保持页面的简洁性，没有过多的使用文字处理效果。苹果的网站通常对用户友好，且为查看苹果最新产品的顾客提供了更加的体验。
话虽如此，苹果的网站在规模上要比微软网站小得多。与苹果不同，微软在 Microsoft.com 品牌下许多不同的站点和区块，创造了一个子网站的完整生态系统。每个站点都充斥着大量的信息和 LiveSearch 核心的搜索。微软网站的最大问题就是一致性。
微软网站没有一个一致，连贯，统一的品牌形象。每个区域看起来都不尽相同。没有个统一的导航，并且缺乏微软的可视化标识。而苹果网站中所展示的反映其产品理念的独特美感，也使得苹果建立了一个强大的品牌效应。
综上，在我看来，苹果显然是胜者。
原作者 Dmitry Fadeyev 运营着一个研究可用性的博客，名叫 Usability Post。
英文原文 http://www.webdesignerdepot.com/2009/05/apple-vs-microsoft-a-website-usability-study/
06.09一个select控件的进化史
有几个原因促使我们使用自定义的select控件来代替原生的select控件：
1、在ie6下select是一个窗口级的元素，绝对定位的层会被select穿越（一般的解决方法是在层内加一个iframe来遮住select）。
2、如果是自定义的select控件可以有更多的功能，下拉列表下的列表项可以更丰富，可以是列表、树甚至是表格（如下图）。
先把用HTML+CSS把select控件的外观模拟出来：
这儿用到一张图片
arrow.gif
Tips:You can change the code before run.
OK，在ff3下测试通过，在ie6、ie7下有一些错位，需要加CSS hack来作小许的调整，为了代码的纯粹，在这就不展示了。
接下来是通过JS替换页面内原有的select，当时我们希望这个JS是非侵入式的，只要引用了select.js这个js文件的页面，就自动把页面里原有的select控件替换接管了。
先初步地实现selct控件的替换，和基本的交互（暂不考虑接管select的onchange事件等问题）。在下面的实现方法里并没有把原有的select去掉，只是隐藏了起来，如果select是在表单内，表单仍然能够正常提交。
Tips:You can change the code before run.
OK，在ff3下测试通过，不过在ie下存在层的定位问题，当弹出下拉列表时需要对层的z-index作调整，在这就不展示了。
如果这个select控件仅在前台作小量的应用，那么适当地添加一些对键盘，鼠标的响应，就差不多可以了。
============================传说中的分隔线===========================
看到上面示例中简陋的功能、浅白的代码，相信很多人已经开始对本文以及本人表示不屑了，别急，上面只是热身，真正的作品刚刚开始。
以上为止，这个自定义的select控件还只是移花接木的套路，接下来我们要实现这个控件的更多的功能，以完全替代原有的select控件，
最主要的是删除原有的select控件，并接管select的onchange事件。
在这儿有一点要特别说明的是在我们我们zcms平台中使用了ajax，所有的表单都不是传统的submit提交的，而是用一个多维数组（new DataCollection）收集要提交的数据，然后发送（sendRequest）到服务器的。
所以在下面的控件实现中不考虑submit提交表单数据的情况。
Tips:You can change the code before run.
以上展示了zSelect的核心代码，对控件的属性如style、multiple、size、tabIndex；事件如onblur、onfocus、onkeydown、onmousedown……的处理过程有所省略。
这个zSelect控件的实现思路和技术在上面的代码中都已有体现，功能上的完善，完全可以参考其它代码实现，一个非侵入式的select.js就出样出现了，那么事情就这么完了么？当然没有，继续……
这个zSelect要适应zcms平台复杂的坏境，无疑还要进一步修改，
我们发现在ie6下替换select会造成窗口闪烁，经测试发现
在ie6下，当原生的select控件被replace或delete，整个页面将会有极短时间的空白（猜想可能是ie6下窗口级别的控件被删除会让页面重渲染）。
虽然这种页面变白的时间很短，并且只出现在ie6内，但是对于精益求精的我们来说，任何可能让使用者感觉不稳定不可靠的bug都是不允许的，于是我们最终放弃了用非侵入式的js替换原生select控件的方案，
我们决定使用新的zSelect标签，为了减少对界面设计的约束，我们有自己的风格。请参考程序员的一篇帖子《一种简约可行的后台界面UI开发方案》。
如果要把原有的select控件替换为新的zSelect控件，只需要在原select控件外加上jsp Tag<z:select>，在页面里一个zSelect控件的html如下。
<z:select>
<select id="select1" name="select1" style="widht:150px;">
<option value="1" selected>政府门户类演示站</option>
<option value="2">新闻门户类演示站</option>
<option value="3">企业形象类演示站</option>
<select>
</z:select>
这样在dw里插入及编辑select控件和原来完全一样，只需要用<z:select>把原来的html包住即可，所以对原有系统的升级也是非常方便的。
上面是使用了jsp tag，而经过后台处理后的<z:select>输出到浏览器上的HTML如下:
<div ztype="zSelect" id="select1" name="select1" class="zSelect" style="widht:150px;">
<span value="1" selected>政府门户类演示站</span>
<span value="2">新闻门户类演示站</span>
<span value="3">企业形象类演示站</span>
</div>
也就是说如果不想使用<z:select>标签的话，用上面的结构代替和使用<z:select>是等同的效果。
在我们ZCMS平台中，这个select控件（以下称为zSelect）还有以下要求：
1、因为平台的弹出层（Dialog）里用到了iframe，那么要求下拉列表不被iframe（或原生的select或flash）阻挡，
要解决这个问题的思路还是很简单的，我们把下拉列表移到顶级窗口（window.top）并给一个适当的z-index值，这样就不受iframe边框的束缚了。
但这样就增加了其他的工作，比如跨越iframe的位置计算、下拉列表弹出后如果iframe内容滚动时的处理、下拉列表靠近顶级窗口底部时位置的调整。
2、下拉列表下的列表项可以更丰富，可以是列表、树甚至是表格。
解决这个问题的思路更简单，我们给zselect控件一个url属性，如果这个属性存在，下拉列表内的iframe的地址就是一个指向这个url，
这样，不要说是树型、表格，还是日期选择、颜色选择，只要有需要都可以通过引用不同的页面来实现，而且编辑起来又很直观。
完整版的zSelect代码有近700行，而且一些许多公共方法的调用（如$E.getPosition()），在这儿就不再给出完整代码示例了，
各位有兴趣的话可以去我们的网站（http://www.zving.com）下载我们的ZCMS研究，里面还有一些好用又有趣的东西,比如简洁易用的数据表格（zDataGrid）、良好用户体验的时间选择控件（zTimeSelector）、高效的即时语法加亮编辑器（zScriptEditor）、基于AJAX的进度条控件（zProgress）……
06.08我的reset.css
每个前端开发者都有一个 reset.css，下面是我的 reset.css
a[href^="javascript"]:focus{outline:0; -moz-outline-style: none;}
body {background: #fff;color: #444;}
a {color: #09d; text-decoration: none; border: 0; background-color: transparent; }
a:hover {color: #f90; text-decoration: underline; background-color: transparent; }
a:active{color: #f70; outline:0;}
body,div,q,iframe,form,
ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p{ margin: 0; padding: 0;}
ul,dl,li{list-style: none;}
img,fieldset{border: none 0;}
body,td,textarea{word-break: break-all;word-wrap: break-word; line-height:1.5;}
body,input,textarea,select,button{margin: 0; font-size: 12px;font-family: Tahoma, SimSun, sans-serif;}
div,p,table,th,td{ font-size:1em; font-family:inherit; line-height:inherit;}
em,i,u,q,s,dl,caption,dfn,var, address,cite,s,strike, del,ins{ font-style: normal; font-weight: normal; text-decoration: none; }
em,i{color:#669900}
h1,h2,h3,h4,h5,h6{color:#FF8800}
hr{ clear:both; margin:7px 0; +margin: 0; border:0 none;font-size: 1px; line-height:1px;color: #ddd; background-color:#ddd; height: 1px;}
q:before,q:after{content: “”; content: none;}
q {quotes: “” “”;}
h1 { font-size: 24px; font-family:SIMHEI, sans-serif; font-weight: normal;}
h2 { font-size: 20px; font-family:SIMHEI, sans-serif; font-weight: normal;}
h3 { font-size: 16px; font-family:Arial, sans-serif; font-weight: bold;}
h4 { font-size: 14px; font-family:Arial, sans-serif; font-weight: bold;}
h5 { font-size: 13px; font-family:SIMSUN, sans-serif; font-weight: bold;}
h6 { font-size: 12px; font-family:SIMSUN, sans-serif;font-weight: bold;}
option { padding-left:0.5em}
/*Bugfix: 一些bug的修正 */
* html textarea { overflow:auto; overflow-x: hidden; }/*使多行文本框不显示默认的竖向滚动条*/
* html iframe, * html frame { overflow:auto; }/*使浮动窗口不显示默认的竖向滚动条*/
* html input { overflow: hidden; }/*修正 按钮文字溢出 bug*/
* html body div{zoom:1}/* 防止ie6下浮动元素后面的内容消失 待验证*/
body ol li { display:list-item; } /*解决 浮动列表序号错误 bug*/
/*end Bugfix*/
06.02什么时候链接应该在新窗口打开
链接是否应该在新窗口打开？
从易用性的观点来说，强制在新窗口打开链接，违反了一个用户界面设计的基础原则：应该让用户对他们正在交互的界面有控制权。
一个友好并且实际有效的界面设计，在用户做操作的时候，总是能让他们按自己的意志做出决定。当用户在使用界面元素的时候，他们必须知道、理解、并且能预料到什么将会发生。这才是以用户为中心的设计。
有经验的用户，非常强烈的希望由他们来操控整个系统，系统对他们的行为产生回应。
我自己的浏览习惯是，使用多标签式浏览器，找到要浏览的信息列表页，例如论坛的一个版块，或搜索引擎返回的结果页，
然后连续拖拽好几个自己感兴趣的链接让页面在新标签非激活状态打开，然后切换到最选装载完成的标签来查看内容。
强制新窗口打开链接的主要问题是，没有强制新窗口打开的链接用户可以通过右键菜单或按shift键（在一些浏览器里可以是拖拽）这种比较容易的方法来在新窗口打开，而强制在新窗口打开的链接要让用户在本身窗口打开却不容易（可以拖动链接到地址栏来在当前窗口打开链接），所以强制新窗口打开链接，超越了用户自己的决定，剥夺了用户的控制权。
对于浏览网站比较熟练的国内用户来说有几个特点：
1、就算是浏览目的很明确的浏览者，也未必能立即找到完全满足自己需要的信息，搜寻和比较必不可少；
2、目前的网速和国内的网页体积来说，网页很少能够即点即开般在一两秒钟内打开，所以许多人习惯一次点开多个页面，让等待页面加载的时间集中在一起。
3、非常讨厌意料之外的弹出窗口。
我记得在2000年，我刚接触网络的时候，机器配置都比较差，网速却又很慢，一方面我不能打开太多窗口以免占用大多资源让机器反应变慢，另一方面我又不时地打开新窗口，以便同时加载多个页面，选择最先加载完成的页面浏览。
为了比较准确地控制窗口的数量，我希望每个链接都能够由我来控制是在自身窗口打开或是新窗口打开。
我的意见是，谨慎地使用新开窗口，并且新开窗口要给予适当的暗示。一个链接是不是在新窗口打开，尽量交给用户来决定。如果他们想在新窗口打开他们会自己去做，不要低估他们的智力帮他们去做决定什么的。
当你的鼠标移到一个链接上的时候，浏览器并不会提示你是自身窗口打开或是新窗口打开。
1、要么给新窗口打开的链接一种特殊的颜色或图标；采用ICON通知访问者外部链接是一种很常见的做法。使用css属性选择器或javascript都可以实现对链接的筛选、外观修改。
2、大部分链接让用户自己按shift键（在一些浏览器里是拖拽）来决定在新窗口打开链接。
考虑到有一部分刚接触网络的用户，使用浏览器还不熟练，甚至也不知道使用shift键（或拖拽）来新开窗口，所以在一些必需的情况下还是应该强制在新窗口打开链接。
在以下几种情况下，强制在新窗口打开链接是比较合适的：
1、链接指向一个本域名之外的网站：如友情链接一 般使用新窗口，新的网站新的窗口，基本上是可预料的。
2、提供帮助类的链接：如一个购物页面上对支付方式的帮助说明可以新开窗口，如果内容不多的话使用弹出层比新窗口更好。
3、页面跳转有可能打断一个正在进行的进程：如在注册页面上指向免责条款、版权声明等页面的链接，页面跳转会导致用户正在填写的注册信息丢失。
4、链接指向一个非HTML文件。例如指向一个pdf文件的链接最好使用新窗口，也许这个pdf会在新窗口直接浏览，也许会弹出文件下载对话框。
《Don’t make me think》提出的Web可用性三大定律
如果你已经忘记，请跟我大声读一遍：
一、 别让我（访问者）思考
二、 点击多次都没有关系，只要每次点击都是无须思考、明确无误的选择。
三、 去掉每个页面上一半的文字，然后把剩下的文字再去掉一半。
05.22好的设计师和更好的设计师
虽然许多设计师总是告诉别人，设计师并不是艺术家，但无疑，界面设计师仍然是整个公司最浪漫、最期望表达自我主张的人。
设计非艺术，设计是一种科学，而艺术更有人文气息。但编程到了一定境界，优雅的表达、巧妙的逻辑，也被称之为艺术。
那么设计达到了它美观实用的要求后，弥漫着人文气息的设计，我们也可以称之为艺术。
许多人说，好的设计成功的设计应该让人忘记设计本身，让功能最大化。
但更好的设计，不仅仅是功能的依附，让人使用时带有更多的情感。
《情感化设计》一书中，提到用户评判一个产品的好坏，往往不仅是通过理性的使用体验总结，而更多的是依赖整体情感的影响。而这种整体情感，就是由产品背后的气质所散发出来的特质影响，美丽的外观给用户留下更好的第一印象，它能让用户包容产品的缺点，夸大产品的优点，并且愿意和产品“融为一体”。
这样就可以理解为什么apple会有一大帮“果粉”拥趸。
有设计师参与的产品，应该这样来划分档次
1、可用的产品
2、漂亮的 ＋ 可用的产品
2、漂亮的 ＋ 可用的易用的产品
3、漂亮的 ＋ 拥有独特产品气质的 ＋ 可用的易用的产品
一个产品的开发往往是要解决具体是需要，如果这个产品不是拿来作欣赏的话，那么功能是最主要的，再好的设计师也不能使一个外观很漂亮但通话质量很差的手机热卖。
界面从来都是锦上添花而不是雪中送炭。
然后让产品易用，甚至是传递一种产品的气质，让用户在情感上认同并喜欢，是高阶。
一个优秀的产品必须要理性，也需要与众不同别具一格的气质，这种气质是产品生命的主要组成。
人有气质，人的气质由相貌衣着、访谈举止来传递给周围的人，
而产品的气质由界面、交互来传递给使用者。
一个产品有了气质，就有了生命力。
当大家的产品基本功能都具有了之后，设计是提升产品竞争力的有力催化剂，而设计师应该是给产品注入生命的人。
这种生命该是独立的，特别的，并具有智慧的，这样它才能令人印象深刻，并且长久的。
ipod，iphone，macbook,让果粉们信赖，称赞，并坚定地支持，他们爱上这些产品的原因不仅仅是因为好用，而是这些产品的气质感染了他们，他们爱上了apple。这样看来有时候易用性甚至要给气质塑造让路。
（当然有人对apple并不感冒）能让人爱上的产品的确是有生命的伟大的产品。
一个产品经理通常是开发人员或销售人员出身，他们常常是非常理性的，也限制了产品的灵性。那么设计师们就该是赋予产品生命的人了，他可以让产品“活”起来，并且是富有逻辑的“活”起来。
设计本来就是一个需要更多创新的工作，如果能在设计中完成一种颠覆性的创新，便是实现了一个设计师的价值，
比如iphone的操作系统对传统手机操作系统的颠覆性创新。
iphone出来之后，大家才突然发现windows mobile的界面是多么难看，操作是多么不人性。
那么在这以前的时间里，为什么没有人指责wm系统的丑陋，并设计出更美观易用的手机操作系统呢？
好的的设计师是了解用户的需要，给用户所想要的美好，
更好的设计师却是先知，用设计为用户指引所未想见的美好。
在一个不需要创新的层面，为解决问题而进行的设计只能算一个较低的层次。
设计师该做的任务不仅仅是满足用户的需求，还要为他们创造更美好的东西，还是要学会颠覆的，革命的，甚至把以前一切的想法都扔进垃圾堆里，创造一个属于自己的设计哲学来。
毕竟，创造才是设计师更高的追求。放弃创新，就等于丢掉了设计的本源。
用户的习惯不要轻易拂逆，但最重要的是要分清习惯的本源，尊重用户的内在动机。
如果我们找到习惯的本源，再按照自己的思考重新设计，让用户产生新的习惯，岂不是更好？
为什么wm手机要配一个手写笔，那是因为控件太小手指头不够按，如果控件做大一些，手写笔就可以抛弃了。这就是寻求习惯的本源。
设计师固然不能把网页表单的的圆形的单选框和方形的多选框应用对调过来作为创新，
但在一些情况下你的确可以用一个手拔开关形状的控件来代替一个多选框。
最后，我多次谈到了iphone，不要以为我认为apple就是真理。我同样在质疑它，它迟早会被一种新的形式代替。
你看palm的web os在某些方面就比iphone os要好，我欣赏那些每天都在寻找新路的人，而鄙视那种唯apple为是的人。
05.21Hello world!
欢迎使用 WordPress。这是我的第一篇日志。我可以编辑它或是删除它，然后开始写我自己的 blog。但我让它留下了。
