菜单

起逛超市上产品设计:信息架构梳理如何从小白到精通?

2018年9月27日 - 注册免费送38元体验金

相同、信息架构初认识

事先知乎上发生这般一个题目:什么样理解信息架构?,@Mr汤进er马上为“商场信息导视图”为例,回答了这个题目,比较吻合“入帮派小白”去领略信息架构、流程图与页面布局,其中针对“信息架构”的答如下:

贪图1:商场信息导视图

女生MM肯定爱逛商城对吧?那消息架构有些类似:商场信息导视图(如齐图)

地下平重合振奋休闲地带;商场一样楼:国际著名世界市二楼:名媛衣装天地商场三楼:少女时尚驿站市四楼:温馨亲子家庭……

进一步:可能一样楼国际闻名世界又包括

A区:名牌手表;B区:名牌珠宝……

如此这般的楼层架构便于你再次好的错过找到自己想买的东东,至少是异常鲜明的亮各个一样层产生啊商品,同一层商品怎么分布等等信息。在此间,设计师的意就是筹划好这些楼层信息层级,主要做的做事就是:分类、层级梳理

于互联网产品设计中:活经营or设计师梳理信息架构,其实与上述梳理市楼层架构是如出一辙之美。

其次、信息架构入门

1、信息架构到底是用来波及嘛的?

那当产品设计过程遭到,信息架构到底是故来做呀的呢?其实,通过地方“商城信息导视图”的事例,我们既好初步了解及了一个目的:让用户可在一定的“信息规划”下又易的找到好想只要之“东西”。那么除了此之外,信息架构还有什么打算吗?那即便是鉴于“产品目标”通过“信息架构设计”去教育、说服、通知用户

消息架构的作用总结如下:

A、【满足用户需求】:被用户可在自然的“信息规划”下又易的找到好想只要之“东西”

**B、【满足活目标**是因为“产品目标”通过“信息架构设计”去感化、说服、通知用户

2、信息架构设计到底是于召开呀?

消息架构梳理到底是在召开呀也?如果因此一个词回答的口舌,那得是“分类”。分拣是为还好的信传达,为了重新好的传递信息,需要针对信息进行精选与团队。

图2:引用自《微信背后的成品观—张小龙》的PPT整理

3、信息架构设计到底该怎么开?(或者说“分类”怎么开?)

《用户体验要素》一挥毫被,给起了音架构分类体系:从上到下从下到上

从下到上(如下图3):这种分类方法是基于“内容跟效力要求的解析”而来的,先将曾经部分有内容,放在最低层级分类中,然后重新以他们分别归属到比较高一级的品类。这种分类方法其实就算是以举行“归类”,比如@Mr汤进er当就的类进程中便会见采取“卡片分类法”去梳理信息架构,首先用拥有的力量点用一摆张卡片写下去,然后为“目标用户”参与到消息分类中,并申报有关分类标准作为咱们产品设计师去梳理信息架构的参考。实际施行进程被,可能更需设计师或者产品经理本人来早晚的音信筛选、梳理、分类的力量,进一步通过用户测试去印证分类的信息传达有效性。

希冀3:从下到上的架构方法

图4:卡片分类法在“从下到上”信息架构梳理过程被之行使——@Mr汤进er项目进程照片

从上到下(如下图5):这种分类方法从“战略层”(产品目标)出发去考虑内容分类。最先打最广泛的、可能满足决策目标的情跟效用开始开展分拣,然后以随逻辑细分出次级分类,这样的“主要分类”和“次级分类”就重组了“一个个空槽”,将惦念要之情节和成效仍顺序依次填入即可。以微信为条例:首先根据产品目标将“主要分类”即一级架构分为“最近对话(微信)”、“通讯录”、“发现”和“我”;然后再次展开“次级分类”分类,如“发现”下再分“朋友围”、“扫一扫”、“摇一摇”等等;最后以相应的职能(如朋友圈feeds、发朋友围、朋友围消息等)填入到对应的“朋友围”分类中。

希冀5:从上到下的架方法

流动:实际使用被,其实简单种办法是组成起来进行的,需要产品经营与设计师中之抵下,多多实践吧~

老三、信息架构进阶

1、信息架构梳理的依据是什么?

先是,我们得了解,信息架构受到哪些因素的熏陶。从深的方面可以分成两点:“用户需要”和“产品目标”,与上述的A和B两点作用有所对应关系。具体执行着,可能遭逢的震慑因素概括:

A、用户规模的合计:用户之理解能力;用户的熟悉程度(已来心理模型、操作习惯等);目标内容之施用频率(低频高级功能相似会“藏”的比较充分);内容之数码;内容信息的语义等等

B、产品规模的考虑:产品的基本价值、产品的主线功能、特色效益等

举一个例证,之前以知乎上来看一个问题:怎微信朋友围这么大密度使的效力要放二级菜单?

自我思这问题不等人必生两样之知情与应对,而且还是有道理的(例如有藏身称为对:还记商场楼层的分方式呢?如果情侣围在一级菜单,你还会随时看到扫一扫、摇一摇、购物、游戏这些可口么?便于使用,并无是布局之百分之百。)关于此问题,我于《微信背后的成品观—张小龙》(张小龙腾讯内部长及8时20分底出品讲演)一温柔被找到了如下一长长的有关“架构梳理”的产品观:

保持基本清晰,枝干适度。产品的重要性功能架构是活之骨骼,它应当尽量保持简单、明了,不得以无限制改变,让用户无所适从。副作用丰富主干,不得以喧宾夺主,尽量隐藏起来,而毫无放在一级页面。——依据张小龙演讲整理

图6:引用自《微信背后的出品观—张小龙》的PPT整理

经者例子@Mr汤进er思念说,正真去梳理一个吓之架构,还是很考验产品经营与设计师的力及思维的。多动脑筋,多实战~

2、一个吓的信息架构设计应该拥有哪些特点?

以下几点是@Mr汤进er小结的得据此来检验自己的信息架构梳理是否正确、合理,但正在适合自己之出品信息架构是甚微妙之,需要协调多么去思想与执行。

A、与“产品目标”和“用户需”相呼应;

B、具有一定之延展性;

C、保证分类标准一致性、相关性和独立性;

D、实用平衡信息架构的“广度”和“深度”**

E、利用“用户语言”,同时需要避免“语义歧义或不解”**

脚详细阐述上面几乎触及检查专业:

A、与“产品目标”和“用户需”相呼应;

直举例子:新闻资讯类以,经常因为实行顺序组织消息架构,因为用户需求面临,对于“新闻”的时效性的要求是唯一的首要因素,同时,对于产品自己,只有提供新型的讯息才会以竞争中获优势。再要,同样是资讯类应用,“今日头久”的成品目标是针对不同用户展开对推送资讯,因此除了为“时间”维度组织信息架构以为,它还经过算法推送,以“推荐”的法组织消息内容,针对性推送最新的消息,减低了用户“挑选”资讯的妙法,增加了用户资讯获取效率。

**B、具有一定之延展性;
**

一个延展性好的音信架构,能拿新的内容作为现有结构的平等有些容纳进来(下左图),也堪管新情节作一个完完全全的新部分加入(下右侧图),举个例证:微信的“发现”就有着自然的延展性,陆续有“游戏”、“购物”等内容被纳入其间。

图7:一个延展性好之信息架构图示

C、保证分类标准一致性、相关性和独立性;

一个好之架构分类,应该发同等仿准确之归类标准,并且对用户而言是得让准掌握以及上学的。其中“一致性”体现于正儿八经的唯一,不可知发差不多效仿标准,也就是说要保管效益入口是绝无仅有的(快捷方式入口除外),这样的益处就是,用户在动用过程遭到,不会见盖来极度多的科班而找不到底相应的力量入口(这或多或少觉得争议比较多,但@Mr汤进er认为有必不可少坚持入口的唯一性);“相关性”是凭借左右层级和层级中内容要拥有相关性的,不克管“足球新闻”栏目纳入到“时政要闻”层级下,因为她的远非关联性(例子比较low,但意思大家了解的);最后一点是独立性,独立性体现在同一层级分类应该是彼此独立的,不可知同一层级的个别单分类存在交集或带有关系。

D、可行平衡信息架构的“广度”和“深度”**

在拍卖信息架构“广度”和“深度”问题达成,说实话没有统一之规范。曾经听罢起同学说“层级不能够跨越3层,如果跨越三重合,这个架构就是糟糕的”这样的判定,其实@Mr汤进er当,不能够简单的拘留“深度”,而是看用户的实际经验。那“广度”和“深度”各自有安优缺点呢?主要反映在“宽而肤浅”的架构用户可为此比少的点击完成相应的职责目标,问题在于每层的“信息分类标准”太多,增加用户每一样重合级的分类寻找难度。(参见@Mr汤进er的另外一样首文章《设计法则:Hick’s
law》选项增多,做出决定的日子便是碰头多!)。而“窄而分外”的音信架构好处是削减了用户选择,问题在于增加了用户操作步骤如下图9,用户从A页到B页需要6步之多。

怎么样平衡“广度”和“深度”需要考虑的因素众多(大小屏幕等硬件特性、产品功能目标、用户以频次等等)。建议大家多实践,灵活采用,多由用户用角度做思考。

图8:宽而浅

图9:窄而深

E、行使“用户语言”,同时需要避免“语义歧义或不详”**

旋即一点则是独小点,但往往也便于为众设计师忽略。第一凡是使用“用户语言”进行分拣以及效力描述,用户是看不亮“专业术语”(行业应用除外)的,可以经过“用户测试”来检查用户对于分类和意义注册免费送38元体验金“名称表述”的理解能力。同时,好的“名称”应该是没有歧义或者会招用户不解之。

季、信息架构总结

整篇文章深入浅出,层层推进的阐释了对于“信息架构”的知识整理与掌握。主要解决了三独好题材:信息架构是啊?怎么开?怎么判?欢迎大家对“信息架构”与@Mr汤进er交流座谈(微信公共号:chuangshe_space,个人博客:www.tangjinweb.com,简书or微博:@Mr汤进er),共同进步。

正文为原创,允许转载,但求注明出处:

微信公共号“创设空间”:chuangshe_space

连顺便本文简书链接:http://www.jianshu.com/p/06885fd7958f

原创产品文章频频更新ing,订阅文章推送,请微信关注:chuangshe_space

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图