信息架构:划分页面和线框图

信息架构 everyinch 3006℃ 0评论

在Web页面上要对页面进行分区,划分出一部分作为导航区,一部分作为广告区,还有一部分作为内容区。这种做法非常典型,在Michael Bernard和AShwin Sheshadri最近的一项研究中发现,通常希望“回到主页”链接位于左上角,而购物车往往位于右上角。用户希望广告位于右侧,所以如果把有用的链接放在页面右侧,就很有可能被完全忽略。

下图中,明确划分了每个用户需要的分区:

ch7_flickr

  • 位于顶部和底部的全局导航区,包括主页链接、账户访问和核心导航条本身;
  • 用户导航区,可以按主要顺序组织,通过按为照片指定的标签来组织浏览内容;
  • 照片本身,及其相关的工具、描述和内容;
  • 元数据,放在一个角落里允许访问,但是并不突出。

划分模块

一旦明确了分区,就可以确定各个分区需要有哪些链接、文本和功能。还可以确定不同元素之间的关系。如果发现有些链接特意设计得紧密相关,就可以将它们形成为一个模块。

Flickr上有很多模块。其中一个明显的模块就是照片工具条。

ch7_block2

另一个模块就是评论模块

ch7_block3

通过将这些项紧密地组合为一个模块,设计人员就能创建一个可以在网站任何地方使用的系统。下图中的讨论模块,它与评论模块很相似。可以看到同样的基本元素:帖子所有者的名字和头像、内容、时间戳以及管理工具。

线框图

选择了页面并组织好页面上的所有内容后,可以利用线框图(wireframe)来描述这个设计。线框图是单个页面的一个基本轮廓,用于指示页面中的元素、元素间的关系以及元素的相对重要性。

设计网站的线框图有两个作用:

(1)使对页面的抽象认识更为具体。通过线框图可以使团队达成共识。

(2)线框图还可以用来建立文档。线框图涵盖了对设计和信息架构的所有决策。

如何在30秒内建立一个线框图

(1) 画一个方框

ch7_wireframe1

(2) 增加全局元素

ch7_wireframe2

(3) 增加该页面特定的元素。指出以下内容:

重要程度;

哪个是动态元素

文本和GUI类型

ch7_wireframe3

(4) 最后一步:标注

  • 内容来自哪里?如果有一组相关的文章,要指出它们有什么关联。
  • 内容的实质是什么?在长度、大小、语言和类型上有很大差异吗?
  • 元素是必要的还是可选的?如果元素没有出现在页面上会怎么样?布局会改变吗?
  • 元素是有条件的吗?它会根据其他因素变化吗?例如,管理人员会看到额外的链接吗?
  • 如果文章没有关联图像会怎么样?如果有图像又会怎么样?
  • 默认或期望状态是什么?理想情况下,页面上会展示哪些内容?
  • 有哪些候选或错误状态?如果出了问题,设计会怎样改变?

下图是高保真线框图(high-fidelity wireframe }。它们明确地描述了布局、位置和可视化设计,可以使交流更为清楚。不过建立高保真线框图会耗费更多时间。

ch7_wireframe4

与之相反,低保真线框图很快就能制作。低保真线框图可以在会议中用来促进与产品经理、设计人员和开发人员的讨论。可以看到这二者之间的详细程度有所不同。高保真线框图用于建立文档,而低保真线框图用来帮助小组交流。

ch7_wireframe5



转载请注明:陈童的博客 » 信息架构:划分页面和线框图

喜欢 (1)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无觅相关文章插件,快速提升流量