好好活=有意义 有意义=好好活

(图1)

(图2)

同样是单选，两者有何不同呢？

第一种(图1)，我们称之为下拉(框)式单选；
优点在于节省了空间，特别是当选项数量超过一定数量时，或者在排版要求限制的情况下，我们经常可以看到；
步骤：2步完成(点开下拉框，选择选项)

第二种(图2)，我们称之为列/枚举式单选；
优点在于把所有的选项都直接地罗列出来，让客户可以一目了然；
步骤：1步完成(直接点击选项)

如何在WEB上选用适合的单选形式，是有很多学问的： 阅读全文 »

首先说一下，截止今天为止，生成图表的控件满街都是，Open Flash Chart, FusionCharts, Pchart…，他们各有千秋。

但是功能最强大 ，目前为止还属gChart(Google Chart Tools/Image Chart)，gChart是一款基于数据的图表类，生成的图片是png格式的，一般通过get方式提交数据生成图片，当然，如果数据量很大的话，也可以通过post方式提交。

废话不多，我们先从最简单的饼图开始。

http://chart.apis.google.com/chart?cht=p3&chs=400×180&chd=t:9,19,46,26&chco=FFFF00,DD0000&chdl=9%%20Not%20involved|19%%20Specifying|46%%20Recommending%20/%20Influencing|26%%20Decision-making%20/%20Authorizing

2009 Visitors’ role in decision-making

为了生成一个图表，我们需要提交一些必要的参数给http://chart.apis.google.com/chart：

1. cht=p3，设置饼图的样式，p3为3D型；
   其他类型还有cht=p(普通型)；cht=pc(Example)
2. chs=400×180，设置饼图的大小，以像素为单位，400宽，180高；
3. chd=t:9,19,46,26，设置数据比(注：此处数据必须小于100，如果大于100，则默认为100)；
4. chco=FFFF00,DD0000，设置饼图的颜色(16进制)，格式：起始色,结尾色，中间颜色的过渡，我就偷懒了，因为Google会自动生成；
   当然您也可以指定颜色，这么使用chco=FF0000|00FF00|0000FF|00FFFF
5. chdl=，设置右边的说明文字，用“|”符号隔开(注：中文文字一定要经过url编码)
6. 更多开发指南，请浏览Google Chart Tools / Image Charts (aka Chart API)

先看Example页面(我和我的死党们的坐标)
还有一个特别制作的经维度坐标查询页面
严重声明：谢绝跨省追捕和人肉搜索

下面我来分解：

1. 首先，注册一个API key，这非常重要，否则下面都是扯谈；
2. 加载JS文件：http://partner.googleadservices.com/gampad/google_service.js
   加载你注册的API key：
   http://maps.google.com/maps?file=api&v=2&sensor=false&key=yourAPIkey
3. 在指定的容器中加载Google地图：
   var map = new GMap2(document.getElementById(”ElementID“)); //这里我使用的是第二版的地图，所以用GMap2，第一个版本已被淘汰，第三个版还在Beta测试中
4. 设定地图中心坐标，地图缩放级别：
   map.setCenter(new GLatLng(dimensionality, longitude), size);
   //dimensionality：维度值
   //longitude：经度值
   //size：地图缩放级，随数值增大而放大
5. 设置地图的属性：
   map.enableScrollWheelZoom(); //设置滑轮滚动缩放
   map.addControl(new GLargeMapControl()); //给地图添加控制按钮
   更多属性设置，请参阅开发人员指南
6. 当然，还能为地图添加标记：
   GMarker(point, markerOptions);
7. 还能给地图添加事件监听器：
   GEvent.addListener(object, “action“, function() { … });
8. 补充一下，Google地图的坐标是用经度和维度组成的数组，如何查询经度和维度，点击此处(从我家开始吧)；
9. 如果出现文字问题，请把Javascript编码强制改为utf-8：
   <script …  type=”text/javascript” charset=”utf-8″>
10. 最让我头痛的是此版的Google地图API没有错误控制台，有时候经常遇到错误却找不到原因；
11. Google地图API是无比强大啊，还包括了：两点间测距，绘制图形和路线，地图标记个性化等众多很实用的功能；
    各位大侠，哥的砖头已经抛出去了，你们有玉的引点过来吧。

前段时间在使用YSlow对网页速度进行检测的时候，接触了Gzip；
在对CSS，JS，HTML代码做了优化后，通过Gzip压缩，还可以大大提高网页的浏览速度，降低服务器带宽使用。

以下是我做的两个测试页面：
经过Gzip压缩的页面：Gzipped (压缩率为9-最高)
未经Gzip压缩的页面：UnGzipped (无压缩)

用Firebug检测网络传输数据，截图如下：

阅读全文 »

作为展览会的主办方，对于展商观众数据的深度挖掘和分析，是一项非常重要的工作，
这不仅仅是对上一届的展会工作的总结，更是下届展会工作筹办的参考和依据。

很多展会项目，都会通过一种观众调研表的形式，来收集展商和观众数据；
传统的调研表，通常都会包含这几个大项：
个人信息(联系方式)；
工作信息(职位/部门)；
公司的基本信息(经营范围/市场)；
感兴趣的产品；
您对展会XX是否满意(很满意/满意/一般/有待提高/不满意)

这种形式的调研表已经成为了展览会数据收集的普遍形式，这样一种标准形式的形成，作为主办方我非常高兴；
但是当我把自己作为一个观众或是展商去填写这些表格的时候，我却感到非常的不愉快；
因为：我是来参加展会的，并不是来提交数据的；
阅读全文 »

泡妞有很多原则，活了快三十年了，虽然一直在坚持着这些原则，但还未曾泡到过妞；

然而，把这泡妞原则放在展会工作中去，却非常地有效，这里我总结了十大原则：领袖原则；耐心原则；风度和气质原则；上床至上原则，不上床原则；关系提升原则；负责原则和不负责原则；不拒绝原则(国际惯例，排名不分前后)，下面和大家分享一下：

领袖原则：
女人会被比她强的男人所吸引，比她的强的男人能给她安全感，给她幸福生活的能力；
做展览会就是要做一个行业的领袖，而行业领袖是靠高效业务能力和强大的影响力体现出来的，一个成功的行业展会，能给整个行业带来持续的活力，给展商和观众以信心，为整个行业的发展承担一定的责任，搭建一个开放和公平的竞争舞台；

耐心原则：
最终打动女人的，往往不是相貌，也不是金钱，而是耐心；
主办方无论是在对待展商还是观众，协会还是媒体，都需要耐心，当然我这里指的是一种发自肺腑的耐心；
无数次的电访，无数次的DM推广，无数次的电子邮件或者传真，即使没有一次应答，这些工作的也不是白做的，机会是给那些有准备而且有耐心主办方的。
阅读全文 »

首先让我们来看一个表单的提交按钮(图)

来源: Luke Wroblewski写的“Primary & Secondary Actions in Web Forms”这篇文章。
第三个表单提交按钮被设计者采纳。

我们把【提交】，【保存】，【下一步】……等这样的按钮点击认为是用户的潜在行为；
而【取消】，【返回】，【放弃】……这样的按钮，认为是用户的次要行为；

所以，通过对Web表单按钮的设计，让这样的用户潜在行为按钮，更加突出；同时，削弱用户次要行为按钮的现实效果，有效的给予客户操作上的引导。 阅读全文 »

延迟加载，最早是在淘宝购物时候发现的，宝贝页面的内容通常都超过3个屏幕的高度；
而卖家也往往把交易方式，汇款方式，注意事项等，都做成图片形式，放在页面中；
所以，打开一个宝贝页面，需要Loading的图片平均都会>200K；

为了减轻服务器压力，为了提高页面打开速度，提升用户体验，淘宝网就用了这么一种名叫“图片延迟加载“的技术；

实现这一个技术很简单，只需要加载一个JS文件即可；

大家可以直接采用淘宝的延迟加载技术：
http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js

调用方法也是很简单的：
<script type=”text/javascript”>KISSY.ImageLazyload();</script>

至于高级配置，大家可以看这里;

如果您是Jquery，Prototype等这些JS框架的粉丝，他们都有定制的LazyLoad Plugin提供；

LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载，对数据同样可以，Google Reader和Bing图片搜索就把LazyLoad技术运用的淋漓尽致；

缺陷：在对LazyLoad琢磨了一个小时候，也发觉了一些当前延迟加载技术的问题；
1，与Ajax技术的冲突；
2，图片的延迟加载，遇到高度特别高的图片，会出现停止加载的问题；
3，写代码不规范的童鞋要注意了，不管由于什么原因，如果您的页面中，img标签的height属性未定义，那么我建议您最好不要使用ImageLazyLoad；

这些地方在未来的使用中还需注意。

最近在做一个url缩写的服务，当然这个功能只是内部使用，并不对外开放；

研究用正则对页面的URL进行抓取后再对URL进行处理，但发觉无论多么NB的正则，都无法很好的把整个页面的URL给抓取下来；
主要存在以下几个问题：
1，处理特殊符号不当，如单引号，双引号，尖括号，”@”"&”符号；
2，处理https，ftp，带有端口号的url(http://www.site.com:8000)等特殊的url遇到错误；
3，会把诸如img标签，甚至background-image的文件也当成url给抓取下来；
4，越完美的抓取正则，执行效率就越让人崩溃，加上网络延迟，抓取门户网站首页链接，让我有种想砸键盘的冲动；

于是只得另觅它法；
在发文前，已找到了一个相对比较完美的方法，那就是用PHP自带的Dom Extension；
Dom Extension功能在PHP5.0以上是自带且默认开启的，所以不用做任何配置；

下面是实现代码(绿色)，很简单，而且执行效率很高，至于容错性嘛，至今我未发现有错误；
阅读全文 »

User Experience Optimization，即用户体验优化；下面我先用几个例子说明下UEO例子；例1：在线手机充值
传统在线手机充值页面(图1)

优化后的在线手机充值页面(图2)

通过手机号码，系统能识别出用户的所在地和运营商，何苦还要让用户多做两道选择题呢，况且“选择题做错，零分”(蜗居-宋思明)。 阅读全文 »

我相信，看完2012电影朋友肯定对那个俄罗斯大佬声控启动宾利的场景记忆犹新吧。
当我看到这一幕的时候，我不仅想到了最近很火的一个词语“框”。

当下互联网,“框”的应用无疑是最流行的，即使我这篇Blog，也是在文本输入“框”内打出来的；
但是，当我看完2012后，我突然觉得，“框”——这个互联网输入接口，将会逐渐的消失。

同事Penny最近发现了，手机谷歌已经启动了语音输入查询，毕竟，在手机上输入一长串的文字，是件很麻烦的事，于是，Google先行做了语音搜索，只需对着手机说：奥巴马，于是，与奥巴马相关的内容出来了(可惜的是，此功能貌似只有iPhone有，我的Windows Mobile下还没找到能用的软件，另外，语音识别技术也有待提高，目前识别的错误率是很高很高滴。)

Engine Start，宾利启动了；
不仅仅是Google和宾利，Windows Vista早已发布了指纹登陆系统，在IBM ThinkPad T61开机后，你会发觉，传统的用户名和密码输入“框”旁还带了个指纹登陆选项了。

相信不久的将来，“框”会越来越少，互联网科技不应被“条条框框”所束缚；

我甚至更期待不久的将来，将会出现本地方言查询系统，
打开Google首页，
我对着屏幕说：“乃伊组特.”，
Google回答：“乃萨宁组特?”，
我继续输说：“乃百度组特!”，
Google回答是什么呢？

兄弟新开公司，帮忙设计个Logo，拖到周末，周五晚上阅览了无数的Logos后，才有了想法;

废话不多，两个方案，放图：

简单说明下，公司名称是：上海毅泽通讯科技有限公司，
第一幅图的创意来源于Cisco的Logo；
第二幅图中立体图片直接拿了互联网上一家企业的VI，一个Y和Z字母的结合，很配，右边加上的一个类似Wifi信号的标志；
缺点是第二幅图片很难加配合渐变的颜色效果，并且文字找不到一个高度和长度包括字间距都和图案相配的字体；

我还是比较喜欢第一个Logo，稍候把选中的Logo做一套企业的VI。

问题是这样的：一个人买了10瓶汽水，每3个空瓶可以换1瓶汽水，那么他可以换得几瓶汽水？

有人说是3瓶，有人说是4瓶，有人说是5瓶，到底是几瓶呢？

如果用传统的思维方式来思考 ，是这样的：

1. 最初是10个空瓶；(10空)
2. 10个空瓶，就可以换3瓶汽水，多余1个空瓶；(3水+1空)
3. 喝完这3瓶汽水，总共4个空瓶； (4空)
4. 在次换得1瓶汽水；(1水+1空)
5. 喝完这瓶汽水；(2空)
6. 借1个空瓶来；(3空-1空)
7. 换1瓶汽水；（1水-1空)
8. 喝完，把瓶子还了；（1空-1空=0）

整个过程就是这样，最多能换5瓶水。问题在于第6步，就是借1个空瓶，很多人会想不到这一步。

下面让我们用数学方法来算以下这题，或许更简单：
设1个空瓶价格为x；
1瓶水(不含瓶)价格为y；
那么1瓶水(含瓶子)价格就是x+y。

列出方程式：
3x=y+x
(这步是关键：3x=y+x，而不是3x=y，为什么，因为3个空瓶能=1瓶水+1个空瓶)
那么我可以得到：
2x=y
开始我们有10个空瓶，也就是10x，10x=5y，也就是说，可以换到5瓶水。
阅读全文 »

上一篇我们研究了JPG图片的保存艺术，这期我们再来看看网络上另一种被广泛应用的图片格式：GIF。

有人要问这两种图片格式的区别，我一时也说不清，这里有比较官方的解释：GIF，JPG。下面我来用我自己的方法解释JPG和GIF的区别。

我们从一张PLMM的照片开始：

(图1-JPG)

(图2-GIF) 阅读全文 »

从两幅相同却又不同的图片开始：

(图1)

(图2)

图1和图2，用肉眼是看不出区别的。
有人说这不是大家来找茬，这是我在给自己找茬。

但是我们若是深入的去研究，就发觉了，原来在图片质量几乎没有变化的前提下，图1的文件大小是17.5 KB (18,022 bytes)，而图2的文件大小是76.1 KB (77,988 bytes)。

阅读全文 »

本期有些特别，在这里让大家了解一下各种邮件客户端的市场占有率。
以下两份报告仅供参考！

第一份报告是出自国外的,2009年3月的报告

阅读全文 »

本期开始，我会更多的把讨论重点放在客户体验部分，来商业电子邮件制作规范提出一点建议。

为每一封邮件制作一个阅读目录，并放置于顶部。

一封内容较长的邮件(2个显示屏高度以上)，页底内容的被浏览的概率会比顶部低一半。
(根据页面底部内容链接被点击的次数往往只有顶部内容链接的10%~50%)。
下图为一封邮件实例，邮件篇幅高度大约在3个Page，总共有包含28个链接。
通过链接的点击数据，我们很容易发现，越接近页面顶部的链接，越是容易被客户点击。
(Link1~Link28，数字越小，越靠近邮件头)

我们制作邮件时，喜欢把我们所认为的，可能最吸引客户眼球的内容放在靠前，但我们无权去揣测客户的阅读喜好，这么做，往往使得那些能吸引边缘客户的内容信息反而被忽略。
阅读全文 »

本篇文章综合了网上的搜集资料以及自己的经验，从技术角度出发，对不同邮件接收客户端进行系统分析。

1.桌面邮件客户端软件

这里我首先排除了Notes邮件客户端，这个属于IBM的，高端了不能再高端的邮件客户端，视乎只适合发送Plain Text邮件，其安全性绝对是最强的，当然，这是在牺牲了所有兼容性后的，在Coca-cola等N百强企业中我们能常见。

AOL的桌面软件也被我排除了，在亚洲地区和欧洲地区，几乎没人用，而美洲的用户也不多，所以这次讨论我也把Aol桌面邮件客户端排除了在外。

接下来的范围就包含了如下软件：
Outlook 2003/97(Windows平台-Office 2003/97) 【国内最常用】
Outlook 2007(Windows平台-Office 2007)
Windows Mail(Windows平台-自带)
Mac Mail(Mac平台-自带)
Entourage 2004(Mac平台-Office 2004)
Entourage 2008(Mac平台-Office 2008)
Thunder Bird 2(Windows/Mac/Linux平台-Mozilla)【兼容性最强,Linux平台必备】
阅读全文 »

最近一直被验证码的那点破事所困扰：
对验证码产生的字符串随机定义颜色；

给验证码图片创建无序的杂纹效果；

但是有一种注册机，这两种方法视乎都对Ta不管用，Ta能绕过验证码的检验，提交一些无用的垃圾信息；这困扰了我好久。
阅读全文 »

上一篇，从营销型邮件和确认型邮件开始，对HTML邮件的制作中，在技术方面需要注意的问题做了简单的叙述。
在内容上，上一篇更适合技术人员看，而在本篇中，讨论的内容，略微偏向于市场和营销人员。

1.统一的风格的页眉(页脚)

两条深蓝色的荧幕边是如此简单，让我们立刻就能想到一个全球知名的品牌IBM。
EDM是一项长期营销的过程，无论是大企业，还是小公司，在EDM营销过程中使用统一的页眉风格，能更好在客户的潜意识中树立起自己的品牌形象，加深客户对企业和品牌的印象，提高目标客户的浏览忠诚度。

精彩案例：SAP

阅读全文 »