刘钢 – 我是UED

导读：在视觉设计过程中，除了一些我们耳熟能详的软件以外，其实还有不少优秀的辅助工具能帮助我们解决实际学习和工作中的问题。这次，我便总结了部分这类型的辅助工具，与大家分享（自己能力有限，如有遗漏，敬请补充）。

————————————————————————————————

做为一名视觉设计师，又一次参与了广州ucd的活动。说实在，自己对这次的活动有点点小小的失望，可能是之前预告的内容与实际情况有些许出入吧。不过这次活动气氛倒是这几次以来最好的，可能mm来的比较多，大家都异常活跃的缘故吧。

几位嘉宾也做了自己精彩演讲，对于我这名已经在职场打滚的人而言无疑是实用之极。不过考虑到，这次到场的部分童鞋都还是在校学生，活动提到的部分内容可能对他们而言还是比较羞涩难懂的。同时，里面提高的部分工作技巧和工具，貌似对比较大型的网站才有实际操作的可能性。

而作为一名有一定资历的门户网站设计师，我也只是能对部分嘉宾提出的观点有较清晰的概念，不过这也不排除自己本身愚笨的可能性存在。那么，借写这篇博文的机会，也分享自己在平时视觉设计工作中一些常用到的部分辅助软件，这些辅助软件主要针对视觉设计师的工作范畴，常用的软件就不在此篇涉及的范围内了。

这里，简单的将这些视觉辅助工具分了个类别：分别是素材生成类，截图取色类，动画辅助类以及格式转换类。这些分类基本涵括了自己的网站视觉设计工作中，常用到的几个范畴了（如有更好的建议，欢迎各位补充～）

素材生成类

·在线生成矢量毛笔字 http://sf.kdd.cc/

在中国，毛笔字体字体是每个设计师应该学习的必修课，不过随着时代的发展，我们这方面的能力都退化了，而且字库里面的毛笔字显然也不能满足我们的视觉要求。这时候，可不试试这个快速毛笔字生成工具呢？内含十几款书法大家习作，相信总有一款适合你。

·在线位图转矢量文件 http://vectormagic.com/home

一般在学习和工作中，不免会碰到一大堆图片等着我们处理。特别是处理标志时，客户提供的标志基本上都是以图片为主，而且有时候由于图片过小，质量极差。这时候，将文件转换成矢量可能是我们首要处理的问题。当然，你也可以要求客户提供矢量标志素材（有时候客户只是销售人员，可能并不了解什么是矢量标志，沟通过程会比较麻烦）…也可以通过常用的设计工具完成这个转换过程。

不过从方便程度而言，我跟推崇这个在线转换的工具。

截图取色类

·Picpick

网页设计师平时工作免不了截取各种各样的图片。除了利用浏览器截取网页外，似乎还有很多东西需要我们收集起来。那么这款小巧的工具可能适合你，它可以执行截取全屏、活动窗口、控件、指定区域、手绘区域等操作。支持双显示器，内置多种输出模式。

同时别以为PicPick只能抓图，它还内置有图像编辑器，截图后可进行简单图像编辑。它提供一系列辅助工具，主要包括：取色器、调色板、放大镜、屏幕标尺、极座标和直坐标、白板等等，尤其对网页制作非常有帮助，可谓是网页设计师的全能工具箱。想具体了解请点击【详细】     

·QQ截图

别以为我写错了，其实qq截图是个强大的工具。除了带有简易的截图功能外，我最需要的还是其计算截取范围像素的功能。这能方便在写代码，迅速计算元素（div）与元素（div）之间距离，提高工作效率。

动画辅助类

·SWiSHMax3

快速解决动画创作设计的工具 高级的 Flash 创作设计工具提供给绘图设计者或网站的专业设计师，超过350种默认的媒体效果，超过180种立即可用的组件和向量图形，可导入图片、图形、声音效果和影片，还可导出简报到Flash影片、执行文件、GIF动画或图像顺序，另外全新的项目模板及精灵面版立即呈现设计成果…，简单易懂，创作令人惊艳的Flash动画与网站就是那么简单！

·硕思闪客精灵

方便学习优秀动画制作思路的软件。它的专业版不但能捕捉、反编译、查看和提取shockwave Flash 影片（.swf和.exe格式文件），而且可以将SWF格式文件转化为FLA格式文件。它能反编译一个FLASH的所有元素，并且能完全支持动作脚本AS3.0。

格式转换类

·IcoWorkshop图标制作

对于常用的图标而言，图像编辑软件都不能很方便的编辑它们。而IconWorkshop的推出为我们解决了这一难题。这一全功能图标编辑软件除了可以让你自由编辑创作各种XP样式图标外，还可以在各种图标文件间互相转换。

在工作的实践中，最常用到的是其将任何的图像格式轻松转换为图标格式，一般为ico格式。其兼容性较好，支持透明通道，适用于各电子杂志，网站站标，桌面图标的生成工作。

转自：http://drizzlep.blog.sohu.com/158082019.html

整体看了一遍，还是比较基础，不过同时也透露出百度目前对于图片、Flash、Ajax确实是不支持的，URL的动静态对百毒蜘蛛没有影响，也推荐了URL规则和标题规则，META里面的描述也对权重没有任何影响

互联网创业者俱乐部发布会上发布百度搜索引擎优化指南，具体涵盖网站如何面向搜索引擎建站、内容建设、网站运营及推广等多方面内容，以系统化、规范化的理念引导网站创业者进行合理的搜索引擎优化等。当前，不少站长在搜索引擎优化方面存在误区，同时，由于市场中的第三方SEO机构良莠不齐，操作不当，影响搜索引擎对网站页面的收录，影响网站流量。百度搜索引擎优化指南的发布，必将规范中小网站更好利用搜索引擎推广自身网站。

百度联盟负责人表示，互联网创业者俱乐部的建立和百度搜索引擎优化指南的发布，均是为了促进整个行业的健康、快速发展，促进社会就业。互联网只有开放和共享，才能实现可持续发展，才能保证创新的力量转化为商业价值，未来，针对创业者成长各个阶段的线上线下扶持措施会更丰富，百度将与百万互联网创业者更紧密地站在一起，共同打造中国互联网发展的健康生态圈。

115网盘下载：http://u.115.com/file/f3c52b30d0

百度文库在线阅读：http://wenku.baidu.com/view/807dc2c7aa00b52acfc7cab6.html

今天看到这篇文章，学到了不少东西 特此发出来 和大家分享

JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如

setTimeout( function(){ alert(’你好!’); } , 0);
setInterval( callbackFunction , 100);

认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是JavaScript API文档明确定义第二个参数意义为隔多少毫秒后,回调方法就会被执行. 这里设成0毫秒,理所当然就立即被执行了.
同理对setInterval的callbackFunction方法每间隔100毫秒就立即被执行深信不疑!

但随着JavaScript应用开发经验不断的增加和丰富,有一天你发现了一段怪异的代码而百思不得其解:

div.onclick = function(){
setTimeout( function(){document.getElementById(’inputField’).focus();}, 0);
};

既然是0毫秒后执行,那么还用setTimeout干什么, 此刻, 坚定的信念已开始动摇.

直到最后某一天 , 你不小心写了一段糟糕的代码:

setTimeout( function(){ while(true){} } , 100);
setTimeout( function(){ alert(’你好!’); } , 200);
setInterval( callbackFunction , 200);

第一行代码进入了死循环,但不久你就会发现,第二,第三行并不是预料中的事情,alert问候未见出现,callbacKFunction也杳无音讯!

这时你彻底迷惘了,这种情景是难以接受的,因为改变长久以来既定的认知去接受新思想的过程是痛苦的,但情事实摆在眼前,对JavaScript真理的探求并不会因为痛苦而停止,下面让我们来展开JavaScript线程和定时器探索之旅!

拔开云雾见月明

出现上面所有误区的最主要一个原因是:潜意识中认为,JavaScript引擎有多个线程在执行,JavaScript的定时器回调函数是异步执行的.

而事实上的,JavaScript使用了障眼法,在多数时候骗过了我们的眼睛,这里背光得澄清一个事实:

JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序.

JavaScript引擎用单线程运行也是有意义的,单线程不必理会线程同步这些复杂的问题,问题得到简化.

那么单线程的JavaScript引擎是怎么配合浏览器内核处理这些定时器和响应浏览器事件的呢?
下面结合浏览器内核处理方式简单说明.

浏览器内核实现允许多个线程异步执行,这些线程在内核制控下相互配合以保持同步.假如某一浏览器内核的实现至少有三个常驻线 程:javascript引擎线程,界面渲染线程,浏览器事件触发线程,除些以外,也有一些执行完就终止的线程,如Http请求线程,这些异步线程都会产 生不同的异步事件,下面通过一个图来阐明单线程的JavaScript引擎与另外那些线程是怎样互动通信的.虽然每个浏览器内核实现细节不同,但这其中的 调用原理都是大同小异.

由图可看出,浏览器中的JavaScript引擎是基于事件驱动的,这里的事件可看作是浏览器派给它的各种任务,这些任务可以源自 JavaScript引擎当前执行的代码块,如调用setTimeout添加一个任务,也可来自浏览器内核的其它线程,如界面元素鼠标点击事件,定时触发 器时间到达通知,异步请求状态变更通知等.从代码角度看来任务实体就是各种回调函数,JavaScript引擎一直等待着任务队列中任务的到来.由于单线 程关系,这些任务得进行排队,一个接着一个被引擎处理.

上图t1-t2..tn表示不同的时间点,tn下面对应的小方块代表该时间点的任务,假设现在是t1时刻,引擎运行在t1对应的任务方块代码内,在这个时间点内,我们来描述一下浏览器内核其它线程的状态.

t1时刻:

GUI渲染线程:

该线程负责渲染浏览器界面HTML元素,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行.本文虽然重 点解释JavaScript定时机制,但这时有必要说说渲染线程,因为该线程与JavaScript引擎线程是互斥的,这容易理解,因为 JavaScript脚本是可操纵DOM元素,在修改这些元素属性同时渲染界面,那么渲染线程前后获得的元素数据就可能不一致了.

在JavaScript引擎运行脚本期间,浏览器渲染线程都是处于挂起状态的,也就是说被”冻结”了.

所以,在脚本中执行对界面进行更新操作,如添加结点,删除结点或改变结点的外观等更新并不会立即体现出来,这些操作将保存在一个队列中,待JavaScript引擎空闲时才有机会渲染出来.

GUI事件触发线程:

JavaScript脚本的执行不影响html元素事件的触发,在t1时间段内,首先是用户点击了一个鼠标键,点击被浏览器事件触发线程捕捉后形成 一个鼠标点击事件,由图可知,对于JavaScript引擎线程来说,这事件是由其它线程异步传到任务队列尾的,由于引擎正在处理t1时的任务,这个鼠标 点击事件正在等待处理.

定时触发线程:

注意这里的浏览器模型定时计数器并不是由JavaScript引擎计数的,因为JavaScript引擎是单线程的,如果处于阻塞线程状态就计不了时,它必须依赖外部来计时并触发定时,所以队列中的定时事件也是异步事件.

由图可知,在这t1的时间段内,继鼠标点击事件触发后,先前已设置的setTimeout定时也到达了,此刻对JavaScript引擎来说,定时触发线程产生了一个异步定时事件并放到任务队列中, 该事件被排到点击事件回调之后,等待处理.
同理, 还是在t1时间段内,接下来某个setInterval定时器也被添加了,由于是间隔定时,在t1段内连续被触发了两次,这两个事件被排到队尾等待处理.

可见,假如时间段t1非常长,远大于setInterval的定时间隔,那么定时触发线程就会源源不断的产生异步定时事件并放到任务队列尾而不管它 们是否已被处理,但一旦t1和最先的定时事件前面的任务已处理完,这些排列中的定时事件就依次不间断的被执行,这是因为,对于JavaScript引擎来 说,在处理队列中的各任务处理方式都是一样的,只是处理的次序不同而已.

t1过后,也就是说当前处理的任务已返回,JavaScript引擎会检查任务队列,发现当前队列非空,就取出t2下面对应的任务执行,其它时间依此类推,由此看来:

如果队列非空,引擎就从队列头取出一个任务,直到该任务处理完,即返回后引擎接着运行下一个任务,在任务没返回前队列中的其它任务是没法被执行的.

相信您现在已经很清楚JavaScript是否可多线程,也了解理解JavaScript定时器运行机制了,下面我们来对一些案例进行分析:

案例1:setTimeout与setInterval

setTimeout(function(){
   /* 代码块... */
   setTimeout(arguments.callee, 10);
}, 10);

setInterval(function(){
   /*代码块... */
 }, 10);

这两段代码看一起效果一样,其实非也,第一段中回调函数内的setTimeout是JavaScript引擎执行后再设置新的setTimeout 定时, 假定上一个回调处理完到下一个回调开始处理为一个时间间隔,理论两个setTimeout回调执行时间间隔>=10ms .第二段自setInterval设置定时后,定时触发线程就会源源不断的每隔十秒产生异步定时事件并放到任务队列尾,理论上两个setInterval 回调执行时间间隔<=10.

案例2:ajax异步请求是否真的异步?

很多同学朋友搞不清楚,既然说JavaScript是单线程运行的,那么XMLHttpRequest在连接后是否真的异步?
其实请求确实是异步的,不过这请求是由浏览器新开一个线程请求(参见上图),当请求的状态变更时,如果先前已设置回调,这异步线程就产生状态变更事件放到 JavaScript引擎的处理队列中等待处理,当任务被处理时,JavaScript引擎始终是单线程运行回调函数,具体点即还是单线程运行 onreadystatechange所设置的函数.

个人补充：

setTimeout或者setInterval的设置的时间参数的具体意思是：在参数指定的时间后将待执行方法放到执行队列中， 如果队列中没有其他方法等待，则回立即执行setTimeout指定的方法，因此有时给人好像是立即执行的假象

先看看是什么人在反对（非Web设计不纳入此列）：

1.没有UED团队（不包括曾经呆过UED团队的）的；
2.自己总是对的（包括在和队友合作中）；
3.广告、VI、产品或其它设计领域转过来做Web设计的；
4.不重视交互和视觉；
5.无法脱离“临慕”或“拿来主义”者。

1.受设计周期限制；
2.非团队主管（或上级）插足；
3.设计者情绪因素；
4.没有规划好；