• 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

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

@C7210?:什么是信息架构?简单来讲,信息架构指的是app或网站当中全部信息的组成结构。经过认真梳理的信息架构可以使产品更加易于理解和导航。这有些类似于作家在动笔之前首先拟出故事的大纲,或是建筑师需要以精准的蓝图作为一切工作的基础。

欢迎关注译者@C7210?(高级交互设计师、猫奴、吉他手、鼓手、老狗,现就职于腾讯ISUX)的微信公众号:Beforweb

本质上讲,任何数字化产品,包括网站、app等等,都是信息的集合。信息架构设计通常需要解决两方面的问题,一是怎样使信息更易理解与浏览,二是如何确保扩展性,使其在未来能够承载更为复杂的信息与功能。

拥有良好信息架构的产品在结构上非常坚固。这与建筑是相同的道理 –?从地基和支柱入手,基础便会稳固;基于稳固的基础一步步扩大建筑规模,一切都将有条不紊的从容进行。

以Spotify为例,通过对UI进行解构,我们可以了解其表面之下的基础信息架构:

信息的抽象结构

要实现结构清晰、重点突出的界面设计方案,你必须首先梳理出结构清晰、重点突出的信息架构。作为产品设计师,我们需要在这里承担思考与分析的责任,否则这一重担势必会落到用户身上。

在思考信息架构时,出现在我们头脑中的应该是一系列抽象的信息单元,包括名词与动词等等,而非具体的像素、组件或页面。这样,你很快便会发现,任何产品无非只是信息的集合;而用户怎样理解和使用产品,最终将取决于我们以怎样的方式将这些信息进行整合。

这就像在造句 – 各种名词、动词的组合方式决定着最终能够传达出怎样的信息。

产品也是如此。一个app可以抽象成若干名词与动词的组合,包括“事物”以及“我能对这个事物执行的行为”。其中的名词非常重要,app的信息世界正是由它们组成的。在产品当中,一些典型的名词通常包括:

  • 歌曲
  • 路径
  • 用户
  • 照片
  • 餐厅
  • 账款
  • 友人

而动词则是人们以这些名词为对象所执行的行为,包括:

  • 播放歌曲
  • 创建路径
  • 新建用户
  • 分享照片
  • 点评餐厅
  • 发送账款
  • 添加友人

大体上讲,app界面当中存在着这样一种比例关系 – 绝大多数的界面元素(约80%)用于呈现“名词”;一小部分用于呈现“动词”,即用户可以对那些名词进行的操作。

信息架构的普遍适用性

经年累月,我们发现良好的信息架构通常具有普遍适用性,其中一些原则与模式更是被众多不同类型的产品所采纳。最具典型性的,譬如app的顶级导航需要呈现出产品最重要的功能模块。仍以Spotify为例,这些模块包括“Home”、“Browse”、“Search”、“Radio”和“Your Library”。在你的app当中,哪些模块是最为重要的?试着列出来,并尽量约束在3到5个之内。

我们还意识到,无论产品类型及信息的本质属性是否相同,信息架构总会呈现出相似的架构。譬如我们都知道一种最为常见的模式,当我们沿着信息架构深入导航时,我们总会倾向于从宽泛的“信息面”逐步定位到特定的“信息点”。这种探索信息架构的行为通常被称为“钻取”(drilling down)。

UI虽在进化,但底层信息架构并未发生很大变化

共通模式

在设计过足够多的app、网站或其他数码产品之后,我们会发现各层信息之间的结构其实具有很强的相似性,有时只是信息层级的标题发生了变化。有经验的设计师知道怎样从这些久经验证的结构模式出发来设计产品。本质上讲,这些结构是一种形而上的抽象存在,并非以其中所包含的实际信息为依托。

音乐

照片

“Things”

万变不离其宗

于是,我们可以将这样的抽象结构作为容器,将信息“灌入”其中,然后在表现层面上进行订制处理,使其能够呈现出特定产品的信息独特性。譬如对于照片app来说,信息会以可视化的图片格式作为最主要的呈现形式;而对于金融类产品来说,则以数字格式的内容为主。

打造清晰、稳固的信息架构

Tip 1:明确哪些是最为重要的(以及哪些不是)

不要担心降低一部分信息的重要度,因为只有这样才能将重要信息的优先级提到最高。“对比”是构造清晰度的重要途径,尽可能移除无关紧要的信息,或至少将其优先度将至最低。

Tip 2:从分类结组的角度思考

思考哪些信息在逻辑上适于归属一处,譬如将所有与用户相关的信息归纳于“个人资料”这个概念当中,而不是让它们散落在信息架构的其他分支当中。

Tip 3:适时检视与迭代

随着产品规模与复杂度的提升,要适时检视现有信息架构是否足够适用。很多团队之所以疏于维护信息架构,是因为他们认为这是一项需要孤注一掷的、极端性的工作,譬如“我们很希望整理一下架构,但真的没有足够的资源来重新设计整个app”,这样。不妨试着以“渐进增强”的思路来看待这件事。相比于彻头彻尾的重塑产品,在小处对信息架构进行优化调整,进而提升产品易用性的空间总是会有的。

欢迎关注译者的微信公众号:

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

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

  • 如何规避 Design System 架构设计中的逻辑陷阱?
  • 像做产品一样对Design System进行前期规划
  • 实用经验!移动AR体验设计的特质与挑战
  • 实用全面!教你用Sketch Libraries构建组件库/设计体系
  • Sketch 新出了Libraries功能,以后团队协作更方便了!
  • Facebook设计副总裁:谈谈设计师的职业成功之路
  • 超实用!信息架构基础知识科普手册
  • 好习惯学起来!帮新手提高效率的Sketch高频使用技巧
  • 顶尖高手的经验!Facebook的产品设计师是如何思考的(二)
  • 顶尖高手的经验!Facebook的产品设计师是如何思考的?

相关文章

  • 2018-08-23深邃神秘的网页!当深色系配色遭遇微妙的动效的时候
  • 2018-08-23哟哟哟!学会点线面,排版好方便!
  • 2017-08-06浅谈前端制作中,IE6还有必要兼容吗
  • 2017-08-06对CSS选择器权重的认识(亲测)
  • 2017-08-06前端开发必备:12款浏览器兼容性测试工具推荐
  • 2018-08-23这5种成熟的导航设计模式,可以为用户体验加分
  • 2017-08-06web前端常用操作整理(含JS/HTML/CSS等方面知识)
  • 2017-08-06谁是用户体验的设计者?
  • 2018-08-23实用三步走!如何从程序开发角度做产品的用户体验?
  • 2017-08-06巧用扁平化风格来设计网站的方法

文章分类

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

最近更新的内容

    • 高手的平面课堂!版式设计里的轮廓化技法
    • 看了那么多设计文章,你知道怎么整理知识库吗?
    • 在IE6,IE7 中DIV容器固定高度的使用技巧
    • 滤镜使用之图片透明的css写法
    • AI+AE教程!教你绘制一个超萌的黑人无奈摊手小动效
    • 网页制作常用英文字体
    • 过去十年,我每年都至少失败一次——专访阿里产品经理苏杰
    • 经常被忽略的动效,对于用户体验设计是如此重要
    • 关于门户网站焦点图设计的一些总结
    • Bootstrap之所以广泛流传的11大原因

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

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