交互设计师怎样理解信息架构

设计文章 / 交互设计 | 发布者: GUImobile

这篇适合交互设计或者对交互设计感兴趣的小伙伴们看。所以我就不解释信息架构是什么了。今天写一下产品信息架构的思考。

任何产品都有信息架构,或繁杂或简单。在文中讨论的时候,我大致把信息架构分为两种来例证。一种是比较简单的信息架构,例如大多ToC产品,微信、QQ音乐、腾讯视频等;一种是比较复杂的信息架构,例如大多ToB产品,运维类产品、客户关系管理系统、业务支撑系统等。我把第一种称为“轻架构”产品,第二种称为“重架构”产品。

轻架构产品,需要提供给用户一个简单明了的信息架构,让用户使用方便、体验流畅。轻架构产品不能让用户迷路,不能带来太多的学习成本,面对海量普通用户要做到可用且效率高。轻架构产品可以通过做减法来聚焦。

重架构产品,需要提供功能完备、结构严谨的信息架构,让用户能通过操作流程以使用各个功能。这样的架构会带来一定的学习成本,有些重架构产品甚至需要对使用人员进行培训。重架构产品的用户群体一般比较聚焦。重架构产品很难通过做减法来聚焦,而是需要对海量功能进行合理整合、灵活布局来聚焦核心用户场景。所以对重架构产品,信息框架更难,且更重要。

我在华为的设计工作包括轻架构产品和重架构产品。

设计轻架构产品的好处是轻松、愉快,用户一般容易共感感知,甚至用户就是你自己。难点在于突破和创新。

设计重架构产品的好处是对交互设计师是一次磨练交互技能的好机会,信息架构越复杂,对交互设计的要求就越高,锻炼效果越好。难点在于,重架构产品需要对业务的理解透彻,业务理解门槛高,海量功能不能做精简,用户是陌生群体, 需要用户研究的支持才能理解用户,信息结构复杂导致交互设计难度高、错误率高、费力。设计重架构产品对全局观的要求非常高。

下面我会根据Jesse James Garrett在“用户体验要素:以用户为中心的产品设计”书中关于信息结构的分类为维度,讲述一下这些结构在用户体验设计的信息架构设计中的作用,并会举一些真实案例来讨论如何使用这些结构以帮助思考。

一、层级结构(hierarchical structure)

从优秀到卓越!交互设计师怎样理解信息架构?

“在层级结构中,节点与其他相关节点之间存在父级/子级的关系。子节点代表着更狭义的概念,从属于代表着更广义类别的父节点。不是每个节点都有子节点,但是每个节点都有一个父节点,一直往上直到整个结构的父节点。层级关系的概念对于用户来说非常容易理解,同时软件也是倾向于层级的工作方式,因此这种类型的结构是最常见的。”

这是最常见的一种方式,树状图、家族图谱等,都是这个路线。这个路线蛮符合大自然的。这个结构相信大部分设计师都使用过,所以普通场景不做过多讨论。这里我想重点讲的是层级结构的一种平衡式使用方式。

什么是平衡式使用方式呢?

这个也是我最近想出来……首先我们知道,层级结构可以带来两种设计思路。

第一种,从上到下。从产品主要愿景,一步一步细分到每个功能特性。

第二种,从下到上。从对用户有价值的功能特性开始,一步一步往上倒推到产品灵魂。

如果你读了我上一篇关于设计流程的思考,这两种方式就是战略层、范围层双向的方式。

第一种很容易理解,战略定了一个大方向,管理层传达并指导,执行层输出,一步一步分解任务直到任务量清晰、执行后得到产品结果。

第二种在重架构产品中使用的不少,例如一个给中国电信客服做的ToB产品,得先了解客服人员每天工作的任务流、操作流、所需模块集合,然后倒推规整为一个一个功能模块,再倒推形成一个系统。

最近我做重架构产品,第二种方法用的蛮多。是有点费脑子,但是嘿嘿,我研究生博弈论这门课是A+呢不怕不怕。lol

这两种方式都有缺陷。

我举一个近期的设计例子,是一个重架构产品,首先,产品的战略层已经确认,换言之,从上到下是合理的思路;但是,产品过于复杂且功能特性多、合作部门跨度大,这时看上去从下到上才是正解。

问题就出现了。如果从上到下分解,到了底层功能特性太多且不合使用逻辑,就紊乱了。如果从下到上倒推,功能特性有组合逻辑,但是到了顶层,产品灵魂又很难对上最开始战略层制定的方向。

怎么办呢?再看一下这个图:

从优秀到卓越!交互设计师怎样理解信息架构?

我把战略层的第一点,最高父节点,称为大将;把底层众多的功能特性称为小兵。现在的问题是,大将下达指令,小兵凌乱;小兵自行组合,大将不能接受结果。所以我想,应该使用最高父节点和底层节点中间的那些点,我称为队长。队长整理小兵,形成合力的队伍,队长对大将负责,在队长层合力融合,最终完成军队的战斗力合成。

这就是我对平衡式使用方式的思考过程。从上到下不行,从下到上也不行,就从中间动手。我们把海量的功能特性与系统架构师确认好,然后通过用户访谈对我们针对的目标用户进行测试,让他们对海量功能特性进行认知并分组。这时候,一个经过系统架构师和目标用户验证的中层结构就定好了。这时候“队长”已经产生。此时,再思考战略层对产品特质、灵魂的定位,顺推合理的中层结构,这时,另一群“队长”也产生了,他们是能实现战略层(父节点)要求的。然后两组“队长”开始融合,从中间出发,对上对下各做调整和妥协,最后得到一个统一信息架构。这个结果的重点是中层结构“队长”。这个中层结构向上能满足战略层的要求,向下能满足底层海量特性功能的实现。

问题解决了。

交互设计需要精进的一个点,就是解决复杂信息结构。解决复杂信息结构的过程和结果,会直接影响交互设计师的设计执行力和设计影响力。

二、自然结构(organic structures)

从优秀到卓越!交互设计师怎样理解信息架构?

“自然结构不会遵循任何一致的模式。节点是逐一被连接起来的,同时这种结构没有太强烈的分类概念。自然结构对于探索一系列关系不明确或一直在演变的主题是很合适的。但是自然结构没有给用户提供一个清晰的指示,从而让用户能感觉他们在结构中的哪个部分。如果你想要鼓励自由探险的感觉,比如某些娱乐或教育网站,那自然结构可能会是个好的选择;但是,如果你的用户下次还需要依靠同样的路径,去找到同样的内容,那么这种结构就可能会把用户的经历变成一次挑战。”

这样的模式在现在的ToC产品越来越多(特别是游戏娱乐产品)。它符合轻架构产品的浏览式形态。

有一种经典的区分用户场景的维度是:任务式、浏览式。

任务式的特点:完成任务、快、准确、效率,例如查询某个航班到达的时间。

浏览式的特点:碎片、时间充裕、逛、发散、不聚焦、注意力吸引式,例如漫无目的地刷微博、看知乎。

自然结构很适合轻架构产品的浏览式形式。因为第一,重架构产品,ToB产品,如果用户需要靠浏览靠猜来使用产品特性完成任务,那肯定结果是不好的,用户会崩溃;第二,ToC产品一般就有两种形态,如果不是任务式,那很有可能就是用户在无聊,需要进入浏览式。

当然,完全自然结构的设计方式很少(不知道最近很火的秘密算不算)。

大部分ToC产品应该是任务式和浏览式并行的。所以自然结构,应该是绑定其他信息结构来思考。

例如腾讯视频。自然结构肯定是应该考虑绑定层级结构来思考。用户进入视频产品,可能的一种使用方式是,用户心里已经有一个明确的思路,找2014年美国电影看,所以用户进入种类选择,选择电影,选择美国电影,选择2014年,然后进行浏览。这个可以算是先层级结构思考、后自然结构思考。

如果用户是在家里喝茶,想看看视频,但是没有任何目的,打开了视频产品,那他们就是进行浏览式操作,这个时候自然架构就产生价值。用户在首页进行无逻辑浏览,从首页某个电视剧点入,看看详情,不感兴趣,从该电视剧的推荐点击到下一个电视剧,然后不感兴趣,然后从这个电视剧的主演想到他正在演出的一个电视真人秀,又跑去综艺里浏览。

每个产品对层级结构和自然结构的偏重是不同的。例如电商类产品,大部分人去天猫是有明确购买目的的,这个时候任务类操作会更重要;但是有没有完全没有购买目的,就是想去天猫花点钱或者找点折扣产品呢?肯定有,但是可能不如第一种用户多。

所以在信息架构设计中,我认为自然结构会是一个重要思考点,因为我们设计师要时刻记得,用户不是理性的,他们很多时候的操作和想法会呈现随机状态。但是自然结构不是唯一的,必须有层级结构、线性结构、矩阵结构等其他信息框架来配合和约束,才能让这个产品的整体信息架构完整、可用、有效。

三、线性结构(sequential structures)

“线性结构来自于你最熟悉的线下媒体。连贯的语言流程是最基本的信息结构类型,而且处理它的装置早已被深深地植入我们的大脑中了。书、文章、音像和录像全部都被设计成一种线性的体验。在互联网中线性结构经常被用于小规模的结构,例如单篇的文章或单个专题;大规模的线性结构则被用于限制那些需要呈现的内容顺序对于符合用户需求非常关键的应用程序,比如教学资料。”

线性结构比较容易理解。更多呈现在帮助文档、产品故事讲述等场景。就不多描述了。

这里我想重点提一下就是线性结构是另外一种练习交互设计逻辑的方法。一个极端是复杂信息架构(层级、自然、矩阵等),另一个极端就是线性结构。如何用连贯的语言方式讲述一个故事,但是不能进行跳转和穿插,要一条线把思路讲清楚,反而不是一件简单的事情。

所以交互设计需要锻炼两个极端的信息架构描述方式。一个是复杂信息架构,充满了层级、跳转、补充、交叉;一种是极简的线性架构,一根主线讲清楚一个故事,甚至是复杂的故事。

四、矩阵结构(matrix structure)

从优秀到卓越!交互设计师怎样理解信息架构?

“矩阵结构允许用户在节点与节点之间沿着两个或更多的“维度”移动。由于每一个用户的需求都可以和矩阵中的一个“轴”联系在一起,因此矩阵结构通常能帮助那些“带着不同需求而来”的用户,使他们能在相同内容中寻找各自想要的东西。举个例子来说,如果你的某些用户确实很想通过颜色来浏览产品,而其他人偏偏希望能通过产品的尺寸来浏览,那么矩阵结构就可以同时容纳这两种不同的用户。然而,如果你期望用户把这个当成主要的导航工具,那么超过三个维度的矩阵可能就会出现问题。在四个或更多维度的空间下,人脑基本上不可能很好地可视化这些移动。”

这个结构非常好理解。这里想讲的是,现在大部分设计团队的KPI评估方式,就是矩阵结构。一方面,向业务线负责,以设计支撑产品商业成功;一方面,向设计线负责,以设计专业经验支撑团队专业影响力建设和技能成长建设。

设计师如何平衡这个矩阵结构管理方式,是设计师成长的关键点之一。

设计师做完一个产品,一定要回头从信息架构层开始往下想,这个产品信息架构你做了什么样的创新、调整,产生了什么价值。不要仅仅拘泥于做界面元素的规范、设计细节问题解决沉淀等。因为信息架构,是交互设计大局观的最好锤炼基石。

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/973/

(0)
Smiler李想Smiler李想
上一篇 2014-10-15
下一篇 2014-10-15

相关推荐

  • Axure官方教程中文版第5课:动态面板介绍-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(5).MP4 新建文件 1、添加一张图片和按钮 2、转换为动态面板并添加状态 3、为每个状态添加一张图片 4、设置点击“Next”按钮时进行下个状态的切换

    2015-01-26
  • 从一次活动设计聊聊交互设计师的3个阶段

    我习惯把一次设计中的阶段性方案保存下来,这便于我回忆设计是怎么一点一点被优化的,也便于我整理设计过程中一些具有共性的问题。今年初我们联手中国电信做了一次送听歌流量的活动。把这个需求交由一个新来的小朋友锻炼锻炼,在这过程中产出的阶段性方案具有问题的典型性,不妨把它们看成一个交互设计师 对交互设计 理解的不同阶段。

    2017-05-22
  • 微信红包后台系统可用性设计实践

    作者:方乐明(现任微信支付应用产品系统负责人,主要从事微信红包、微信转账、微信群收款等支付应用产品的系统设计、可用性提升、高性能解决方案设计等,曾负责 2015、2016 和 2017 年春节微信红包系统的性能优化…

    交互专题 2023-03-03
  • 伦艺交互设计(MA)offer入手,工科出身、完全零基础的她是如何做到的

    对于零基础申请的同学来说,短时间内接触并掌握一个陌生的专业,既需要勇气,又需要决心。这是因为,科班出身的同学申请国外名校尚有难度,更何况是毫无专业基础的同学,过程中遭遇困难、挫折也可想而知。正因为申请难度大,如果能从其他同学的申请过程中吸取成功经验,规避问题,少走弯路,必然会有利于未来申请。本期,简清为同学们请到了拿下伦艺交互设计(Interaction Design Communication)专业offer的L同学,作为一名零基础申...

    2018-04-12
  • IxD案例作品分享:我来也”APP概念设计及动效设计

    本作品作者是来自站酷的设计师羊羊羊8571,本文经过作者本人许可。 转载请与作者联系!取得授权。 “我来也”是一款基于手机LBS属性的移动点名签到应用,利用手机应用解决了老师课堂点名,活动签到,会议签到!在工作…

    2015-07-29
  • 据说这是一个用户体验设计师必须掌握的

      引言:计算出你手机上的内容布局是一件很棘手的事情。桌面设备会给你所有用它工作的空间。但在移动设备上,你只有有限的屏幕空间。用户在滚动屏幕浏览更多内容之前,只可以浏览内容的一部分。 你最终想知道…

    2015-11-22
  • 终极神器!Sketch 一键转成 PSD 格式!

    曾经有很多人问图翼君Sketch转PSD怎么弄?今天就给大家分享一神器,大招一放So easy!工具下载地址关注本公众号回复“39”支持PSD、XCF、Sketch、Any格式使用方法:1、打开神器,选择Open Frome Computer 打开要转换的Sketch文件2、选择你的Sketch文件,工作台会显示你的文件3、选择右上角File  -  选择Save as PSD, 保存成PSD文件。4、保存后,浏览器会自动下载转好的PS...

    2018-04-09
  • 只会简单的Axure操作?6周5次实战,让你做出能拿去面试的原型

    昨天跟一位自学Axure、产品工作半年的朋友聊天,蛮感慨的。她遇到的问题,也是蛮多自学Axure的朋友遇到的问题。你是否也有同样的问题?除了原型图不标准不美观,还深受效率低、交互弱的困扰你也有这位同学的困扰,想快速提升axure能力,做出标准原型、高保真原型?推荐起点学院&腾讯课堂联合打造给产品经理的Axure课程已有2000多位同学学习,学习效果显著Axure零基础也能学,学完画出规范原型产品思维和交互贯穿全程,学完告别画图经理如果你...

    2018-05-07
  • 提高移动应用体验的7个UX设计要点

    ​APP为了提供服务与内容,信用已经成了一种主流方式。但是,在各种服务如雨后春笋般蓬勃发展的市场上,怎样让你的移动应用更有帮助更具关联性,让用户流连忘返就非常有必要了。这一次,我们介绍的是让你的用户获得非常棒的移动应用体验的7个UX设计要点,那么,一起来看看吧。

    2017-05-10
  • UI设计中下拉刷新有什么讲究?

    最早的下拉刷新 设计源自于Tweetie 这款应用的设计,设计师Loren Brichter 是这种令人欲罢不能的交互的缔造者。现在,下拉刷新 的交互几乎无处不在,但即便如此也让人无法轻易忽视它带来的快感。从Twitter 到 Gmail,从QQ到新浪微博,它几乎存在于你触手可及的每一个应用当中。

    2017-05-16