赞助商
立即赞助

全面易懂!写给新手的信息架构设计指南

交互设计3年前 (2021)发布 流光
2K 0 0

很产品设计师,在画原型或者设计 UI 的时痴迷工具的使用,拿到需求文档之急动手画图,忽略信息架构设计于品作用。

信息架构为一个产品的骨架,是产品非常重要的一部分,它决定一个产品

的布局未的发展方向以及用户对一产品的初印象整体体验。毫不夸张的,好的产品信息架构产品功的一半。

那底什是产品的息架构呢?该如何计产品的息架构?如何评判一个产品息架构的好坏?着往下:

一、信息架构的概念

让来一个例:

全面易懂!写给新手的信息架构设计指南

一个需要有哪些施,如果你是的老板如何理的排布这些施,可以让户觉舒服的用餐,这个过程就是一个息架构的过程。可以让户对你的产生好,从而下次用餐的候还会想来你这吃。

在布饭店设施的过程中我们要遵循一些规范,如户的习惯或者施工规范等,正是因为需要遵循这些规范,我们需要一个信息架构来体现这些。

比较官信息架构解释是这样:信息架构设计是信息进结构、组织以及归类设计,好让使用者与用户容易使用与理解项艺术与学。

简单来说,信息架构设计就是让用户以 容易地理你的产品是怎样的。让他们在使用你产品的时以更顺更自。就像一进饭店就有一种感,门口是等餐的地方,进去就应该饭,果找洗手间一定不往门口走,而往深处走。就是信息架构的处:他让用户使用同类产品时更容易上手和理,让产品更容易被接受。

二、为何需要信息架构设计

对上产品来说为什么需要合理的信息架构呢?大家来看下边3组 app 的 tab栏截图。你能仅仅从 tab栏就看出款 app 是什么类型的 app,何使用吗?

全面易懂!写给新手的信息架构设计指南

很明显的,一个是一款购物类 app,二个是一款图类的 app,三个是微信的 tab,虽首页名称是微信,但是我相信果把名称换成「聊天」,你还是能认出是微信的 tab栏。

从底部标签栏就可以致看出产品用嘛的,这就信息架构的作用。一合理的信息架构可以让产品非常易被用户理解,可以让用户第一眼对产品一简单的认知,指导自己可以用产品什么事,指导产品提供什么服务。

再一组反例:

全面易懂!写给新手的信息架构设计指南

这三组 tab栏就让人困惑了,了半你也许根本不知道这款 app 是做什用的,以及如何使用。如果你让用户困惑,会钟抛弃你的 app。

信息架构的核心目标是为户供更好的体验,获得更的留存率。

款信息架构良好品必然遵循以下两个标准:

  • 户打开 app 的第一秒就知道这是一款么 app,怎么;
  • 用户想要使用某功能时,能够第时找到。

我们通过这两个标准来印证上边3个正面案例的信息架构:

全面易懂!写给新手的信息架构设计指南

相信你很快速的识别这款软件的途和法,这就给升留存供了基础。

那么如信息架构像架构个饭店样简单,那么信息架构为何需要设计?

全面易懂!写给新手的信息架构设计指南

为你实品功能可能有这么多:

全面易懂!写给新手的信息架构设计指南

毕竟我们不是支付宝,没办法把功能像腐块样堆叠起来,我们需要些学设计法。

三、如何设计信息架构

合理信息架构设计需要考虑5个步骤:

全面易懂!写给新手的信息架构设计指南

下我来分步讲解下。

1. 了解用户,场景,习惯

首先你品是到用户用,你然要最大限度了解你用户,我们先来看下个概念:「心智模型」。

全面易懂!写给新手的信息架构设计指南

心智模型是经由经验及学习,脑海某些事物发展过程,所写下剧本。类在经历或学习某些事件后,会事物发展及变化,归纳出些结论,然后像是写剧本样,把这些经验浓缩成本本剧本,等到复或类似事情再度发生,我们便不自觉应用这些先前写好剧本,来预测事物发展变化。心智模型是你事物运发展预测。再说楚,你「希望」事物将如何发展,并不是心智模型,你「认为」事物将如何发展,是你心智模型了。

假设你从没见 iPad,而我刚递给你一台并告诉你以用它来看书。在你打开 iPad 使用它之前,你头脑里有一个在 iPad 上何阅读的模型。你假想书在 iPad 屏幕上是怎样的,你以做什么情,比翻页或使用书签,以及情的大致做法。即使你以前从没有使用 iPad,你也有一个用 iPad 看书的「心智模型」。你头脑里的心智模型的样式和运方式取决很因素。

用户往往以往使用 APP 的一些习惯使用产品;线下同一件事的习惯、活习惯、智模型。考虑哪些可以创新的,哪些用户习惯,不妨碍用户习惯的况下作出能让用户接受的创新。

你要考虑清楚4个问题:

用户通常用你的产品做什?

用户用你的产品来做什?用来新闻还是用来聊?一定要考虑清楚用户的核心流程。从核心流程中提取息架构的基础形式。

用户用这类产品最关心什?

用新闻app 咨询的真实性实效性,购物类app 准搜索和后功能,就是你的用户关注点在哪,这是一个好的突破。

用户有哪些思维定式?

和用户年龄身相关的属性,产品体验符相应用户的思维模式,心智模型,用户就会比较容易受。

用户用什类似的产品?

类似的产品也会带来一些用户习惯,迎这些习惯也会让用户快速上受产品。

了解了你的户场景和使习惯之后你会知道如何做符合户心智的,容易被接受的产,你需要担心做的产没有差异性或者没有竞争,我们可在核心流程之外做创点,户觉得你的产又好又有些一样。

2. 了解业务

这里的务包括与产接触的及外的人的需求,如公司的营,场,销售,BD,公司的外合作伙伴等。

这些需求我们也要收,比如运员想更便管理注册用户,销售想更多添加广告位,市场广员要求能统计不渠带来品下载量,注册数,活跃数,合作伙伴需要进账号,内容互等,要与业务有关意见,尽可能在品设计前多收,即使做不了,也告诉他们原,要不然品上线后等着被他们吐槽吧。

3. 调研竞品的信息架构

在做款 app 时,我们临了和数竞品争抢用户局,这时候分析竞品常必要,我们需要在知己知彼前提下,做好核心流程功能,再思考如何在异功能上做好突破。

首先我们需要把竞品功能梳理成思导图:

全面易懂!写给新手的信息架构设计指南

其思导图就是信息架构比基础的形式,但是光有思导图没用,我们需要对思导图进行分析。

我以过的一款人脉 app 例,当初对比了领英、赤兔脉脉,分析了这4款 app 的思维导图后得出的共性差异点:

全面易懂!写给新手的信息架构设计指南

共性就符合用户使用习惯的方,如果调研的3-5产品都这么了,很可能这里产用户习惯的方,我们需去遵循的,这获得用户好感度的基础。

析产品你一定也会得出一些产品差异的地方,而这些差异就是你的产品竞争点,也是别人用你的 app 不用其 app 的理由。比如人脉软件都会有社交相关的功能,但是脉脉会比较注重职招聘、直播等互网职人比较关心的点,这对应的用户群体就比较会吃你这套,会提升用户的粘性。

相信你在梳了竞的信息架构,总结了共性和差异点之后对产的信息架构已经有一个较清晰的认知了,在做自己产信息架构的时候会更胸有成竹。但是最后还有一件事我们可做,就是对我们的要做的产功做卡片分类。

4. 卡片分类

全面易懂!写给新手的信息架构设计指南

卡片类法是工作中常用的一种方法,它可以在用户侧再一次印证和检测的产品息架构。

卡片分类法就是户对功卡片进行分类,组织,并给相功的集合重定义名称的一种自而上的整方法。

说白是准备堆卡片,在这些卡片上写上你所需要含功能名称,然后到用户侧,让用户进分类,让用户进组织,来了解用户到底觉这些功能应该怎么合并怎么归类法。它可以帮助你站在用户度去了解用户是怎么认定这些功能,也可以在卡片分类法过程更加了解用户是怎么想。

卡分类法大概的步骤和注意点是样的:

全面易懂!写给新手的信息架构设计指南

卡分类法最终产出样的一个树形图:

全面易懂!写给新手的信息架构设计指南

5. 产出信息架构

其实到这步信息架构大概雏形已经有了,你可以用 axure 或者类似 mindnode 软件把信息架构梳理出来。

接下来你要对信息架构进行重要分级,样在产品开的前期以帮助梳理产品研的优先级,集中精力决用户的最大痛点。在产出页面时也以更的把控页面元素的大小级,位置关系等。

全面易懂!写给新手的信息架构设计指南

最你需要注意和度的平衡:一般不超5,超操困难。度让用户认成增加,容易找不到想找的内容。里的度指的是同一页面展示的信息量。

那么这次分享就到这里,相信已了解到信息架构的重性以及如何设信息架构了。希望给的产品一些帮,的产品多的留存好的发展方向,如果对信息架构什么疑问或者建议,欢迎留言交流。

欢迎关注作者的公众号:「FCUED」

全面易懂!写给新手的信息架构设计指南

图片素材来源:undraw.co

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

今年已经是 2020 了,各位作为时代的弄潮儿,上网冲浪是生活中的不可或缺,丰富的冲浪生活中必不可少的当然是买买买,面对琳...
交互
58UXD:产品同学要做一款新 APP,对导航犯了愁。而在两大设计规范中,均为我们指出了如何设计 APP 导航,前人的文章中也有不...
App设计
本文总结了 10 个常见的交互设计基础术语,帮新人快速入门。 UX用户体验设计(广义的交互设计) 先看一下创始人大师 Don norm...
交互流程
卡片分类法可以用于网站或应用的导航、信息架构等项目,也可以用于文档、电子书籍的结构整理或是文件的分类管理等。 卡片分类...
信息架构
编者按:什么是信息架构?怎么理解用户体验五要素?本文用大量的案例和插图帮你轻松掌握这个基础知识。 今天想要跟大家聊一...
信息架构
最近入手了一台二手 iPad mini 2,体验了一些比较热门的 iOS 应用在 iPad 端的交互设计,发现一些应用为了保证 iPad 端的用户...
Apple
卡片分类法是一种用户体验设计中的调研方法,它可以帮助我们分析用户,构建符合用户预期的信息架构。 一个网站是否好用,判...
信息架构
本文将结合贝壳平台B端产品特点,针对当前使用频率高的列表编辑模式进行归纳和抽象,重组典型可复用的交互行为与功能流程,促...
App列表