• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 写给设计师的信息架构基础知识指南

写给设计师的信息架构基础知识指南

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含信息架构,经验分享等相关知识,希望在学习及工作中可以帮助到您

我们每天接触的互联网,其中包含了巨量的非结构化的信息,混沌,庞杂。可是人的大脑实际上是难以察觉、理解孤立存在的东西的,而我们所熟知的数字产品,网页,APP等,其实都是设计师精心设计之后的产物,它们的共同特征是易于使用,且结构化。其中的内容和完整的导航交互系统紧密的结合在一起,用户可以自然地感知、接收、理解。这种协助内容搭建架构的科学,就是我们今天要探讨的,信息架构。

信息架构是什么

信息架构(Information architecture ,IA)是一门组织和构建网络、网站、APP以及社交媒体内容的科学。美国建筑师/平面设计师 Richard Saul Wurman 被认为是信息架构领域的开拓者。现如今,许多致力于构建信息架构的专家们甚至都有了各自的信息架构研究所。信息架构专家们的工作,就是致力于将内容按照更易于人们理解接收的方式来整理和排列。

在合理的信息架构之下,用户可以更加轻松地理解产品内容,调动产品的功能,在不需要太多工作量的情况下获取信息、达成目标。影响内容结构的因素很多。首先,要了解目标受众的需求和细节,将它们的满意度作为优先考虑因素。同时,信息架构还取决于产品类型和相应的公司。举个例子,我们常见的电商类网站和博客就是两种类型的网站,因为两者不同的目标和内容使得它们所呈现出来的信息架构截然不同。信息架构已经成为许多领域的研究基础,包括设计和软件开发。

信息架构在设计中的角色

如今,以用户为中心的设计是一个大趋势,许多设计师都在学习信息架构,在他们看来,这是高效设计的基础。信息架构帮设计师搭建设计项目的骨架。视觉元素,功能,交互和导航都是在信息架构的基础上构建的。事实上,即使是引人瞩目的内容和强有力的UI设计,如果搭配了不合适的信息架构,也无法让产品走向成功。无组织、导航困难的产品都容易让用户在使用过程中感到迷惑,缺乏信息架构的支撑,交互也很容易出现无效的状况,最终导致用户的流失。

许多公司和团队看不到信息架构的重要性,因为他们认为它不切实际。这样的想法并不是没有原因的:信息架构需要时间来构建,而且需要相应的技能来实施到项目中去。强大的信息架构是优质产品的保证,它降低了可用性和导航出现问题的机率。脉络清晰逻辑自恰的信息架构,能够为公司和团队节省时间和金钱,否则他们会在修复和改进上花费大量的时间。

信息架构和用户体验设计

看到这里,有人会问了,信息架构和用户体验设计是一回事么?当然不是,但是两种技术概念是相互关联的。信息架构主要是生成设计项目的框架,能够展现出网站地图式的结构蓝图。UX设计师将这些东西作为基本素材,以便构建出更为细致到位的导航和体系结构。

用户体验比内容结构更加细化,所涉及的层面更多,更加丰富。用户体验设计师旨在创造愉悦的交互模式,让用户在使用过程中体验更加舒适。当信息架构师专注于用户目标的时候,用户体验设计师需要考虑到用户行为、情绪和心理等影响用户目标的方方面面。

简而言之,良好的信息架构是高效用户体验的基础,信息架构的技能对于设计师而言非常重要。

信息架构的组成部分

如果你想为你的产品构建强健的信息架构,那么你需要了解内容的生产。信息架构领域的先去 Lou Rosenfeld 和 Peter Morville 在他们的著作《Information Architecture for the World Wide Web》中探讨过信息架构的4个主要组成部分:组织系统,标签系统,导航系统和搜索系统。

组织系统

在组织系统中,信息被分割成不同的组和类别。这样的系统能够帮助用户更好的预测内容和获取内容,组织架构中主要有三个因素:层次,顺序和矩阵。

层次。我们熟知的视觉层次就是层次的一种。层次的概念是基于格式塔心理理论的,无论是在海报上还是APP中,用户能够根据视觉化的展现,了解每个元素的重要程度,我们的大脑能够根据大小、色彩、对比度和空间位置等因素来区分不同的对象。

顺序。顺序,是结构中为用户所提供的内容路径。内容和功能以一定的顺序构成路径,让用户能够一步步操作,完成任务。最典型的,就是电商类网站中,用户要购买商品所需要完成的一系列任务。

矩阵。由于内容属性的多样,复杂多样的内容可以构成相对复杂的矩阵,用户可以自行选择多样的路径来达成不同的目的。比如在淘宝上,你搜索特定的内容,获得结果列表之后能够根据时间、价格等不同的属性进行排列筛选。

除此之外,内容还可以根据不同的组织方式来进行分组。下面是最常见的分组排序方式:

·按照字母顺序排列
·按照时间顺序排列
·按照主题类型排列
·按照用户类型排列

标签系统

标签系统是同数据展示的方式息息相关的。过多的信息对于用户而言只会产生迷惑和混乱,所以设计产品的时候需要以简单的方式呈现出来。这就是为什么设计师要用简单的标签内容来阐述复杂的数据和概念。举个例子,在网站上呈现公司的相关信息的时候,通常包含电话号码,电子邮件,地址和社交媒体帐号等信息,可是大量的信息不能平铺在一起,所以通常需要通过点击“联系人”的按钮,进入联系人列表,找到特定公司对应的条目,点击查看详情。标签的存在,旨在有效的整合数据和内容。

导航系统

对于导航系统,我们应该是比较熟悉的。导航系统常见于APP和网页,作为一项引导用户抵达特定位置的交互体系而存在。在信息架构中,导航系统是牵涉到多种技术和设计思维的复杂体系,并非一两句话可以简单阐述的。我们会在后续的文章中对这一系统进行详细的介绍和分析。

搜索系统

搜索系统在信息架构中帮助用户搜索他们想要的数据和内容,在网站和APP中也是相当常见的组成部分。搜索系统通常只有在用户不知道如何通过其他路径直接获取特定内容的时候,才会使用。通过搜索引擎,过滤器等组件,最终将用户可能需要的结果呈现出来,这是搜索系统的主要功用。

总而言之,信息架构是用户体验设计中的核心组成部分,高效的信息架构帮助用户快速地浏览、获取内容。

【2017年的设计趋势都在这里】

  1. 《作为8年DRIBBBLE粉,和设计师聊聊未来的视觉趋势》
  2. 《PS教程!教你打造2017年最受欢迎的渐变幻彩风格》
  3. 《趋势抢先知!2017年设计师都在讨论的服务设计到底是什么?》
  4. 《2017年,这5个网页设计风格可能会成为主流趋势》

原文地址:medium
原文作者:Tubik Studio
优设译文:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

优设大课堂

您可能想查找下面的文章:

  • 设计师应该知道的 iOS 设备常见差异化设计
  • 设计师进阶笔记!APP导航的设计套路
  • 设计师想自我提升?高手给你3个方向!
  • 信息架构设计大杀器!超全面的卡片分类法使用指南
  • 在设计流程中,通过这6种方式来运用信息架构
  • 超实用!信息架构基础知识科普手册
  • 实战案例!不同导向型信息架构在产品中的应用
  • 写给设计师的信息架构基础知识指南
  • 五帽架设计原则:历史证明最高效的信息组织方式

相关文章

  • 2018-08-23网易设计师:图表设计,远不止“好看”这么简单
  • 2018-08-23偷偷问你一句:你觉得今年有机会涨薪吗?
  • 2018-08-23UI 设计师接私单后如何报价?这儿有最新的报价技巧!
  • 2018-08-23遵守这8个原则,帮你创建用户友好型表单
  • 2018-08-23单手操作不方便?来看这两个新颖的交互方式是怎么做的!
  • 2017-08-06HTML写链接的时候要始终将正斜杠添加到子文件夹减少HTTP请求
  • 2018-08-23这3个流行趋势虽然好,但依然要注意这些细节
  • 2018-08-23AI教程!手把手教你绘制线条装饰风格海报
  • 2018-08-23UI 新手福利!iOS系统图标栅格系统全方位解密
  • 2018-08-23实战案例!一个简单好用的创意设计流程总结

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 设计师作品集网站中,常见的5个误区和解决方案
    • 那些很熟悉但又叫不出名字的设计法则: 预期效应
    • 从零开始带你掌握空状态设计的正确方法
    • 版式设计中的文字层级怎么学?来看高手的实例演练!
    • IndentationError: unindent does not match any outer indentation level
    • 豆瓣9.4!Netflix这部汇集顶级设计师的纪录片,简直拍成了美剧的级别
    • 16个优点告诉你,为什么表单设计应该用这个方法?
    • 给登录界面做视觉设计?这儿有4个方法+4个案例(附PSD打包)
    • 极简设计时代怎么用分隔线?看完这个分析你就会了!
    • Adobe 文件类型图标改版了?来看背后的设计思路!

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有