13 Comments 1,925 views 2010-01-3 | 交互设计 | 作者：大米
最近做了一次口碑网注册流程改造，简单说一下激活邮件的设计上的一些小心得：
1、尽量不要用图片，尤其是别把激活链接做成一个点击按钮。
2、尽量少的给链接，最好只有一个显眼的链接。其他链接一律变短，弱化。链接明文显示。
以上两点，都是基于激活邮件的第一要素：简洁，省去所有不必要的干扰元素。让用户打开邮件，快速点击激活链接走人，符合用户的利益，也符合网站的激活达成率要求。这里有个小技巧，可能有些设计师仅从设计角度考虑的话，把激活链接做成一个显眼的按钮状以示强调，适得其反。这往往是一张显眼的图片，而很多邮箱在第一次打开这样的邮件时，是屏蔽图片的，这就导致用户第一次打开邮件时，看不到图片，也就是看不到链接。我推荐的做法是用加下划线的蓝色链接即可。另外，链接只有一个的话，就省去了用户判断思考的时间，看到链接点进去，肯定是点对的。链接做明文显示，看到的链接与点击的链接一致，这样，如果有些变态邮箱过滤链接的话，用户可以自行拷贝这个链接到浏览器地址栏中完成激活。
3、用简单的邮件头
做会员运营的网站，往往会形成一个固定的邮件头，上面会带一个logo，会加一些网站主频道，这能引导一部分流量，但我们要知道，激活邮件不是运营邮件，用户的目的很明确，点击激活链接走人。加了这些头链接，根本达不到吸引流量的目的。而且，网站的主频道往往随着网站业务的发展，几个月就会有一次变化，我们是否要求每几个月就要程序员来更新注册邮件模板呢？
4、给予适当的提醒和帮助
a、提示用户如果无法点击链接，直接拷贝链接激活。
b、提示这是一封系统发出的信，请勿直接回信。
5、表明身份，发信人使用网站名即可，如“口碑网”、“淘宝网”。
下面以gmail邮箱为例，截取了一些网站的激活邮件 阅读全文»
8 Comments 805 views 2009-12-5 | 前端开发 | 作者：三七
2005年前端工程师的职位开始在中国出现，2007年第一届D2前端技术论坛在杭州举行，从此D2伴随着中国的前端一起成长，从此越来越多的互联网产品的背后有着职业前端工程师坚定的身影。
在D2上我们曾交流过某项具体的前端技术，也曾探讨过团队协作的方式，那些美妙的话题都深入到我们频繁敲键盘的指尖。回首我们过去四年的坚持和梦想，现在是时候分享我们的积累和成果了。当架构、安全、性能等等在前端的领域扎根的时候，我们自己也在悄然发生质变，而推动这些变化的人和事正是D2想告诉你的。
Tags: D2, 前端
29 Comments 2,167 views 2009-10-29 | 视觉设计 | 作者：杨梅
最近设计一个优惠券列表，有个属性是有效日期，因为空间有限，必须要把开始日期和结束日期在一行显示，这样就出现一排的数字，日期有好几种我们习惯的格式，哪个更好？
上图说话：
虽然只是小小的有效期，但列出不同的展现方式，能帮我们找到最佳的方案；
平时我们的设计也是如此，常常做了一个方案后，因为花了很多精力，总会不自觉认为它已经够好了；当我们放下包袱，好好听取其他同事的建议，也许会看到很多自己没有考虑周全的细节还有待优化，优化后再和第一版去对比，是不是更棒了？
我相信好的视觉设计，都是细节经得起推敲的。
5 Comments 2,229 views 2009-09-28 | 前端开发 | 作者：zhusun
现在Web页面的交互方式越来越多样化，其中拖放页面元素也是一种很常见的操作。在这类操作当中有两个主要问题需要解决，一个是事件的注册方式，一般处理拖放元素的事件顺序是：捕获鼠标正键按下——注册鼠标移动事件——捕获鼠标正键抬起——注销鼠标移动事件；另一个问题就是拖放元素的位置，即X/Y坐标。这里我主要来讲述后面的问题：如何获取一个Dom元素的坐标。
当今已有很多的JS框架封装了获取Dom元素的坐标的方法，我们可以直接使用，而这里我更多的是希望透过这些方法，看到原始的获取坐标方式以及如何处理跨浏览器问题。
首先认识一下getBoundingClientRect方法，标准语法为：
oRect = object.getBoundingClientRect();
Dom节点调用该方法可返回一个ClientRect类型的对象，该对象有四个属性值：top、left、right、bottom，表示了该节点相对于可视浏览器可视区域的左上角位置的坐标，看图就能好理解：
阅读全文»
10 Comments 2,573 views 2009-08-25 | 视觉设计 | 作者：西芹
视觉设计是什么，人们怎么认为它的，自己又是怎么对待和理解它，它的核心价值是什么。
视觉设计，冒似很艺术，跟艺术相关的职业，给大多数人的印象是做美化工作的，他们比其他人更懂得搭配颜色，PS图片等等诸如花匠般的工作。把它归结为美化，单就这个形容词看来自然变得不那么重要，在很多时候，被认为是个不重要的职能。
也许有很多从事设计的人也对它的理解是模糊和不肯定的，那么更加不用说其他人能了解多少，这样的种种导致很多矛盾，非专业的人只能凭借仅有的认知来看待它，专业的人也很苦恼为什么自己做的事情被大家轻视和看的那么简单，随便一个主观意识就可以说出一大堆，结果自己变得非常被动和压抑。
让我们一起重新认识它 阅读全文»
Tags: 视觉设计
8 Comments 2,692 views 2009-07-20 | 前端开发 | 作者：三七
—— 本文刊登在《程序员》2009年7月期，略有增删
HTML是万维网上发布超文本的通用语言[1]。从1982年Tim Berners-Lee简化SGML建立HTML的原始定义到2001年发布XHTML1.1规范，HTML成为了有多个版本的国际标准[2]。各版本的规范都用一种机器可读的语言定义，它描述了法定结构、元素和属性，这就是文档类型定义（Document Type Definition），简称DTD。
DTD描述了文档类型声明（DTD declaration，简称doctype[3]）位于HTML文档最前面，它是联系文档和DTD指令。比如HTML4.01 Strict的doctype是：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
它指明了文档使用的HTML版本，这是诸如浏览器之类的工具解析文档时最需要的信息。比如W3C的验证工具可依据它来检查语法和指出错误。
阅读全文»
14 Comments 2,625 views 2009-06-17 | 前端开发 | 作者：zhusun
在网站的一些应用中需要提供用户直接打印页面的功能，最明显的就是电子优惠券，商家根据网站提供的模板输入内容，然后生成优惠券页面，用户打印这个页面即是优惠券。
当然最优的做法是根据这个页面生成一个图片文件，用户下载这个图片再去打印，打印的效果就不会受浏览器的设置而受影响打印出来的效果。
但如果由于一些原因，为了快速或者节约成本，不去将页面存为图片文件的操作，那么就只有直接将HTML页面直接打印下来，这样就需要在对页面的设计中有一些额外的要求，这里提出两个地方需要注意：
1.对style标签的属性设置：
<style type=”text/css” media=”print”>
这里表示该style内引入或者定义的样式属性仅仅在打印的时候使用，这里提醒一下，如果没有设置media属性，那么定义的样式将在浏览器和打印时都起效，所以建议将类似这样的样式放在所有常规样式之后。比如我们希望在打印出来的页面上有一行“打印与雅虎口碑网”，但在浏览器中并不现实：
<p class=”printTitle”>打印与雅虎口碑网</p>
那么我们就可以在统一样式中设置.printTitle{display:none;},而在后面的media为”print”的样式中设置为.printTitle{display:block;}。在定义的打印样式并不是在打印时的优先级会高于常规定义的样式，所以再次建议将打印样式放在所有常规样式之后。
2.在页面打印的时候浏览器的设置会对打印的效果有影响，在IE中的“工具”–“Internet选项”–“高级”中有一个“打印背景颜色和图像”，类似的在Firefox中“文件”–“页面设置”中有一个“打印背景颜色和图像”，当这个选项被选中的时候，页面中的背景颜色和图片都可以打印出来（有些不标准的IE内核浏览器似乎有些问题，背景颜色可以打印出来，但是背景图片不行），如果没有选中则背景颜色和图片都无法打印出来，所以为了屏蔽用户不同的浏览器和浏览器设置，我建议两点，第一是在用背景色填充的区域作为分界的地方加上1px的边框，颜色和背景色一样，这样在浏览器中看不出来变化，而在打印的时候即使用户的设置导致背景色无法打印出来也可以有一个边框来作为分割，最大层的上保留了页面格局；第二是对所有必不可少的图片都使用<img/>标签，这样无论用户浏览器怎么设置都可以将这些图片打印出来，可能这样与平时一些页面设计方式不同，但为了统一打印的效果，也只要让步了。
我这里简单的提出了一些在实际运用中遇到的问题，如果大家还有什么新的问题和想法，可提出来共同谈论，在这里先抛砖了；
12 Comments 4,926 views 2009-04-3 | 前端开发, 未归类 | 作者：三七
本书的作者Douglas Crockford是JavaScript开发社区最知名的权威，JavaScript的发明人Brendan Eich说他是“Yoda of lambda programming and JavaScript（lambda编程和JavaScript的精神领袖）”。他不仅仅给我们带来了JSON、JSLint、JSMin和ADSafe等等在JavaScript开发领域应用广泛且影响深远的作品，更重要的是给我们带来了受益终身的利用JavaScript进行高效开发的思想和风格，这就是本书的重要意义。
JavaScript曾是“世界上最被误解的语言”，因为它担负太多的特性，包括糟糕的交互和失败的设计，但随着Ajax的到来，JavaScript“从最受误解的编程语言演变为最流行的语言”，这除了幸运之外，至少还说明它是一个不错的语言。Douglas Crockford在这本书中剥除JavaScript糟糕的外衣，抽离出一个具有更好可靠性、可读性和可维护性的JavaScript子集，让你看到一门优雅的、轻量级的和非常富有表现力的语言。他从语法、对象、函数、继承、数组、正则表达式、方法、样式和优美的特性这9个方面来呈现这门语言真正的精华，这是语言最本质最优雅的部分，通过它们完全可以构建出高效的代码。他还通过附录列出了这门语言的糟粕和鸡肋部分，且告诉你如何避免它们。最后还介绍了JSLint，通过它的检验，能有效的保障我们写出优美高效的代码。
阅读全文»
Tags: Douglas Crockford, JavaScript
66 Comments 8,516 views 2009-03-16 | 前端开发 | 作者：大米
双屏不是什么新鲜事，不过相信国内前端工程师还是用单屏的多，前端开发需要同时开启的屏幕太多了…你有没有迷失windows任务栏下n个窗口和ALT-TAB的频繁键盘操作中？利用双屏显示让你从中解脱出来！我也刚用上了双屏开发，效率提升感觉值能有10%，所以来鼓动下大伙都来用双屏吧。
windows的双屏显示有很多种模式，我用的模式是主屏辅屏模式，两个屏是独立的窗口，可以进行窗口全屏。桌面和任务栏之显示在主屏，可以把主屏的一个或几个窗口拖到辅屏上，并全屏显示。看下图，右边的显示器为主屏，拖了个FX到左边的辅屏在该屏幕中最大化。
数数我们前端开发在工作流程中并行的全屏显示需求有多少个： 阅读全文»
43 Comments 10,340 views 2009-02-17 | 前端开发, 团队生活 | 作者：三七
春节前在蓝色理想上发了个“雅虎口碑招聘前端工程师 ”的启事，节后收到很多简历，加之HR通过专业招聘网站得到的简历和朋友同事推荐的简历，数量上是相当的多，把这些简历一一看完真是一个漫长而幸苦的体力活，何况我还要仔细认真的去提取和核查有用信息评估其能力，尽量不错过任何一个埋藏在大量简历中合适的人，这绝大部分时间并不是一个相当愉悦的过程。所以，我感觉有必要来谈谈：如何做好一份前端工程师的简历。
一、你是前端工程师
虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。
毫无疑问，前端工程师应该知道如何用简历体现其专业技能和职业精神，这是每个应聘者应该考虑的问题。
阅读全文»
Tags: F2E, 前端工程师, 招聘
