阿石的日志 » 信息架构

体验新版豆瓣

ashnotes — Thu, 04 Mar 2010 07:04:59 +0000

在上一篇日志《豆瓣改版分析》中理了一下豆瓣改版的背景和原因，这次通过亲身体验来明晰新版豆瓣的亮点与瑕疵。

1 首页导航

彻底颠覆了旧版的传统二级导航，以弱化一级强化二级并中间横线分割的形式将社区、读书、电影、音乐等产品与其下面各自的子频道展开。这种导航设计其优点是迎合了“扩充产品线和深化产品服务”战略目的，以便于豆瓣运营人员对各自自产品深耕细作的同时，新用户和老用户各取所需，社区噪音不干扰原创积累；缺点是违背了导航设计的演化特征，固有的信息找寻路径要么新增一步、要么难以发现，让老用户一时无法接受，另外也让有的用户看上去觉得乱而晕。如下图豆瓣旧版导航与抬头新版导航对比

2 豆列调整

豆列调整无疑是这次新版豆瓣豆油们反应最强烈的。每个混合了书影音三类条目的豆列都会出现以下让用户指定豆列类型的情境。豆列这款产品设计的初衷是让用户整合个人偏好的主题，将散布于豆瓣千万书影音条目以豆列的形式串接在一起，深得豆油们喜爱，艺术的共通性是她们的信念！然而这次豆瓣改版将这些混合豆列指定类型，且在用户实施过程中出现条目丢失、清空等这样那样的bug，让豆油们骂声一片！针对豆列这种一分为三的意图，正如豆油樱桃程所质问调侃：

“未来都是湿乎乎的了，豆瓣还想把自己榨的干巴巴的吗”

3 信息设计冗余

新版UI设计简洁、干净，信息密度分布适中，显得更加大气。但也有种种不合理的信息设计依然存在

例如站内搜索中的站内搜索，豆瓣的站内搜索一直为人诟病，但这种将自己弱点二次暴露的就少之又少了。如豆瓣各分站点如音乐站内搜索的冗余设计，对用户来说搜索功能看不出差异性，画圈处1完全可以去掉。尤其是令人不解的是豆瓣音乐画圈处1还有radio筛选选项，多之又多，令人不解！

豆瓣每次改版都能给业界带来震撼，更多的是前期招致大量豆油愤青的辱骂、甚至是抵制！从这次改版的“一天之内的惊鸿一瞥到小规模的A/B test” 发布模式也可以看出豆瓣团队的成熟，越来越学会倾听用户的声音和心跳。产品设计既需要满足用户的需求，也要照顾商业利益的发展，两者相辅相成，内容定中间。从豆瓣官方博客开始新一轮规模化招人可以看出，我们相信阿北有实力为我们提供更丰富、更实用的豆瓣式服务，总之豆瓣的演化进程值得期待。

附上新版豆瓣信息架构，以便大家快速了解查阅！（点击URL链接查看http://mind42.com/pub/mindmap?mid=b8a7d1b7-f385-47f0-ac4d-98bf65e58c4f

————————————20100421阿石的日志标记的分割线———————————————–

阿北的一句“新版导航的加强版上线了。读书和音乐首页还有问题，正在修正。”引起了众多豆油围观。新版豆瓣一直在小步快跑式的优化中，让我们看看这次变化点。

1 弱化一级导航、强化二级导航，独立站点更加显现。

终于撤掉了之前一条又粗又长的分割线，一级导航栏目改为左右式，看上去匀称好多，也舒服好多。同时加大二级导航栏目文字和区块，书影音独立站点的策略得到强化。

2 强化站内搜索

首页站内搜索终于将之前的站内搜索由“输入框+下拉菜单+搜索按钮”模式简化为“输入框+搜索按钮”，对豆瓣用户来说省事不少，也符合日常使用通用搜索引擎的搜索习惯，这也是豆瓣同仁对自己站内搜索技术自信的表现。但各子站点的双重站内搜索的功能性冗余依然没有改变，不知为何？

豆瓣改版分析

ashnotes — Sat, 27 Feb 2010 16:00:19 +0000

从上个月新版豆瓣昙花一现，到这次新版豆瓣小规模测试，相对于上一次07年底改版一样招致很多老豆油们一片质疑，这次改版却引起了老豆油们更加强劲反弹。从阿北在《豆瓣变形记》后面生机勃勃的评论中可以看出，这次他们抱怨的不是新版豆瓣的发布模式，而是整个豆瓣架构的重新调整以及部分功能修改对豆油们的情感伤害，综合起来大致有以下三个原因

1 读书、音乐、电影独立运营

2 豆瓣社区，豆瓣也要buzz嘛？

3 破坏已有豆列生存规则，将豆列分流

（注：豆列是豆瓣网友将书籍、音乐、电影中有某种共同特征的具体条目打包成一个链接，方便资源的整合与传播，是豆瓣网友们辛勤编织的劳动成果）这其中第3个破坏已有豆列影响最恶劣，于是就有了豆油发起了《反对豆列分拆大签名!》，截止目前有1414人参加。而这些都说明一方面豆瓣在演化进程中充满争议；另一方面令人羡慕是阿北有着这么一群可爱的豆油拥趸发表意见、指出不足，无论如何对豆瓣的发展是值得庆幸的！

写这篇文章的目地一是为了了解豆瓣这次改版的用户反馈；二次是利用信息架构、信息设计等UE知识分析下这次豆瓣改版的背景和原因，以供同行切磋。下面对豆瓣改版的背景和原因进行分析。

可能大家在争论豆瓣这次藐视书影音艺术“通用性”的同时忽视了以下两个因素：

一是豆瓣网在2009年底拿到近1个亿的二轮投资，规模化商业进程开始逐渐启动，阿北及其团队需要扩充产品线和深化产品服务迎合资本方；

二是之去年中开始和腾讯、百度等合作开放平台嵌入应用而带来的近3kw新用户爆发性增长，海量新用户产生的噪音干扰豆瓣最为宝贵的财富且将自身定位为小众而高端老用户，迫使他们担心豆瓣变质迫使自己离开，这也就是阿北在《豆瓣变形记》提到的担忧——“高度活跃的社区对书影乐服务内容可能的干扰，比如社区内的人际冲突会波及到评论和条目内容”。

看清了以上两个原因之后就可以明白新版豆瓣的信息架构调整，一方面建立豆瓣社区，统一整合用户空间、线上线下社区功能，强化广播（微博、buzz，没办法大势所趋）属性，照顾腾讯空间过来的新用户行为习惯；另一方面是将读书、音乐、电影以独立二级域名形式独立运营，以便日后对老用户提供更好的服务，当然了，也不排除“将鸡蛋放在3个篮子”说法，降低豆瓣运营风险；然而这次豆瓣效果究竟如何呢，请看下一篇《体验新版豆瓣》，敬请期待！

Axure 组件变量值传递妙用

ashnotes — Sat, 23 Jan 2010 01:57:29 +0000

Axure 是产品原型设计的一大利器，其所作出每一个原型都有以下组件（ widget ）构成，如文本块（ Text Panel ）、矩形框（ Rectangle )、按钮（ button ）、文本输入框( Text Field )、以及让众多 Axurers 喜爱的动态层面板（ Dynamic Panel ）等。正是因为这些功能形态各异的组件组成了一个产品的基本框架、原始形态，而每个组件都可以拥有一个名号–标签（ label ）,通过对标签命名、组件变量赋值就可以作出一些令人惊喜的交互效果。

一、利用组件变量赋值值传递

淘宝改版了，但淘宝的登录入口还是没变，可见阿里人对淘宝登录入口的自信。

利用 AxureRP 5.6 做的原型(下载RP文件请点击 taobao-login-axure ，查看效果请点击这里)，如下图

步骤分解如下：

1 如上图,建立帐户名和密码两个输入框,分别打上 user 和 password 标签( label )，便于登录按钮识别判断

2 新建立动态层面板（ dynamic panel )，将面板命名为 error ，右键将其隐藏

3 由于有帐户名和密码两个输入框需要鉴权判断,因此需要至少建立两个动态层显示判断异常错误.右键 error 动态层面板，新建两个动态层,分别命名为 user_error 和 password_error

4 编辑两个动态层，如将 user_error 编辑为“用户不存在”、将 password_error 编辑为“密码不匹配”，这里只考虑简单的两个判断，登录前端后端鉴权多达几十种判断都可以在 error 动态层里面显示

5 关键一步，编辑 case 条件对输入框赋值并进行判断：点击登录按钮, Axure 右上侧会出现”注释&交互”栏，建立两个 case 条件：一是当帐户名输入框 user 不等于 ashnotes.com 时，在 error 动态层面板触发显示 user_error 动态层；二是当密码输入框 password 不等于123456时，在 error 动态层面板触发显示 password_error 动态层，具体步骤如下图所示。

3 由于有帐户名和密码两个输入框需要鉴权判断,因此需要至少建立两个动态层显示判断异常错误.

右键error动态层面板，新建两个动态层,分别命名为user_error和password_error

6 最后是 case 条件的处理来控制 error 动态层面板，及其他出错提示。在实际运用过程中由于 case 判断过多的情况下，可以在需求书上加以详细描述，便于后台开发人员了解判断逻辑及编码。

二、利用标签命名值传递

京东的订单核对页在处理新老收货人信息,点击修改者切换到输入新地址状态，保存则回到填写好的地址状态，只有切花，交互清晰明了，值得模仿、推荐。

利用 AxureRP 5.6做的原型(下载RP文件请点击 360buy-confirm-axure ,查看效果请点击这里)，如下图

1 新建 modify 和 address 两个动态层面板，每个面板新建两个层，各自对应命名为1、2号层

2 具体原理是对动态层面板各组件命名，交叉触发显示，即利用 modify 的1号动态层同时触发显示其本身的2号层及 address 的2号动态层；modify 的2号动态层触发显示其本身的1号层及address的1号动态层。呵呵，说起来拗口，点击“修改”和“关闭”后看看效果就知道了

——————————————————-阿石的日志分割线————————————————–

备注：丁宇同学曾在《从“产品需求文档”（PRD）到“产品设计文档”（PDD）》提出将产品原型与PRD融在一个文档中。这是一个很好的倡议，但得基于产品与开发两方的深度认可。毕竟axure的独门利器集中于快速交付html交互产出物 ，在产品设计沟通、体验模拟、展示演说方面才是他的初衷，而PRD更多的是产品研发过程中所需要的详细雕琢的文档。

Axure RP及广磊兄

ashnotes — Fri, 18 Dec 2009 06:08:02 +0000

Axure RP 作为一款“快速实现、准确表达、带有交互效果且易于上手”的原型设计工具，在 UE ( user experience ,用户体验）越来越受到互联网行业产品经理、策划、和公司领导重视的今天，Axure 已经可以和office类软件、脑图软件在产品设计过程中产品设计人员 UED 实践过程的必用善软，可以称谓为“三大产品设计利器”。但是在这款工具在实际运用过程中却有一些争议。

“做出来的效果怎么这么山寨啊，一点都不好看”，有的市场负责人、公司领导如是说
“把原型直接做成 DIV+CSS 不是更好吗?直接给程序套不是又快又省事嘛”，有负责前端的同学就是这样干的
“操作难度大，学习成本高，还是洋文的！”，新人还未上手埋怨道

之所以出现以上争议现象，是因为在现今互联网行业精细化运作与领导拍脑袋加拍板、传统个人站长“一人可以搞定一切”相互碰撞的结果，而这种结果就误解了 Axure 这款工具需求的初衷。

在 Axure官网下面有用三个单词组成的原型设计流程图“设计、体验、展示”，这也道出了无论是个人打法还是团队协作，都需要先做好信息设计、搞定流程交互，然后在正式上马之前还要给个人大脑呈现或大家面前 demo 展示一下这样的工作进程。但是问题出来了，信息设计 word 可以做，流程 visio、excel 也可以搞，演示用 ppt 也能代替为何非要用另外一套 Axure 呢？这其实是个好问题，很多人用Axure的人避而不答，一味的追新立意。Axure作为一款快速原型设计工具，其核心特点是快速产出html交互产出物，在领导拍脑袋之前也有时间让他看看跳跃于众人脑袋中的需求模型呈现效果如何；也可以让市场、开发人员一起过来碰碰，碰一下市场策略在页面如何展示、开发实施可行性等，一旦遇到修改意见Axure可快速迭代保存并发布给各团队角色进行二次PK， Axure 在团队之间沟通高效率在这里就体现出来了。论及个人，word、excel等善软能够vba高级编程、 div+css 实现也未尝有何不好，所谓“草木竹石，皆可为剑”，如何使用工具表达信息架构，让用户用较少的时间和思考完成信息找寻及将一款工具用到极致人机合一才是王道。但交互演示、团队沟通这两方面功效目前还没有工具和Axure媲美的。

关于 Axure 操作难度，阿石认为较难的无非是 dynamic panel （动态面板，Axure 的层，可以制作弹出框、Tab等）和一些传值调用（可以赋予逻辑条件相关值，可以一次控制N个层），看看官方视频、切合自己实际摸索基本也都会了，在这里推一下尹广磊兄，我与广磊兄07年在网上相识，当时都在搞育儿项目。他的webppd网站产品原型设计论坛集中了国内原型设计的实战高手和各种axure实践经验分享，而他本身就是Axure大拿，为人热肠有求必应，且是axure.org域名的持有者，为Axure在中国产品人员的普及做了很大的贡献，可谓 Axure 在中国的布道者，有什么问题和想法可以去看看，看看总有收获。

Protonotes:在线原型注释工具

ashnotes — Thu, 26 Nov 2009 08:54:40 +0000

Protonotes，顾名思义，是由prototype和notes和两个单词组成的合成词，翻译为“原型注释”，之所以加上在线二字，是因为产品团队制作原型时可通过Protonotes官方提供的数据库和自己设定的数据库，把相关的注释文字写进数据库、团队协作查看，让文本注释在线随时随地查看，方便沟通需求的好工具。

使用Protonotes也超级简单，不须下载任何工具，通过网上注册，填写邮箱地址申请团队协作码（groupnumber）。注意查收来自info@protonotes.com的电子邮件，内容一般如下：

Welcome to Protonotes!

Using Protonotes is easy. Your Protonotes group number is EkfN4pUZF8BG. All you need to do is copy and paste the code below into the of any page of your prototype:

……….

这个回复邮件目地是告诉申请人两件事情：
一是团队协作码EkfN4pUZF8BG，这应该是随机并唯一的。任何团队成员共享一个团队协作码，便于统一使用查看；
二是在原型（如axure生成的index.html)插入 JS代码段，便于加载Protonotes；

这里要说明的是JS代码段必须插在原型html页面的和之间，并随时保证网络链接通畅。
下面是官方的测试页面和截图 http://www.protonotes.com/test-protonotes-out.html

团队任何成员通过嵌入的Protonotes导航，可以在原型页面任何位置新建、拖曳、查看备份注释标签，并传到Protonotes给用户设定官方数据库，为数据安全隐私起见用户自己也可以设定数据库来同步注释文本。无论如何，团队成员只要通过以下链接都可以查看注释文本（备注：其中groupnumber是都各自不同的，这里是阿石自己申请的）

http://www.protonotes.com/get-all-group-notes.html?groupnumber=EkfN4pUZF8BG

如果是自己设定的数据库，Protonotes会在设定数据库完成后分配一个privetedb码，具体查看

http://www.protonotes.com/get-all-group-notes.html?groupnumber=EkfN4pUZF8BG&privatedb=SdT68P9ab0yp

AxureRP本身是带有注释功能，但在展示透明效果略差以及缺少注释同步备份功能上，虽然有团队share功能，但在给领导演示、产品展示方面Protonotes有可乘之机～稍微不足的是Protonote不支持中文，中文打注释时会出现乱码。另外我自己利用Protonotes的注释效果，也欢迎各位有兴趣的同学在上面打注释，：）http://www.ashnotes.com/experience/i-dong-game-center/

网上商城广告页是否需要面包屑导航

ashnotes — Thu, 05 Nov 2009 11:47:41 +0000

【背景知识】

电子商务在中国各地四处开花，深度运营是任何B2C团队日常工作的必备思想，根据市场策略、产品特征，需要设计师制作各种各样的专题页、促销页，这里同统称“广告页”。

面包屑导航，又叫层级菜单，之所以叫面包屑导航，是起源于格林童话中hansel 和 gretel仍在森林的面包屑踪迹，而防止自己迷路。可用性大师Jakob在起官网 《面包屑导航在主流网上商城广告页的现状》
广告页作为各大网上商城搞活动运营的必备良药，其在网站的层级结构中一般为“首页 > 广告页”的二级模式，为了维护管理，可能还需要“首页 > 专题 > 广告页”等更多层级模式（这一点可在各大网站链接结构可以看出来）。然而广告页作为市场领导宏伟战略的高地、页面设计师肆意发挥艺术才华的自留地，面包屑导航却甚少得到二者的青睐，如：

凡客的广告页 http://www.vancl.com/zhuanti/yrf_091104.htm 没有面包屑导航
拍拍的广告页 http://www.paipai.com/promote/2009/10/lf/?PTAG=20041.5.4 没有面包屑导航
京东的广告页http://market.360buy.com/hd/ganentehui1091103/index.htm 没有面包屑导航
新蛋的广告页http://www.newegg.com.cn/xdv/CommonSale.aspx?SysNo=435&cm_sp=insitebulliten-_-Campus-ambassador-_-Christy 有面包屑导航

看到这些主流的网上商城，还有无论是淘宝还是鼎鼎大名的amazon，广告页都没有标识面包屑，让人甚是不解。那不禁让人发问：广告页不需要面包屑导航吗？

【为什么需要面包屑导航?】
Jakob在文章指出，80%美国年度获奖的网站都使用了面包屑导航，而之所以使用，无外基于以下几点：

显示用户浏览网站的当前位置
一次点击直达网站结构最高级（首页）
在用户可用性测试中，用户使用面包屑导航没有发生问题
占页面很少位置（潜台词：既然很少，为何不用呢？）

【网上商城广告页是否需要面包屑导航?】

按照Jakob说法，究竟是否使用面包屑导航，起实质是偏重网站结构与还是照顾用户浏览行为问题。试想一个用户刚来一个网站（首页），或才浏览了一个页面，对用户来说“我在哪里并不重要，重要的是网站能给我带来啥”，这时网站结构是主要问题，如何在页面设计中给用户造成很好的逻辑清晰、来回自如的页面效果是用户期望的；而当用户逛了N个页面，从A目录跳到B目录，从公告跳到专题，来来回回，象“hansel 和 gretel迷路”的那样的用户体验感就会产生，此时照顾用户浏览行为就成为主要矛盾，面包屑导航就成了必要。

【小结】

广告页作为一个单独页面，来源路径无外是网上商城首页广告、营销电子邮件、第三方网站广告，在此之前可以说用户浏览前置路径是NULL，用户在此网上的浏览轨迹几乎是零，如何给用户呈现最佳页面效果是主要的，因此“占用空间、破坏美感”的面包屑导航是可以缺失的。但若是方便用户查看历史广告页管理，由于在在“首页>广告页”中加入了“首页>广告列表页>广告页”要给用户呈现列表，此时面包屑导航则不可缺少。

站内搜索的演化——淘宝篇

ashnotes — Tue, 20 Oct 2009 13:10:40 +0000

淘宝今天正式公测它的站内搜索.在“大淘宝”的思路下，之前风传淘宝会推出一款搜索引擎以和百度抗衡，但就现在发布的公测效果来看，淘宝搜索还是面向于淘宝的卖家和买家，而不是所谓的”通用搜索引擎”.也有人称是独立搜索，由于采用的是二级域名，我们依然可以将其称为站内搜索的升级版。由于上次在《谈谈站内搜索》中提到淘宝，通过站内搜索的易用性、信息设计方面对其深入探讨，分享给大家。

1 提升搜索易用性，挖掘技术也很重要

通过比较旧版的淘宝站内搜索，和新的升级版的淘宝站内搜索，会发现一些有趣的事情。例如以“魅族”关键词为例，旧版得出的结果为“在当前分类中共找到“魅族 ”宝贝1394件” ,而在新版中得出的结果为“找到相关宝贝27286件”。由此可见在搜索数量在新版比旧版“挖到”得更多。在精确性的比较上，旧版的搜索原理是在“魅族”其所属分类上进行检索，搜索前几项都是魅族的MP4产品；而在新版中出现的则是人气极高的M8，当然也是“装作用户”的我想要的。因此，在搜索的数量和精确度上，新版提升了原版站内搜索的易用性。另外对比二者的链接也有意思：

淘宝站内搜索旧：http://search1.taobao.com/browse/0/n-g,67enpzi——-2——-b–40–commend-0-all-0.htm?ssid=e-s1&at_topsearch=1
淘宝站内搜索新：http://search.taobao.com/search?q=%F7%C8%D7%E5

以上是以“魅族”为关键词作为搜索案例，能辨析出淘宝搜索的技术转变，如果对比于百度的链接，则淘宝的志向可不容小觑。
百度搜索：http://www.baidu.com/s?wd=%F7%C8%D7%E5

2 以用户为中心的信息设计

信息设计是是“人们对信息进行处理的技巧和实践，通过信息设计可以提高人们应用信息的效能”。站内搜索的目地是在纷繁芜杂的商品大海中找到用户心仪的那颗“针”，中间步骤是越少越好，前提是又不能丧失搜索结果的精确性。淘宝站内搜索旧版的搜索结果中首屏一般呈现不是搜索结果，而是杂七杂八的分类、筛选条件、以及淘宝商城的“横插一脚”，整个搜索结果的信息设计没有照顾“用户要看搜索结果”的核心需求，可谓是陷入了泥淖，大大降低了用户查询结果、“寻针”的效率。

新版不同，继承了旧版的布局，在砍掉过多分类、去掉过多筛选、对重要信息字段的信息设计，给人的感觉是清新、简单、易用，用户对搜索核心诉求得到了释放。如以下细节

B区淘宝推荐类目、将相关搜索的智能推荐提到筛选区的位置之上加以强调，
C区对人气TAB标签内容中用户关注的销量、运费、价格等信息的设计重视，淘宝商城以icon小图标的形式建议区分，而非以广告栏的形式既节约、有效利用页面区域，又能保证搜索的公正性；
D区掌柜热卖虽然压缩了旧版的信息展示高度，信息集中、一览无余的同时，还提示卖家做“直通车”的广告，对卖家用户来说这样的信息设计也是个提醒作用。

（阿石备注：据腾讯科技，淘宝高管路鹏称不做竞价排名，要学Google那样在搜索结果右侧推出广告位）

3 对产品质量的谦卑，关注用户反馈

在现在互联网大行于世的“快速发布，逐次迭代”的产品发布模式，产品的变动在所难免，对应的对产品质量缺要求越来越低，在这一点尤其表现在对用户反馈的重视上。在新版淘宝站内搜索底部，一句“搜的不爽？！我要说两句”深获我心。看看淘宝自己认为不足的选项也很有意思，前四项都聚焦与搜索的精确性上，其次才是信息设计，再次是搜索响应速度，无论与否，这都是构成搜索用户体验的要素。

淘宝自从去年屏蔽百度爬虫，到今天的独立发展站内搜索，已经在实质上实践着站内搜索的演化，下一步该如何走？或许百度的框运算也可供其未来发展参考模式，欢迎阅读阿石前面写的《谈谈站内搜索》，敬请指正！

信息架构的十大误区

ashnotes — Fri, 09 Oct 2009 13:13:52 +0000

Jakob Nielsen是可用性工程方面的大师，在其可用性信息技术网站上有一篇关于信息架构方面的文章，觉得不错，翻译如下：

信息架构的十大误区

内容大概：框架结构和导航设计要紧密联系，且要和站内搜索、整个子网站相辅相成。要知道信息架构的复杂度、不一致性、隐藏的选项以及臃肿的用户界面设计等因素妨碍了用户寻找她们想要的信息,Jakob Nielsen从两个方面来阐述信息架构的十大误区：一是框架结构误区、二是导航设计误区。

一、框架结构误区

1、没有框架结构

最显著的框架结构问题是当产品设计师将网站视为一个混乱的大沼泽地，对个性化类目忽视一般组织结构原理。是的，用户可能通过使用站内搜索、当下促销的链接、外部网站来到这个大沼泽地并有可能找到“大鱼”。但无论用户怎么挖掘也仅此而已，因为她们没有机会了解网站的其他产品信息和当下相关的类目。而这个问题普遍存在于那些将文章资讯页、产品详情页视为独立单元而不牵涉其他相关信息的新网站和以分类为基础的电子商务网站当中。毫无疑问，用户会立即离开这样的网站。

2、没有整合过的站内搜索与框架结构

我们老早就知道用户表现出的由搜索主导上网行为的偏好(阿石注：例如传统购物习惯AIDMA到现在AISAS的转变）。但这并不意味着搜索就是她们所需要的全部。通过搜索来到某个页面的概率好比一个伞兵空降到一个指定城市，就像你要去巴黎，你期望在那里着陆而不是在阿姆斯特丹（荷兰的首都）那样，因此在任何情况下，你都不太可能精确到达你最喜欢餐厅的门旁。要到达那儿，你还得亲自走走，甚至需要打的。与此类似，用户经常需要在搜索“着陆地”附近可浏览其他相关性内容（阿石注：类似于百度的相关搜索和淘宝站内搜索的智能推荐）。

当然，局部导航只有在一个网站拥有一个良好的框架结构去定义相关性内容的前提下才能起到作用（看看误区1就知道）。但是产品设计师必须向用户展示局部可选项，如果针对用户的查询的关键词显示其他相关的词语的话效果更好。

在每次搜索触发展示了它的结果页和网站结构，SERP(搜索引擎结果页）的可用性则得到提高。象Google那样的外部通用搜索引擎则做不到上述效果，因为其并不了解网站内部的框架结构以及其自身的导航维度展示效果和一般通用网站别无二致。尽管如此，你还是应了解你的网站的框架结构，然后将这些信息集成到你的SERP上去（这一点很像站内搜索与通用搜索的区别，详情请见阿石的日志《谈谈站内搜索》）。

然而非常不幸的是，大多数网站并没有将站内搜索与网站的框架结构紧密结合起来，这一点被另外一个通病放大：导航设计中并没有显示出用户的当前位置。也就是说，当用户点击一个搜索结果之后，她们并不能决定她们在网站哪个位置——比如当你搜索到裤子，却点击了一个鞋子，但这时没有其他方法告诉用户查看更多裤子。

3、登陆页消失掉的分类目录

我们强烈建议网站需要建立一系列的分类目录，这样每个分类类目都链接到她们各自的登陆页（阿石注：landing page，对应于网络推广或营销的概念的某个页面，详情请看)，使得用户可以预览每个分类的视图。有的网站放弃了这个预览页面，只是简单的提供链接直接链到详情页。这不仅会减少网站的页面数，而且当如果没有二级次要页面被显著标明，用户会完全不理解网站的范围，错过重要的细节、产品和服务信息。

分类目录页还可以对SEO有帮助，因为它们是用户搜索一个特定产品、服务或信息后最有可能“着陆”的地方（阿石注：一般类似二级页面的分类目录页关键词丰富且密集，更容易被搜索引擎抓取靠前）。分类目录页也还是解决误区2中的问题，因为她们可以在搜索将用户带到一个完全讲究细节的详情页时帮助用户在网站的一级或二级结果跳跃浏览（面包屑导航就是拥有这样的功能方便用户很容易向上一级结构返回）

4、过多的层次结构

与现实世界相比，在线虚拟世界最大的好处是个体类目可以存在于多个地方。因为网站按照多个维度层次对产品信息和其他内容信息进行区分，他们可以帮助用户浏览其他相关类目、提供多方面的产品信息空间且可管理配置的列表，以满足用户在这方面的主要需求。

这样的处理方法大多是好的，但过多的层次结构往往变成为依赖性很强的“拐杖”。相比花很多时间建立几个直觉性良好且逻辑严密的高级分类类目而言，团队往往会匆忙完成这个进程，随之会建立数以倍计的的弱分类和产品列表。那么可用性的影响？用户花了大把时间挣扎在高级分类类目上，当他们在多个维度层次上发现次级类目时会被搞得晕头转向。

伴随着太多的分类选项和太多的层次结构，用户被迫艰难思考下一步该怎么走，并导致用户质疑网站提供的信息线索。这些产生在早期网站体验过程中的不自信，会衍生到用户往下的浏览体验过程，并对最终结果带来消极影响（如放弃购物车）

5、次级域名站点与微型站点和主打站点融合度差

由于老套的市场营销策略，被遗弃的微型站点（阿石注:在大型集团中由于产品丰富、营销策略多样性，而针对某个产品或营销而推出独立域名的网站站点）大量充斥在互联网各领域中。在你发布一个新产品时，一个专用的微型站点会起到良好作用，但到了下一个年度，他将会削弱你的在线市场营销策略和你的在线形象。

网站设计是为了时代潮流而设计，考虑一下你的设计在5年以后看是如何表现的。

放弃建立独立站点，在主打站点的次级域名下放置新的信息的做法明显是最好的，但也要注意的是你依然需要在网站的整个架构中集成这些二级域名站点（阿石注:其实也未必，象中国移动集团和各省市网站主要定位于咨询和业务办理，而他其他众多子网站更倾向于搞独立域名、独立运作）。例如，在微型站点和二级域名站点中，我们常常发现产品详情页下面忘记了放置公司和组织相关信息，再比如很多站点在主站点的站内搜索很糟糕的对他们的次级域名站点和微型站点的搜索结果予以展示。

二、导航设计的错误

6、不可见的导航选项

网站信息架构最糟糕的错误当然是没有导航，但这种情况现在已经很少见了以至我没有必要讨论它。然而，用户不能看到的有可能也是不存在的；不可见的导航几乎和没有导航一样糟糕。

发觉识别导航不应该成为用户一项主要任务：一定要在页面上让导航永远可见。小孩子很喜欢对网站导航玩“扫雷”（在屏幕上发滚动鼠标，以发现暗藏的东东），然而青少年不会喜欢这样做，成年人则更是厌恶。

类似的，无论是导航本身看上去很像横幅广告，还是你将他放到其他如看上去像广告以至用户会视而不见的组件旁边，你都应该抵制导航不可见。即使导航在电脑显示屏幕上，如果用户不看它，导航依然不可谓不可见。

7、不可控制的导航组件

一般来说，任何移动和跳动的组件会降低网站的可用性，尤其是当用户正尝试可寻时导航会发生移动。用户会把注意力集中到更高级的去哪儿的问题层面上，而不是去那些更低级的怎样操作图形用户界面GUI上来。

在这里两大常见阻碍是展开和隐藏内容的rollover（阿石注：一般是指导航菜单的展开和鼠标移上去的链接状态），以及那些移动、旋转或循环的组件。用户一般来说对这些组件并不感冒，而在这里将这些组件囊括到网站上的产品设计师和程序员们严重低估了用户沮丧感而带来的商业影响。

8、不一致导航

导航存在的目的是为了帮助用户，而不是为了困惑她们。导航的设计应该是让用户立马可以了解到，并将这种理解贯穿到他浏览整个网站过程中。然而糟糕的是，很多网站在用户浏览进程中呈现出不同的导航特征，不同的导航来来去去，使得用户感到无法自我掌控，如她们会问“我怎样才能将那个菜单栏选项搞回来呢？我之前页面中可是看到过的啊”(阿石注：其实在现行电子商务网站如淘宝、拍拍都没有一个完全不变的全局导航，或受制于市场策略、二级页面定位、设计安排而出现两个以上的全局导航）

尽管全局导航并不是一个网站最受欢迎的组件，而它的一致性特征表达了其重要内涵：全局导航是帮助用户了解她们在哪儿以及在迷路时她们怎样可以轻松掌控回到网站的顶级结构上去的一座灯塔。

9、太多的导航技术

在<<seminar on navigation design>>中有了解到竟然有25种不同的网站导航技术方法。每个技术方法都有其自身的可用性优势和潜在的缺点，而这些就会导致团队将精力集中在设计的权衡上来——也就说何时运用导航的何种形式（阿石注：导航会随着网站的发展、市场营销而变动导航形式，这个特点体现在电子商务网站如amazon、红孩子、深圳移动网上商城等）

有一点是肯定的：每个导航技术都有在特定网站和企业网中有其一席之地。但是，如果你将上面提到的25种技术全部派上用场的话，你会发现你得到的不是每个技术优势之和，甚至更少。（阿石注：朴素的哲学思想：局部之和小于全部）

为了吸引用户的眼球而竞赛吧！太多的地方需要了解，切忌哗众取宠！

10、伪装的菜单选项

在过去，伪装的菜单选项这种误区高高在上，但幸运的是现在好多了，没有过去普遍。然而，依然有很多网站继续将她们的标签和其他的导航选项伪装成她们自己的专用组件。

除了继续困惑用户外，伪装的导航也会妨害站内搜索：用户不能找到她们叫不上号的东东，即使你提供了同义词，主导航带来了额外的SEO权重，对那些优化没有用户关注的查询来说无疑是种浪费。

老词就是好。当用户了解了她们自己的选择，她们更愿意选择其中合适的一个。将文案说的清楚明白、简洁简约些。如果用户不能理解某个菜单选项，她们就一般不大可能点击它。而搞笑的是，一些公司为最新和最重要的产品冠以很炫目的名称而累此不疲，这样就被双管来福枪将自己给毙了。

这篇文章直接翻译的成分较多，比较生硬，可看看荣荣的成果：http://hi.baidu.com/xiaoxingrong13/blog/item/9846f802dafbb1064afb5170.html

简化信息架构

ashnotes — Tue, 08 Sep 2009 11:11:06 +0000

信息架构, information architecture ,听起来是一个很响亮的名词，自从《Web信息架构》煌煌巨著问世十来年以来、三个版本的普及，信息架构这个词在互联网领域也是家喻户晓、妇孺皆知了。但我也相信大部分人看完《 Web 信息架构》，对究竟什么是信息架构？为什么需要信息架构？以及怎样信息架构？这三个问题云里雾里！因为书中两位作者并没有对信息架构这个词作出明确定义，所以写篇文章简化一下信息架构。

什么是信息架构？

根据维基百科解释，“信息架构”这个词是1975年一位名叫Richard Saul Wurman的图形设计师提出来他对信息架构的理解是“组织数据间模式、并化繁为简”。他本人对著述颇丰，尤其是对旅游指南之类的书籍出版大有经验并颇受好评，出版并设计了超过80本。说这个背景的目的一是 Richard Saul Wurman 在那个时代就已经预料到海量信息的时代即将到来，信息必须经过“处理”才能简单、高效的被用户（对他来说是读者）获知；二是《 Web信息架构》的两位作者 Peter Morville ， Louis Rosenfeld 这样出身图书馆的人士从中继承并传播了 Richard Saul Wurman 创造的“信息架构”，从书里面大量的图书分类词汇就能看出。那究竟什么是信息架构呢？我的理解是

“信息架构是组织同种信息、分类异种信息”

所谓组织同种信息，无论是标点符号、单词字句、段篇章卷，都是信息粒度的不同展现。信息只有通过人为组织、排版、设计，才能具有可阅读性；在信息量少得可怜的古代，这个方法是可以满足需求的；但一旦到了信息爆炸的现代及当代，信息的粒度在衍生（二进制）、多样（多媒体）在扩展，光有组织还不行，还需要分类，以至达到可寻性。因此信息的可阅读性和可寻性是信息架构的终极追求。

信息架构早已经突破图书馆的藩篱，其模型和理念已经渗透应用到系统建设、软件设计等领域，其应用最广也最深入当属 Web (企业内部网建设、互联网产品设计、甚至是移动互联网）。

为什么信息架构？

为什么需要信息架构这个职能或职业呢？利用《 Web信息架构》信息架构三要素这个工具即可分析：

用户本身很“懒”：
互联网的用户已经不是传统读者那样逐字逐句的阅读，而是双目N行的跳跃式扫描，除非是找到有兴趣的文章才回归传统获取信息方式。例如《 Don’t make me think 》作者发现的”基于三个互联网用户使用行为统计事实“
信息内容海量潮涌：
大量新兴媒体、 Blog 、 Twitter 等生产海量信息，使人目不暇接，用户需要一层“组织、分类、过滤”装置，编辑、评论、推友这些角色就能说明
企业内的商业目标：
企业的信息本身也是重要信息源之一，其自身也有信息建设、积累和发布的需求，还不包括那样创业型组织、团队，都需要把自己的产品、卖点通过信息架构（设计）翻译为“客户化语言”让用户、客户获取、感知

怎样信息架构？

《 Web信息架构》在书中列举了自上而下、自下而上的两种方法以及各种案例不胜枚举.对比中国互联网目前的现状，按照书中所说的方法去生搬硬套，不切合实际，也没有足够的人力资源和工具支持，只能提取模型思想和方法达到信息可阅读性和可寻性的目的。担任信息架构( IA )角色的产品经理或策划人员只要注意以下即可，如图所示：

根据自己所在的组织范围（ Context ）内，充分理解用户需求、拥抱商业意图或商业目标、积极搭建网站内容建设，推动三要素直接均衡发展，才是一个 IA 角色担当者所应具的视野和能力~

什么是信息架构？

根据维基百科解释，“信息架构”这个词是1975年一位名叫Richard Saul Wurman的图形设计师提出来他对信息架构的理解是“组织数据间模式、化繁为简”。他本人对著

述颇丰，尤其是对旅游指南之类的书籍出版大有经验并颇受好评，出版并设计了超过80本。说这个背景的目的一是Richard Saul Wurman在那个时代就已经预料到海量信息的时

代即将到来，信息必须经过“处理”才能简单、高效的被用户（对他来说是读者）获知；二是《Web信息架构》的两位作者 Peter Morville ，Louis Rosenfeld这样出身图书馆的

人士从中继承并传播了Richard Saul Wurman创造的“信息架构”，从书里面大量的图书分类词汇就能看出。那究竟什么是信息架构呢？我的理解是

“信息架构是组织同种信息、分类异种信息”

所谓组织同种信息，无论是标点符号、单词字句、段篇章卷，都是信息粒度的不同展现。信息只有通过人为组织、排版、设计，才能具有可阅读性；在信息量少得可怜的古代

，这个方法是可以满足需求的；但一旦到了信息爆炸的现代及当代，信息的粒度在衍生（二进制）、多样（多媒体）在扩展，光有组织还不行，还需要分类，以至达到可寻性。因

此信息的可阅读性和可寻性是信息架构的终极追求。

信息架构早已经突破图书馆的藩篱，其模型和理念已经渗透应用到系统建设、软件设计等领域，其应用最广也最深入当属Web(企业内部网建设、互联网产品设计、甚至是移

动互联网）。

i-dong游戏中心原型优化

admin — Sun, 16 Aug 2009 13:42:05 +0000

周末参加了J.S.阅微同学组织、泰山在线赞助的华南UE小组-深圳-第九次聚会，席间探讨了导航的讨论，并体验了泰山在线旗下的i-dong在线游戏。为泰山的领导和产品经理热诚及对UE重视所感动，写一篇i-dong的游戏中心原型优化，给大家分享。

先给大家看看i-dong的游戏中心原型，如下图：

为方便分析对原型做了区域标注，如下图：

A区: 游戏内容区,包含了分类类目和类下各游戏名称。

B区：游戏玩家区，包含玩家账户、社交、及系统设置和退出

C区: 游戏状态区，包括硬件设备运行情况、网络状态以及玩家登录情况

问题：

1 很显然A区是原型设计者重点突出的核心区，一是摆明这里游戏丰富，二是希望玩家一上来就可以挑选游戏，迅速进入游戏状态。

但将游戏分类和游戏同区全部展示，以及健身类和益智类游戏循环滚动（无限制的）无疑分化了玩家选择。因为i-dong的手柄感应控制不像电脑的鼠标可以随意、快速选择，这一物理属性就决定了i-dong游戏中心在设计交互时必须平衡如何快速让玩家决策、选定自己玩的游戏而同时保持自己游戏的丰富性。

而玩家在选择具体游戏时，游戏区块会弹出”?”号让人不可捉摸，云天同学也表示了质疑，因为我的选择是明智的，为何还要给个问号质疑我的选择呢？虽然设计者的初衷是考虑问号相当于帮助中心，有啥不明白的点击问号,她会告诉你。

2 B区和C区有同质化倾向、对各自区域功能定位存在逻辑混乱。B区的注销本意是删除账户，但这里的功能实际是退出功能，在文案设计时可考虑用“退出”代替让人感觉更平实。“已登录”很明显是玩家的登录状态，似乎更应该放在B区。同时“已登录”为何采用按钮形式且不可点击切换（如隐身？退出？），更让人感觉困惑,还不如直接去掉。

优化方案：

1 对A区即游戏内容区采用Tab形式，隔开分类类目和类内容，信息可寻性得以加强；同时增大各游戏区块，更醒目，方便玩家识别。

将选中状态的问号去掉，或者用其他icon或“查看详情”等字样代替

2 简化B区，强调用户中心；将“设置”和“退出”剥离出来，并放置C区底部，强调“系统”概念,和左侧“系统”状态保持信息平衡

A区: 游戏内容区,包含了分类类目和类下各游戏名称。
B区：游戏玩家区，包含玩家账户、社交、及系统设置和退出
C区: 游戏状态区，包括硬件设备运行情况、网络状态以及玩家登录情况

问题：

1 很显然A区是原型设计者重点突出的核心区，一是摆明这里游戏丰富，二是希望玩家一上来就可以挑选游戏，迅速进入游戏状态。但将游戏分类和游戏同区全部展示，以及健身类和益智类游戏循环滚动（无限制的）无疑分化了玩家选择。因为i-dong的手柄感应控制不像电脑的鼠标可以随意、快速选择，这一物理属性就决定了i-dong游戏中心在设计交互时必须平衡如何快速让玩家决策、选定自己玩的游戏而同时保持自己游戏的丰富性。

而玩家在选择具体游戏时，游戏区块会弹出”?”号让人不可捉摸，在场的云天同学也表示了质疑，因为我的选择是明智的，为何还要给个问号质疑我的选择呢？虽然设计者的初衷是考虑问号相当于帮助中心，有啥不明白的点击问号,她会告诉你。

优化方案：

1 对A区即游戏内容区采用Tab形式，隔开分类类目和类内容，信息可寻性得以加强；同时增大各游戏区块，更醒目，方便玩家识别。将选中状态的问号去掉，或者用其他icon或“查看详情”等字样代替

2 简化B区，强调用户中心；将“设置”和“退出”剥离出来，并放置C区底部，强调“系统”概念,和左侧“系统”状态保持信息平衡

优化效果：

以上是用Axure制作的原型，有兴趣的同学，可以点击这里，查看效果….