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

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

2014/09/26 14000评论区

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

编者按:今天分享一篇交互设计高级教程,关于产品信息架构的思考,这方面是交互设计师成长的一个关键点,也是交互设计大局观的锤炼基石,文章很有深度,值得用心学习。

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

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

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

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

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

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

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

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

一、层级结构(hierarchical structure)

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

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

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

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

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

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

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

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

设计流程那篇好文戳:《超多干货!国内知名UED团队的设计流程是怎样的?》
see-more-ued-design-flow

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

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

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

这两种方式都有缺陷。

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

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

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

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

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

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

问题解决了。

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

二、自然结构(organic structures)

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

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

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

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

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

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

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

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

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

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

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

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

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

三、线性结构(sequential structures)

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

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

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

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

四、矩阵结构(matrix structure)

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

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

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

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

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

谢谢阅读!

thanks,yoyo  :)

深度好文强烈推荐!

涨姿势!颜色的深度剖析!
《涨姿势!为什么有的颜色看起来非常高档?》

谷歌专业开发者深度访谈!
《谷歌开发者养成记!ANDROID设计师TAYLOR LING深度访谈》

哪种字体更洋气?来一个深度解析!
《设计师必看!为什么英文要比中文在设计中显得高大上》

原文地址:zhihu
作者:@EDC尤原庆
uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量78万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/designer-understand-information-architecture

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计师 扁平化设计 版式设计 交互设计师 界面设计 排版布局 优设大课堂 职场 优设专访 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 用户体验设计 设计趋势 设计规范 海报设计 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里