search

dive2Pro / Think

＿博客＿
0 stars 0 forks source link

语义化 #9

Open dive2Pro opened 6 years ago

dive2Pro commented 6 years ago

title: 语义化 tags: Html, Semantic, Affordance grammar_cjkRuby: true

Affordance

事物有自身的承担特质

_ _20180513114849

面前有一个茶壶, 被设计成有一个把手, 有一个壶嘴. 把手在生活中的很多地方出现, 所以人们会很容易很自然的通过把手把水壶提起来. 有一个壶嘴, 很自然的也能联想到, 如果把水壶倾斜, 就会有什么东西从壶嘴倒出来. 这些是水壶所具有的特质, 通过它们, 不需要其他人来向你解释这个水壶是如何使用的. 基于它的设计, 人们就有了这样的直觉.

在我们设计和用户交互的ui界面的时候, 比如 按钮, 或者其他的控制组件, 都需要这些拥有Affordance , 通过添加阴影, 调整角度, 让它看起来更像一个真实世界的按钮. 这样用户看到它之后就会知道 oh, 这是一个按钮, 我可以点击它.

在 前端, 我们使用 Html 来呈现网页, 为不同的节点添加它特有的Affordance, 这就是语义化Semantic.

Semantic

语义化

_ _20180513122131

这段代码在 浏览器中显示如右上角所示, 但浏览器同时也会根据它生成一个更Semantic的"界面", 如右下角所示, 这样一些浏览器的功能比如 Screen Reader, 通过它就可以为看不见屏幕的用户提供帮助.

在这个例子中, select有一些通用的 Semantic属性:

_ _20180513122819

通过给 html 组件添加 语义, 可以帮助浏览器更好的认识你的网页. 在浏览器中, 浏览器会对你的网页做两件事情

_ _20180513123107

如图所示, 它会为应用生成页面ui , 并根据页面生成了一个 accessbility tree, 通过 这个 accessbility tree 一些辅助技术就可以为用户提供帮助.

默认语义属性

浏览器中一些原生组件会有自身的默认语义属性:

_ _20180513125152

如果使用语义含义少的组件(比如 div) 来模拟一个 按钮

_ _20180513132047

浏览器读取到的这个组件只是一个"group", 浏览器就没有办法告诉用户这是一个按钮. 这也是为什么语义化这么重要的原因, 我们让组件更具 Affordance, 浏览器就可以帮助我们告诉其他人这个组件是怎么用的.

如何检查组件的语义

在 chrome 中内置了一些实验性质的功能, 但默认这些功能是关闭的, 下面是打开的步骤:

  1. 在chrome中输入: chrome://flags/#enable-devtools-experiments, 勾选这一行

_ _20180513132941

  1. 打开开发者工具, 进入 settings

_ _20180513133046

  1. 勾选对应选项

_ _20180513133127

  1. 重新打开 开发者工具

  2. 搜寻要查看的节点

_ _20180513133443

在`Accessbility` 中就可以看到组件的 `Semantic`属性

HTML5

在html5中添加了很多的语义节点, 这些在网上有很多的资料, 这里收集了一些:

  1. 这是百度的前端顾轶灵的slide, http://justineo.github.io/slideshows/semantic-html/#/1/4
  2. 简洁 https://www.biaodianfu.com/html-semantic.html