易栈网-膘叔

信息架构的定义

根据维基百科的定义，信息架构（Information Architecture， 简称IA）是在信息环境中，影响系统组织、导览、及分类标签的组合结构。它是基于信息架构方法论，并运用计算机技术 管 理和组织信息的一个专门学科。信息架构并非一开始就应用于网站设计，其起源于情报科学，最初应该是用于图书馆等地方的信息组织和信息检索的。

《用户体验的要素——以用户为中心的WEB设计》这本书中对信息架构的定义基于网站设计：信息架构着重于设计组织分类和导航的结构，从而让用户可以 提高效率、有效地浏览网站的内容。

具体的就不再多说的，可能各有各的理解，这里直接来看一个实例——Wordpress的信息架构模式：

当然，上面这个图只能展示一个大体的网站信息架构，中间的类目层也许不止一层，会有大类、子类、子子类……底层可以是文章也可能是页面或者一些其他 的具体内容。而网站的内部关系也往往因为全局或局部导航、网站内链和内容关联等功能的存在而复杂的多，图上的箭头也会密集很多，但我们无需罗列所有内容间 的关系，关键是在理清基本的结构。

信息架构的类型

还是参考《用户体验的要素——以用户为中心的WEB设计》中对信息架构的几个分类：

层次结构（Hierarchical Structure）

也叫树形结构，是最常见的网站信息架构模式，上面举例的Wordpress的信息架构就是典型的层次结构。树形结构中箭头的方向不一定是自上而下 的，也可能是自下而上或者是双向的，而内容层之间也会因为一些关联链接的存在而存在同层次间的指向箭头。

矩阵结构（Matrix Structure）

矩阵结构比较注重“维”的概念，即从多维的角度来检索信息，如时间、地域、内容分类等，典型的应用就是内容管理系统（CMS）网站或者电子商务类网 站，比如你浏览豆瓣的电影时可以筛选：2010年—美国—科幻，也许这个时候《钢铁侠2》就呈现在你面前了。

线性结构（Sequential Structure）

看到线性结构也许你马上会想到面包屑，它将网站中最重要的一个信息架构路线展现了出来，即使它无法为你提供你在网站上的平面坐标，但至少它显示了你 现在正处于关键线路的哪个点上；当然，网站的一些关键路径一般也是按照线性结构涉及的，比如用户注册流程或电子商务网站的购买流程等。

网站分析与信息架构

根据网站业务模式的不同，可以选择适合自己网站的信息架构的模式，无论是上面的哪种信息架构模式，只要设计和运用合理，用户便能够在你的网站上以最 方便的形式、最快的速度找到他们需要的信息。

但当我浏览某些网站时，有时真的会让我感觉到“找不到北”，结果就是直接关闭该页面，如果不希望让已经进入了你的网站的用户轻易地离开，网站信息架 构的好坏将直接影响网站的用户体验。所以我们需要通过一些方法来检验网站的信息架构是否满足用户的信息检索的需求。

1.尝试整理出类似上面例子中的网站信息架构图

这个是最简单最直观的方法，如果你的网站信息架构足够清晰，那么画出这样的图对你来说也绝非难事；而当网站的应用比较复杂、内容比较宽泛，那么可能 要整理出网站的整体信息架构就会相对困难，但我相信一个设计优秀的网站只要稍加整理，大体的信息架构图还是画得出来的；而当你绞尽脑汁就是理不清你的网站 的信息架构的头绪的时候，那么说明你的网站需要优化了。

2.通过网站分析的方法验证信息架构的合理性

本文的副标题是“让用户更容易地找到需要的信息”，所以我们需要分析用户是否能够在你的网站上方便快捷地找到他们需要的信息，这里推荐一种方法—— 寻找网站中的迷失用户（Lost Visits）。

在一个合理的信息架构下，大多数的用户是不会在你的网站上迷路的；反之，混乱的信息架构会导致大量的用户迷失方向，就像是进入了一个巨大的迷宫。那 么如何寻找这些迷失用户？我们可以先分析下这类用户的行为，最明显特征的就是：连续点击好几个页面，每个页面都只是初步浏览（因为没有找到他们需要的信 息）就转到另外的页面或直接离开了。所以我们可以借助网站分析中的两个度量：

浏览页面数（Depth of Visit）：一次访问中用户总的浏览页面数；

页面平均停留时间（Avg. Time on Page）：一次浏览中用户在每个页面的平均停留时间，即该次访 问总停留时间（Time on Site）/该次访问页面数（Depth of Visit）。

我们可以用户细分的方法把那些浏览页面数较多，但页面平均停留时间较短的用户浏览看作是迷失用户，具体的数值可 以根据网站自身的特点进行定义，比如我定义我的博客中浏览页面数大于等于4，而页面平均停留时间小于等于15秒的Visits为迷失用户的浏览行为，我们 可以借助Google Analytics中的高级群组（Advanced Segment）来 区分出这类用户，关于如何使用Google Analytics的高级群组功能，可以参考蓝鲸的文章——Google Analytics功能篇—高级群组，如下图：

当然，你可能会说这种用户区分的方法不准确，这类用户不一定就是迷失用户，也有可能他们确实找到并浏览了具体内容，但因为内容不够吸引人或者其他原 因而马上离开了该页面。所以这里用高级群组划分出来的这类Visits的数量不能看作是迷失用户的一个绝对数值，我们只能认为里面的大部分Visits都 是迷失用户，而不排除存在某些另类。所以更合理的方法是通过计算这类Visits占网站总Visits的比例情况来分析网站的信息架构到底是否合理，我们 可以在Google Analytics上面选取网站的All Visits和Lost Visits进行比例和趋势的比较，如下图：

网站中迷失用户浏览的所占比例只需通过Lost Visits/All Visits就可以计算得到，但这个时候你还是无法根据这个计算结果来评判网站的信息架构到底是好是坏，因为还缺少一个基准线（Benchmark）或 者说是评判标准。在Google Analytics上面的Visitors标签下，提供了“Sites of similar size”的基 准比较（Benchmarking），你可以选择与你的网站相似类型的网站作为基准线进行数据比 较，这的确是个很好的参考，因为通过比较能够更加明确你的网站在同类型网站中的优势和劣势，为网站优化指明方向。GA借助其强大的数据平台可以为我们提供 基准线，但也许对于上面这个例子会显得无能为力，这个时候需要我们理性地自己去选择一个合适的基准线，比如我的博客目前类目和内容都还比较少，那么我可能 会定义我的网站的迷失用户比例应该控制在1%以下；但如果对于一个应用和内容比较复杂的网站，那么基准线显然会需要定得更高一点。一旦某段时间的数据越过 了基准线，就需要关注一下网站的信息架构是不是在趋于混乱了，是不是该进行一下整理和优化了。

总之，一个好的信息架构能够帮助用户更容易地找到他们需要的信息，从而有效地提升网站的用户体验，所以，尝试着去优化下你的网站的信息架构。如果你 有更好的方法能够有效地检验网站的信息架构的优劣，或者能够明确地分析得到网站信息架构的哪些细节上存在缺陷，希望能与我交流，我期待网站分析方法在优化 网站信息架构方面的更多的应用。

原文来自：《优 化网站信息架构》。

不过，如果你看过《胜于言传》这本书，其实就会发现，上面的内容和该书有一点雷同，只是胜一书中讲的更多的是如何改善用户体验，让用户看到更多的东西（指有效内容），如果你没有读过，还真是推荐看一下的。点击进入当当书店选购该书。

该书在当当中可是没有差评的，书的简介也真的很简单：

无论是居家还是办公，只要是在网上，我们通常都想快速地获取和使用信息。我们上网不是为了寻求某些问题的答案，就是为了完成某些任务——搜集信息、只阅读 我们需要的内容。我们都很忙．根本没有时间阅读网站中的太多内容。
本书会帮你为网站用户成功地撰写内容。它为网站内容的创建和修改提供了相应的策略、流程和方法。它有助于你对网站内容进行规划，组织、撰写、设计和测试， 从而吸引用户不断地光顾你的网站。
Ginny Redish大师介绍了如何创建有用、可用的网站内容。Ginny大师曾指导过许多写作人员、信息设计人员和内容负责人员，向他们传授过编写网站的原则和 秘诀。帮助他们创建了易于浏览、易于阅读且易于使用的网站信息。
这本具有实践性和教育性的书籍可以帮助所有创建网站内容的人更出色地完成他们的工作。
本书特色：
·全书用全彩图和来自真实网站的例子 清晰地阐述了内容编写原则。
·实例中带有改进前后的对比效果，写作的风格简明易读。
·包含针对网络版新闻稿、网络版法律声明和网 络版其他文档的具体原则。
·为了让有特殊需求的人们也可以使用网站，介绍了相关的编写技巧。

如果真想把内容当成主打对象，这本书还是值得购买的。

对firefox不停的在做优化，因为。。。实在没办法了，插件一多，FF吃内存就厉害多了。所以就在不停的想法办法。比如我把内存虚拟出128Mramdisk出来。把firefox的cache目录设进去。然后又发现，还有这个软件，可以把firefox使用到的sqlite进行一下优化（我没明白优化啥，难道是象mysql的碎片整理？）不过，不管它，先用一下下喽。。。

官方认为：The method used in SpeedyFox is 100% safe for your profile (e.g. bookmars, passwords, etc), it's well documented and tested on many computers.灰常安全。。

看了上面这张图，我基本确认应该是碎片整理，以及（可能）清空了一些已经废弃的数据。

这是一些优化firefox的奇技淫巧之一，我也是转载来的。
firefox是我最常用的浏览器（没有之一，最常用的就是它，没有其他的），从开机到关机，浏览器都在运行。除非是addon updater后的重启或者我新装了add-on后的重启，其他时间，就一直开着。
家里的笔记本还好，4G内存，随便我挥霍，单位只有2G，经常会发现FF占了4~500M左右的内存。所以当有个优化技巧在我面前时，我还得选择了尝试。目前尚未看出效果，估计时间还短效果还没有出来。

OK，打开你的Firefox，在地址栏内键入 about:config

转帖的来源：

http://blog.sunshow.net/2007/02/%E8%BD%AC%E8%BD%BD%E4%BC%98%E5%8C%96firefox%E7%9A%84%E6%96%B9%E6%B3%95/

http://blog.sunshow.net/2006/12/%E8%BD%AC%E8%BD%BD%E8%AE%A9%E4%BD%A0%E7%9A%84firefox%E5%92%8Cie%E8%B7%91%E7%9A%84%E6%9B%B4%E5%BF%AB/

Yslow是所有使用firefox的用户都应该安装的插件之一吧。最早，yahoo把网站优化的14条策略放在程序里，就以此来测试，后来根据小说《第二十二条军规》，增加到了22条，如今，它已经拥有34条策略了。
帕兰映像上有了翻译，我就不客气的转载了。毕竟让我翻译的，恐怕到明年我都翻译不出来。哈哈

原文来自帕兰映像：http://paranimage.com/yahoo-given-34-web-acceleration/

Yahoo给出的包括Yslow规则（22条）的34条 详细说明 ，通过这此规则对自己页面进行一次全面的分析优化，可以提高你网站的加载速度。

1.Minimize HTTP Requests 减少HTTP请求

图片、CSS、script、flash等等这些都会增加http请求数，减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件，页面里直接写入图片也是不好的做法，应该写进CSS里，利用 CSS sprites 将小图拼合后利用background来定位。

2.Use a Content Delivery Network 利用CDN技术

CDN 确实是好东西，8过服务器提供商的这项服务一般是要收费的，我以前买的国内空间是有这个的但是我当时根本不知道啥用，现在没了。。。

3.Add an Expires or a Cache-Control Header 设置头文件过期或者静态缓存

浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。不过这样如果页面里的东西变动的话就要改名字了，否则用户端不会主动刷新，看自己衡量了~ 这项可以通过修改.htaccess文件来实现。

4.Gzip Components Gzip压缩

Gzip格式是一种很普遍的压缩技术，几乎所有的浏览器都有解压Gzip格式的能力，而且它可以压缩的比例非常大，一般压缩率为85%。压缩没压缩，可以到 这里 做下测试。

5.Put Stylesheets at the Top 把CSS放顶部

让浏览者能尽早的看到网站的完整样式。

6.Put Scripts at the Bottom 把JS放底部

网站呈现完毕后再进行功能设置，当然这些JS要在你的加载过程中不影响内容表现。

7.Avoid CSS Expressions 避免CSS Expressions

CSS表达式很可怕，这个只被IE支持的东西执行时候的运算量非常大，你移动一下鼠标它都要进行重计算的，但有时候为了做浏览器的兼容必须要用到这个||| IE6去死去死！~

8.Make JavaScript and CSS External 将JS和CSS外链

前面讲到了缓存这个事情，一些较为公用的JS和CSS，我们可以使用外链的形式，譬如我就是从Google外链来的Jquery文件，如果我的浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件，那么他在浏览我的网站的时候就不需要再进行下载了！~

9.Reduce DNS Lookups 减少DNS查找

貌似是要减少网站从外部调用资源，我的Google分析和picasa的外链图片都算在里面了。

10.Minify JavaScript and CSS 减小JS和CSS的体积

写JS和CSS都是有技巧的，用最少的代码实现同样的功能，减少空白，增强逻辑性，用缩写方式等等，当然也有不少工具也能够帮你实现这一点。

11. Avoid Redirects 避免重定向

再写入链接时，虽然“http://www. today-s-ooxx. com”和“http://www. today-s-ooxx. com/” 仅有一个最后的“/”只差，但是结果是不同的，服务器需要花时间把前者重定向为后者然后进行跳转，这个要自己注意，也可以在Apache里用Alias 或者mod_rewrite或者DirectorySlash解决。

12. Remove Duplicate Scripts 删除重复脚本

重复调用的代码浏览器并不会识别忽略，而是会再次运算一遍，这当然是大大的浪费。

13. Configure ETags 配置ETags

搞不清楚咋回事，总之我是在. htaccess里把它删除了。

14. Make Ajax Cacheable 缓存Ajax

Ajax是实时响应的，在浏览器接收到新的数据前，旧的数据被缓存，这样能够更好的提高效率。

15. Flush the Buffer Early 尽早的释放缓冲

当用户进行页面请求时，服务器端需要花费200到500毫秒时间来拼合HTML，将写在head与body之间，释放缓冲，这样可以将文件头先发送出去，然后再发送文件内容，提高效率。

16. Use GET for AJAX Requests 用GET方式进行AJAX请求

Get 方法和服务器只有一次交互（发送数据），而 Post 要两次（发送头部再发送数据）。

17. Post-load Components 延迟加载组件

最先加载必须的组件进行页面初始化，然后再加载其他，YUI Image Loader 是很好的例子。

18. Preload components 预加载组件

提前加载以后可能用到的东西，和延迟加载并不冲突，它的目的是为后续请求提供更快的响应，参见Google首页上的CSS sprites应用。

19. Reduce the Number of DOM Elements 减少DOM元素数量

复杂的页面结构意味着更长的下载及响应时间，更合理更高效的使用标签来架构页面，是好的前端的必备条件。

20. Split Components Across Domains 跨域分离组件

页面组件多个来源可以增大你的平行下载量，但注意不要过多，超过2-4个域名会引起上面说到的DNS查找浪费。

21. Minimize the Number of iframes 减少iframe数量

需要更有效的利用 ifames。
iframe 优点：有利于下载缓慢的广告等第三方内容，安全沙箱，并行下载脚本
iframe 缺点：即使为空也会有较大资源消耗，会阻止页面的onload，非语义

22. No 404s 不要出现404页面

站点本身里（非搜索结果）出现404页面，无意义的404页面会影响用户体验并且会消耗服务器资源。

23. Reduce Cookie Size 减小Cookie

Cookie在服务器及浏览器之间的通过文件头进行交换，尽可能减小Cookie体积，设置合理的过期时间，能够很好的提高效率。

24. Use Cookie-free Domains for Components 对组件使用无Cookie的域名

对静态组件的Cookie读取是一种浪费，使用另一个无Cookie的域名来存放你的静态组件式一个好方法，或者也可以在Cookie中只存放带www的域名。

25. Minimize DOM Access 减少DOM的访问次数

JS访问DOM是很慢的，尽量不要用JS来设置页面布局。

26. Develop Smart Event Handlers 开发灵活的事件处理句柄

DOM树上过多的元素被加入事件句柄的话，反应效率肯定会低，YUI事件工具有一个 onAvailable 方法可以帮助你灵活的设置DOM事件句柄

27. Choose < link >over @import 使用< link >而非 @import

在IE中使用@import就和在页面底部用< link >一样，我们前面说要把< link >放顶部的。

28. Avoid Filters 避免过滤器的使用

如果需要Alpha透明，不要使用AlphaImageLoader，它效率低下而且只对IE6及以下的版本适用，用PNG8图片。如果你非要使用，加上_filter以免影响IE7+用户。

29. Optimize Images 优化图片

将你的GIF转为PNG8会是个减小体积的好办法，另外有很多方法处理你的JPG及PNG图片以达到优化效果。

30. Optimize CSS Sprites 优化CSS Sprites

在CSS Sprites中竖直并尽量紧凑的排列图片，尽量将颜色相似的图片排在一起，会减小图片本身的大小及提高页面图片显示速度。

31. Don’t Scale Images in HTML 不要在HTML中缩放图片

图片要用多大的就用多大的，1000X1000的图片被width=”100″ height=”100″以后，本身的KB数是不会减少的。

32. Make favicon. ico Small and Cacheable 缩小favicon. ico的大小并缓存它

站点的浏览器ICO应该不是经常换吧，那就长时间的缓存它，并且最好控制在1K以下。

33. Keep Components under 25K 保证组件在25K以下

iPhone不能缓存25K以上的组件，并且这还是要在被压缩前。

34. Pack Components into a Multipart Document 将组件打包进一个多部分的文档中

就好像在邮件中加入附件一样，一个HTTP请求就够了，但是这一技术需要确保你的代理支持，iPhone就不支持。

一直在考虑是不是要换到wordpress, sablog用了这么长时间，也算是有感情了的。只是，他一直不更新，而且前台模板用的那种定界符做模板处理，我很不习惯。
以前coolcode.cn也是用的wordpress，后来转到了sablog上面。如今，我却想转到wordpress上面。。。不知道是进步还是退步。

也曾想过重写前台，请了两个朋友帮我做页面，结果现在是程序写了一半，页面做了一半，离完成看来是遥遥无期了。。

所以，记录下这个文章，方便以后真的要转换的时候，也能做个参考。。

» 阅读全文