从HTML入手,学习信息架构

Home » 信息设计/信息架构 » 从HTML入手,学习信息架构

不理解信息架构,可能永远是交互设计的门外汉!超文本标记语言Hyper Text Markup Language,是一种简单灵活的信息描述,通过学习和使用它,不但能够建立抽象思维和结构化思维,将屏幕交互的本质融会贯通,更能确立与动效/前端工程师的沟通优势,一劳永逸。

业精于勤,荒于嬉。学习,永远是自己的事!本文并非讲述HTML的学习方法,而是帮助理解它的重要性。

认识标记语言家族

Tim Berners-Lee在1990年制作了世界上第一个网站,由此万维网产生(分不清互联网和万维网?请默哀三分钟)。超文本标记HTML并非是Tim发明的,而是他根据从庞大的标记语言家族剥离出来的。

GML是标记语言的祖宗,衍生出SGML、MathML、(x)HTML、XML、WML、SVG等子孙,娶了XSL、XLST、CSS等儿孙媳妇,繁育出XForms、XPath、XQuery、SOAP、PDF等亚种(相关概念参考Wiki,不太多罗列),反正,几乎所有的编码协议都和标记语言是亲戚关系,甚至物联网、智能家居、智慧交通……都会用到标记语言。

HTML是一种信息架构的描述(编码)

如果读过《不理解「信息」莫再谈「架构」》,一定记得下面这段话:

语言文字是一种特殊的载体,通常意义上说,「任何事物都可以用语言文字准确的描述」,如果描述不清楚,那么人类就会创造出新的词汇,去描述它们。

超文本标记语言HTML,是人类创造的一门语言,允许插入文本以外的图像、多媒体、声音等内容(超越了“只能是文本”,因此叫超文本),目标是让这门语言可以「描述任何事物」。有两类角色可以读懂这种语言(编码):编写者、浏览器。

HTML是一种抽象的文本,基因里就是用来“描述信息架构”的。例如:HTML声明 “这有一张马的照片”(抽象);浏览器读懂这个声明,真的显示一匹马(实例化)。

通过HTML深入理解「语义」

这是对学习信息架构最大的帮助!!!

极其反感DIV+CSS这种说法,粗暴的解释完全抛弃了[语义]这个重要概念,好比把“设计师”说成“美工”,把“厨师”说成“烧菜的”,把“运维”说成“网管”……

其实,每一个HTML标记都有自己的语义,例如:
a=anchor 锚点
p=paragraph 段落
em=emphasized 强调
ol=ordered list 有序列表
dl=description list 定义列表
dt=defines a term定义术语
dd=defines a description 定义(术语的)描述
span=span 一段(范围)
div=division 分段
……

同样,标记当中的属性也有自己的语义
src=source 源
href=hypertext reference 超文本引用
rel=relationship 关系
alt= alternate 替换物
dir= direction 指示(方向)
……

不胜枚举

如果理解这些标记/属性的含义,就可以熟练的知晓基本语义(前提是HTML编写者也同样理解标记含义),比如:

<p>本文章中,Hozin提到了<q>“业精于勤,荒于嬉。”</q><cite>韩愈《进学解》</cite>,并解释了信息架构<abbr title=" Information Architecture">IA</abbr>的正确梳理方法。</p>
<ol>
<li>从需求抽象出概念,把概念实体化;</li>
<li>罗列属性、改变属性的方法,丰富信息架构。</li>
</ol>

翻译成中文语义,大致如下:

<段落>本文章中,Hozin提到了<引用>“业精于勤,荒于嬉。”</引用><文献>韩愈《进学解》</文献>,并解释了信息架构<缩写 标题=" Information Architecture">IA</缩写>的正确梳理方法。</段落>
<有序列表>
<列表项>从需求抽象出概念,把概念实体化;</列表项>
<列表项>罗列属性、改变属性的方法,丰富信息架构。</列表项>
</有序列表>

DOM即是「上下文Context」关系

很多人不太明白《Web信息架构》一书中提到的Context(此Context和程序开发中的不是一个概念);如果理解DOM文档对象模型是什么,并且可以从HTML里提炼出DOM视图,那么就基本可以理解Context了!

例如,上例中DOM大致为

DOM文档对象模型

叙词表的具体使用

受控词表、叙词表,就是一些特定的专有名词,通过记录它们的定义和等价关系,形成了一个排列有序、组织明确的术语网络(也很类似DOM)。HTML中类似abbr、acronym、mark以及dfn、cite等短语元素都是非常具体的叙词表应用,对学习搜索模式也非常有帮助。

DTD语法规则,就是由HTML标记组成的叙词表。

表单设计不再是难事

HTML当中内置了大量为表单预设的标记,甚至在H5当中,已包含简单的表单校验,如果能够熟悉并使用它们,对Web端的交互设计来说,事半功倍。

以下这些标记/属性,对理解表单的交互帮助非常大:

<lebal for=””>标签为 input 元素定义标注;
<fieldset><legend> 给表单项分组;
<optgroup>选项组合;
Maxlength、Placeholder、Accesskey、TabIndex等表单常见属性;

不需要像前端工程师那样精通HTML

前端工程师是炙手可热的职业,他们当然不仅仅需要使用HTML+CSS,还有基于JS的各种脚本语言;HTML是不带有运算功能的,学习起来非常简单。作为交互设计师,常见的几十个标记像家人一样熟悉,看得懂,记得住,能手写;CSS这样的远亲只需要做到面熟即可。

移动交互设计师也需要学习HTML

只要是基于屏幕的交互,都会用到信息架构,作为思维模式的训练,HTML帮助很大。并且绝大部分移动开发人员也是精通HTML的,安卓和IOS控件开发语法,和HTML有近似之处,这对沟通非常有帮助。

在未来几年内,封装H5这种方式会不会替代原生APP,谁也不能保证。艺不压身,有备无患,想想当年那些开发Flash AS的工程师吧!

不一定要学习HTML5

HTML5只是HTML的一个主流版本,根本就不神秘(也不是什么最新的技术,很多年前就有),在前面版本的基础上,H5宽松了一些语法,针对多媒体、画布、表单增加了一些标记和属性,从理解信息架构的角度来说,未必一定要去学习HTML5。

与动效设计师、前端工程师无障碍沟通

无论是写文档,还是做沟通,如果使用一些开发术语,那些工程师们几乎“秒懂”!

请看到本文的交互设计师恶补HTML吧,WUI设计师对CSS也要基本掌握。

标签: ia, 信息架构入门, 交互设计技能

添加新评论