熟悉Firefox的人应该都知道，当你在页面上单击鼠标中键的时候，就可以启动Firefox的Autoscroll功能，并且在页面上会出现一个提示图标。其实，这个图标是可以由前端开发人员为网站自定义的。

Google Talk是一款很简洁的即时通讯工具，不仅是界面，而且其文字输入区也非常简单，但是却有一些很精致的功能，比如加粗文字等。这些小细节用JavaScript的正则表达式就可以在Web上模拟出来。

Apple发布了iPhone的Guided Tour视频，各位等不及的可以在这里下载解解馋。从视频中可以看见，iPhone的虚拟键盘设计的非常人性化——可以根据当前场景的不同而变换按键。

《信息架构》一书中，将一个信息架构中的各种组成部分归为了四大类：组织系统、标注系统、搜索系统和导航系统。其中，组织系统的任务是决定如何将信息分类，比如：是以主题还是以时间？组织系统有它自身存在的问题，但也有很多已经形成并被接受的信息组织方案和形式。

统一的界面元素对一个网站的前端架构会很有好处，统一的元素就意味着CSS和JavaScript可以拥有很高的可重用性。 日渐庞大的CSS文件和杂乱无章的JavaScript脚本都是前端工程师比较头疼的事情。庞大臃肿的代码不但会造成客户端加载的负担，也会让前端代码变得难以管理。

现在越来越多的网页出于各种各样的原因会将页面上的一些区域（通常是div）隐藏，CSS隐藏元素的方法也有很多种，最常用也是最好用的就是display:none。可是被赋予这条规则的元素会在某些辅助设备中被认为不存在于文档模型中，所以造成该区域中的内容不可访问。

最近在拜读《Information Architecture for World Wide Web》第三版，准备好好写写读书笔记，现在是第一篇，《信息需求和搜寻行为》。

信息需求（Information Needs）
当用户出于某种目的来到一个网站时， 他真正需要的是什么？一些情况下，用户会很清楚自己在找什么，但大部分时候，用户可能并不一定知道自己究竟在找些什么。作者总结了四种可能的用户对信息的需求：
准确的信息
当用户需要非常准确的信息时，通常他已经知道自己是在查找什么，希望得到一个精确的答案。比如：查找一个同事的电话号码。
一些有用的信息
当用户希望得到一些有用的信息时，通常他不是很明确自己到底在找什么，更期望在搜索和浏览过程中能得到一些有帮助的信息，而且在这一过程中很可能会改变自己所搜寻的东西。比如：一个用户希望换一部手机，也许他会希望这部手机有拍照、蓝牙等功能，价格适中。于是他去了淘宝，大概搜索后，发现有一款摩托罗拉的不错。但是随着整个搜询过程的继续，更多合适的品牌和型号出现在他的面前，最终他会在所有候选机型中选中他心仪的那部（当然也可能一部也没有挑中）。
尽可能多的信息
当用户希望得到关于某方面尽可能多的信息时，通常他是在对某一领域进行全面研究。在这种情况下，用户需要有足够耐心在更多的搜寻结果中跋涉（我们的产品应该帮助用户更轻松地跋涉）。
需要回查的信息
由于有限的记忆力或繁忙的工作，有些信息在获取之后需要日后回查。这时候也许用户会对其进行存放和标注方便回查。比如找到一篇好文章后，由于手头其他工作，先收藏到自己的del.icio.us上，并且用“readme”、“toread”等tag进行标注。
下面是作者针对这四种信息需求所绘的图 ，我对其进行了翻译：

信息搜寻行为（Information-Seeking Behaviors）
了解了用户对信息都有哪些类的需求，下面就来看看他们通常是如何满足自己这些需求的，即用户的信息搜寻行为。
用户的信息搜寻行为可以分为三种：搜索（Searching）、浏览（Browsing）和询问（Asking）。这三种行为通常在一个搜寻过程中都会出现。
针对搜寻行为又有两个主要模式：整合（Integration）和反复（Iteration）。整合是说在一个搜寻过程中，搜索、浏览和询问这三种行为会并存。反复是说在一个搜寻过程中，三种行为会反复地、无序地出现。
根据以上的理论，人们提出了两种主要的信息搜寻行为模型：采摘模型（Berry-Picking Model）和增长模型（Pearl-Growing Model）。
采摘模型是由南加州大学的Marcia Bates博士提出的，是说用户的信息搜寻过程从一个点（比如一个组关键字，或是一个链接）开始，随着过程的深入，用户会在整个信息系统中反复转移来获取他们需要的信息。这种模型要求系统在信息架构设计时，能够让用户很容易地在搜索和浏览之间来回移动。举两个例子：

先搜索，再浏览：在Google键入关键词后，有时结果页会给出与关键词相关的Google Groups的内容，供用户浏览；
先浏览，再搜索：进入Google Groups后，可以在浏览某个Group的内容后，在这个Group内部进行搜索。

增长模型是说，用户在一个搜寻过程中往往以一个或几个关键词搜索开始，并且明确知道自己需要得到的信息。但随着过程的深入，用户会需要更多类似于目标信息的信息。一个典型的例子就是Google在每条搜索结果后都有“Similar Pages”，给用户提供更多相似结果。
==
在实际的产品设计时，需要设计人员（产品经理也好、信息架构师也罢）清楚地了解自己用户的信息需求是什么，针对此需求能够建立什么样的信息搜寻行为模型。这样再针对此模型进行信息架构的规划和设计，就能使用户更高效地找到自己需要的信息。

Jesse James Garrett将Web分成了两个层面：超文本内容的载体（hypertextual information space）和网络应用的用户界面（remote software interface）。其实几乎每个网站或多或少都会兼有这两个层面的部分，只是比重不同罢了。工具类网站，比如Gmail、LinkedIn，它们更多地是以网络应用的用户界面形式出现的；而内容性网站，比如新浪、Microsoft.com，更多以内容载体的形式出现。而还有一些介于中间的网站，比如FaceBook、豆瓣等等，他们自身是一个网络应用工具，但却也是内容的载体，而这些内容并不是由网站创作，是用户通过使用网站创建出来的。
其 实这两个层面在一个网站中所占比重不同，会对网站界面的风格产生很大影响。越工具化的网站界面应该越干净，就是说非功能性的内容以及和当前操作无关的东西 应该尽量地少。而内容性地网站却应该尽量在一个页面中把所有用户当前需要了解的信息全部呈现出来，因为页面跳转是有成本的。
前一阵因为工 作关系一直在尝试FaceBook，对它的交互设计着实佩服！很多细节设计使得用户在使用是感觉很舒服，而且还很有意思，特别喜欢它的Poke功能以及 Poke的icon。但是，作为一个有社区性质的网站，FaceBook过于个人化的设计可能会使用户无法得知外界发生着什么。
比较来说，更喜欢豆瓣的设计，和FaceBook类似，用户界面也很简洁，能第一时间把需要的信息呈现给用户，没有旁枝杂叶，不需要为不相干的事情去分心。而与此同时，又能够感受到整个社区其他用户的存在和活动，对于一个沟通导向的网站来说这一点对用户体验很重要。
说到底，用户界面的设计也好，信息架构的设计也罢，最重要的是给用户需要的，把不需要的暂时先藏起来，当需要时，再拿出来。

前几天在弄公司的统一线上规范，其实就是用户界面元素的统一。感觉这个东西对于一个拥有自己网站的企业 ，尤其是对于互联网公司来说太重要了。

首先，用户界面元素要符合企业的整体视觉识别（VI），是企业VI以及企业文化的体现。就拿英国石油（BP or bp）的www.bp.com来说，它的用户界面元素都强烈渗透着企业VI，而且完全统一：

所有链接都用了和logo最外层的绿色（#009D32）很接近的安全色（#009900）；
按钮背景色同样使用了这种绿色；
二级标题都采用了和logo第二层颜色（#B0C512）很接近的安全色（#99CC00）；
当航元素的背景采用了和logo第二层比较接近的安全色；
需要突出的部分，背景使用了和logo第三层颜色（#FEEA11）非常接近的安全色（#FFFF00）。

其他地方还有很多类似的，使得整个bp.com虽然没有用过多的icon之类的来修饰，但是整个网站仍然显得很丰富，而且感觉很清新，和bp清洁能源、重视环境宣传都非常吻合。
其次，用户界面元素要有统一的规范，即完成相同任务的元素应该用相同的表现方式，这样使得用户只需要一次学习时间。这个表现方式应该包括三个方面：

视觉设计，即用户不通过任何操作，直接从元素的颜色、修饰、图标等等方面就可以看出其作用。比如Google把其所有的Tags（或者叫Labels）都使用了相同字号、相同字体和相同颜色；
交互设计，即用户在激活该元素时会得到的来自计算机的反馈。比如很多网站的链接都使用了鼠标滑过时链接文字加下划线、Flickr统一的直接点击文字来编辑的交互方式；
信息设计， 即对功能的文字描述，使得用户更容易的去理解。这一点在很多网站按钮文字的定义上表现得很明显，比如“提交”这个功能就会跟随着其具体功能发生不同变化， 但有些变化的确时不必要的，例如在按钮上加上“马上加入俱乐部”，倒不如只用“创建俱乐部”或者干脆就是“提交”，因为用户在填写表单时已经很明确自己是 在创建俱乐部了，除非创建一个俱乐部需要两步以上，否则最好不要增加用户的思考。

用户界面元素统一在实际的执行过程中会遇见很多问题，比如人员的调动、文档不够清晰、项目进度的调整、版本的更新、公司策略的调整等等。不过还是有很多成功的案例，比如Google的Rich Text Eidtor，包括Gmail、Docs & Spreadsheets等都在统一；www.bp.com也是一个成功的例子。

今天和同事说起了Facebook，之前只登陆过一次。于是再次登陆，体验了一把，终于找到了“看了就想用”、“看了就想点”是什么感觉！
Facebook的UI非常注重细节，很少能见到这样的网络应用。之前看Facebook的界面，从视觉上就感觉很cute，但还没有到吸引人去用的地步。但是当在里面点击了几次鼠标之后，就会变的越来越想继续点。整个应用对Ajax运用不亚于Flickr，大部分交互都极其符合习惯。
值得研究，先记下一笔！