当前位置:Gxlcms > html代码 > 从HTML入手,学习信息架构_html/css_WEB-ITnose

从HTML入手,学习信息架构_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:3人阅读

【文章摘要】不理解信息架构,可能永远是 交互设计 的门外汉!超文本标记语言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标记都有自己的语义,例如:

不胜枚举

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

本文章中,Hozin提到了“业精于勤,荒于嬉。”韩愈《进学解》,并解释了信息架构IA的正确梳理方法。

  1. 从需求抽象出概念,把概念实体化;
  2. 罗列属性、改变属性的方法,丰富信息架构。

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

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

DOM即上下文Context关系

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

例如,上例中DOM大致为

叙词表的具体使用

受控词表、叙词表,就是一些特定的专有名词,通过记录它们的定义和等价关系,形成了一个排列有序、组织明确的术语网络(类似DOM)。

HTML中类似以及等短语元素都是非常具体的叙词表应用,对学习搜索模式也非常有帮助。

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

表单设计不再是难事

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

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

不需要非常精通HTML

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

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

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

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

不一定要学习HTML5

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

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

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

本文由 产品100 为你推荐并呈现

文章来源:微信公众号:Hozin

文章作者:鸿津

友情提示:

若出处标注错误,请联系QQ:2977686517及时更正,感谢理解和支持!

少年关注我们的官方微博@产品100和微信订阅号:chanpin100ghsd,有惊喜哦!

人气教程排行