前端开发者也是信息架构师 已翻译 100%

oschina 投递于 2017/02/06 11:11 (共 11 段, 翻译完成于 03-02)
阅读 1912
收藏 30
0
加载中

今年世界 IA 日的主题是“信息无处不在,架构无处不在”。 这篇文章不是介绍你所理解的信息架构师是什么样子:在用户体验领域的人,他可能研究科学技术,探讨分类法。 这是一个我在几年前,当我和残疾人一起开始开展大量可用性测试会议的领悟:前端代码中可用的结构、标签和连接都是信息架构。 人们成功上线的资格清楚无疑地与编写的代码的质量相关。

由信息构成的地方

在信息架构中,我们讨论创建信息构建的地方。 这些地方是由 0 和 1 组成,但我们把它们作为物理结构进行讨论。 我们讨论进入社交媒体平台,在博客中发表文章,获得锁定的环境以及构建应用程序。在2002年,Andrew Hinton 说:

人们在这样的结构中生活和工作,就像他们在家里、办公室里、工厂和商场里生活和工作一样。这些地方不是虚拟的:它们与我们自己的思维一样真实。

25 个论点

我们正在创建依赖于人们生活的重要部分的结构,所以负责任地开展我们的工作是至关重要的。这意味着我们必须正确使用我们的构建材料。 幸运的是,我们最重要的材料,HTML,有良好组织的规范,其中会指导我们如何构建健壮和可访问的地方。 我坚信,最重要的是理解 HTML 的语义。

Tocy
Tocy
翻译于 2017/02/10 09:48
0

语义

“语义(semantic)”这个源自希腊语,含有“重要(significant)”, “意义(signify)”, 以及 “标志(sign)”的意思。在物理领域中,一种结构可以拥有质量这一语义,向我们告知有关于它的一些事情。例如令人感到惊叹的威斯敏斯特教堂( Westminster Abbey )会让我们感到敬畏,而同时它里面也蕴含着很多关于建筑结构和意图和目的。建筑物的体量;石工的质量; 巨量且精致的彩色博弈: 这些都表明创造者们认为该建筑对于他们有多么重要的迹象。你也可以想一下一栋办公楼的一层里面一堆大型、干净、摆设良好、光线明亮的门:它们并不需要有一个“进入”的标识来表达其用途以及阻止人们使用附近的安全出口进入建筑内部。门的设计就表明了它们的用途。有时也可能用更加文字性且缺少启发性质的方法来表达一栋建筑物的目的,但这样做所产生的影响是类似的:有关的目的和用途才是建筑物的重点。

HTML 拥有超过115种元素,其中许多都具有像人、浏览器以及辅助技术表达结构以及能力的语义。HTML 5.1 规范提到了语义,其中说到:

HTML 中所定义的元素、属性以及属性值 … 都拥有特定的意义(语义)。例如“表示有序列表的元素”以及“表示内容所用语言的 lang 属性”。

HTML 5.1 语义、结构以及 HTML API 文档

HTML 内含的语义意味着开发者们可以组织代码来表现结构,创造元素以及标签内容之间的关系,这样就能让人们理解他们所要表达的东西。构造并标识信息以使其对人们有价值、可使用并且可以理解,这就是信息架构所要做的事情。这也是一个前端开发者正在做的事情,而不管他们是否已经意识到了自己正在做这件事情。

LeoXu
LeoXu
翻译于 2017/02/19 12:54
0

信息架构师简要介绍

我们先来研究下信息架构是什么。关于此有许多的解释,而我准备引述 Richard Saul Wurman 的版本。他被视为信息架构之父。在 1976 年他说信息架构师就是:

使用数据组织固有模式,让复杂变简单的人;一个可以通过为信息创造结构和映射以便其他人发现属于其个人的知识路径的人;21 世纪新兴的职业分工需要满足这个时代对于清晰、人类理解以及信息组织科学的倚重。

架构和模式

于我而言,这就清晰地定义了一类开发者:为浏览器或者其它的用户代理(例如屏幕阅读器)创造代码,用来为热门创建一个结构清晰且有途径可循的领域。

正如关于信息架构是什么有许多的定义,信息架构师对于自身也是如此。我会采用来自于《万维网信息架构师第四版》第四版中的定义,在里面作者将其定义为:

  • 共享信息环境的结构性设计。

  • 数字、物理以及跨生态系统中的组织、标签、搜索于导航系统的综合。

  • 塑造信息产品以及支撑可用性、可寻找性于可理解性体验的艺术和科学。

《万维网信息架构师第四版》

LeoXu
LeoXu
翻译于 2017/02/19 13:13
0

对我来说,它描述了前端开发。除了把事情做对,也需要一点艺术来创建一个强大的、可访问的、可用的、可检索的并且令大家都满意的空间。例如,在2015年的浏览器状态会议上,Edd Sowden 谈到了''的可访问性。他发现,稍微使用语义正确的元素来修饰标题,在某些情况下,浏览器将会错判,决定这个``被用于布局,并且不让辅助性技术设备识别到。另一个例子是关于编码实践如何影响内容的可用性和可检索性,由 LéonieWatson 发布的视频 ARIA 如何帮助屏幕阅读器用户。通过使用  ARIA landmark roles,用屏幕阅读器的人能够很快定位并跳到网页上的常用部分。

我们对信息架构师和信息架构的定义提到了模式、规则、组织、标签、结构和关系。目前有很多不同的模型,用来描述这些元素如何对应到他们的基本原理上。Andrew Hinton 在他的“解读上下文”一书中,称之为标签、关系和规则; Jorge Arango 称之为链接(Links)、节点(Nodes) 和 次序(Order); Dan Klyn 使用本体论(Ontology)、分类学(Taxonomy)和编舞术(Choreography)——这正是我们将要使用的。 Dan 对这些术语定义如下:

Ontology:定义和阐述控制我们所传达的意义的规则和模式

Taxonomy:零部件的布局。开发系统和结构,用于处理所有被调用的东西、一切都被排序的地方,以及标签和类别之间的关系

Choreography:零部件之间交互的规则。指定结构能够促进特定类型的移动和交互;预测用户和信息流动的方式,并随时间变化提供下一步行动。

Tocy
Tocy
翻译于 2017/02/27 11:53
0

现在我们知道了一个信息设计师,信息架构,以及信息架构元素的模型。但是编写 HTML 真的是在创造信息吗?或者说它只是数据和元数据之争? 数据在什么时候转化为信息?  Peter Drucker 在他的 Managing For The Future 一书中写到:

… 数据不是信息,信息是赋予了实用性和目的性的数据。

Managing For The Future

如果我们使用正确的语义学元素来标记内容,这就是带有目的性的开发,并建立了关联。比如说,如果我们遵守 HTML 5.1 规范的建议,取代概要算法并使用头部序列来标记头部信息,我们就创建了一个结构。在这一结构中,头部的深度和之前的一个头部相关联。如果设计合理的话,一个元素应当和它的父元素相关联,并以此类推。遵守 HTML 文档规范,我们就可以成功地创建结构化的,可检索的,标签化的文档,并且该文档和用户需求相关联。如果你从未用过屏幕阅读器,你可能想知道页面的头部信息是如何被检索到的。屏幕阅读器赋予了用户使用多种方式和头部信息交互的能力:

  • 通过创建一系列头部的列表,这样用户可以快速浏览页面信息

  • 通过键盘命令来依次遍历某个头部信息

无畏的老巨人
无畏的老巨人
翻译于 2017/02/13 11:54
0

如果我们有关于圣诞节电视的文档,我们可能会像这样来组织它:

<h1>Christmas Day TV schedule</h1>
  <h2>BBC1</h2>
    <h3>Morning</h3>
      <h3>Evening</h3>
  <h2>BBC2</h2>
    <h3>Morning</h3>
    <h3>Evening</h3>
  <h2>ITV</h2>
    <h3>Morning</h3>
    <h3>Evening</h3>
  <h2>Channel 4</h2>
    <h3>Morning</h3>
    <h3>Evening</h3>

如果我使用 VoiceOver 生成标题列表,我会得到下面信息:

一旦我有了这个列表,我可以使用键盘命令基于标题级别来过滤列表。例如,我可以按 2 来查询 ''s:

如果我们没有使用标题,或者如果我们不正确地嵌套它们,用户搜索就不会那么方便了。

Tocy
Tocy
翻译于 2017/02/06 14:24
0

整合在一起

让我们用一个按钮示例把这些整合在一起,示例实现功能为:当按下时,切换链接面板的外观。在网页上创建一个按钮我们有很多方法,但最好的方法是只使用一个``。 每个浏览器都理解它是什么、它是如何工作的、以及应该使用什么键盘快捷键。 [对应元素的 HTML 规范](https://www.w3.org/TR/html/sec-forms.html#elementdef-button)上写到:

``元素表示使用其内容标记的按钮控件。

一个``元素包含的内容包括类型属性、任何相关的 ARIA 属性,以及用户看到的实际文本标签。 这个信息比视觉设计更重要:无论是多么华丽或粗糙的设计,如果底层代码是非语义性的的和标记不好的,人们在使用它时将为此挣扎。这里有三个按钮,每个按钮均使用相同的 HTML 创建,但具有不同的设计:

不管它们是什么样子的,因为我们使用语义的 HTML 而不是一堆无意义的语句,使用辅助技术的人将从中获益。 除此之外,没有任何额外的开发工作,a 是可通过键盘访问的。 我们不必编写事件处理程序来监听按下 Enter 键或空格键,如果我们仿制一个带有非语义元素的按钮,我们就必须这样做。 我们也可以快速找到:例如,以同样的方式,可以用一个屏幕阅读器创建一个标题列表,我也可以创建一个表单元素的列表,然后快速跳转到我想要的位置。

Tocy
Tocy
翻译于 2017/02/13 13:23
0

现在我们有了``,让我们添加用于切换外观的面板。代码如下:

<button aria-controls="panel" aria-expanded="false" class="settings" id="settings" type="button">Settings</button><div class="panel hidden" id="panel">
    <ul aria-labelledby="settings">
        <li><a href="…">Account</a></li>
        <li><a href="…">Privacy</a></li>
        <li><a href="…">Security</a></li>
    </ul></div>

我们使用的是:

  • aria-control 属性用来构建`元素和其所控制外观的面板之间的连接。当一些辅助技术(例如 JAWS 屏幕阅读器)遇到一个使用 aria-control 的元素时,它语音化地通知用户关于受控的扩展元素的存在,并赋予他们将焦点移动到其中的能力。

  • aria-expanded 属性用来表示面板是否可见。使用 JavaScript 将此值切换为 true 则面板可见,切换为 false 面板则不可见。这个重要的属性告诉那些使用屏幕阅读器的人,正在与他们交互的元素状态。例如,当面板可见时,VoiceOver 会通知“设置”扩展按钮,在隐藏时显示“设置”折叠按钮。

  • aria-labelledby 属性用于为列表提供标题“设置”。这可以使一些使用辅助技术的用户受益。例如,屏幕阅读器可以遍历页面上的所有列表,因此能够对其加标题可以提高可查找性。我认为,列表中的三个设置项是比列出三个项更有用的。这样以来,我们同时支持了可用性和可查找性。

  • ``元素用来包含我们的面板中的链接列表。

Tocy
Tocy
翻译于 2017/02/20 10:01
0

看到``的选择包含了我们的设置选项。首先,我们的设置是有关联项的,因此它们属于一个语义组中的结构。最重要的就是列表可以做其他元素匹配。举例来说,模式不是语义上的,且没有结构:

<div><a href="…">Account</a></div>
<div><a href="…">Privacy</a></div>
<div><a href="…">Security</a></div>

在这里,我们看到的三个元素,通过 DOM 依次显示在屏幕上。这样的代码不是健壮的代码,它可以被表示为任何事情。

相对于有序列表或者定义列表, 为什么我们使用一个 无序列表 呢?最直接的 HTML 标准告诉我们原因:

`` 元素代表一个列表项,顺序对于项来说并不重要——把它转变为有序并不能实质地改变文档的含义。

HTML 5.1 元素的标准描述

如果我们移动链接的顺序,在本质上会改变我们文档的含义吗?不会。因此,我的结论是,我们已经在内容中使用了正确结构的元素。

溪边九节
溪边九节
翻译于 2017/02/06 15:44
0

这些编码决策也是信息架构

我们刚才做的就是纯信息架构。回到 Dan Klyn 的模型,我们通过审视意图来实践本体论:

  • 我们想要显示一个交互式元素,它可以控制某元素的显示或隐藏,所以我们使用了含有那个含义的``。

  • 我们在编程中使用 type ='button' 属性来预示按钮并不是 menu、reset 或 submit 元素。

  • 在外观上我们设计了看起来像可与之交互的``,更重要的是,我们没有移除焦点链(focus ring,指用键盘 Tab 导航时,按钮、链接等元素出现轮廓线,指示光标所在。)。

  • 我们使用“Settings”一词来标记``,以便我们的用户能够理解按钮的用途。

  • 我们使用``元素来构造和显示相关项的列表。

我们还通过开发系统及其结构,并在元素之间创建关系来实践分类学:

  • 通过把`元素与使用 aria-controls 属性的面板连接,我们从程序上创建了两个元素之间的关系。

  • 我们在元素中开发了一种结构,通过使用与控制它的外观相同的名称来标识他们。

最后,我们通过创建支持动态和交互的元素来实践编排能力。 我们预估了用户和信息的流动方式:

  • 我们使用了``元素,它是交互式的、开箱即用。

  • aria-controls 属性可以帮助一些使用屏幕阅读器的人轻松地从``转移到它所控制的面板上。

  • 通过修改 aria-expanded 属性的值,我们开发了一个系统,可以把我们的元素之间的关系状态通知辅助系统,比如面板是可见的还是被隐藏了。

  • 无论我们的用户如何与之交互,我们都已经确保我们提供的信息更可用和更容易检索。 无论人们如何“看待”我们的工作,他们都能够在想用的时候使用它,因为我们已经架构了多种方式来访问我们的信息。

Tocy
Tocy
翻译于 2017/02/20 10:35
0
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(2)

喻恒春
喻恒春
十年前我就说手写 HTML, CSS 的也是程序员, 然, 我这观点被喷了十年.
一路南漂
一路南漂
👍👍
返回顶部
顶部