{ Hauy`s blog } Inpeck.com http://www.Inpeck.com/blog 专注于用户体验、交互设计、web前端技术和web标准化建设。 Fri, 31 Oct 2008 15:48:54 +0000 http://wordpress.org/?v=2.7.1 en hourly 1 Inpeckhttp://feedburner.google.comSubscribe with My Yahoo!Subscribe with NewsGatorSubscribe with My AOLSubscribe with BloglinesSubscribe with NetvibesSubscribe with GoogleSubscribe with Pageflakes 有序列表(OL)在IE7下不能正常显示序号的bug http://feedproxy.google.com/~r/Inpeck/~3/92XQz_zXOp0/ http://www.Inpeck.com/blog/2008/10/31/ordered-list-bug-under-ie7/#comments Fri, 31 Oct 2008 15:27:17 +0000 hauy http://www.Inpeck.com/blog/?p=201 最近在工作中发现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/feed/ http://www.Inpeck.com/blog/2008/10/31/ordered-list-bug-under-ie7/ Chrome及其他浏览器内存占用情况测试 http://feedproxy.google.com/~r/Inpeck/~3/_PhoCU8ulaU/ http://www.Inpeck.com/blog/2008/10/22/memory-test-of-chrome-and-other-browsers/#comments Wed, 22 Oct 2008 13:55:55 +0000 hauy http://www.Inpeck.com/blog/?p=184 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) 

测试步骤：

  1. 每个浏览器只打开畅享网，记录其内存占用情况；
  2. 每个浏览器都打开六个网页，记录其内存占用情况，这六个网页分别是：畅享网首页、Google Reader、Google Docs、新浪首页、Adobe首页、淘宝首页；
  3. 关掉其他页面，只留下Google Reader，记录其内存占用情况。


测试结果如下：

1、只打开畅享网时，每个浏览器的内存占用情况：

2、同时打开六个网页时，每个浏览器的内存占用情况：

3、关掉大部分页面，只剩下Google reader之后：

结论：

  1. 刚开始的时候，Opera的表现最突出，占用内存最少，其他浏览器不相上下；
  2. 当打开多个页面以后，Firefox后来居上，表现优异，其他浏览器占用内存已经在200m左右；
  3. 关掉大部分窗口以后，Chrome多进程的优势开始体现了出来，大部分的内存都已经回收，已经和最初的状态差不多；
    在这个部分，Firefox的表现也令我们感到相当满意，不愧为IE最大劲敌；
    而Opera和Safari的表现平平，基本上没有回收多少内存； 
  4. 综上所述，大家不要盲目地认为Chrome的多进程功能是吃内存的大户，从Chrome的表现来看，它是一款能提高内存利用率、合理利用内存的优秀浏览器。
]]> http://www.Inpeck.com/blog/2008/10/22/memory-test-of-chrome-and-other-browsers/feed/ http://www.Inpeck.com/blog/2008/10/22/memory-test-of-chrome-and-other-browsers/ Adobe Photoshop CS4 新增及增强功能 http://feedproxy.google.com/~r/Inpeck/~3/FkgXzXNcSJs/ http://www.Inpeck.com/blog/2008/09/23/new-features-of-adobe-photoshop-cs4/#comments Tue, 23 Sep 2008 08:07:06 +0000 hauy http://www.Inpeck.com/blog/?p=176 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/feed/ http://www.Inpeck.com/blog/2008/09/23/new-features-of-adobe-photoshop-cs4/ Axure教程：用Axure模拟注册和登录的过程 http://feedproxy.google.com/~r/Inpeck/~3/R6VALKyE8eE/ http://www.Inpeck.com/blog/2008/09/23/sign-up-and-sign-in-by-axure/#comments Mon, 22 Sep 2008 16:05:42 +0000 hauy http://www.Inpeck.com/blog/?p=163 通过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/feed/ http://www.Inpeck.com/blog/2008/09/23/sign-up-and-sign-in-by-axure/ 教你关闭QQ空间 http://feedproxy.google.com/~r/Inpeck/~3/uTCNoHV3uBQ/ http://www.Inpeck.com/blog/2008/07/18/close-q-zone/#comments Fri, 18 Jul 2008 05:06:02 +0000 hauy http://www.Inpeck.com/blog/?p=160 想关闭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/feed/ http://www.Inpeck.com/blog/2008/07/18/close-q-zone/ 怎样通过Foxmail来发送完整的HTML网页文件 http://feedproxy.google.com/~r/Inpeck/~3/mulPGI_B0Ek/ http://www.Inpeck.com/blog/2008/07/08/send-html-mail-by-foxmail/#comments Tue, 08 Jul 2008 10:03:28 +0000 hauy http://www.Inpeck.com/blog/?p=158 最近经常有朋友问到这个问题，我还是写一个详细的说明比较好。

由于Foxmail提供了一个模板的功能，这个功能我们可以用来发送HTML的网页文件。

找到Foxmail的安装目录，比如 D:\Program files\Tencent\Foxmail ，为了方便起见，我们可以把需要发送的网页文件复制到 D:\Program files\Tencent\Foxmail\Template\New 目录下。

此时在Foxmail里点击 “撰写 -> 自定义” 就能看到刚才放进去的网页，选中以后就可以直接发送这个文件了。

用Foxmail发送网页文档

需要注意的是两点：

  1. 网页的文件名需要htm结尾，不能以html结尾；
  2. 网页的编码需要采用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/feed/ http://www.Inpeck.com/blog/2008/07/08/send-html-mail-by-foxmail/ Adobe Dreamweaver CS4 Beta 发布 http://feedproxy.google.com/~r/Inpeck/~3/pa2Rfs9NEnM/ http://www.Inpeck.com/blog/2008/05/28/adobe-dreamweaver-cs4-beta-released/#comments Tue, 27 May 2008 16:56:30 +0000 hauy http://www.Inpeck.com/blog/?p=154 今天下载并试用了一下，发现变得很不一样了。略微有点不适应。

Adobe Dreamweaver CS4

界面截图：

Adobe Dreamweaver CS4 截图

新增的功能有：

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。。。不过我没感觉到。。。

其他的变化

  1. 右上角增加了切换面板布局的按钮，可以在八种布局方式之间切换，还可以新建和保存布局模式；
  2. 设置文字的属性的时候会弹出设置样式的对话框；
  3. 增加了Split Code (分割代码)功能，可以在两个界面显示同一个文件的不同部分，有些时候特别方便，不用来回拖动滚动条了；
  4. 编辑窗口右下角增加的对文档编码类型的描述，比如是unicode还是gb2312；
  5. 属性面板有了很大的变化，少了很多东西；
  6. 把插件管理器单独在菜单上放一个按钮令我觉得很奇怪；

郁闷的是。。。开着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/feed/ http://www.Inpeck.com/blog/2008/05/28/adobe-dreamweaver-cs4-beta-released/ 0字节的flv文件导致vista的explorer崩溃 http://feedproxy.google.com/~r/Inpeck/~3/lKsKf3p_RUM/ http://www.Inpeck.com/blog/2008/05/14/flv-file-cause-vista-crash/#comments Wed, 14 May 2008 06:42:24 +0000 hauy http://www.Inpeck.com/blog/?p=153 今天朋友让我帮忙下载一个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/feed/ http://www.Inpeck.com/blog/2008/05/14/flv-file-cause-vista-crash/ Email页面代码书写建议及规范 http://feedproxy.google.com/~r/Inpeck/~3/hclu5CG2Gw8/ http://www.Inpeck.com/blog/2008/04/30/suggestions-of-email-document/#comments Wed, 30 Apr 2008 10:22:20 +0000 hauy http://www.Inpeck.com/blog/?p=149 前几天看到口碑网的朋友写了一篇《如何编写兼容各主流邮箱的HTML邮件》，很不错。
在这里，我也要把我的经验和大家分享一下。

众所周知，Email是一项最古老的互联网应用之一。
因此，不少邮件系统还是会采用一些比较古老的处理方式，导致前端方面很多新的技术、新的特性无法被支持。
而且各个邮箱系统以及客户端的差异，也会使email的最终呈现出现很大的偏差。

HTML细节

就目前来说，如果要做一个email页面，为了保证最大的兼容性，有以下几点需要注意：

对于纯文本邮件：

  1. 邮件标题不要超过18个字；
  2. 每行不要超过34个字。

对于HTML邮件：

  1. 邮件标题不要超过18个字；
  2. HTML代码和图片尽量不要超过50kb；
  3. 页面宽度推荐500px，最大不要超过600px；
  4. 避免使用边缘的、非主流的HTML技术；
  5. 不使用css来布局，应该使用表格来布局；
  6. 不使用外联的css样式，而使用font标签来定义样式，定义链接颜色时也是如此，写法如下： <font style="font-family:arial,helvetica; font-size:10pt; color:#000000">
    ...
    </font>
  7. 不使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML ；
  8. body和meta之类的标签是可以无视的，因为在很多邮箱系统里它会被过滤；
  9. 如果整个邮件有用到背景色或背景图，建议用以下方式处理：<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr>
    <td width="100%" height="100%" bgcolor=".....">
    <!--- 邮件内容 -->
    </td>
    </tr>
    </table>
  10. 有背景图片的时候，我们要采用这种写法：<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似乎没有屏蔽邮件内图片的功能，我也找不到相关设置的地方。

一旦图片被屏蔽，整个邮件就会变得面目全非，这里有以下一些建议：

  1. 重要内容尽量避免使用图片，比如标题、链接等；
  2. 制作一份和邮件内容一样的web页面，然后在邮件顶部写一句话，类似：“如果您无法查看邮件内容，请点击这里查看”；
  3. 所有图片都要加上alt属性；
  4. 所有的图片都要定义高和宽；
  5. 通知收件人把你的发件地址加入白名单。

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 [foo] No Yes Yes No No No No Yes Yes No No
e.className No Yes Yes Yes Yes Yes No Yes Yes Yes No
e#id No Yes Yes Yes Yes Yes No Yes Yes Yes No
e:first-line No Yes Yes Yes Yes Yes No Yes Yes Yes No
e:first-letter No Yes Yes Yes Yes Yes No Yes Yes Yes No

CSS 属性

  gmail Hotmail Yahoo Live Mail Outlook/OE AOL Lotus Notes Thunderbird Mac Email Entourage Eudora
background-color Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
background-image No Yes, but Yes No Yes * Yes Yes Yes Yes Yes No
background-position No No No No Yes * Yes No Yes Yes Yes No
background-repeat No Yes Yes No Yes * Yes No Yes Yes Yes No
border Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
border-collapse Yes Yes Yes Yes Yes Yes No Yes Yes No No
border-spacing Yes No Yes No No No No Yes Yes No No
bottom No Yes Yes No Yes Yes No Yes Yes Yes No
caption-side Yes No Yes No No No No Yes No No No
clip No Yes Yes No Yes Yes No Yes Yes Yes No
color Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
cursor No Yes Yes Yes Yes Yes No Yes Yes No No
direction Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
display No Yes Yes Yes Yes Yes Yes Yes Yes No No
empty-cells Yes No Yes No No No No Yes Yes No No
filter No No Yes Yes No No No No No No No
float No Yes Yes Yes Yes Yes No Yes Yes Yes No
font-family No Yes Yes Yes Yes Yes Yes Yes Yes Yes No
font-size Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
font-style Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
font-variant Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
font-weight Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
height No Yes Yes Yes Yes Yes No Yes Yes Yes No
left No Yes Yes Yes Yes Yes No Yes Yes Yes No
letter-spacing Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
line-height Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
list-style-image No Yes Yes No Yes Yes No Yes Yes Yes No
list-style-position Yes No No Yes Yes Yes No Yes Yes Yes No
list-style-type Yes No Yes Yes Yes Yes Yes Yes Yes Yes No
margin Yes No Yes No Yes Yes No Yes Yes Yes No
opacity No No Yes Yes No No No Yes Yes No No
overflow Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
padding Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
position No No No No Yes Yes No Yes Yes Yes No
right No Yes Yes No Yes Yes No Yes Yes Yes No
table-layout Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
text-align Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
text-decoration Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
text-indent Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
text-transform Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
top No Yes Yes No Yes Yes No Yes Yes Yes No
vertical-align Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
visibility No Yes Yes Yes Yes Yes No Yes Yes Yes No
white-space Yes Yes Yes No No No No Yes Yes Yes No
width Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
word-spacing Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
z-index No Yes Yes No Yes Yes No Yes Yes Yes No

(*) 不被Microsoft Outlook 2007支持。

]]> http://www.Inpeck.com/blog/2008/04/30/suggestions-of-email-document/feed/ http://www.Inpeck.com/blog/2008/04/30/suggestions-of-email-document/ google的Sitelinks可能会采用旧的索引？ http://feedproxy.google.com/~r/Inpeck/~3/l93eg_Whoco/ http://www.Inpeck.com/blog/2008/02/27/googles-sitelinks-may-use-old-index-file/#comments Wed, 27 Feb 2008 07:13:28 +0000 hauy http://www.Inpeck.com/blog/2008/02/27/googles-sitelinks-may-use-old-index-file/ 最近我在做理财易网站的SEO优化，
在我改了网站的标题之后很长一段时间，直接搜索“理财易”的话，SERP页面中的网站标题一直没有变。

请看截图：

google上搜索理财易google上搜索在线记账

我猜想可能google的Sitelinks会采用旧的索引文件？
不知道其他朋友有没有注意这个现象。

]]> http://www.Inpeck.com/blog/2008/02/27/googles-sitelinks-may-use-old-index-file/feed/ http://www.Inpeck.com/blog/2008/02/27/googles-sitelinks-may-use-old-index-file/ 网页的中文URL应该如何编码才能有利于SEO？ http://feedproxy.google.com/~r/Inpeck/~3/2lrt9eTmvo4/ http://www.Inpeck.com/blog/2008/02/26/how-encode-chinese-url-adapt-for-seo/#comments Tue, 26 Feb 2008 12:27:32 +0000 hauy http://www.Inpeck.com/blog/2008/02/26/how-encode-chinese-url-adapt-for-seo/ 最近在关注SEO方面的技术，碰到了一个关于中文的URL编码方面的问题。

很多朋友表示百度无法识别经过utf-8编码后的url链接。
星箭认为，是百度故意不识别utf-8编码后的url链接。
但是我注意到，这个现象应该是Google和Baidu对于编码后的url链接采用了不同的解码方式导致。

我们来看赶集网的热门标签页和土豆网的标签频道在搜索引擎中的表现：


先看赶集网的，赶集网的url编码采用了gb2312的编码方式

这是百度下的搜索结果页

赶集网在百度下的搜索结果页

这是google下的搜索结果页面

赶集网在google下的搜索结果页

我们发现，baidu将赶集网的url编码转化为中文，而google则保留了原始链接。

再来看土豆网，土豆网采用了uft-8的url编码方式

这是在百度下的搜索结果页面

土豆网在百度下的搜索结果页面

这是在google下的搜索结果页面

土豆网在google下的搜索结果页面

土豆的url被百度解码以后变成了乱码，而在google下则能正确地还原为中文。

结论：

  1. google对url采用utf-8的解码方式，百度则采用gb2312的解码方式；
  2. 对于一个网站来说，如果从baidu过来的流量比较大，可以尝试使用gb2312的url编码方法；
  3. 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/feed/ http://www.Inpeck.com/blog/2008/02/26/how-encode-chinese-url-adapt-for-seo/ 介绍一款原型设计工具 - iRise Studio http://feedproxy.google.com/~r/Inpeck/~3/PHVlEVkTiGw/ http://www.Inpeck.com/blog/2007/05/20/about-irise-studio/#comments Sat, 19 May 2007 18:43:01 +0000 hauy http://www.Inpeck.com/blog/2007/05/20/%e4%bb%8b%e7%bb%8d%e4%b8%80%e6%ac%be%e5%8e%9f%e5%9e%8b%e8%ae%be%e8%ae%a1%e5%b7%a5%e5%85%b7-irise-studio/ iRise Studio 是 iRise 公司推出的一款原型设计工具，木的 曾经介绍过这款软件。

iRise可以很方便地设计出与最终产品具有完全一致的交互功能的仿真模型，
使用户在开发之前便可以用真实的数据进行测试，大大提高了开发效率。

以下是软件的部分截图：

Detail Page Whiteboard
Detail Page Decisions

在接下来的时间里，我将详细介绍这款软件。

]]> http://www.Inpeck.com/blog/2007/05/20/about-irise-studio/feed/ http://www.Inpeck.com/blog/2007/05/20/about-irise-studio/ 这是垃圾箱吗？ http://feedproxy.google.com/~r/Inpeck/~3/n9OBtv7zdiE/ http://www.Inpeck.com/blog/2007/05/20/is-this-a-garbage-can/#comments Sat, 19 May 2007 17:42:02 +0000 hauy http://www.Inpeck.com/blog/2007/05/20/%e8%bf%99%e6%98%af%e5%9e%83%e5%9c%be%e7%ae%b1%e5%90%97%ef%bc%9f/ 上周去杭州，在延安路上吃了根哈密瓜，突然发现我找不到垃圾箱了。。。
走了很久突然发现前面有个物体看上去虽然像块板，但是很有垃圾箱的嫌疑。

垃圾箱

走上前去绕了一圈，发现果然是个垃圾箱！

垃圾箱  垃圾箱

不过把垃圾箱做成这样子，似乎有误导游客的嫌疑啊。
会不会有游客因为觉得找不到垃圾箱而增加乱丢垃圾的几率呢？

说实话我还是更喜欢这种“传统”一点的垃圾箱：

垃圾箱

]]> http://www.Inpeck.com/blog/2007/05/20/is-this-a-garbage-can/feed/ http://www.Inpeck.com/blog/2007/05/20/is-this-a-garbage-can/ 完整的CSS工具列表 http://feedproxy.google.com/~r/Inpeck/~3/VkPQdn3itJY/ http://www.Inpeck.com/blog/2006/11/01/css-tools-list/#comments Wed, 01 Nov 2006 02:16:25 +0000 hauy 用户界面

易用性检查

整理和优化

字体

表单

布局

酷站

帮助向导 / Hacks / 学习资源


  • Explains the structure of CSS- and HTML-documents. Enter semi-colon separated selectors or just paste in your existing rulesets into the “Direct Input area, or provide the URL of a stylesheet or an HTML document with an embedded stylesheet in the “URL Input area. English, Spanish, German and Bulgarian versions are available.
  • Tom Lee has a tutorial on Max-width in IE Using a CSS Expression. Word of caution: I hear using this method can be rather hairy, in some cases crashing the browser.
  • Future-proof your CSS with Conditional Comments from Bruce Lawson is a great comprehensive collection of CSS’s that, when combined, addresses most of CSS issues with different browsers.
  • IE Word Wrap Doppelganger Bug
    这个站点展示了标题(heading)元素在IE6中换行时会留个小尾巴的bug。
  • Images, Tables, and Mysterious Gaps seems like something I should’ve known already about the behavior of inline elements in strict mode. But of course it took me an hour of agony before finally realizing the ultimate truth: I’m not that smart.
  • Easy CSS hacks for IE7 — IE7下可以用的CSS Hacks。
  • 针对IE7, Firefox 1.5和Opera 8.5的Web浏览器CSS支持 一览表。
  • snook.ca on the “+ CSS hack which you can use to target IE6 and IE7 only.
  • On having layout
    提供了很多信息围绕IE其特有的“渲染概念：hasLayout — one of the major causes for headache when it comes to how IE decides to pain the boundaries of certain HTML elements: 

    • “Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其“layout得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为“尺寸bug(dimensional bugs)，意思是这些 bug 可以通过赋予相应元素某个宽度或高度解决。这便引出关于“layout的一个问题：为什么它会改变元素的渲染特性，为什么它会影响到元素之间的关系？这个问题问得很好，但却很难回答。在这篇文章中，我们专注于这个复杂问题会有那些方面的表现，某一方面的具体讨论和范例请参考文中给出的相关链接。

    这篇文章的中文翻译参见承志的SharkUI：On having layout

  • Negative text-indent and underline — No matter how far on the left the real text is, the underline will be stretched all the way to the right in some PC browsers, namely the Firefox.
  • IE6 Multi Class Bug — Again, something that could’ve brought to my attention last week!
    • …Internet Explorer fails to render backgrounds for elements that have both an ID and a class defined. For instance, #photos.background1 will display the corresponding background in IE6 for Windows, but once that has been defined, #photos.background2, #photos.background3, etc. will not be displayed.
  • Ten more CSS tricks you may not know
    包括少量的IE bug修复手段
  • The “Holly Hack — 著名的taming IE/Win CSS display bug by assigning a dimensional value such as height:1%;
  • CSS tests
    很不错的一系列CSS测试页面
  • max-width in IE
    用IE的expression来模拟max-width
  • http://imfo.ru/csstest/css_hacks/import.php
    用@import来针对不同的浏览器隐藏CSS的一系列方法。
  • Essentials of CSS Hacking For Internet Explorer
    助你对付IE的一系列建议。
  • Web 浏览器标准支持
    用图表来比较IE 6, Firefox 1.0, 和Opera 8.
  • The perils of using XHTML properly
    正确使用XML申明和MIME类型。
  • IE Double Float Margin Bug.

小贴士

]]> http://www.Inpeck.com/blog/2006/11/01/css-tools-list/feed/ http://www.Inpeck.com/blog/2006/11/01/css-tools-list/ 去掉当鼠标放到图片上时，出现下载、保存提示的图形工具条 http://feedproxy.google.com/~r/Inpeck/~3/2UJvYjfd1vo/ http://www.Inpeck.com/blog/2006/10/22/disable-ie-imagetoolbar/#comments Sun, 22 Oct 2006 04:48:43 +0000 hauy 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/feed/ http://www.Inpeck.com/blog/2006/10/22/disable-ie-imagetoolbar/ 微软正式发布 Internet Explorer 7 (IE7) http://feedproxy.google.com/~r/Inpeck/~3/Y-Wzxz74_V8/ http://www.Inpeck.com/blog/2006/10/20/internet-explorer-7-is-issued/#comments Fri, 20 Oct 2006 05:42:18 +0000 hauy 微软在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官方下载连接

安装时需要验证是否正版操作系统

安装方法：

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/feed/ http://www.Inpeck.com/blog/2006/10/20/internet-explorer-7-is-issued/ 转载：如何创建一个更好的规范 http://feedproxy.google.com/~r/Inpeck/~3/GoeCOJexwto/ http://www.Inpeck.com/blog/2006/09/23/building-a-better-style-guide/#comments Sat, 23 Sep 2006 01:29:51 +0000 hauy 作者简介：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 solve usability problems and establish consistency between applications – only to be disappointed in the results. Even if such a style guide is followed carefully, the resulting interfaces may not meet usability goals.. This paper explores strategies for creating a style guide that is more than a simplistic rules book. By making the style guide part of the process, it can be used to promote a shared vision, to help the product meet business and usability requirements for consistency and…it may actually be used.

为什么规范如此频繁的被创建，但却很少成功的？时常企业创建一个规范的目的是能够创建一致的样子和操作习惯，并且希望透过规范来解决易用性方面的问题并且能够建立不同产品之间的一致性，但结果却是让人失望。即使规范被严格的遵循，结果却是界面的样式与易用性的目标相违背。这篇文章讨论的就是如何让规范不仅仅是一个规范手册。让规范融入到开发过程中，用于提升可视的共享（a shared vision？），让产品与商业需求和易用性要求相结合等等。让它真正的被使用。

1.2. INTRODUCTION（简介）

All too many projects to improve the usability of a user interface start with a request to create a style guide. To many user-centered designers, a style guide is the documentation of a design – the end of a design process – not a starting point for usability. And yet, we continue to create them, despite that fact that they may do little to address real usability problems or create a common approach to interaction. This paper describes some tactics and techniques for creating style guides that present and organize the appropriate information in a usable structure.

很多项目为了提高用户界面的易用性从创建一个规范开始。太多以用户为中心的设计者把规范作为设计最后的设计的文档，而不是易用性的起点。我们不断地创建它，而不顾它实际上不能解决实际的易用性问题或是达成共同的交互方式。

1.3. WHAT’S IN A STYLE GUIDE?（规范中包含什么内容？）

Style guides can be classified as platform (or language) guide, general design guides, or corporate style guides for a specific application. Although they overlap in many ways, each has a different focus.

Style guides可以分为：开发语言规范（？）、通用设计规范或特殊应用程序通用样式规范。虽然他们通过许多的途径交迭，但有各自不同的焦点。

1.3.1. Platform Guides

The vast majority of publicly-available guides are in the first category. These style guides focus on rules for presentation elements, including visual design elements such as color, logos, fonts or icons; page or screen layouts including spacing, justification and common items; and the correct usage for standard controls such as buttons, drop-down selections, radio button or check boxes.

这种规范的焦点在于陈述基本原理，包括可视化控件的标准例如：按钮、下拉列表、单选框以及复选框。

This focus is understandable for style guides written for operating system platform or software languages. These guides must provide basic information for other groups using their tools to create software products, documenting the capabilities of the platform as well as providing guidance to designers. In Table 1, we see that the Java Look and Feel Guidelines and Macintosh Human Interface Guidelines have very similar tables of contents despite having been written in different eras (as computer eras go) and in different companies. The same general pattern is also followed in sections of the ISO 9241 Ergonomic Requirements for Office Work with Visual Display Terminals. Although this standard also includes guidance and requirements for physical interaction as well as two sections on task requirements and usability,most of the sections focus on visual display guidelines for dialogs, information, and user assistance.

这个焦点用于操作系统平台以及软件开发语言。这个规范同样需要提供基本的信息给那些利用这个开发语言创建其他软件的设计人员，描述系统平台的性能作为设计人员的指导。从表1，我们可以看到“Java Look and Feel Guideline”和“Macintosh Human Interface Guidelines”拥有许多相似的内容。这些常规规范也是遵循“ISO 9241 Ergonomic Requirements for Office Work with Visual Display Terminals”。

Java Look and Feel Guidelines Macintosh Human Interface Guidelines
1 - The Java Look and Feel
2 - The Java Foundation Classes		 Preface
3 - Design Considerations 1 - Human Interface Principles 2 - General Design Considerations
3 - Human Interface Design and the Development Process
4 – Visual Design 9 – Color
5 – Application Graphics 8 – Icons
6 – Behavior 10 – Behaviors
7 – Windows, Panes, and Frames 5 – Windows
8 – Dialog Boxes 6 – Dialog Boxes
9 – Menus and Toolbars 4 – Menus
10 – Basic Controls 7 – Controls
11 – Text Components 11 – Language
12 – Lists, Tables and Trees  

Table 1: Comparison of Tables of Contents for Two Style Guides

1.1.1. Design Guides(设计规范)

Design guides, especially those written for web interfaces, often take a broader view, looking at the overall structure of a site and how the user navigates through it as an important design element. They may also include a primary focus on the process for creating a usable interface design. For an example of each type of design guides compare the Web Style Guide (published on the web as the “Yale Style Manual”) and the IBM Web Design Guidelines.

设计规范特别是那些为网站而写的规范，一般给出常规界面，将描述网站的总体界面效果，以及用户如何导航作为主要的元素。当然也包括最基本的焦点，创建可用的界面设计。例如如下的两个网页规范。

Web Style Guide IBM Web Design Guidelines
Interface Design 

Basic Interface Design – Information Access –Navigation – Links and Navigation

Site Design

Site Structure – Site Elements – Intranet Design -Site Covers

Page Design

Graphic Design – Design Grids – Headers and Footers – Typography – Consistency – Tables –Page Length – Cross Platform Issues – Editorial Style – Frames

Web Graphics

Color Primer – Graphic File Formats – Illustrations – Optimizing Graphics – Tags – Backgrounds – Image Maps

Web Multimedia and Animation

Design and AudioVisual Elements – Digital Video –Digital Audio – GIF Animation

 Planning 

User AnalysisCompetitive and Market Analysis - Strategy - Content - Development Tools and Technology - Schedule of Time and Resources

Design

Structure - Navigation - Text - Visual Layout and Elements – Media

Production

Preparation - Browser Compatibility - Creating Images - Cascading Style Sheets - Final Testing – Rollout

Maintenance

Administration

e-Commerce Topics

Customer Support

Trust - Product Navigation - Product Information -Purchase Transaction

Table 2: Tables of Contents for Design-Type Style GuidesBoth of these examples offer excellent advice for a user-interface designer, but neither offers a definitive set of standards. Instead, they focus on establishing best-practices in design process and solutions for some common design problems.

这两个例子都为用户界面设计师们提供了极好的建议。但是都没有提供了最权威的标准。他们描述的重点都放在提出最好的设计过程，以及为常见的设计问题提供解决方案。

Neither the platform style guide nor the design guide provide a perfect model for creating a corporate application style guide. The first type is too detailed, and, for product teams working in a familiar environment, spends too much time on platform basics. The second is too general and usually fails to meet the need for definitive answers to basic design questions. The IBM Web Design Guidelines even states this explicitly:

无论是“platform style guide”还是“design guide”都没有提供一个创建公共应用程序规范的完美例子。第一个规范太详细，对于一个相同环境中工作的团队将会花费过多的时间在上面。第二个规范则太常规，通常不能满足为设计中的问题提供最权威的解决方法的要求。IBM的规范中提到：

“We developed these guidelines by studying a cross-section of users and sites, but there may be contexts that we did not examine. If you learn from your user feedback that a different solution works better in your situation than one we offer here, then of course you should do what works best in your situation. To provide the best Web solutions, always use these guidelines in conjunction with a usercentered design process.”

“我们通过a cross-section of users and sites创建这个规范，但是还有可能有内容我们没有调查道。如果你通过一个不同的解决方案来获取用户的反馈信息，并且能够更有效的完成，当然采用你自己的解决方案。为了提供最好的网站解决方案通常将本规范与用户为中心的设计过程相结合。”

1.1.1. Corporate Application Guides（公司程序规范）

Corporate style guides are a hybrid of platform guides and design guides. They need to provide look and feel guidelines to ensure basic consistency (or compatibility) across the applications they serve. In addition to providing reference material, a corporate style guide also serves an educational purpose, illustrating both the conceptual approach to the user interface and, often, a process to ensure that usability is built into the design from the beginning. (A sample table of contents for a corporate application style guide is included as an appendix to this document.)

公司程序规范提供公司软件的一致视觉效果以及使用感觉。另外它还起到教育的目的。例如：即达到概念上的用户界面一致，又让易用性设计不用再从头开始。

1.1.2. GOALS FOR A CORPORATE APPLICATIONS STYLE GUIDE（创建公司程序规范的目的）

This brings us face-to-face with a need to understand why a corporate style guide is created in the first place. Without knowing what problem the style guide is intended to solve, it is impossible to structure the information effectively, or to plan the process of creation, review and implementation. These scenarios illustrate three possible goals:

这给我们带来面对面的需求来了解为什么要在最初就创建公司程序规范。处了了解规范将要解决什么问题，就不可能将信息有效的组合，或如创建计划，回顾和执行。下面是可能一些目的：

Ø A senior manager says, “We need a style guide to ensure that all of our applications share a common look and feel.” The underlying business goal may be usability, but it may also be to save development time by supplying standard answers to difficult design questions. In this scenario, the style guide may be seen as the simplest executive order that can be given to solve a “problem with usability.”

一个高级管理员说：“我们创建一个规范的目的就是让我们的应用程序可以共享一个共同的外观和感觉。”潜在的商业目的就是可用性。通过提供疑难设计问题的解决权威方案来节省开发时间。从这一点看来，规范可以用作为易用性的为题提供简单的解决方案。

Ø A user-centered design group decides to publish a style guide to assist product groups in creating usable interfaces, saying, “We know a lot about what it takes to create a usable design and would like to communicate this to all of the design teams.” In this scenario, the style guide may be seen as a way to create a formal mechanism for enforcing best practices.

个以用户为中心的设计组织决定发布规范来帮助开发团队创建便于使用的用户界面。说到：“我知道许多关于它的信息，它可以开始创建一个可用的设计并且希望与所有的设计团队沟通”在这种情况，规范可能成为一种为强制执行，被用到开发实际中。

Ø A product team may wish to document their own work – “We need a way to keep track of the decisions we have made, and to communicate them within our team.” This goal is usually based on the demands of working in a large design team, or a need to hand the design work from one group to another, for example, from an outside consultant to an internal staff, or to new hires.

一个开发团队可能希望将他们的工作文档化。“我们需要一个途径使使我们已经作出的决定明了化，并能够就这些决定于我们的团队进行沟通”这个目的通常是对于一个大的工作团队的要求，或者将设计工作从一个团队传递到其他的团队中。例如：公司与顾问公司之间或给新来的员工。

These scenarios can be summarized in terms of usability goals for efficiency, effectiveness and satisfaction:

这些情节可以一归纳出团队对于易用性的目标是：有效、效率以及满意。

Usability Characteristic 

易用性的特征

 Goal 

目标
Efficient 

高效

 Improved Quality: The time required to design of the user interface will be reduced because basic guidelines are clearly documented, tools are shared, and best practice guidance is available for other decisions 

提高品质：用户界面设计所需要的时间将会减少，因为基本的指导方针已经制定，工具已经共享，基本的实践指导能够购被其他的决定所使用。
Effective 

有效

 improved Process: User interface will be able to work together better because shared design guidelines are available. Initial designs will be more effective, with less re-work to solve usability problems required 

过程得以改进：用户界面能够更好的一起工作，因为有共享的设计规范使用。最初的设计将会更加的有效，在解决易用性问题上可以减少反复。
Satisfying 

满意

 Improved Usability: The user experience will be improved, both for the designers and users. Designers will have the satisfaction of creating excellent interfaces, while users will benefit from increased usability. 

提高可用性：无论对于设计人员或是用户而言，用户体验将会被提升。设计人员满意于创建卓越的用户界面，对于用户来说将得益于易用性的提高。

Table 3: Usability Goals For Corporate StylesNone of these goals seem controversial, or unattainable, so the answer to why style guides don’t always meet their goals does not lie in the goals themselves. The problem lies in the rest of the ISO 9241 definition of usability – that is applies to specific users, in a specified context. In other words, who is expected to use the style guide and what is the cultural environment of the group for whom it is being created? Is the style guide being imposed on an unwilling audience or is it welcomed by the people who will have to use it? Is usability an accepted or novel concept? Do current products have a similar interface or are there many different approaches? Are the teams collegial or competitive (do they even know each other)?

这些目标并不是存在争议或是难以达到的，因此为什么规范与初始目的背道而驰的答案并不在目标（目的）本身，问题出在“ISO 9241”定义的易用性的其他方面——在一个指定的环境中应用于特殊用户。换句话说，谁期望使用规范？将要创建它的人所处的文化环境是什么？规范是否被其他人自愿的使用或受将要使用他们的人欢迎？易用性是已经被公认的还是只是一个想法？当前的产品是否拥有类似的界面风格或是个不相同？团队是否拥有相同的权利还是相互竞争的（他们是否互相了解）？

The answers to these questions may not change the information included in the style guide, but the process of creating, gaining approval and maintaining it must adjust to the context. Simply gaining high-level executive sponsorship is not enough. No matter how high the authority, guidelines imposed on an unconvinced audience are often followed just to the letter of the law – if not simply ignored. The worst-case outcome is a user interface design that follows all of the guidelines, but does not really work well. Its designers are likely to blame the style guide for dictating solutions which hampered the ‘brilliant design’ they wanted to create. Whether those designers are forced to live within the guidelines or allowed to make exceptions, the credibility of the work is damaged.

这些问题的大案可能并不能改变规范中所包含的内容，但创建的过程，讨论通过以及改进却依赖于这些问题的答案。简单的说只是创建一个高水准的执行任务是不够的。无论有多么的权威，对于不是很信服的人来说最多是逐条的执行，如果没有遗漏的话。最糟糕的是，结果遵循规范但实际上并不能正常工作。遇到这种情况，设计人员有必要将他们的设计向大家阐述。否则，这些设计人员就有可能不按照规范或是被允许制造特许情况，工作的可信度就有可能遭到破坏。

1.1. WHO USES A STYLE GUIDE?（谁使用规范）

In addition to clarifying the business goals for a style guide, it is also important to know who its users will be. The obvious answer is “user interface designers,” but the answer is not that simple. A more detailed analysis would include in the user group a variety of specialists, and would also take into account differences based on the stage of the project,as seen in the table below:

在澄清了企业创建规范的目的外，了解规范的使用者同样重要。最明显的答案就是“用户界面设计人员”，但是答案并不是那么简单。更多的细节分析参看下表：

User Group 

用户组

 Design Concept - Analysis Stages 

设计观念——分析阶段

 Detailed Design - QA Stages 

详细设计——质量检测
All 

所有

 What are the rules I must follow in my work? 

在我的工作中我必须遵循的规范是什么？

 Have I followed those rules? 

我是否遵循了这些规范？
UI Designers 

(Architecture or Concept)

UI设计人员

 How should the interface be structured, both for layout and navigation? 

界面将如何编排？包括界面效果以及导航？

 Does the interface fit any structural guidelines? 

界面是否遵循了结构方面的规范？
System Architects 

系统设计师

 What are the implications for the architecture of any UI decisions? 

任何一个UI的决定都有哪些含义？

 Can all of the UI requirements be met? 

所有的UI需求都实现了吗？
UI Designers 

(Detailed Functions)

UI设计人员（细节问题）

 How do individual functions fit into the 

program structure?

What screen/page or interaction templates are available?

如何让个别的功能融入到程序结构中？

哪些视觉或交互的模板可用？

 What are the rules for layout, color, etc. that the design must support? 

How should design elements be specified?

界面的颜色等方面的规范是什么？设计必要的支持是什么？

如何让设计的元素表达清楚？
Developers 

开发人员

 How should the UI code be structured to meet design requirements? 

What controls or widgets are needed?

如何让UI代码与设计的需求相融合？

需要什么样的控件或窗体部件？

 What color, styles, etc. are available to use? 

How can I match them to the design specifications?

什么颜色样式等等可以使用？

如何使他们与设计的规范相符？
User Assistance How will assistance be offered to users? 

What standard UI elements are used? How should they be documented?

什么UI元素被采用？

他们是如何被表达的？

 What assistance does a user need for this function/page/screen? 

What method should be used to include it?

哪些帮助用户需要？

采用什么样的方法来包含这些内容？
Quality Assurance 

质检人员

 Are there templates or standard approaches which can be tested globally? 

原型和标准可遵循，那些可以测试？

 Does the interface meet all standards? 

界面是否与所有的标准相符？

Table 4: Style Guide UsersFor each user group, use of the style guide shifts during the project. It starts out supplying a conceptual overview, but quickly moves into a role as a detailed reference guide. It is this mix of requirements that makes the contents of a style guide so difficult to structure.

对于任何一个用户组，都会在项目开发的过程中更替使用规范。开始与概念上的设计，但快速的移动到一个角色和详细的参考规范。正是这些混合的需求使得规范的结构难以确定。

There are two other user groups whose members often overlap with the groups listed above:

这儿有两组用户会与上述的用户交迭。

Ø Creators of the Style Guide. The group that creates the style guide needs to be able to manage this process. This includes a need to have a convenient way to review both individual sections and the entire guide, and a way to see an overview of the contents. The danger here is that because this group controls the guide, their needs will take precedence over the needs of the longer-term users.

规范的创建人员。规范的设计人需要能够对过程进行控制。包括有一个便捷的方式来回顾单独的选择以及全局的规范，以及一个察看整体内容的方法。风险是：这类用户控制着规范，他们的需求可能优先于其他的所有人员。

Ø Modifiers of the Style Guide. Any user may also fall into a group of people who want to request changes or extensions to the guidelines. To meet this need, there must be a plan for maintaining the guide over time. The danger here is that this need will be ignored entirely or only given lip service. This is especially true if the group creating the style guide feels embattled.

规范的修改人员：所有的人员都可以作为要求修改规范或扩充规范。对于这些需求，就需要将规范不断的修改。风险是：这些需求可能会忽视全局或一些无用的服务。当规范的创建人员感到困难重重的时候这种情况就很有可能发生。

1.1. CREATING AN EFFECTIVE STYLE GUIDE（创建一个有效的规范）

To be effective, a style guide must not only contain good guidelines, it must be used and accepted. The process in this case may be as important as the actual product.

要想有效，规范不仅仅包含一个好的指导方针，它同样要被使用并遵循。这个过程与实际的开发过程同样重要。

1.1.1. Process（过程）

It is impossible to prescribe a single process for all of the organizational and political contexts in which a style guide is created. There are, however, some general approaches that can be applied.

难以为如何创建规范规定唯一的处理过程。但可以采用一些常规的方法。

Ø Start early（尽早开始）

This is especially true if the style guide is supporting (or an outgrowth of) a current design effort. If you wait until the design is nearly complete to begin assembling the design guidelines, you miss the opportunity to have all design stakeholders invested in its creation and content.

如果你想在设计接近结束的时候才开始规范的编写，你将失去将所有的设计应用的机会。

Ø Make the emerging work widely available（？）

This is an important aspect of building broad support. It makes it possible to solicit comments and questions from stakeholders before the guidelines are final, and to incorporate feedback. One way to make the work available is to work in hypertext and make drafts available online, rather than trying to manage a traditional word-processing document. In a politically-sensitive environment, it can be tempting to work in private until the entire style guide is complete, delaying conflicts until ‘later.’ In any situation, there are risks in making the incomplete work available, but like evaluating an early prototype, the advantages usually outweigh those risks. One example is a situation in which a designer bases decisions on a version of a guideline that changes later. Clear identification of the status of the overall guide and each guideline is essential.

创建更为广泛的支持是一个十分重要的方面。能够在编写规范之前获得问题的解决方案。让工作可用的一种方法就是同过链接和可用的东西放到网上，而不是传统的文字方面的处理过程。在任何情况下，使用尚未完成的工作都是有风险的，但除了评估和早期的原型，他们的优势通常要比这些风险要大。清楚每个规范所处的状态并且每个规范都是最精华的。

Ø Make the process transparent（让过程透明、清晰）

Include (or make available) meeting minutes or other discussion topics. Provide links from the minutes to standards or guidelines that are discussed, so that stakeholders can follow the progress of the work. Don’t wait until an item is complete to include it for comment. Early concepts or tentative decisions (along with any discussions of alternatives) should be included as long as they are clearly identified as ‘in progress.’

包括会议记录或其他的讨论的纲要。提供讨论的内容在规范或标准中对应的链接，从而使处理人员能够遵循标准处理。不要等到任何一个对象已经完成后再添加注释。早先的观念或暂时的决定在一得到解决后就加入到“过程中”。

Ø Make the context visible（让关系可见）

Many style guides are so formal that they are stripped of any context. Many guidelines are written to resolve conflicts; others provide a definitive answer to design problems for which there are many possible solutions. Although you certainly don’t want to drag all of your ‘dirty linen’ into the final style guide, it is important that readers be able to recognize the implications of the work.

许多的规范太正规以至于忽略了一些具体的环境。一些规范是为了解决冲突而写，其他的为可能存在的多种解决方案确定一个最后的方案。让读者能够意识到规范与实际工作的联系是十分重要的。

1.1.1. Structure and Organization（结构和组织）

One of the biggest mistakes is to treat a style guide as a narrative book rather than a reference work. Only the authors and reviewers will read it all the way through. Everyone else will use the style guide to look up the information they need as they need it.

将规范作为一个叙述性的书籍而不是实际工作的参考书是创建规范的最大问题之一。只有在作者和使用者在开发的过程中不断的阅读，其他的人员则在他们需要的时候查阅规范。

Ø Put it online（将其在网络上发布）

Save trees, costs and time by distributing the style guide online. It is always surprising to see how often web teams and others creating online applications assume that their own documentation must be in a word-processing document. Avoid this trap and plan for online access from the beginning.

通过在网络上发布规范能够节省时间和金钱。它常常可以令人惊奇的发现网络上的团队以及其他的在网络上创建程序的人员将规范只是做为一个文字上的记录而已。为了避免这种情况，就必须在一开始的时候就强制联机的访问。

Ø Write for hyperlinks（为文章添加超级链接）

Use hypertext to connect related topics, link to examples and illustrations, and generally make it possible for users to browse. This also allows you to avoid repeating information in more than one place, with the associated maintenance problems which can cause.

使用超级链接关联相关的主题，实例和图表说明，并确保用户可以阅读到这些信息。这样同样可以让你避免相同的内容出现多次。

Ø Design for reference（设计目录）

Organize topics so that the most important information is at the beginning, rather than at the end of a long narrative. Only one topic should be included in each hypertext page so that topics can be linked easily. For example, if you have a description of two controls and a comparison between them, you should create three pages, with links from each control to the comparison.

组织标题，让最重要的信息在最初就体现，而不是藏在很长的叙述之最后。让每个超级链接对应一个主题，让每个主题都能够容易的到达。例如：你描述两个控件并且将它们进行比较，你就应该创建3页，每页队以一个控件以及它们的区别。

1.1.2. Contents（内容）

In distilling the language of guidelines down to the essential rules, the richness of the decision-making process is often lost. An important role for the style guide is to help the entire user interface team work better.

在规范中保留最本质的条款，但设计的过程常常没有包含进去。规范的一个很重要的任务是帮助所有的界面设计团队更好的工作。

Ø Guide design decisions（指导设计的决定）

Style guides are usually effective in documenting simple rules like colors and fonts. The problem is that few of the important design decisions can be based on simple rules; more often “it depends.” Making the guidelines helpful to designers means creating comparison tables between options (for example, showing strengths and weaknesses of lists, trees and grid controls) or providing other information to help them make good design decisions.

规范在定义简单的规则如颜色字体的时候通常是有效的。但问题是很少能够基于简单的规则来处理重要设计的决定。通常情况下它依赖于创建一个更有效的规范，提供不同方案之间的对比（例如：描述list，tree，改日的controls 这些控件的优点缺点）或提供其他的有助于帮助做出有效的设计决定的信息。

Ø Give design elements ‘mission statements’（描述设计元素的任务）

It can often be difficult to communicate the essence of a design element or interaction style, especially when guidelines are not clear-cut. Rather than bury this information in the formal (“must” and “shall”) language of standards, include a simple mission statement to explain how the element enhances the user experience. These mission statements may be the first step in creating a formal guideline, acting as a checkpoint to ensure that everyone agrees on the basic issues. In some cases, it may not be possible to create a more detailed guideline. In either case, the mission statement serves to document the intent of any later work and can be used as a test against which proposed guidelines are measured.

通常很难以讨论设计元素和交互样式的本质，特别是当规范没有表达清晰的时候。通过描述一些简单的任务来说明这些元素是如何提高用户体验的，而不是将这些信息隐含在形式上的标准。这些mission将起到检测大家已经达成共识的观点。

Mission Statement ExamplePopup windows will: 

1. Reduce the need for navigation by…(通过…来减少导航的需要)

_ showing additional detail（显示而外的细节）

_ collecting input just-in-time（实时的搜集输入信息）

2. Increase user success in navigation by..（通过…来提高用户导航的成功率）

_ providing better information scent（提供更好的信息线索）

_ showing options for actions（显示操作的选择）

_ collecting missing information（收集遗漏的信息）

3. Stop the action for a user response for…

Ø Connect design guidelines to user analysis（将设计规范与用户分析相结合）

Include documentation of user characteristics, demographics or profiles for all of the user groups considered in creating the style guide. When there is data from usability tests or other user analysis to back up a guideline, include it. This not only provides a clear user-centered basis for any decisions, but can also be helpful in determining when a guideline needs to be re-considered or expanded.

在创建规范的时候将用户分析考虑进去。当易用性测试或其他的用户分析与规范不一致的时候，将这些信息添加到规范中。这不仅仅为任何的决定提供一个更为清晰的依据，而且也对是否对规范进行重新审议或扩充起到帮助的作用。

1.1.3. CASE STUDIES（情况分析）

Two examples from Cognetics’ experience illustrate the value of using a style guide to document and support an ongoing design process:

同过连个实例来说明使用规范来指导设计过程的价值。

Ø A multi-designer, complex product

In this project, the goal of the style guide was to help a group of UI designers create an interface for a new modular product that would share a common look and feel and be very usable. Each designer worked in a small crossfunctional team on one of the modules. Weekly design meetings served as a forum to compare approaches and resolve any issues. The group created both design guidelines and programming requirements. As decisions were made in these meetings, the information was posted to a web site for review. Topics ranged from visual and layout standards to guidance on design approaches. The style guide functioned both as a collaboration and a publication tool, serving both the design group and (later) the program architects and developers.

在这个工程中，规范的目标是帮助一组的ui设计人员创建一个标准组件的用户界面，用于分享一个公用的外观和感觉。每个设计人员在一个模块的一个小功能组内工作。每个星期，设计人员对任何的问题和设计进行讨论。这组人员创建了设计规以及规范的环境。当设计人员开这些讨论会的时候，信息将会在网络上发布。规范作为协作和发布的工具，为设计小组，及之后的程序设计小组和开发小组服务。

Ø A web site for online sales of several publications

In this project, a small central design team created design guidelines for a larger group of product and content developers. Both the core group and the product teams were spread out geographically, making collaboration difficult. The style guide became a primary communication tool, with one team member assembling all of the content for the team. Easy access to the growing site also enabled the product designers to review the guidelines and ensure that the work would meet their requirements.

在这个工程中，一个小的核心设计团队为一个大的项目组，开发人员创建规范。开发团队和项目组不在一个地方工作，协作比较困难。规范则变成了主要的交流工具，当一个团队成员作好了所有的内容后很容易的根据规范来查看工作是否与他们的需求相吻合。

Although these two projects differed in terms of organization, and the development and design processes there were many commonalties:

虽然这两个项目是不同组织的团队，但在开发和设计的过程中却有很多相似之处：

Ø Initial attempts to create visual design guidelines quickly revealed dependencies on the design for of user interaction and navigation. Create a structure for the style guide that allowed us to collect (and link between) different aspects of the design as it emerged was important.

最初都努力创建设计规范，尽快显示用户的交互及连接的信息。创建规范的结构允许收集不同的设计样式。

Ø In both cases, there were many strong design voices that needed to be reconciled. Providing a forum for discussion with concrete examples helped move the conversation from “opinion wars” to a debate on the issues.

两种情况，都有许多设计问题需要解决，针对具体的例子举行讨论，将会议从提出意见到讨论实际的问题。

Ø By using the style guide as a tool during the creation of the design, the staff became accustomed to using it as a daily reference tool. In addition to the obvious value of creating a useful tool, it meant that there were fewer surprises when the guide was released.

通过将规范作为一个工具贯穿于设计的始终，每个人将它作为日常的参考工具。

Ø The inclusion of critical information for the developers, such as image libraries and style sheet examples, gave them a reason to access the sites on an ongoing basis. In one case, there was a push to add more related information to the style guide site because it was a tool which was already being used.

包含一些评论性的信息给开发人员，例如：图片库以及样式表的实例。另一方面，将会有更多的相关信息添加到规范中，因为规范被当作一个工具使用。

Ø The inclusion of design rationale with visual and interaction rules helped new designers understand the reasoning behind the guidelines. This also provided a good starting point for discussion when a decision had to be revisited.

包含将视觉和交互设计规则作为基本原理帮助新来的设计人员了解规范后面的论证。对于一个比较难见解决的问题，他意味着讨论的一个好的开始。

1.1.4. USING A STYLE GUIDE TO BUILD CONSENSUS（使用规范指导内容的创建）

Making and living with design decisions can be difficult, especially when several different products and different designers must all live with common guidelines. As a document, a style guide houses the details of the design that must be followed. As a process, the construction of the style guide can be used to create a shared design vision for the look and feel it documents. Our experience at Cognetics has been that when the style guide is the central location for all design material and its creation is part of the process, the guide itself can help build consensus among the team.

断然的作出设计的决定是比较困难的，特别是当多个来自于不同项目的设计人员必须实行相同的规范时。作为一个文档，规范收藏的设计细节必须被执行。作为一个过程，构造规范能被用于创建一个描述外观和感觉的共享的设计文档。我们的经验是当规范成为设计人员的日常参考并在贯穿于整个开发过程，那么规范本身就能够帮助一个团队创建一个一致的意见。

1.1. SAMPLE TABLE OF CONTENTS FOR A CORPORATE APPLICATION STYLE GUIDE（规范范例）

1.1.1. Introduction

Includes all front-matter and preface material, including the scope, authors, review and maintenance process and any terminology that must be established. Topics in this section include:

Ø Scope

Ø Authors

Ø Using this Style Guide

Ø Update and Maintenance Process

1.1.2. User-Centered Design Principles

Includes all basic principles and usability goals as well as any user analysis. Short general descriptions of designs that implement these principles may be included here, along with links to related documents. Depending on the scope of the style guide, this material may be very general or more specific. Related documents should include cross-references to any other corporate guidelines which affect the design or development of the user interface, including localization, corporate identity, or developer information, as well as useful design references.

Ø Design Heuristics

Ø Usability Goals

Ø User Characteristics (and sample user data for mockups)

Ø Accessibility Guidelines

Ø Related Documents

1.1.3. Design Process

The contents of this section depends on the context in which the guide will be used. This is an appropriate place to put information about a general user-centered design process (or specific techniques used). This section may also include links to meeting minutes, or to other related processes such as requirements analysis or development processes.

Ø User-Centered Design Process

Ø Relationship to the Development Process

Ø Design Tools and Templates

1.1.4. User Interface Metaphors

This section documents the user interface concept and metaphors used. It is more specific than the UCD Principles, documenting an approach to the user interface to be used in all applications included in the scope. In addition, this section may contain any general guidelines on performance or task orientation that must be considered in designing the interface architecture. It also includes an overview of how the interface will provide user assistance.

Ø UI Concept or Vision

Ø Key Metaphors

Ø User Assistance Design

1.1.5. Architecture or Structure

If the style guide prescribes a standard frame or site structure, the guidelines for it are included here. This may include the function of anchor pages such as the home page or main menu, and navigation methods or devices that are supported.

Ø UI Architecture or Site Structure

Ø Menus or Control Bars

Ø Home Page (or Desktop or Main Menu)

1.1.6. Page or Window Layout

This section includes guidelines for the overall layout of a page or window. It includes descriptions of the layout templates for each function or type of page, and should relate these page types to the overall UI architecture. It may also include guidelines for the use of specific page structures such as popup windows,wizards or frames.

Ø Page Structure

Ø Layout Templates or Grids

Ø Using Popup Windows

Ø Using Frames

Ø Headers and Footers

1.1.7. Controls

This section includes specifications and usage guidelines for all controls or other granular design elements.Depending on the development environment, this section may contain only general references or very specific display and interaction specifications. This section is also a place for aids to the designer such as control comparison charts. In some cases it is possible to include samples of each control in action so the designer can exercise it to see if it meets their needs.

Ø General Guidelines

Ø Control Comparison Charts

Ø Descriptions Of Each Controls

1.1.8. Interactions

The guidelines in this section cover the user interactions with the interface. It may include summaries of control interactions, guidelines for interface behavior or other topics specific to the product environment.

Ø Keyboard Shortcuts

Ø Mouse, Joystick, Tablet or Other Pointers

1.1.9. User Assistance and Text

This section covers all text and other user assistance associated with the user interface, including labels, prompts, help text, messages, tooltips and accessible alternative text. Writing guidelines may be provided in a single section, or included with each type of text in the interface. If there are guidelines for terminology, a glossary of terms to use should be included.

Ø Text in the Interface

Ø Labels and Prompts

Ø User Terminology Glossary

Ø Writing Guidelines

Ø Messages

Ø Status Bar Messages

Ø Error Messages

Ø User Assistance

Ø Types of User Assistance

Ø Tooltips

Ø Embedded Help

1.1.10. Common Functions

In many cases, a style guide may include designs for common functions, which are typically a group of controls, interactions or text. These may be stand-alone user interfaces such as a search function, or may be a complex element that is used in many functions. The section documents these functions, including any guidelines for their use.

Ø Required Fields

Ø Any Other Common Functions

1.1.11. Visual Design

The visual design section should be written as a reference guide, with detailed descriptions of each element and links to resources such as images or stylesheets.

Ø Logos

Ø Fonts

Ø Colors

Ø Images and Icons Styles

Ø Image Library

1.1.12. Audio and Multimedia Design

This section includes any guidelines for the use of audio or other multimedia elements.

Ø Using Multimedia Elements

Ø Audio

Ø Animation

Ø Video

总结： GUIDE LINE 编写的注意事项：

  1. 通过对比列表，写明各种方案各自的优缺点，让设计人员更好的决定采用何种方案
  2. 可以通过一些简单的例子说明规范将如何改善用户体验
  3. 在写规范的时候将用户的特性考虑进去
  4. 提出UI设计过程

如何让规范发挥效用：

  1. 尽早开始使用start early
  2. 让规范更具广泛性make the emerging style guide widely available
  3. 让规范在使用的过程中不断的修正和扩充 plan to maintain and extend the style guide over time

—— 结束 ——

]]> http://www.Inpeck.com/blog/2006/09/23/building-a-better-style-guide/feed/ http://www.Inpeck.com/blog/2006/09/23/building-a-better-style-guide/ 人物：Jakob Nielsen http://feedproxy.google.com/~r/Inpeck/~3/qVseg8Ru_RE/ http://www.Inpeck.com/blog/2006/09/23/jakob-nielsen/#comments Sat, 23 Sep 2006 00:05:13 +0000 hauy 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 of Simplicity，也对 Scott McCloud 的Understanding Comics推崇备至。「 这本书提供了对简洁性概念和在视觉沟通中如何发挥作用的提出了非凡的洞察力。」除了 Nielsen 有关 Web 可用性方面的书籍，从事电子商务网站的人也应该看看他的电子商务可用性之 219 条设计指南（219 design guidelines for e-commerce usability）。另外，Nielsen 也推荐以下几个具有可用性资源的网站，这包括他自己的useit.com、Tomalak’s Realm和Usable Web。

救赎

对于 Nielsen 来说，一个无错的网站需要实用的设计、一个精确的使用者响应系统和精简的设计。许多人对 Nielsen 将最精简设计列为第三项而感到震惊，但他马上响应说，「 我从不反对网站上以图形呈现，但是他们必须是内容的一部分。如果您在一个网页上有某人的传记，当然您需要他们的图片，但是您不需要制造一个闪烁的星状图来引起人们的注意吧！」

最后，为了阐述所有的设计者要遵循 HTML 标准和规范的重要性，Nielsen 以无所不在的交通灯为例：「 据我所知，红灯停、绿灯行是大家都熟悉的国际标准。但是，如果在一个十字路口有人决定根据自己的意愿改变颜色规范，您能想象这将发生怎样的情况吗？」

]]> http://www.Inpeck.com/blog/2006/09/23/jakob-nielsen/feed/ http://www.Inpeck.com/blog/2006/09/23/jakob-nielsen/ 转载：关于web注册页的可用性分析 http://feedproxy.google.com/~r/Inpeck/~3/s227mRU8MRw/ http://www.Inpeck.com/blog/2006/09/22/the-analysis-of-usability-about-web-register-page/#comments Fri, 22 Sep 2006 21:14:08 +0000 hauy 作者：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/feed/ http://www.Inpeck.com/blog/2006/09/22/the-analysis-of-usability-about-web-register-page/ 转载：UI设计的定义以及定位 http://feedproxy.google.com/~r/Inpeck/~3/s4huAR5YZ_0/ http://www.Inpeck.com/blog/2006/09/22/#comments Fri, 22 Sep 2006 20:45:40 +0000 hauy 作者：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/feed/ http://www.Inpeck.com/blog/2006/09/22/