信息架构:3×n

一个网站/软件到底需要多少张页面,我觉得是“3×n”张。

3个基本页面

信息架构从某种程度上讲,是对这三种页面的排列组合。

1、着陆/导航页

通常一个网站的首页承担了这一作用。下图截自“hao123”,因为他们全站几乎只有一个导航的作用,很典型。

2010-07-21_184102

2、消费页

这是用户浏览我们网站的目的地。我之前更喜欢管它叫“内容页”,但是通常用户都需要在这个停留相对较长的时间,在我看来,这个页面“消费”了我们的时间。web2.0的豆瓣也不例外,我们找到了一半理想的书籍,会细细阅读相关的介绍.

2010-07-21_184646

3、交互页

交互页是交互设计师的重头戏,全依赖他们,才能把复杂的流程变得简单。

图片1

当然,信息架构的工作不是就这样简单。

复杂的是,这些页面通常情况下不会简单的排列组合,而是互相融合。

消费页+ 着陆/导航页 是最常见的情况

自从有了Google等伟大的搜索技术,我们浏览网页的方式有了极大的改变,我可能直接就会找到我感兴趣的内容。比如下图,第一条搜索结果就是刚刚豆瓣的那个网页,这样点击一次就可以到达。所以,每个消费页都可能是着陆页。

2010-07-21_185406

于是,消费页也需要加入导航。仔细看下刚刚豆瓣的页面,果然可以找到导航。

2010-07-21_185649

交互页尽量不要与消费页和导航页结合

来自apple的这个例子。购物之后交费页面仅提供主导航做为“紧急出口”,让用户可以终止这个购物流程。同时提供了帮助页,对这个流程进行支持。再就是少量的付款需要参考的信息。

2010-07-21_190558

注册页面和登录页面更要完全抛弃导航。登录or注册,不可以有其他的选择。

2010-07-21_191020

VN:F [1.9.3_1094]
Rating: 5.0/5 (2 votes cast)
信息架构:3×n, 5.0 out of 5 based on 2 ratings

11 comments ↓

#1 sam on 07.22.10 at 1:35 上午

嗯,总结的很好。
对于具体案例,应该还是要根据用户研究的成果来指导设计。

[回复]

chenjz   says:

@sam, 这个分类倒也不全是我总结的。后面这三类页面的两条应用法则来自个人实践。

[回复]

#2 zhkzyth on 07.23.10 at 7:28 上午

只要页面满足了用户的目标,我觉得这个页面就算是所谓的“内容页”了。而网页的交互效果无处不在,我觉得只是多和少的问题。按这样说,单纯把页面这样简单的拆分不太合适。或许说,网页更偏重哪一部分,是疏导还是提供内容这样会不会更好呢?

比如说我上B2B的网站,我的目标只是想COPY下他的流程。那么它的过程反而就是我所需要的”内容页“了。(可能这个例子不合适……)

其实所谓的”消费页“、”导航页“、”交互页“都是从设计者的角度出发。如果站在用户的角度去考虑这些页面,基于他们的目标,每个页面的意义就有很多好玩的地方……

[回复]

chenjz   says:

@zhkzyth, 基本同意你的观点,用户不需要了解这些页面的差别。

[回复]

#3 信息架构:3×n – 【IT应用开发信息网】 on 07.23.10 at 11:18 上午

[...] 源地址:http://blog.chenjz.com/?p=561 本文标签:UCD 所属分类:互联网技术 链接地址:http://www.sprbus.cn/2010/07/%e4%bf%a1%e6%81%af%e6%9e%b6%e6%9e%84%ef%bc%9a3%c3%97n/ 浏览前页:广州UCD书友会21期看法 浏览后页: [...]

#4 图图网 on 07.23.10 at 1:43 下午

这种网站结构思路很特别

[回复]

#5 一个产品到底需要多少张页面 | webpixel on 07.24.10 at 9:35 上午

[...] 源地址:http://blog.chenjz.com/?p=561 [...]

#6 信息架构 | Hello Tea on 07.25.10 at 1:39 上午

[...] 源地址:http://blog.chenjz.com/?p=561 [...]

#7 Felix on 07.26.10 at 6:40 上午

佩服LZ的的高度概括能力,2楼说得也挺有道理,具体情况的时候其实要灵活运用,很难完全分隔。

[回复]

#8 凡客诚品质量 on 07.31.10 at 1:09 上午

赞一个先

[回复]

#9 sky on 08.01.10 at 1:06 上午

哈哈,正解啊,目标明确的,不错博客一般就比较杂了的

[回复]

I need your comments