http://www.Inpeck.com/blog 专注于用户体验、交互设计、web前端技术和web标准化建设。 Fri, 31 Oct 2008 15:48:54 +0000 http://backend.userland.com/rss092 en 最近在工作中发现IE7在处理有序列表时有一个bug。 情况如下： 把ol中的li设置css属性overflow设置为hidden或者auto时，列表的序号将不能正常显示。如图所示： 同时，当list-style-type属性设置为lower-roman时，只显示罗马字母i， 同理，设为lower-alpha时，只显示小写字母a。 经过测试，其他浏览器均未发现此现象。 在网上搜索了一番，仍不知是何种原因导致这种情况出现，希望诸位指点。 另外，我在IE8里面测试了这个页面发现干脆连前面的序号也不显示了， 由于IE8现在还在测试期，所以不能肯定在将来还会有这个bug。IE8下的表现应该是符合标准浏览器的解析方式。 即当list-style-position属性默认为outside时，序号就显示在li这个box之外了， 所以overflow设置为hidden时，序号自然就不显示了。 另外，IE7还有这个现象： 在正常情况下，list-style-position属性设置为inside时，序号能显示在li这个box之内。 但是当overflow设置为hidden时，即使将list-style-position属性设置为inside，序号仍然出现在li这个box之外， 此时，上述的bug也会发生。 测试页面地址请点击这里。 http://www.Inpeck.com/blog/2008/10/31/ordered-list-bug-under-ie7/ Chrome出来已经有一段时间了，或褒或贬各执一词。 有个关键的争议点是：Chrome的多进程架构是否合理、能否提高系统运行效率？ 于是我突然想做个简单的测试，比较一下各个浏览器的内存占用情况。 测试环境： 系统：Windows Vista Ultimate 中文版，安装了SP1 CPU：Intel Core2 Duo T7250 内存：DDR2 533 3G 测试软件（均为英文版）： Chrome 0.2.149.30 IE 7.00.6000.16386 Firefox 3.0.2(仅安装了少数常用插件，比如Firebug、Web Developer Toolbar等) Opera 9.60 Safari 3.0.4(523.15)  测试步骤： 每个浏览器只打开畅享网，记录其内存占用情况； 每个浏览器都打开六个网页，记录其内存占用情况，这六个网页分别是：畅享网首页、Google Reader、Google Docs、新浪首页、Adobe首页、淘宝首页； 关掉其他页面，只留下Google Reader，记录其内存占用情况。 测试结果如下： 1、只打开畅享网时，每个浏览器的内存占用情况： 2、同时打开六个网页时，每个浏览器的内存占用情况： 3、关掉大部分页面，只剩下Google reader之后： 结论： 刚开始的时候，Opera的表现最突出，占用内存最少，其他浏览器不相上下； 当打开多个页面以后，Firefox后来居上，表现优异，其他浏览器占用内存已经在200m左右； 关掉大部分窗口以后，Chrome多进程的优势开始体现了出来，大部分的内存都已经回收，已经和最初的状态差不多； 在这个部分，Firefox的表现也令我们感到相当满意，不愧为IE最大劲敌； 而Opera和Safari的表现平平，基本上没有回收多少内存；  综上所述，大家不要盲目地认为Chrome的多进程功能是吃内存的大户，从Chrome的表现来看，它是一款能提高内存利用率、合理利用内存的优秀浏览器。 http://www.Inpeck.com/blog/2008/10/22/memory-test-of-chrome-and-other-browsers/ Adobe的官方网站上已经放出了CS4系列新增功能的中文介绍。 关于Photoshop CS4，新增的功能有： 创新的 3D 绘图与合成 3D 对象和属性编辑 新增调整面板（以前菜单里的那堆） 新增了蒙版面板（Masks panel） 流体画布旋转（可以随意旋转画布） 对原功能进行了加强的有： 图像自动混合（似乎很神奇） 更顺畅的遥摄和缩放（缩放、定位图像位置） 内容感知型缩放（看上去很神奇） 层自动对齐 更远的景深（就是上面那个图像自动混合功能。。。） 增强的动态图形编辑 更好的原始图像处理（Camera Raw 5 插件） 等等 不知道什么时候可以在市面上看到？ 详细内容可以查看这里：中文版 英文版 http://www.Inpeck.com/blog/2008/09/23/new-features-of-adobe-photoshop-cs4/ 通过Axure，我们可以做很多事情。 我们甚至可以建立起一套和真实网页几乎完全一致的页面原型。 今天我要给大家介绍怎样通过Axure内置的变量来模拟注册和登录的过程。 Axure的变量功能相对还是比较简单的。 注册的过程，就是用组件中的值对变量进行赋值。  登录的过程，就是把组件中的值和变量对照，如果相等，就可以登录，反之则不允许。 首先，我们要在菜单 Wireframe -> Manage Variables 项里设置好我们需要的变量： 在注册页面上，我们也需要几个文本框，把他们的Label设置为Username、Password和Email。 然后我们在提交的按钮增加一个交互事件。 在点击提交按钮的时候对变量进行赋值。 注册过程大体上就是如此。 当然我们也可以加入很多判断和提示内容，比如检查Email 地址是否合法，用户名的长度是否超过要求等等。 这些都看自己的需要了。  然后是登录的页面。 登录页面通常只需要Username和Password两个文本框， 在提交表单的时候判断这两个值是否和变量中的相等就可以了。 登录时可能需要设置好几个Case，比如用户名不匹配如何、密码不匹配如何等等。 提交时判断用户名密码是否一致的交互事件设置如下所示： 判断一致，则跳转到登录成功页面。 整个过程非常简单，Axure确实很容易上手。 不过做这个原型的时候我也发现两个问题： 一、 无法直接在widget上显示变量的值 比如说我要在登录后的界面显示“欢迎你！某某某！”，后面的某某某想从变量里取，就没办法。 二、设置条件判断时不能进行综合设置，无论有几个条件，只能设置单一的与和或。 比如我登录的时候可以输入Username登录，也可以输入Email登录，那么现在似乎就没有办法。 现在我只能设置(Username“等于”变量里的Username，而且Password“等于”变量里的Password)。 不能设置((Username“等于”变量里的Username 或者 Email“等于”变量里的Email) 而且 Password“等于”变量里的Password) 关于这两点缺陷，不知道大家有没有什么好的办法？ 或者Axure在这方面还有我不知道的功能，希望大家可以一起交流探讨。 本案例所涉及的rp文件可以点此下载。 HTML原型可以点击这里查看。 http://www.Inpeck.com/blog/2008/09/23/sign-up-and-sign-in-by-axure/ 想关闭qq空间很久了，一直不知道怎么关，今天，经群里的铁马指点，终于知道怎么关掉qq空间了。 过程很简单，只要访问这个地址：http://imgcache.qq.com/qzone/web/load_login_2.htm 填一下个人资料、密码、验证码，然后做一个调查，就可以马上把qq空间关闭了。 只是关闭了qq空间以后，想要再重新开通的话，我还没找到什么办法。。。可能要联系客服？ http://www.Inpeck.com/blog/2008/07/18/close-q-zone/ 最近经常有朋友问到这个问题，我还是写一个详细的说明比较好。 由于Foxmail提供了一个模板的功能，这个功能我们可以用来发送HTML的网页文件。 找到Foxmail的安装目录，比如 D:\Program files\Tencent\Foxmail ，为了方便起见，我们可以把需要发送的网页文件复制到 D:\Program files\Tencent\Foxmail\Template\New 目录下。 此时在Foxmail里点击 “撰写 -> 自定义” 就能看到刚才放进去的网页，选中以后就可以直接发送这个文件了。 需要注意的是两点： 网页的文件名需要htm结尾，不能以html结尾； 网页的编码需要采用GB2312，不能用UTF-8。修改方法如下： 打开网页，点击右键看编码，如果是简体中文(GB2312)，那就不用改了，如果是Unicode(UTF-8)，那就需要修改，修改的时候用记事本打开网页文件，找到类似 content="text/html; charset=utf-8; 的代码，把utf-8改为gb2312，然后另存为，编码选择ANSI，文件类型选所有就可以了，覆盖原来的网页文件。 http://www.Inpeck.com/blog/2008/07/08/send-html-mail-by-foxmail/ 今天下载并试用了一下，发现变得很不一样了。略微有点不适应。 界面截图： 新增的功能有： 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/ 今天朋友让我帮忙下载一个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/ 前几天看到口碑网的朋友写了一篇《如何编写兼容各主流邮箱的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/ 最近我在做理财易网站的SEO优化， 在我改了网站的标题之后很长一段时间，直接搜索“理财易”的话，SERP页面中的网站标题一直没有变。 请看截图： 我猜想可能google的Sitelinks会采用旧的索引文件？ 不知道其他朋友有没有注意这个现象。 http://www.Inpeck.com/blog/2008/02/27/googles-sitelinks-may-use-old-index-file/ 最近在关注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 公司推出的一款原型设计工具，木的 曾经介绍过这款软件。 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/ 用户界面 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/ 微软在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/ 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/ 作者：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/ 作者：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/