分类： 系统运维
2009-12-14 04:04:46
PDF:
2.
分层语义化模板的简称LSM
分层其实指的就是展现层的MVC结构
语义即指语义化标签和命名，又指结构化数据。目的是更合理定义信息架构。
4.
其实设计师和前端工程师都是信息的传达者。前端工程师并不是完全follow设计。看个例子：
wireframe是交互设计师的语言，视觉是设计师的语言，代码是工程师的语言。其实三者要表达的东西是一致的。
5.
先看看传统的前端开发方式。设计师follow产品经理，前端工程师follow设计师
6.
这种串行方式，当某个环节出问题都会影响后面的环节。实际上，模糊的产品定义导致善变的设计再导致混乱的代码，这种糟糕的连锁效应是经常发生的。
7.
更合理的关系是这样。设计师依据PRD进行视觉设计，同时前端工程师依据PRD设计html结构，当视觉设计完成后再开发CSS。
8.
显然，这种方式最大的特点就是串行变成并行。
9.
从产品设计角度讲，分层就是：信息架构 > 视觉表现 > 交互行为
从开发的角度讲，分层就是：M（模型）V（展现）C（控制）。这个又是和后端完全对应的。
10.
前端的开发过程就像“洋葱皮”似的。从最原始的内容（或数据）一层一层的增强。
11.
所以UI的开发过程应当是渐进的过程。我们看一个实际页面的例子。
12.
第一步根据wireframe和统一的页面布局、模块结构搭建HTML
第二步实现核心样式。核心样式是全站的统一风格，包括：标签reset，字体,链接，模块容器，通用模块样式（提示、列表、按钮等），页面布局，以及常用的rules(高亮、隐藏、清浮动等)。
第三步实现模块的统一样式。产品(或频道)级模块通常都会有自己的统一风格。
第四步实现页面级的专有样式。
第五步实现页面上的动态效果和数据交互。
17.
这种渐进式开发的优点，首先是可以很好的控制每一级UI的的一致性，全站级 > 产品（或频道）级 > 栏目和页面级。
开发和设计可以同步进行。像刚才的例子2到4步对UI样式的实现完全通过CSS实现。
每一级都有很多通用的部分被规范出来。基于统一规范和模式，会使开发效率大大提高。
18.
第一步是最关键的，就是HTML的搭建。
通过代码是可以想象出信息的结构和形式。
22.
LSM可以实现更灵活的前端。这种灵活性除了体现在应对展现形式灵活的变化，另一个方面就是“重用”。
重用是信息的重用，不要误解为风格的重用。
23.
网站重构中很重要的一点就是规范标准的结构和模式。
24.
标准的页面布局结构。这个通常都会做。
标准的模块结构。虽然模块的表现形式多种多样，但仍然可以抽象出一致的结构。
对于模块完全可以进一步归纳和分类，形成标准模块。
27.
新的模块从标准模块组合和派生出来。
28.
最后总结一下。分层使前端更灵活。模块化使前端更有秩序。语义化使信息的重用和二次开发变得轻而易举。建立面向LSM的规范和标准，可以使团队批量生产质量均等的页面，
29.
产品的UI可以得到统一的控制，
30.
同时使团队的协作程度更高，代码更可控，开发效率更高。
用例源码:
