我想网 » WEB

7 项 Web 开发者需要了解的新技术

seasun — Sun, 25 Sep 2011 09:15:45 +0000

Web 开发者需要经常更新他们的知识，学习新的技术，如果他们还想继续在 Web 开发领域混并混得还不错的话。下面将为你展示 7 项新的 Web 开发技术，作为一个 Web 开发人员，你需要了解、熟悉并学会的技术。

目前，大量智能手机设备的涌现，同时各种不同尺寸屏幕的设备，如平板电脑之类的出现，对 Web 开发带来了前所未有的挑战，如何让 Web 页面能适应各种尺寸的屏幕让很多 Web 开发人员相当的纠结。幸运的是 CSS3 规范可帮我们轻松的解决此事，你可以根据不同尺寸的屏幕定义不同的 CSS 样式。

例如，下面的代码只在屏幕显示区域大小为 767px 的时候才有效：

    @media screen and (max-width:767px){
        #container{
            width:320px;
        }   

        header h1#logo a{
            width:320px;
            height:44px;
            background:url(image-small.jpg) no-repeat 0 0;
        }                             

    }

2、Font resizing with REMs

CSS3 引入新的字体尺寸单位 rem (root rm)

em 单位是相对于父节点的 font-size ，会有一些组合的问题，而 rem 是相对于根节点（或者是 html 节点），意思就是说你可以在 html 节点定义一个单独的字体大小，然后所有其他元素使用 rem 相对于这个字体的百分比进行设置。

    html { font-size: 62.5%;}
    body { font-size: 1.4rem;}/* =14px */
    h1   { font-size: 2.4rem;}/* =24px */

3、Cache pages for offline usage

HTML5 引入了一个强大的特性：离线缓存。该特性可让你告诉浏览器缓存某些页面，使得用户可以在离线的情况下再次访问该页面。

要缓存页面非常简单，首先在你网站的 .htaccess 文件中添加如下一行：

AddType text/cache-manifest .manifest

然后你可创建一个文件如 offline.manifest ，包含如下内容：

    CACHE MANIFEST
    CACHE
    index.html
    style.css
    image.jpg

最后，在 html 节点中增加：

4、Server-side JavaScript

JavaScript 现在已经是非常流行的 Web 客户端编程语言了，但 JavaScript 也越来越多的出现在服务器端了，通过强大的 JavaScript 服务器端环境：Jaxer、Node.js 和 Narwhal。

下面代码显示如何用 Node.js 创建一个简单的 Hello World 程序：

var sys = require("sys");
    sys.puts("Hello World!");

5、HTML5 drag & drop

HTML5 让网页上的拖放变得非常简单，我们只需要简单的定义 draggable=”true” 属性即可，如下所示：


      A
      B
      C

有了这些 draggable=true 的元素，我们只需要编写一些简单的 JavaScript 代码来处理拖放，这里不再详细描述处理过程。

提示：如果你希望阻止可拖放元素被选中，可使用以下 CSS 规则：

    [draggable] {
      -moz-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      user-select: none;
    }

6、Forms, the HTML5 way

HTML5 规范在表单定义方面引入很多新特性，包含很多新的表单组件，例如日期选择、数字调整、使用正则表达式对输入框进行验证等等（email、tel、link）。

下面代码显示了一些新的表单元素：

<form>
        Slider
          

        Numeric spinner
          

        Date picker
          

        color-picker">Color picker
        color" name="color-picker" id="color-picker" value="ff0000">  

        Text field with placeholder
          

        Url field
          

        Email field

7、CSS animations

很多现在的浏览器都支持 CSS 动画，是的，CSS 已经允许你创建一些简单的动画，而无需 JavaScript 的支持。

下面代码显示如何让背景色改变：

    #logo {
        margin: 15px 15px 0 15px;
        background: red;
        float: left;  

        /* Firefox 4+ */
        -moz-animation-name: colour-change;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
        -moz-animation-duration: 30s;  

        /* Webkit */
        -webkit-animation-name: colour-change;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: 30s;
    }  

    @-moz-keyframes colour-change {
        0% {
            background: red;
        }
        33% {
            background: green;
        }
        66% {
            background: blue;
        }
    }  

    @-webkit-keyframes colour-change {
        0% {
            background: red;
        }
        33% {
            background: green;
        }
        66% {
            background: blue;
        }
    }

Feed enhanced by Better Feed from Ozh

Web开发人员应当知道的15个开源项目

seasun — Thu, 17 Mar 2011 16:07:00 +0000

如今，构建网站和开发Web应用程序已经不仅要求开发人员是一名优秀的程序员，更需要聪明的程序员。这也就是说，在可能的情况下，重复使用已有的代码和应用程序，而不是自己重头开始。开源由来已久，并且很多网站的构建也使用了开源。开发人员都知道Linux、Apache、MySQL及 PHP （LAMP）。但是除那些之外的其他开源项目呢？作为一名Web开发人员，你可以借助诸多可用的项目，以节省开发时间，或提高程序性能。

下面让我们看一下哪些开源项目可供大家免费使用。

可供使用的新型数据库

传统上讲，你可能习惯使用MySQL。尽管MySQL是一个非常棒的数据库，但诸多试图解决MySQL存在的问题的新型数据库已经问世。

1. MongoDB

MongoDB就是的“非关系型”数据库之一。它扩展性强、性能高。

2. Apache Cassandra

与MongoDB相似，Apache Cassandra也是一种“非关系型”数据库，它亦扩展性强、性能高。并且能够很好地处理庞大而活跃的数据集。（编注：Facebook用 Cassandra来做邮箱搜索。）

更多

根据需要，你还有更多的选择。请参阅维基百科的这个列表。

缓存数据

因为需要频繁使用一些数据，所以相比每次去数据库中查询，把这些数据存放在内存中更加合理。这能够大大提高Web应用程序的运行速度。

3. Memcached

Memcached是一种在内存中缓存小型数据块的简单但强大的解决方法。（编注： Facebook运行着成千上万的Memcached服务器，借以及时处理TB级的缓存数据。）

4. Redis

Redis的作用与Memcached相同，但包含更多的特性。例如，它也可以存储本应当永久性保存在磁盘上的数据。

加快网络请求的速度

大多数网站使用Apache的网络服务器来提供服务。它能够很好地服务于大多数网站，但是一旦网站的访问量增大，就需要做进一步优化。

5. Nginx

Nginx是一种与Apache非常相像的网络服务器，但它的速度相当快。作为负载平衡器，它常用于处理静态内容，如图像文件。

6. Varnish

Varnish是位于常规网络服务器之前的高速缓存器。它将所有热门内容放入内存，直接对其处理，无须将所有内容都传给网络服务器。（编注： Facebook用Varnish 处理图片和用户照片，每天都要处理十亿级的请求。Facebook所用到的其他开源项目，请参阅《揭秘Facebook背后的那些软件》一文。）

轻松管理内容

如果你在构建一个允许用户添加及编辑内容的网站，那么你可能需要一个内容管理系统（CMS）。CMS能够帮助开发人员轻松地管理博客及网站，并且提供大量的能够扩展网站功能的插件。

7. WordPress

虽然WordPress是个博客平台，但它也能用于管理大大小小的网站。

8. Drupal

Drupal是一个可用于构建强扩展性、高灵活性网站的完整平台。

还有很多可用的内容管理系统。请参阅维基百科的这个大型列表。

交互式的网络UI

如今，你可以使用JavaScript和AJAX技术，开发一个类似桌面应用程序那样的以多种方式运行的网络应用。使用JavaScript框架，能够轻松地开发大型的网络应用程序。

9. JQuery

JQuery是一个带插件的框架，这些插件有主构建包含AJAX交互及动画的动态网站。

10. MooTools

MooTools就和jQuery一样，是一个使用JavaScript构建强大网络应用程序的框架。

如果你想尝试一下其他选择，请参考维基百科的这个列表。

其他比较炫的资源

当你开始开发一个复杂的网络应用程序时，很多软件、库及模型能够帮你解决难题，如果不参考这些资源，你可能会花费大量的时间。以下是两个入门的例子。

11. Node.js

Node.js是一个事件驱动的输入/输出框架，支持用JavaScript编写应用程序，并在V8 JavaScript引擎上运行。这是一种开发快速、可扩展网络程序的很棒的方式。

12. RabbitMQ

RabbitMQ是一种可靠的、可扩展的信息传送系统，它能够处理高吞吐量。如果需要在系统之间或应用程序之间交换数据，比起传统的解决方案或直接将数据存储在数据库中，信息传送系统的更能胜任这一工作。

使用框架来加快开发进程

不管你是使用PHP还是其他的编程语言，有很多不同的可用框架能够帮助你加速开发进程，并能够更加轻松地管理代码。

13. Symfony

Symfony是一个PHP框架，它包含很多能够加速开发复杂网络应用程序的组件及工具。同时它包含社区提供的1000多个插件。

14. Ruby on Rails

对Ruby语言而言，Ruby on Rails是最流行的可用框架。

15. Django

Django是一个Python网络框架，它用来帮助快速开发高性能、优秀的网络应用程序。

维基百科上有一份更完整的列表，这个列表包含不同语言的可用网络应用框架。

后话 – 合理利用时间

开发人员有必要花费时间不断了解哪些新软件是可用的，这样对轻松地解决复杂的任务大有裨益。

而且在项目开发之初，花费一些时间做计划和调查也是非常有必要的，因为这样可以明确即将面临的问题，并确定其最佳解决方案。

自己编程来解决每个问题的时代已经结束，如今更多的是灵活使用现有技术来解决问题。

不知正在看本文的Web开发人员，在上述这些开源项目中，你用到了哪些？欢迎你在评论中分享你的使用经验和心得。

Feed enhanced by Better Feed from Ozh

关于网络爬虫的

seasun — Tue, 01 Feb 2011 02:42:56 +0000

由于搜索引擎的泛滥，网络爬虫如今已经成为全球互联网的一大公害。除了专门做搜索的Google，Yahoo，微软，百度以外，几乎每个大型门户网站都有自己的搜索引擎，搜狐，腾讯，网易。再加上十分流氓的社区搜索奇虎等等，国内大大小小叫得出来名字得就几十家，还有各种不知名的几千几万家，另外还有国外各种奇奇怪怪的搜索引擎。只要你做的网站是内容丰富的网站，就避免不了被几千几万个爬虫每天爬来爬去。

大的搜索引擎如Google的爬取网页十分智能，爬取频率和爬取压力都没有那么高，对网站资源消耗还比较少，最怕各种各样弱智的爬虫，对网页内容的分析能力很差，经常并发几十上百个请求循环重复抓取，对网站往往是毁灭性打击。

我随便举几个例子：网易有道搜索曾经在一个上午的时间就访问了JavaEye网站60多万次请求，把网站访问拖得很慢，被我们立刻封杀。还比方说雅虎爬虫的爬行也十分弱智，经常循环爬取，爬行频率非常高，也被我们封杀掉了。然而最可怕的还是奇虎的爬虫，他托管在河北廊坊机房的服务器上面的爬虫，经常并发上百个请求同时爬取，我有次解除了对该机房的封锁，几秒钟之内，JavaEye网站就彻底无法访问，观察web servr上面堵塞了几百个来自奇虎爬虫的请求。

除了这些叫得出来名字的爬虫之外，还有很多程序员自己写的山寨爬虫，特别是一些菜鸟程序员，完全没有编写爬虫的经验，写出来的爬虫破坏力极强。曾经有一次我在JavaEye的日志里面发现一个User-Agent是Java的爬虫一天之内爬行了将近100万次动态请求。毫无疑问是个利用JDK类库编写的简单爬网页程序，由于JavaEye网站内部链接构成了回环导致该程序陷入了爬行死循环，而程序没有相应的处理代码，导致网站资源被大量消耗。

对于一个原创内容丰富，URL结构合理易于爬取的网站来说，简直就是各种爬虫的盘中大餐，很多网站的访问流量构成当中，爬虫带来的流量要远远超过真实用户访问流量，甚至爬虫流量要高出真实流量一个数量级。即使像JavaEye这样一向严厉封杀爬虫的网站，只要稍微松懈一段时间，爬虫流量就能轻易超过真实访问流量的2倍以上。对于大型互联网网站来说，有足够的硬件资源来应付爬虫带来的庞大访问压力，也有足够的资源和能力去解决这个问题。但是对于中小型互联网网站来说，爬虫带来的就是毁灭性打击了。

JavaEye网站也一直被网络爬虫问题所困扰，并且不断采用一些新的手段对付网络爬虫，网站和爬虫之间的战争就像此消彼长的拉锯战一样。

一、野蛮型爬虫

在2006年的时候，JavaEye遭遇的网络爬虫基本上都是比较野蛮的爬虫，动不动上百个并发请求一起过来，网站立刻被拖慢或者干脆无法访问，例如奇虎的爬虫就是这样（百度的爬虫早期也是如此，现在已经斯文多了）。这种爬虫是很容易识别出来的，通过netstat信息查看，或者web server提供的并发连接信息，比方说lighttpd的mod_status就可以非常直观的观察到当前每个并发连接的状态，请求的地址和IP，以及连接时间。

对付这种野蛮的爬虫其实没有什么太好的办法，只有一种办法，就是直接封杀。然而爬虫往往并不分布在一台服务器上，而是很多台服务器上面，因此你封掉一个ip地址根本不解决问题，所以我们采取的办法就是直接封杀爬虫所在的C网段地址，例如：

iptables -A INPUT -i eth0 -j DROP -p tcp –dport 80 -s 84.80.46.0/24

除此之外还可以采取一些辅助的解决办法，比方说在web server上面限制每IP并发连接数量，如果超过一定的并发连接数量，就直接返回拒绝请求的页面。例如lighttpd可以这样配置：

$HTTP["url"] =~ “^/topics/download/” {
evasive.max-conns-per-ip = 2
}

限定每IP只能并发一个线程下载。

总的来说，这种蛮不讲理的爬虫相对比较稀少，碰到一个封杀一个C段地址基本可以解决此类爬虫。现在JavaEye已经很少遇到这种爬虫了。

这里要特别说明一点：有很多人提出一种极度脑残的观点，说我要惩罚这些爬虫。我专门在网页里面设计不消耗资源的静态循环链接页面，让爬虫掉进陷阱，死循环爬不出来。能出这种弱智点子的人一看就知道纸上谈兵。根本用不着你设置陷阱，弱智爬虫对正常网页自己就爬不出来，你这样做多此一举不说，而且会让真正的搜索引擎降低你的网页排名。

而且运行一个爬虫根本不消耗什么机器资源，我在自己的笔记本电脑上面跑个Java程序，发起上百个线程，就算死循环了，也消耗不了多少CPU，根本不消耗我什么。相反，真正宝贵的是你的服务器CPU资源和服务器带宽，谁消耗谁阿？做程序员最可怕的不是弱智，而是自己不知道自己弱智，总以为自己很明智。

二、爬虫的海量抓取和海量的各种小爬虫

有很多智能程度比较低的爬虫，比方说雅虎和网易有道的爬虫，它虽然并不会以很高的并发连接爬取你的网站，但是它会以较低的频率持续不间断爬取网站，一天下来至少爬取几十万页面，极大消耗了服务器资源，拖慢服务器的响应速度。而且由于它爬取的并发不高，一般不容易暴露自己，特别是雅虎的爬虫，分布很广，来自大约二十几个C段地址，狡兔n窟，你很难找全它所有的C段地址，因此通过简单的封杀IP地址段，对这种爬虫基本无效。

另外还有很多各种各样的小爬虫，特别是以国外的各式各样稀奇古怪的搜索引擎为主，它们都在尝试Google以外创新的搜索方式，每个爬虫每天爬取你几万的网页，几十个爬虫加起来每天就能消耗掉你上百万动态请求的资源。由于每个小爬虫单独的爬取量都很低，所以你很难把它从每天海量的访问IP地址当中把它准确的挖出来，因此也没有办法通过直接封杀IP的方式对付它们。

怎么解决这个问题呢？其实这些爬虫都有一个共同的特点，在爬取网页的时候，会声明自己的User-Agent信息。我们知道每个浏览器都有自己独一无二的User-Agent 信息，比较正规的爬虫，特别是来自国外的爬虫都比较规矩，会声明自己的User-Agent信息，因此我们就可以通过记录和分析User-Agent信息来挖掘和封杀这些爬虫。

首先我们需要记录每个请求的User-Agent信息，对于用rails开发的JavaEye网站来说这很简单，我们在 app/controllers/application.rb里面添加一个全局的before_filter，来记录每个请求的User-Agent信息：

logger.info “HTTP_USER_AGENT #{request.env["HTTP_USER_AGENT"]}”

这样就会把每个请求的User-Agent信息记录到production.log里面去。

然后我们统计每天的production.log，抽取User-Agent信息，找出访问量最大的那些User-Agent。但是这里要注意的是我们只关注那些爬虫的User-Agent信息，而不是真正浏览器User-Agent，所以我们还要排除掉浏览器User-Agent，最后我们就可以得到一个访问量最多的爬虫列表。要做到这一点仅仅需要一行shell：

这行shell命令从production.log里面抽取包含User-Agent的日志，然后排除真实浏览器的User-Agent，再统计访问量，然后按照访问量从大到小排序，最后挑选排名前100的记录到日志文件里面去。或者你也可以直接把输出内容发送到你的邮箱里面去。

最终的爬虫统计结果类似下面这样：

57335 HTTP_USER_AGENT Baiduspider+(+http://www.baidu.com/search/spider.htm)
56639 HTTP_USER_AGENT Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)
42610 HTTP_USER_AGENT Mediapartners-Google
19131 HTTP_USER_AGENT msnbot/2.0b (+http://search.msn.com/msnbot.htm)
8980 HTTP_USER_AGENT Mozilla/5.0 (compatible;YoudaoFeedFetcher/1.0;http://www.youdao.com/help/reader/faq/topic006/;1 subscriber;)
8034 HTTP_USER_AGENT Sosoblogspider+(+http://help.soso.com/soso-blog-spider.htm)
7847 HTTP_USER_AGENT msnbot/1.1 (+http://search.msn.com/msnbot.htm)
4342 HTTP_USER_AGENT Mozilla/5.0 (compatible; Google Desktop)
3183 HTTP_USER_AGENT
3115 HTTP_USER_AGENT Mozilla/4.0
2900 HTTP_USER_AGENT WordPress/2.7
2096 HTTP_USER_AGENT Apple-PubSub/65.11
1891 HTTP_USER_AGENT Zhuaxia.com 1 Subscribers
1201 HTTP_USER_AGENT Apple-PubSub/65
1154 HTTP_USER_AGENT Mozilla/5.0 (compatible;YoudaoFeedFetcher/1.0;http://www.youdao.com/help/reader/faq/topic006/;2 subscribers;)
1059 HTTP_USER_AGENT FeedBurner/1.0 (http://www.FeedBurner.com)

从日志就可以直观的看出主要是Google，baidu，微软msn,网易有道和腾讯搜搜的爬虫，以及每个爬虫爬取的请求次数。通过这个简单的办法，你就可以有效的窥视每个爬虫的动向，如果哪个爬虫不老实，胆敢疯狂爬取的话，你就可以一眼把它挑出来。

要根据User-Agent信息来封杀爬虫是件很容易的事情，主流的Web Server都支持针对User-Agent信息的设置，JavaEye使用的是lighttpd，因此用以下的lighttpd配置来封杀爬虫：

$HTTP["useragent"] =~ “qihoobot|^Java|Commons-HttpClient|Wget|^PHP|Ruby|Python” {
url.rewrite = ( “^/(.*)” => “/crawler.html” )

Feed enhanced by Better Feed from Ozh

强大的网页性能测试工具–Speed Tracer

seasun — Mon, 03 Jan 2011 13:11:39 +0000

Speed Tracer由google开发的一款测试网页性能分析插件<而且开源> (IE下推荐dynaTrace)，包含：

* Javascript parsing and execution
* Layout
* CSS style recalculation and selector matching
* DOM Event handling
* Network resource loading
* Timer fires
* XMLHttpRequest callbacks
* Painting
* and more ..

安装要求：

1、只适用于 Google Chrome Developer版本

2、在Chrome启动命令里需要设置  --enable-extension-timeline-api

具体可查看这里：http://code.google.com/intl/zh-CN/webtoolkit/speedtracer/get-started.html

插件安装地址：https://chrome.google.com/extensions/detail/ognampngfcbddbfemdapefohjiobgbdl?hl=zh-cn

以下截图为实际测试google地图的数据：

IE中推荐使用dynaTrace

这里是百度文库关于dynaTrace ajax的教程

http://wenku.baidu.com/view/565afd1cc281e53a5802ff08.html

一个小视频地址：http://ajax.dynatrace.com/pages/learn/teaser.aspx

图就不截了，更多的搜索引擎直接搜索出来大把大把的…

最后再推荐两个检测IE内存泄露问题的工具：sIEve、IEJSLeaksDetector

不过，我使用后的感觉下来，还是IEJSLeaksDetector要好使一些，因为它只需要点击”Start”和“stop”就可以自动帮我显示 “有可能”产生内存泄露的代码，点击就直接定位有问题的代码，这样方便很多了。

其它工具也是很强大的，比如说Firebug、YSlow、HttpWatch、Fiddler…

还有一个在线测试网页性能的站点：http://www.webpagetest.org/

相信还有更多、更好的工具，但工具毕竟是工具，上面推荐的这里自己也并不是一个个全部都经常用，关键是找到适合自己的工具、能快速定位并解决问题就是最好的工具了

Feed enhanced by Better Feed from Ozh

GIF和几种PNG(8/24/32)以及Alpha/索引色透明对比

seasun — Mon, 03 Jan 2011 13:04:16 +0000

PNG这种文件格式值得科普下,对比GIF来说

PNG和GIF都支持动画
PNG的动画也叫APNG,只是firefox支持,详见 http://ooxx.me/apng.orz ,如Firefox看这里的favicon,是会动滴
所以动画图片来说,还是GIF支持最好

第一种PNG叫PNG8(索引色透明),简单说可以理解为静态的GIF
他们都只有256色,也支持索引透明,就是指定一个像素点是不是透明
但是PNG由于算法的优势,体积比较少
所以,静态GIF完全可用PNG8取代

第二种PNG也叫PNG8(Alpha透明),牛逼在可指定像素点的透明度,例如50%透明度
这种优点在于比PNG24/32体积小,但效果一样
缺点在于IE6支持不好,会显示灰底

第三种PNG叫PNG24
和PNG8的区别仅在于体积更大
比较尴尬的存在

第四种PNG叫PNG32
和photoshop的PSD一样,是Fireworks的默认源文件格式,包含图层和通道信息
和PNG24的区别在于有图层

简单的归纳就是

动画:
支持: GIF, PNG只在firefox支持
不支持: 非Firefox的PNG

索引色透明(某像素是全透明还是全不透明):
支持: GIF/PNG都支持
不支持: IE6下的PNG8(Alpha透明)和PNG24/32

Alpha透明(可指定透明度):
支持:PNG8(Aplha透明)/PNG24/PNG32
不支持: GIF/PNG8(索引色透明)

图层
支持: PNG32
不支持: PNG8/PNG24/GIF

颜色
256色：GIF PNG8(2种)
其他的格式颜色数不过来,好多

附加说明:

Photoshop 只能创建GIF、 PNG8(索引透明)和PNG24

Fireworks 能创建任意格式的GIF和PNG

PNG8(索引透明)在创建的时候有个参数叫(PS杂边|FW色板),这个作用就是用杂边色加上像素点的透明度例如50%,生成伪透明的不透明像素点
适用于固定底色的伪半透明,例子里用的杂边是黑色,在白背景下就很明显

PNG8(Alpha透明)在IE6下会有过度裁剪的问题,可能是把半透明的像素都去掉了,所以某些图片会如最上面第一张图所示,被狗咬的感觉
规避方案:

1.用2张图,IE6用PNG8(索引透明),非IE6用PNG8(Alpha透明),在CSS里用_这个IE6hack来区别
2.半透明在作图的时候就要考虑到被去掉后的样子,对设计师有要求,不大现实
3.说服自己接受这坨大便,然后咽下去就这样了你想咋样

静态GIF、PNG 24、PNG32不大推荐在网页上用

实例在

http://code.sh/lab/png/

有兴趣自己去看

如有疑问和补充请留言，有问必答

——补充线 ———————————————————————————–

ytzong says:

规避方案补充一个：
对IE6使用AlphaImageLoader滤镜，用在PNG8(Alpha透明)上，就像对png24用该滤镜一样，就不会有被狗咬的效果了，要平衡下性能进行取舍
http://www.misuisui.com/weblog/?p=2286

alpha透明的png8做渐进增强非常赞，例图
http://docs.google.com/File?id=ddrrtxb_1735hpptpxcm_b
高级浏览器有阴影，IE6木有

大猫对补充的补充:
1.AlphaImageLoader滤镜的缺点在于额外的CPU和内存开销,并且在图片下载失败的情况下会挂死整个页面,优点如涛哥所说
2.例图里因为非半透明区域是边缘平整的所以适合渐进增强,但是有相当一部分图就被狗咬了,具体看情况来取舍,顶渐进增强

==AD make sense============================================

推荐下ytzong的 CSS gaga ,新增自动生成雪碧图功能,强的1B
本文是涛哥认为俺不懂PNG的反击之作,哇哈哈我不是2B

ytzong: AOL有篇文章不错
猫总这里人气不错看有无人要翻译的
http://www.artzstudio.com/2008/07/png-alpha-transparency-no-clear-winner/

Feed enhanced by Better Feed from Ozh

2011年值得注意的5个Web设计趋势

seasun — Sun, 05 Dec 2010 14:53:24 +0000

在过去的12个月里，我们已经看到Web设计领域发生了许多变化。包括智能手机和平板电脑(如iPad)这些移动设备的日渐普及已经改变了用户对内容的访问和交互方式。还有，像HTML5、web字体和CSS这些新标准的正式通过意味着越来越多的用户可以使用网络上最新最强大的功能。

小企业往往因为重新设计的成本和必须照顾大众用户而无法跟上最新的Web设计潮流。不过，下面列举的这些关于web设计领域的技术趋势，我们认为小企业有必要注意一下并考虑把它们纳入自己的网站。

1、抛弃Flash

无论Adobe 与苹果的Flash之战你站在哪一边，越来越多的网站和开发者开始远离非Flash不可的视频、动画和网站导航这都是一个不争的事实。

Flash的主要应用还是在多交互设计和RIA(富互联网应用程序)，而小企业一般不需要提供这类用户体验，只要简单地展示信息，使用HTML5、 Javascript和CSS3来替代 Flash也许更有意义。

大多数的移动设备无法访问Flash，甚至有些支持Flash的也不能完美地支持。作为一名客户，没有什么比这个情况更加糟糕：当我从手机访问一个网站却发现无法浏览联系信息、产品列表和服务或者是位置信息，而原因是网站的导航或核心内容是Flash创建的。

对于某些任务，Flash确实是个好工具，例如捕获音频或视频、展示复杂动画或运行游戏。如果你还在使用陈旧的circa-2005 Flash模版，2011年可能是升级使用一些更现代化工具的时机了。

2、网络字体

字体排印是任何网页设计的关键组成部分。以前，在网站上使用自定义字体是件复杂而且让人头疼的事情。其结果是，大多数设计师要么使用为数不多的 web安全字体，要么使用类似文字的图片或Flash替代的方法。

令人兴奋的是，在过去12个月里，字体和网络都有了很大的发展。感谢TypeKit、Fonts.com和Google网络字体这些服务，现在可以在网站上以微小的改动来使用免费的网络字体。

3、针对手机兼容/优化网站

越来越多大大小小的网站都开始修改自己的网站增强其对小屏幕的友好性。一个做过移动设备兼容和优化的网站意味着不仅会让网站在蜂窝数据网络中加载地更快，也让网站内容更适合小型设备的屏幕规格，使其更容易访问和理解。

随着智能手机不断普及，我们越来越多的在线时间花在手机上。对小企业来说，确保网站的良好手机体验是个提高网站可用性的好机会。

4、来自Tumblr的灵感

微博Tumblr是一个快速、轻易发布更新、分享内容和获得反馈的平台。Tumblr已经成为一个受欢迎的平台，很多小企业都在使用它作为公司博客或者网站。

Tumblr有很多面向小企业用户的优秀主题，而它本身在web设计领域也是很有影响的一个作品。

如果你不使用Tumblr作为官方博客或网站，也可以去山寨它的设计风格——独特的发布类型icon图标、漂亮的大标题以及简约的布局。

5、触摸未来：HTML5和CSS3

正如引言中所指出，非设计行业相关的小企业很难使用设计领域的前沿思想去解决他们对部分潜在用户会否被拒之门外的担忧。

虽然还有一些企业网络和一小部分家庭用户在使用那些陈旧、衰老、几近灭绝的浏览器，但目前主流浏览器（Internet Explorer、Firefox、Google Chrome、Safari和Opera）的最新版本都支持CSS3和HTML5。

此外，几乎每一个现代化智能手机也都支持先进的CSS3、JavaScript和HTML5的功能。

在这个阶段，完全可以尝试在你的小企业网站上实验一下HTML5或CSS3的威力。可以使用技术在趋近标准的新浏览器上提供增强阅读体验，并在那些破旧的浏览器上降低体验。

Feed enhanced by Better Feed from Ozh

Web表单设计:表单结构

seasun — Sun, 05 Dec 2010 14:46:32 +0000

原文地址：:http://www.alitedesign.com

你是否曾为表单设计感到过沮丧或不知所措呢？接下来三篇文章，希望能彻底改变你的看法，真正爱上Web表单设计。首先感谢Luke Wroblewski的帮助，让我有机会细心品味设计表单的乐趣。总体来说，Web表单主宰着结算、注册和数据输入。每天eBay、Taobao上的大量物品主要通过出售物品（Sell Your Item）表单售出；MySpace、Facebook等超过几亿的用户都是通过Web表单加入网站社区的；YouTube、Youku通过上传视频（Upload Your Video）表单收集了大量视频。这一切都给我们创造了很多接触Web表单的机会，Web表单常常是漫长旅途的最后一步，也是最重要的一步。

以上为Yahoo的注册表单,我们可以大体观察出三个主体元素:标题、数据、动作。它们是组成表单的基本元素，过多的修饰表单或过多无用信息会给用户带来更多的思考与厌恶。有时用户会觉得表单很讨厌，想做的是投票、申请工作、在网上买书、加入小组或从近期购物中拿到折扣等，但表单却给用户带来了麻烦，妨碍了他们。

大多数表单是“由内而外”（Inside Out）而不是“由外而内”（Outside In）设计出来的。举个例子：如果谁想成为网站的会员，网站就会跳出表单要求用户提供用户名，密码，电子邮箱等。这就是“由内而外”的设计，多数用户不会认为享受网站服务与填写讨厌的表单有什么必然关系。同时，“由外而内”的设计意味着以组织或者网站外部人的角度来看待事务。这时候项目成员需要以用户的视角来讨论表单的设计，目标是让用户轻松地完成填写。让表单以某种隐形平衡方式存在，但又能保证系统和用户都获得想要的东西。

在电子商务、社交互动、生产力网站里，我们发现表单阻碍着用户需求和商业目标，表现为：

人们从电子商务网站购买需要的商品，而结算表单阻碍着交易双方。
人们加入社交网站与朋友聊天或分享内容，从增加用户基数与活跃度方面说，阻碍双方的是注册表单和联系表单。
人们希望基于互联网的生产力工具，创造高效协同工作，当公司要增加网站内容，增加了用户的时间，表单再次阻碍了两者。

Web表单设计在支付和注册环节，会起到至关重要的中介作用。2004年人机交互（Computer Human Interaction, CHI)大会有篇论文题目为“创造用户体验商业案例的过程”，作者是eBay用户体验和设计团队。他们搜集可用性数据、客户支持纪录、网站日志和网络惯例，提出表单重新设计的建议。当时这个项目对eBay注册表单产品线产生了积极的影响，并成为评估和资助设计项目的范本。

通过逐页画出整个流程，同时配合说明用户离开和最佳实践分析的网站点击数据，下面我们分别分析每种数据的意义：

可用性测试 目的在于可获得宝贵的定性与定量数据。

错误或问题的数量或位置；
错误或问题的严重程度；
完成率；
完成整个表单或部分表单的时间；
满意度评分；
任务主观评论。

实地测试 从人种学角度观察，人们在不同环境中，与表单的互动方式情况。

访问表单要求填写信息的来源：文档、软件和人等；
表单填写环境：吵闹的办公室和小监视器等；
任何说明表单完成或错误率的额外情境。

客户支持 通过客服或访谈等，了解用户使用表单时发现的问题，有利于分离和解决问题。

报告最多的问题；
解决报告问题的常见办法；
问题报告人的统计信息；
问题报告人所使用的操作系统及其浏览器设置。

网站追踪 表单可用追踪任意数量的有用量化指标。

完成率；
如果表单未完成，人们是在哪个位置放弃填写表单的；
人们访问表单的方式；
已使用哪些表单元素；
已输入哪些数据；
浏览器和操作系统信息。

眼动跟踪 记录用户如何理解表单的表现形式，可用于解释复杂的地方。

人们在表单上看到了什么；
眼球固定次数：解析表单所花的努力；
眼球固定时间长度：看每个元素所花费的时间。

Web惯例 调查表单设计问题的共同解决方案可提供宝贵见解。

设计问题的独特解决方案；
网上通用的模式。

观察用户如何完成表单，或者利用现成的网站分析软件监测网站日志，也可以得到大量有用的观测信息。

虽然很难设计出优秀的表单，很多时候都是“视情况而定”，但是通过考虑表单的设计因素，也就是以下我们所说的，找到适当解决办法的原则和模式，可以设计出不错的表单。闲话少叙，针对互联网表单设计，原则如下：

尽量减少痛苦－用户不在意之前是什么，更在意之后能得到什么，让过程尽量简洁快速。
说明填写完成路径－表单应该有清晰的提示或帮助用户，告诉他们如何能快速完成目标。
考虑情境－表单并非独立存在，它们都是更广泛情境（受众群体、应用、业务）的组成部分，这些情境决定如何使用表单。
确保一致沟通－表单是用户与公司沟通的中间人，多个团队参与对话，但最后表单只能传达一种一致的声音。

贾里德·斯普尔曾经有一个经典案例：修改按钮为网站年收入增加3亿美元。粗听起来好像是天方夜谭的事情，但是它确实是事实。良好的设计如何能为商业创造价值，这是设计团队一直在思考的问题。有一点是可以肯定的，我们用客观的数据与严谨的实验，去证明我们设计原则与设计模式，让它们的设计价值最大化，达到为商业创造价值的目标。

你会构建表单组织吗？

面对优秀表单设计，人们能够不费吹灰之力就能填完表单，这里有视觉与交互设计考虑因素对表单的影响，但更重要的因素是表单的内容及组织方式。以下是经过多年的设计实践我们能得到的一些原则：

应当花时间评估表单中的问题。应当提高警觉，去除一切不必要的问题。
表单所提问题（标签）应当尽量简洁。
如果人们会误解简洁标签，应当寻找使用自然语言的机会，澄清表单要求人们回答的问题。
表单所提问题来自多个不同人或部门，应当确保表单统一口径。
可以将表单内容组织成逻辑组，有助于浏览和完成填写。
如果可能，应当以对话形式构建表单。主题间的自然间断有助于组织表单。
如果表单可自然分成若干主题，一个网页可能就足够组织表单。
如果表单包含大量问题，同时有若干主题，可能需要多个网页来组织表单。
如果表单包含大量问题，而只和一个主题相关，一般需要一个较长网页来组织表单。
可以考虑在表单填完之后提出可选问题。可能会比在初始表单中就提出这些问题能获得更多答案。
可以考虑采用Web惯例调查发现特定类型网站如何组织表单。
应当采用最少的必要视觉信息来区分内容组。
英文网站首字母应当大写，使内容组更容易浏览。

Effortmark公司可用性顾问，卡罗琳·贾勒特说：“先考虑人，在考虑像素。”开始设计前要思考一个问题：用户真正关心什么？设计师在关注像素的同时可能忽视了人因因素-比如标签末端是否需要放置冒号等微妙细节。用户真的不关心冒号。其实用户真正关心的是问题的内容和为何要问这些问题。从了解用户开始，并了解你的公司搞清楚为什么表单要这么设计？是用户关心的关系点问题么？“保留，删减，延迟，解释”形成更好问题的四大策略，同时，多种视角的平衡用户需求与商业需求。

设计表单时要注意细节问题的处理，比如：表单的命名、起始页、清晰的浏览线、注意力分散最少、进程指示、Tab键跳转等。其实还有一点就是让用户知道完成表单的路径。

确保表单名称符合人们的期望，并简洁解释每个表单的用途。
如果表单需要时间或者查询信息才能填写，可以采用起始页来设定人们的期望。
由始至终采用清晰浏览线和有效视觉步伐来引导人们，确保说明清晰的填写完成路径。
对于关键任务表单，比如结算表单或者注册表单，应当去除会分散注意力的部分、任何导致人们放弃填写的链接或内容。
如果表单分为多个已知的有序网页，可以采用进程指示来传达范围、状态和位置等信息。
如果表单没有清晰的有序网页，不要采用进程指示，应当采用更笼统的进程指示，而不要设置错误期望。
设计表单布局时，应考虑使用Tab键的“跳转”体验。
采用“tabindex”HTML属性来控制表单的跳转顺序。

Oracle可达性主管，彼得·沃勒克说：“对许多残障用户而言，表单的设计可达性尤其重要。可达性的核心是可用性。例如，如果网页不能使用或者无法开始，可达性首先需要“超级设计”（Uber-design)。包括：超级减少痛苦、超级明示完成路径、超级考虑情镜、超级确保一致沟通。同时可以遵循W3C制定的互联网内容可达性指南（WCAG)和美国采购法508章的最佳可达性指南。

Feed enhanced by Better Feed from Ozh

30个简单的网页表单设计截图

seasun — Sun, 28 Nov 2010 09:39:23 +0000

网页表单设计是网页设计中要求非常严谨的一种设计。网页表单可能是最常被访问的一个区域，比如说注册登录表单等等。这里，我们收集了30个非常优秀的网页表单设计供大家参考。点击网页截图，可以进入到原始的网站查看设计。更多表单设计，可以参阅以下文章《25个网页表单设计》《来自时代杂志的35个非常漂亮的图表设计》。

Base Camp

Big Cartel

Feed enhanced by Better Feed from Ozh

35个购买页面设计欣赏

seasun — Sun, 28 Nov 2010 09:20:10 +0000

购物车页面，是网上购物过程中的一个部分。电子商务设计师面临的挑战，是创造一个有吸引力的，用户友好的界面，为用户提供一个愉快的购买体验。在这篇文章中，我们将有35个具有良好的设计和吸引力的购物车页面的网上商店。精心设计的购物车页面可有助于提高购买转换率。

Chop Shop

Ooga Zone

Nine West

Nike

REI

TOOBYDOO

Crate & Barrel

House Industries

JAQK Wine Cellars

Kansas City Steaks

Abercrombie & Fitch

Nestliving

Red is White

Mouse to Minx

Cacties

Urban Originals

Russell & MacKenna

Lane Bryant

Nort Berlin

The Sak

Acne

Lucky Brand Jeans

TasteBook

Brio

Anna Scholz

Steve & Co.

Mohawk Paper Store

Hard Graft

Nicholas Deakins

ShopRush

Dirty Coast

Victoria’s Secret

Ginger Pup Lane

Bridge55

Design by Humans

Feed enhanced by Better Feed from Ozh

25个网页表单设计

seasun — Sun, 28 Nov 2010 09:07:33 +0000

一个成熟的有组织的注册页面会转送大量的数据，在这样一个小的区域中，必须让用户迅速且轻松阅读。过于创造性的名称可能会伤害到用户的注册过程，用户会用过多的时间思考名称的含义。启动一个试错阶段，测试你的听众更容易被什么吸引。
这里有25个创新的注册网页，你可以通过它们扩展自己的设计。

1. Wufoo

2. Ballpark

3. Squarespace

4. Concept Share

5. The Resumator

6. Big Cartel

7. MindMeister Editions

8. Freckle

9. Nibble Tech

10. Form Spring

11. Zen

12. Strutta

13. Basecamp

14. DropSend

15. LightCMS

16. Linkpatch

17. Mailer Mailer

18. Livestream

19. eWedding

20. Media Temple

21. Litmus

22. Brightbox

23. Harvest

24. Web-o-matic

25. Crazy Egg

Feed enhanced by Better Feed from Ozh

30种大背景web设计范例

seasun — Sun, 14 Nov 2010 08:09:00 +0000

有一项web设计趋势已经流行一段时间了，但似乎势头依然不减，这便是使用大背景图像。这是一种增加设计吸引力简单有效的方法，用一张图片或插图就可奠定网站的整体色调。不过，这样做也有些孤注一掷，你创建的网站可能会显得太繁杂。因此，在背景与其他设计元素之间寻找平衡，就是一件十分重要的事情。为了给你一些启发，下面提供了30个高效运用此项技术的网站范例。

Stephan Siegrist

Noah Stokes – Es Bueno

大峡谷空中通道

Yes I am Precious

Because Studio

Sur La Piste – Carlos

Immersive Garden

Sayonara

Mavic

Derek Welsh

Airwalk

Piero Martinello

Studio Tilt

Giles Revell

BVD

Chicago L-Shirts

SabotagePKG

Mike Stocker摄影

Coal Headwear

Twelve Restaurant

Go To China

Festival Mundo

Paul Smith

Merus

Medis Bar

The Squad

Summer Love

Free Agent Depot

160over90

Turkish Cosmetics

关于作者

Gisele Muller新近在网上找到了新方向。她是一位热爱技术、设计、摄影和创意的人士。一位不变的极客崇拜者、技术迷和通信爱好者！现居位置：巴西阿雷格里港。推特：@gismullr

Feed enhanced by Better Feed from Ozh

用户界面设计中“状态”和“动作”的表达

seasun — Sun, 07 Nov 2010 15:47:32 +0000

一、问题引发思考

前阵子与同事探讨一个小需求时又遇到了按钮表示“动作”和表示“状态”间矛盾问题。想想这个问题多年前已经开始讨论了，所以在此整理一下思路，与大家共享。

「图1」

具体案例是这样的：如上图所示，在“启用”和“停用”搜索定制功能时，这个按钮到底是表示“状态”还是表示“动作”呢？简单的说，上图中 1表示当前是停用状态，还是表示点击后为停用操作呢？答案显然是不清晰的。

怎样能够清晰的表达两者的差异，减少用户的误解呢？我们首先要从“动作”、“状态”的定义和两者的关系入手。

二、什么是动作，什么是状态

动作是指具有一定动机和目的并指向一定对象的运动。
状态指人或事物表现出来的形态。
结合来讲，动作是促使人或事物改变某一状态的运动，而状态是动作造成的结果表现。因此两者经常是紧密关联的，有时甚至是互为条件的。

比如“操作收音机”这件事，我需要扭动旋钮或按键等“打开”的动作来打开收音机，当动作完成后收音机的状态是“打开的”。而“关闭”收音机这个动作的前提，是一个“打开的”状态的收音机。
”听起来好复杂阿！“很多人都会这么认为。为什么我们在生活中天天面对类似的事却很少有这样的感觉呢？

下面来看看生活中的例子我们或许就能理解了。

三、生活中的例子

1、电灯开关

「图2」

单控开关，我们最常见的开关之一，设计极其简单，按下一边是开，另一边是关。至于到底那边是开那边是关，没有几个人会特别关心。因为我尝试两次总会作对操作，几乎没有什么成本。人们不会感觉什么不爽。

当然，现在还有更好的设计。

「图2」

2、Ipod HOLD

「图3」

苹果的Ipod播放器的按键锁定功能“HOLD”。当开关拨动到“HOLD”字样一边时，左侧便会露出红色。而拨动到另一边是没有颜色的。巧妙的运用了色彩对人们心里特征的影响区分出了hold的状态。

3、显示器

「图4」

显示器电源开关，又一个“动作”和“状态”结合的应用。使用按钮突出的形态，和开关的图形表现来表示可执行的动作（这里按下去是用来开关的），使用背景灯的暗与亮来表示开关状态（灯亮表示现在是开的状态）。

类似的应用非常多，我们可以看到其中具有的特点是：1、可以触摸、按动（拨动）的按钮 2、色彩的区分 3、有的还有明显的位置差异以及标识。

四、软件以及网站中的例子

软件或网站界面显然不具备可触摸的特点，不过我们的设计师也尽量会模拟出类似现实中物品的可以操作的形状和质感。

「图5」

播放器常用的UI。点击中间的“播放”与“暂停”键即可切换操作。可以看出，这里忽略了状态的表现，我无法直观的看到现在是播放还是暂停的状态。原因很简单，就像开关电灯一样，影片的打开与关闭是可以直接感知到的，不需要专门的状态提示。

「图6」

再来看列表的视图切换。图上箭头所示“切换到大图”功能也是此类应用，忽略了状态的表现。因为“切换到大图”动作执行后，界面的状态会明显的改变（大图模式），不需要专门的状态来标识。

再看另一种情况

「图7」

音乐播放器中的随机播放。因为“随机”与“按顺序”播放并不容易直观察觉，因此状态需要明确标识。而动作本身由于并不是核心功能被弱化了，仅仅依赖界面功能区块划分来表示此处的可操作性。

「图8」

还是音乐播放器，这次不同的是线性的状态表示。音量的大小并不只是“开、关”两个状态那么简单，而是由小到大线性变化的。上面那个UI 通过左右两个喇叭的形状很好的表达了音量大小的两端，中间的圆钮既是动作的操纵杆又是音量大小的刻度标识。因为它和左侧很好的连接在一起形成水槽效果，填满部分的长短再一次反映了音量的大小，非常巧妙。而下面那个UI只在左侧放了音量大小标识，虽然不同因量大小时左侧图标也会相应改变，但相比之下初次使用会难理解很多。

「图9」

上面是某帐户管理的UI，将状态和操作（动作）明显的分两列标识，虽然显得有些啰唆，但也清楚的表达出了应有的含义。

最后我们来看一个手机界面的应用。

「图10」

仿照物理拨动开关的质感与色彩表达，很好的”动作“与”状态“结合的例子。这样的设计你还会犯错么？

五、小结

前面作了很多应用的举例，那么到底怎样才能做好”动作“与”状态“结合的设计呢？

1、分离状态与动作的表示（如图9）。最直接，产生歧义的可能最小，但可能会占用大量空间，以及造成信息冗余。
2、忽略状态，突出动作（如图6）。当状态无需标识也能直观识别时适用。
3、忽略动作，突出状态（如图7）。当动作操作已经被划分指定区域，可以预期其可操作性时适用。
4、具象与仿生（如图10）。当与现实物品建立感官联系时，人们的学习成本会大大降低。此类运用不好定义其适用范围，留给大家探讨吧。

Feed enhanced by Better Feed from Ozh

网页设计师文案创收指南

seasun — Sun, 07 Nov 2010 15:40:57 +0000

如果一个网站设计机构希望增加销售额，有一种相对容易且快捷的途径：出售文案服务。
文案出售给你的客户，让他们网站获得更好的销售和效果。此外，你的项目运作起来也将更加顺利和有效。读完本文，你就知道怎么既让客户高兴，同时也获得双倍的回报。你曾经有没或者考虑过向客户销售文案服务呢？欢迎在评论谈谈你的看法。
时间就是金钱

大多数的网站，时间更多的花费在文案而非设计。如果你没有参与文案撰稿，超过50％的网站工作将与你（团队）无关。这在短期内属于浪费收入，而在长期则是绝对的巨浪费。

对于网站设计，花在文案的时间比其他事情要多。博客文章，邮件新闻，新产品，所有为你团队获得收入的机会。

保持与客户的联系，这样他们更容易使用和宣传你的服务。而当你向客户提供文案时，正是你与客户加深关系的时候。

明智选择搭档

最富有创意的人也都会遭遇过不称职的合作搭档带来的梦魇：一个SEO骗子意图关键字优化和交换链接；客户花费了上个月来的内部文案不再适合于网络，甚至不适合人的消费习惯。当你的客户选择你的合作伙伴的时候，很可能是创造一个这样良好的机会——毁掉你的工作和声誉。

即使是你的网络主机故障导致客户网站离线，你的客户并不理解这一点。而当网站在谷歌上没有排名，你的客户也不会责怪SEO公司 – 他们会责怪你。当一个网页设计公司某个项目遇到不专业的合作伙伴，那创造良好的案例的机会便会白白浪费。

即使你没有参与撰写，客户还是会因为网站逊色的文案而会责备你。语法上的错误对任何人都不可能有好的吸引效果。当你选择合适的合作伙伴，增加成功的可能性。客户赚更多的钱，继续使用你的服务，你赚更多的钱，增加业务，同时积累了一个好案例。

从根本上提高效率

待客户给你准备网站的文字内容是工作进程的一大障碍。

客户没有及时给你发送文案即浪费了时间也可能因而错过项目截至日期。而如果你销售文案服务，不但提高效率还加快了网站部署的速度。

最佳结果
作为文案人员，我最大的挫折之一是为一个设计不良的网站写内容。我最喜欢的项目有一个共同点：跟优秀的团队合作。选择合适的文案，能保证跟你一起工作的是最好的团队。

有经验的文案甚至知道如何捕捉你的客户的语音语调从而完善客户的销售业务。给你的客户得以机会实现其全部的潜力。
选择一个文案搭档
作为一个网页设计机构，确保你选择的文案人员web方面的文化修养。至少，他们应该在以下几个方面的知识：

分离测试：如果你需要销售文案，你应该找一个了解分离测试和多元测试的知识的文案。经验丰富的文案在这方面很有见地，能给出一些有助于提高转换率的测试建议。

搜索引擎优化：即使是最菜的文案也会声称自己熟悉SEO知识，你必须客观于他们的言论而判断他们的能力。他们应该知道如何在文案中揉入关键词而没有对文案质量造成影响，他们应该对关键字选择，平衡竞争，关键词数量以及流量限制等十分老到，也可以问他们这样的问题：你会推荐301或302重定向方案么?

技术：可能是有的，但很少找到一个优秀的文案却对技术一无所知的人。一个称职的网站文案大都会知道了解HTML, 对客户的CMS系统感觉良好。

社交媒体：拥有一个Twitter或Facebook帐户说明不了什么，而是应该有这方面的成功营销的例子。请他们给你看看有没火爆的博客文章。对于文案销售，这不是必须的，但它是博客和社交媒体宣传的一个前提。

有很多很好的文案并不具备上述的技能。他们可能善于撰写小册子，但做网页文案并不适合。一旦你确定文案人员的最低要求，对他们进行评估，看看他们对于你和你客户是否是一个不错的选择。

两种工作模式
一旦你找到好的文案搭档，有两种途径可以销售你的文案服务来赚钱。

1.直接将文案服务销售给你的客户。标出价格，直接给客户开出文案服务部分的账单。在这个模式下，你既可以有很好的价格折扣，还保留客观的利润空间。

2. 中介。让你的文案搭档联系你的客户并推荐他们的服务。然后，你可以和你的文案搭档商定中介回扣。
销售一体化：销售翻倍的秘诀
如果你找到一个文案搭档，这也许是你增加额外收入和增加用户满意度的一种方式，但你要翻倍你的销售额的话你还需要从根本上改变你的销售流程。

总是询问：每次客户要询价的时候，询问一下他们在项目中是否要接受文案建议。联系现有的客户，询问他们是否需要一个建议文案以改善他们的网站内容。

推荐：你应该选择好文案搭档，因为他们会带来最大好处。因此，向你的客户解释一下，你的客户信任你网站方面的专业知识，所以一定要确保客户理解跟网站文案合作的好处。

搭档的提案：每次询问你的客户是否需要文案建议时，你应该把详细情况转给你的文案。然后，文案为你客户给出一个免费的提案。如果你客户确定需要，文案应该准备提案，并给到你。然后，你可以标上价格，把它发给客户。

优化成功：提案不仅包括开发中网站的文案。确保你文案搭档会提供连续的月度服务：博客，新闻，文章和社交媒体等。

Alan Martin是Cooper Murphy的网页文案，优秀的文案人员。Cooper Murphy的服务包括网站文案和文案年度报告。

来源:webdesignerdepot.com
编译：MazingTech

Feed enhanced by Better Feed from Ozh

培养用户的使用习惯

seasun — Mon, 25 Oct 2010 13:18:33 +0000

前几天听朋友讲述了他是怎么喜欢订阅上手机报的过程，让我对培养用户使用习惯有了一些新的认识。

在去年的某一天下午，这位朋友收到一条短信，短信的大致内容是：某服务商推出了一种新的服务—手机报，如果你愿意可以马上为你开通免费使用三个月。随后附着了一期的手机报，我朋友看了一下感觉还不错，心想反正是免费的可以订阅尝试一下。朋友开始使用手机报，过了一段时间的某一天朋友突然发现给他发手机报的号码改变了，这让他警觉了起来，怕自己被服务商偷偷给强制付费订阅了该服务，就打服务电话进行询问结果是号码的确变了，但是没问题还是可以继续免费阅读手机报，朋友这才放心下来。后来朋友已经习惯于每天早上起床在路上观看手机报而且会直接翻到第四块看体育信息。

三个月很快就到了，服务商发来消息，告诉他免费使用的时间马上就要结束了，询问他是否需要花钱订阅，朋友感觉这三个月使用的不错，每个月花几块钱也不贵，而且里面的信息他对比了一下和网上的搜狐、新浪等门户的新闻是一致的，就决定每个月订阅手机报。

很多时候，我们考虑的都是怎么设计出符合用户使用习惯的好的产品，怎样在现有的市场中杀出一条血路。我们一味的尊重用户已有的使用习惯，只会使我们的产品的开发之路越来越窄，进入到一片红海之中。我们完全可以在充分了解用户的潜在需求之后，开发出好的产品，培养出用户使用该新产品的使用习惯，这样就是我们的产品开发进入一片蓝海，取得商业上的胜利。

培养出的用户习惯有以下优势。
1.创造出新的产品需求市场，具有先发优势。
2.让用户向其它竞争对手的产品迁移制造了壁垒，
3.提高了品牌的美誉和忠诚度
4.培养出来的使用习惯，使产品的后续开发具有更好的用户体验

微软在充分了解用户的需求之后开发出windows系统，经过二十多年对用户使用习惯的培养，使得地球上的大多数人都已经习惯于使用windows 系统，习惯于windows系统的界面表现形式和它的交互方式。虽然苹果有易用性更好的操作系统，但是因为大多数人都已经习惯于使用windows系统，使得用户在从windows系统迁移到苹果的操作系统的时候产生巨大的困难，所以我们会常常发现许多苹果电脑里面装的是windows系统。具有讽刺意味的是，正是人们已经习惯于使用windows系统，微软开发出来的Vista系统因和以前的系统交互方式等差别太大，所以很多人并没有使用这个系统，这也从反面证明了培养出来的用户习惯是多么的强大和忠诚。

Feed enhanced by Better Feed from Ozh

理解网页中的视觉层次

seasun — Sun, 17 Oct 2010 13:06:32 +0000

视觉层次是高效率网页设计的重要原则之一。这篇文章将向大家介绍为什么设计一个具有视觉层次的网页是这么重要。在了解这些原则之后，你可以在自己的基础设计练习中运用到这些知识。

设计=交流

作为核心：设计整体就是视觉交流。作为一个高效率的设计师，你必须有这个能力清楚地将你的设计思想传达出来。人是易变的，如果你给了他们巨大的信息量，这有相当高的可能性100个人中99人都会厌倦去看它。为什么呢？因为人们都是天性的视觉欣赏者，而不是数据处理者。

要了解这个，知道一些人们如何看待事物的方法是很重要的。人们并不等于所谓的“平等机会主义者”。他们不仅仅是收集视觉信息和处理数据，于此同时，大脑还会整理他们看到的这些东西的“视觉关系”。

让我们看看下面两个普通的圆：

很大可能上，你并不把它们仅当做“两个圆”看待，而是将他们看做“一个黑色的圆和一个比较小的红色的圆”。

原因是非常简单的：当呈现出某些像这两个圆一样简单的东西的时候，人们往往不仅仅看到两个普通的圆，他们将会搜寻这两个圆之间的不同点。某个圆或许更大，或者更小，或者有颜色，或者其他的不同点。这些不同点给予我们区别物体的信息并且给予图形特定的意义。

让我们来看一张更为复杂的图片：

增加的这些复杂成分强迫我们去分析他们之间的关系。相同和不同点变成了我们思考这些问题的思维框架。比例向我们传递了“一个物体相对其他来说离我们更近，或者是，这个物体起到一个相对其他物体而言的支配地位”；颜色的不同告诉我们每一个物体可能有自己独特的特点，这个特点将其与其他物体区分开来。这样一个简单的图片用最基本的方法却向我们传达了如此多的信息。

…Understanding that people will see our designs in terms of relationships is crucial to becoming a more effective designer.

让我们回过头来看网页设计；因为网页设计是有关视觉信息交流，明白“用户们将会自己组织设计内容的关系”成为我们高效设计的核心。一次丢出大量信息的方式看上去已经没意思了，作为网页设计师，我们任务是将这些没有经过处理的信息划分成一块一块切题的美味以供用户们更方便的阅读。更为重要的，我们需要明白：信息的高效交流是网页背后的关键。

初看视觉层次有成千上百的解释说明人们为什么会根据关系来看待问题；如果你要追溯到人类学上去讨论它的话，你可能做出结论：远古时代狩猎为生的人们在思维上引导现在的人类去关注这些事物之间的联系，这是一种生存技巧。

可能一个更便于理解的解释，这就是我们大脑整理信息的方式：将相似的可视元素整理成一个组，将他们放进具有一定意义的类型当中就像人类固有的吃喝等习性一样。换句话说，事实上大脑里的信息都是按照某种层次整理出来的，这样交流起来比没有整理信息要有效率的多。

看看下面的两张图片：

在上面的例子中，我们可以看到最基本的文本层次运用。两张图片当中用到的例子内容上没有任何区别，但是它是如何戏剧化地让人们改变了理解方式并消化这些内容的呢？当我们以文字排版为例讨论视觉层次的时，这就是我们要分析的问题。文字组织的接近性、篇幅比例和相似程度使读者将下级内容自然地归入标题和分段。层次给予标题更多的意义，不仅仅是信息，而且也使内容更容易被接受。

好，这只是一个最基本的例子对吧。让我们更深入的讨论其他的例子，让大家明白如何运用这些最基本的守则，成为一个老练的设计师。

层次构建工具箱

视觉层次非常重要，但是如何准确的创建层次效果？我们寻找的“工具”正如木匠的工具箱——锤子、钉子、锯子等等——你如何运用它们才是最重要的。

1、大小

较大的物体具有更大的吸引力。将尺寸的控制作为制造层次的工具是一个非常高效的方法去引导读者的视线。在设计中将尺寸和重要性结合起来是非常关键的。最大的元素大部分情况都具有最大的重要性，与此同时，最小的元素应该是最不重要的。

2、颜色

颜色是一个很有意思的工具，他可以在组织上和个性两方面起到作用。醒目、对比强烈的颜色在特殊的元素中将会引起更大的关注（例如按钮、错误信息或者超链接）。当作为一个体现个性的工具时，颜色可以延伸到体现更精练的层次感上；用到豪华、舒适的颜色将给页面带来感情上的吸引力。颜色可以影响网页的每一个角落，从商标到形象。色彩应用在视觉层次设计中可以做到信息分类的效果，就像下面的例子：

3、对比

对比体现出相对的重要性。字体大小上戏剧性的变化将传递出某个消息的重要性或者需要某些特别关注。从较亮的背景转换到一个较暗的背景将较快的区分核心内容与页脚内容。

4、对齐

对齐体现出元素们的组织。甚至可以简单到仅仅用“主栏”和“侧栏”区分。但对齐也能够在视觉层次上起到更多更复杂的作用。考虑，举个例子，放在页面左上角的内容的力量。因为用户多半将那个地方的信息与简介、账号、购物车等等相联系。放在那个地方的东西被赋予了某种“官方”性。对齐如果用特定的方式也会激起用户的兴趣，例如下面的例子：

5、反复

重复体现了元素之间的关联性；如果所有段落的文字都是灰色的，当一个用户看到一块新的灰色文字时，他也许认为这是其中的另一段；当同一个用户遇到一个蓝色的链接或者一个黑色的标题时，他可以放心的将它理解成段落以外的东西。

6、亲密性

亲密性将元素彼此分开并且创建下级的层次。在一个页面中可能会看到很多被空白分隔开的小部件；在这些部件中又会有新的层次，标题、副标题和内容。亲密性是最快的方式将关系紧密的内容组织起来。在下面的例子中，很容易通过亲密性将主要内容与其他内容区分开来。

7、紧密与留白

密集的元素给人一种“重”和杂乱的感觉；元素之间距离太大，他们将会失去彼此之间的联系。当一个网页被设计的恰到好处时，眼睛将会准确的将各个元素组织好。

Feed enhanced by Better Feed from Ozh

CodeRun: 基于Web的IDE开发工具

seasun — Fri, 15 Oct 2010 16:05:28 +0000

CodeRun 是一个跨平台的集成开发环境，它立足于云计算的设计思路，方便开发者在浏览器端便可以轻松开发、调试和部署网络应用程序。

CodeRun 是一个基于JavaScript语言开发的跨平台的集成开发环境，它立足于云计算的设计思路，方便开发者在浏览器端便可以轻松开发、调试和部署网络应用程序。本身作为一款APP产品，CodeRun 融入了分享机制，开发者可以有选择的上传项目代码，使用云技术来协同同事完成项目工作。目前，CodeRun 主要支持一些Web开发语言，包括C#/.NET (3.5), PHP (5.1), JavaScript, HTML 以及 CSS等，其中C#项目包括ASP.NET, WCF, Silverlight 和 WPF, MVC等项目，JavaScript脚本项目支持目前流行的JQuery, ExtJS, YUI等框架，其中数据库支持SQL Server 2005 和 Amazon SimpleDB。最后，更尤为值得一提的是，CodeRun 是开源程序。

互联网给软件行业带来了极其深远的影响，我们关注了太多的逐步网络化的传统软件产品和项目，包括在线的Word、Photoshop、 Powerpoint等等等等；但唯独缺少一个能够能够以SaaS理念去支撑和生产这些在线产品的底层应用，即技术人员口中所谓的集成开发环境（IDE）。现在 CodeRun 的横空出世，虽然产品本身并不成熟，概念性要高于其实用性；但是，他们开创了一个在我眼中，也许是互联网软件行业的新纪元。我记得我在两年前的时候就曾经在博客中大胆的预测，主导软件变革的将会是立足云计算、提供互联网软件开发和运行环境的IDE供，新商业模式的诞生一定程度上取决于生产工具的变革！

Feed enhanced by Better Feed from Ozh

12 个便于web设计及开发的在线工具

seasun — Tue, 12 Oct 2010 18:33:57 +0000

请不要低估这些小工具，他们极其的方便并且能节省很多的时间和工作，下面就是这些在线工具的列表，挑几款来试试吧。

我还是比较喜欢Ajax Load和Web 20 Badges Generator的，你们呢？

Favico

一个图标制作工具，很是方便。

SpiffyBox

一个纯css圆角解决方案，不需要任何js和图片。这个在线工具可以选择前景色背景色，宽和高等。css3正在被越来越多的浏览器所支持，所以你可以坚持使用这种解决方法。

Ajax Load

该网站提供近50种 loading、进度条可选样式，可自定义背景色、前景色和透明背景，操作简单，在页面下方就可预览效果，最终可生成.gif格式的图标。本博客在加载过程中的loading图标就是在该网站上直接生成的。做网站前端设计和朋友可以大胆地尝试一下这项服务。

Web 20 Badges Generator

看到一些博客上敲着一个web2.0的徽章是不是很羡慕？Web 2.0 Badges 可惜很方便的为你实现这个梦想。虽然Web 2.0 Badges提供的款式不一定是最多的，但我觉得他出生正统，要挂就挂个正宗的徽章！

Buttonator

如果你正在寻找一个按钮（不是浏览器默认那种），并且如果你不是非常挑剔的话，这里有很多的按钮共您选择，你可以使用这个工具在线制作一个按钮，当然，其中还是有很多漂亮的样式。

Load Info

又是一个Ajax loading 图标在线生成工具，这里有各种各样的样式供您选择。

Stripe Generator

一个 web2.0条纹制作工具，只需简单的个性化设置，就能作出花样百出的背景条纹。

Bg Patterns

一个背景图案在线制作工具，用法很简单，效果也很不错。

Adobe Kuler

一个在线创建配色方案的东西，是Adobe推出的一个设计师的配色参考站点，如今推出了Air桌面版。每天会更新最新的配色方案，可以搜索最受好评的~最新的~最流行的等等配色。右键点击颜色可以选择复制主题颜色值和单个的颜色值，左键可以把颜色框拖出界面。很漂亮又实用的东东。

CSS Typeset

CSSTypeSet是一款非常适合对css不熟悉的朋友的在线工具，使用这个工具可以轻松地写出具备字体、文本颜色大小位置、字符间距、单词间距等属性的css样式。

Blind Text Generator

多功能的在线文本编辑工具，帮助设计者进行排版和打印。

Reflection Maker

这里不需要你有任何的图片处理知识，就可以轻松的制作出倒影效果，支持上传上限为200KB的图片和直接加载网络图片，可以对倒影背景和倒影大小进行配置。对于要求不太高的图片制作来说，这个在线工具足以应付大部分情况。

Feed enhanced by Better Feed from Ozh

15 个用户体验设计赏析

seasun — Tue, 12 Oct 2010 18:26:53 +0000

用户界面和用户体验（UI/UX）是任何产品成败的关键，尤其是Web，Web 是一种公开的，可以被任何人随时随地访问的特殊产品，用户的体验几乎意味着一切，虽然内容更重要，但内容可以替代，体验却是独一无二的，本文分析了15个不同的 UI/UX 案例，优秀的用户体验给我们带来的启发是无价的。

内容滚动中的运动视差效果

Parallax scrolling是让多层背景以不同的速度移动，形成运动视差 3D 效果，虽然纯属视觉效果，但在内容滚动时形成的视觉体验仍然非常出色。Charlie Gentle’s portfolio 网站就是该效果的绝佳展示，点击左右导航按钮，除了滚动进入不同内容区域之外，上方的多层背景图以不同速度移动而形成的3D运动视差效果非常漂亮。

iPhone 的下滑式刷新

iPhone 的多数社会化网络应用都包含数据刷新功能，有的是晃一晃机器，有的是按某个按钮，在我看来，最好的方法是下滑式刷新。包括 Gowalla, Foursquare 以及 Tweetie 等应用都默认使用该方法，你在用手指翻动列表的时候，如果想刷新一下数据，你的手指还没离开那个区域，如果使用按钮，手指必须离开当前的位置，导致操作上的不连贯，而下滑式刷新，手指继续留在原来操作的位置，只是改变一下动作。

我们从这里可以学习到的东西是，经常检查你的 UI，看看是不是存在让用户注意力转移的操作。

随时随地的提示界面

一些深受欢迎的 Mac 程序经常是在后台默默运行，到了需要用户介入的时候弹出界面，完成后又默默消失，象 The Hit List, 随时随地会将需要通知的消息显示出来，看上去，象操作系统本身的功能。

Convertbot 的圆盘式菜单

Convertbot 是为数不多的事实上并不好用但用起来又妙趣横生的 UI 设计之一。这个 iPhone 程序用来进行单位转换，iPhone 的应用商店这样的程序数不胜数，但都没有这个这么有趣。它设计了一个圆盘式操作界面，很形象，很漂亮，让人有时不时想拿出来用一下的冲动，这个案例告诉我们，有时候，中看也很重要。

SlideDeck 的手风琴式导航

Web 上，基于 jquery 的内容滚动面板非常多，SlideDeck 是其中的佼佼者。使用独特的手风琴式界面显示内容，可以看做是 Outlook 风格导航面板的水平版，但视觉效果和体验更出众。

Strongbad 的随机回信

Strongbad 是 Homestarrunner 推出的经久不衰的网络动画中的卡通形象，每周，Strongbad 会给观众回复很搞笑的邮件，这些邮件慢慢越积越多，最近，站点开发方推出一个随机邮件浏览功能，点一下那个随机按钮，就像抽奖机那样随机选中一封过去的邮件显示。这个随机显示的过十分生动，让人忍不住一点再点。这个 UI 案例告诉我们，有时候，你在用户界面上的一点微小改动，有可能带来意想不到的效果。

Made By Tinder 的主题色选择

这是一个很神秘的小站点，神秘到我们不知道它到底是做什么的。但这个网站的顶部，有几个小色块，点击后，整个站点就按色块上的色调重新配色，虽然很简单，但用户体验实在太妙了。

Pixelmator

Pixelmator 是一个很出色的图像编辑工具，虽然远不如 Photoshop 强大，但包含很多创新功能。它的用户界面中有一个很有趣的功能，你在为图像的某个位置设置效果的时候，设置点和设置界面之间会显示一条很自然的连线，移动设置点的时候，连线也跟着改变，虽然这条连线并没有多少实际意义，但给用户带来一种操作上的暗示，也很有趣味。

Riot Industries 的导航体验

这个站点的导航很有特色，不仅流畅，而且设计出众，鼠标在导航条目上盘旋的时候，导航条目从左边的容器中微微探出，点击后，以渐变的方式，逐渐显示当前内容，这一切并没有使用任何 Flash 技术。

Web 上的拖放操作

在我看来，任何应用都应该支持拖放操作，当然 Web 有它的局限性，不过，近年来，Web 上的拖放操作已经很常见了。在上面的站点，你可以直接将喜欢的程序拖放到下载按钮处，直接下载。IconDock 的购物车也支持列斯的操作。（Wufoo 和 Polldaddy 的拖放式表单设计 UI 在我看来是 Web 拖放界面的最佳实现 – 译者）

在线 Photoshop 的照片堆叠界面

这是另一个没有实际意义，但很吸引人的界面设计，Adobe 的在线 Photoshop 在加载的时候，会显示一堆照片，你可以把他们抓起来乱扔，让它们相互碰撞，其物理效果十分出色，非常吸引人。

随鼠而动

同样展示运动视差效果，同时，随着鼠标的移动，画面的工作区也随着移动。这个站点也实现了类似的效果。（感觉这种体验并不好 – 译者）

双滚动面板

这又是一个基于 jQuery 的，非常出色的内容滚动面板设计。图片垂直滚动，而解释文字同步水平滚动，视觉效果和体验都十分出众。

基于物理动力的滚动

我第一次使用 iPhone 的时候，对它的基于物理动力的交互 UI 印象深刻，在 Safari 上用手指翻动页面的时候，页面并不是按线性速度滚动，而是象现实物理世界中的物体那样，拥有曲线速度，先是快速滚动，然后慢慢慢下来。

至简的界面

漂亮而复杂的 UI 让人喜欢，有时候，简洁的界面更吸引人。Mac 的 WriteRoom 是一个非常强大的文本编辑器，这些强大的功能隐藏在至简的界面下。

Feed enhanced by Better Feed from Ozh

50 个Web设计师超便利的工具

seasun — Tue, 12 Oct 2010 18:22:56 +0000

作为一个 Web 设计师并不容易，不仅考虑设计与架构，还要时刻注意各种小细节，设计师的工作被各种各样的问题包围，你需要一套超级便利的工具帮你解决各种消耗时间和精力的问题。我想网在这里给您介绍了50个非常强大的工具，包括正则表达式、在线图片处理、截图工具…… 你会发现，其中的一些工具会让你感到很是惊奇。