美文网首页
给产品经理看的HTML5设计原理

给产品经理看的HTML5设计原理

作者: ZoyMonster | 来源:发表于2018-03-03 19:39 被阅读0次

今天拜读了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、最终用户优先

一旦遇到冲突,最终用户优先,其次是作者,其次是实现者,其次标准制定者,最后才是理论上的完满。

希望有一天我能总结出我的《产品设计原理》。

相关文章

网友评论

      本文标题:给产品经理看的HTML5设计原理

      本文链接:https://www.haomeiwen.com/subject/fslxfftx.html