今天拜读了Jeremy Keith在Fronteers上的主题演讲《HTML5设计原理》,让我对HTML5有了一些了解,也让我发现产品经理懂点技术确实有所帮助。
P·S 如果早点阅读这篇文章,之前工作中一个功能点就不会被程序猿(也是男朋友)忽悠实现不了了。
什么是设计原理?
设计原理就像做产品时所遵循的原则,例如百度音乐的设计原则:“搜的到,能下载”。产品从无到有,从有到优都要遵循这两个原则。
HTML5的设计原理
1、避免不必要的复杂性
极简的doctype
<!DOCTYPE html>
指定文档字符编码
<meta charset=“UTF-8”>
就连最后的斜杠/也省了
2、支持已有的内容
下面四种写法都对:
<img src="foo" alt="bar" />
<p class="foo">Hello world</p>
<img src="foo" alt="bar">
<p class="foo">Hello world
<IMG SRC="foo" ALT="bar">
<P CLASS="foo">Hello world</P>
元素名可以大写
<img src=foo alt=bar><p class=foo>Hello world</p>
属性值可以不加引号
3、解决现实的问题
解决程序猿在开发中经常会遇到的问题,例如要给一整块区域加同一个链接,可以这样写了:
<a href="/path/to/resource">
<h2>Headline text</h2>
<p>Paragraph text.</p>
</a>
再也不用一个元素一个元素去加链接了!
4、求真务实
看看民间已经有了哪些解决设计缺陷问题的约定俗成的方法。例如:HTML5的新增元素可以把导航、底通这种民间命名都已十分规范的div替换掉。
<body>
<header>...</header>
<nav>...</nav>
<div id="main">...</div>
<aside>...</aside>
<footer>...</footer>
</body>
并且内容区块内的H1、H2、H3标签会继承内容区块的样式,不必担心这个块里的标题在整个页面应该排在什么级别,H元素成为了可嵌套的元素。
5、平稳退化
浏览器对不认识的新属性能够退化识别为认识的旧属性。例如:
<video>
<source src="movie.mp4">
<source src="movie.ogv">
<object data="movie.swf">
<a href="movie.mp4">download</a>
</object>
</video>
不支持H.264的可以降级播放Flash。
6、最终用户优先
一旦遇到冲突,最终用户优先,其次是作者,其次是实现者,其次标准制定者,最后才是理论上的完满。
希望有一天我能总结出我的《产品设计原理》。