{ Hauy`s blog } Inpeck.com

{ Hauy`s blog } Inpeck.com http://www.Inpeck.com/blog 专注于用户体验、交互设计、web前端技术和web标准化建设。 Tue, 10 Jun 2008 01:32:22 +0000 http://backend.userland.com/rss092 en Adobe Dreamweaver CS4 Beta 发布今天下载并试用了一下，发现变得很不一样了。略微有点不适应。界面截图：新增的功能有： Live View 内置了一个WebKit渲染引擎，用于以标准浏览器来预览网页文件的显示效果。 Live View边上还有一个按钮叫Live Code，激活以后能在Code View里面显示该网页在真实浏览器环境下的Source Code，比如SSI过来的文件都能直接显示其内容了。 Related Files (相关文件) 这个功能是在编辑窗口的顶部显示一系列和当前网页相关的一系列文件，比如css啦，js啦等等，点一下就能直接编辑这些文件了，不需要到文件堆里面去找了。 Code Navigator (代码导航) 这个功能还是比较有用的。简单地说，按住Alt在页面上点击以后，DW会弹出一个小对话框，用来显示会影响当前所选内容的信息，比如定义某段文字的CSS，在上面一点就可以切换到修改对应CSS的地方，很方便。 CSS best practices CSS 方面有很大的增强。 Code hinting for Ajax and JavaScript frameworks (Ajax和Javascript框架的语法提示) 增加了对jQuery、Prototype和Spry这些js框架的语法提示支持。 HTML data sets 这个我没啥兴趣，增加了Spry的一个Data Set功能。 Photoshop Smart Objects (Photoshop智能对象) 没什么特别的，就是把psd文件拖进dw的时候会弹出一个优化图片的对话框，优化完以后提示让你保存jpg或者gif，有改动的话以后可以继续优化，只要psd文件还在。 Subversion integration 增加了版本控制功能。新界面据说变得更加fast和smart。。。不过我没感觉到。。。其他的变化右上角增加了切换面板布局的按钮，可以在八种布局方式之间切换，还可以新建和保存布局模式；设置文字的属性的时候会弹出设置样式的对话框；增加了Split Code (分割代码)功能，可以在两个界面显示同一个文件的不同部分，有些时候特别方便，不用来回拖动滚动条了；编辑窗口右下角增加的对文档编码类型的描述，比如是unicode还是gb2312；属性面板有了很大的变化，少了很多东西；把插件管理器单独在菜单上放一个按钮令我觉得很奇怪；郁闷的是。。。开着DW CS4之后我的DW CS3打不开了。。。要关掉以后才能打开。 Firework CS4和 Soundbooth CS4我没有太大兴趣，就没有关注了。相关信息： Dreamweaver CS4 帮助文件：http://help.adobe.com/en_US/Dreamweaver/10.0_Using/ Dreamweaver CS4 在Adobe的主页：http://labs.adobe.com/technologies/dreamweavercs4/ 安装文件下载：For Windows，For Mac http://www.Inpeck.com/blog/2008/05/28/adobe-dreamweaver-cs4-beta-released/ 0字节的flv文件导致vista的explorer崩溃今天朋友让我帮忙下载一个flv的视频，于是我就去找来了ViDown。结果一开始下载以后，vista的explorer就不停地崩溃。。。囧。。。然后进安全模式。。。explorer依然不停地崩溃。。。郁闷了，打开卡巴，把关键区域扫描了一遍，未发现病毒。用任务管理器却可以进入其他目录包括控制面板等。我到c盘下找到explorer.exe文件，发现并没有被修改。这时我发现，我在资源管理器里一切换到桌面所在目录，资源管理器也会崩溃。于是我注意到在桌面目录下有一个0字节的flv文件，遂进入cmd把它删了，问题解决。原来我刚才使用ViDown的时候把下载目录设置在了桌面，开始下载的时候ViDown就新建了一个0字节的flv文件 vista的explorer大概想去预览这个文件，于是就出错了。问题解决，把下载目录设置到其他地方就可以了。不知道vista下，其他0字节的视频文件会不会导致explorer崩溃？ Updated: 经测试，是播放flv文件的解码器的问题，原先的解码器是FLV splitter (Gabest) [version 1.0.0.1]，更新到1.0.0.4版本以后就没问题了。 http://www.Inpeck.com/blog/2008/05/14/flv-file-cause-vista-crash/ Email页面代码书写建议及规范前几天看到口碑网的朋友写了一篇《如何编写兼容各主流邮箱的HTML邮件》，很不错。在这里，我也要把我的经验和大家分享一下。众所周知，Email是一项最古老的互联网应用之一。因此，不少邮件系统还是会采用一些比较古老的处理方式，导致前端方面很多新的技术、新的特性无法被支持。而且各个邮箱系统以及客户端的差异，也会使email的最终呈现出现很大的偏差。 HTML细节就目前来说，如果要做一个email页面，为了保证最大的兼容性，有以下几点需要注意：对于纯文本邮件：邮件标题不要超过18个字；每行不要超过34个字。对于HTML邮件：邮件标题不要超过18个字； HTML代码和图片尽量不要超过50kb；页面宽度推荐500px，最大不要超过600px；避免使用边缘的、非主流的HTML技术；不使用css来布局，应该使用表格来布局；不使用外联的css样式，而使用font标签来定义样式，定义链接颜色时也是如此，写法如下： <font style="font-family:arial,helvetica; font-size:10pt; color:#000000"> ... </font> 不使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML ； body和meta之类的标签是可以无视的，因为在很多邮箱系统里它会被过滤；如果整个邮件有用到背景色或背景图，建议用以下方式处理：<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> <tr> <td width="100%" height="100%" bgcolor=".....">  </td> </tr> </table> 有背景图片的时候，我们要采用这种写法：<table background="background.gif" cellspacing="0" cellpadding="0"> 图片屏蔽由于图片可以用来侦测邮件的打开率和email地址的有效性。不少邮件客户端都会默认把邮件中的图片屏蔽，用户需要再点一下才能显示图片。 Blocking Issue AOL v. 6.0-9.0 Gmail Hotmail Yahoo! Outlook 2000/XP Outlook 2003 Outlook Express w/SP2 Outlook Express w/o SP2 外链的图片是否默认被屏蔽 Yes Yes No No No Yes Yes No 用户能否设置是否屏蔽图片 Yes No Yes Yes Yes Yes Yes Yes 能不能让用户点击某个按钮就显示邮件中的图片 Yes Yes Yes No No Yes Yes N/A 当发件人在用户的联系人列表里时是否默认显示图片 Yes No Yes No Yes Yes Yes Yes 发件人在ISP白名单中时能不能默认显示图片(国内好像没这个概念) Yes N/A Yes No N/A N/A N/A N/A 图片被屏蔽时是否显示alt属性 No Yes No No No No No N/A 预览时显示windows的主题样式 No No No No Yes Yes Yes Yes 来源：EmailLabs, 2004。国内用户常用的Foxmail似乎没有屏蔽邮件内图片的功能，我也找不到相关设置的地方。一旦图片被屏蔽，整个邮件就会变得面目全非，这里有以下一些建议：重要内容尽量避免使用图片，比如标题、链接等；制作一份和邮件内容一样的web页面，然后在邮件顶部写一句话，类似：“如果您无法查看邮件内容，请点击这里查看”；所有图片都要加上alt属性；所有的图片都要定义高和宽；通知收件人把你的发件地址加入白名单。 Outlook 2007的限制由于outlook 2007使用了word的渲染引擎来展现邮件内容，所以很多HTML属性没法得到支持了，比如：背景图片 css浮动和定位(这个没啥用) 自定义列表项的图像(这个也没啥用) Flash(反正不放的) GIF动画图片的alt属性表单下载这个pdf查看详细介绍。这些细节还是应该注意一下。附：Email客户端的CSS支持情况本资料来自国外某邮件营销公司，所以缺乏国内邮件客户端的数据。 <style> 标签 gmail Hotmail Yahoo Live Mail Outlook/OE AOL Lotus Notes Thunderbird Mac Email Entourage Eudora <head>中的<style>标签 No No Yes Yes Yes Yes No Yes Yes Yes No <body>中的<style>标签 No Yes Yes Yes Yes Yes No Yes Yes Yes No <link> 标签 gmail Hotmail Yahoo Live Mail Outlook/OE AOL Lotus Notes Thunderbird Mac Email Entourage Eudora <head>中的<link>标签 N o No No No Yes Yes Yes Yes Yes Yes No <body>中的<link>标签 No No No No Yes Yes Yes Yes Yes Yes No CSS 选择器 gmail Hotmail Yahoo Live Mail Outlook/OE AOL Lotus Notes Thunderbird Mac Email Entourage Eudora * No No No No Yes Yes Yes Yes Yes Yes No e No No No No Yes Yes Yes Yes Yes Yes No e > f No No Yes No No No No Yes Yes Yes No e:link No Yes Yes Yes Yes Yes No Yes Yes Yes No e:active, e:hover No Yes Yes Yes Yes Yes No Yes Yes Yes No e:focus No No Yes No No No No Yes Yes Yes No e + f No Yes Yes No No No No Yes Yes No No e ... http://www.Inpeck.com/blog/2008/04/30/suggestions-of-email-document/ google的Sitelinks可能会采用旧的索引？最近我在做理财易网站的SEO优化，在我改了网站的标题之后很长一段时间，直接搜索“理财易”的话，SERP页面中的网站标题一直没有变。请看截图：我猜想可能google的Sitelinks会采用旧的索引文件？不知道其他朋友有没有注意这个现象。 http://www.Inpeck.com/blog/2008/02/27/googles-sitelinks-may-use-old-index-file/ 网页的中文URL应该如何编码才能有利于SEO？最近在关注SEO方面的技术，碰到了一个关于中文的URL编码方面的问题。很多朋友表示百度无法识别经过utf-8编码后的url链接。星箭认为，是百度故意不识别utf-8编码后的url链接。但是我注意到，这个现象应该是Google和Baidu对于编码后的url链接采用了不同的解码方式导致。我们来看赶集网的热门标签页和土豆网的标签频道在搜索引擎中的表现：先看赶集网的，赶集网的url编码采用了gb2312的编码方式这是百度下的搜索结果页这是google下的搜索结果页面我们发现，baidu将赶集网的url编码转化为中文，而google则保留了原始链接。再来看土豆网，土豆网采用了uft-8的url编码方式这是在百度下的搜索结果页面这是在google下的搜索结果页面土豆的url被百度解码以后变成了乱码，而在google下则能正确地还原为中文。结论： google对url采用utf-8的解码方式，百度则采用gb2312的解码方式；对于一个网站来说，如果从baidu过来的流量比较大，可以尝试使用gb2312的url编码方法； google能把纯中文的url转化为utf-8编码，而baidu则完全无法收录。附：推荐一个Encode/Decode工具：http://seohelper.cn/tools/urlencode http://www.Inpeck.com/blog/2008/02/26/how-encode-chinese-url-adapt-for-seo/ 介绍一款原型设计工具 - iRise Studio iRise Studio 是 iRise 公司推出的一款原型设计工具，木的曾经介绍过这款软件。 iRise可以很方便地设计出与最终产品具有完全一致的交互功能的仿真模型，使用户在开发之前便可以用真实的数据进行测试，大大提高了开发效率。以下是软件的部分截图：在接下来的时间里，我将详细介绍这款软件。 http://www.Inpeck.com/blog/2007/05/20/about-irise-studio/ 这是垃圾箱吗？上周去杭州，在延安路上吃了根哈密瓜，突然发现我找不到垃圾箱了。。。走了很久突然发现前面有个物体看上去虽然像块板，但是很有垃圾箱的嫌疑。走上前去绕了一圈，发现果然是个垃圾箱！不过把垃圾箱做成这样子，似乎有误导游客的嫌疑啊。会不会有游客因为觉得找不到垃圾箱而增加乱丢垃圾的几率呢？说实话我还是更喜欢这种“传统”一点的垃圾箱： http://www.Inpeck.com/blog/2007/05/20/is-this-a-garbage-can/ 完整的CSS工具列表用户界面 I Like Your Color 输入URL然后它会抓出其中的颜色并用16进制表示。 CSS Multi-element Rollover Generator 使用CSS和一个图片创建出一个翻转按钮的样式。 CSS Rounded Box Generator Ruthsarian Layouts 6个CSS页面布局模板，包括颜色、标题等。 Bluerobot Layout Reservoir 2栏和3栏的CSS布局框架 Glish CSS Layout techniques 2、3、 4栏的CSS布局框架 The Layout-o-matic 输入页宽、栏数和padding，它会自动生成CSS和HTML的布局框架。 Little Boxes w3cn.org上提供的那些布局模板 Open Source Web Design 各种免费的完整页面模板 Web Builders’ Toolkit 更多的模版资源 Iconico Online CSS Scrollbar Color Changer List-u-Like 一个CSS菜单生成器：轻松创建采用li并兼容各种浏览器的导航菜单。 Nifty Corners: 无需图片的圆角矩形 Round Corner Stone/Icon (rcsi) V1.0 增强的圆角矩形 Xylescope 无需下载其他站点就能轻松分析其CSS代码。 W3C Core Styles Checkliste zur Webseitengestaltung Testseite zur Zeilenbreite 易用性检查 Accessibility Valet Demonstrator Bobby Online Service Cynthia Says OCAWA Web Accessibility Expert Torquemada 使用工具对页面进行一个完整的易用性分析方法测试，以快速辨别页面中哪些部分存在错误。 UI Site ... http://www.Inpeck.com/blog/2006/11/01/css-tools-list/ 去掉当鼠标放到图片上时，出现下载、保存提示的图形工具条 IE真是莫名其妙。我自己可以在浏览器里关闭这个功能，但是我做的网页别人来访问怎么办呢？关闭这个工具条有这么几个方法：方法一： <META HTTP-EQUIV="imagetoolbar" CONTENT="no"> 方法二： <img galleryimg="no"> 方法三：定义CSS <style> img {nobar:expression(this.galleryImg='no')} </style> http://www.Inpeck.com/blog/2006/10/22/disable-ie-imagetoolbar/ 微软正式发布 Internet Explorer 7 (IE7) 微软在19日公布了IE7的最终正式版，并预计于11月1日通过自动更新推送IE7。同时，Yahoo版的IE7提取出来以后的数字签名和官方版完全相同。不过这次IE7发布的英文版是英文版的，国内用户应该不会大规模地使用。正好可以趁这段时间测试一下，对于一些问题可以有一些对策。体验IE7 IE7视频下载和安装 [url=http://download.microsoft.com/download/3/8/8/38889DC1-848C-4BF2-8335-86C573AD86D9/IE7-WindowsXP-x86-enu.exe]IE7 for SP2 英文版本直接下载[/url] 英文版的IE7官方下载连接 Windows XP SP2 Edition Windows Server 2003 32-bit Edition Windows XP & Windows Server 2003 x64 Edition Windows Server 2003 ia64 Edition 安装时需要验证是否正版操作系统安装方法： 1，打开“文件夹选项”，“查看”选择“显示所有的文件和文件夹” 2，打开系统盘，找到Documents and Settings文件夹，打开all users文件夹内的Application Data子文件夹，继续选择打开ndows Genuine Advantage，将data文件夹里面的data.dat删除 3，设置all users文件夹为只读 4，断开网络安装IE7.0 体验与使用相对测试版的IE7，正式发布的版本更加稳定和流畅，占用的内存也没有以前那么夸张。由于ClearType功能的影响，测试版中12px的宋体字看上去也是糊的，现在在正式版里面12px的宋体字看上去就很锐利，还是和以前ie6下面的一样。不过这个又带出一个问题，中文和英文显示时的颜色浓度略有差异，平时应该注意尽量避免中英文混排。 Tab功能很不错。按住Ctrl点击链接是在新Tab中打开链接；按住鼠标中键关闭Tab，这个好像意义不大。平台改进和操作性这可能是我最关心的问题 CSS方面： IE7重点解决了以下两个bug：Peek-a-boo Bug 和 Guillotine Bug 正在解决中的问题有： Ability to hover on all elements Fixed positioning CSS 2 selectors HTML 4.01 improvements Windowless Select Element 另外一些改进： PNG:IE7开始支持PNG文件的alpha通道，意味着PNG的256级透明效果在IE7上有了用武之地了。 Ajax:IE7内置了XMLHttpRequest对象而无需ActiveX的支持。提高了兼容性以及客户端可以自定义安全策略。 RSS Feed 订阅支持:不用 OpenSearch 平台:可以方便地设置google为默认搜索引擎了（刚安装完IE7默认是Live.com）。 http://www.Inpeck.com/blog/2006/10/20/internet-explorer-7-is-issued/ 转载：如何创建一个更好的规范作者简介：Whitney Quesenbery 是一位用户界面设计者以及可用性专家。她与世界各地的公司合作获得了优胜网站，网站和软件应用等奖项。作为 UPA 评判和可用性项目的主管，她被任命为美国政府在评判系统标准问题上的顾问委员会的委员。 Whitney 还担任着美国 UPA 主席的职务。 1. Building a Better Style Guide 1.1. ABSTRACT（摘要） Why are style guides so frequently created, but so rarely successful? All too often, businesses ask for a style guide as a means to create a common look and feel, in the belief that it will ... http://www.Inpeck.com/blog/2006/09/23/building-a-better-style-guide/ 人物：Jakob Nielsen Nielsen 拥有博士学位，同时也是 Nielsen Norman Group的使用者倡导者和负责人（Nielsen Norman Group 是他与 Apple Computer 的前研究副主管 Dr. Donald A. Norman 所合创的）。在 1998 年以前，他是 Sun 公司的一位杰出的工程师。他在 Web 可用性的领域被公认为世界的权威。 Nielsen 已经获得了偶像级的地位，是如今讲谈会最受尊敬的使用者接口大师级主讲者之一。全球许多设计者对他推崇备至，然而还有许多人却想把他绊倒。他用下述三个基本的原则来启发设计者：精致简约，越少越好和支持使用者任务、不要阻碍使用者。通过这些原则，Nielsen 领导他的听众设计出更好的网站。在他看来，这就好比在万里长征的旅途中迈出了第一步。为了来改善网站造访者的使用体验，Nielsen 要求听过他的演讲或出席过他的研讨会的听众针对他们的网站做一个适当的改变。这些看似小小的变化往往产生了最大的影响。为证明 Nielsen 的概念已经深深的影响着我们，他还特别指出他已经不把网页下载速度视为最迫切需要改进的因素。随着宽频时代的来临加上设计者逐渐设计出更有效率的网站，Nielsen 觉得到他已经改变了世界。 Nielsen 的戒律你应该： -在为网站写程序时遵循 Web 的标准（从 W3C 标准开始，然后使用其它已经可接受的标准，例如 JavaScript 等） -遵循规范 -- 80% 到 90%的使用者都在做的就是规范 -强调快速的响应时间（网页负荷和服务器容量两方面） -简明、客观、易于浏览 -协助使用者决定去留：区分产品列表 -支持搜寻的功能，但是别做的太繁复（以 Google 为标准） -在进行任何设计之前先做好任务分析（task analysis） -在设计时强调任务支持（例如，比较购物） -在设计过程中进行多次使用者测试 -让残障人士也可访问网站你不应该： -妨碍使用者：别用过度喧哗夺目的页面，别使用 Flash 做简介，不用具有推销性及不合适的图片来破坏内容（例如，笑脸照片） -包含未经请求的弹跳式窗口（在线求助除外） -去掉「上一页」（Back）按钮（打开一个新的浏览器窗口是一个常见的错误） -把功能设计元素做得看起来像广告（他们将会被忽略） -使用动态式的文字（moving text） -允许连结错误发生 -隐藏送货成本或其它「陷阱」-这些会引起放弃购物 -使用焦点团体或调查来指导交互式设计 -不断重复设计－在推出网站前深思熟虑，然后就保持同样的设计风格一年左右。至尊经典 Nielsen 不仅非常重视他的最新著作Designing Web Usability：The Practice ... http://www.Inpeck.com/blog/2006/09/23/jakob-nielsen/ 转载：关于web注册页的可用性分析作者：DTE 原载：http://blog.sina.com.cn/u/48f239da010006cc 在Nielsen的可用性工程里提到可用性的其中一个原则是Errors，记得刚开博客的时候也穷举了一些关于可用性方面的文章，里面将这个errors翻译成了“少错”，实际上我个人觉得（也有不少版本这么翻译）“容错”更为贴切。无论是客户端软件还是web软件，用户毕竟不是专业人员，他的操作必然不能按照程序员所设定的路线来走，那么很有可能就会发生错误，“少错”是一个很含糊的概念，怎样做到少错，如何才是少错呢？真正需要做的应该是“容错”，当用户发生错误时，系统要能做到给予正确友好的提示，帮助他完成操作流程以及目的。前阵子由于工作的需要，对于系统给予用户填写信息的反馈进行了一些肤浅的研究，主要以web注册页的操作体验为主，现整理出来与大家共同分享，也欢迎大家拍砖，以共同提高。第一次写所谓的“技术贴”，必然有很多不足，希望各位及时纠正，万分感谢首先举一个失败的用户体验的例子，126邮箱注册，不过那是一个月以前了，今天本想截图贴上来的，结果登录发现已经改版了，不错，确实该改了，需要进步嘛！不过却不利于文章的描述了，看来我只能凭着自己的印象来写了，要是有什么偏差，见谅！原有的126邮箱注册页并不象现在将用户名的填写单独做为一页进行强调，当时所有的信息填写都在一页中，而且没有检测用户名的按钮，这就意味着用户在进行填写时必须完成所有的输入框才能得知自己所键入的用户名是否合法或是否可用。而且整个页面没有一点提示信息，实在让人费解。更郁闷的事，对于错误的提示采用的是弹出对话框，以上所有都大大降低了用户操作的效率。我简要模拟一下当时的过程：首先，我在用户名的输入框中键入一个特殊符号，为了节省时间更快的看到系统给予的反馈，我直接跳过了中间所有的信息填写，并点击注册，这时，系统弹出了一个对话框：这里的文字实在太为模糊，怎么就不合法了呢？那怎么样的用户名才是合法的？实在让人伤透脑筋。我重新输入了一个数字，系统又提示到：好，那我不用数字，我用字母总可以了吧，我输入“a”：不少5对把？我满足你，我一口气输入n个“a”，系统又报错了：％￥◎……￥％＃￥×……※％着实让人郁闷啊，我不禁想到大学自习曲里的一句歌词：有啥话你不能一气说完...虽然我是故意在找茬，但是126没有完全考虑如何去避免用户再次犯错，确实是不应该啊！而现有改版过的页面考虑就周全得多了：首先在将用户名得填写单独提出来作为一个页面，便于用户进行用户名的合法和可用的检测，其次在输入框下面加入了完整的提示信息，给用户十分明确的填写指导，再次当用户没有理会提示信息而出错的话，系统采用了在输入框下出现红色醒目字样进行提示，而非弹出对话框。这三点都使可用性大大的提高了。把各大门户网站邮箱的注册页都试了一下，基本上都采取126的这种新的形式：单独页的存在，信息的提示，和当页高亮显示错误提示信息。实际上应该说126采用了各大门户网站邮箱注册页的模式：）象sina sohu yahoo等等，也简要做点分析： yahoo的注册页如下：页面在提示信息重要的位置上标上了蓝色，减少了用户浏览提示信息的时间，也提高了效率，但是输入信息后，点击下一步页面进行刷新，出现的提示信息却出现在了上方，而且不因输入的内容变化，始终是那句“格式不对或含有非法字符”，不仅不够醒目而且引导性也不够。 sohu的注册页如下： sohu对于信息提示的内容描述相对来说比较完整比较到位，但是位置却处在上方，没有和用户名的输入框直接相连，影响了阅读，而且中间搜狐闪电邮件和搜狐手机邮件的广告更是位置十分的不得体，将页面生生的切成了两段，虽说起到广告宣传的作用，但是对于注册来说这是完全的垃圾信息，它的存在难免会降低用户的友好度。要知道用户对于影响自己行为的广告是极其厌恶的！其实在页面提示信息的处理上，也并不是越全面越具体就越好，一切都得看情况来定，如下的页面就是一个很好的反面例子：满屏的信息看了头就疼，哪还想着去注册啊，直接关掉就好了～烦！！！！我认为应该将引导性的信息放在注册项的后面给予用户进行操作的一个指引，而针对用户填写的有误信息应该出现相应的错误提示，高亮显示出现在原有提示的位置并覆盖原有提示信息。这种方式应该是最为合理的～以下就是一个非常好的例子，51.com的用户注册：当前操作步骤以蓝色背景突出显示，让用户清晰的知道自己现在的位置和所作的操作，以后还需要哪些操作才能完成整个流程。当输入的信息有误时，系统通过判断得出当前信息属于哪种错误，并在后面高亮显示进行提示，例如，我输入“ad”，错误提示信息为“用户名不能少于3位” 若输入“1”，错误提示信息则为“只能用数字或英文，并且必须为英文字母开头!” 但是这个过程中，错误提示信息在弹出窗口上重复出现是完全没有必要的！针对这个注册页面，我想进行一点引申，如果在用户阅读完错误提示信息，并重新进行输入时，输入框后的字又重新刷新为原来的提示信息进行重新指引，就可以避免用户没有初次阅读提示而再犯错误的情况，例如，输入“ad”发现错误后输入“1111”... http://www.Inpeck.com/blog/2006/09/22/the-analysis-of-usability-about-web-register-page/ 转载：UI设计的定义以及定位作者：LuckyZ，原出处：ChinaUI论坛。界面设计(UI Design)，交互设计(interactive design)，可用性研究(usability research)，人力因素(human factors)，信息结构工程师(information architect) 在美国，这些工作职位的区分并不是很容易。也许不同的公司有不同的职位名称和工作重点，但是有一点可以肯定，他们设计的产品与人类都有有强烈的互动性。在与国内同行探讨中，不止一次有朋友将自己的设计作品Email过来，希望得到我的意见。打开Email，看到的只是一个截图(Screenshot),就有些纳闷，UI设计怎么能用静态的图像来表现呢？虽然我也接受过一些正式的色彩和Layout训练，可是凭心而论，可能我没有什么资格对那些作品发表评论，因为他们的确色彩搭配赏心悦目，Layout结构合理，个人风格突出，我只能说，朋友，Good Job,但是你错过了UI设计中最重要的部分。UI设计不只是给人提供视觉上的享受，真正UI设计的好坏，必须要设定一个任务，从头至尾使用一遍才能知道。 UI的概念是动态的过程，是逻辑的推理，也是各种状况的预测。如果衡量UI设计只有一种标准，那就是用户体验(User Experience). 用户体验是以用户为中心的设计(UCD/User Centered Design)中最重要的一个部分,强调的是过程，是软件对用户行为(User Action)产生的反应与用户期待值的误差测试，也就是说，这种误差越小，也就越符合以用户为中心的设计原则。在西方，UI行业的兴起要归功于以计算机为主的高科技迅速发展，尤其是视窗操作系统的普及，然而广义的UI概念在十七世纪的工业革命阶段就已经开始，只不过，把易用性带入机械的设计还是一种无意识的举动，再加上当时几乎所有的工业程序都是由熟练工人一手操办，就更加减弱了易用性设计的能见度(visibility). 在我从事UI设计的最初两年之中，对于UI的定义有个极大的转变，这也从而影响了我的设计风格。在我的定义里，只有两种用户，过程为主的用户(process oriented end user)，和结果为主的用户(result oriented end user).过程为主的用户的典型例子是电玩族，他们追求的终级目标就是视觉听觉的冲击和享受，最终游戏的结果反而变得不是那么重要了。此类设计对视觉和创意的要求是极为挑剔的，绝大多数设计师都有深厚的美术功底。然而，与结果为主的用户设计相比，它的市场和受众都要小的多。结果为主的用户不在乎用什么样的方式完成任务，但是任务必须以最短的时间，以最简洁的方式，最精确的运算结果来完成。这些用户通常是工业化软件的受众，工作环境以大型企业为主，软件最终运算结果对于企业的运行和管理有着重大的意义，稍有偏差，可能会对企业产生重大损失。对于此类用户的产品设计人员来讲，绝大部分部分时间可能用在设计任务的逻辑流程(logical task flow),以期最大幅度的符合人脑的思考方式和认知过程(cognitive process)。平面设计(包括icon, logo, button, etc.)至多是UI定义中很小的一部分，也是微不足道的一部分。并不是我轻视它，在以前的论述中已经提到过，目的为主的用户对于完成任务的欲望已经大大超出了对色彩的挑剔。同时，视窗和JAVA环境下的开发更多的朝着工业化和标准化的方向迈进，这已经给专攻色彩和搭配为主的人没有留有太多的发展余地。在这里花了很多时间探讨对UI的定义，虽然知道我的看法对一些同行来说是偏激的，最主要的目的是要传达一个讯号，从业者以及业界对于UI的定义可能会决定UI在中国有多大程度的发展，甚至存亡，如果把它转换成眼前的利益，则是UI设计师能否在企业中受到与工程人员同等的重视，以及福利。也许你会说，中国有自己的国情，美国的东西未必能在中国行的通。其实即使是在美国，不是所有的公司都会有专门的UI组，很多工程部门对UI存有偏见，错误的认知，甚至轻视和嘲讽。人机交互科学在美国已经经历几十年的发展，过程从未顺利过。然而，随着学术界将此门学科正式列入大学，己及研究所课程，业界更多投资在将研究成果转换成生产力的过程中，人力因素(human factors) 已经逐渐形成自己一个清晰战略发展态势。 UI在中国发展需要是一个自上而下的推动性改革。中国的软件开发已经很大程度上与西方接轨，我们没有那么多时间让真正意义的UI慢慢渗入开发过程。在中国，将一个新的概念或产业名称带入产品开发，并使其发展壮大，最大的源动力应该是投入的回报率。这也是许多同业人推荐将UI设计带人尝试性的项目，用成功的案例来让更多的企业信服并采纳用户为中心的设计方法。然而，能够找到一个有效的商业环境，让相仿产品在其他方面势均力敌，最终凭借UI设计的优势胜出的案例几乎是不可能的。当一个产品成功打入市场的时候，人们看到的是其强大的功能，上乘的质量，周密的市场策略，合适的价格定为，甚至是美观的包装设计，而很少有人会将亲和性的界面设计放在功劳簿上。界面设计所倡导的是可用，易用，然而在消费者心中可用，易用是理所当然的，所以当产品具有了以上优势，设计因素会被忽视，而当一个产品因设计不良出现问题，可用和易用便会被揪出来大加鞭挞。为弥补设计不足的印象，或者说给UI设计找一个正当性，于是某些企业更加强调UI设计中德美观和创意性，而忽略了易用的开发投入。这在短期中可能会有帮助，因为色彩创意是看得见模的着的东西，会对客户有暂时性的心理暗示，然而长期来讲，会因忽略易用而使产品冠上消极的印象在长时间内很难消除。而对UI错误的定义则可能会导致从业人员沦为产品后期装饰和创意而无法参与产品的早期开发。毫无疑问，UI设计优势在产品竞争中扮演的重要角色是无庸置疑的，但是，这种优势实现和意识都是长期性的，而非短期行为。他意味着需要相当长的时间让客户了解到，但是一旦形成此种心理上的优势，就会在很长的时间内存在，会将易用的心理暗示代入整个产品的后续开发甚至整个品牌。 UI以及相关行业在中国的发展应该不是自下而上的，受制与消费者缺乏与之相关的概念要求以及作为专门学科未在大专院校及研究部门广泛设立的现实，无法由消费者和终端用户推动这一行业的发展。时间上，中国的硬件配置，软件开发技术与西方不相上下，我们没有那么多时间让真正意义的UI慢慢渗入开发过程。当然UI设计的定位有一个很大的利益分配的问题。任何一个新兴行业的兴起都是以另外一个较老旧的行业作为牺牲代价。在我们们所说的较理想的设计环境中，它所意味或暗示的东西是目前正在作真正意义上UI设计或结构的那一批人将不得不放弃现有的资源，这些难题不是能用技术来解决的，也无法经由一些人的呼吁，或者几个个别的案例来说服即得利益的一批人放弃手中的资源。在企业内部研发部门需要一批能够从战略角度和长期利益出发认识到UI设计重要性的高级管理人才，从而将UI设计在产品生命开发周期中正式的程序化，制度化，创造工程与设计部门共同探讨产品的早期设计的机制和公司文化，并主动向客户宣传用户为中心的设计理念，增加UI设计的能见度。同时，当UI设计不再被外界偏视为装饰性的行业，同时不被本公司的工程部门轻视时，与之相关的培训和大学科研部门也会加大投资力度，培养出更专业的人才，行成良性循环。当然，如何将UI设计合理有效的整合到产品开发过程当中以期产生最大生产力，在美国也是一个未知数的课题。不同公司根据开发部门大小，产品特性，公司文化等总结出适合自己的一套东西，很难说哪一种更好。我在近两年参与旧金山湾区交互设计特殊兴趣小组(www.baychi.org)活动时，曾非正式的访问了硅谷几家企业的资深设计师，这其中包括IBM，Adobe,Google, 和WebEx,他们代表了不同大小，行业，设计平台，以及公司文化。我将在以后的文章里将采访的内容作一个总结，与大家分享。从业人员的培训是至关重要的，培训方向应该是从实践到理论。人机交互科学是跨学科的科学，包括了计算机科学，心理学，社会学，人类学，以及工业设计。同时，根据UI部门分工细致程度，对背景要求也不一样。在中国尚无任何一家高等院校提供人机交互学学位教育的情况下，对从业人员的在岗教育显得格外重要。其中有数次跟国内同行交流中，听到最多的抱怨是对设计总体格局缺乏控制权，或者只能在有限空间发挥自己的设计理念。这里面固然有程序上的问题，但我的总体感受是，许多设计师把自己的工作范围定义在了狭小的空间而未能在业务的广度和宽度上拓展自己的知识。UI设计本身有很多共通的地方，然而，今年来高科技的发展，已经将计算机科学分工更细，每一门附属学科每天都在变化。也许穷尽一个人毕生的经历，也只能对某一学科略知一二，所以我无法想像，作为一个UI设计师如何能在不了解产品和技术的情况下参与与工程部门的决策，如何能在只了解颜色和构图的基础作出精彩的设计，毕竟，我们的产品不是给人看得，而是给人用的。目前大部份UI从业人员没有受过正规人机互动教育已经是不争的事实，从实用的角度出发，由实践到理论的培训方法也许更加快速有效。原文出处：http://www.chinaui.com/bbs/dispbbs.asp?boardID=17&ID=33929&page=1 http://www.Inpeck.com/blog/2006/09/22/ SEO工具,站长必备内容与结构工具搜索引擎抓取内容模拟器可以模拟蜘蛛抓取指定网页Text,Link,Keywords及Description信息 http://www.webconfs.com/search-engine-spider-simulator.php 同上，显示的信息更多，推荐使用！ http://www.se-spider.com/ 相似页面检测工具检验两个页面的相似度.如果相似度达80%以上,将可能受到惩罚 http://www.webconfs.com/similar-page-checker.php Google Sitemaps 在线创建在线创建 Google Sitemaps 网站地图文件中文:http://www.xinqj.com/sitemap/sitemap.asp 英文:http://www.xml-sitemaps.com/ Google Sitemaps Builder .Net Google Sitemaps 创建软件, 可以很方便的创建网站的Sitemaps http://www.seobbs.net/read.php?tid=10620 综合查询工具网站收录查询同时查询Google,百度,Yahoo等8个搜索引擎的收录状况 http://tool.cndw.com/Shoulu/Index.asp 关键词排名查询可以同时在3个搜索引擎中查询指定网页指定关键词的排名情况. http://www.seores.com/search/keywordrank.asp 搜索引擎优化监视器(SEO Monitor) 一个仅321K的小软件,可以同时查询多个搜索引擎,多个关键词的排名情况.并自动记录历史排名情况. http://www.seobbs.net/read.php?tid=2490 Google各服务器关键词排名查询查询在Google各个服务器中,指定网页指定关键词的排名情况,可以作为一个升降的参考 http://tool.cndw.com/Rank/Index.asp 关键词工具 Google Adwords关键词工具查询指定关键词的扩展匹配,搜索量,趋势和受欢迎度. https://adwords.google.com/select/KeywordToolExternal 百度相关搜索按热门程序排序,列出指定关键词相关的扩展匹配及热门程度 http://d.baidu.com/rs.php 关键词密度分析工具分析指定关键词在指定页面中出现的次数,及相应的百分比密度中文:http://tool.cndw.com/Seo/Key_Density.asp 英文:http://www.keyworddensity.com/ 关键词热门排行及指数百度排行榜:http://top.baidu.com 百度指数:http://index.baidu.com/ Yahoo排行榜:http://misc.yahoo.com.cn/top_index.html 搜狗指数:http://www.sogou.com/top/?IPLOC=CN1102 搜搜龙虎榜:http://www.soso.com/lhb/s_i_sosolhb.shtml Google工具 Google Sitemaps Google推出的一项免费服务,一个杰出的SEO工具 http://www.google.com/webmasters/sitemaps/docs/zh_CN/about.html Google Analytics Google推出的免费分析服务.在市场营销和内容优化上提供很多专业报表.对搜索引擎营销有很大帮助. http://www.google.com/analytics/zh-CN/ Google Dance 查询工具不仅可以查询Dance情况,还可以通过E-mail及时获得每月google dance通知 http://www.seochat.com/googledance/ 查看在GOOGLE各服务器上的PR值利用这个工具,可以判断PR是否更新,预测更新后的PR值 http://www.seochat.com/seo-tools/future-pagerank Google PR历史更新时间表看看Google 2000看至今更新PR的具体时间和周期时长 http://www.seocompany.ca/pagerank/page-rank-update-list.html 链接工具链接广泛度检测工具反向链接查询工具.同时支持Google,百度,Yahoo等8个搜索引擎 http://tool.cndw.com/LinkIn/Index.asp 查询Google中链接的工具.可以抓取文本标题和链接.中文标题显示的是乱码 http://www.webconfs.com/google-backlink-checker.php Yahoo新推出的链接检查工具,可以查询网站中所有被检索的页面以及反向链接情况 http://siteexplorer.search.yahoo.com/ 同时查询Google,Yahoo,MSN中的链接数量 http://www.trafficzap.com/linkpopularity.php 无效链接检查工具检查指定页面内的链接.包括链接有效性检查,链接文字,链接类型 http://www.seores.com/search/checkurl.asp W3C GLink Checker http://validator.w3.org/checklink 其他工具国外主要搜索引擎和人工目录的关系表一个Flash,解析国外主流搜索引擎与人工目录的关系,对海外推广很有帮助 http://www.seobbs.net/read.php?tid=911 网站历史查询工具美国互联网档案馆(The Internet Archive)保存了自1996年开始,借助Alexa搜索引擎获取的网站资料 http://web.archive.org/collections/web/advanced.html 域名历史查询工具用这个工具查域名近期有无在域名服务器下的记录 http://domain-history.domaintools.com/ 分类目录收录查询检查网站是否登录多个重要分类目录 http://www.123promotion.co.uk/directory/index.php Alexa世界排名查询 http://alexa.chinaz.com/Index.asp 作者: 樂思蜀原载: 点石互动搜索引擎优化博客版权声明：本文已经获得作者授权发布，转载请保留本版权信息，严禁一切非法复制。 http://www.Inpeck.com/blog/2006/09/13/seo-tools/ Upiea为什么没有足够成功？我很喜欢Upiea这款软件，在这互联网流氓横行的年代，Upiea助我躲过了无数流氓的枪林弹雨。可以屏蔽的插件很全面，卸载插件的功能也很方便。每当遇上哪个mm的电脑被流氓强奸了，我总会带上Upiea。可是……流氓大亨最近出了360safe，对我来说，这两款软件的功能是一样的，无非就是防御流氓软件。360safe也许还多了个木马查杀的功能，但我用不到。 360safe的出现，解决了我一个困难，因为Upiea的操作不够傻瓜化，特别是在2.0版本以后，把ie上正常运行所必需的ActiveX组件也列出来了，用户需要自己分辨哪些是好人，哪些是坏人。如果我不能操作别人的电脑，我就很难给别人做出指点说，应该卸载哪些，不应该卸载哪些。而现在360safe的操作非常傻瓜化，每个人都能用。于是从此以后，我自己还是用Upiea，给别人我就推荐360safe，至少目前看来360safe还是比较安全的。周鸿祎是个绝顶聪明的高手，对用户的心理，对互联网的节奏，都拿捏得很准。 http://www.Inpeck.com/blog/2006/08/25/why-upiea-not-succeed-enough/ 转载：CSS bug及解决方案 <p>如果世界是美好的，浏览器都没有缺点，W3C的规范清晰明了，而这篇文章也永远不会出现。Welcome to the real world. 在这篇文章中，我们将会探讨几个主流浏览器的在Web标准（或者CSS规范）下存在的典型问题/臭虫，提供相应的解决方案（hacks/filters）。</p> <h3>NN 4.x</h3> <p>很幸运我们生活在这个时代。这个10年前的古董浏览器,网景导航家（Netscape Navigator）4.x，终于只剩下0.3%的市场份额，大部分网站也声明不再支持。它有着最基本的CSS支持，而且依然有不少死忠（我相信越来越少），所以依然有设计师为它设计样式。但最多只能改变下字体，颜色等最基本的东西了。所以，我是说假如，你还要顾及NN 4.x的话，比较合适的做法是，做一个基本样式给它用，并对其隐藏不可识别的高级样式（给其他浏览器用）。很容易做到，因为NN 4.x不认<code>@import</code>。举例如下：</p> <pre><code><link rel="stylesheet" tyle="text/css" href="basic.css" /> <style type="text/css">@import(advance.css)</style></code></pre> <p>这个方法屡试不爽。但请注意，这也不是没有副作用。假如只使用了<code>@import</code>而没有<code>link</code>的情况下，可能会导致IE的瞬间无样式（FOUC，详见<a href="http://www.bluerobot.com/web/css/fouc.asp">www.bluerobot.com/web/css/fouc.asp</a>。幸好，NN 4.x只能识别<code>screen</code>这个媒体类型（media type），所以，避免FOUC也不是没有办法：</p> <pre><code><link rel="stylesheet" tyle="text/css" media="screen, projection" href="advance.css" /></code></pre> <p>到此为止，我们不要为它浪费过多精力，除非你的老板还在用它。</p> <h3>IE 5.x/Win</h3> <p>在此我们指Windows平台上的IE 5.0和IE 5.5。CSS的支持依然很糟糕，但是比起NN 4.x已经有了长足的改变。它们臭名昭著错误的盒状模型（Box model）可能是导致CSS界第一个hack的出现。我们先来看看盒状模型。W3C规范的盒子，可以使用“相加”来描述，即，一个元素的实际盒子宽度是由内容宽度（content <code>width</code>）,边框（<code>border</code>），边距（<code>padding</code>）堆积起来的。而IE 5.x/Win则可以用“相减”来描述，也被称为边框盒状模型（border box model），一个元素的实际宽度就是该元素的<code>width</code>设值，边框，边距都从中减去。</p> <p>来看一个例子：</p> <pre><code>div { $nbsp$$nbsp$width: 200px; $nbsp$$nbsp$margin: 20px; $nbsp$$nbsp$padding: 20px; $nbsp$$nbsp$border: 5px; }</code></pre> <p>依照W3C规范，这个<code>div</code>实际所占宽度是5px + 20px + 200px + 20px + 5px。而对IE5.x/Win的边框盒状模型来说，这个<code>div</code>实际宽度就是200px，而内容宽度被压迫到只有150px：200px - 5px - 20px ... http://www.Inpeck.com/blog/2006/08/21/ 翻译：页面布局与颜色运用的基本准则为了走出条条框框的限制，我们需要抛弃框架，打破准则和那些陈词滥调的传统。但是在打破任何准则之前，你必须先了解这些准则的基础。首先，我们来谈谈页面的布局。准则 - 有太多的条条框框会对你的健康产生不好的影响有一名设计师说当他或她在页面设计时开始使用一些框架以及分隔线的时候就意味着他已经成为设计师了。当你自己观察你的页面并认识到有必要去做些更有吸引力和创造力的东西来摆脱你所刚做的一些烦人的作品时，或是决定要抛弃一些以前所遵循的准则时，说明你的创造力已经摆脱了限制。在你使软件中的使用所有的框架前，得先明白适度就好。任何事一旦过了头就不太妙了。当然了，合理使用条框和分割线是突出重要信息的好方法。但如果你在所有页面都用上，或是把太多的内容放在一个框里面，重要信息就会淹没在这些拥挤的文字中。准则 - 别把页面一分为二给你的文档注入创造力和革新的最好方法是把页面分成三部分。然后将那些重要的对象：比如标题，照片，具有视觉效果的，放在顶上或是第三部分的底部。现在我们来谈谈颜色准则 - 颜色对比度越强可读性越强任何一名设计师都明白这点，文字和背景有足够的对比可以让文字更容易阅读。通常黑色字就会用在比较明亮的背景上。反过来也一样。尽管在深色背景上使用亮些的字可以让文字容易阅读些，但这个手法应该尽量保守使用。事实上已经证实了，在深色背景上阅读对比度较大的文字会让眼睛非常疲劳。准则 - 颜色要省着点用为了视觉表现较有冲击力，设计师经常选择多个颜色来做设计。但在每个地方都用到不同的颜色也会降低它的视觉效果。基本原则：为把视觉效果最大化，把颜色充分利用在标题上，并把最重要的文字写在标题上。准则 - 不要使用互补色以一个颜色为基点，可以在色盘的另一头找到它的互补色。举例来说，蓝色的互补色在色盘中是橙色。当这两个颜色紧贴在一起的时候，互补色会让我们的眼睛非常不舒服，因为这时我们无法同时聚焦在这两个颜色之上。再顺便补充一下，互补色在一起的时候会给人一种刺眼的感觉。准则 - 文字的滤色不要超过40%（滤色越高颜色越暗）任何滤色超过40%的文字阅读起来很艰难。然而，你可以通过计算颜色的明度来加以变化。比如，同样的文字，绿色可以比蓝色更暗。为了达到最佳效果，Pantone比色表能告诉你每种颜色不同的明度。另外，Pantone比色表能告诉你滤色后文字的可读性。作者：Granny's Mettle 原文：http://www.phuketsolution.com/web-design-article/basic-rules-on-page-layout-and-color.html For one to be able to stand out from the rest, one needs to go out of the box, break the rules, and some other clich?s that apply to breaking out from the traditional. But ... http://www.Inpeck.com/blog/2006/08/17/ 玩转flickr del.icio.us Digg 之完全攻略 <strong><span style="color:Blue">Flick</span><span style="color:Red">r</span>篇</strong><br/> <br/> <img align="left" src="http://www.flickr.com/images/flickr_logo_beta.gif" border="0" alt=""/><br/> <a target="_blank" href="http://www.flickr.com">Flickr </a>对于图像存储、共享和组织领域来说，绝对是具有革命性意义的，它能很方便的管理图像，能协同处理。并且提供了很多功能，如留言、批注和为你的照片添加tag，发布到任何blog上，共享和实时聊天等等。Flickr有两个主要目标，声称要成为最好的在线管理和照片共享工具：<br/> <br/> 帮助人们把他们的照片提供给有需要的人 <br/> 建立一个组织管理照片的新方法 <br/> <br/> <ul> <br/> Flickr提供的<a target="_blank" href="http://www.flickr.com/tools/">官方工具</a>：<br/> <br/> ... http://www.Inpeck.com/blog/2006/08/13/ 畅享网终于顺利改版了~~ 测试地址：http://club.vsharing.com/ 原版本地址：http://www.vsharing.com/ 畅享网介绍：热爱分享，享受成长。畅享网是各行各业众多积极进取、勤于思考的管理者的精神家园。在这里，我们交流知识、结识朋友、分享商机。她，做管理10年，她对"畅享网"的感觉＝103个二级好友＋81篇实战经验＋5个商业机会；他，做IT 8年，他在"畅享网"的体会＝12万篇资料阅读＋5个私密的圈子＋3个应聘机会。朋友、知识、商机，改变你我，成就未来。畅享网的"管理＋IT"经理人，邀请你来，畅快共享。畅享网发展背景：畅享网从1998年9月创建的"公共知识库" http://www.AMTeam.org 发展到今天，汇集了15万名管理和信息化领域的专业人士；积累了1427817篇原创文章及讨论。融汇了AMT BLOG和AMT CLUB，还有ORG知识库三条大动脉，给用户提供大量有价值信息和资料。 http://www.Inpeck.com/blog/2006/08/11/vsharing-is-updated/