给产品经理看的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、最终用户优先

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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,496评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,407评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,632评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,180评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,198评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,165评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,052评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,910评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,324评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,542评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,711评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,424评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,017评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,668评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,823评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,722评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,611评论 2 353

推荐阅读更多精彩内容

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