90%的设计师都不知道的信息架构知识

《用户体验要素》将用户体验的流程分为五个层次:战略层、范围层、结构层、框架层、表现层。

战略层确定了产品目标和用户需求;范围层对用户需求和产品功能进行筛选、分析、分类、定优先级;接下来就是结构层的信息架构的设计了,也就是今天要说的内容;确定了信息架构和用户的使用流程,框架层会解决导航设计、界面设计和信息设计;最后交给表现层,去完成产品视觉、触觉、听觉、嗅觉、味觉上的设计,互联网产品主要集中在视觉方面的设计。

交互设计师涉及的工作主要集中在结构层和框架层,也会涉及到范围层。对于战略层和表现层影响较少,战略层是由公司管理层决定的,而表现层由视觉设计师(UI设计师)决定。

言归正传,我们先来解决第一个问题,什么是信息架构?打个比方,有个投资方,要投资建立一个科技园区,得到一块地之后,在东边建10个房子,在西边建20个房子...,房子挨着房子,这样做是肯定不行的。因为必须得事先规划好,设计好园区的道路,将园区进行划分,这块地是用来建人造湖的,旁边的一块地是绿化面积等等。园区建设中这个规划的过程,就相当于互联网产品中的信息架构设计。信息架构包括组织系统、标签、导航、搜索系统这四个方面。

园区规划图


组织系统

世界分为生物和非生物;生物分为动物、植物、微生物;人属于高级动物,人又分为男人和女人;你身边的人又被你分为熟人和陌生人,熟人里有朋友、恋人、亲人。你从事的行业又分为互联网行业和传统行业;互联网行业里又有许多职位,产品经理、交互设计师、UI设计师、开发、运营等等。

不知不觉中我们队所有的信息都进行了分类,因为只有不断的把信息分类,才能简化这个世界,从而理解世界。分类是认知世界的基本法则,如何分类甚至决定了我们的价值观是什么。

为了让用户更容易的理解产品,浏览需要的信息、完成要完成的任务,就必须对产品里涉及的所有信息进行组织、分类。组织系统包含两个部分,一个是组织方式,一个是组织结构。

组织方式

①自上而下:

自上而下是从战略层出发去考虑内容分类。将能达成产品目标和用户需求的所有功能和内容进行逻辑上的分类,例如“一个”APP,分为了首页、阅读、音乐、电影,接着再继续往下细分出二级、三级信息。从而完成产品的分类。

②自下而上:

自下而上是从底层信息开始,将最底层的信息归属到较高一层级,再将这一层级归属为更高一级,自上而下可以理解为是在做分解,而自下而上可以理解为在做归类。

最常用的自下而上分析方法就是卡片分类法,即将最底层的所有标签给目标用户,让目标用户去自己归类,从而得出产品的信息架构。


卡片分类法

组织结构:

①层级结构

这种结构是最常用的结构,几乎所有的产品的主结构都是层级结构。层级结构只存在父子级关系,一个父级分出几个子级,子级再分出它的子级,直到将所有信息都包括进来。


层级结构

②矩形结构

将信息从多个维度进行分类,这种组织结构能够帮助不同的目标用户找到各自需要的内容。淘宝搜索结果页对商品的筛选就是矩形结构。


矩形结构

③自然结构

现实生活中,很多信息是杂乱无章毫无规律的,它们之间找不到严格意义上的逻辑关系,这就是自然结构。整个互联网就是一个自然结构,你平时用电脑浏览信息,从这个链接跳到另一个链接,从这个网站去到别的网站,这个浏览结构就是自然结构。


自然结构

④线性结构

有一种结构,没有分叉信息,一个标签连着另一个标签,这就是线性结构。我们用互联网产品完成某一个任务时,多数都是线性结构。例如:你去淘宝购物,先搜索商品——浏览商品——选择商品——下单付款——等待收货——确定收货——评价订单,完成一个任务就相当于走过了一个线性结构。


线性结构

具体到某个互联网产品上,产品的主结构基本上是层级结构,而自然结构最不常见,矩形结构和线性结构多用于产品局部的功能和内容的组织。理解了组织系统,就相当于在大局上把握了产品的信息架构,这样设计出来的产品就不会给人凌乱和散的感觉。打开你常用的APP去看看,它们都是些什么结构。

标签系统

我们利用自上而下或自下而上的方式确定了产品的组织结构,具体这些结构里的节点该如何命名?如何按照用户容易接受的方式去命名?这就是接下来标签系统要解决的问题。

经过几十年互联网的发展,很多标签已经被用户广泛接受,遵循这些已经占据用户心智的标签是一个重要原则。

例如:首页、搜索、站点地图、联系方式、关于我们等等。

多去和目标用户沟通,看看目标用户对标签的理解是不是符合他们的心理模型(关于心理模型的概念,可以查看往期文章《为什么用户觉得你的产品不好用?》),例如简书会实时保存作者所写的文章,它所使用的标签是保存中、已保存、保存这些,如果换成归档中、已归档、归档呢?这样作者就会觉得迷惑。


导航系统

一提到导航,第一想到的是车载导航、手机里的导航软件,导航能帮我们用最快的时间到达正确的地方。同样,互联网产品中的导航系统,也起着这样的作用:防止你在产品中迷路,告诉你现在所处的位置,能去哪,如何去。

导航分为三类:全局导航;局部导航;情景式导航。

全局导航在一般会常驻在界面当中,像web网站的顶部、APP端的标签栏,就属于全局导航。


Apple官网全局导航


微信APP的全局导航


一个产品往往只有一个全局导航,但是会有多个局部导航来补充。


锤子手机官网在全局导航下的局部导航

除了全局导航和局部导航,其他内嵌在产品内容中的链接或者可点击的元素,都被称为情景式导航,情景式导航能让用户实现产品内容直接的跳转,从而完成用户目标。

移动端导航是我们平时接触最多的产品导航,下一篇文章会详细描述,包括标签式导航、抽屉式导航、网格式导航、列表式导航、菜单式导航、点聚式导航等等。


搜索系统

1994年杨致远和大卫-费罗梦想着将整个互联网下载下来,从而创立了雅虎网站,最开始是把所有的网站名称和链接放在一起,供人们查阅使用,随着网站的增加,他们设立了分类,用户可以利用导航目录来查询网站。互联网发展速度日新月异,新建立的网站越来越多,单单的目录分类已经不能满足用户查找信息的需求,搜索便应运而生。用户只需要搜索关键词,就能在搜索结果里面找到自己想要的内容。直接展示内容→将内容分类建立目录索引→搜索引擎的加入,便是互联网产品内容查找的发展过程。

产品需不需要搜索功能;入口放在哪;搜索界面该如何布局;搜索结果页该如何设计;搜索结果该如何排序;要不要提供结果页的筛选条件;需不需要提供搜索范围...这些都是设计搜索系统时设计师该思考的问题。


信息架构设计在互联网产品设计中处于承上启下的作用,它上面连接着战略层和范围层,下面影响着框架层和表现层,可以说是整个互联网产品设计流程中的核心,产品或者交互设计师一定要知道,一个优秀的信息架构能帮助公司达成产品目标,也能满足用户需求,提高用户体验。


END.

我是邹志楠,一枚交互设计师。知识改变命运,文字温暖人心。当你走的足够远、爬得足够高时,你再往回看,回路,什么都没有,前程,才是一片坦途。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,907评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,546评论 1 289
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,705评论 0 238
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,624评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,940评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,371评论 1 210
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,672评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,396评论 0 195
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,069评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,350评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,876评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,243评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,847评论 3 231
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,004评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,755评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,378评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,266评论 2 259

推荐阅读更多精彩内容