从概念设计到导航设计的一次尝试

产品

第一次阅读《网站信息架构》设计这本书就对书中的一个地方产生了疑问,就是「内容映射」(Content Map)。作者在书中这样解释到:

「内容映射图是对现存信息环境的可视化表达方法,通常是相当高层次的,而且本质上是概念性的产物,是认知的工具,而非具体的实施蓝图」

这句话我现在看起来依然很费解,因为本身就是概念的东西,解释起来也比较模糊,没有办法具象化。而后来在看到 Horzin 的文章《从概念设计到信息架构》这篇文章才开始理解概念设计,虽然也没有完全理解概念设计和信息架构,但是也算是有一点进步了。于是在实践中多次尝试,于是就有了今天这篇文章。

我尝试着从一个概念「阅读」开始,然后延伸出整个 APP 可能会涉及到概念,这个 APP 的原型是「Pocket」,但我多延伸了一个「笔记」的概念,可以简单理解为 Kindle 中的 Clip。

概念模型

概念模型

我大概花了两个小时的时间来整理这份概念图。乍一看特别复杂,但实际上并不会。

概念:阅读

阅读无疑是整个 APP 的核心目标,那么关于阅读,首先它的角色是「用户」,而对象是「文章」,而阅读的结果就是「心得」,这样就延伸出了 APP 的另外三个概念。

概念:文章

作为阅读的对象,「文章」是这个 APP 的内容载体,有了「一篇文章」,那么自然而然也就会有很多文章,很多文章聚集在一起就形成了一个「文章队列」,文章队列实体化之后就是「文章列表」。

这里如果我们继续延伸下去的话,还会存在其他的概念,比如「书籍」「书籍列表」等,因此这里范围限定取决于 APP 的需求定义。如果存在阅读书籍这样的需求,那么这个概念就应该继续延伸下去。但我们前面说了,这里的 APP 是以 Pocket 为原型,而 Pocket 显然不存在这样的需求。因此也就不需要在继续延伸了。

概念:中心句

现在我们专注于概念图的左侧部分,也就是「中心句」。

继续从「文章」这个概念来延伸,往小的粒度去延伸的话,文章是由段落构成的,而段落则是由「句子」构成的。之所以不从段落这个粒度开始延伸,是因为它确实没什么可以延伸的,所以直接延伸到「句子」这个概念。那么在句子中存在这样一个特例,就是某篇文章的「中心句」,或者说是重点句子。那么这个重点从何而来呢?正常来说是从用户的手动标记而来,但是像 Kindle 这样拥有大量的用户基础,它的中心句也可以是由机器提供的,从用户比较的频率中推算出中心句。

那么有了一个中心句,就会有很多。一篇文章不见得只有一个中心吧,有时候我们还需要记录原因和结论。于是就有「中心句队列」,实体化之后就我们实际阅读中的「读书笔记」了。

而「读书笔记」泛指所有文章的笔记,我们在做读书笔记的时候,往往不会是杂乱无章的去记录,而是根据当前所看的文章或者书籍来整理。所以就存在这样一个特例,就是「某篇文章的读书笔记」,既然都有了「某篇文章的中心句队列」,那么往小的粒度去延伸,「某篇文章的中心句」这个特例也就自然出现了。往大的粒度去延伸的话,就会出现「有读书笔记的文章」,再往大延伸就是「有读书笔记的文章队列」,而这个队列,就是「文章队列」的一个特例了。

至此,「中心句」这个概念就延伸完成了。

概念:主题

我们在此回到「文章」这个核心概念,然后把目光聚焦于概念图的有下脚,也就是「主题」。

我们从另一个维度去思考,一篇文章都会有一个主题,或者是相关的领域,它可能是关于气象的、生物的、化学的、艺术的等等,于是就延伸出了「主题」这个概念。

从「主题」开始,从小的粒度去延伸,就会延伸出「符合某个主题的文章」这个概念,而这个概念也恰好是「文章」的一个特例。那么在从文章的这个角度去考虑的话,有了一篇符合某个主题的文章,那么也就会存在很多篇符合某个主题的文章,自然也就延伸出了「符合某个主题的文章队列」这个概念。而这个队列也正好是「文章队列」的一个特例。
再回到「主题」这个概念,往大的粒度去延伸就会出现「主题队列」这个概念,实体化之后就是「主题列表」了。

至此,「主题」这个概念就延伸完成了。

那么关于「心得」和「分享」以及用户资料这样的概念就不再细说,思路都是一样的。

导航设计

页面关系图

页面关系图

概念模型做完之后,问题是怎么去利用。一开始我一直想不清楚该怎么去用,现在的方法也不见的对,所以我写下自己的想法,如有不对也请指出。

从概念设计中我们可以得出很多实体化的对象,简单可以理解为页面,比如「文章列表」「主题列表」「某主题的文章列表」「文章详情」「读书笔记」「分享列表」等,所以第一步就是整理概念模型中出现的对象。

整理完对象之后,我们从概念模型中其实是可以看出各个对象之间的大致关系的。于是根据这个关系来整理出一个页面跳转关系图。

于是第一个问题出现了,从哪个页面开始?导航,我们理解中的导航是一个从大到小的,从概念到具体的一个过程。所以首先关注于所有对象中最大的那一个。无非就是「文章列表」了,文章列表下有文章,还有各种特例,而且文章列表也不存在更高一层的对象,所以就从文章列表开始。

「文章列表」的横向可以连接到各个特列中,往下可以连接到具体的「某篇文章」,而从各个特列中也可以向下连接到具体的文章。

到这里,基本上各个对象之间的跳转关系也清晰了。那么接下来就是对具体的页面进行设计了,个人觉得接下来的第一步就是收集各个对象的元数据,然后描述元数据并进行分类。分类完成之后就可以画线框图了。

以上,就是我对信息架构中概念设计的理解。