分层语义化模板实践

克军http://hikejun.comtwitter: @kejunz

Me.

• 张克军• 前端工程师（豆瓣）• http://hikejun.com

• twitter: @kejunz

L(ayered) S(emantic) M(arkup)

L(ayered) S(emantic) M(arkup)

分层－ 前端的MVC架构

L(ayered) S(emantic) M(arkup)

分层－ 前端的MVC架构

语义－ 合理定义IA

Designer和FrontEnd Engineer都是信息的传达者

demo：http://hikejun.com/work/qq/spec/example_mod_compare.html

PRD

PSD

HTML CSS

PRD

PSD

HTML CSS

PRD

PSD HTML

CSS

PRD

PSD HTML

CSS

PRD

PSD

HTML

CSS

JS

Prototype

交互行为

视觉表现

信息架构

PRD

PSD

HTML

CSS

JS

Prototype

交互行为

视觉表现

信息架构

C - 控制

V - 展现

M - 模型

HTML

CSS

Javascript

内容

视觉(静态)

用户行为(动态)

UI的渐进实现过程

step 1: 搭建HTML根据wireframe和统一的页面布局、模块结构

demo: http://hikejun.com/work/qq/share_8.4/page_naked.png

step 2: 核心样式标签reset，字体，链接，模块容器，通用模块样式（提示、列表、按钮等），页面布局，以及常用的rules(高亮、隐藏、清浮动等)

demo: http://hikejun.com/work/qq/share_8.4/page_base_style_1.png

step 3: 模块统一样式定义产品(或频道)级模块统一样式

demo: http://hikejun.com/work/qq/share_8.4/page_base_style_2.png

step 4: 特色样式页面级专有样式

demo: http://hikejun.com/work/qq/share_8.4/page_base_style_3.png

step 5: 动态效果/交互行为

优点

• 保证整站UI的一致性

• 协作效率更高

• 提高开发效率

HTML一个容易被人忽视的关键角色

与视觉无关

重用demo: http://hikejun.com/work/qq/share_8.23/mod_comp.html

‘精彩视频’重用： http://hikejun.com/work/qq/share_8.23/sports.qq.com.htmlhttp://hikejun.com/work/qq/share_8.23/news.qq.com.html

标准化结构

1. 标准布局结构demo: http://hikejun.com/work/qq/share_8.4/example2/article-layout.html

II. 标准模块结构demo: http://hikejun.com/work/qq/share_8.4/example2/article.html

III. 标准模块demo: http://localhost/~kejun/douban/ui-framework/test/all.html

IV. 新模块的产生（派生和组合）demo: http://localhost/~kejun/douban/ui-framework/test/all.html

批量生产质量均等的页面

产品的UI可以得到统一的控制

协作、可控、效率

Q&A

谢谢！:)