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

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 格式后期处理。 Jeremy Keith在 Fronteers 2010 上的主题演讲 今天我想跟大家谈一谈HTM...
    LordZhou阅读 1,152评论 0 17
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,806评论 1 92
  • “Be conservative in what you send; be liberal in what you...
    Rella7阅读 1,172评论 0 2
  • 每天醒来,刷牙洗漱,忘忘镜子里的这张脸,暗黄长斑,两眼无神,嘴唇干燥,谁能想到这是一张不到三十岁的脸。 我,女,二...
    小圆圆爱小黑豆阅读 157评论 0 0
  • import export 这两个家伙对应的就是es6自己的module功能。 我们之前写的Javascript一...
    源大侠阅读 416评论 0 0